25 Eksempler på Web 2.0 og traditionelle designregler, der kommer sammen

I det store omfang af designverdenen er udtrykket "Web 2.0" relativt nyt.

Med det kommer sit eget sæt standarder, nogle stærke, andre ikke så stærke, da Web 2.0 i sig selv er en meget svag og evigt udviklende definition af designstandarder .

Utallige eksempler på web 2.0 websteder har brudt reglerne for, hvad der engang blev betragtet som et stærkt design.

På den anden side har Web 2.0 i mange tilfælde styrket fælles design misnomer; det sætter fokus på brugervenlighed, interface og læsbarhed .

Web 2.0 er bedst som det samme som de traditionelle designregler, der praktiseres i århundreder, men det er uden tvivl en afspejling af vores samfund i dets nuværende tilstand af trængsel og travlhed.

Her er en samling på 25 sider, der viser hvordan Web 2.0 og traditionelle designpraksis kan komme sammen til at danne virkelig fantastiske hjemmesider.

1. Pixel Matrix Design

Josh Pyles er en god fyr, og han er også en fantastisk, disciplineret designer. Hans seneste iteration af Pixel Matrix er en bedøvelse, og gør særlig god brug af farve og et stærkt gittersystem. Gennemse hans portefølje, og du vil se, at han bærer denne praksis i hans klientarbejde.

Hvis du tjekker "Om" -siden (noterer sig det nice tabs-system i spil), kan du se, at Josh har inkluderet et godt billede af hans arbejdsområde.

Nedenfor er dette skud en god balance mellem Web 2.0-typede skrifttyper, som skaber et ekstremt stærkt hierarki med information. Han holder sit eget bio lille og gemt i sidebjælken og balancerer den større tekst af indholdsområdet med mindre, sofistikeret type i sidepanelet.

Traditionelle aspekter:

Great grid system.
Vidunderlig farve teori
Stærkt hierarki af information

Web 2.0 forbedringer:

Smukke gradienter.
Subtile detaljer.
Store, meget læsbare skriftvalg.
Et stort antal måder at forblive forbundet med.
Selv kontaktformularen har en god implementering af afrundede hjørner!

2. MuttInk

På det seneste synes tekstur at være den største ting siden afrundede hjørner, og selvom MuttInks hjemmeside måske ikke klassificeres som typiske Web 2.0, er et blik alt det, der kræves for at vide, at Jeremy Holmes (manden bag arbejdet) er en fantastisk designer og grafiker .

En opmærksomhed på detaljer, tekstur og en stærk identitet placerer dette som en personlig fave.

Selv om dagene med overdrevent dæmpede farver ligger lidt bag os (hvilket er en god ting, efter min mening), er jeg stadig en fan af subtile jordiske toner, der er komplimenteret med lyse accenter, og MuttInk har trukket det briljant ud .

Den turkis på toppen af beige poper virkelig, og opretholder "udkastbordet", som gennemsyrer stedet. Og selv om typen er på den lille side, og lidt svær at læse i pletter, ser den stadig godt ud på siden.

Traditionelle aspekter:

Ekstremt nøje opmærksomhed på detaljer.
Nice type (selvom måske for lille).
Stor mærkeidentitet.
Stor udnyttelse af rummet, især på porteføljesiderne.

Web 2.0 forbedringer:

Stor brug af tekstur.
Store professionelle billeder viser arbejdet.
Hurtig adgang til sociale forbindelser.

3. 45 Royale

Porteføljen over på 45 Royale viser ikke kun et fantastisk udvalg af arbejde, men det viser, at holdet bag hjemmesiden forstår god brug af flere designstandarder. Det er en fantastisk blanding af Web 2.0 fallbacks, men har et solidt fundament i traditionelle designstandarder (og se bare på disse farver!).

I særdeleshed har 45 Royale et af de bedste gittersystemer jeg har set sidst, og de billeder, de har valgt for at fremhæve arbejdet, passer virkelig godt sammen med den fluorescerende farvede overskrift ovenfor.

Når farve teorien og organisationen er i gang med en sådan stor harmoni, er det altid en godbid, og de har suppleret det hele med en meget sofistikeret blanding af skrifttyper, både store og små.

Lyse farver omkring en sekundær palette af grå, hvid og sort? Fantastisk.

Traditionelle aspekter:

Et af de bedre eksempler på et gittersystem.
Masser af whitespace og åndedræt.
Strålende farvevalg.
Godt flow af information.

Web 2.0 forbedringer:

Farverne synger simpelthen ... så meget, at jeg noterede det i begge kategorier.
Jumbo-størrelse type er meget læselig, men smagfuld.
Stor brug af illustration og grafik.
Mange projekter er velorganiseret og pænt udstillet.

4. Klem Zoom

Jeg er en sucker for stor illustration, især når den præsenteres oven på et vidunderligt eksempel på hvidt rum. Jeg elsker denne side så meget, at det simpelthen at klikke gennem porteføljen er en blast. Great whitespace, great grid system og vidunderlig brug af JavaScript; disse ting har en måde at tale med mig (ja jeg er meget foran en computer).

Den vigtige ting at huske på, når vi står over for de mange teknologier, der er til rådighed i disse dage, især de fancy fades og trickery, der er muliggjort af JavaScript, er at aftage dem og regere dem.

Husk i slutningen af halvfemserne, da Flash var alt raseri? Husk hvor slemt Flash vi alle har bagefter? Gode Web 2.0-standarder er lige så meget om disciplin som det handler om design, og Pinch Zoom har det godt under kontrol.

De drysser deres hjemmeside med den fancy godhed, men alligevel holder det lækkert og sjovt, med næsten nultid venter på billederne.

Traditionelle aspekter:

Et andet godt grid system (se et mønster her?).
Sort på hvid ser aldrig ud til at blive gammel.
Nice balance mellem skrifttyper og overskrifter. (Den lille skrifttype, men læselig, kan måske være en punktstørrelse eller to større).

Web 2.0 forbedringer:

JavaScript-skyderen er dang sjov og effektiv.
Interface er minimalistisk og direkte.
Varieret brug af illustration er et godt strejf.
Omfatter webens nuværende teknologi uden at blive besværlig.
Unikke løsninger til sidelayout (Tjek mega-dropdownen, når du klikker på fanen Info. Der er stort set hele et websted der gemmer sig derhen!).

5. Cameron Moll

Jeg har altid været fan af Camerons arbejde, og som du kan fortælle, har han tendens til at forblive på den traditionelle side af designområdet. Selvom hans blogsite tendens til at falde inden for den traditionelle side af sofistikeret design og små skrifttyper, er der ingen afslag på elegance og skønhed i hans porteføljeside, hvilket er en fantastisk balance mellem det nye og det traditionelle.

Farverne er levende, og skrifttypens valg er i overensstemmelse med den overordnede følelse, men igen kan typen blive temmelig lille på steder, hvilket er et web 2.0 no-no. Men hvem skal jeg nit-pick? Cameron har fundet stor succes og er manden bag Authenticjobs.com, en stor ressource for designere (og en, der har hjulpet betale mine regninger).

Traditionelle aspekter:

Velstruktureret indhold.
Subtile farvevariationer er en fin touch.
Typen ser elegant ud, men har tendens til at køre på den lille side af spektret. Alligevel er det læseligt og ser godt ud.

Web 2.0 forbedringer:

Meget flot brug af tekstur.
Porteføljen indeholder flotte billeder af arbejdet, som er meget enkle og nemme at navigere.

6. Metalabs "Fluid" Tumblr tema

Det eneste Tumblr-tema til at lave listen hedder "Fluid" af Metalab design. Det lavede listen på grund af en simpel grund: Det er et freaking smukt eksempel på Web 2.0, når det er bedst. Enkel, ren og skinnende med farve.

Man kan overveje det lidt en-side i denne sammenligning (det er en Web 2.0 catch-all). Det skyldes, at Metalab er kendt for at indstille standarder i Web 2.0-arenaen, og dette websted er et testamente til den kendsgerning. Metalab Design holder fundamentale regler i tankerne, og holder strukturen enkel og velorganiseret.

Gennemsigtighed og overlappende grafik er en af de nyere trends i Web 2.0. De giver en grundig dybde og giver et skæbende, næsten futuristisk udseende. Metalabs "Fluid" har omfavnet dette koncept og, endnu bedre, leveret det til masserne som et downloadbart tema.

Traditionelle aspekter:

Enkel, effektiv struktur.
Står ud i masserne af Tumblr temaer.
Moderne (men enkel) farveskema.

Web 2.0 forbedringer:

Stor, levende fotografi.
Ups ante for banebrydende Web 2.0 design
Meget læselige skrifttyper og overskrifter.
Brug af afrundede hjørner og gradienter er taget til ekstreme, men de er præsenteret i en sjov, moderne Web 2.0-løsning.
Ikoner er en fantastisk, minimalistisk måde at navigere på mulighederne for hvert indlæg.
Lad os ikke glemme de gennemsigtige baggrunde!

7. Viget

Hold da op. Denne side. Det får mig hver gang. Sikker på, at jeg er softy for tekstur, men denne designer har også fået finessen af god farve teori og hierarki.

Jeg mener bare tjek de portrætter nær bunden! De er iøjnefaldende, men de konkurrerer ikke med, hvad der kunne være et meget kompliceret design flow. Lad os ikke glemme de store skrifttype valg og akvarel føler. Glasurret på kagen er det, selv om hjemmesiden er billed-tung, det lægges i et øjeblik!

Et andet køligt aspekt ved dette websted er, at designerne ønsker at dele meget information med deres fællesskab, og det er ikke oplysninger, der sælger dem som designere, men oplysninger, som de føler typiske brugere, kan være værdifulde.

De giver dig mulighed for at grave dybere uden at bremse deres behov ned i halsen, hvilket altid er en god praksis.

Traditionelle aspekter:

Velstruktureret indhold.
Smuk farve og type.
Selvom skrifttyperne er på den lille side, er hovedindholdet stadig let at læse.
Store kunstværker sikres problemfrit ind i designet (seje portrætter).

Web 2.0 forbedringer:

Akvarel tema er ekstremt moderne, og selv om det er image-heavy, er det blevet konstrueret til at indlæse magert og middelværdigt.
Sidebjælkeindhold er velorganiseret og indholdsdrevet.
Unik løsning til boksen "Taleboble" i sidepanelet.
Masser af delt, indholdsdrevet information.

8. FeelWire

Et andet fantastisk eksempel på stor hvide plads er Feelwire. Sort type på hvide baggrunde, med store gråtoner imellem, synes aldrig at blive gammel. Tilføj et par farvestrålende ikoner, og du har dig selv et enkelt, men alligevel effektivt websted. Det handler om enkelhed her (hej, de har kun en side!).

Web 2.0-stylede ikoner tjener som midtpunkt for denne side, og de går langt sammen med at holde webstedet sammen. De forhindrer også, at webstedet overskrides med tekst og giver brugeren noget at være nysgerrig om.

Når jeg rullede over disse ikoner, var jeg virkelig tilfreds med det, jeg fandt: En meget simpel svingestatus, der gav mig de oplysninger, jeg ledte efter. Det gør jeg med den altid populære Web 2.0 "Taleboble". En stor berøring.

Sidste ting: Selv om jeg kan lide de røde links, som også kommer væk fra siden og interagerer godt med ikonerne, tror jeg, at de burde gøre kontaktlinket lidt mere mærkbart. Fra nu af er det lidt for gemt i indholdet, og jeg var virkelig nødt til at søge efter en måde at komme i kontakt med disse talentfulde udviklere. Siger det bare'.

Traditionelle aspekter:

Kort, sødt og til det punkt: en enkelt side side.
Hvidt rum!
Subtile, smagfuldt skriftvalg.
Nice, grundlæggende layout.

Web 2.0 forbedringer:

De blanke ikoner poper væk fra siden, på en god måde.
Virkelig seje overførsler på ikonerne holder webstedet ryddeligt, men giver dig de oplysninger, du har brug for på en sjov måde.
Nice avatarer tilføjer et menneskeligt element.

9. Agami Creative

Okay, det er måske bare en personlig ting med disse stærkt strukturerede websteder, men hvad Agami Creative gør, det gør det meget godt. Det er et andet moderne eksempel på, hvordan billedstarke websteder kan blive en perfekt acceptabel løsning på en dag med højhastighedsforbindelser.

Midtpunktet på dette websted er helt klart akvareloverskriften, som tjener som et perfekt baggrund for det lette logo design. Det huser også navigationen og placerer lige så meget vægt på dens placering, men uden at fornærme brugeren (fordi de fleste ved, hvor de skal finde navigationen i disse dage.).

Når du klikker over på porteføljesiden, vil du se et layout med den perfekte mængde vejrtrækning og et stærkt gittersystem.

Enkle billeder bidrager til arbejdet og tegner dine øjne for de enkelte projekter, f.eks. Gennem et nøglehul til det endelige resultat. Alt dette er indpakket med en sofistikeret serif skrifttype til overskrifterne og en meget læselig sans-serif skrifttype til kroppens tekst.

Traditionelle aspekter:

Mere smuk brug af farve teori.
Flot kunstværk.
Interessant kombination af type / skrifttyper.
Kunstnerisk, håndtegnet logo har en følelse, der bæres gennem hele siden.

Web 2.0 forbedringer:

Oversized navigation gør det nemt at flytte rundt på siden.
De gør det meget nemt at komme i kontakt.
Brug af avatarer er en god ide (selvom jeg ærligt tror, at de kunne have gjort det bedre med disse. Ikke sikker på, hvordan anime ser ud til at være i indgreb med dette andet websted end den asiatiske indflydelse?).
Elsker tekstur!

10. Adit Shukla

Et andet websted med en stor illustrativ tilgang, Designer Adit Shukla ved også, hvordan man sammensætter et fantastisk farveskema og endda spiller med en god løsning til sidebjælken.

Af en eller anden mærkelig grund er mange sidebars sjusket og overset, som om designerne har tilladelse til at ignorere reglerne for godt design, når de smider sammen sidebjælken på et websted. Ikke med denne side.

Selvom indholdet er minimalt (selv lidt sparsomt), kan man ikke undgå at elske den involverede kreativitet, især i det illustrerende overskrift, som tilføjer en velbehagelig mængde dybde. Navigationsfanerne ovenover er også et godt strejf.

Traditionelle aspekter:

Levende farver.
Kreative løsninger til fælles elementer, såsom sidebjælken og overskriften.
Illustration tilføjer meget dybde.

Web 2.0 forbedringer:

Enkelt layout med en veludviklet header illustration, som også huser navigationen.
Stor type er effektiv.
Flere måder at navigere på webstedet (selv om jeg ærligt er overbevist om, at dette er så godt).
Gennemsigtige faner er et godt strejf.

12. Creme Scoop

Det første du vil bemærke om Cream Scoop er det dristige udvalg af farver, der bruges over hele siden. De er ikke bange for at tage farverne op i et hak af normen, og resultatet er så forfriskende, som det er anderledes.

Selvom farverne er fedte, er der også subtile blandinger af stærk type og gradienter, der er peppered over hele siden. Bemærk, hvordan baggrundsgraden lyser øverst, som kanten af en spotlight, for at fremhæve den ellers minimal navigation. Typen er velorganiseret og afbalanceret, med en tydelig Web 2.0-følelse.

Traditionelle aspekter:

Fedt udvalg af farver, men et udvalg der virker på overraskende effektive måder.
Minimalistisk navigation, der får jobbet færdigt.
Stor brug af legende illustration.
Layout er struktureret, men sjovt.

Web 2.0 forbedringer:

Fantastisk brug af en gradient i baggrunden.
Lyseblå tager virkelig din opmærksomhed og leder den til de vigtige ting.
Cool brug af avatarer på den omkring side (hvor gamle er disse fyre?).
Store skrifttyper brugt i hele.

13. Carbonica

Carbonica afviser gradienter og skinnende godhed i Web 2.0 og går til et "pieced together" look, der minder om en scrapbog. Stor brug af tekstur og animation, men også en rigtig sjov håndtag.

Sørg for at rulle ned lidt og tjek ikonerne, som også passer perfekt til temaet!

Traditionelle aspekter:

Grundlæggende struktur er i spil.
Håndlavet bogstaver går godt med temaet på webstedet.
Animationen er et dejligt strejf (men undskyld, brugen af Flash holder dette punkt ud af Web 2.0-kategori).

Web 2.0 forbedringer:

Tekstur er stor.
Drop skygger tilføjer realistisk dybde.
Nice ikoner, billeder og illustration.

14. DSGN + DVLP

Igen fungerer den generelle sort / hvide farveplan for dette websted, og de accentrer denne retning med nogle rene ikoner trukket lige ud af Web 2.0-håndtasken.

Hjemmesiden står som en slags splash side og har en god blanding af ikoner, stærkt layout og endda lidt fotografering. Alle disse elementer kommer sammen på en sofistikeret måde og klarer at udlede en del energi.

Du vil bemærke, at sekundære sider bruger en separat, 3-kolonne skabelon til at forsyne oplysningerne. Det er alt sammen meget minimalistisk design, men det er ikke en dårlig ting.

Traditionelle aspekter:

Sort, hvid og grå giver en tydelig følelse.
God balance af typen på hjemmesiden.
3-kolonne sekundær side skabelon giver en ensartet strøm af information, når du navigerer væk fra hjemmesiden.

Web 2.0 forbedringer:

Social mediebevidsthed er helt sikkert i spil.
Glatte ikoner spredt gennem hele tilføjes nødvendig farve.
God blanding af fotografi og ikoner.
Jumbo-ikoner vises på sekundære sider.

15. Marchand de Trucs

Så måske kan jeg ikke tale sproget, men det betyder ikke, at webstedet stadig ikke taler til mig ... Okay, den linie var lam, men det er stadig meget sødt. Det indeholder vidunderligt kunstværk og bag det hele et godt fundament og struktureret indhold. Ikke så dårligt for hvad (jeg tror) synes at være en online magisk butik!

Traditionelle aspekter:

Intense opmærksomhed på detaljer.
Farve teori er godt i spil, og det er en meget involveret palette på det.
God brug af skrifttyper, der følger webstedets generelle tema.

Web 2.0 forbedringer:

Ekstremt god brug af illustration som et overskrift
Relativt store ikoner.

16. Paiko

Paiko er simpelthen en af mine yndlingssteder på listen. Det kommer på tværs som en split blanding af traditionelle design hæfteklammer og Web 2.0 forbedringer: God type af alle størrelser (herunder selve Web 2.0 mega overskrifter), fantastisk hvide rum og selvfølgelig det stadig vigtige net, der holder det hele sammen.

Valget af at tilføje tekstur i baggrunden sætter virkelig webstedet fra hinanden, og tilføjer et andet lag til det allerede stærke design; det behandles med omhu og ikke overdrevent anvendes som det er på nogle steder. Denne tekstur kombineret med den mere sofistikerede appel af webstedet går langt i at styrke Paiko's identitet.

Gennemse over på porteføljesiden for at se et eksempel på stor afstand og gitterstruktur, for ikke at nævne nogle sjove eksempler på godt beskårne billeder.

Traditionelle aspekter:

Enkel, to-søjle gitter struktur med gutter plads, der giver det en god luftig følelse. Denne struktur bæres gennem hele siden, hvilket giver det en meget konsistent strømning.
Crafty føler føjer et godt strejf uden at være anmassende.
Font variationer og farve er meget sofistikerede.

Web 2.0 forbedringer:

Jumbo-tekst!
Overskriften er enorm og meget læselig og spiller pænt mod den mindre type nedenfor.
Store billeder og layout på porteføljesiden.
Konservativ brug af tekstur tilføjer den overordnede identitet.

17. Matt Dempsey

På den anden ekstreme af tekstur spektret, har vi et websted af Matt Dempsey. Nu er der absolut en ting som for meget tekstur, og nogle ville have et gyldigt punkt, hvis de hævdede, at dette websted går langt.

Jeg kan dog stadig lide det, og detaljerne vandt mig over, da jeg begyndte at sive gennem oplysningerne. Matt er ikke bange for at bryde et par regler, der altid har bugged mig (ligesom at holde oplysninger over foldet, en ide jeg føler blev opfundet ved en rundbordsdiskussion af overdænkende marketingfolk. Jeg siger det fordi jeg en gang var en af disse marketingfolk.).

Når det kommer til det, præsenterer Matt Dempsey sit arbejde og sit websted, på en fed og "i dit ansigt" måde. Og at bryde et par regler er hvad der handler om en designer, om reglerne er gamle eller nye.

Traditionelle aspekter:

Tro det eller ej, der er et simpelt gitter system underliggende tekstur.
Distinct og unik
Ikke bange for at bryde et par regler

Web 2.0 forbedringer:

Matt bruger en tydeligvis Web 2.0 tilgang til hans skrifttyper og logo
God brug af teknologi på de indvendige sider (JavaScript-skyderen er en cool touch).
Enhver vigtig information er enorm og let at læse.
Portefølje præsenterer arbejdet på en sjov, højteknologisk måde.

18. Digital Mash

Med Digital Mash kan du se, at mange tanker gik ind i de ting, de ønskede at medtage på webstedet, eller endnu bedre, de ting, de valgte at gå ud af.

At kunne skære fedtet er en vigtig praksis for enhver designer, og Digital Mash lægger udgangspunkt i det grundlæggende og kun det grundlæggende. Åbn siden, og du ved inden for få sekunder, hvad forfatteren af webstedet handler om.

Den glatte gradient af baggrunden gør et godt stykke arbejde med at præsentere indholdet på en sofistikeret måde. Fra den rene type til den stramme grafik af illustrationen holder webstedet det nemt.

Det bedste skal være, når du graver dybere ind i stedet. Gå til arbejdssiden, og du vil finde en portefølje præsenteret på en næsten gammeldags måde; de enkelte stykker ser ud som om de er klar til at blive trykt og bundet i en læder-attache sag.

Den slanke præsentation, dropshadows og de små detaljer (f.eks. De lidt bøjede hjørner af hvert stykke) giver det hele en moderne skråning. Kombinerer den nye og den gamle. Måske elske det.

Traditionelle aspekter:

Trimmet væk unødvendige elementer.
Levende farver på hjemmesiden og i overskriften på de sekundære sider tilføjer en levende accent til den grå baggrund.
Informationshierarkiet er stærkt, og det er også den generelle strøm af webstedet.

Web 2.0 forbedringer:

Fantastisk præsentation af porteføljebillederne; dropshadows, upturned kanter og små detaljer virkelig bringe dette websted til en højere standard.
Nice gradient i baggrunden præsenterer virkelig informationen godt.
Stor type og overdimensionerede billeder er venlige for øjnene.
Meget cool navigationsløsning.

19. Kyan Media

Kyan Media er et andet websted, der læner sig stærkt på Web 2.0-siden af spektret. Sky design og den pulserende blå farvepalet er lige ud af bogen, men det er et ekstremt stærkt eksempel på standarden.

Webstedet spiller det lige, og i store bogstaver fortæller dig præcis, hvad de gør, efterfulgt af eksempler på arbejdet. Det er en simpel designstrategi, der findes på utallige steder, og med god grund. Det er hurtigt og truer ikke med en kort opmærksomhed.

Og ligesom alle gode eksempler omfatter det teknologien såvel som det gør traditionelle designregler. Tag lidt tid og svinge over eksemplerne på arbejde. Det er en sjov og informativ måde at præsentere udvalgt portefølje stykker på, og giver os, brugeren, mulighed for at grave dybere, eller for at få det grundlæggende med et enkelt overblik.

Traditionelle aspekter:

Alt har en ekstremt solid fornemmelse.
Generelle layout på hver side er stærk
Informationshierarkiet er fantastisk.
Skrifttyper, overskrifter og skrifttyper er ensartede i hele.

Web 2.0 forbedringer:

Lyseblå farvepalet.
Sjov brug af illustration (hvem kan ikke lide skyer?).
Strålende fotografering.
God implementering af teknologi.
Subtile dropshadows tilføje dybde.
Meget læselige skrifttyper og store overskrifter.

20. Rockatee

Nå siger det "Funktionelt design" i overskriften, så det havde bedre arbejde, right? Heldigvis gør dette websted. Det er et andet eksempel på, hvordan tekstur kryber ind på webdesignmarkedet og bekræfter forestillingen om, at vi har det godt i højhastighedstiden med at surfe på internettet.

Noget du måske bemærker er, at Rockatee har få projekter på displayet i porteføljesektionen, så en strømlinet løsning var helt sikkert i orden. De gjorde det med en række snapshots, som viser dybden af deres produktive portefølje. Gør dig selv en tjeneste og tjek den ud.

Et andet træk ved notatet er den gode navigation. Det er godt placeret og gør webstedet til en let at klikke igennem. De hjælper dig selv sammen på hjemmesiden med en dejlig stor knap, der fører til porteføljen.

Traditionelle aspekter:

Alt har en ekstremt solid fornemmelse.
Generelle layout på hver side er stærk.
Farve teori er godt udforsket og implementeret.
Stærke opmærksomhed på detaljer.

Web 2.0 forbedringer:

Fantastisk navigation.
Store knapper fører dig til de vigtige bits.
Cool "snapshot" portefølje med store afgrøder af de enkelte værker.
Site viser designerne mange sideprojekter, men lader dem ikke komme i vejen for de centrale elementer.
God ide med tidslinjen på siden "Om".

21. Ting der er brune

En anden af mine personlige favoritter er ting der er brune. De trækker et ekstremt poleret websted, der er lig med (eller bedre end) websteder skabt af store agenturer, men de giver dig også et indvendigt kig på folkene bag kulisserne.

Den omkringliggende side indeholder fantastisk fotografi, der også professionelt nok har en meget hjemmelavet appel. Du kan fortælle, at holdet tog en tur udenfor, undersøgte et anstændigt sted og tog et par snapshots med deres egne digitale kameraer.

Et professionelt, men alligevel tilgængeligt og venligt team er præcis den type team, jeg vil arbejde med. Disse mennesker er virkelige.

Dette er en af de sjældne steder, der smidigt fusionerer stærke designregler med moderne tweaks. Deres tagline, "Humbly Awesome," er død på.

Traditionelle aspekter:

Nice farve med store accenter.
God brug af illustrationer, der integrerer godt.
Solid og konsistent hele vejen igennem.

Web 2.0 forbedringer:

Navigation er ren og nem at læse.
Smukke knapper, der ikke overdriver glansen.
Fotografering er personlig og tilføjer en menneskelig berøring til webstedet.
Porteføljen er klar og nem at navigere med god præsentation af arbejdet.
Overskrifter er store, men alligevel sofistikerede.

22. Andrew Bradshaw

Dette er måske en af de mest sofistikerede steder på listen. Andrew har en god måde at indrette tekstur, type, knapper og fotografering på i en kongealed pakke. Han holder også hierarkiet i tankerne og fremhæver de vigtige aspekter og minimerer de sektioner, der måske ikke er af interesse for alle brugere.

Navigationen er en højdepunkt, med varierende farver, der vises som du svæver over fanerne; en meget slank touch.

Også notatet er den teksturerede overskrift og det stærke skrifttypevalg, der anvendes i hans logo. Igen kombinerer Andrew subtilitet og accenter for at skabe et smukt websted, der er grundigt og overbevisende hele vejen igennem.

Traditionelle aspekter:

Samlet appel af ren raffinement.
God brug af accentelementer, både i farve og med type.
Som normalt holder et stærkt gittersystem sammen.
Hierarkiet gennemføres godt.

Web 2.0 forbedringer:

Et andet tag på knapper.
Strålende brug af fotografering og billedpræsentation.
Fantastiske detaljer i navigationen.

23. james lai

I sidste øjeblik har jeg en ting til single page websites, og som du sikkert har gættet, er jeg også en sucker for tekstur. Indtast James Lai, en designer, der ved, hvordan han kan præsentere sig gennem en fabelagtig brug af type, tekstur og animation.

Det, jeg bedømmer ham mest, er hans evne til at holde sit websted til en enkelt side og tilgive os siden "All About Me" på næsten alle websteder. Selv om jeg lægger stor vægt på det menneskelige element, taler arbejdet for sig selv, og jeg kan ikke fejl en fyr for at tro på sit eget færdighedssæt.

Traditionelle aspekter:

Enkel, enkelt-sidet løsning.
Animation tilføjer interesse for præsentationen (selv om det sænkede webstedet lidt på min ende).
God opmærksomhed på detaljer.

Web 2.0 forbedringer:

Kæmpe type på hjemmesiden fortæller dig det nøjagtige formål bag webstedet.
Kontaktoplysninger er nemme at finde.
Cool miniaturer hjælper brugere med at navigere i porteføljen.
Interessant brug af tekstur.

24. Subvert

Subvert blev inkluderet ikke kun for dets naturligvis funktionelle layout, men for det falmede lysbilledshow, der blev vist på hjemmesiden. Præsentationen er sjov, men den er også informativ og værdifuld for potentielle kunder.

Baggrundsstrukturen komplimenteres af gennemsigtige detaljer, herunder et fantastisk navigationssystem med gennemsigtige faner! Denne navigations status er svag og holder gennemsigtigheden.

Jeg har tendens til at navigere direkte til arbejdssiderne på disse websteder, og Subvert skuffer ikke i sin præsentation. Gitterstrukturen er stærk og nem at navigere, og ved klik bliver brugeren taget til et udvidet billede af arbejdet.

Traditionelle aspekter:

Stor samlet strømning.
Stærk præsentation af porteføljen på siden "Work".

Web 2.0 forbedringer:

Kæmpe type præsenteret på et falende lysbilledshow.
Gennemsigtige navigationsfaner!
Knapperne er gode og tilføjer en god kontrast til baggrunde.
Slideshow af kontoret på siden "Firma" er et godt strejf.
Omgiver teknologi.

25. Yellow Bird Project

Ved første øjekast kan dette websted virke lidt disheveled eller spredt, men jo mere jeg ser på det, og jo mere jeg blader gennem siderne, desto mere har jeg bemærket styrken af sin organisation. Endnu bedre begynder det indie-inspirerede design at appellere jo længere opholdet, og det spredte udseende af webstedet passer faktisk til temaet.

Hvis du tjekker fotogalleriet, kan du se en masse amatørbilleder, der igen føjer til Indie look, mens du viser produktet.

Denne form for underjordiske tilgang, som blev populær blandt websteder som threadless.com, lægger straks seeren på produktet.

De ønsker at være en del af mængden og føler ikke som om nogen bare forsøger at sælge dem noget. Hvis det ikke er en Web 2.0 filosofi, er jeg ikke sikker på hvad der er.

Traditionelle aspekter:

Crafty logo virkelig skaber den følelse, som udføres over hele webstedet.
Selvom det føles spredt eller løs ved første, indser man, at dette "sat sammen" udseende er præcis, hvad designerne gik til. De trækker kigget ud, men gør det stadig nemt at navigere.
Konsekvent, ikke-traditionel tilgang.

Web 2.0 forbedringer:

Det handler mere om filosofien med denne. Mens det sociale aspekt af Web 2.0 er i fuld effekt, er dette websted også gjort stærkt på grund af dets viral marketing tilgang og stor underliggende filantropi.
Bygger et fællesskab!
Gode billeder og nem navigation gør heller ikke skade.

I lukning ...

Web 2.0 er en hård standard til at definere , som hvor traditionelle designstandarder er en stiv samling af regler og retningslinjer (gitterstruktur, farve teori, brevafstand, kerning, sporing osv.), Web 2.0, med tilsvarende standarder, er næsten mere sådan en livsstil.

Det kombinerer filosofi, markedsføring, teknologi, brugervenlighed og utallige andre aspekter af vores travle univers med et ultimativt mål at gøre tingene lettere for masserne.

I den henseende er Web 2.0 og de traditionelle regler, der blev etableret for mange år siden, delvist det samme mål: At organisere kaoset og forenkle komplekset .

I disse dage kan det være en hård optagelse, så vi har brug for alle de værktøjer, vi har til rådighed, om de er spændende, eller om de er blevet bevist i århundreder tidligere.

Skrevet udelukkende til WDD af Josh Sears. Han er en forfatter, illustratør og designer for en masse web-baserede projekter. Han lever som Lead Web Designer, Creative Director og Co-Owner of Littlelines.com . Du kan tjek hans arbejde her , eller Følg hans opdateringer på Twitter .

Hvordan bruger du web 2.0 elementer med traditionelt design? Del venligst eksempler fra din egen portefølje eller andre gode eksempler, som du måske har stødt på.

design regler kompilering af design traditionel web 2.0