Geliştiriciler için Tasarıma Nasıl Yaklaşılır?

Aynı projeler ve ürünler üzerinde çalışıyor olsalar bile, geliştiriciler ve tasarımcılar genellikle silolarda birbirlerinden ayrı çalışırlar. Tasarım, geliştiriciler tarafından genellikle, bir ürünün işlevselliği ile karşılaştırıldığında önemsiz, ikincil bir şey olarak kabul edilir.

Bu tür bir düşünce, geliştirici-tasarımcı ilişkisine zarar verebilir. Temel bir tasarım anlayışına sahip olmamak, geliştiricileri kariyerlerinde geri tutabilir veya gemide bir tasarımcı olmadığı için proje peşinde koşmalarını engelleyebilir.

Geliştiriciler Neden Tasarımı Öğrenmeli?

Tasarım ve geliştirme genellikle ayrı disiplinler olarak düşünülürken, her ikisinde de ustalaşmış insanlar var. Birisi yalnızca tasarımcı veya geliştirici olmakla ilgileniyorsa - ikisi birden değil - en azından diğer disiplinin temellerini öğrenmek değerlidir.

Geliştiricilerin tasarımı öğrenmek veya en azından temel bir tasarım bilgisi temeli geliştirmek isteyebilecekleri birkaç neden vardır.

Her şeyden önce, küçük ekiplerin özel bir tasarımcısı olmayabilir. Ayrıca, projeleri tamamen kendi başlarına halletmek isteyen, bir tasarımcı tutmayı göze alamayan (veya parayı başka bir yerde harcamak isteyen) geliştiriciler var. Kendi ürünlerini tasarlamayı öğrenmek, en azından bir tasarımcı işe alınana kadar idare etmek paha biçilmez bir kaynaktır.

Geliştiricilerin tasarımı öğrenmesinin diğer büyük nedeni, tasarımcılarla daha etkili çalışabilmeleridir. Bir tasarımcının, bir web sitesi veya uygulama için, bitmiş üründe mükemmel piksel olmasını bekledikleri tam olarak tasarlanmış bir dosyayı teslim etmesi, ancak tasarımlarının geliştirici tarafından kodlanmasıyla önemli ölçüde değiştirildiğini görmesi inanılmaz derecede sinir bozucu.

Geliştiriciler tasarımın temellerini anlamazlarsa, bir kullanıcı arayüzünü özellikle kullanıcı dostu yapan ve istemeden projenin kullanıcı deneyimini sabote eden küçük ayrıntıları gözden kaçırabilirler. Tasarımcılar tonlarca düzeltmeyi geri gönderdiğinde, bir projenin tamamlanmasını yavaşlatmanın yanı sıra geliştirici-tasarımcı ilişkisini zorlayabilir.

Disiplinlerarası ekipler arasındaki ilişkileri ve ekip çalışmasını geliştirmek için geliştiriciler, tasarımlara yalnızca bir geliştirme perspektifinden bakmak yerine bir “tasarımcı gözüyle” görmeyi öğrenerek kendilerine bir iyilik yapacaklardır - bu beceride ustalaşmak projelerini büyük ölçüde iyileştirecektir.

Tasarım Zihniyeti Oluşturma

Çoğu zaman, tasarlamayı öğrenen geliştiriciler, bu tasarımları destekleyen temel ilkelerden ziyade, beğendikleri ve taklit etmek istedikleri tasarımların estetiğine çok fazla odaklanırlar. Bir düğmenin rengi ve boyutu, belirli bir yazı tipi veya bu seçimlerin arkasındaki nedenleri anlamadan kenarlıkların kullanılma şekli gibi şeyleri görürler.

Duvarlara boya püskürtmeye ve dekore ettikleri mekanların amacını anlamadan (hatta sıhhi tesisat ve elektrik işleri gibi işlerin bittiğinden emin olmadan) mekanı dekore etmeye başlarlar.

Tasarımcıların aldıkları kararları neden verdiklerinin ardındaki ilkeleri anlamak ve bunlara saygı duymak önemlidir. Tasarım konusunda yeni olan herkesin, dalıp her yere boya püskürtmeye başlamadan önce, Gestalt İlkeleri ve temel görsel hiyerarşi gibi iyi bir tasarımı oluşturan ilke ve teorileri sağlam bir şekilde kavraması gerekir.

Bununla birlikte, geliştirme geçmişi olsun ya da olmasın, yeni tasarımcıların teoride çıkmaza girmesi de yaygındır. Bir şeyleri öğrenmek ve düşünmek için o kadar çok zaman harcarlar ki, öğrendiklerini gerçekten uygulayamazlar.

Hem tasarımcılar hem de geliştiriciler mükemmeliyetçi olma eğilimindedir. Ancak tasarımları mükemmel olmadan önce ortaya çıkarmak (çünkü muhtemelen asla olmayacaklar) süreç için önemlidir. Özellikle yeni tasarımcıların güvensizliklerini aşmaları, çalışmalarını ortaya koymaları ve aldıkları geri bildirimlerden öğrenmeleri gerekiyor.

Tasarımı gerçekten öğrenmenin en iyi yollarından biri, başkalarının tasarımlarını yeniden yaratmaya çalışmaktır. Neyin işe yarayıp neyin yaramadığını ayırt etmek ve belirli bir tasarımın neden çekici olduğunu anlamak, yeni bir tasarımcının veya geliştiricinin öğrenebileceği en değerli becerilerden biridir. Mevcut bir tasarıma benzersiz bir dönüş yapmak endüstride yaygındır (Dribbble'ın “Rebound” özelliği ile kanıtlanmıştır).

Tarayıcıda Tasarım

Çoğu tasarımcı, genellikle en azından temel HTML ve CSS kodunu rahatça yazmaları gerektiği anlamına geldiğinden, doğrudan tarayıcıda tasarım yapmaya direnir. Bu, geliştiricilerin tasarıma girmesi için genellikle büyük bir uyum olmasının tam nedenidir - zaten rahat kod yazarlar.

Tarayıcıda tasarım yapmaya yardımcı olabilecek ve hem tasarımcıların hem de geliştiricilerin hayatlarını kolaylaştırabilecek araçlar var. Renk paletlerini seçmekten başka bir sitenin CSS ve HTML kodunu keşfetmeye kadar her şey için basit tarayıcı eklentileri mevcuttur.

Doğrudan tarayıcıda tam özellikli bir tasarım aracı gibi davranan Figma gibi daha karmaşık araçlar da vardır. Figma, tasarımcıların işbirliği yapmasına, paydaşlara varlık göndermesine (hatta tasarımların içeriğinde ve kopyalarında değişiklik yapmalarına izin verir) ve geliştiricilerin gerçek tasarımlara gerçek zamanlı olarak erişmesine olanak tanır. Zaman içinde ölçeklenebilen tasarımlar ve tasarım sistemleri oluşturmak isteyen geliştirici-tasarımcılar için harika bir seçenektir.

Web akışı, geliştiricilerin sevebileceği tarayıcıda tasarım yapmak için başka bir seçenektir. Tasarım arayüzü görsel olsa da, dışa aktarılan kod temiz, geliştiricilerin takdir edeceği anlamsal CSS ve HTML'dir (tüm görsel tasarım araçları temiz kod dışa aktarmaz). Web akışı, tasarım ve düzen için araçların yanı sıra yerleşik CMS ve e-Ticaret araçlarının yanı sıra barındırma seçeneklerini içerir.

Renk, Tipografi ve Düzen Kullanımı

Renk, tipografi ve yerleşimin görsel ilkelerine dalmadan önce temel kullanılabilirlik hakkında konuşmak önemlidir. Dünyanın en estetik tasarımı, eğer kullanılabilir değilse hiçbir işe yaramaz.

En önemli kullanılabilirlik ilkelerinden biri tutarlılık veya öngörülebilirlik fikridir. Tasarımlar, kullanıcıların bunları nasıl kullanacaklarını sezgisel olarak anlayabilmeleri için yeterince öngörülebilir olmalıdır. Örneğin, tıklanabilir bağlantılar için altı çizili mavi metin, eksiksiz ve iyi etiketlenmiş gezinme menüleri vb. Öğeler, tipografi ve renk şeması arasındaki boşluk da tutarlı olmalıdır.

Her tasarım projesinde göz önünde bulundurulması gereken diğer kullanılabilirlik ilkeleri arasında hata önleme (ve hatalar meydana geldiğinde bilgilendirici hata mesajları), tanıdık dil ("sevimli" veya belirsiz olabilecek yaratıcı alternatifler yerine insanların alıştığı dili kullanın) gibi şeyler bulunur. ), esneklik ve verimlilik ve kolay erişilebilir yardım. Nielsen Norman Group, akılda tutulması gereken ek kullanılabilirlik buluşsal yöntemlerine sahiptir.

Ürünün tasarım ve geliştirme ekibinin amaçladığı şekilde çalıştığından ve kullanıcıların kafasının karışmadığından emin olmak için tasarım ve geliştirme süreci boyunca kullanılabilirlik değerlendirmeleri yapılmalıdır. Sezgisel değerlendirmeler, sapmaların nerede meydana geldiğini görmek (ve ardından bu sapmaları düzeltmek) için bir ürünün izlemesi gereken önceden tanımlanmış tasarım ilkeleri listesinin bir listesini gerçek ürünle karşılaştırmayı içerir.

Kullanılabilirlik, eldeki ürünle ilgili olarak iyice anlaşıldıktan sonra, tasarımcı-geliştiriciler tasarımın daha görsel yönlerine geçebilirler.

Temel Renk Teorisi

Renk teorisi, görsel tasarımın en karmaşık yönlerinden biridir. Gölgeleri hafifçe değiştirmek, bir rengin görsel etkisini ve duygusal etkisini tamamen değiştirebilir. Yıllardır sektörde olan birçok tasarımcının hala renklerle mücadele etmesinin bir nedeni de bu.

Renk teorisi hakkında pek çok kitap yazılmış olsa da, tasarımcı-geliştiricilerin başlamak için öğrenebilecekleri çok temel bazı ilkeler vardır. Bunları mevcut çok sayıda renk tasarım aracıyla birleştirin ve hoş bir renk paleti oldukça kolay bir şekilde oluşturulabilir.

İlk olarak, sıcak renkler, soğuk renkler ve nötr renkler arasındaki fark. Sıcak renkler kırmızı, turuncu ve sarıdır. Sıcak renkler genellikle canlı ve enerji verici olacaktır. Soğuk renkler arasında yeşil, mavi ve mor bulunur. Bu renkler genellikle daha sakin ve rahatlatıcıdır.

Nötrler beyaz, siyah, gri, kahverengi ve bej içerir. Sıcak veya soğuk renklere beyaz, siyah veya gri eklemek, anlamlarını ve etkilerini değiştirir. Beyaz renkleri aydınlatacak ve genellikle etkilerini daha az yoğun veya daha olumlu hale getirecektir (örneğin, mor gizemli, muhteşem bir renk olarak kabul edilirken leylak genellikle bahar ve mutlulukla ilişkilendirilir). Gri renkleri susturur ve etkilerini azaltabilir. Siyah renkleri koyulaştırır ve daha muhafazakar görünmelerini sağlayabilir (parlak mavi ile lacivert gibi bir rengin farklı etkisini düşünün).

Bir tasarımcı, renk anlamlarıyla ilgili temel bir anlayışa sahip olduğunda, tasarımları için nihai, koordineli bir palet oluşturmak için Coolors, Design Seeds veya Colormind gibi araçları kullanabilir.

HSL Rengini Kullanma

Bir tasarımcı web renklerini düşündüğünde, genellikle onaltılık değerler açısından düşünür. Bu, web renkleri açısından endüstri standardı haline gelmiş olsa da, geliştiriciler HSL renk değerleriyle çalışmanın daha mantıklı olduğunu görebilir.

Çoğu insan için (tasarımcılar dahil), onaltılık değerlerin görünüşte birbirleriyle hiçbir ilişkisi yoktur. Birbirine çok benzeyen iki renk tamamen farklı onaltılık değerlere sahip olabilir. Örneğin, #68B4D4 ve #92C8E0, mavinin oldukça benzer tonlarıdır (biri diğerinden biraz daha parlak ve daha hafiftir) ve yine de onaltılık değerlerinin belirgin bir korelasyonu yoktur.

Ancak HSL değerleri ne kadar yakından ilişkili olduklarını gösterir: #68B4D4, HSL olur (198, %58, %62) ve #92C8E0, HSL olur (198, %56, %73). Dizideki ilk sayı (bu durumda 98) belirli tonu belirtir. İkinci sayı doygunluk yüzdesidir (rengi ne kadar parlak veya canlı olduğu). Üçüncü sayı, rengin açıklık (veya eklenen beyaz) yüzdesidir.

Renk değerleri arasındaki korelasyonlar HSL ve hex ile çok kolay görüldüğünden, geliştiriciler genellikle renkleri kod aracılığıyla HSL ile değiştirmenin önemli ölçüde daha kolay olduğunu görürler.

Tipografi İlkeleri

Tipografi, deneyimli tasarımcıları bile çeldirebilecek başka bir alandır. Ancak renk teorisi gibi, yardımcı olabilecek bazı harika araçlar var.

Tipografik hiyerarşi, bir tasarımcı-geliştiricinin öğrenmesi gereken ilk şeylerden biridir. Bir tasarımdaki farklı tip öğeler arasındaki ilişki, o tasarımı daha kullanışlı hale getirmek için hayati önem taşır.

Bir tasarımın en azından üç tipografik hiyerarşi düzeyi olmalıdır: başlıklar, alt başlıklar ve gövde yazı tipleri. Başlık görsel olarak en belirgin olmalı, ardından altyazılar ve ardından yüksek oranda okunabilir olması gereken gövde yazı tipi olmalıdır.

Birçok yeni tasarımcı, hiyerarşilerini oluştururken yazı tipi boyutuna çok fazla odaklanır ve yazı tipi stiline yeterince odaklanmaz. Bazen, bir başlığı bir alt başlıktan önemli ölçüde daha büyük yapmak yerine, örneğin, bir başlık kalın veya büyük harfle yazılabilirken, alt başlık başlık durumunda ve normal ağırlıkta bırakılabilir. Renk ayrıca altyazılar ve başlıklar arasında ve bu öğeler ile gövde metni arasında ayrım yapmak için kullanılabilir.

Farklı yazı tiplerini birleştirmek de birçok tasarımcının kafasını karıştırabilir ve yine de bu, görsel bir hiyerarşi oluşturmanın yaygın bir yoludur. Bunlar, tamamlayıcı yazı tiplerini seçmeyi (karşıtlar genellikle çeker, ancak bir dereceye kadar, yazı tiplerinin ne kadar iyi birleştiğinin zaman içinde keskinleşen içgüdüsel hislere dayanarak belirlenmesi gerektiğini), uygun yazı tiplerini seçmeyi (yasal bir belgede Comic Sans kullanmayın, çünkü örneğin, vücut tipi için daha küçük boyutlarda okunamayacak bir ekran yazı tipi) ve yazı tipleri arasında kontrast oluşturma (birbirine çok benzeyen iki tane kullanmayın).

Yazı tiplerini birleştirmenin bir başka basit yolu da büyük yazı tipi ailelerinden yazı tipleri seçmektir. Birlikte iyi çalışan ekran, serif ve sans serif sürümlerini içeren aileler bile var (Bayan Saçak ve Bay Saçak, Fedra veya Museo ve Museo Sans gibi). Bu, yazı tiplerini birlikte güzel görünecek şekilde tasarlandıkları için gerçekten birleştirme denemelerine başlamanın en kolay yolu olabilir.

Daha büyük tipografik hiyerarşilerle çalışırken (H1, H2, H3, H4 vb. ekleme gibi), tipografik ölçekte bir tür nedeni takip etmek önemlidir. Fibonacci dizisi, başka yerleşik tipografik ölçekler olmasına rağmen, başlamak için olası bir ölçektir.

Her iki tipografide (ve genellikle tasarım düzenlerinde) kullanılan ortak bir ölçek 4, 8, 16, 24, 36, 48, 72, 108 vb.'den oluşur. Bu rakamlar, hoş bir görselliğe sahip bir tasarım oluşturmak için çeşitli şekillerde birleştirilebilir. oranlar (örneğin, 36 piksel çizgi yüksekliğiyle birleştirilmiş 24 piksel yazı tipi).

Temel Yerleşim İlkeleri

Web'in başlangıcından bu yana, "standartlar" olarak ortaya çıkan belirli düzen kalıpları vardır. Örnekler, ek bilgiler veya gezinme seçenekleriyle birlikte üst, sol veya sağ kenar çubuğundaki ana gezinmeyi ve alanın geri kalanını kaplayan gövde içeriğini içerir.

Bu temel düzenden kesin sapmalar olsa da (üst gezinme değil, kenar çubuğu yok, iki kenar çubuğu vb.), yeni bir düzen oluştururken bu genellikle oldukça güvenli bir bahistir. Bu temel kalıptan sapma, özellikle yeni ve deneyimsiz tasarımcı-geliştiriciler tarafından yalnızca bir amaçla yapılmalıdır.

Öngörülebilir bir tasarım oluşturmak - bu genellikle tutarlı anlamına gelir - bir ürünün kullanılabilirliği için çok şey yapar. Bir kullanıcının bir ürünü kullanırken görmeyi beklediğinden sapma, yalnızca kullanılabilirlik kazanımları kayıplardan daha büyük olduğunda yapılmalıdır.

Aynı içerik türü için bir sayfada 72 piksel koyu mavi başlık ve ardından başka bir sayfada 36 piksel kırmızı başlık kullanmamak en iyisidir - çünkü düzen tutarlılığı önemlidir. Benzer şekilde, başlık ve gövde metni arasındaki boşluk (dolgu) bir bölümde 36 piksel ve sonra diğer bölümde 32 piksel görsel tutarsızlık yaratacaktır. Bir kişi farkın neden sarsıcı olduğunu hemen anlamasa da, hissedecektir.

Yukarıda bahsedilen tipografik ölçeğe benzer şekilde, 4, 8, 16, 24, 36, 48, 72 veya 108 piksellik bir ölçekteki boşluk öğeleri, görsel olarak hoş bir tasarım yaratacaktır. Öğeler arasında yeterince boşluk bırakmak, onlara nefes almaları için yer vermek iyi bir fikirdir; daha yeni tasarımcılar genellikle boşluktan kaçınırlar ve sonunda darmadağın ve bunaltıcı görünen tasarımlar elde edebilirler.

Bazıları ölçeğin neden bu şekilde aralıklı olduğunu sorgulayabilir. Neden ilk iki sayı arasında sadece 4 piksel fark varken son ikisi arasında 36 piksel atlama var? Nedeni basit: Küçük ölçeklerde, 4 piksellik bir artış kolaylıkla tanımlanabilir (8 piksel, 4'ün iki katıdır, kolayca fark edilebilir). Ancak daha büyük sayılarla 72 piksel ile 76 piksel arasındaki fark kolayca görülmez. Boyutlar büyüdükçe daha büyük farklılıkları görmek daha kolaydır.

Tutarlı boşluk, ızgara tabanlı tasarım yaklaşımlarının bu kadar popüler olmasının bir nedenidir. Bir ızgarayla (genellikle 12-, 16- veya 24 sütun) başlamak, tasarımcılara her şeyi tutarlı tutacak bir çalışma çerçevesi sağlar. Sütunlar arasındaki yerleşik oluklar, farklı tasarım öğelerinin ve bunların içindeki içeriğin bir miktar nefes alma odası olmasını sağlamaya da yardımcı olur.

Çözüm

Tasarımcılar ve geliştiriciler, kariyerlerini ilerletmek için becerilerini genişletmeye odaklanmalıdır. Geliştiricilerin tasarımın temel ilkelerini öğrenmek için harcadıkları zaman, gelecekte tasarımcılarla çalışırken veya kendi ürünlerini yaratırken zaman kazandıracaktır.

Tasarımın temel ilkelerinin (kullanılabilirlik ilkeleri, renk teorisi, tipografi, düzen ve UX) anlaşılması da geliştiricileri geliştirmede daha iyi hale getirecektir. Tasarımcıların yaptıkları seçimleri neden yaptıklarını anladıklarında, geliştiriciler gerçekten mükemmel ürünler yaratmak için tasarımcılarla daha iyi çalışabilirler.

Toptal Tasarım Blogunda daha fazla okuma:

• Tasarım İlkeleri ve Önemi
• Tasarımcılar Ne Kadar Kodlama Bilmelidir?
• Bir Olasılıklar Yelpazesi: Go-To UI Renk Kılavuzu
• Bu Başarılı Etkileşim Tasarım İlkeleri ile UX'inizi Güçlendirin
• Tasarım Temelleri – Görsel Hiyerarşi Rehberi (İnfografik ile)