Tasarımcılara Sevgiyle (Bir Ön Uç Geliştiriciden Bir Mektup)

Sevgili Tasarımcılar,

Bu mektup yıllardır hazırlanıyor. Bunun bir kısmı, uzun bir süre boyunca çeşitli tasarımcılara sözlü ve yazılı olarak iletildi.

Bununla birlikte, birlikte çalıştığım mevcut tasarımcı veya müşteriyi etkileyeceği korkusuyla yayınlamaktan her zaman korkmuşumdur. Bu yüzden devam etmeden önce, bunun belirli bir şikayet değil, 18 yıllık anlaşmazlıkların ayrıntılı bir listesi olduğunu vurgulamak istiyorum.

Neredeyse yirmi yıldır birlikte çalışıyoruz ve bana gönderdiğiniz her PSD dosyasında (aşağı yukarı) aynı sorunlar var. Sana işini öğretmeye çalıştığım için beni bağışla.

Size grafik veya estetik hakkında bir şeyler öğretmeyi düşünmüyorum. Tipografi, okunabilirlik veya beyaz boşluk kullanımına girmeyeceğim.

Bunun yerine, emeğinizin meyvelerinin benimkini nasıl bilgilendirdiğini açıklamak istiyorum.

Tasarımları piksel mükemmelliğinde web sayfaları olarak yeniden üretmek için nelerin gerekli olduğunu hatırlatmak isterim. Tasarım dosyalarınızın dokümantasyon için nasıl kullanılacağını ve oluşturduğunuz görüntülerin kullanılan teknolojileri nasıl belirlediğini – en temel ölçeklenebilirlik ve performans seviyelerine kadar – anlatmak isterim.

Ayrıca, hızlı ve kolay bir şekilde neler yapılabileceğini ve tüm üretimi bir taramaya sürükleyecek ek yük oluşturacak olanı göstermek istiyorum.

Ve hepsinden önemlisi, şu anda yarattığınız resmin , etkileşime giren ve tepki veren, binlerce farklı bireyle iletişim kuran, onlara öğretmesi ve onlardan öğrenmesi gereken bir canlıya dönüştürüleceğini hatırlatmak isterim. Onları mümkün olan en zahmetsiz şekilde. Hem onun için hem de onlar için.

Dokümantasyon için Tasarım

Öncelikle şunu hatırlatmak isterim ki, ürettiğiniz PSD dosyaları sadece müşterinin onaylayacağı görsellerin kaynağı değil, aynı zamanda geliştiriciler için teknik dokümantasyon ve kaynak materyallerdir . Bu nedenle lütfen katmanlarınızı ve gruplarınızı düzenli, düzenli ve adlandırılmış tutun.

Tasarımınıza açıklama ekleyin. Kullandığınız kurallarla ayrı bir dosya oluşturun veya bunları ayrı bir gizli katmana not edin.

Hangi yazı tiplerini ne için kullandığını söyle. Hangi renklerin, boşlukların ve bağlamların kullanılacağını bana bildirin. Bilmem gerek.

Ayrıca, belirli bir özellik için herhangi bir tasarım yapılmadıysa, neyin tahmin edileceğini bilmem gerekiyor.

Sanırım söylemeye çalıştığım şey şu: Mümkünse, tasarladığınız ürün için kısa bir stil kılavuzu oluşturun.

Her ikimiz için de, başlıklar gibi standart metin blokları eklerken, etraflarındaki boşlukları belirtmek için arkalarına bir dikdörtgen ekleyin. Bu, onları her seferinde tutarlı bir şekilde yerleştirmenizi sağlamalıdır. Bu çok fazla iş ise, en azından belgedeki hangi örneğin canon olduğunu belirtin.

Başlıkların, görsel olarak yerleştirildikleri tek örneğe uymaları için gözle yerleştirildiğini ne sıklıkta bulduğumu size söyleyemem, ancak ölçüldüğünde, her birinin kendi bireysel aralığı olduğunu ortaya koyuyor.

Aynı şey içerik blokları için de geçerlidir. Farklı içerik bloklarından oluşan bir listeniz varsa, lütfen bunları tutarlı bir şekilde boşluk bırakın.

İçerik için Tasarım bölümünde size daha fazlasını anlatacağım, ancak lütfen başlıklarınızın her zaman bir satırda olacağını varsaymayın ve bu bilgileri dosyada kullanın.

Yazı tipi boyutu 22px ve satır yüksekliği 92px olan (belli ki ana sayfa başlığından kopyalayıp yapıştırılmış) bu başlıklarla karşılaşıyorum. Seçtiğiniz ayarlar, dışa aktarılan dosyayı görsel olarak değiştirmeseler bile alakalıdır.

Teknoloji için Tasarım

Bunun iki yönü var: Ne yapılabilir ve ne ortam için uygun .

Web sitesi geliştirme için teknik olarak her şeyin mümkün olacağı noktaya hızla ulaşırken (başka bir şey olmasa da, tuval kullanarak piksel piksel çizebilirim) bu çözümlerin çoğu üretime hazır değil .

Birinin bir demo sayfası için WebGL 3D ile CSS bulanıklık artı filtre maskelerini başarıyla birleştirdiği bir örnek bulmuş olmanız, bunu tek sayfalı bir uygulamada tam pencereli paralaks paneli olarak kullanabileceğiniz anlamına gelmez.

Ve gerçekten en uç noktada yürümek istiyorsanız, tasarımı onay için göndermeden önce lütfen geliştiricinize danışın. Aksi takdirde, müşterinin daha azına razı olması zor olacaktır.

Yine de gerçekten kenarları test etmek istiyorsanız ve eğlenmek için denemek istiyorsanız, özel olarak benimle iletişime geçin. Ben de senin kadar böyle şeyler yaratmayı seviyorum. Sadece bu şeyleri bütçeli bir üretim projesine koymayın.

Bunların ötesinde – yapılabileceklerin sınırlarını test etmenin ötesinde, yapılması gerekenler konusunda duyarlı ve duyarlı olmaya çalışın.

Siz bir grafik sanatçısı değilsiniz; Sen bundan daha fazlasısın, sen bir tasarımcısın.

Onu yalnızca belirli bir şekilde görünecek şekilde tasarlamakla kalmaz, aynı zamanda belirli bir şekilde çalışacak , iletişim kuracak ve belirli bir şekilde davranacak şekilde tasarlamanız gerekir.

Her yerde tasarımcıların aşina olduğu klişeye gitmek için: Hiç kimse üzerine oturamayacaksa, muhteşem görünen bir sandalyenin ne anlamı var ?

Bir resim yerine bir tasarım olması için tasarımınıza yükleme hızı, uygulama hızı ve kullanım kolaylığını dahil etmelisiniz.

Yalnızca HTML ve CSS ile mümkün olduğunca çok şey elde etmeye çalışın. Photoshop'ta bulunan hoş görünümlü özellikleri kullanmaktan kaçının. Karıştırma kullanmayın! Sahte kalın ve sahte italik kullanmayın.

Öğenin bir görüntü olmasını istemiyorsanız, en basit gölgeler dışında hiçbir şekilde filtre kullanmayın.

Karışık renk dolguları kullandığınız için renkleri hesaplamama veya seçmeme izin vermeyin. Lütfen bindirme harmanlamayı kullanarak saydam görüntüleri taklit etmeyin; Aslında sitede şeffaf bir görüntüye ihtiyacım var.

Bootstrap gibi bir ön uç çerçevesi kullanıyorsak, bu sorunların çoğu zaten çözülecektir, bu yüzden nasıl yapıldığını ve nasıl değiştirilebileceğini öğrenin. İlgisiz bir şey tasarlamak için istemeden gitmeyin.

Tasarımınız çerçevenin yaptıklarıyla uyumlu değilse, onu uygulamak tasarımın uygulanması değildir. Bunun yerine, çerçeveyi seçici olarak geçersiz kılıyoruz, böylece tasarımımızla uğraşmıyor ve ardından onu sıfırdan uyguluyoruz. İş yükü yarıya inmek yerine ikiye katlanır.

Son olarak, sitede üçten fazla yazı tipi veya yazı tipi varyantı kullanmayın. Her biri kendi normal ve italik varyantlarına sahip altı farklı ağırlığa ihtiyacınız varsa, artık web için tasarım yapmıyorsunuz demektir.

Etkileşim için Tasarım

Bu çok büyük bir şey. Ve bu mektup aslında sadece bu konu için yazılmıştır. Kullanıcıların ve işlevselliğin etkileşimde bulunabileceği tüm yolları gerçekten bilmek ve anlamak zorundasınız.

En basit şeylerle başlayalım: bağlantılar.

Bağlantıların yalnızca iki durumu yoktur.

Aldığım navigasyonda, her zaman bağlantılar için tasarımlar ve aktif bir bağlantı (geçerli sayfa) sağlıyorsunuz.

Diğer durumlarda, genellikle temel ve vurgulu durumları sağlarsınız.

En az kullanıcı dostu olmak istiyorsanız, temel, vurgulu ve odak durumları için farklı tasarımlara sahip olmalısınız ( ziyaret edilen ve aktif ayrıca UX için olması güzel). Ve navigasyon için, bir bağlantı ve bir aktif bağlantının her biri yukarıdaki durumların tümüne sahiptir .

Oh, ve durumlar arasında bir bağlantı düzenini değiştirmeye cüret etme (değişen sınır genişliği, dolgu ve benzeri).

Benzer şekilde, bir düğme gibi görünmüyorsa, arka planı yoktur. Dönem. Bir satır içi metin öğesini doldurmak bir karışıklıktır ve dolgusuz metin arka planları asla yapmaz.

Bunu mobilde kullanacağımız için, ayrı etkileşimli öğeler arasında yeterli boşluk olduğundan ve her bir hitbox'ın yeterince büyük olduğundan emin olun. Her eksende minimum 42 pikselin norm olduğunu düşünüyorum.

Görünmez bir dikdörtgen veya hitbox'ları gösteren gizli bir katman çizin; çakışmadıklarından ve kullanıcı etkileşimlerinin açık olduğundan emin olun.

Form öğeleri daha da kötüdür.

Gördüğüm en yaygın durum radyo düğmeleri ve onay kutularıdır. Standart olanlar çirkin! Yani, kendinizinkini tasarlıyorsunuz ve bana kontrol edilmiş ve kontrol edilmemiş bir durum veriyorsunuz ve kendinizi bitmiş sayıyorsunuz.

Ancak, bir onay kutusu için çok boyutlu bir durum tablosunun tamamı vardır ve her biri kullanıcıya görsel olarak belirtilmelidir.

Aşağıdaki durumlara sahibiz:

• İşaretli veya işaretlenmemiş
• üzerine gelin ya da değil
• Odaklanmak ya da değil
• Etkin veya devre dışı
• Hata ya da değil

Bunların her biri diğerleriyle birleşebilir.

Devre Dışı, bazı kombinasyonları engeller (fareyle üzerine gelme ve odak, devre dışı bırakıldığında genellikle önemsizdir) ancak hepsini değil (işaretli-devre dışı-hata, bir onay kutusu için tamamen geçerli ve bilgilendirici bir durumdur). Böylece, toplamda en az 20 farklı durum vererek, 16 etkin ve dört devre dışı durum elde ederiz. Örneğin, bana genellikle verdiğiniz durumlar, bu kurulumda işaretli-etkin değil-etkin değil ve işaretlenmemiş-etkin değil-etkin değil şeklindedir.

Diğer form öğeleri, işaretli-işaretsiz durumuna sahip olmayabilir, ancak boş olabilir veya boş olmayabilir (yer tutucu metni gösterir). Ayrıca daha karmaşık bir bilgi durumuna sahip olabilirler, böylece hata-olmama durumu, nötr-uyarı-hata-başarısı kadar karmaşık olabilir.

Ardından, bunun üzerine, etiketler, giriş yardımı ve hata metni için açıkça tanımlanmış bir düzen ve tasarım ile birlikte zorunlu veya isteğe bağlı göstergelere sahip olmalısınız.

Ve gerçekten kullanıcı dostu olmak istiyorsanız, kullanıcının verileri hiçbir zaman sağlamadığını veya verilerin zaten saklandığını veya değiştirildiğini ancak henüz depolanmadığını belirten bozulmamış-küme-kirli durumlara ihtiyacınız vardır.

Söylemek istediğim şu: Etkileşim için tasarım yapmak zordur. Ve radyo düğmelerinin nasıl göründüğünü değiştirmek istiyorsanız, bunu iki durumla kolayca yapmayın.

Etkileşim için tasarım konusunda son bir nokta: Etkileşimin nasıl göründüğüne karar verin. Anlamı, etkileşimli öğeler için hangi kuralları kullanacağınıza karar verin ve bunları başka hiçbir şeyde kullanmayın.

Hayır, özellikle önemli içeriği vurgulamak için aynı çözümü kullanacaksanız, bağlantıları belirtmek için birincil marka renginizi kullanmanıza izin verilmez!

İçerik için Tasarım

Lipsum içeriğiyle doldurulmuş her bir öğenin ideal düzeni, müşteriye görsel stil üzerinde onay alması için bir resim sunmak için yeterince iyidir. Ancak içerik tasarımı ne orada başlar ne de orada biter.

İçerik düzeniyle ne yapmak istediğinize dair kabaca bir fikriniz olduğunda, dinamik içerikle çalıştığınızı unutmayın. Her içerik parçası için kontrol etmeniz gereken iki durum vardır:

• Peki ya çok fazla varsa?
• Ya çok az varsa (ya da tamamen eksikse)?

Başlık gülünç derecede kısa veya alışılmadık derecede uzunsa ne olduğunu kontrol edin. Önemli öğeler eksikse içerik bloğu nasıl görünmelidir? Peki ya resim yoksa?

Bir sayfa bölümü için içerik yoksa, tüm bölümü (başlık, kapsayıcı ve tümü) kaldırıyor muyuz yoksa bölümü tutuyor ve "Henüz makale yok, daha sonra tekrar kontrol edin?" satırlarında bir şey mi gösteriyoruz? Daha da iyisi: “Bu içerik geldiğinde bilgilendirilmek ister misiniz? Bültenimize kaydolun!”

Kararları ver! O zaman o şeyleri tasarla!

Harici veya dinamik bir kaynaktan yüklenen bir besleme veya içerik tasarlıyorsanız, tüm hataları ve bildirimleri eklemeyi unutmayın. Aslında, sayfa bildirim meta içeriğini küresel olarak nasıl göründüğünü gösterecek şekilde tasarlayın, ardından bir şeyler ters gittiğinde kullanıcıyı bilgilendirmek için bu tasarım kurallarına bağlı kalın.

Sabit genişlikli düğmelerden ve sabit yükseklikteki metin bloklarından kaçının. Ve eğer daha önce söylemediysem, bunun her zaman tek satırlık bir metin olacağını düşünüyorsanız, yanılıyorsunuz! Şimdi, onu çok satırlı yapmanın en iyi yolunu kontrol edin.

Aynı içeriğin aynı yapıya sahip olduğundan emin olun.

Aynı başlık birden fazla yerde görünüyorsa, bir kelimeyi bir durumda, diğerini başka bir yerde kalın yazmayın!

Aslında, başlıkların içindeki yapıları biçimlendirmekten tamamen kaçınmaya çalışın. Benzer şekilde, metni bir yerde elle bölmeyin, başka bir yerde farklı şekilde bölün. Aslında, metni elle kesmeyin!

Bunlar tasarımınızı daha iyi hale getirebilir, ancak içeriğin büyük olasılıkla bir CMS aracılığıyla girileceğini ve onu giren kişinin, yayınlanana kadar nasıl göründüğünü göremeyebileceğini veya manuel olarak kıracak araçlara sahip olmayabileceğini unutmayın veya metni biçimlendirin.

Nihai içeriğin sahip olacağı kısıtlamalarla aynı şekilde tasarlayın – sabit genişlikli metin kapları ve otomatik kelime kaydırma. Bu şekilde çirkin görünüyorsa, tasarım iyi değildir.

Duyarlılık için Tasarım

Bu son zamanlarda çok ilerledi. En azından mobilin gerçekten tasarlandığı durumlarda. Gittikçe daha fazla, önyüklemenin bunu çözmesine izin veriyoruz ve çatlaklara yara bandı yapıştırıyoruz.

Ne olursa olsun, bilmeniz gereken birkaç basit prensip var.

İlk olarak, mobil ve masaüstü varyantları ayrı sayfalar değildir. Bunu bildiğini biliyorum. Onlar sadece aynı sayfanın yeniden akışlarıdır.

Basitçe söylemek gerekirse, sola hizalanmış metinle çalışmakla aynıdır. Cümle, siz onu daha küçük bir kaba yerleştirdiğiniz için kelimelerin veya harflerin sırasını değiştirmez.

Ayrıca, içerik grupları tüm düzenler arasında paylaşılmalıdır. Sütun eklerken sütun sonlarının tutarlı olduğundan emin olun.

Ayrıca, kurallarınız sayfanın farklı sürümleri için aynı yapıyı izlemelidir. Yani, iki öğe bir masaüstünde aynı görünüyorsa, mobilde de aynı olmalıdır.

Oh, ve eğer paralaks istiyorsanız, lütfen hareket edebilecek kadar büyük bir resim sağlayın. Resmi, müşteriye gösterdiğiniz dosyada tam olarak görünecek şekilde sığdırır veya kırparsanız, hareket edecek hiçbir şeyim kalmaz.

İstisnaları Tasarlama

Elbette istisnalar her zaman mümkündür. Ayrıca, ürünün çekici ve etkili görünmesi için gereklidirler. Ancak, bunları tek tek ilk geçişte eklemeyin.

Kendinizi aynı tasarım problemini tekrar tekrar çözerken bulursanız, özellikle her durumda farklı bir çözüm ararsanız, bu işe yaramaz.

Yukarıdakilerin hepsini yaptıktan sonra, verimli, istikrarlı ve tutarlı (biraz sıkıcı olsa da) bir tasarım elde etmelisiniz. Şimdi işleri renklendirmenin zamanı geldi. Bir sayfaya bir bütün olarak bakarak, müşteriyle paranın karşılığını en fazla verecek olan para çekimlerini belirlemek için konuşun.

Yıllardır birlikte çalışıyoruz ve müşterilerimiz sonuçtan her zaman memnun kaldılar.

Bu noktalardan birkaçını kaçırırsanız tabii ki atlayacağım ve karmaşık bir tasarım kullanırken haklıysam, gerekirse oluşturma mantığını JavaScript'te yazmaya başlayacağım.

Ben devreye girerim ve gerekirse müşteriye yapılacak ekstra çalışmayı haklı çıkarırım. Heck, yıllardır aldığım tasarımların üzerine formlar ve etkileşimler tasarlıyorum, bu yüzden bu bir sorun olmayacak.

Umarım, bunu okuduktan sonra, bir dahaki sefere birlikte çalıştığımızda bu ipuçlarından bazılarını aklında tutacaksın. Umarım işinizi bilgilendirirler ve ne yapacağınızı bilemediğinizde yol gösterirler. İlişkimizin benim için önemli olduğunu ve bunu seni incitmek için değil, ilişkimizi iyileştirmek için yazdığımı anlamanı istiyorum.

Sevgiler,

Ön uç geliştiriciniz