Birlikte Gelen Web 2.0 ve Geleneksel Tasarım Kurallarının 25 Örneği

Tasarım dünyasının geniş kapsamı içinde “Web 2.0” terimi nispeten yenidir.

Bununla birlikte, Web 2.0 kendi içinde bir çok sağlam, sürekli gelişen tasarım standartları tanımı olduğu için, kendi standartlarını, bazılarını güçlü, diğerleri de çok güçlü değil.

Web 2.0 sitelerinin sayısız örneği, bir zamanlar güçlü tasarım olarak kabul edilen kuralları ihlal etti.

Öte yandan, birçok durumda Web 2.0, yaygın tasarım yanlışlarını güçlendirdi; kullanılabilirlik, arayüz ve okunabilirliğe odaklanır .

En iyisi olarak, Web 2.0, yüzyıllardır uygulanan geleneksel tasarım kurallarına eşit olarak durmaktadır, ancak toplumumuzun şu andaki koşuşturmacası ve koşuşturmacası açısından bir yansıması yoktur.

Web 2.0 ve geleneksel tasarım uygulamalarının gerçekten çarpıcı web siteleri oluşturmak için nasıl bir araya gelebileceğini gösteren 25 siteden oluşan bir koleksiyon .

1. Piksel Matrix Tasarımı

Josh Pyles iyi bir adam ve aynı zamanda fantastik ve disiplinli bir tasarımcı. En son Pixel Matrix tekrarı bir ayakkabıcıdır ve özellikle rengi ve güçlü bir ızgara sistemini kullanır. Portföyüne göz atın ve bu uygulamayı kendi müşteri çalışmasına taşıdığını göreceksiniz.

“Hakkında” sayfasına göz attığınızda (oyundaki güzel sekme sistemini not edin), Josh'un çalışma alanının güzel bir fotoğrafını içerdiğini görebilirsiniz.

Bu çekimin altında, son derece güçlü bir bilgi hiyerarşisi oluşturan Web 2.0 yazı tiplerinin büyük bir dengesi var. Kendi biyo'sunu küçük tutar ve kenar çubuğuna sıkışır ve içerik alanındaki daha büyük metni kenar çubuğunda daha küçük, karmaşık tiple dengeler.

Geleneksel Unsurlar:

Büyük ızgara sistemi.
Harika renk teorisi
Güçlü bilgi hiyerarşisi

Web 2.0 Geliştirmeleri:

Güzel geçişler.
İnce detaylar.
Büyük, okunaklı yazı tipi seçenekleri.
Bağlı kalmak için çok sayıda yol.
Temas formu bile yuvarlatılmış köşelerin güzel bir uygulamasına sahiptir!

2. MuttInk

Son zamanlarda yuvarlak köşelerden bu yana doku en büyük şey gibi görünüyor ve MuttInk'in sitesi tipik Web 2.0 olarak sınıflandırılmasa da, bir bakışta Jeremy Holmes'un (işin arkasındaki adam) inanılmaz bir tasarımcı ve grafik sanatçısı olduğunu bilmek gerekiyor. .

Detaylara, dokuya ve güçlü bir kimliğe olan ilgi, bunu kişisel bir canlı olarak yerleştirir.

Çarpıcı renklerin renkleri biraz geride olsa da (ki bence bu iyi bir şeydir), ben hala parlak aksanla ilintili incelikli, dünyevi tonların hayranıyım ve MuttInk bunu parlak bir şekilde çekti. .

Bejin üstündeki turkuaz gerçekten çıkar ve siteye nüfuz eden “taslak tablo” hissini korur. Ve tür küçük tarafta ve noktalar okumak için biraz zor olsa da, hala sayfada harika görünüyor.

Geleneksel Unsurlar:

Son derece detaylı detaylara dikkat.
Güzel tip (belki de çok küçük).
Büyük marka kimliği.
Özellikle portföy sayfalarında büyük alan kullanımı.

Web 2.0 Geliştirmeleri:

Doku büyük kullanımı.
İşi sergileyen büyük, profesyonel görüntüler.
Sosyal bağlantıya hızlı erişim.

3. 45 Royale

45 Royale'deki portföy sadece inanılmaz bir iş yelpazesi sergilemekle kalmıyor, aynı zamanda sitenin arkasındaki ekibin çoklu tasarım standartlarının iyi kullanımını anladığını gösteriyor. Web 2.0 geri dönüşlerinin harika bir karışımı, ancak geleneksel tasarım standartlarında sağlam bir temele sahip (ve sadece bu renklere bakın!).

Özellikle, 45 Royale son zamanlarda gördüğüm en iyi ızgara sistemlerinden birine sahipti ve görüntüleri sergilemek için seçtikleri görüntüler yukarıdaki flüoresan renkli üstbilgiyle gerçekten çok iyi örtüşüyor.

Renk teorisini ve organizasyon örgüsünü böylesine büyük bir uyumla görmek her zaman bir zevktir ve her şeyi büyük ve küçük yazı tiplerinin son derece sofistike bir karışımıyla tamamladılar.

Gri, beyaz ve siyah ikincil bir paleti çevreleyen parlak renkler? Muhteşem.

Geleneksel Unsurlar:

Bir ızgara sisteminin daha iyi örneklerinden biri.
Bolca boşluk ve solunum odası.
Parlak renk seçimi.
İyi bilgi akışı.

Web 2.0 Geliştirmeleri:

Renkler sadece şarkı söylüyor … her iki kategoride de listeledim.
Jumbo boyutlu tip, zevkli olsa da son derece okunaklı.
Çizim ve grafiklerin harika kullanımı.
Çok sayıda proje iyi organize edilmiş ve güzel bir şekilde sergileniyor.

4. Tutam Zum

Özellikle beyaz alanın harika bir örneğinin üzerinde sunulduğunda, harika illüstrasyon için bir emici oluyorum. Bu siteyi çok seviyorum çünkü sadece portföyü tıklamak bir patlamadır. Büyük boşluk, harika ızgara sistemi ve harika JavaScript kullanımı; Bu şeylerin benim için bir yolu var (evet, bilgisayar başında çok fazla).

Günümüzde birçok teknolojiyle karşılaştığımızda akılda tutulması gereken önemli bir konu, özellikle de JavaScript'in olanaklı olduğu fantazi ve hileler, onları küçültmek ve onları yönetmektir.

Flash tüm öfke olduğunda doksanların sonunu hatırlıyor musun? Flash’ın ne kadar hasta olduğunu sonradan hatırlıyor musun? İyi Web 2.0 standartları, tasarımla ilgili olduğu kadar disipline sahiptir ve Pinch Zoom, kontrol altındadır.

Sitelerini fevkalade iyilikle serpiştiriyorlar, ancak görüntülerin üzerinde hemen hemen sıfır beklemekte, yalın ve eğlencede kalıyorlar.

Geleneksel Unsurlar:

Bir başka büyük ızgara sistemi (burada bir desen görüyor musunuz?).
Siyah beyaz asla eskisi gibi görünmez.
Yazı tipi ve başlıkların güzel dengesi. (Küçük yazı, okunaklı olsa da, belki bir nokta boyutu veya iki büyük olabilir).

Web 2.0 Geliştirmeleri:

JavaScript portföy kaydırıcısı, eğlenceli ve etkilidir.
Arayüz minimalist ve direk.
Çizimin çeşitli kullanımı harika bir dokunuş.
Web'in mevcut teknolojisini hantal hale getirmeden kucaklar.
Sayfa düzenine benzersiz çözümler (Bilgi sekmesini tıkladığınızda mega açılır pencereye göz atın. Orada gizlenen bir web sitesi neredeyse var!).

5. Cameron Moll

Her zaman Cameron'un çalışmalarının bir hayranı oldum, ve söyleyebildiğiniz gibi, tasarım oyun alanının geleneksel tarafında kalma eğiliminde olduğunu söyleyebilirim. Blog sitesi, sofistike tasarımın ve küçük yazı tiplerinin geleneksel tarafına girme eğiliminde olmasına rağmen, yeni ve gelenekselin fantastik bir dengesi olan portföy sayfasının zerafetini ve güzelliğini reddetmiyor.

Renkler canlı ve yazı tipi seçimleri genel his ile örtüşüyor, ancak yine bir tür Web 2.0 no-no olan yerlerde oldukça küçük olabilir. Ama ben kimimi niçin seçeceğim? Cameron büyük bir başarı yakaladı ve tasarımcılar için harika bir kaynak olan Authenticjobs.com'un arkasındaki adam (ve faturalarımı ödemede yardımcı olan).

Geleneksel Unsurlar:

İyi yapılandırılmış içerik.
İnce renk çeşitleri, hoş bir dokunuş.
Tip şık görünüyor, ancak spektrumun küçük tarafına binme eğilimi gösteriyor. Öyle bile olsa, okunaklı ve güzel görünüyor.

Web 2.0 Geliştirmeleri:

Çok güzel doku kullanımı.
Portfolyo, çalışmanın güzel resimlerini içerir, ki bu oldukça basit ve gezinmesi kolaydır.

6. Metalab'ın “Fluid” Tumblr teması

Listeyi hazırlayan tek Tumblr teması Metalab tasarımında “Fluid”. Basit bir sebepten dolayı listeyi oluşturdu: Web 2.0'ın en iyi örneğidir. Rengi ile basit, temiz ve parıltılı.

Biri, bu karşılaştırmada biraz tek taraflı düşünebilir (bu bir Web 2.0 catch-all). Çünkü Metalab, Web 2.0 alanındaki standartları belirlediği için biliniyor ve bu site bu gerçeğin bir kanıtı. Metalab Design, temel kuralları akılda tutar ve yapıyı basit ve iyi organize eder.

Şeffaflık ve örtüşen grafikler, Web 2.0'daki yeni trendlerden biridir. Bir yere büyük miktarda derinlik verir ve son derece fütüristik bir görünüme sahiptir. Metalab'ın “Fluid” i bu konsepti benimsedi ve daha da iyisi, indirilebilir bir tema olarak kitlelere ulaştırdı.

Geleneksel Unsurlar:

Basit, etkili bir yapı.
Tumblr temalarının kitlelerinde öne çıkıyor.
Çağdaş (sade) renk düzeni.

Web 2.0 Geliştirmeleri:

Büyük, canlı fotoğrafçılık.
Web 2.0 tasarımını kesme için ante Ups
Son derece okunaklı yazı tipleri ve başlıklar.
Yuvarlatılmış köşelerin ve degradelerin kullanımı aşırıya kaçıyor, ancak eğlenceli ve modern bir Web 2.0 çözümü sunuyorlar.
Simgeler, her gönderi için seçeneklerde gezinmek için mükemmel, minimalist bir yoldur.
Saydam arka planları unutmayalım!

7. Viget

Oh oğlum. Bu site. Bana her zaman olur. Tabii ki, doku için yumuşacık biriyim ama bu tasarımcı da iyi renk teorisi ve hiyerarşisinin inceliklerini yakaladı.

Demek istediğim alt taraftaki portreleri kontrol et. Göz alıcılar, ancak çok karmaşık bir tasarım akışı ile rekabet etmiyorlar. Harika yazı tipi seçimlerini ve suluboya hissini unutmayalım. Pastadaki buzlanma, sitenin görüntü ağır olmasına rağmen, bir çırpıda yüklendiğidir!

Bu sitenin bir başka güzel yönü de tasarımcıların topluluklarıyla çok fazla bilgi paylaşmak istedikleri ve bu tasarımcılar onları tasarımcı olarak satan bilgiler değil, tipik kullanıcıların kendilerini değerli bulabilecekleri bilgileri.

İhtiyaçlarınızı boğazınıza düşürmeden daha derine inmenize izin verir, bu her zaman hoş bir uygulamadır.

Geleneksel Unsurlar:

İyi yapılandırılmış içerik.
Güzel renk ve tip.
Yazı tipleri küçük olsa da, ana içeriğin okunması kolay.
Harika sanat eserleri, tasarımlara sorunsuz bir şekilde uyum sağlar (serin portreler).

Web 2.0 Geliştirmeleri:

Suluboya teması son derece çağdaş ve görüntü ağır olsa da, yalın ve ortalama yüklemek için tasarlanmıştır.
Kenar çubuğu içeriği iyi organize edilmiş ve içerik odaklı.
Kenar çubuğundaki “Konuşma Balonu” kutusuna benzersiz bir çözüm.
Çok sayıda paylaşılan, içerik odaklı bilgi.

8. FeelWire

Büyük boşlukların harika bir örneği de Feelwire. Beyaz fonlardaki siyah tip, aradaki gri tonlarıyla, asla eskisi gibi görünmüyor. Birkaç parlak renkli simge ekleyin ve kendinize basit ama etkili bir site var. Her şey burada basitlikle ilgili (heck, sadece bir sayfa var!).

Web 2.0 tarzındaki simgeler, bu sayfanın merkezinde yer alır ve siteyi bir arada tutmanın çok yol kat eder. Ayrıca, sitenin metinle taşmasını da engeller ve kullanıcıya meraklı bir şey verir.

Bu ikonların üzerine bindikten sonra, bulduğum şeyden çok memnun kaldım: Aradığım bilgiyi veren çok basit bir vurgulu durum, sürekli popüler Web 2.0 “Konuşma Balonu” ile bunu yapıyor. Harika bir dokunuş.

Son şey: Ayrıca, sayfanın dışına çıkan ve simgeleriyle iyi etkileşime giren kırmızı bağlantıları da beğeniyorum, ancak iletişim bağlantısını biraz daha dikkat çekici yapmaları gerektiğini düşünüyorum. Şu an itibariyle içeriğe biraz fazla bağlı ve gerçekten bu yetenekli geliştiricilerle iletişim kurmanın bir yolunu aramalıydım. Sadece söylüyorum'.

Geleneksel Unsurlar:

Kısa, tatlı ve noktaya: tek bir sayfa sitesi.
Beyaz boşluk!
İnce, zevkli yazı tipi seçenekleri.
Güzel, temel düzen.

Web 2.0 Geliştirmeleri:

Parlak simgeler, sayfadan iyi bir şekilde çıkar.
Simgelerdeki gerçekten harika rollover'lar, siteyi düzenli hale getirmez, ancak size ihtiyacınız olan bilgiyi eğlenceli bir şekilde verir.
Güzel avatarlar insan unsuru ekler.

9. Agami Yaratıcı

Tamam, belki de bu son derece dokulu sitelerle kişisel bir şey, ama Agami Creative'in yaptığı şey çok iyi. Görüntü-ağır sitelerin yüksek hızlı bağlantılarda bir günde mükemmel kabul edilebilir bir çözüm haline nasıl gelebileceğinin çağdaş bir örneği.

Bu sitenin en önemli parçası, kesinlikle suluboya logo tasarımına mükemmel bir fon olarak hizmet eden suluboya başlığıdır. Aynı zamanda, navigasyona, bulunduğu yere yeterince önem vermeden, ancak kullanıcıya hakaret etmeden ev sahipliği yapıyor (çünkü çoğu kişi bu günlerde navigasyonu nerede bulacağını biliyor.).

Portföy sayfasına tıkladığınızda, mükemmel miktarda nefes alan ve güçlü bir ızgara sistemi içeren bir düzen dikkatinizi çekecek.

Basit görüntüler, çalışmaya katkıda bulunur ve gözlerinizi, nihai sonuca bir anahtar deliğine bakmak gibi bireysel projelere çeker. Tüm bunlar başlıklar için sofistike bir serif yazı tipi ve gövde metni için oldukça okunaklı bir sans-serif yazı tipi ile sarılmıştır.

Geleneksel Unsurlar:

Renk teorisinin daha güzel kullanımı.
Harika sanat eserleri.
Tip / yazı tiplerinin ilginç kombinasyonu.
Sanatsal, elle çizilmiş logo, site genelinde taşınan bir his var.

Web 2.0 Geliştirmeleri:

Büyük boyutlu gezinme, sitenin etrafında gezinmeyi kolaylaştırır.
Temasa geçmeyi gerçekten kolaylaştırıyorlar.
Avatarların kullanımı iyi bir fikirdir (dürüst olmak gerekirse bunlarla daha iyi çalışabilirlerdi. Yine de anime görüntüsünün Asya etkisi dışında bu siteyle nasıl uğraşacağından emin değil misiniz?).
Doku seviyorum!

10. Eklemek Shukla

Harika bir örnek yaklaşımı olan bir başka site olan Designer Adit Shukla, harika bir renk şemasının nasıl oluşturulacağını ve hatta kenar çubuğuna hoş bir çözümle nasıl çalışacaklarını da biliyor.

Bazı garip nedenlerden dolayı, birçok kenar çubuğu, tasarımcıların bir sitenin kenar çubuğunu bir araya getirirken iyi tasarım kurallarını görmezden gelme iznine sahipmiş gibi özensiz ve gözden kaçmış durumda. Bu site ile değil.

Her ne kadar içerik az da olsa (biraz da olsa) olsa da, özellikle yaratıcı olanı, özellikle de gerekli olan derinliği ekleyen, açıklayıcı başlıktaki yaratıcılıktan çok hoşlanmıyor. Yukarıdaki navigasyon sekmeleri de hoş bir dokunuş.

Geleneksel Unsurlar:

Canlı renkler.
Kenar çubuğu ve başlık gibi ortak öğelere yaratıcı çözümler.
Resimde çok fazla derinlik var.

Web 2.0 Geliştirmeleri:

Gezinmeyi de barındıran, iyi geliştirilmiş bir başlık resmiyle basit düzen.
Büyük tip etkilidir.
Sitede gezinmek için birden fazla yol (dürüst olmak gerekirse, bunun iyi bir şey olduğuna ikna olmadım).
Şeffaf sekmeler hoş bir dokunuş.

12. Krem Kepçe

Cream Scoop hakkında ilk fark edeceğiniz şey, site genelinde kullanılan renklerin cesur bir seçenektir. Renkleri normdan çentik almaktan korkmuyorlar ve sonuç farklı olduğu için ferahlatıcı.

Renkler kalın olmasına rağmen, aynı zamanda site genelinde karabiberlenmiş güçlü tip ve gradyanların ince karışımları da vardır. Arka plan gradyanının, en az gezinmeyi vurgulamak için bir spot ışığın kenarı gibi üstte nasıl parladığını fark edin. Tip, belirgin bir şekilde Web 2.0 hissi ile iyi organize edilmiş ve dengelenmiştir.

Geleneksel Unsurlar:

Renklerin kalın seçimi, yine de şaşırtıcı derecede etkili yollarla çalışan bir seçim.
İşi yapan minimalist navigasyon.
Oynak illüstrasyonun büyük kullanımı.
Düzen yapılandırılmış, ancak eğlenceli.

Web 2.0 Geliştirmeleri:

Arka planda bir degrade harika kullanımı.
Parlak mavi gerçekten dikkatinizi çeker ve önemli şeylere yönlendirir.
Yaklaşık sayfadaki avatarların harika kullanımı (bu çocuklar kaç yaşında?).
Büyük yazı tipleri boyunca kullanılır.

13. Carbonica

Carbonica, Web 2.0'ın degradelerini ve parlak iyiliğini unutur ve bir not defterini andıran “birlikte bir araya getirilmiş” bir görünüşe gider. Doku ve animasyonun harika kullanımı, ama aynı zamanda elle çizilmiş tipte gerçekten eğlenceli.

Biraz aşağı kaydırdığınızdan ve temayı mükemmel bir şekilde tamamlayan ikonlara göz attığınızdan emin olun!

Geleneksel Unsurlar:

Temel yapı oyunda.
El yapımı yazı sitenin temasıyla iyi gider.
Animasyon hoş bir dokunuş (ama üzgünüm, Flash kullanımı bu noktayı Web 2.0 Kategorisi dışında tutar).

Web 2.0 Geliştirmeleri:

Doku harika.
Alt gölgeler gerçekçi derinlik ekler.
Güzel simgeler, fotoğraflar ve illüstrasyon.

14. DSGN + DVLP

Yine genel siyah ve beyaz renk şeması bu site için çalışıyor ve Web 2.0 el çantasından çıkarılan bazı temiz simgelerle bu yönü vurgulamaktadır.

Ana sayfa bir çeşit sıçrama sayfası olarak duruyor ve iyi bir simgeler, güçlü düzen ve hatta biraz fotoğraf çekimi içeriyor. Tüm bu unsurlar sofistike bir şekilde bir araya gelerek oldukça fazla enerji yayarlar.

İkincil sayfaların bilgileri sunmak için ayrı bir 3 sütun şablonu kullandığını fark edeceksiniz. Hepsi çok minimalist bir tasarım, ama bu kötü bir şey değil.

Geleneksel Unsurlar:

Siyah, beyaz ve gri ayrı bir his sunar.
Ana sayfada iyi bir denge.
3 sütunlu ikincil sayfa şablonu, ana sayfadan ayrıldığınızda tutarlı bir bilgi akışı sağlar.

Web 2.0 Geliştirmeleri:

Sosyal medya farkındalığı kesinlikle oyunda.
Boyunca dağılmış parlak simgeler, gerekli rengi ekler.
Fotoğraf ve simgeler iyi bir karışımı.
Jumbo simgeleri ikincil sayfalarda yer almaktadır.

15. Marchand de Trucs

Bu yüzden belki de dili konuşamıyorum, ama bu, sitenin hala benimle konuşmadığı anlamına gelmiyor… Tamam, bu çizgi topal, ama yine de bu site oldukça tatlı. Harika sanat eserleri ve hepsinin arkasında, harika bir temel ve yapısal içerik barındırıyor. (Bence) bir online büyü dükkanı gibi görünmek için çok kötü değil!

Geleneksel Unsurlar:

Detaylara yoğun ilgi.
Renk teorisi iyi oyunda ve bu konuda çok ilgili bir palet.
Sitenin genel temasını takip eden yazı tiplerinin iyi kullanımı.

Web 2.0 Geliştirmeleri:

Bir başlık olarak illüstrasyonun son derece güzel kullanımı
Nispeten büyük simgeler.

16. Paiko

Paiko, basit olsa da, listedeki en sevdiğim sitelerden biridir. Geleneksel tasarım zımbalarının ve Web 2.0 geliştirmelerinin ayrık bir karışımı olarak karşımıza çıkıyor: Her boyutta (Web 2.0 mega-başlıkları da dahil olmak üzere) iyi bir alan, harika bir boşluk ve elbette hepsini bir arada tutan her zaman önemli olan ızgara.

Arka planda doku eklemenin seçilmesi, siteyi gerçekten ayırır ve zaten güçlü tasarıma başka bir katman ekler; Bazı sitelerde olduğu gibi özenle tedavi edilir ve aşırı kullanılmaz. Bu doku, sitenin daha sofistike çekiciliği ile birleştiğinde, Paiko'nun kimliğini güçlendirmede uzun bir yol kat ediyor.

Büyük boşluk ve ızgara yapısının bir örneğini görmek için portföy sayfasına göz atın, iyi kırpılmış görüntülerin eğlenceli örneklerinden bahsetmeyin.

Geleneksel Unsurlar:

Basit, havadar bir his veren oluklu boşluklu, iki kolonlu ızgara yapısı. Bu yapı, site boyunca çok tutarlı bir akış sağlayan taşınır.
Kurnazlık duygusu, aşırı yüklenmeden hoş bir dokunuş katıyor.
Yazı tipi varyasyonları ve renkleri çok karmaşıktır.

Web 2.0 Geliştirmeleri:

Jumbo metin!
Başlık büyük ve son derece okunaklı ve aşağıdaki küçük tipte karşı güzel oynuyor.
Portföy sayfasında harika görüntüler ve düzen.
Dokuların muhafazakar kullanımı, genel kimliğe katkıda bulunur.

17. Matt Dempsey

Doku spektrumunun diğer ucunda, Matt Dempsey tarafından bir sitemiz var. Şimdi, kesinlikle çok fazla doku gibi bir şey var, ve bu sitenin çok ileri gittiğini iddia etseler de bazılarının geçerli bir noktaya sahip olması gerekiyor.

Yine de, hala hoşuma gidiyor ve detaylar elime geçmeye başladığımda bana kazandı. Matt, beni her zaman kandıran birkaç kuralı bozmaktan korkmuyor (katın üstündeki bilgiyi tutmak gibi bir fikir, aşırı düşünen pazarlamacıların bir yuvarlak masa toplantısında icat edildiğini düşündüğüm bir fikir. Bu pazarlama milletlerinin.).

Bu konuya geldiğinde, Matt Dempsey çalışmalarını ve sitelerini cesur ve “yüzünüze” şeklinde sunuyor. Ve bir kaç kuralın kırılması, kuralların eski mi yoksa yeni mi olduğuyla ilgili bir tasarımcı olmaktır.

Geleneksel Unsurlar:

İster inanın ister inanmayın, dokunun altında yatan basit bir ızgara sistemi var.
Farklı ve benzersiz
Birkaç kuralı kırmaktan korkmamak

Web 2.0 Geliştirmeleri:

Matt, yazı tiplerine ve logosuna açıkça Web 2.0 yaklaşımı kullanıyor
İç sayfalarda teknolojinin iyi kullanımı (JavaScript kaydırıcı serin bir dokunuş).
Her önemli bilgi, büyük ve okunması kolay.
Portföy, çalışmaları eğlenceli ve yüksek teknoloji ürünü bir şekilde sunar.

18. Dijital Mash

Digital Mash ile, siteye dahil etmek istedikleri öğelere veya daha iyisi, ayrılmayı seçtikleri öğelere bolca düşünce geldiğini görebilirsiniz.

Yağları kesmek, herhangi bir tasarımcı için önemli bir uygulamadır ve Dijital Mash temelleri ve sadece temelleri ortaya koymaktadır. Sayfayı açın ve sitenin yazarının neyle ilgili olduğunu saniyeler içinde bileceksiniz.

Arka planın düzgün eğimi, içeriği sofistike bir şekilde sunmak için harika bir iştir. Temiz tipten, resmin delili grafiğine, site bunu basit tutar.

En iyi bölüm, siteye daha çok girdiğinizde olmalıdır. Çalışma sayfasına gidin ve neredeyse eski moda bir şekilde sunulan bir portföy bulacaksınız; Bireysel parçalar, basılmaya hazır oldukları ve bir deri ataşe davası haline gelmiş gibi görünürler.

Bununla birlikte, zarif sunum, dropshadows ve küçük detaylar (her parçanın hafifçe bükülmüş köşeleri gibi), hepsine çağdaş bir eğim verir. Yeni ve eskiyi birleştirmek. Seveceksin.

Geleneksel Unsurlar:

Gereksiz öğeleri kesilmiş.
Ana sayfadaki ve ikincil sayfaların başlığındaki canlı renkler, gri arka plana canlı bir vurgu ekler.
Bilginin hiyerarşisi güçlüdür, ve aynı zamanda sitenin genel akışıdır.

Web 2.0 Geliştirmeleri:

Portföy görsellerinin şaşırtıcı sunumu; dropshadows, çevrilmiş kenarlar ve küçük detaylar bu siteyi gerçekten daha yüksek bir standarda getirir.
Arka planda güzel gradyan, bilgiyi iyi bir şekilde sunar.
Geniş tip ve büyük boyutlu görüntüler gözlere karşı dost canlısıdır.
Çok güzel navigasyon çözümü.

19. Kyan Medyası

Kyan Medya, spektrumun Web 2.0 tarafında yoğun olarak yer alan başka bir sitedir. Bulut tasarımı ve canlı mavi renk paleti doğrudan kitabın dışına çıkıyor, ancak standardın son derece güçlü bir örneği.

Site düzgün oynar ve büyük harflerle tam olarak ne yaptığını söyler, ardından işin örnekleri. Sayısız sitede bulunan basit bir tasarım stratejisi ve iyi bir sebep. Bu hızlı ve kısa bir dikkat süresini tehdit etmiyor.

Ve tüm iyi örnekler gibi, geleneksel tasarım kurallarının yanı sıra teknolojiyi de benimsiyor. Biraz zaman ayırın ve çalışma örneklerinin üzerine gelin. Öne çıkan portföy parçalarını tanıtmak için eğlenceli ve bilgilendirici bir yoldur ve kullanıcı, daha derinlere inmemize veya temelleri bir bakışla elde etmemize izin verir.

Geleneksel Unsurlar:

Her şeyin çok sağlam bir his var.
Her sayfanın genel düzeni güçlü
Bilgi hiyerarşisi harika.
Yazı tipleri, başlıklar ve yazı tipi renkleri tümüyle tutarlı.

Web 2.0 Geliştirmeleri:

Parlak mavi renk paleti.
Çizimin eğlenceli kullanımı (bulutları sevmeyen kimdir?).
Zımba fotoğrafçılığı.
Teknolojinin iyi uygulanması.
İnce dropshadows derinlik ekleyin.
Son derece okunaklı yazı tipleri ve büyük boyutlu başlıklar.

20. Rockatee

Eh, başlıkta “İşlevsel Tasarım” yazıyor, bu yüzden daha iyi iş çıkardı, değil mi? Neyse ki, bu site yapar. Dokunun web tasarım pazarına nasıl girdiğine ve web'de gezinmenin yüksek hızlı çağına girdiğimiz fikrini doğrulayan başka bir örnek.

Fark edebileceğin bir şey, Rockatee'nin portföy bölümünde sergilenen çok az projeye sahip olması, bu yüzden aerodinamik bir çözümün kesinlikle düzenlenmesiydi. Üretken portföylerinin derinliğini gösteren bir dizi fotoğrafla bunu gerçekleştirdiler. Kendinize bir iyilik yapın ve bir göz atın.

Notun diğer bir özelliği de güzel navigasyon. İyi yerleştirilmiş ve siteyi tıklamak için bir esinti yapar. Ana sayfada, portföyüne giden güzel ve büyük bir düğme ile size yardımcı olurlar.

Geleneksel Unsurlar:

Her şeyin çok sağlam bir his var.
Her sayfanın genel düzeni güçlüdür.
Renk teorisi iyi araştırılmış ve uygulanmıştır.
Detaylara büyük önem.

Web 2.0 Geliştirmeleri:

Fantastik navigasyon.
Büyük düğmeler sizi önemli bitlere yönlendirir.
Bireysel çalışmaların harika ürünleri ile serin “enstantane” portföyü.
Site tasarımcıları birçok yan projeye sunuyor, ancak merkezi elemanların yoluna girmelerine izin vermiyor.
“Hakkında” sayfasındaki zaman çizelgesi ile harika bir fikir.

21. Kahverengi olan şeyler

Benim kişisel favorilerimden biri de Brown olan şeyler. Büyük ajanslar tarafından oluşturulmuş (veya daha iyi) sitelere eşit olan son derece cilalı bir siteyi çekiyorlar, ancak aynı zamanda sahnelerin arkasındaki insanlara içten bir bakış sunuyorlar.

Yaklaşık sayfa, yeterince profesyonel olsa da, çok ev yapımı bir çekiciliğe sahip harika fotoğraflar içerir. Ekibin dışarıda bir geziye çıktığını, iyi bir noktaya dikkat çektiğini ve kendi dijital kameralarıyla birkaç fotoğraf çektiğini söyleyebilirsin.

Profesyonel, ancak erişilebilir ve arkadaş canlısı bir ekip, çalışmak istediğim takımın tipidir. Bu insanlar gerçek.

Bu, güçlü tasarım kurallarını modern tweaks ile kusursuzca birleştiren nadir sitelerden biridir. Onların sloganı “Humbly Awesome” da öldü.

Geleneksel Unsurlar:

Büyük aksan ile güzel renk.
İyi entegre sanat eseri iyi kullanın.
Katı ve tutarlı.

Web 2.0 Geliştirmeleri:

Navigasyon temiz ve okunması kolay.
Parlaklığı aşmayan güzel düğmeler.
Fotoğraf kişiseldir ve siteye insan dokunuşunu ekler.
Portfolyo çalışmanın mükemmel sunumu ile açık ve kolay gezinilebilir.
Başlıklar büyük, henüz sofistike.

22. Andrew Bradshaw

Bu belki de listedeki en sofistike sitelerden biridir. Andrew, doku, yazı tipi, düğmeler ve fotoğrafçılığı karışık bir pakete ayırmanın harika bir yoludur. Ayrıca, hiyerarşiyi de göz önünde bulundurarak, önemli yönleri vurgulayarak ve tüm kullanıcılara ilgisi olmayan bölümleri en aza indirgiyor.

Gezinme, sekmelerde gezinirken değişen renkler ile bir vurgulamadır; çok şık bir dokunuş.

Ayrıca not, kendi logosunda kullanılan dokulu başlık ve güçlü yazı tipi seçimidir. Yine, Andrew incelik ve aksanları, derinlemesine ve zorlayıcı güzel bir site oluşturmak için birleştiriyor.

Geleneksel Unsurlar:

Temiz sofistike genel itiraz.
Vurgulayıcı elemanların hem renkli hem de tipte iyi kullanımı.
Her zaman olduğu gibi, güçlü bir ızgara sistemi onu bir arada tutar.
Hiyerarşi iyi uygulanmaktadır.

Web 2.0 Geliştirmeleri:

Farklı bir tuşa basma.
Fotoğraf ve görüntü sunumunun mükemmel kullanımı.
Navigasyondaki harika detaylar.

23. James Lai

Son zamanlarda, tek sayfalık web siteleri için bir şey var ve muhtemelen tahmin edeceğiniz gibi, ben de doku için bir emici değilim. Tür, doku ve animasyonun süslü kullanımıyla kendini nasıl tanıtacağını bilen bir tasarımcı olan James Lai'ye girin.

En çok onu övdüğüm şey, siteyi tek bir sayfada tutması ve hemen hemen her sitede bulunan "All About Me" sayfasını affetmesidir. Her ne kadar insan unsuruna yüksek bir değer katsam da, bazen iş kendi adına konuşur ve kendi becerilerine inanmak için bir adamı suçlayamam.

Geleneksel Unsurlar:

Basit, tek sayfalık bir çözüm.
Animasyon, sunuma ilgi duyuyor (sitemi biraz da olsa yavaşlatıyordu).
Detaylara dikkat.

Web 2.0 Geliştirmeleri:

Ana sayfadaki büyük tip, sitenin tam amacını size bildirir.
İletişim bilgileri bulmak kolaydır.
Serin küçük resimler, kullanıcıların portföyde gezinmesine yardımcı olur.
Doku ilginç kullanımı.

24. Subvert

Subvert, sadece işlevsel düzeni için değil, ana sayfada öne çıkan slayt gösterisi için de dahil edildi. Sunum eğlencelidir, ancak potansiyel müşteriler için de bilgilendirici ve değerlidir.

Arka plan dokusu, şeffaf sekmeler içeren harika bir navigasyon sistemi de dahil olmak üzere şeffaf detaylarla tamamlanmaktadır! Bu navigasyonun vurgulu durumu ince ve şeffaflığı koruyor.

Bu sitelerde doğrudan çalışma sayfalarına gitme eğilimindeyim ve Subvert sunumunda hayal kırıklığına uğramıyor. Izgara yapısının güçlü ve gezinmesi kolaydır ve tıklandığında kullanıcının işin genişletilmiş bir görüntüsüne götürülür.

Geleneksel Unsurlar:

Büyük genel akış.
“İş” sayfasında portföyün güçlü sunumu.

Web 2.0 Geliştirmeleri:

Bir solma slayt gösterisinde sunulan büyük tip.
Şeffaf gezinme sekmeleri!
Düğmeler güzel ve arka planlara iyi bir kontrast ekleyin.
“Şirket” sayfasında ofisin slayt gösterisi hoş bir dokunuş.
Embraces teknolojisi.

25. Sarı Kuş Projesi

İlk bakışta bu site biraz dağınık ya da dağınık görünebilir, ama ben daha fazla bakıyorum ve sayfalarına daha çok göz attığımda, organizasyonunun gücünü daha çok fark ettim. Daha da iyisi, Indie'den esinlenerek tasarlanan tasarım gerçekten de kalış süresine daha fazla çekilmeye başlıyor ve sitenin dağınık görüntüsü temasıyla tam olarak uyuşuyor.

Fotoğraf Galerisi'ne bakarsanız, ürünü sergilerken Indie görünümüne bir kez daha ekleyeceğiniz bir dizi amatör fotoğraf görürsünüz.

Threadless.com gibi siteler tarafından popüler hale getirilen bu tür yeraltı yaklaşımı, izleyiciyi hemen ürüne ekler.

Kalabalığın bir parçası olmak istiyorlar ve birileri onlara bir şeyler satmaya çalışıyormuş gibi hissetmek istemiyorlar. Bu bir Web 2.0 felsefesi değilse, ne olduğundan emin değilim.

Geleneksel Unsurlar:

Kurnaz logo, tüm site boyunca gerçekleştirilen hissi gerçekten belirliyor.
İlk başta dağınık ya da gevşek hissetse de, bu “bir araya getirilmiş” görünüşün, tasarımcıların tam olarak ne için gittiği tam olarak biliniyor. Siteyi gezinmeyi hala kolaylaştırırken görünümü kapatıyorlar.
Tutarlı, geleneksel olmayan yaklaşım.

Web 2.0 Geliştirmeleri:

Bu felsefeden daha fazlası var. Web 2.0'ın sosyal yönü tam olarak etkilenirken, bu site de viral pazarlama yaklaşımı ve altta yatan hayırseverlik nedeniyle güçlü hale gelmiştir.
Bir topluluk oluşturur!
Harika fotoğraflar ve kolay navigasyon da zarar vermez.

Kapanışta…

Web 2.0, standart tasarım standartlarının katı kurallar ve kurallar bütünü (grid yapısı, renk teorisi, harf aralığı, karakter aralığı, izleme, vb.) Olduğu durumlarda, Web 2.0, benzer standartları içerirken tanımlanması zor bir standarttır. neredeyse daha çok bir yaşam biçimi.

Felsefeyi, pazarlamayı, teknolojiyi, kullanım kolaylığını ve yoğun evrenimizin sayısız diğer yönlerini, kitleler için işleri daha kolay hale getirme hedefi ile birleştirir.

Bu bağlamda, Web 2.0 ve çağlar öncesindeki geleneksel kurallar nihayetinde aynı hedefi paylaşıyor: Kaosu örgütlemek ve kompleksi kolaylaştırmak .

Bu günlerde zorlu bir konser olabilir, bu yüzden elimizdeki tüm araçlara ihtiyacımız var, ister kenarda olsunlar, ister yüzyıllar öncesinden kanıtlanmış olsunlar.

Josh Sears tarafından sadece WDD için yazılmış. Web tabanlı projeler için bir Yazar, İllüstratör ve Tasarımcı. Lider Web Tasarımcı, Yaratıcı Direktör ve Ortak Sahibi olarak yaşamını sürdürmektedir. Littlelines.com . Yapabilirsin işini buradan kontrol et veya güncellemelerini Twitter'da takip et .

Web 2.0 elemanlarını geleneksel tasarımla nasıl kullanıyorsunuz? Lütfen kendi portföyünüzden veya karşılaştığınız diğer iyi örneklerden örnekler paylaşın.

tasarım kuralları tasarımların derlenmesi geleneksel Web 2.0