25 Exempel på Web 2.0 och traditionella designregler som kommer tillsammans

I den stora ramen för designvärlden är termen "Web 2.0" relativt ny.

Med den kommer sin egen uppsättning standarder, några starka, andra inte så starka, eftersom Web 2.0 i sig är en mycket svag och evolutionsdefinition av designstandarder .

Otaliga exempel på Web 2.0-webbplatser har brutit reglerna för vad som en gång betraktades som stark design.

Å andra sidan har Web 2.0 i många fall stärkt gemensamma design missnomers; det lägger fokus på användbarhet, gränssnitt och läsbarhet .

I bästa fall står Web 2.0 lika med de traditionella designregler som praktiseras i århundraden, men det är utan tvekan en återspegling av vårt samhälle i sitt nuvarande tillstånd av liv och rörelse.

Här är en samling på 25 sidor som visar hur webb 2.0 och traditionella designpraxis kan komma ihop för att bilda fantastiska webbplatser.

1. Pixel Matrix Design

Josh Pyles är en trevlig kille, och han är också en fantastisk, disciplinerad designer. Hans senaste iteration av Pixel Matrix är en stunner, och gör speciellt bra användning av färg och ett starkt nätsystem. Bläddra över hans portfölj och du kommer se att han bär denna praxis i sitt klientarbete.

Om du kolla på "Om" -sidan (notera det trevliga fliksystemet i spel) kan du se att Josh har inkluderat ett fint foto av hans arbetsyta.

Nedan är detta skott en stor balans mellan Web 2.0-stilade teckensnitt, vilket skapar en extremt stark hierarki med information. Han håller sin egen bio liten och tuckad i sidofältet, och balanserar den större texten i innehållsområdet med mindre, sofistikerad typ i sidofältet.

Traditionella aspekter:

Bra rutnät.
Underbar färgteori
Stark hierarki av information

Web 2.0 förbättringar:

Vackra gradienter.
Subtila detaljer.
Stora, läsbart typsnitt val.
Ett stort antal sätt att hålla kontakten.
Även kontaktformuläret har ett bra genomförande av rundade hörn!

2. MuttInk

På senare tid verkar textur vara den största saken sedan avrundade hörn, och även om MuttInks webbplats kanske inte klassificeras som typiskt Web 2.0, är en blick allt som krävs för att veta att Jeremy Holmes (mannen bakom jobbet) är en fantastisk designer och grafiker .

En uppmärksamhet på detaljer, textur och en stark identitet placerar detta som en personlig favör.

Även om dagarna med alltför dämpade färger ligger något bakom oss (vilket är bra efter min mening) är jag fortfarande ett fan av subtila, jordartade toner som komplimangeras med ljusa accenter och MuttInk har dragit det här briljant .

Den turkosa på toppen av beige dyker verkligen upp och upprätthåller "ritbordet" känslan som genomtränger platsen. Och även om typen är på den lilla sidan, och lite svår att läsa i fläckar, ser det fortfarande bra ut på sidan.

Traditionella aspekter:

Extremt noggrann uppmärksamhet på detaljer.
Trevlig typ (men kanske för liten).
Stor varumärkesidentitet.
Stor platsutnyttjande, särskilt på portföljsidorna.

Web 2.0 förbättringar:

Stor användning av textur.
Stora, professionella bilder som visar upp arbetet.
Snabb åtkomst till social koppling.

3. 45 Royale

Portföljen över på 45 Royale visar inte bara ett fantastiskt utbud av arbete, men det visar att laget bakom webbplatsen förstår god användning av flera designstandarder. Det är en fantastisk blandning av Web 2.0 fallbacks, men har en solid grund i traditionella designstandarder (och titta bara på de färgerna!).

I synnerhet har 45 Royale ett av de bästa rutsystemen jag har sett nyligen, och de bilder de har valt för att visa upp arbetet passar verkligen bra med den fluorescerande färgade rubriken ovan.

Att se färgteorin och organisationen möts med en sådan stor harmoni är alltid en behandling, och de har kompletterat allt med en mycket sofistikerad blandning av teckensnitt, både stora och små.

Ljusa färger som omger en sekundär palett av grå, vit och svart? Grymt bra.

Traditionella aspekter:

Ett av de bättre exemplen på ett nätsystem.
Gott om utrymme och andningsrum.
Briljant färgval.
Bra flöde av information.

Web 2.0 förbättringar:

Färgerna sjunger helt enkelt ... så mycket att jag listade den i båda kategorierna.
Jumbo-storlek är mycket läsbar, men smakfull.
Stor användning av illustration och grafik.
Mängden projekt är välorganiserat och snyggt visat.

4. Kläm Zoom

Jag är en sucker för bra illustration, speciellt när den presenteras ovanpå ett underbart exempel på vitt utrymme. Jag älskar den här sajten så mycket att det enkelt är att klicka genom portföljen. Stor whitespace, bra nätverkssystem och underbar användning av JavaScript; Dessa saker har ett sätt att prata med mig (ja jag är ganska framför en dator).

Det viktiga att komma ihåg när vi står inför de många tillgängliga teknologierna idag, speciellt de fancy bleknar och smyg som möjliggjorts av JavaScript, är att avta dem och regera dem.

Kom ihåg sena nittiotalet när Flash var allt raseri? Kom ihåg hur sjuk av Flash vi alla har efteråt? Bra Web 2.0-standarder är lika mycket om disciplin som det handlar om design, och Pinch Zoom har det bra under kontroll.

De ströva sin plats med den fina godheten, men håll det lutet och roligt, med nästan nolltid väntar på bilderna.

Traditionella aspekter:

Ett annat bra rutsystem (ser ett mönster här?).
Svart på vitt verkar aldrig bli gammal.
Trevlig balans mellan teckensnitt och rubriker. (Den lilla typsnittet, men läsbart, kan kanske vara en punktstorlek eller två större).

Web 2.0 förbättringar:

JavaScript-portfönstret är dang kul och effektiv.
Gränssnittet är minimalistiskt och direkt.
Varierad användning av Illustration är en bra touch.
Innehåller webens nuvarande teknik utan att bli besvärlig.
Unika lösningar för sidlayout (Kolla in mega-rullgardinsmenyn när du klickar på fliken info. Det finns nästan en hel webbplats som gömmer sig där!).

5. Cameron Moll

Jag har alltid varit ett fan av Camerons arbete, och som du kan berätta har han en tendens att stanna på den traditionella sidan av designområdet. Även om hans blogg webbplats tenderar att falla inom den traditionella sidan av sofistikerad design och små teckensnitt, det finns ingen förneka elegansen och skönheten i hans portföljsida, vilket är en fantastisk balans mellan det nya och det traditionella.

Färgerna är livfulla och typsnittet valmössa med den övergripande känslan, men igen kan typen bli ganska liten på platser, vilket är ett Web 2.0 no-no. Men vem ska jag nit-plocka? Cameron har haft stor framgång och är mannen bakom Authenticjobs.com, en stor resurs för designers (och en som har hjälpt till att betala mina räkningar).

Traditionella aspekter:

Välstrukturerat innehåll.
Subtila färgvariationer är en fin touch.
Typen ser elegant ut, men tenderar att rida på spektrumets lilla sida. Ändå är det läsbart och ser bra ut.

Web 2.0 förbättringar:

Mycket fin användning av textur.
Portfolio innehåller fina bilder av arbetet, som är mycket enkla och enkla att navigera.

6. Metalabs "Fluid" Tumblr-tema

Det enda Tumblr-temat för att göra listan heter "Fluid" från Metalab design. Det gjorde listan på grund av en enkel anledning: Det är ett freaking vackert exempel på Web 2.0 på sitt bästa. Enkel, ren och lysande med färg.

Man kan anse det lite ensidigt i den här jämförelsen (det är en Web 2.0-fångst-allt). Det beror på att Metalab är känt för att ställa in standarder i Web 2.0-arenan, och den här webbplatsen är ett bevis på det faktum. Metalab Design håller dock grundreglerna i åtanke, och håller strukturen enkel och välorganiserad.

Genomskinlighet och överlappande grafik är en av de nyare trenderna i Web 2.0. De ger en plats en stor mängd djup och har en framkant, nästan futuristisk utseende. Metalabs "Fluid" har omfamnat detta koncept och, ännu bättre, levererat det till massorna som ett nedladdningsbart tema.

Traditionella aspekter:

Enkel, effektiv struktur.
Står ut i massorna av Tumblr-teman.
Samtida (men enkelt) färgschema.

Web 2.0 förbättringar:

Stor, levande fotografering.
Ups ante för banbrytande Web 2.0 design
Mycket läsbara teckensnitt och rubriker.
Användning av avrundade hörn och gradienter tas till ytterligheten, men de presenteras i en rolig, modern Web 2.0-lösning.
Ikoner är ett bra, minimalistiskt sätt att navigera alternativen för varje inlägg.
Låt oss inte glömma de transparenta bakgrunderna!

7. Viget

Oh Jösses. Denna sajt. Det får mig varje gång. Visst jag är mjukig för konsistens, men den här designern har också fångat en del av god färgteori och hierarki.

Jag menar bara kolla de porträtten nära botten! De är iögonfallande men de tävlar inte med vad som kan vara ett mycket komplicerat designflöde. Låt oss inte glömma stora fontval och akvarellkänsla. Glasyren på kakan är det, trots att platsen är image-heavy, den laddas på ett snäpp!

En annan cool aspekt på den här webbplatsen är att designers vill dela mycket information med sin community, och det är inte information som säljer dem som designers, men information som de känner typiska användare kan tyckas vara värdefull.

De tillåter dig att gräva djupare utan att förkroppsliga sina behov ner i halsen, vilket alltid är en välkommen övning.

Traditionella aspekter:

Välstrukturerat innehåll.
Vacker färg och typ.
Även om teckensnitt är på lilla sidan är huvudinnehållet fortfarande lätt att läsa.
Stora konstverk smälter sömlöst in i designen (coola porträtt).

Web 2.0 förbättringar:

Akvarelltemat är extremt samtida, och även om det är image-heavy, har det konstruerats för att ladda mager och medelvärde.
Sidofältets innehåll är välorganiserat och innehållsdriven.
Unik lösning på rutan "Talbubbla" i sidofältet.
Massor av delad, innehållsdriven information.

8. FeelWire

Ett annat fantastiskt exempel på bra whitespace är Feelwire. Svart typ på vita bakgrunder, med stora nyanser av grått däremellan, verkar aldrig bli gammal. Lägg till ett par färgstarka ikoner, och du har själv en enkel, men ändå effektiv webbplats. Det handlar om enkelhet här (hej, de har bara en sida!).

Web 2.0-stylade ikoner fungerar som mittpunkt för den här sidan, och de går långt i att hålla webbplatsen tillsammans. De förhindrar också att webbplatsen överskrids med text och ger användaren något att vara nyfiken på.

När jag rullade över dessa ikoner var jag väldigt nöjd med vad jag hittade: En mycket enkel svängningsstatus som gav mig den information jag letade efter, gör det med den ständigt populära Web 2.0 "Speech Bubble". En bra touch.

Det sista: Även om jag gillar de röda länkarna, som också dyker upp på sidan och fungerar bra med ikonerna, tror jag att de borde göra kontaktlänken lite mer märkbar. Från och med nu är det lite för inblandad i innehållet, och jag var verkligen tvungen att söka efter ett sätt att komma i kontakt med dessa begåvade utvecklare. Säg bara ".

Traditionella aspekter:

Kort, söt och till den punkten: en enda sida webbplats.
Vitt utrymme!
Subtila, smakfulla typsnitt val.
Trevligt, grundläggande layout.

Web 2.0 förbättringar:

De blanka ikonen dyker upp på sidan, på ett bra sätt.
Riktigt coola överdrag på ikonerna gör webbplatsen ren och ger dig den information du behöver på ett roligt sätt.
Trevliga avatarer lägger till ett mänskligt element.

9. Agami Creative

Okej, det är kanske bara en personlig sak med dessa mycket texturerade platser, men vad Agami Creative gör, det gör det väldigt bra. Det är ett annat samtida exempel på hur bildtunga platser kan bli en perfekt acceptabel lösning på en dag med höghastighetsanslutningar.

Centrera på denna sida är absolut vattenfärghuvudet, som fungerar som en perfekt bakgrund till den lummiga logotypdesignen. Det rymmer också navigationen, placera tillräckligt noggrant på platsen, men utan att förolämpa användaren (eftersom de flesta vet var de ska hitta navigeringen i dessa dagar.).

Om du klickar över på portföljsidan märker du en layout med den perfekta andningsytan och ett starkt nätsystem.

Enkla bilder bidrar till arbetet och ritar dina ögon för de enskilda projekten, som att titta igenom ett nyckelhål till slutresultatet. Allt detta är inslaget av en sofistikerad serif typsnitt för rubrikerna och en läsbar sans-serif typsnitt för kroppstexten.

Traditionella aspekter:

Mer vacker användning av färgteori.
Bra konstverk.
Intressant kombination av typ / typsnitt.
Konstnärlig, handritad logotyp har en känsla som bärs hela webbplatsen.

Web 2.0 förbättringar:

Överdimensionell navigering gör det enkelt att flytta runt på webbplatsen.
De gör det väldigt enkelt att komma i kontakt.
Användning av avatarer är en bra idé (men ärligt talat tror jag att de kunde ha gjort det bättre med dessa. Inte säker på hur anime ser ut att vara med i den här sidan med andra än den asiatiska påverkan?).
Älskar texturen!

10. Adit Shukla

En annan webbplats med ett bra illustrativt tillvägagångssätt, Designer Adit Shukla vet också hur man sätter ihop ett bra färgschema, och spelar även med en fin lösning till sidofältet.

Av någon udda orsak är många sidobar slurviga och förbises, som om konstruktörer har tillåtelse att ignorera reglerna för bra design när man slänger sidor av en webbplats. Inte med den här sidan.

Även om innehållet är minimalt (även lite sparsomt) kan man inte låta bli att älska den inblandade kreativiteten, särskilt i det illustrativa rubriken, vilket ger en välbehövlig mängd djup. Navigationsflikarna ovanför är också en fin touch.

Traditionella aspekter:

Levande färger.
Kreativa lösningar på gemensamma element, till exempel sidofältet och rubriken.
Illustrationen ger mycket djup.

Web 2.0 förbättringar:

Enkel layout med en välutvecklad header illustration, som också rymmer navigeringen.
Stor typ är effektiv.
Flera sätt att navigera på webbplatsen (men ärligt, jag är inte övertygad om att det här är så bra).
Genomskinliga flikar är en fin touch.

12. Cream Scoop

Det första du märker om Cream Scoop är det djärva valet av färger som används på hela webbplatsen. De är inte rädda för att ta färgerna upp i hakan från normen, och resultatet är lika uppfriskande som det är annorlunda.

Även om färgerna är djärva, finns det också subtila blandningar av stark typ och gradienter som är peppared över hela webbplatsen. Lägg märke till hur bakgrundsgradienten lyser upptill, som kanten av en strålkastare, för att markera den annars minsta navigeringen. Typen är välorganiserad och balanserad, med en tydlig Web 2.0-känsla.

Traditionella aspekter:

Fet urval av färger, men ett urval som fungerar på överraskande effektiva sätt.
Minimalistisk navigering som gör jobbet gjort.
Stor användning av lekfull illustration.
Layouten är strukturerad men rolig.

Web 2.0 förbättringar:

Fantastisk användning av en gradient i bakgrunden.
Ljusblå griper verkligen din uppmärksamhet och riktar den till viktiga saker.
Kall användning av avatarer på den ungefärliga sidan (hur gamla är dessa killar?).
Stora teckensnitt används hela tiden.

13. Carbonica

Carbonica avviker gradienten och glänsande godheten i Web 2.0 och går för ett "pieced together" -look som påminner om en klippbok. Stor användning av textur och animering, men också en väldigt rolig handtags typ.

Var noga med att rulla ner lite och kolla in ikonerna, som också passar temat perfekt!

Traditionella aspekter:

Grundstruktur är i spel.
Handgjorda bokstäver går bra med temat för webbplatsen.
Animeringen är en fin touch (men tyvärr, användningen av Flash håller denna punkt ur web 2.0-kategorin).

Web 2.0 förbättringar:

Strukturen är stor.
Drop skuggor lägger till realistiskt djup.
Trevliga ikoner, foton och illustration.

14. DSGN + DVLP

Återigen fungerar det övergripande svartvita färgschemat för den här webbplatsen, och de accentiverar den här riktningen med några rena ikoner dras direkt ur web 2.0-väskan.

Hemsidan står som en slags stänk sida, och har en bra mix av ikoner, stark layout och till och med lite fotografering. Alla dessa element samlas på ett sofistikerat sätt och klarar av att ge ut lite energi.

Du märker att sekundärsidorna använder en separat mall med tre kolumner för att betjäna informationen. Det är en väldigt minimalistisk design, men det är inte en dålig sak.

Traditionella aspekter:

Svart, vitt och grått ger en distinkt känsla.
Bra balans av typ på hemsidan.
3-kolumn sekundärsidmall tillåter ett konsekvent informationsflöde när du navigerar bort från hemsidan.

Web 2.0 förbättringar:

Social media medvetenhet är definitivt i spel.
Glansiga ikoner spridda genom hela lägg till nödvändig färg.
Bra mix av fotografi och ikoner.
Jumbo-ikoner finns på sekundärsidorna.

15. Marchand de Trucs

Så kanske kan jag inte prata språket, men det betyder inte att webbplatsen fortfarande inte talar till mig ... Okej, den linjen var skam, men den här webbplatsen är fortfarande ganska söt. Den innehåller underbart konstverk och, bakom allt, en bra grund och ett strukturerat innehåll. Inte så illa för vad jag tror är en online magisk butik!

Traditionella aspekter:

Intense uppmärksamhet på detaljer.
Färgteori är väl i spel, och det är en mycket inblandad palett därpå.
God användning av teckensnitt som följer webbplatsens allmänna tema.

Web 2.0 förbättringar:

Extremt bra användning av illustration som en rubrik
Relativt stora ikoner.

16. Paiko

Paiko, men enkelt, är en av mina favoritplatser på listan. Det stämmer överens som en delad blandning av traditionella designklammer och Web 2.0-förbättringar: Bra typ av alla storlekar (inklusive web 2.0-huvudrubrikerna), bra whitespace och naturligtvis det allvarliga nätet som håller allt ihop.

Valet av att lägga till textur i bakgrunden ställer verkligen platsen ifrån varandra och lägger till ett annat lager i den redan starka designen. det behandlas med omsorg, och inte överdrivet används som det är på vissa platser. Denna struktur, i kombination med den mer sofistikerade överklagandet av webbplatsen, går långt i att stärka Paikos identitet.

Bläddra över till portföljsidan för att se ett exempel på bra mellanrum och rutnätstruktur, för att inte nämna några roliga exempel på välskötta bilder.

Traditionella aspekter:

Enkel, två-kolonn gallerstruktur med rännans utrymme som ger den en fin luftig känsla. Denna struktur bärs hela webbplatsen, vilket ger det ett mycket konsekvent flöde.
Kraftig känsla ger en fin touch utan att vara överdrivande.
Font variationer och färg är mycket sofistikerade.

Web 2.0 förbättringar:

Jumbo-text!
Rubriken är stor och läsbar och spelar snygg mot den mindre typen nedan.
Bra bilder och layout på portföljsidan.
Konservativ användning av textur bidrar till den övergripande identiteten.

17. Matt Dempsey

På den andra ekstremen av konsistensspektrumet har vi en webbplats av Matt Dempsey. Nu är det definitivt en sak som för mycket textur, och vissa skulle ha en giltig poäng om de hävdade att den här webbplatsen går långt.

Men jag gillar det fortfarande, och detaljerna vann mig över när jag började siktra igenom informationen. Matt är inte rädd för att bryta några regler som alltid har bugged mig (som att hålla information ovanför vikten, en idé som jag tycker var uppfunnad vid en rundabordsdiskussion om överdänkande marknadsförare. Jag säger det för att jag en gång var en av dessa marknadsförare.).

När det kommer till det, presenterar Matt Dempsey sitt arbete, och hans webbplats, på ett djärvt och "i ditt ansikte" sätt. Och att bryta några regler är vad en designer handlar om, om reglerna är gamla eller nya.

Traditionella aspekter:

Tro det eller inte, det finns ett enkelt rutnät som ligger bakom texturen.
Distinkt och unikt
Inte rädd för att bryta några regler

Web 2.0 förbättringar:

Matt använder en uppenbar Web 2.0-metod för sina teckensnitt och logotyper
God användning av teknik på insidan (JavaScript-reglaget är en cool touch).
Varje bit viktig information är stor och lätt att läsa.
Portfolio presenterar arbetet på en rolig, högteknologisk sätt.

18. Digital Mash

Med Digital Mash kan du se att massor av tanke gick in i de objekt som de ville inkludera på webbplatsen, eller ännu bättre, de artiklar de valde att lämna ut.

Att kunna skära ner fettet är en viktig praxis för någon formgivare, och Digital Mash släpper ut grunderna, och bara grunderna. Öppna sidan och du vet inom några sekunder vad författaren till webbplatsen handlar om.

Den släta gradienten av bakgrunden gör ett bra jobb att presentera innehållet på ett sofistikerat sätt. Från ren typ, till den snygga grafiken i illustrationen, håller webbplatsen det enkelt.

Det bästa måste vara när du gräver djupare in på webbplatsen. Gå till arbetssidan och du hittar en portfölj som presenteras på ett nästan gammaldags sätt. de enskilda bitarna ser ut som om de är redo att tryckas och binds till ett läder-attachefall.

Den slanka presentationen, droppskuggorna och de små detaljerna (t.ex. de svagt böjda hörnen på varje bit) ger det allt en modern snedställning. Kombinera det nya och det gamla. Måste älska det.

Traditionella aspekter:

Trimmade bort onödiga element.
Vibrerande färger på hemsidan och i sidhuvudet på sekundärsidorna lägger till en vibrerande accent till den grå bakgrunden.
Informationshierarkin är stark, och så är webbplatsens allmänna flöde.

Web 2.0 förbättringar:

Fantastisk presentation av portföljbilderna; dropshadows, uppåtvända kanter och små detaljer ger verkligen den här webbplatsen till en högre standard.
Trevlig gradient i bakgrunden presenterar verkligen informationen väl.
Stor bild och överdimensionerad bild är vänliga för ögonen.
Mycket cool navigationslösning.

19. Kyan Media

Kyan Media är en annan webbplats som lutar kraftigt på webb 2.0-sidan av spektret. Molndesignen och den pulserande blåfärgspaletten är rakt ut ur boken, men det är ett extremt starkt exempel på standarden.

Webbplatsen spelar det rakt och i stora bokstäver berättar precis vad de gör, följt av exempel på arbetet. Det är en enkel designstrategi som finns på otaliga platser, och av goda skäl. Det är snabbt och hotar inte en kort uppmärksamhet.

Och liksom alla goda exempel omfattar den tekniken såväl som traditionella designregler. Ta lite tid och sväva över exemplen på arbetet. Det är ett roligt och informativt sätt att presentera utvalda portföljstycken och låter oss, användaren, gräva djupare eller för att få grunderna med en blick.

Traditionella aspekter:

Allt har en extremt solid känsla.
Allmän layout på varje sida är stark
Informationshierarkin är stor.
Teckensnitt, rubriker och teckensfärger är konsekventa hela tiden.

Web 2.0 förbättringar:

Ljusblå färgpalett.
Rolig användning av illustrationen (vem gillar inte moln?).
Punchy fotografering.
Bra implementering av teknik.
Subtila dropshadows lägger till djup.
Mycket läsbara teckensnitt och överdimensionerade rubriker.

20. Rockatee

Tja, det står "Funktionsdesign" i rubriken, så det hade bättre jobb, eller hur? Lyckligtvis gör den här webbplatsen. Det är ett annat exempel på hur textur snubblar in i webbdesignmarknaden och bekräftar idén om att vi trivs bra med surfing på nätet.

Något som du kanske märker är att Rockatee har en hel del projekt på displayen i portföljen, så en effektiv lösning var definitivt i ordning. De gjorde det med en serie snapshots, som visar djupet på deras produktiva portfölj. Gör dig själv en tjänst och kolla in den.

Ett annat inslag i noteringen är den trevliga navigeringen. Den är välplacerad och gör webbplatsen lätt att klicka igenom. De hjälper dig till och med på hemsidan med en bra stor knapp som leder till portföljen.

Traditionella aspekter:

Allt har en extremt solid känsla.
Allmän layout på varje sida är stark.
Färgteori är väl utforskad och implementerad.
Stark uppmärksamhet på detaljer.

Web 2.0 förbättringar:

Fantastisk navigering.
Stora knappar leder dig till de viktiga bitarna.
Cool "snapshot" -portfölj med stora grödor av de enskilda verken.
Webbplatsen visar designers många sidprojekt, men låter dem inte komma i vägen för de centrala elementen.
Bra idé med tidslinjen på sidan "Om".

21. Saker som är bruna

En annan av mina personliga favoriter är saker som är bruna. De drar av en extremt polerad webbplats som är lika med (eller bättre än) webbplatser skapade av stora byråer, men de ger dig också en inblick i människorna bakom kulisserna.

Den här sidan innehåller bra fotografi som även professionellt nog har en mycket hemlagad överklagande. Du kan säga att laget tog en resa utanför, undersökte en anständig plats och tog några ögonblicksbilder med sina egna digitalkameror.

Ett professionellt, men ändå tillgängligt och vänligt lag är exakt vilken typ av team jag vill jobba med. Dessa människor är riktiga.

Detta är en av de sällsynta sidorna som smidigt smälter starka designregler med moderna tweaks. Deras tagline, "Humbly Awesome," är död på.

Traditionella aspekter:

Trevlig färg med stora accenter.
God användning av konstverk som integreras bra.
Solid och konsekvent i hela.

Web 2.0 förbättringar:

Navigering är ren och lätt att läsa.
Trevliga knappar som inte överdriver glansen.
Fotografering är personlig och lägger till en mänsklig beröring på webbplatsen.
Portföljen är tydlig och lätt att navigera, med en bra presentation av arbetet.
Rubrikerna är stora, men ändå sofistikerade.

22. Andrew Bradshaw

Detta är kanske en av de mest sofistikerade platserna på listan. Andrew har ett bra sätt att mäta textur, typ, knappar och fotografi i ett kongealedt paket. Han håller också hierarkin i åtanke och accentuerar de viktiga aspekterna och minimerar de sektioner som kanske inte är av intresse för alla användare.

Navigationen är en höjdpunkt, med varierande färger som visas när du svävar över flikarna; en mycket snygg touch.

Också i noten är den texturerade rubriken och det starka teckensnittet som används i hans logotyp. Återigen kombinerar Andrew subtilitet och accenter för att skapa en vacker webbplats som är grundlig och övertygande i hela.

Traditionella aspekter:

Övergripande överklagande av ren sofistikering.
Bra användning av accentelement, både i färg och med typ.
Som vanligt håller ett starkt nät system ihop.
Hierarkin implementeras väl.

Web 2.0 förbättringar:

En annan ta på knappar.
Brilliant användning av fotografi och bildpresentation.
Fantastiska detaljer i navigeringen.

23. James Lai

På senare tid har jag en sak för enkeltsidans webbplatser, och som du antagligen har gissat, är jag också en sucker för textur. Skriv in James Lai, en designer som vet hur man presenterar sig genom en fancy användning av typ, textur och animering.

Det som jag lovar honom mest är hans förmåga att hålla sin webbplats till en enda sida, och förlåt oss "All About Me" -sidan på nästan alla webbplatser. Även om jag lägger högt värde på det mänskliga elementet, talar jobbet ibland för sig själv, och jag kan inte klandra en kille för att tro på sin egen färdighetssats.

Traditionella aspekter:

Enkel lösning på en sida.
Animering lägger intresse för presentationen (även om det saktade webbplatsen lite i slutet).
God uppmärksamhet på detaljer.

Web 2.0 förbättringar:

Stor typ på hemsidan berättar om det exakta syftet med webbplatsen.
Kontaktinformation är lätt att hitta.
Coola miniatyrbilder hjälper användarna att navigera i portföljen.
Intressant användning av textur.

24. Subvert

Subvert ingår inte bara för sin uppenbart funktionella layout, men för det blekade bildspelet som finns på hemsidan. Presentationen är kul, men den är också informativ och värdefull för potentiella kunder.

Bakgrundsstrukturen kompletteras med transparenta detaljer, inklusive ett bra navigationssystem med genomskinliga flikar! Huvudstatusen för denna navigering är subtil och upprätthåller transparensen.

Jag brukar navigera direkt till arbetssidorna på dessa webbplatser, och Subvert gör ingen besvikelse i presentationen. Gridstrukturen är stark och lätt att navigera, och vid klickning tas användaren till en expanderad vy av arbetet.

Traditionella aspekter:

Bra totalflöde.
Stark presentation av portföljen på sidan "Work".

Web 2.0 förbättringar:

Enorm typ presenteras på ett blekande bildspel.
Transparenta navigeringsflikar!
Knapparna är trevliga och lägger en bra kontrast till bakgrunden.
Bildspel på kontoret på sidan "Företag" är en fin touch.
Omfattar teknik.

25. Gult fågelprojekt

Vid första anblicken kan den här webbplatsen vara lite disheveled eller spridd, men ju mer jag tittar på det, och ju mer jag bläddra igenom sidorna, desto mer har jag märkt styrkan i organisationen. Ännu bättre börjar den indie-inspirerade designen verkligen att överklaga ju längre vistelsen, och det spridda utseendet på webbplatsen passar verkligen temat.

Om du tittar på Fotogalleriet ser du en massa amatörfoton som återigen lägger till Indie-utseendet, samtidigt som produkten visas.

Denna typ av underjordiska tillvägagångssätt, som blev populär på webbplatser som threadless.com, fäster omedelbart tittaren på produkten.

De vill vara en del av publiken och känner inte som om någon bara försöker sälja dem något. Om det inte är en Web 2.0 filosofi, är jag inte säker på vad som är.

Traditionella aspekter:

Crafty logo skapar verkligen känslan, som genomförs på hela webbplatsen.
Även om den känns spridd eller lös först förstår man att den här "sammanslagna" looken är exakt vad designern skulle gå för. De drar ur utseendet samtidigt som platsen är lätt att navigera.
Konsekvent, icke-traditionell strategi.

Web 2.0 förbättringar:

Det handlar mer om filosofin med den här. Medan den sociala aspekten av Web 2.0 har full effekt, blir denna webbplats också stark på grund av sin virala marknadsföringsstrategi och en underliggande filantropi.
Bygger en gemenskap!
Stora bilder och enkel navigering skadar inte heller.

I stängning ...

Web 2.0 är en tuff standard för att definiera , som där traditionella konstruktionsstandarder är en rigidig samling av regler och riktlinjer (gallerstruktur, färgteori, brevavstånd, kerning, spårning osv.), Web 2.0, med liknande standarder, är nästan mer så ett sätt att leva.

Det kombinerar filosofi, marknadsföring, teknik, användarvänlighet och otaliga andra aspekter av vårt upptagna universum med ett yttersta mål att göra det lättare för massorna.

I det avseendet, Web 2.0 och de traditionella regler som etablerades för åren sedan, dela i slutändan samma mål: Att organisera kaoset och att förenkla komplexet .

Dessa dagar kan det vara en tuff konsert, så vi behöver alla verktyg till vårt förfogande, oavsett om de är nyskapande, eller om de har bevisats under århundraden förbi.

Skriven uteslutande för WDD av Josh Sears. Han är en författare, illustratör och designer för en rad webbaserade projekt. Han lever som Lead Web Designer, Creative Director och Co-Owner of Littlelines.com . Du kan kolla in hans jobb här , eller följ hans uppdateringar på Twitter .

Hur använder du web 2.0-element med traditionell design? Vänligen dela exempel från din egen portfölj eller andra bra exempel som du kanske har stött på.

designregler sammanställning av mönster traditionell web 2.0