Gözlememelisiniz 10 Web Tasarım Öğeleri
Web siteleri tasarlama ve inşa etme söz konusu olduğunda, hiçbir zaman yeterince hızlı görünmemektedir.
Bu hızlı tempo göz önüne alındığında, sonunda web sitesi oluşturmak için gerekli olan birçok küçük ayrıntı genellikle tasarım sürecinin dışında bırakılır. Bu ayrıntılar önemsiz olsa da, bir web sitesini güzelden gerçekten harikalara götüren şey onlardır.
Bu ayrıntıların çoğu kez gözden kaçırılmaları kolaydır, çünkü web sitesinin genel görünümünü ve izlenimini taşımazlar. Sorun şu ki, geliştirme ekibiniz tasarımda çalışırken, bu öğeleri sizin için tasarlamaya ve oluşturmaya zorlanacak.
Üretim döngüsünü, geliştiricilerin bu varlıkları size iade etme zamanı olacak şekilde ayarlayabilirdiniz, ancak neden her şey ön tarafa çıkarılmıyor, böylece süreç o kadar temiz olacak?
Daha da kötüsü, geliştirme ekibi ilerlemeyi ve sadece varlıkları olduğu gibi yaratmayı kararlaştırabilir.
Birçok geliştirici tasarım için keskin bir göze sahip olsa da, web sitesinin tasarlanmasıyla yükümlü olan yaratıcı sonuçta bu unsurları planlayan kişi olmalıdır. En ince nüansları önceden planlamak, nihai ürünün kalitesi üzerinde büyük bir etki yaratabilir.
Bu makalede ele alınan her öğe, tasarımcının tasarımda eksik bir öğe olup olmadığını tasarımcıdan isteyeceği sorusundan kaynaklanmaktadır.
Web sitenizi parlatırken aklınızda bulundurmanız gereken 10 önemli unsuru inceleyelim.
1. Linkler
Bir bağlantının çeşitli durumlarını şekillendirmek aslında oldukça basitken, ekstra ayrıntıların hepsinin ne kadar sıklıkla gözden kaçırıldığına şaşırabilirsiniz. Sayfadaki tüm bağlantılar için aşağıdaki durumları ekleyin:
- Normal
Bu, bağlantının varsayılan halidir; Örneğin, üzerinde gezindiğiniz veya tıklanmadığı veya kullanıcının daha önce ziyaret ettiği bir URL’yi işaret eden. Bu, tasarımcıların çoğunun her zaman kapsadığı bağlantı biçimidir. - Ziyaret
Bu, üzerinde gezinme veya tıklama yapılmayan, ancak hedefi kullanıcı tarafından ziyaret edilen bir bağlantıdır. - Aktif
Etkin bir bağlantı, kullanıcı tarafından şu anda tıklanan bir bağlantıdır. Bir stil onlara sağlanmazsa, çoğu geliştirici buradaki durumun durumunu çoğaltacaktır. - duraksamak
Son olarak, kullanıcı fareyle üzerine geldiğinde bağlantı durumu neye benziyor. Bu ve normal durumlar çoğu tasarımcının hazırladığı ürünlerdir.
Sıklıkla gözden kaçırılan bir detay, bu çeşitli devletlerin bir web sitesinin tüm bölgeleri için planlanması gerektiğidir. Örneğin, birçok web sitesinin açık renkli bir arka plana karşı koyu renkli bir kopyası vardır, ancak kontrast altbilgide tersine çevrilir. Sayfa boyunca bulunan tüm bağlantıların tüm bağlamlarını planlamanız gerekir.
üzerinde Dolunay Barbekü Örneğin, içerik bölgesinin içindeki temel kırmızı bağlantıları ve aşağıdaki altbilgideki temel beyaz bağlantıları görürüz. Yine de, küçük bir detay ama yine de önemli.
2. Formlar
Birçok tasarımcı için, formların yapılandırılması kritik değildir ve gözden kaçırmak imkansızdır. Yine de, birçokları için, daha sonradan uzak bir mesafe gibi görünüyor.
İkinci tutumla ilgili problem, formların, ziyaretçileri müşterilere dönüştürmenin tek gerçek yolunu oluşturmasıdır. Uygun planlama ve tasarım olmaksızın, bu formların kullanılabilirliği, web sitesinin tek dönüşüm noktasını sakatlayarak düz kalabilir. Müşterilere renk, marka ve imajlardan çok daha az baskı yapıyor olsalar bile, bu elemanlar için hazırlık yapmak esastır.
Bir form düzenlerken en önemli iki nokta şunlardır:
- Form etiketi
Formlar genellikle kullanıcıların vermeyi istemediği kişisel verileri toplar. Bu nedenle, kullanıcıları, formun amacına uygun olarak bildirmek akıllıcadır. - Giriş alanları ve etiketleri
İkinci olarak, formun giriş alanlarının sayfaya nasıl yerleştirileceğini ve bu alanlara ait etiketlerin alanlara göre nasıl şekillendirileceğini ve nasıl yönlendirileceğini planlayın.
Varsayılanlarına bırakıldığında, formlar garip görünebilir. Ancak uygun bir hazırlık ile, web sitesi sorunsuz görünecek ve çok daha etkili olacaktır. İyi bir planlama ile başlamış olması gereken harika bir örneğe bakalım:
Bu kritik iş formunda müthiş açıkça iyi düşünülmüştü. Sayfanın tüm amacı ve amacı dikkatli bir şekilde dikkate alınmıştır. Her bir alan dizisinin başlığına ve girişine, etiketlerinden ve kontrol tarzlarından, bu form bir planlama modelidir.
Formların planlanması aslında bizi başka birçok konuya yönlendiriyor…
3. Düğme davranışı
Düğmeler çeşitli amaçlar için bir web sitesi boyunca kullanılabilir, ancak bir düğmenin çeşitli durumları gibi çoğu zaman da ihmal edilir. Bir düğmenin dört durumu:
- Varsayılan
Bu, tıklanması bekleyen bir düğmenin varsayılan halidir. Çoğu tasarımcı bunu kapsar ama diğerlerini özlüyor. - duraksamak
Kullanıcı, düğmenin fareyle üzerine geldiğinde, vurgulu durum görülür. Bu durum kullanıcıya düğmenin işlem yapılabilir bir öğe olduğunu belirtmede yardımcı olur. - Click
Kullanıcı düğmeyi tıkladığında, bu durum görsel olarak onlara tıkladıklarını gösterir. Bu görsel ipucunun sağlanması, kullanıcıların hayal kırıklığını en aza indirmeye yardımcı olabilir. - engelli
Bir düğmenin devre dışı bırakılmış durumu belki de en az kullanılan ancak geliştiricilere çok yardımcı olabilir. Tasarımcı, form için bir doğrulama süreci hazırlamadıkça, bu durum planlı bir şekilde planlanmaktadır (bir sonraki bölüme bakınız).
Bağlantıların çeşitli halleri gibi, web sitenizde kullanılan düğmelerin çeşitli durumlarını dikkate aldığınızdan emin olun. Açılan oturum açma formlarından arama alanlarına ve bülten kayıt formlarına kadar, bu düğmelerin tümü ilgili stillere ihtiyaç duyacaktır.
4. Form doğrulama
Önemli bir ilgili detay form doğrulamasıdır. Bu, web sitesinin kullanıcı gereksinimlerini ve hataları bir formda ilettiği kritik noktadır. Göz önünde bulundurulması gereken üç temel nokta vardır:
- Zorunlu Alanlar
Gerekli tüm alanlar belirtilmelidir. Çoğu zaman, bu görüldüğü gibi, yıldız işareti ile yapılır Lütfen Başlangıçtan Başlayın :
- Gerçek zamanlı doğrulama
Kullanıcı formu doldururken, bazı doğrulama gerçek zamanlı olarak yapılabilir. Bu tür bir doğrulama, kullanıcıyı girdikleri verilere ilişkin sorunları olabildiğince çabuk bildirir. Bu çok iyi bir şekilde yapılabilir jQuery doğrulama eklentisi :
- Post-back doğrulama
Bu tür doğrulama, kullanıcı formu gönderdikten sonra gerçekleşir. Gerçek zamanlı doğrulama için kullanılan stil genellikle burada tekrarlanır, ancak başka bir seçenek, tüm hataları tek bir iletide gruplandırmaktır. böğürme :
5. Durum mesajları: hatalar, uyarılar, onaylar vb.
Kullanıcılar web sitenizde bir işlem yaptıktan sonra genellikle bir tür geri bildirime ihtiyaç duyacaktır. En olası senaryo, bir form gönderdikten sonradır, ancak diğer pek çok olay da ortaya çıkabilir. Web sitenizi ve kullanıcıların yapabileceği eylemleri dikkatlice düşünün ve web sitesinin iletişim kurması gereken mesajları planlayın.
üzerinde Bugün hayat Hata iletileri için genel bir stil olarak kolayca kullanılabilen bir doğrulama mesajı görüyoruz. Renklerde ve simgelerin hafif bir değişimi ile, daha ince uyarılar ve hatta onay mesajları için de kullanılabilir:
6. Arkaplanları daha büyük ekranlarda genişletmek
Web sitesinin stiline bağlı olarak, arka plan öğeleri geliştiricileriniz için sorun olabilir. Çoğu arka plan basittir ve fazla hazırlık gerektirmez, ancak bazıları gradyanlar, desenler ve görüntüler tarafından karmaşıklaşır.
Büyük monitörlerin gittikçe yaygınlaştığını ve birçok tasarımın 960 piksellik bir taban çizgisi için planlandığını düşünürsek, çok sayıda ekran emlak açık kalıyor. Arka planınız uzaktan karmaşık bir şey içeriyorsa, büyük ekranları doldurmak için nasıl uzayacağını planlamanız size yardımcı olacaktır.
Aşağıda yaptığım örnekte, her yöne uzanan bir ahşap dokuya uyum sağlamam gerekiyordu. Ağır elli bir geliştirici ile uğraşmak istediğiniz şey değil.
7. Temel HTML elemanları
Kopyalanan web siteleri için temel HTML öğelerinin tasarımı ve stilleri temeldir ve göz ardı edilmemelidir. Ancak, yoğun bir düzeni ve farklı bir görsel stili olan birçok pazarlama odaklı web sitesinde, temel öğeler unutuluyor. Ve elbette, geliştirici, bir standart sayfa şablonu üretmeye başlamadan önce bir web sitesi oluşturmaya asla yetmez.
Her zaman planlanan temel unsurlar şunlardır: paragraflar, 1 ile 6 arasındaki başlıklar, sırasız ve sıralı listeler, tablo verileri, form alanları, resimler ve kalın ve italik metin.
Çalıştığım pek çok web sitesinde, geliştiricilere yardımcı olmak için bir stil rehberi hazırladım:
8. Web sitesi e-postaları
Tasarım planı görmediğim bir şey web sitesi tarafından oluşturulan e-postalar. Böyle temel bir elementin gözden kaçırılması kolaydır, çünkü genellikle web sitesinin temel odak noktası değildir. Yine de e-posta, bir hizmeti tanıtan ve genişletebilen güçlü bir araçtır.
Önerim, gönderilebilecek e-postaları aramak için web sitesinin içeriğini planlama aşamasında dikkatlice gözden geçirmektir. En yaygın olanlardan bazıları şunlardır:
- Posta listesi kayıt onayı,
- Kayıt Onayı,
- Form tamamlama onayı (iletişim formu gibi),
- Bir satın alma işleminden sonra sipariş doğrulaması.
Müşterilerinizin ve geliştiricilerinizin fikirlerini gerçekten vurmak istiyorsanız, web sitesi için de bir e-posta pazarlama şablonu hazırlayın. Kullanıcılara web sitesinden gelen kutusuna sorunsuz bir geçiş sağlayabileceksiniz ve çeşitli şekillerde marka bilinci üzerinde dikkatli bir kontrol sağlayabileceksiniz.
9. Sayfa germe
Bir tasarımın değişen içeriğe uyum sağlamak için nasıl uzayacağı sorusu da nadiren ele alınmakta, ancak web sitesinin tarzına bağlı olarak kritik olabilmektedir. Bunun berbat olabileceği bir örneğe bakalım:
Dolunay Barbekü sıkı bir giriş sayfasına sahip. Bu tasarım içeriğinde çok fazla hareket veya değişiklik yapılmasına izin vermez. Her şeyin belirli bir boyutu ve yerleşimi vardır. Peki, sahipler hoşgeldin mesajını gerçekten uzatmaya veya bir görüntü eklemeye karar verirse ne olur? Neyse ki, bunun için planladılar. Bu sayfada gördüğünüz gibi, metni çift tıklatarak sayfayı düzenledim. Sayfa mükemmel bir şekilde uzanır ve bunun için uygundur:
Çok daha fazla içeriğe sahip bir düzenin alternatif sürümlerini hazırlamak, böyle bir senaryoyu nasıl planlayacağınızı göstermede son derece yararlı olabilir.
10. Animasyonlar: pop-up'lar, araç ipuçları, geçişler vb.
Standart bir HTML ve CSS web sitesinde (Flash olmadan), animasyonların ve geçişlerin gözden kaçırılması çok kolaydır. Ve göz ardı edildiğinde, çoğu zaman bile hiç uyumayacaklar. Dolayısıyla, animasyonlar kritik önem taşıyorsa, en iyi seçeneğiniz, geliştiricilere nasıl çalışacaklarına dair bir örnek sunmak ve böylece ürünün gerektiği gibi çalışmasını sağlamaktır.
En yaygın yerlerden animasyonlar kırpılır:
- Araç ipuçları
Kullanıcılar öğelerin üzerine fare tıkladıklarında bu küçük pop-up'lar. - Görüntü rotator
Ana sayfa slayt gösterileri tüm öfke ve geçişler ve stiller için geniş seçenekler yelpazesi mevcuttur. - Hafif kutu
Sadece ışık kutusunun kendisini değil, aynı zamanda geçişi de stilleyebilirsiniz.
Bu animasyonlu öğelerin her biri, kendi başına barındırılması gereken ayrı bir görsel stile sahiptir.
Neden umursayayım?
Burada sunulan unsurların çoğu, geliştiricilere tasarımcılardan daha yararlı görünüyor. Adil olmak gerekirse, bu kısmen doğrudur: Eğer bu unsurların hepsini önceden hazırlarsanız, geliştiriciler sizi sevecektir. Bunlar, geliştiricilerin kendi kendilerine sormaktan veya kendileri bulmaktan yoruldukları şeylerdir.
Yine de, bu işin tamamını zamanın önünde yaparak, geliştiricilerin tahmin etmesini engelliyorsunuz ve böylece tasarımın kontrolünü elinizde tutuyorsunuz. Ve tasarımın kontrolünü sağlayarak, sıradan bir web sitesini sıradan bir siteye dönüştüren cila türünü ekleyebilmek için çok daha büyük bir şansınız var. Bazı tasarımcılar, tasarımlarını şarkı söyleyen gizli sos olarak adlandırıyor.
Ve eğer bu yeterli bir motivasyon değilse, bunu düşünün. Bunu iyi planlayan ve bu paketi tamamlayan bir tasarım paketi hazırlayan tasarımcılar temel olarak daha değerlidir. Sadece daha kaliteli bir ürün değil, aynı zamanda üretim maliyetini de düşürüyorlar. Bu, kâr için daha fazla yer olduğu anlamına gelir, ki bu elbette herkesi mutlu eder.
Bu nedenle, tüm bu ince detayları göz önünde bulundurun ve web sitenizi planlarken eğlenin. Açıkçası, bu ayrıntılar, kullanıcı etkileşimini ve değişen içeriği barındıran sürekli değişen web için tasarlama eğlencesinin yarısıdır.
Patrick McNeil bir serbest yazar, geliştirici ve tasarımcı. Özellikle, web tasarımı hakkında yazmayı, web geliştirmede insanları eğitmeyi ve web siteleri oluşturmayı seviyor. Patrick'in son kitap projesi Tasarımcının Web El Kitabı ; Bu makalenin satırları boyunca birçok ek konu içerir. Hakkında daha fazla bilgi edinebilirsiniz TheWebDesignersIdeaBook.com . Twitter'da takip et @designmeltdown .
Herkesin unuttuğunu düşündüğünüz için ne tasarlıyorsunuz? Bunları müşterilere daha önce hiç sunmadın mı? Geliştiriciler her zaman bir tasarıma eklemenizi isteyen ne tür bir şey buluyorsunuz?