I det store omfanget av designverdenen er begrepet "Web 2.0" relativt nytt.

Med det kommer sitt eget sett med standarder, noen sterke, andre ikke så sterke, siden Web 2.0 i seg selv er en svært svak og evigvarende definisjon av designstandarder .

Utallige eksempler på Web 2.0-nettsteder har brutt reglene for det som en gang ble vurdert som sterk design.

På den annen side har Web 2.0 i mange tilfeller styrket felles design misnomere; det legger fokus på brukervennlighet, grensesnitt og lesbarhet .

I beste fall står Web 2.0 like lik de tradisjonelle designreglene som er praktisert i århundrer, selv om det uten tvil er en refleksjon av vårt samfunn i sin nåværende tilstand av kjas og mas.

Her er en samling på 25 sider som viser hvordan Web 2.0 og tradisjonelle designpraksis kan komme sammen for å danne virkelig flotte nettsteder.

1. Pixel Matrix Design

Josh Pyles er en fin fyr, og han er også en fantastisk, disiplinert designer. Hans siste iterasjon av Pixel Matrix er en stunner, og gjør spesielt god bruk av farge og et sterkt rutenett system. Bla gjennom hans portefølje, og du vil se at han bærer denne praksisen i hans klientarbeid.

Hvis du sjekker ut "Om" -siden (legger merke til det flotte tabelsystemet i spill), kan du se at Josh har tatt med et fint bilde av arbeidsområdet hans.

Under dette bildet er en god balanse mellom Web 2.0-stilte skrifter, som etablerer et ekstremt sterkt hierarki med informasjon. Han holder sin egen bio liten og tucked i sidebjelken, og balanserer den større teksten i innholdsområdet med mindre, sofistikert type i sidefeltet.

Tradisjonelle aspekter:

  • Flott rutenett system.
  • Fantastisk fargeteori
  • Sterk hierarki av informasjon

Web 2.0 forbedringer:

  • Vakre gradienter.
  • Subtile detaljer.
  • Store, svært lesbare skriftvalg.
  • Et stort antall måter å holde kontakten på.
  • Selv kontaktskjemaet har en fin implementering av avrundede hjørner!

2. MuttInk

På det siste synes teksturen å være den største siden siden avrundede hjørner, og selv om MuttInks nettsted kanskje ikke er klassifisert som vanlig Web 2.0, er et blikk alt som kreves for å vite at Jeremy Holmes (mannen bak arbeidet) er en fantastisk designer og grafiker .

En oppmerksomhet på detaljer, tekstur og en sterk identitet plasserer dette som en personlig fave.

Selv om dagene med overdimensjonerte farger er noe bak oss (noe som er bra etter min mening), er jeg fortsatt en fan av subtile jordiske toner som er komplimentert med lyse aksenter, og MuttInk har trukket dette av briljant .

Den turkise toppen av beige skaper virkelig, og opprettholder "utkastbordet" som gjennomsyrer stedet. Og selv om typen er på den lille siden, og litt vanskelig å lese i flekker, ser det fortsatt flott ut på siden.

Tradisjonelle aspekter:

  • Ekstremt nøye med detaljer.
  • Fin type (men kanskje for liten).
  • Stor merkeidentitet.
  • Stor bruk av plass, spesielt på porteføljesidene.

Web 2.0 forbedringer:

  • Stor bruk av tekstur.
  • Store, profesjonelle bilder som viser arbeidet.
  • Rask tilgang til sosial tilknytning.

3. 45 Royale

Porteføljen over på 45 Royale viser ikke bare et fantastisk utvalg av arbeid, men det viser at teamet bak nettstedet forstår god bruk av flere designstandarder. Det er en fantastisk blanding av Web 2.0 fallbacks, men har et solid fundament i tradisjonelle designstandarder (og bare se på disse fargene!).

Spesielt har 45 Royale et av de beste nettverkssystemene jeg har sett i det siste, og bildene de har valgt for å vise frem arbeidet, passer godt sammen med den fluorescerende fargede overskriften ovenfor.

Å se fargeteorien og organisasjonen er så god harmoni alltid en godbit, og de har supplert alt med en svært sofistikert blanding av skrifttyper, både store og små.

Lyse farger rundt en sekundær palett av grå, hvit og svart? Rått.

Tradisjonelle aspekter:

  • Et av de bedre eksemplene på et rutenett system.
  • Rikelig med hvite plass og puste rom.
  • Strålende fargevalg.
  • God strøm av informasjon.

Web 2.0 forbedringer:

  • Fargene bare synger ... så mye at jeg oppførte det i begge kategorier.
  • Jumbo-størrelse er svært leselig, men smakfull.
  • Stor bruk av Illustrasjon og grafikk.
  • Mange prosjekter er godt organisert og pent utstilt.

4. Klem Zoom

Jeg er en sucker for flott illustrasjon, spesielt når den presenteres på toppen av et flott eksempel på hvitt rom. Jeg elsker dette nettstedet så mye at du bare klikker gjennom porteføljen er en blast. Flott hvite plass, flott rutenett system og fantastisk bruk av JavaScript; Disse tingene har en måte å snakke med meg (ja, jeg er foran en datamaskin ganske mye).

Den viktige tingen å huske på når vi står overfor de mange teknologiene som er tilgjengelige i disse dager, spesielt de fancy fades og trickery som muliggjøres av JavaScript, er å taper dem og regjere dem.

Husk på slutten av nittitallet da Flash var alt raseri? Husk hvor syk av Flash vi alle har etterpå? Gode ​​Web 2.0-standarder er like mye om disiplin som det handler om design, og Pinch Zoom har det godt under kontroll.

De sprinkle deres nettsted med fancy godhet, men vær så snill og morsom, med nesten null tid venter på bildene.

Tradisjonelle aspekter:

  • Et annet flott gridsystem (se et mønster her?).
  • Svart på hvitt ser aldri ut til å bli gammel.
  • Fin balanse mellom skrifter og overskrifter. (Den lille skrift, skjønt lesbar, kan kanskje være en punktstørrelse eller to større).

Web 2.0 forbedringer:

  • JavaScript-glidebryteren er dang morsom og effektiv.
  • Grensesnittet er minimalistisk og direkte.
  • Variert bruk av Illustrasjon er en fin touch.
  • Embraces webens nåværende teknologi uten å bli besværlig.
  • Unikke løsninger på sidelayout (Sjekk mega-rullegardinmenyen når du klikker på info-fanen. Det er praktisk talt et helt nettsted som dukker opp der!).

5. Cameron Moll

Jeg har alltid vært en fan av Camerons arbeid, og som du kan fortelle, har han en tendens til å være på den tradisjonelle siden av designspillet. Selv om hans bloggsted har en tendens til å falle innenfor den tradisjonelle siden av sofistikert design og små skrifttyper, er det ikke nektet elegansen og skjønnheten i porteføljesiden, noe som er en fantastisk balanse mellom det nye og det tradisjonelle.

Fargene er levende og skriftvalgene passer sammen med den generelle følelsen, men igjen kan typen bli ganske liten på steder, som er et Web 2.0 no-no. Men hvem skal jeg nit-pick? Cameron har funnet stor suksess og er mannen bak Authenticjobs.com, en stor ressurs for designere (og en som har bidratt til å betale regningene mine).

Tradisjonelle aspekter:

  • Velstrukturert innhold.
  • Subtile fargevariasjoner er en fin touch.
  • Typen ser elegant ut, men har en tendens til å ri på den lille siden av spekteret. Likevel, det er leselig og ser bra ut.

Web 2.0 forbedringer:

  • Veldig fin bruk av tekstur.
  • Porteføljen inneholder flotte bilder av arbeidet, som er veldig enkle og enkle å navigere.

6. Metalabs "Fluid" Tumblr-tema

Det eneste Tumblr-temaet for å lage listen har navnet "Fluid" av Metalab design. Det gjorde listen på grunn av en enkel grunn: Det er et freaking vakkert eksempel på Web 2.0 når det er best. Enkel, ren og skinnende med farge.

Man kan vurdere det litt en-sidig i denne sammenligningen (det er en Web 2.0-fangst-alle). Det er fordi Metalab er kjent for å sette standarder på Web 2.0-arenaen, og dette nettstedet er et bevis på det faktum. Metalab Design holder grunnleggende reglene i tankene, og holder strukturen enkel og godt organisert.

Transparent og overlappende grafikk er en av de nyere trender i Web 2.0. De gir et område en stor mengde dybde og gir en banebrytende, nesten futuristisk utseende. Metalabs "Fluid" har omfavnet dette konseptet og, enda bedre, levert det til massene som et nedlastbart tema.

Tradisjonelle aspekter:

  • Enkel, effektiv struktur.
  • Står ut i massene av Tumblr-temaer.
  • Moderne (men enkel) fargeskjema.

Web 2.0 forbedringer:

  • Stor, levende fotografi.
  • Ups ante for banebrytende Web 2.0 design
  • Meget lesbare skrifter og hoder.
  • Bruken av avrundede hjørner og gradienter blir tatt til det ytterste, men de presenteres i en morsom, moderne Web 2.0-løsning.
  • Ikoner er en flott, minimalistisk måte å navigere på alternativene for hvert innlegg.
  • La oss ikke glemme de gjennomsiktige bakgrunnene!

7. Viget

Oh gutt. Denne siden. Det får meg hver gang. Jo, jeg er en myk for tekstur, men denne designeren har også tatt finessen av god fargeteori og hierarki.

Jeg mener bare sjekk ut de portrettene i nærheten av bunnen! De er iøynefallende, men de konkurrerer ikke med hva som kan være en svært komplisert designflyt. La oss ikke glemme de store skriftvalgene og akvarellfølelsen. Glasur på kaken er det, selv om nettstedet er image-tungt, det laster på et øyeblikk!

Et annet kult aspekt av dette nettstedet er at designerne ønsker å dele mye informasjon med samfunnet, og det er ikke informasjon som selger dem som designere, men informasjon som de føler seg typiske brukere kan være verdifull.

De lar deg grave dypere uten å kramme deres behov ned i halsen, noe som alltid er en god praksis.

Tradisjonelle aspekter:

  • Velstrukturert innhold.
  • Vakker farge og type.
  • Selv om skrifttyper er på den lille siden, er hovedinnholdet fortsatt lett å lese.
  • Store kunstverk smelter sømløst inn i designet (kule portretter).

Web 2.0 forbedringer:

  • Akvarelltemaet er ekstremt moderne, og selv om det er image-tungt, er det blitt konstruert for å lime og mene.
  • Sidebarinnholdet er godt organisert og innholdsdrevet.
  • Unik løsning til boksen "Taleboble" i sidefeltet.
  • Massevis av delt, innholdsdrevet informasjon.

8. FeelWire

Et annet fantastisk eksempel på god whitespace er Feelwire. Svart type på hvite bakgrunner, med store gråtoner i mellom, synes aldri å bli gammel. Legg til et par fargerike ikoner, og du har deg selv et enkelt, men likevel effektivt nettsted. Det handler om enkelhet her (hei, de har bare en side!).

Web 2.0-stilikonene fungerer som midtpunkt for denne siden, og de går langt i å holde stedet sammen. De forhindrer også at nettstedet overskrides med tekst, og gir brukeren noe å være nysgjerrig på.

Når jeg rullet over disse ikonene, var jeg veldig fornøyd med det jeg fant: En veldig enkel svingestatus som ga meg den informasjonen jeg lette etter, gjør det med den stadig populære Web 2.0 "Speech Bubble". En fin touch.

Siste ting: Selv om jeg liker de røde koblingene, som også hopper av siden og samhandler godt med ikonene, tror jeg at de burde gjøre kontaktlenken litt mer merkbar. Fra nå av er det litt for tucked i innholdet, og jeg måtte virkelig søke etter en måte å komme i kontakt med disse talentfulle utviklerne. Bare nevner det'.

Tradisjonelle aspekter:

  • Kort, søt, og til poenget: en enkelt side side.
  • Hvit plass!
  • Subtile, smakfulle skriftvalg.
  • Hyggelig, grunnleggende layout.

Web 2.0 forbedringer:

  • De glatte ikonene popper på siden, på en god måte.
  • Virkelig kule overganger på ikonene holder stedet ryddig, men gir deg den informasjonen du trenger på en morsom måte.
  • Hyggelige avatarer legger til et menneskelig element.

9. Agami Creative

Ok, kanskje det er bare en personlig ting med disse svært teksturerte nettstedene, men hva Agami Creative gjør, det gjør det veldig bra. Det er et annet moderne eksempel på hvordan bildetunge nettsteder kan bli en perfekt akseptabel løsning i en dag med høyhastighetsforbindelser.

Midtpunktet på dette nettstedet er absolutt akvarellhodet, som fungerer som et perfekt bakteppe til den smarte logo-designen. Det huser også navigasjonen, plasserer akkurat nok vekt på beliggenheten, men uten å fornærme brukeren (fordi de fleste vet hvor de skal finne navigasjonen i disse dager.).

Når du klikker over på porteføljesiden, vil du legge merke til en layout med den perfekte mengden pusteplass og et sterkt rutenettsystem.

Enkle bilder bidrar til arbeidet og trekker øynene dine til de enkelte prosjektene, for eksempel å se gjennom nøkkelhull til sluttresultatet. Alt dette er innpakket med en sofistikert serif font for topptekstene og en svært lesbar sans-serif font for kroppens tekst.

Tradisjonelle aspekter:

  • Mer vakker bruk av fargeteori.
  • Flott kunstverk.
  • Interessant kombinasjon av type / skrifter.
  • Kunstnerisk, håndtegnet logo har en følelse som bæres gjennom hele nettstedet.

Web 2.0 forbedringer:

  • Oversized navigasjon gjør det enkelt å bevege seg rundt på nettstedet.
  • De gjør det veldig enkelt å komme i kontakt.
  • Bruk av avatarer er en god ide (selv om jeg ærlig tror at de kunne ha gjort det bedre med disse. Ikke sikker på hvordan anime ser ut til å være i tråd med dette nettstedet annet enn den asiatiske innflytelsen?).
  • Elske tekstur!

10. Adit Shukla

Et annet nettsted med en flott illustrativ tilnærming, Designer Adit Shukla, vet også hvordan man skal sette sammen et flott fargevalg, og til og med spiller med en fin løsning på sidebjelken.

For en eller annen merkelig grunn er mange sidebars slurvet og oversett, som om designere har tillatelse til å ignorere reglene for god design når de kaster sammen sidebjelken til et nettsted. Ikke med dette nettstedet.

Selv om innholdet er minimalt (selv litt sparsomt), kan man ikke unngå å elske den involverte kreativiteten, spesielt i det illustrerende overskriftet, som legger til en velbehagelig mengde dybde. Navigasjonsfanene ovenfor er også en fin touch.

Tradisjonelle aspekter:

  • Levende farger.
  • Kreative løsninger på vanlige elementer, for eksempel sidefeltet og overskriften.
  • Illustrasjonen gir mye dybde.

Web 2.0 forbedringer:

  • Enkel layout med en velutviklet topptekst, som også inneholder navigasjonen.
  • Stor type er effektiv.
  • Flere måter å navigere på nettstedet (skjønt ærlig, jeg er ikke overbevist om at dette er så bra).
  • Transparente faner er en fin touch.

12. Cream Scoop

Det første du vil legge merke til om Cream Scoop er det dristige valget av farger som brukes over hele nettstedet. De er ikke redd for å ta fargene opp et hakk fra normen, og resultatet er så forfriskende som det er annerledes.

Selv om fargene er dristige, er det også subtile blandinger av sterk type og gradienter som er peppered over hele siden. Legg merke til hvordan bakgrunnsgradienten lyser øverst, som kanten av en spotlight, for å markere den ellers minimal navigasjonen. Type er godt organisert og balansert, med en tydelig Web 2.0-følelse.

Tradisjonelle aspekter:

  • Fet utvalg av farger, men et utvalg som fungerer på overraskende effektive måter.
  • Minimalistisk navigasjon som gjør jobben ferdig.
  • Stor bruk av lekfull illustrasjon.
  • Layout er strukturert, men morsomt.

Web 2.0 forbedringer:

  • Fantastisk bruk av en gradient i bakgrunnen.
  • Lyseblå griper virkelig oppmerksomheten din og styrer den til de viktige greiene.
  • Kul bruk av avatarer på siden (hvor gammel er disse gutta?).
  • Store skrifttyper brukt i hele.

13. Carbonica

Carbonica avgir gradienter og skinnende godhet av Web 2.0 og går for en "pieced together" look som minner om en utklippsbok. Stor bruk av tekstur og animasjon, men også en veldig morsom ta på håndtegnet type.

Pass på å bla ned litt og sjekk ut ikonene, som også passer perfekt til temaet!

Tradisjonelle aspekter:

  • Grunnleggende struktur er i spill.
  • Håndlagd bokstaver går bra med temaet på nettstedet.
  • Animasjonen er en fin touch (men beklager, bruk av Flash holder dette poenget ut av Web 2.0-kategorien).

Web 2.0 forbedringer:

  • Tekstur er flott.
  • Drop skygger legger til realistisk dybde.
  • Fint ikoner, bilder og illustrasjon.

14. DSGN + DVLP

Igjen fungerer det generelle svart-hvitt-fargevalget for dette nettstedet, og de aksenterer denne retningen med noen rene ikoner trukket rett ut av Web 2.0-håndvesken.

Hjemmesiden står som en slags splash-side, og har en god blanding av ikoner, sterk layout og til og med litt fotografering. Alle disse elementene kommer sammen på en sofistikert måte og klarer å gi ut litt energi.

Du vil legge merke til at sekundærsider bruker en separat, 3-kolonne mal for å betjene informasjonen. Det er veldig veldig en minimalistisk design, men det er ikke noe dårlig.

Tradisjonelle aspekter:

  • Svart, hvitt og grått gir en tydelig følelse.
  • God balanse av type på hjemmesiden.
  • 3-kolonne sekundær side mal gir en jevn strøm av informasjon når du navigerer bort fra hjemmesiden.

Web 2.0 forbedringer:

  • Sosial mediebevissthet er definitivt i spill.
  • Glatte ikoner spredt over hele legg til nødvendig farge.
  • God blanding av fotografi og ikoner.
  • Jumbo-ikoner er omtalt på sekundære sider.

15. Marchand de Trucs

Så kanskje jeg ikke kan snakke språket, men det betyr ikke at nettstedet fortsatt ikke snakker til meg ... Ok, den linjen var halt, men fortsatt er dette nettstedet ganske søtt. Den inneholder flott kunstverk, og bak det hele, et flott fundament og strukturert innhold. Ikke så ille for hva jeg tror synes å være en online magisk butikk!

Tradisjonelle aspekter:

  • Intense oppmerksomhet på detaljer.
  • Farge teori er godt i spill, og det er en veldig involvert palett på det.
  • God bruk av skrifter som følger det generelle temaet på nettstedet.

Web 2.0 forbedringer:

  • Ekstremt fin bruk av illustrasjon som en header
  • Relativt store ikoner.

16. Paiko

Paiko, men enkel, er en av mine favorittsteder på listen. Det kommer over som en splittet blanding av tradisjonelle designstifter og Web 2.0-forbedringer: God type alle størrelser (inkludert selve Web 2.0 mega-overskriftene), flott hvite plass og selvfølgelig det evigvarende rutenettet som holder alt sammen.

Valget av å legge til tekstur i bakgrunnen setter virkelig stedet fra hverandre, og legger til et annet lag til det allerede sterke designet; det blir behandlet med forsiktighet, og ikke overdrevet som det er på noen steder. Denne tekstur, kombinert med den mer sofistikerte appell av nettstedet, går langt i å styrke Paiko's identitet.

Bla gjennom til porteføljesiden for å se et eksempel på stor mellomrom og rutenettstruktur, for ikke å nevne noen morsomme eksempler på godt beskårte bilder.

Tradisjonelle aspekter:

  • Enkel, to-kolonne rutenettkonstruksjon med takrør som gir den en fin, luftig følelse. Denne strukturen er gjennomført gjennom hele nettstedet, noe som gir den en svært konsistent flyt.
  • Kraftig følelse gir en fin touch, uten å være overbærende.
  • Font variasjoner og farge er svært sofistikert.

Web 2.0 forbedringer:

  • Jumbo-tekst!
  • Overskriften er stor og svært lesbar, og spiller pent mot den mindre typen nedenfor.
  • Flotte bilder og layout på porteføljesiden.
  • Konservativ bruk av tekstur legger til den overordnede identiteten.

17. Matt Dempsey

På den andre ekstremen av teksturspekteret har vi et nettsted av Matt Dempsey. Nå er det definitivt en ting som for mye konsistens, og noen ville ha et gyldig poeng hvis de hevdet at dette nettstedet går langt.

Jeg liker likevel det, og detaljene vant meg over da jeg begynte å sive gjennom informasjonen. Matt er ikke redd for å bryte noen regler som alltid har bugged meg (som å holde informasjon over foldet, en ide jeg føler ble oppfunnet ved en rundbordsdiskusjon av overdankefulle markedsførere. Jeg sier det fordi jeg en gang var en av de markedsførende folkene.).

Når det kommer til det, presenterer Matt Dempsey sitt arbeid, og hans nettsted, i fet og "på ditt ansikt" måte. Og å bryte noen få regler er det som en designer handler om, om reglene er gamle eller nye.

Tradisjonelle aspekter:

  • Tro det eller ei, det er et enkelt gridsystem som ligger bak tekstur.
  • Distinkt og unikt
  • Ikke redd for å bryte noen regler

Web 2.0 forbedringer:

  • Matt bruker en åpenbart Web 2.0 tilnærming til hans skrifter og logoer
  • God bruk av teknologi på innersidene (JavaScript-skyveknappen er en fin touch).
  • Hver bit viktig informasjon er stor og lett å lese.
  • Portefølje presenterer arbeidet på en morsom, høyteknologisk måte.

18. Digital Mash

Med Digital Mash kan du se at mange tanker gikk inn i elementene de ønsket å inkludere på nettstedet, eller enda bedre, elementene de valgte å gå ut av.

Å kunne kutte fettet er en viktig praksis for enhver designer, og Digital Mash legger ut det grunnleggende, og bare det grunnleggende. Åpne siden, og du vet innen sekunder hva forfatteren av nettstedet handler om.

Den glatte gradienten av bakgrunnen gjør en god jobb med å presentere innholdet på en sofistikert måte. Fra den rene typen, til den flotte grafikken i illustrasjonen, holder nettstedet det enkelt.

Det beste må være når du graver dypere inn på nettstedet. Gå til arbeidssiden, og du vil finne en portefølje presentert på en nesten gammeldags måte; de enkelte stykkene ser ut som om de er klare til å bli trykt og bundet til et lær-tilfelle.

Den elegante presentasjonen, dropshadows og de små detaljene (for eksempel de litt bøyde hjørnene i hvert stykke) gir det alt en moderne skråning. Kombinerer det nye og det gamle. Må elske det.

Tradisjonelle aspekter:

  • Trimmet bort unødvendige elementer.
  • Levende farger på hjemmesiden og i overskriften til sekundærsidene legger til en levende aksent til den grå bakgrunnen.
  • Informasjonshierarki er sterkt, og det er også den generelle strømmen til nettstedet.

Web 2.0 forbedringer:

  • Utrolig presentasjon av porteføljebildene; dropshadows, upturned kanter, og små detaljer virkelig bringe dette nettstedet til en høyere standard.
  • Fin gradient i bakgrunnen presenterer virkelig informasjonen godt.
  • Stor type og overdimensjonert bilder er vennlige for øynene.
  • Veldig kul navigasjonsløsning.

19. Kyan Media

Kyan Media er et annet nettsted som lener seg tungt på Web 2.0-siden av spekteret. Sky design og den pulserende blå fargepaletten er rett ut av boken, men det er et ekstremt sterkt eksempel på standarden.

Nettstedet spiller det rett, og i store bokstaver forteller deg nøyaktig hva de gjør, etterfulgt av eksempler på arbeidet. Det er en enkel designstrategi som finnes på utallige nettsteder, og med god grunn. Det er raskt, og truer ikke med en kort oppmerksomhet.

Og, som alle gode eksempler, omfatter den teknologien, så vel som det gjør tradisjonelle designregler. Ta litt tid og svinger over eksemplene på arbeid. Det er en morsom og informativ måte å presentere utvalgt portefølje stykker på, og lar oss, brukeren, grave dypere, eller for å få det grunnleggende med et blikk.

Tradisjonelle aspekter:

  • Alt har en ekstremt solid følelse.
  • Generell layout på hver side er sterk
  • Informasjonshierarkiet er flott.
  • Fonter, overskrifter og skriftfarger er konsekvente i hele.

Web 2.0 forbedringer:

  • Lyseblå fargepalett.
  • Morsom bruk av illustrasjon (hvem liker ikke skyer?).
  • Strålende fotografering.
  • God implementering av teknologi.
  • Subtile dropshadows legger til dybde.
  • Meget lesbare skrifttyper og store overskrifter.

20. Rockatee

Vel, det står "Funksjonell design" i overskriften, så det hadde bedre arbeid, ikke sant? Heldigvis gjør dette nettstedet. Det er et annet eksempel på hvordan tekstur kryper inn i webdesignmarkedet og bekrefter ideen om at vi er godt inn i høyhastighetsalderen med surfing på nettet.

Noe du kanskje merker er at Rockatee har ganske mange prosjekter på skjermen i porteføljeseksjonen, så en strømlinjeformet løsning var definitivt i orden. De gjorde det med en rekke øyeblikksbilder som viser dybden av deres produktive portefølje. Gjør deg selv en tjeneste og sjekk den ut.

En annen funksjon i notatet er den fine navigasjonen. Den er godt plassert og gjør nettstedet til en lek å klikke gjennom. De hjelper deg selv sammen på hjemmesiden med en fin stor knapp som fører til porteføljen.

Tradisjonelle aspekter:

  • Alt har en ekstremt solid følelse.
  • Generell layout på hver side er sterk.
  • Fargeteori er godt utforsket og implementert.
  • Sterk oppmerksomhet på detaljer.

Web 2.0 forbedringer:

  • Fantastisk navigasjon.
  • Store knapper fører deg til viktige biter.
  • Kult "øyeblikksbilde" portefølje med store avlinger av de enkelte arbeider.
  • Nettstedet viser designerne mange sideprosjekter, men lar dem ikke komme i veien for de sentrale elementene.
  • Flott ide med tidslinjen på siden "Om".

21. Ting som er brune

En annen av mine personlige favoritter er ting som er brune. De trekker av et ekstremt polert nettsted som er lik (eller bedre enn) nettsteder som er opprettet av store byråer, men de gir deg også et innblikk i folkene bak kulissene.

Omsiden inneholder flott fotografi som, selv om det er profesjonelt nok, også har en veldig hjemmelaget appell. Du kan fortelle at laget tok en tur utenfor, studerte et anstendig sted, og tok noen øyeblikksbilder med sine egne digitale kameraer.

Et profesjonelt, men likevel tilgjengelig og vennlig team er akkurat den typen team jeg vil jobbe med. Disse menneskene er ekte.

Dette er en av de sjeldne områdene som sømløst smelter sammen sterke designregler med moderne tweaks. Deres tagline, "Humbly Awesome," er død på.

Tradisjonelle aspekter:

  • Fin farge med flotte aksenter.
  • God bruk av kunstverk som integrerer godt.
  • Solid og konsekvent gjennom hele.

Web 2.0 forbedringer:

  • Navigasjonen er ren og lett å lese.
  • Fint knapper som ikke overdriver glansen.
  • Fotografering er personlig og legger til et menneskelig preg på nettstedet.
  • Porteføljen er klar og enkel å navigere, med god presentasjon av arbeidet.
  • Overskrifter er store, men likevel sofistikerte.

22. Andrew Bradshaw

Dette er kanskje en av de mest sofistikerte områdene på listen. Andrew har en flott måte å maskere tekstur, type, knapper og fotografering inn i en kongealed pakke. Han holder også hierarkiet i bakhodet og fremhever viktige aspekter og minimerer de seksjonene som kanskje ikke er av interesse for alle brukere.

Navigeringen er et høydepunkt, med varierende farger som dukker opp mens du svinger over fanene. en veldig elegant touch.

Også i notatet er den teksturerte toppteksten og det sterke skriftvalget som brukes i logoen. Igjen, Andrew kombinerer subtilitet og aksenter for å skape et vakkert nettsted som er grundig og overbevisende i hele.

Tradisjonelle aspekter:

  • Samlet appell av ren sofistikasjon.
  • God bruk av aksentelementer, både i farge og med type.
  • Som vanlig holder et sterkt rutenett system sammen.
  • Hierarkiet er implementert godt.

Web 2.0 forbedringer:

  • En annen ta på knapper.
  • Strålende bruk av fotografering og bilde presentasjon.
  • Fantastiske detaljer i navigasjonen.

23. James Lai

I det siste har jeg en ting for nettsider, og som du sikkert har gjettet, er jeg også en sucker for tekstur. Skriv inn James Lai, en designer som vet hvordan han presenterer seg gjennom en fancy bruk av type, tekstur og animasjon.

Det jeg liker mest, er hans evne til å holde nettstedet sitt til en enkelt side, og tilgi oss "All About Me" siden på nesten alle sider. Selv om jeg legger stor verdi på det menneskelige elementet, snakker arbeidet for seg selv, og jeg kan ikke utsette en fyr for å tro på sitt eget ferdighetssett.

Tradisjonelle aspekter:

  • Enkel, enkeltsidig løsning.
  • Animasjon legger til interesse for presentasjonen (selv om den senket nettstedet litt på enden min).
  • God oppmerksomhet på detaljer.

Web 2.0 forbedringer:

  • Stor type på hjemmesiden forteller deg det nøyaktige formålet bak nettstedet.
  • Kontaktinformasjon er lett å finne.
  • Kule miniatyrer hjelper brukerne med å navigere i porteføljen.
  • Interessant bruk av tekstur.

24. Subvert

Subvert ble inkludert ikke bare for det åpenbart funksjonelle oppsettet, men for fading lysbildeserie som ble vist på hjemmesiden. Presentasjonen er morsom, men den er også informativ og verdifull for potensielle kunder.

Bakgrunnsstrukturen komplimenteres av gjennomsiktige detaljer, inkludert et flott navigasjonssystem med gjennomsiktige faner! Sveverstatusen for denne navigasjonen er subtil og opprettholder gjennomsiktigheten.

Jeg pleier å navigere direkte til arbeidssidene på disse nettstedene, og Subvert skuffer ikke i presentasjonen. Gitterstrukturen er sterk og enkel å navigere, og ved å klikke, blir brukeren tatt til en utvidet visning av arbeidet.

Tradisjonelle aspekter:

  • Flott samlet strømning.
  • Sterk presentasjon av porteføljen på "Arbeid" siden.

Web 2.0 forbedringer:

  • Stor type presenteres på en falsk lysbildefremvisning.
  • Transparente navigasjonsfaner!
  • Knappene er fine og gir en god kontrast til bakgrunnen.
  • Lysbilde av kontoret på siden "Firma" er en fin touch.
  • Embraces teknologi.

25. Gul fuglprosjekt

Ved første øyekast kan dette nettstedet virke litt disheveled eller spredt, men jo mer jeg ser på det, og jo mer jeg blar gjennom sidene, desto mer har jeg lagt merke til styrken i organisasjonen. Enda bedre, den indie-inspirerte designen begynner å appellere jo lengre oppholdet, og det spredte utseendet på nettstedet passer egentlig til temaet.

Hvis du sjekker ut Fotogalleriet, ser du en rekke amatørfotografier som igjen legger til Indie-utseendet, mens du viser produktet.

Denne typen underjordiske tilnærming, som ble gjort populær blant nettsteder som threadless.com, legger umiddelbart titteren på produktet.

De ønsker å være en del av publikum og føler ikke som om noen bare prøver å selge dem noe. Hvis det ikke er en Web 2.0 filosofi, er jeg ikke sikker på hva som er.

Tradisjonelle aspekter:

  • Crafty logo virkelig etablerer følelsen, som utføres gjennom hele nettstedet.
  • Selv om det føles spredt eller løs i begynnelsen, innser man at dette "putte sammen" ser akkurat ut som designerne skulle gå for. De trekker ut utseendet samtidig som nettstedet gjør det enkelt å navigere.
  • Konsekvent, ikke-tradisjonell tilnærming.

Web 2.0 forbedringer:

  • Det handler mer om filosofien med denne. Mens det sosiale aspektet av Web 2.0 er i full effekt, er dette nettstedet også gjort sterkt på grunn av sin virale markedsføringsmetode og god underliggende filantropi.
  • Bygger et fellesskap!
  • Gode ​​bilder og enkel navigering gjør ikke vondt heller.

I Avslutning…

Web 2.0 er en tøff standard for å definere , som hvor tradisjonelle designstandarder er en stiv samling av regler og retningslinjer (gridstruktur, fargeteori, brevavstand, kerning, sporing osv.), Web 2.0, mens det inneholder lignende standarder, er nesten mer slik en livsstil.

Den kombinerer filosofi, markedsføring, teknologi, brukervennlighet og utallige andre aspekter av vårt travle univers med et ultimate mål å gjøre tingene enklere for massene.

I den forbindelse, Web 2.0 og de tradisjonelle reglene som ble etablert for mange år siden, deler det samme målet: Å organisere kaoset, og forenkle komplekset .

I disse dager kan det være en tøff konsert, så vi trenger alle verktøyene til disposisjon, enten de er banebrytende, eller om de har blitt bevist over århundrer tidligere.


Skrevet utelukkende for WDD av Josh Sears. Han er en forfatter, illustratør og designer for en rekke nettbaserte prosjekter. Han lever som Lead Web Designer, Creative Director, og medeier av Littlelines.com . Du kan sjekk ut hans arbeid her , eller følg hans oppdateringer på Twitter .

Hvordan bruker du web 2.0 elementer med tradisjonell design? Vennligst del eksempler fra din egen portefølje eller andre gode eksempler som du kanskje har kommet over.