Kırılabilir 10 Web Tasarım Kuralları
Web tasarımı ve tasarımı genel olarak geliştikçe, tutarlı ve kullanılabilir tasarımlar sağlamak için kurallar oluşturulmuştur.
Bu kurallardan bazıları, web sitesi yaratıcıları kullanıcılarına bakılmaksızın belirli ilkeleri istismar ettiği için yaratıldı.
Ancak bu kurallar hiç kimsenin uygulanmadığı ve gerektiğinde kırılmaları gerektiğinde özellikle kırılmaları durumunda çarpıcı bir tasarıma yol açacaktır.
Bu yazıda tasarım gereksinimlerinize uygun olacak şekilde kırılabileceğiniz 10 kural sunuyoruz.
Kural # 1: Yatay Kaydırma Çubuğunu Gösterme
Önemli sayıda farenin yatay fare tekerleği yoktur. Bu, bir web sayfasının içeriği tarayıcının kenarlarından uzandığında sola veya sağa kaydırmayı zorlaştırır.
Fare imlecini pencerenin altına getirmek ve sayfanın görüntülenebilir alanının ötesine geçen bir kelimeyi görmek için kaydırma çubuğunu sürükleyerek bırakmak can sıkıcı olabilir. Burada, kaydırma çubuğunu etkili yollarla çalıştıran iyi tasarlanmış siteler var.
Benek
Benek fare tekerleğinin kaydırma yönünü dikeyden yatayya değiştirmek için JavaScript'i kullanır. Benek'in portföyündeki her ürün kendi sütununa ayrılmıştır. Site şaşırtıcı derecede taze bir his veriyor ve sorunsuz bir şekilde akıyor.
Ayakkabı Guru
Ayakkabı Guru yatay kaydırma ile ortadan kalkar, çünkü insanların ayakkabılara bakma şeklinden faydalanır. İnsanlar çoğu ürünü yukarıdan aşağıya doğru inceler, ancak ayakkabılar farklıdır. Halkın gözleri genellikle ayakkabının uzunluğu boyunca hareket eder. Bu alışkanlığı kendi avantajına göre kullanan Shoe Guru, web sitesinin tasarım akışını aynı yönde yapıyor ve hareketin doğal olmasını sağlıyor.
Stephane Tartelin
Stephane Tartelin Sanat eserinin bir sanat galerisinde olduğu gibi görünmesini sağlamak için yatay kaydırma çubuğunu kullanır. Dikey fare tekerleği yukarıdaki örneklerde olduğu gibi işlev görmese de, etki şaşırtıcı derecede iyi sonuç verir. Fare tekerleğinin yatay olarak kaydırılması için yeniden kodlanması durumunda etkinin azalacağını bile iddia edebilirsiniz.
Grafik Terapi
Süre Grafik Terapi Sayfasında yatay kaydırma çubuğu görüntülenmiyor, yine de ekrana tıklayıp sürükleyerek yatay kaydırmaya izin veriyor. Grafik Teorisi yatay gezinmeyi kullandı çünkü tüm görüntüleri aynı yükseklikte değil aynı genişlikte. Yatay gezinme, sitenin sorunsuz akışını sağlar.
Yatay yol
Yatay yol yatay kaydırma kullanan web sitelerinin vitrinidir. Aşınmış grafikler güzel ve bu site CSS galerileri kadar benzersiz.
Kural # 2: Minimal Yazı Tipi Yüzü Kullan
Çok fazla yazı tipi genellikle birbiriyle çakışır ve görüntüleyiciyi alt eder. Her yazı tipi bir kişiliğe sahiptir ve çok fazla kişilik bozukluğu yaratabilir.
Bir çift yazı tipinden daha fazlasını etkin bir şekilde kullanmak için bir tasarım çok metin odaklı olmalı ve tasarımın geri kalanı nispeten sessiz olmalıdır. Burada, kullanıcıyla bağlantı kurmak için bu anlaşmazlık ve rahatsızlık hissini kullanan sitelerin bazı örnekleri verilmiştir.
Bağlantılar LA
Bağlantılar LA enerji duygusu yaratmak için doğrusal olmayan bir düzende birçok yazı tipi kullanır. Sayfa hızlı bir şekilde okunması zor ama kullanıcıyı içeri çekiyor. Ayrıca yazı tiplerinin hiçbirinin fazla dekoratif olmadığını da dikkate değer; her kelime okunaklı, tasarımı net ve temiz tutuyor.
Geo Elements Tasarım Stüdyosu
Çeşitli yazı tiplerini kullanmak genellikle enerji ve kaos duygusunu taşır, ancak Geo Elements Tasarım Stüdyosu web sitesi çok açık ve temiz. Her yazıya kendi alanı verilir, böylece izleyici onu başka bir yazı tipiyle ilişkilendirmez. Gökyüzünün arka plandaki görüntüsü, açıklık duygusunu güçlendirmeye yardımcı olur.
Richard Stelmach
Son örnekten farklı olarak, Richard Stelmach farklı yazı tiplerini birbirine yaklaştırır. Tasarım işe yarar çünkü sadece bir yazı tipi elle çizilmiş görünmüyor ve diğer ikisi de çizimde iyi çalışıyor. Elle çizilmiş yazı tipleri genellikle çok farklı yazı tipi yüzleri olduğunda bile birlikte iyi çalışır.
Satsu'nun
Satsu'nun çok sayıda farklı yazı tipine sahip gibi görünüyor, ancak aslında sadece üç tane (Spor Konseyi portföy kalemi dahil değil) var. Her şeyi dikkatli bir şekilde yerleştirerek, metin farklı yazı tiplerinde olsa da Satsu, belirli metin satırlarını birbiriyle ilişkilendirir.
Logo başlığı bir yazı tipindedir ve iki alt başlığın her biri kendi yazı tipine sahiptir, ancak izleyici bu üç metin öğesini birlikte gruplandırır. Satsu, sayfanın kişilikleriyle ezilmeden enerji üretebiliyor.
Kural # 3: Çok Fazla Renk Kullanmayın
Bir tasarımla çok uzaklara gitme korkusu, profesyonelleri çaylaklardan ve çaylaklardan habersizden ayıran şeydir. Tasarımlarını mümkün olduğu kadar uç noktalarda yapmaya, mümkün olan en fazla sayıda renkte, yanıp sönen bir metne ve yanmaya çalışın.
Çaylaklar tasarımlarını dikkatlice incelemek isterler, ama sonunda tasarımları bazen cansız görünebilir. Aşağıdaki göze hoş gelen tasarımlar sınırları zorlayan bazı gerçek profesyoneller tarafından.
Matt Mullenweg
Matt Mullenweg’in güzel renkli tasarım bir suluboya resim gibi görünüyor (Bu yazı yazıldığından beri site güncellendi). Arka planda bulunan tüm renkler, herkesin dikkatini çekerdi.
Genel olarak, tonlarca rengi olan iyi tasarımlar arka planında bu renklere sahip olacak ve ön yüzleri daha basit bir palete sahip olacak. Çok fazla şey olduğunda metin okumak çok zor.
Travic Isaacs
Travis Isaacs’ın Tasarım, tasarımın renkli görünmesini sağlayan arka planda renkli bir dikey eğime sahiptir. Bu web sitesi, renkli bir efekt yaratmak isteyen tasarımcılar için mükemmel bir seçim olan bağlantı rengi olarak parlak pembeye sahiptir.
James De Angelis
James De Angelis web sitesi, metnin çaylak gibi görünmeden renkli olabileceğini gösteriyor. Tasarım çok yedek ve slogan kesinlikle merkezi sahne verilir.
Kural # 4: Sitenizin Hedefini Açıklığa kavuşturun
Genç tasarımcıların kulağına gerçekten takılan bir şey, bir tasarımın izleyicilere herhangi bir metni okumadan önce neye baktıklarını anında anlatması gerektiğidir.
Markaların tanınması büyük şirketler için önemlidir, ancak bazen küçük çocukların izleyicinin dikkatini çekmek için biraz daha zeki olması gerekir. Geriye dönük bilgi tutmak izleyiciyi şaşırtabilir ve insanları daha fazla bilgi edinmek isteyenlere “taklit edebilir”.
Bu tekniği web tasarımına uygulamak, kullanıcıların sitenizde kaldığı süreyi büyük ölçüde artırabilir.
Cetrotrees
Bugün çoğu portfolyoda, serbest meslek sahibi veya şirket genellikle kendilerini tanıtıyor ve çalışmalarını açıklıyor. Cerotreees bunun yerine solda belli belirsiz etiketli bağlantılar ve sağdaki çalışmalarının örneklerini koyar, ama hiçbir şey arkasındaki fikri veya kişiyi açıklamaz.
Siteyi çevreleyen gizemin havası, kullanıcının kalmasını sağlar.
Son Mixtape
Son Mixtape işini gösteren ve başka bir şey olmayan bir başka portföy. Bu tür tasarımlar aşırı güven duygusu taşır. Asla satmaya çalışmazlar; Sadece kullanıcının uçurulacağını ve bir sözleşme için dilenmesini beklerler.
Peter Pearson
Bir açılış ekranı kullanmak, kullanıcının düşünce sürecini yavaşlatmak ve daha derinlere inmek için onlara ilham vermenin iyi bir yoludur. Sıçrama sayfasının amacı genellikle siteyi hızlı bir şekilde fotoğraflarla veya kısa bir metinle açıklamaktır.
Ama içinde Peter Pearson’ın Davası, amacı bir duygu uyandırmaktır. Büyük gökyüzü ve yapışan metin etkisi merak uyandırmak için harika bir iş çıkarır çünkü bu şeyler genellikle birlikte görünmez. Bu site ayrıca, açılış sayfasının yarattığı duyguyu gerçek içeriğe devam ettirmek için harika bir iş çıkarmaktadır.
Kullanıcıyı takip eden yan kaydırma hareketi ve animasyonlu çizgiler gerçekten etkilidir.
Piepmatzel
Dil engelini aşmanın harika bir yolu, herhangi bir kelime kullanmamaktır. Piepmatzel bir CSS galerisi ve daha önce bir CSS galerisini görmüş olan kişiler muhtemelen bir tanesini hemen tanıyacaktır.
Henüz küçük resimlerden birkaçını verebilecek kadar ilgi çekici olmayanlar, kalıbı ortaya çıkarmak umuduyla tıklanabilir. Sayfanın altındaki küçük metin miktarı, sıralamaya yardımcı olur ve gereksizdir.
Kural # 5: Gezinme Kolaylaştırılmalı
Navigasyon bir sitenin darboğazı olmamalıdır. Kullanıcılar hızlı bir şekilde istediklerini bulabilmelidir. Bazen, ancak, sezgisel olmayan ancak ilgi çekici gezinme, kullanıcının siteye bağlı olduğunu ve neyi teşvik ettiğini hissetmesine yardımcı olabilir.
Alvin Tang
Bir önceki bölümde bahsedildiği gibi, bir portföy kendini ortaya koymadığında bir güven havası iletilmektedir. Durum böyle Alvin Tang’in fotoğraf portföyü. Siteye ilk geldiğinde, kullanıcı bağlantı olarak gördükleri kelimeleri hemen tanımaz.
Bu belirsizlik, onları biraz dürtmeye çağırmalı. Fareyi bir sözcüğün üzerinde hareket ettirmenin aslında bir bağlantı olduğunu ve üzerine tıklandığında muhteşem bir fotoğraf yüklendiğini ortaya koyuyor. Fotoğraf, kullanıcıların göz atmaya devam etmesini sağlayacak.
Daha fazla fotoğraf görmek için, kullanıcıların tarayıcılarındaki "Geri" düğmesini (çoğu insanın anlayacağı bir şey) tıklayıp ardından başka bir bağlantıyı tıklamanız gerekir. Tasarımda el tutma yok ve çok iyi çalışıyor. Bu geleneksel olarak “muhteşem bir tasarım” değil, tam olarak ihtiyaç duyduğu şeyi sunar.
Kasulo
Kasulo 'ler Gezinmek çok zor değil, ancak ortalama kullanıcı siteye geldiğinde ne yapacağını tam olarak bilemeyebilir. İlk tıklamadan sonra, her şey belli oluyor.
Kullanıcı portföy parçalarını 3 boyutlu şekilde gezer ve en son öğeler en yakın başlangıçta görünür. Fare tekerleğini kullanmak daha da eğlencelidir.
Marcio Kogan
Marcio Kogan’ın site, hemen belirgin olmayan harika bir gezinme örneğidir. “Beni sürükle” talimatının karşı koymak zor ve kullanıcı bunu yaptıktan sonra, portföy öğelerini seyretmek için yoldalar. Mouse-over önizlemeleri küçük bir detay ama gerçekten etkileyici.
Ceranco
Bir müşteri, bir tasarımcıya ilk kişisel bir shooter video oyunu gibi 3 boyutlu olarak girmesini isteseydi, çoğu tasarımcı sessizce kendilerine gülerdi, derin bir nefes aldı ve sonra bunun neden kötü bir fikir olacağını açıkladı. .
Web sitesi için Ceranco Tam olarak 3 boyutlu bir tetikçi değil, bir çeşit bilgisayar oyunu için kolayca karışabilir. Bunun gibi siteler, ilgi çekici kullanıcılarda mükemmeldir. Uzun yükleme süresi ve kötü arama motoru optimizasyonu bunu çoğu proje için ideal olandan daha az yaparken, kesinlikle ikinci bir düşünceye değer.
Kural # 6: Metin ve Arka Plan için Farklı Renkler Kullanın
Bu kural belki de her yerde yazılmadı, ancak birçok çaylak, metinleri okunamayacak kadar korkuyor ve hem arka plan hem de yazı tipi için aynı temel rengi kullanmayı düşünmüyorlar. Benzer renklerin çalışmasını sağlamak için bazı basit teknikleri takip edebilirsiniz.
Linksys
Linksys Linksys Arka plan rengi mavi tonlarının çeşitli olmasına rağmen, site tüm bağlantıları için bir mavi nasıl olduğu için düzgün. Bir risk ve belki de en büyük renk kararı olmasa da, işe yarıyor.
Brad Colbow
Brad Colbow'ın tasarım mavi arka plan üzerinde mavi metin nedeniyle Linksys 'benzer. Mavi mavi, özellikle site boyunca çok farklı blues ile, güzel çekilmesi zordur.
Gücü ayarla
Bu bölümde şimdiye kadar sadece mavi web sitelerini gördük, çünkü mavi metin insan gözünün okuması için en zor ve okunaklı mavi tip her zaman etkileyici. Bir metin efekti mavi renkte çalışıyorsa, büyük olasılıkla herhangi bir renkte çalışacaktır.
Gücü ayarla metni arka plandan etkin bir şekilde ayıran 3-D efekti oluşturmak için fontu için bir letterpress stili kullanır.
Tasarımda Sanatçı
Tasarımda Sanatçı sadece yeşil bir arka plan üzerinde yeşil bir metin ve sarı bir arka plan üzerinde sarı / bej metin değil, aynı zamanda bir resmin üzerine doğrudan metin vardır.
Bazı bireysel harflerin okunması zor olsa da, bir bütün olarak sözcükler okunaklı kalır. Bu tarz bir etki hemen hemen her zaman bir tasarımda merkez sahne olmalıdır.
Horacio Bella
Horacio Bella portföyünde başka bir 3-D etkisi kullanır. Bu durumda, harfler içe doğru gömülmek yerine dışarı çıkmaktadır. Bu etki olmadan okunaklılık büyük ölçüde azalırdı. Burada kullanılan bir başka iyi etki, okunabilirliği daha da artıran harflerin sıkı bir şekilde karakterize edilmesidir.
Kural # 7: İçeriğinizin Yoluyla Animasyon Yapmayın
Cidden, kullanıcının okuduğu yerde küçük Flash reklamları yayınlamayın. Aynı durum, kullanıcı bir cümlenin ortasındayken ortaya çıkan anket kutuları için de geçerlidir. Kullanıcılar, bir cümlenin yarısına geldiğinde dikkatinin dağılmasını sevmezler. Ancak ...
Küçük örümcek tarafından büyülenmemesi gerçekten zor ABA sitesi. Tasarım temiz, ve örümcek rahatsız edici olsa da, sorun değil. Şimdiye kadar, bu sitenin kuralın tek istisnası olduğunu düşünüyorum.
Kural # 8: Web Güvenli Yazı Tiplerine Yapış
Yazı tipi yüz değiştirme teknikleri hala genç olmasına rağmen, büyük bir sıçrama yapıyorlar. sIFR'yi ilk ve son zamanlarda Cufón ve Typefasce.js ortaya çıkan.
Diseñorama
Üzerinde Diseñorama web sitesi, kırmızı “Recientemente” metni seçilebilir. Bir dezavantajı ise site anında yüklenmezse, kullanıcı orijinal düz yazıyı kısa bir süre görecektir.
Başka bir dezavantajı ise, kullanıcının JavaScript'i veya Flash'ı devre dışı bıraktıysa, yalnızca orijinal yazı tipini görmesidir. Her şey düşünüldüğünde, hala oldukça havalı. Umarım önümüzdeki birkaç yıl içinde neler olacağını bir önizlemedir.
Cactuslab
Cactuslab ayrıca mavi alt başlıklar için sIFR kullanır (“Kış Çalışması” gibi). SIFR yazı tipi değiştirme tekniklerinin en karmaşık olmasına rağmen, metin iki diğer teknik üzerinde büyük bir avantaj sağlayarak kopyalanabilir ve yapıştırılabilir.
Kural # 9: Bir Sıçrama / Açılış Sayfası Yok
Birçok tasarımcı, müşterileriyle bir sıçrama sayfasının neden iyi bir fikir olmadığı konusunda aynı eski tartışmayı yapmıştı. Google, bu tür sayfaları daha düşük sıralamaya eğilimlidir ve kullanıcının, içerdikleri içeriği almasını yavaşlatır. Ama doğru yapılırsa inanılmaz güzel ve ilham verici olabilirler.
Parlak Postprodüksiyon
Sıçrama sayfasında görünen portföy örneğinin amacı Parlak Postprodüksiyon Web sitesi kullanıcıdan duygusal bir tepki vermektir.
Her ziyarette, portföyden rastgele bir fotoğraf yüklenir. Fotoğrafın üzerine tıklamak onu ölçeklendirir ve sitede bulunan diğer portföy parçaları arasında yerini alır. Ölçeklendirme ve hareket efekti devam sağlar ve kullanıcının duygularını şirketin çalışmalarının geri kalanına taşımasına yardımcı olur.
Issa Londra
Bir site Flash'ta tamamlandığında, yükleme çubuğu bir açılış sayfası olarak kullanılabilir. Bir kullanıcı bir yükleme çubuğu gördüğünde, sayfayı kapatır ve başka bir yere gider ya da başka bir sekmeye geçer ve beklerken başka bir yere gözatacaktır.
Sayfa yüklendikten sonra, başlatmadan önce kullanıcının geri dönmesini beklemek en iyisidir. İçinde Issa Londra Bu durumda, kapı sitenin hazır olduğunu ve kullanıcının girebileceğini söyleyen mükemmel bir metafor.
Kullanıcı kapıya tıkladığında, kapı açılır ve çeşitli resimli modeller görünür. Giriş sayfasındaki kapıyı kullanmak harika bir tasarım fikridir, çünkü girdiğinizde kullanıcı nişanlanmış hisseder.
Kural # 10: Tabloları kullanmayın
Tasarımlarında tablo kullanan herhangi bir web tasarımcısı, deneyimli tasarımcılardan anında çaylak olarak adlandırılacaktır. Tablolar tüm tarayıcılarda aynı görünmez ve kaynak kodun dağınık görünmesine neden olabilir, ancak en azından bunlarla ne aldığınızı bilirsiniz. İşte tablolar içeren bazı tasarım örnekleri.
Bu masanın görülmesi biraz zor ama orada iki sandalye arasında sıkışmış. Güzel bir yan masa var ama ne yazık ki bu sitenin tasarımına çok fazla katkıda bulunmuyor.
Tablolar bu tasarımın arka planında Play'de çalışın Ancak, işçilerin dizüstü bilgisayarlarını ve diğer öğelerini kolayca erişebilecekleri şekilde tutarlar. Bu tablolar olmadan, oda çok daha fazla boşalırdı ve arka plan fotoğrafı da aynı etkiyi yaratmazdı.
Bu tasarım çoğunlukla sandalyelere sahip olsa da, küçük resmin sağ üst kısmında güzel bir masa ortaya çıkıyor. Bir tencerenin üzerinde oturuyor gibi görünüyor.
Tabloları olan tasarımlara gelince, bu en iyilerden biri. Bu Flash animasyonunda öne çıkan iki tablo sayesinde, tasarım onlara çok ilgi gösteriyor. Bu site, her tasarımcının tabloları kullanan harika tasarımların listesinde yer almalıdır.
Kuralları yıkmak!
Bir tasarım onu çağırdığında kuralların kırılması iyi olur. Burada gözden geçirilen tasarım seçeneklerinin çoğu, ortalama tasarımcı tarafından dikkate alınmayacaktır. Bu, büyük tasarımcıları ortalamalardan ayıran şeydir.
Öğrettikleri şeye karşı çıkacak cesurlar daima göze çarpıyor.
Sadece WDD bt Eli Penner için yazılmıştır. Kendi web sitesini işletiyor SleepyHero.com
Web tasarımlarınızda herhangi bir kural ihlal ediyor musunuz? Neden ya da neden olmasın? Lütfen görüşlerinizi bizimle paylaşın…