Photoshop kullanan bir web tasarımcısı bir geliştiriciye hangi malzemeleri göndermelidir?


10

Esas olarak web ve masaüstü uygulamaları uyguluyorum ve ilk kez halka açık bir web sitesinde grafik tasarımcı ile çalışmaya başladım. Bu durumda grafik tasarımcı HTML + CSS yapmıyor, Photoshop kullanıyor.

Tasarımın gerçekte uygulanması için normalde ne tür bir malzeme elde edilir?

Örneğin, sadece PSD dosyalarından başka bir şey almalı mıyım? Farklı durumlar (bağlantı vurgulu, etkin durum vb.) Veya duyarlı tasarım hakkında ne dersiniz? Çok teknik detaylar mı bekliyorum?

Herhangi bir yardım takdir.


2
Çok geç sormuyor musun? Bunlar işe başlamadan önce cevaplanması gereken sorulardır.
Scott

Haklısın, sözleşmenin zaten yapıldığına dair izlenim verdiğim için soruyu biraz aldattım. Ödevin ne olduğuna dair sadece bir ön tartışma yaptık ve ikimiz de bunu yapmaya hazırız. Gereksinimlerimi teknik açıdan anlatmam gereken kısım.
Tx3

Yanıtlar:


10

Bir Mock-up genellikle gitmek bilmek geliştirici için teslim edilir. Bu, iş akışına bağlı olarak PSD dosyasından düz bir görüntüye değişebilir. Deneyimlerime göre, kullanılan tüm boyutları, yazı tipi boyutları ve renkleri artı tüm dilim ve kullanılan görüntüler ile düz mockup teslim. Temel olarak projeyi bitirmek için gereken her şey. Ancak bu gerçekten iş akışına bağlıdır. Site çoğunlukla CSS'de yapılıyorsa, başka bilgiler gerekir (degrade değerleri, alt gölge değerleri, görüntü kırpma ön ayarları).

Düğme durumları daima kapsanmalıdır. Nasıl yapılacağına bağlı olarak (tamamen CSS veya dilimler) ya tüm renkleri, yarıçapları ve boyutları ya da dilimleri kendiniz sağlamalısınız.

Duyarlı tasarım biraz farklı. Görünümü tasarlamak sadece bir başlangıç. Geliştiricinin de bilmesi gereken şey, site yavaş yavaş "küçüldüğünde" öğelerin nasıl davranması gerektiğidir. Daha az seçenek görüntülenirse bir menü nasıl davranır? Tam web görünümünde yalnızca liste öğesi nedir, mobil görünümde ekranı önemli ölçüde değiştirebilir. Tüm fareyle üzerine gelme öğelerine ne olur (bunları mobil görünümde kullanamazsınız)?


4

@ KMSTR'ın cevabı% 80 çözümdür, ancak tasarımcınız gerçek bir profesyonel ise, geçiş animasyonlarının ne zaman gerçekleşmesi veya DOM öğelerinin hangi sırada yüklenmesi gerektiği gibi küçük ayrıntılar hakkında spesifik olacaktır.

Tasarımcınız bu ilk% 20'de ise, bazı UX kullanıcı akışlarını ve tel çerçevelerini isteyin veya özellikle yetenekli iseler, After Effects veya Flash'ta yapılan bir prototip. İdeal olarak hiçbir yönü belirtmeden bırakmazlar.


3
"After Effects veya Flash'ta yapılan bir prototip" = veya tercihen HTML, CSS ve JS'de yapılan bir prototip.
DA01

Katılıyorum, bu detayların hepsine dikkat edilmelidir. Temelleri tasarımcıların bakış açısından ele alıyordum. Benim için, bu ayrıntılar, geçmişte ne olacağını dikte etmek yerine, birlikte çalışıldı. Bir tasarımcının geliştiricinin çalışma ilişkisine bağlıdır, ancak kişisel olarak ideal sonuçları bulmak için tasarım ve kodlama gereksinimlerini birleştirmeye çalışarak ileri geri çalışmayı seviyorum.
KMSTR

); @KMSTR kayıt için, sana upvoted
Nipponese

2

Her şey grafik tasarımcı ile ne yaptığınıza bağlı.

Bazı grafik tasarımcıları PhotoShop'tan başka bir şey bilmiyorlar ve büyük bir PSD dosyası dışında bir şey isterseniz kaybolacaklar.

Bazı grafik tasarımcıları HTML, CSS ve JS konusunda bilgilidir ve sizin için her şeyi oluşturabilir.

Sonra aralarında her şey var.

Ortamın daha ileriye dönük düşünme, duyarlı, tarayıcı agnostik ve eskisinden daha esnek tasarımlar üreteceğini anlayan bir web tasarımcısı olarak ikincisine yaslanmanızı tavsiye ederim, ancak birincisi çok uzun süre çalışabilir UI Developer, UI tasarımcısı ile yakın bir şekilde çalışıyor.


2

Önünde ne beklendiğini belirtmelisin.

Ben tamamen psd dosyaları, html / css sayfaları, hatta tamamen dinamik jquery / php / mysql sayfaları teslim edebiliyoruz. Teslim edilen, talep edilene bağlıdır.

Eğer geliştirici sadece bir psd istiyorsa o zaman ben tüm bu teslim ve sayfaları oluşturmak onların işi. Eğer onlar istemezlerse, sayfa oluşturma zahmetine asla gitmem.

Mevcut web sitelerine bırakılabilen tamamen işlevsel sayfalar için bana güvenen bazı müşterilerim var.

Ben onlara gönderilen herhangi bir kodu kullanmayı reddeder ve her şeyi kendileri kodlama konusunda ısrar eden bir geliştirici var bazı istemcileri var, bu yüzden psd dosyaları teslim.

Sorunuz için kesin bir cevap yok. İşe başlamadan önce üzerinde mutabık kalınan şey meselesi.


1

Gerçekten HTML, CSS ve Javascript konusunda bilgili bir tasarımcı istiyorsunuz. Çalıştığım yer asla tek bir photoshop dosyası görmüyoruz. Tasarımcı bize bir URL veriyor, tüm kullanıcı arayüzünü kopyalıyoruz ve ardından sayfayı dinamik hale getirmek için boşlukları dolduruyoruz.

Bunun tercih edilmesinin birkaç nedeni vardır:

1) Tasarımcının ne istediğine dair bir soru yok - herhangi bir yorum numarası veya not yok, bitiş ürününe dokunmadan önce nasıl görünmesi gerektiğini tam olarak görüyorsunuz. Tüm CSS değerleri orada, her javascript işlevi veya animasyonu var.

2) Bu sayfa üzerinde çalışmak için harcamanız gereken her zaman azalır. Evet, yine de yeniden kablolamanız ve belki de arka uçta çalışma dağları yapmanız gerekiyor, ancak ön tarafta önemli miktarda zaman kazandırıyor.

Tabii ki, her zaman birlikte çalıştığınız tasarımcı türünün kontrolü sizde değildir. Ancak sadece photoshop yapan biriyle iseniz, tüm düğme durumlarını gerçekten aldığınızdan ve tasarımcının hangi animasyonları istediğini bildiğinizden emin olun. Umarım, bu tür bir ortamda çalışıyorsanız, yukarı çıkıp tasarımcınızla konuşabilir ve ihtiyaç duyduğunuzda açıklama isteyebilirsiniz.


Tasarımcının bedelini ödüyorum, bu yüzden tasarım kısmı olan yapamayacağım şeylere odaklanmasını istiyorum. Gerekli tüm bilgiler sağlanırsa uygulamayı halledebilirim. Önceden bilmek istediğim şey, tasarımcıdan normalde neyin gerekli olduğunu ve ne zaman çok teknik gittiğini. Görünüşe göre bu gerçekten tasarımcının beceri seti + müşterinin sorduğu şeyle ilgili.
Tx3

Bir kerelik bir anlaşma ise, kaynak PSD'yi aldığınızdan emin olun.
Hanna
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.