İyi Sonuçlar İçin Basit Web Tasarım İpuçları

Bir web sitesi tasarlamanın sonsuz sayıda yolu vardır. Bunu akılda tutarak, onu bozmanın da sonsuz yolu vardır. İkinci kategoriye girmekten kaçınmanın iki ana yöntemi vardır - tasarımın temellerini öğrenin ve bunları buna göre uygulayın. Ayrıca neyin işe yarayıp neyin işe yaramadığını öğrenecek kadar deneyimli olmanız gerekir.

Tüm tasarımcılar farklı öğrenme yolları kullanır ve genellikle yolculuklarının farklı aşamalarındadır. Bunu okuyorsanız, umarım işinizi daha da geliştirmeye ve daha iyi tasarımlar üretmeye çalışıyorsunuzdur.

Ne yazık ki, gerekli tüm bilgileri 1500 kelimeye sığdırmanın bir yolu yok. Bunun yerine, UX / UI öğelerine nasıl yaklaşabileceğinizi yeniden düşünmenizi sağlayacak birkaç ipucunu hedefleyeceğiz. İdeal olarak, bu düşünme biçimi tasarım çalışmanızın diğer alanlarına da uygulanabilir.

Ürünü / Siteyi İyi Anlayarak Başlayın

İçeriği / web sitesini tam olarak anlamadığınızda tasarım yapmak son derece zordur. Şimdi, tıbbi bir web sitesi yapmak için tıp okumak zorunda değilsiniz, amaç bu değil. Ancak, bir kullanıcının ihtiyaç duyabileceği herhangi bir bilgiye nasıl erişeceğini bilmelisiniz.

Bir müzik yapma uygulaması tasarlamak istiyorsanız, önce birkaç tane mevcut olanı almalı, onlar hakkında bir fikir edinmek için onlarla oynamalı, arkasındaki teori ve belirli öğelerin nasıl çalıştığını okumalısınız.

İdeal olarak, projeye çok ilgi duyan ve kullanıcıları için daha iyi bir UX uygulamanıza yardımcı olmak isteyen müşterinizle birlikte çalışmalısınız.

Bununla birlikte, sitenin neyle ilgili olduğu ve hangi sorunu çözdüğü konusunda temel bir anlayışa sahip değilseniz, kullanıcı deneyimini sakatlayabilir veya kendinizi mevcut çözümleri izlemeye zorlayabilir ve sadece onları yeniden derleyebilirsiniz (bazen işe yarar).

Web sitelerinde, doğru gezinme üzerinde çalışmak ve belirli açılış sayfalarına hangi öğelerin uygun olacağına karar vermek için site haritasının önünüzde olması gerekir. Bir "çikolata fabrikası" tasarımı yaparsanız, bunu yapma sürecini görsel olarak sunabilir veya bir bilgi dökümü yapabilirsiniz. Her şey sitenin hedeflerine bağlıdır.

Tüm bu bilgiler, daha yüksek bir başarı oranına sahip olmak için önceden ihtiyacınız olan bir şeydir. Bunun ne kadar karmaşık olduğunu göz önünde bulundurursak, yeni başlayan bir serbest tasarımcıysanız, başınıza gelebilir, bu yüzden en baştan birçok soru sormak en iyisidir. Bir ekipte çalışıyorsanız, ekip üyelerinize içerik, kullanıcı deneyimi, amaç ve daha fazlası hakkında danışmayı unutmayın.

Tasarıma Özgü İpuçları ve Püf Noktaları:

Şimdi, bir sonraki tasarımınızda kullanabileceğiniz bazı özel UI / UX ipuçlarını görelim:

1 - Kontrast!

Bir sitedeki kontrastı bozmak çok kolay. Daha az deneyimli bir tasarımcıyı bulmanın hızlı bir yolu, genel kontrastı kontrol etmektir. Bu örneğe bakın:

Kaynak

Metnin her yerde ne kadar hafif olduğunu görüyor musunuz? Beyaz metinli yeşil düğmeler, açık gri metin ?. Bunu daha zıt bir kullanıcı arayüzüyle karşılaştıralım:

Kaynak

Yazı tipinin büyük bir kısmı siyahtır (veya neredeyse siyahtır) ve daha az önemli bilgiler biraz daha gridir. Yeşil daha koyu, bu da artık üstte beyaz metne izin veriyor.

Buradaki ipucu - metinle çalışırken beyaz üzerine Siyah veya siyah üzerine beyaz ile başlayın. Daha fazla öğe ekledikçe ve görsel hiyerarşiyle ayırmanız gerektiğinde, önce kalın yazı tipi boyutunu veya boyutunu değiştirmeyi deneyin. Ancak bundan sonra, işe yaramazsa, renk değişiklikleri ile devam edin, ancak ideal olarak% 30-40'tan fazla fark olmaz (genellikle opaklık% 70'e ayarlanır).

2 - Tutarlı Beyaz Boşluk

Diğer bir yaygın hata, öğelerin etrafında tutarsız boşluklar olması olacaktır. Aslında, çoğu tasarımcının yıllarca çalıştıktan sonra bununla mücadele etmeye devam etmesi o kadar yaygın ki ve bu oldukça anlaşılabilir bir durum - kutuları fareyle hareket ettiriyoruz. Biraz kaydırmak ve bir veya iki piksel yana kaydırmak kolaydır. Ya da bu farkı doğrudan tespit etmek için gözünüzü henüz yeterince eğitmemiş olabilirsiniz.

Aşağıdaki örnekte, farklı bileşenlerin etraflarında nasıl farklı beyaz boşluklara sahip olduğuna bakın. Bazıları bir arada dağınık, bazıları çok aralıklı. Görsel olarak pek tutarlı görünmüyor.

Tam tersine, aşağı yukarı benzer miktarda içerik / bileşen türüne sahip ancak daha tutarlı bir görünüme sahip bir örnek:

Kaynak

Bunu başarmanın çeşitli yolları vardır, ancak çoğu zaman sadece ölçmekle işe yaramaz. Ona baktığınızda genellikle bir "his" dir. Dengeli görünüyor mu? Kutularınız varsa, her zaman yanlardan 30px, başlık altında 30px, altyazı altında 15px vb. Gibi bir şeyi ölçebilirsiniz. Ve bu iyi bir yaklaşım! Ancak, başlıklar veya resimler gibi daha büyük görsel öğelerle, daha ağır öğeyi telafi etmek için bunu biraz artırmak isteyebilirsiniz.

3 - Renkli

İyi bir tasarımın diğer bir temel bileşeni. Renkler birlikte iyi çalışmalıdır. Web sitelerine yaklaşmanın kolay bir yolu, tek bir ana renge bağlı kalmak ve geri kalanını tek renkli tutmaktır.

Aşağıdaki örnek şimdiye kadarki üç öneriyi de takip ediyor - İyi kontrast, denge ve renk kullanımı:

Kaynak

Renklerle başlamanın kolay bir yolu, https://colorhunt.co/ gibi sitelerden iyi alınmış bazı renk şemalarını takip etmek veya kombinasyonlar için Dribbble'dan ilham almaktır. Renk tekerleği ile çalışmak kombinasyonları belirlemede faydalıdır, ancak çoğu zaman tasarımcılardan en iyi kombinasyonları tamamlamak için biraz ek dokunuş gerekir. Renk çarkları genellikle bir tasarıma uygulanacak mükemmel renkleri üretmez.

Adobe'nin renk tekerleğinden örnek:

Kaynak

Ortada güzel bir yeşil renk, ancak sol / sağ taraftaki sonuçları kullanmak biraz zor.

4 - Site Genelinde Bir Stile Bağlı Kalın

Bir web sitesi hissini oluşturmak, tasarımcının ana işlerinden biridir. "Güzel" fikrini tanımlamak çok zor olsa da, özellikle de insanlar genellikle neyin iyi neyin iyi olmadığına dair farklı bir görüşe sahip olduklarından. . Bu konuda endişelenmek yerine tutarlılığa odaklanın ve tarzınıza bağlı kalın.

Bu ne anlama geliyor? Peki, bir düğme tasarlayalım. Yazı tipi boyutunu, yazı tipini, rengini, arka planını, boşlukları vb. Belirleriz. Ve şöyle bir şey elde ederiz:

Şimdi, bir resim ve bir başlık ekleyeceksek, şöyle bir şey başarabiliriz belki:

Köşeleri görün. Tüm mükemmel 90 derece köşeler, yuvarlama yok. Şimdi, bu, tasarımımızın çoğunlukla keskin köşeleri takip edeceği anlamına geliyor. Ve görüntünün bu mükemmel köşeleri de varsa, daha tutarlı görünür. Tıpkı girdiler eklersek, hepsinin daha keskin köşeleri olacaktır. Bir öğe daha ekleyelim:

Sağ üst ve sol alt köşelere bir kutu ızgarası ekledik. Bunlar daire olabilirdi, ancak keskin görünümü korumak için onları karelere yerleştirdik. Sitenin tamamında aynı düşünce sürdürülmelidir. Öğeleri değiştirmeye başlarsanız, o zaman hissini kaybetmeye başlayabilirsiniz ve bu da tutarsız bir tasarıma ve markayı zayıflatmaya neden olur.

İşte yukarıdan aynı tasarım, ancak yuvarlak görünümlü:

Aynı şey ama şimdi çok farklı geliyor.

5 - Bileşenlerle Tasarım

Figma ve Adobe XD gibi tüm modern tasarım araçlarında bileşenler bulunur. Çok iyi bir nedenden dolayı oradalar - geliştiriciler siteleri olabildiğince yeniden kullanılabilecek şekilde uygularlar.

Yukarıdakine benzer bir öğe yaparsanız, onu başka bir sayfaya "kopyalayıp yapıştırmak" istersiniz ve bu basitçe çalışacaktır. Küçük farklılıklarla tekrar kodlamaya gerek yok. Bir tasarımcı olarak, ideal olarak bileşenlerinizi benzer bir şekilde yeniden kullanmak istersiniz.

Arka arkaya 3 gönderi olan bir ana sayfa yaparsanız, belki aynı gönderiyi ana sayfadan yeniden kullanabilirsiniz. Bu size zaman kazandırır, geliştiriciye zaman kazandırır ve tasarımın kullanıcılar için tutarlı olmasını sağlar.

Kaynak

Bir bölüm başlığı yaptığınızı hayal edin. Başlıklı 8 bölüme ihtiyacınız varsa, her seferinde tasarlar mıydınız yoksa öncekini kopyalayıp yapıştırır mısınız? İdeal olarak, onu yeniden kullanmak istersiniz. Peki ya ortalıktan sola hizalı olarak değiştirmek zorunda kalırsanız? Belki biraz boyutunu değiştirir, belki rengi? Bunun ipucu, denemek ve bunu YAPMAMAK. Orijinali olarak tutmaya çalışın. Gerçekten farklı görünümlere ihtiyacınız varsa (sola / merkeze / sağa hizalı dışında), yalnızca bir varyasyon yapmaya çalışın. Beş ya da on tane değil.

DevriX örneği

Özetle:

İyi sonuçlar elde etmek için renk, kontrast, beyaz boşluk, denge, görsel hiyerarşi, düzen ve daha fazlası gibi tasarım temellerini güçlü bir şekilde anlamanız gerekir. Bunu göz önünde bulundurarak tasarladığınızda ve kullanılabilirliğe, tutarlılığa ve stile odaklandığınızda ve bu bir "WOW!" Olmasa bile tasarım, tüm cephelerde sağlam olacak ve iyi işleyecek, bu da genellikle bir marka için uzun vadede daha iyi sonuçlar üretecek.