Bir grafik tasarımcı ile çalışmanın doğru yolu nedir? [kapalı]

Son zamanlarda, oluşturduğumuz Django + Bootstrap uygulamasının derisini sağlamak için bir grafik tasarımcı (müşteri tarafından düzenlenen) ile çalıştık. Tasarımcı, bazı teknik nitelikleri (yazı tipi boyutları, renkler, birkaç boyut vb.) Açıklayan bir belge ile birlikte yeni düzenin bir dizi statik imgesini sağladı.

Bunu uygulamak için inanılmaz zaman alıcı olduğu ortaya çıktı. Tüm site temelde bir ön sayfa, bir dizin sayfası ve yarım düzine detay sayfası olmasına rağmen, CSS ve HTML değişikliklerini uygulamak için en az 5 gün geçirdim. Bu yüzden uzuv çıkıp buna Yanlış Yol diyeceğim .

Temel yaklaşımım şuydu:

1. Statik görüntü ile mevcut görüntüyü karşılaştırın ve bir fark bulun.
2. CSS / HTML'de hangi değişikliğe ihtiyaç duyulduğunu tahmin edin
3. Bu değişikliği yapın
4. 1. adıma gidin.

Belirli sorunlardan bazıları, tasarımın 8 sütundan 12'ye bir değişiklik içerdiğini, bazılarının yanlış formatta (.png'ler farklı tarayıcı / platform kombinasyonlarında farklı şekilde işleyebildiğini), Bootstrap'in stilini geri almaya çalışan güçlükler içerdiğini anlamamıştı. Her zamanki CSS piksel mükemmel renderleme elde etmek için güreş. Ve bazen belli bir davranış için HTML şablonlarını yeniden düzenlemek zorunda kaldım.

Doğru yolu nedir

Şirketimde, bu işte uzmanlaşmış birkaç kişi var.

Onlar tasarımcılar. Ve HTML'yi biliyorlar. Tasarımcılar ve ön uç mühendisler arasında bir köprü olabilirler; bunlar genellikle. Bu şekilde, sadece HTML'lerini entegre etmeliyiz.

Bu zor bir iş. "24 saat içinde PSD'den HTML'ye" gibi sitelerin iyi çalışmasının bir nedeni var. Şirketimizdeki çözüm, bu konuda uzman kişilerin bulunmasıdır. Bizim için HTML ile çalışmak bir esinti.

Gümüş mermi yok.

Bir "doğru yol" olduğundan emin değilim, ancak bir tasarımcıyla işbirliği yapmanın makul derecede etkili bir yolu, ilk önce şablonları kullanan ve tüm şablonların kolayca değiştirilmesine olanak sağlayan stilsiz bir sistem oluşturmaktır. Ardından, işlevsel ancak bir arada olmayan (veya çok az biçimli) bir arayüze sahip olduğunuzda, sonuçları stil için tasarımcıya teslim edersiniz.

Bu tür bir tasarım modelinin iyi bir örneği jQueryUI ( http://jqueryui.com/ ) olacaktır.

Öncelikle, şu ana kadar web ön uçlarıyla hiç çalışmadığımı itiraf etmeliyim.

Ancak, siz ve tasarımcı için son tasarımın nasıl görünmesi gerektiğine dair bir kanıt yazmanın iyi bir uygulama olabileceğini düşünüyorum. Bu şekilde daha tutarlı olduğundan emin olabilirsiniz, çünkü her sayfa için farklı tablolar açıklıyor olsaydı kokardı. Prose, uygulamanızı kolaylaştırabilir, çünkü aslında uygulamanıza görüntülerden daha yakın olan kod yazıyorsunuzdur.

Ayrıca tasarımcının tüm sayfalara değil bileşenlere odaklanmasını sağlayın. Bir sayfanın bileşenlerini doğru alırsanız, bunları tüm sayfaya oluşturmak çok daha kolay bir adımdır.

Birkaç tasarımcıyla birlikte HTML / CSS geliştiriyorum ve daha önce de belirtildiği gibi "gümüş mermi" yok. Çalıştığım tasarımcılar html / css hakkında pek bir şey bilmiyordu. Bazıları web tasarımı konusunda bazı deneyimler yaşadı ve şunu söylemeliyim ki, bu bilgiye sahip olduklarında, UX'in duyarlılığı söz konusu olduğunda, her zaman geliştirilmesi daha kolay ve "daha iyi bir web sitesi" ile bitiyor.

Bir web sitesi arayan bazı şirketlerin bilmediği / görmezden geldiğini tahmin ediyorum: herkes onun temel bir bilgiye sahip (veya hatta hiçbiri, evet de gördüm) bir grafik tasarımcı / web geliştirici / web tasarımcısı / kullanıcı tasarımcısı olduğunu söyleyebilir. Oysaki "gerçek olanlar" fazladan bir mil uzaklaşabilir ve sürdürülebilir, etkili web siteleri üretebilir. Müşteriyi "eğitmeye" çalışıyorum ve Web tasarımcılığının grafik tasarımcıların sahip olmadığı "sadece baskı" becerilerini içerdiğini açıklıyorum. Bu işe yaradığında, müşteriyi, birlikte çalıştığım ve ortak bir iş akışına sahip olduğum tasarımcılara yönlendiriyorum.

Bu, çoğu kez, grafik yetenekleri olan ve web tasarımı becerisi olmayan insanlarla web siteleri kurmanızın birçok nedeni olduğunu söyledi. Bu durumda, en iyi yolu ben kodlama zamandan tasarruf ve undevellopable düzenleri ile bitirmek değil bulduk etmektir tasarım sürecine dahil edilmesi ve tasarımcı ile iletişim kurmak ve / yapamayacağını ve ne iyi / daha basit ne olacağını açıklamak senin bakış açından.

Bu, bazı durumlarda organize edilmesi zor olsa da, müşteriye ve tasarımcıya, "web tasarımının bir web projesinin büyük kısmını oluşturduğunu düşünüyorsanız, zamandan, paradan ve baş ağrılarından tasarruf etmeyi bıraktığınızı" ve bunu yapacağınızı açıklamak büyük önem taşır. zaman ve paradan tasarruf etmek için tasarım sürecinde yer almaktan mutluluk duyarız.

Çoğu projede takip etmeye çalıştığım iş akışı bu:

1. Tasarımcı yoksa, grafik standartları oluşturur (genelde burada yer alamıyorum. Tasarımcıyı web uyumlu fontlara (google fontlar gibi) yönlendirmeye çalışıyorum.
2. Tasarımcı tarafından yapılan Mokup. Buraya dahil oluyorum ve müşteri görmeden önce web uyumlu düzenler (özellikle duyarlı olanlar için özel) oluşturmak için tasarımcıyla birlikte çalışıyorum .
3. istemci mokup'ı doğrular
4. Mokup'ı kodlarım

Tasarımcı ile iletişim kurmak ve onunla çalışmak için harcadığım zaman kodlama sürecinde kaydedildi ve bu daha basit, daha bakımı kolay ve düzenli bir kodla sonuçlandı.

Bu, cuma akşamı sizi arayarak müşterinin gördüğü ve şimdi bu cümleyi isteyen çok güzel bir mokupla sizi arayarak mutlu bir tasarımcıdan kurtarmaz: "Hey dostum, bunu benim için kodlar mısınız, son tarih ... dün! " Sonra tüm teori dağılır ve o anda iş arıyorsanız, tüm hafta boyunca bir başörtüsü için iyisindir.

Sonuç:

Projeyle ilgili olmayan herhangi bir koddan çok farklı olduğunu sanmıyorum, diğer insanlarla çalışmanın en iyi yolu onlarla iletişim kurmak.

Bir grafik tasarımcı tam yığın web geliştirici döndü, benim için bu şimdiye kadar kolay bir parçası olmuştur. Bir UX tasarım ekibi ile ürünü uygulayan geliştiriciler arasında bir iletişim boşluğu olduğunu çoğu zaman buluyorum. Tabii, belgeler yardımcı olur, ancak bazı stratejilerle ilgili yüz yüze konuşmalar gerçekleştiğinde süreç daha doğal hissetmeye başlayabilir. Ayrıca, zamanın herkes için kıt olduğunu biliyorum, ancak tasarım ve yerleşim aşamasına katılmaya çalışın. Bir tasarımcı ile geliştirici arasında iletişime ihtiyaç duyulduğunda bu çok yardımcı olabilir. Proje, daha fazla birleşik bir ekip çalışması ve "Peki, benim işimden, duvarın üzerinden geçti" senaryosundan daha azını alır. Tasarım ve geliştirme çalışmalarının paralel olarak gerçekleşmesini çok faydalı bulduğumu, Tasarım ekibini, sürecin başlarında size tel kafes tedarik etmeye teşvik edin. Bu şekilde, yalnızca düzen ve konumlandırma ile ilgilenen bir stil geçişi yapabilirsiniz. Sonra, sağduyucular daha zengin ve eksiksiz hale geldikçe. Görünüm ve diğer stil özellikleri için başka bir CSS geçişi alın. En azından bu, herşeye bir anda odaklanmak zorunda kalmamanızı sağlıyor.

Benzer bir sorunla karşı karşıyayım. Greasemonkey veya Tampermonkey gibi araçların bu amaçla kullanılabileceği fikrine sahibim. Daha geçen hafta, bu fikir hakkında yorum istedim: Dinamik bir Web uygulamasının kullanıcı arayüzünü nasıl dış kaynak kullanmalı? , ancak tatmin edici tepkiler alamadım.

Bu araçlarla bir sayfaya CSS, HTML ve Javascript enjekte edebilirsiniz. Benim düşünceme göre, çalışma sitesinin URL'sini tasarımcıya verir ve karşılığında Greasemonkey komut dosyalarını beklersiniz. Teorik olarak bunları çok hızlı bir şekilde mevcut siteye entegre edebilmelisiniz. Bu şekilde, HTML ve CSS'yi yazmak ve sitenin gerçekten çalışmasını sağlamak tasarımcının işi olacaktır. Bu, tasarımcı tarafında çok daha fazla programlama becerileri gerektirir.

Bu fikrin çok fazla özen gerektirdiğini biliyorum. Ancak bunu henüz denemedim ve başkasının bunu yapıp yapmadığını bilmiyorum. Uygulamayla ilgili bazı sorunlar olabilir.