İçerik
- 01. Genel görüş eksikliği
- 02. Heveslere ve trendlere düşmek
- 03. Bir ızgaraya hizalanmama
- 04. Kötü metin işleme
- 05. Fotoğrafın kötü muamelesi
- 06. Simge ve logoların kötü kullanımı
- 07. İşleri bitmemiş veya kırılmış bırakmak
Deney yapmak ve hata yapmak, öğrenmenin önemli bir parçasıdır. Üniversitede öğretim görevlisi olarak çalışmamda her yıl yeni öğrencilerin web tasarım çalışmalarında aynı türden hataları yaptıklarını görüyorum. Umarım burada bu sorunları tespit ederek, onlardan kaçınmayı daha iyi öğrenebiliriz.
01. Genel görüş eksikliği
Her web sayfası, ister bilgi iletmek, ister eğlence sağlamak, bir ürün veya hizmet satmak veya kullanıcının bir görevi yerine getirmesine izin vermek olsun, bir nedenle vardır. Sayfadaki her unsurun bu amaca hizmet etmesi gerekir.
Tasarımınıza bakın: Her bir öğenin işlevi net olmalı ve bu amacı desteklemeyen her şey kaldırılmalıdır. Tıklanabilir şeylerin tıklanabilir gibi görünmesi gerekir - ister altını çizmek, düğme olarak stil vermek veya başka bir görsel sistem yoluyla olsun, anahtar tutarlı olmaktır.
Açık bir görsel hiyerarşi oluşturmayı hedeflemelisiniz, böylece kullanıcı sayfayı kolayca tarayabilir ve temel bilgileri veya işlevleri seçebilir. Sayfanızın tonu ve stili sitenin amacını yansıtmalıdır, ancak içeriğin kendisi tasarımın en önemli parçasıdır. Siteniz bir web tasarımcısı olarak becerilerinizi tanıtmak için oradaysa, belki de pul koleksiyonculuğu tutkunuzu duymamıza gerek yoktur? Kullanıcının neden siteye geldiğini ve oraya vardığında ne yapmasını istediğinizi düşünün. Bilgileri ve işlevselliği nasıl düzenlediğinizi dikkatlice değerlendirin - örneğin, kaydırılan tek bir sayfa olarak daha iyi çalışacaksa, bir siteyi gereksiz yere birden çok sayfaya bölmeyin.
02. Heveslere ve trendlere düşmek
Modaya ayak uydurmak eğlencelidir, ancak temel tasarım ilkelerine bağlı kalmak daha önemlidir. Örneğin, 20. yüzyılın ortalarından kalma klasik Olimpiyat Oyunları posterleri bugün hala harika görünürken, 2000'lerin başındaki skeuomorphic 'Web 2.0' web sitelerinin çoğu, eğimleri ve cam efektleriyle çoktan eskimiş görünüyor. Kontrastlı çapa ve bıyığın basmakalıp "hipster" görünümü şimdiden aynı şekilde ilerliyor.
Önemli olan, anlamsız bir şekilde anlamsız ikonografi veya aldatıcı CSS ve Photoshop efektleri uygulamak yerine tipografi, görüntü ve düzen ilkelerine bağlı kalmaktır. Bazen daha azı daha fazladır ve sadece bir jQuery resim karuseli veya paralaks kaydırma efekti yapabildiğiniz için, yapmanız gerektiği anlamına gelmez.
Hiç kimse iyi bir zevkle doğmaz (kesinlikle buna sahip olduğumu iddia etmem!) Ve tat elbette özneldir. Fakat kendimizi iyi tasarlanmış şeylere maruz bırakarak, iyi tasarımın kötü yerine kesinlikle takdirini kazanabiliriz ve umarım kendi işimizdeki hataları daha kolay görebiliriz.
03. Bir ızgaraya hizalanmama
Izgara çizgileri görünmez olsa da, çoğu profesyonel tasarımcı çalışmalarını genellikle sekiz, 12 veya 16 ince dikey sütundan oluşan katı bir ızgaraya hizalar. Bu sütunlar, aralarında açık kenar boşlukları ve oluklar olacak şekilde eşit boyutta ve aralıklı olmalıdır. Görsel öğeler bir veya daha fazla sütunu kapsayabilir, bu nedenle pratikte 12 ince 'sütun' üç gerçek metin sütununa bölünebilir ve diğer zamanlarda bir görüntü 12'nin tamamına yayılabilir. Bu sütunların nasıl bölündüğünü değiştirmek, durmaya yardımcı olabilir. tasarım çok sert bir masaya benziyor.
Izgara sistemleri baskı tasarımında ortaya çıktı, ancak 960 Izgara Sistemi gibi çerçeveler ve son zamanlarda ekran çözünürlüğüne göre sütunların boyutunu ve sayısını dinamik olarak değiştirebilen Skeleton gibi yanıt veren sistemler aracılığıyla web'e geldi. Unutmayın, görsel öğeler ya açıkça sıralanmalı ya da amaçlanmadıkları gibi açıkça görünmelidir. İşlerin neredeyse sıraya girdiği, ancak tam olarak eşleşmediği yer, tuhaf görünmeye başladıkları yerdir. Ayrıca beklenmedik yerlere yayılan "öksüz" kelimelere veya öğelere de dikkat edin. Sitenin nasıl göründüğüne dair daha gerçekçi bir fikir edinebileceğinizden, normalde Photoshop'ta olduğundan 'tarayıcıda tasarlamak' daha iyidir.
En azından, bir web sayfası, sayfa içeriğini sağa boş bir boşlukla sola sabitlenmiş halde bırakmak yerine normalde tarayıcı genişliği içinde ortalanmalıdır (sana bakıyorum, TSB).
04. Kötü metin işleme
Öğrenciler genellikle metni çok küçük yapar. Varsayılan HTML yazı tipi boyutu, web sitelerinin masaüstü kullanıcılarını 800x600 çözünürlüklü monitörlerle hesaba katmak zorunda olduğu bir zamandan gelir, ancak mobil cihazlar ve yüksek çözünürlüklü monitörler çağında daha büyük düşünebiliriz. Jeffrey Zeldman gibi tasarımcılar, büyük yazı tipi boyutlarının paragraf metni için iyi çalışabileceğini gösterdiler.
Web sitenizin çeşitli çözünürlüklerde nasıl göründüğünü kontrol etmeyi ve gerekirse uyarlamak için CSS medya sorgularını kullanmayı unutmayın. Başlıklar, paragraf metninden çok daha büyük olmalıdır. Ayrıca, metin satırları arasında yeterince dikey boşluk bıraktığınızdan emin olun. Tipografide bu mesafeye "satır aralığı" denir ve CSS'de "satır yüksekliği" tarafından kontrol edilir. Varsayılan değer, çizgileri birbirine oldukça yakın koyar, bu da okuyucunun, gözleri sayfada aşağı doğru hareket ederken nerede olduklarını kaybettiği anlamına gelebilir. Yazı tipi boyutunuzdan% 50 daha büyük bir değer kullanmayı deneyin, örneğin 24px metin için 36px.
Metnin etrafında yeterince "beyaz boşluk" bıraktığınızdan emin olun - bu yalnızca, sayfada öğeleri ayırmaya ve gözü sayfada yönlendirmeye yardımcı olan boş alan anlamına gelir. Metin sütunlarının genişliğini bir satıra çok fazla kelime girmeyecek şekilde sınırladığınızdan emin olun - bu aynı zamanda okuyucunun gözleri bir satırın sonundan başa doğru hareket ederken yerini kaybetmemesine yardımcı olur. sonraki satırın. Genelde ortalama olarak bir satıra yaklaşık 10 kelime en iyi sonucu verir. Aynı nedenlerle kaçının metin hizalama: merkez veya metin hizalama: sağ paragraf metni için.
Kendinizi iki veya üç yazı tipiyle sınırlayın ve görüntüleri metin olarak kullanmaktan kaçının - Google Yazı Tipleri ve Typekit gibi hizmetler çok çeşitli web yazı tiplerine erişim sağlar. Metin rengi ile arka plan rengi arasında yeterli kontrast olduğundan emin olun - genellikle açık renkli arka plan üzerindeki koyu metinler en iyisidir. Koyu bir arka plan üzerinde açık renkli metinler de işe yarayabilir, ancak daha erkeksi, soğuk veya çekici olmayan olarak görülebilir. Adobe Kuler gibi çevrimiçi araçlar, zevkli bir renk şeması seçmenize yardımcı olabilir. Harflerin şeklini karıştırabilecek yüksek kontrastlı arka plan desenlerinden kaçının.
05. Fotoğrafın kötü muamelesi
Buradaki en yaygın hata, öğrencilerin sayfadaki fotoğrafları çok küçük boyutlandırması, yani etkilerini yitirmeleri gibi görünüyor. Tam tarayıcı genişliğindeki resimler (örneğin, Treehouse'da görüldüğü gibi), daha çok basılı bir dergiye benzeyen, daha etkili, "daha parlak" bir his verir. Ayrıca, seçtiğiniz fotoğrafın web sitenizin iletmeye çalıştığı mesajı ilettiğinden ve bunu kullanmak için yasal hakkınız olduğundan emin olun. Stok fotoğraf web siteleri harika bir resim seçkisi sunar, ancak orada bulacağınız pek çok "sevimsiz" çekimden uzak durduğunuzdan emin olun. Kendi fotoğrafçılığınızı kullanıyorsanız, keskin ve soluk görünmesine rağmen yine de doğal görünmesini sağlamak için renk ve kontrast seviyelerini ayarladığınızdan emin olun.
06. Simge ve logoların kötü kullanımı
Yaygın bir sorun, sanat eserinin, görünür pürüzlü kenarları ("tırtıklı") veya tüylü tüylü kenarları olan kötü kesilmesidir. Photoshop'ta kalem aracında ustalaşın veya çokgen kementi kullanın ve son derece yakın yakınlaştırma yapın. Sık karşılaşılan diğer bir sorun da jpeg sıkıştırma yapılarıdır, bu nedenle simgeler ve logolar için SVG veya yüksek çözünürlüklü PNG kullanın. Bulanık görüneceğinden, resmi yerel çözünürlüğünün üzerinde görüntülemediğinizden emin olun. Bir fotoğraf için bundan kurtulabilirsiniz, ancak asla bir simge grafiği için.
07. İşleri bitmemiş veya kırılmış bırakmak
Profesyonel bir tasarımcı, halka açık bir sitede asla bitmemiş veya kırılmış bir şeyi bilerek bırakmaz. Daha büyük tasarım ajanslarının hataları tespit etmek için özel bir QA (Kalite Güvencesi) ekibi olabilir, ancak yeni başlayanlar için bu size bağlıdır. Tasarımlarınızın provasını okumasına ve kontrol etmesine yardımcı olması için bir arkadaşınızla ip yapın. İkinci bir çift gözün görebilmesi inanılmaz!
Varolmayan sayfalara, 'bozuk görüntülere', düzen hatalarına, görünmeyen stillere ve yazım hatalarına dikkat edin. Ayrıntılara dikkat etmek anahtardır. Bir şeyi uygulamaya çalıştıysanız, ancak tam olarak işe yarayamazsanız, çıkarın! Sayfanızda bariz hatalar varsa, insanlar yalnızca hataları görür ve mesajınızı kaçırır.
Ve elbette, sayfa başlığını "Başlıksız Belge" olarak bırakmak veya sayfada yer tutucu metni bırakmak gibi basit hatalar yapmayın! Ama hiçbirimiz bunu yapmazdık, değil mi ?! Lorem ipsum dolor ...
Kelimeler: Iain Lobb İllüstrasyon: Elly Walton
