25 Voorbeelden van Web 2.0 en traditionele ontwerpregels die samenkomen

In de grote omvang van de ontwerpwereld is de term 'Web 2.0' relatief nieuw.

Daarmee komt zijn eigen set van standaarden, sommige sterk, andere niet zo sterk, omdat Web 2.0 op zich een zeer wispelturige, altijd evoluerende definitie van ontwerpstandaarden is .

Talloze voorbeelden van Web 2.0-sites hebben de regels overtreden van wat ooit als een sterk ontwerp werd beschouwd.

Aan de andere kant heeft Web 2.0 in veel gevallen veel voorkomende ontwerpmisomgevingen versterkt; het legt de nadruk op bruikbaarheid, interface en leesbaarheid .

Op zijn best staat Web 2.0 als een equivalent van de traditionele ontwerpregels die eeuwenlang zijn toegepast, hoewel het ongetwijfeld een weerspiegeling is van onze samenleving in haar huidige staat van drukte.

Hier is een verzameling van 25 sites die laten zien hoe Web 2.0 en traditionele ontwerppraktijken samen kunnen komen om werkelijk verbluffende websites te maken.

1. Pixel Matrix-ontwerp

Josh Pyles is een aardige vent en hij is ook een fantastische, gedisciplineerde ontwerper. Zijn nieuwste versie van Pixel Matrix is een knaller en maakt vooral goed gebruik van kleur en een sterk rastersysteem. Blader door zijn portfolio en je zult zien dat hij deze oefening in zijn klantenwerk verwerkt.

Als je de "Over" -pagina bekijkt (let op het leuke tabsysteem in het spel), kun je zien dat Josh een mooie foto van zijn werkruimte heeft toegevoegd.

Onder deze opname bevindt zich een geweldige balans tussen Web 2.0-stijl lettertypen, die een extreem sterke hiërarchie van informatie vormen. Hij houdt zijn eigen bio klein en verstopt zich in de zijbalk en brengt de grotere tekst van het inhoudsgebied in evenwicht met een kleiner, geavanceerd type in de zijbalk.

Traditionele aspecten:

Geweldig rastersysteem.
Prachtige kleurentheorie
Sterke informatiehiërarchie

Web 2.0-verbeteringen:

Mooie hellingen.
Subtiele details.
Grote, goed leesbare lettertypekeuzes.
Een groot aantal manieren om verbonden te blijven.
Zelfs het contactformulier heeft een mooie implementatie van afgeronde hoeken!

2. MuttInk

De laatste tijd lijkt texture het leukste te zijn sinds afgeronde hoeken, en hoewel de site van MuttInk misschien niet als standaard Web 2.0 wordt geclassificeerd, is één oogopslag alles wat nodig is om te weten dat Jeremy Holmes (de man achter het werk) een geweldige ontwerper en grafisch kunstenaar is .

Een aandacht voor detail, textuur en een sterke identiteit plaatsen dit als een persoonlijke favoriet.

Hoewel de dagen van overdreven gedempte kleuren enigszins achter ons liggen (wat naar mijn mening een goede zaak is), ben ik nog steeds een fan van subtiele aardachtige tonen die worden aangevuld met heldere accenten, en MuttInk heeft dit op briljante wijze uitgespeeld .

Het turquoise bovenop de beige komt echt tevoorschijn en behoudt het "tekentafelgevoel" dat de site doordringt. En hoewel het type aan de kleine kant is en een beetje moeilijk om te lezen op plekken, ziet het er nog steeds geweldig uit op de pagina.

Traditionele aspecten:

Zeer veel aandacht voor detail.
Aardig type (hoewel misschien te klein).
Geweldige merkidentiteit.
Veel gebruik van de ruimte, met name op de portfoliopagina's.

Web 2.0-verbeteringen:

Geweldig gebruik van textuur.
Grote, professionele afbeeldingen van het werk.
Snelle toegang tot sociale koppeling.

3. 45 Royale

Het portfolio op Royale 45 laat niet alleen een verbazingwekkende hoeveelheid werk zien, maar het laat ook zien dat het team achter de site goed gebruik van meerdere ontwerpstandaarden begrijpt. Het is een fantastische mix van Web 2.0-fallbacks, maar heeft een solide basis in traditionele ontwerpstandaarden (en kijk alleen naar die kleuren!).

In het bijzonder heeft 45 Royale een van de beste rastersystemen die ik de laatste tijd heb gezien en de afbeeldingen die ze hebben gekozen om het werk te laten zien, passen echt goed in de bovenstaande fluorescerende gekleurde kop.

Het is altijd een traktatie om de kleurentheorie en -organisatie met zoveel harmonie te combineren, en ze hebben het allemaal aangevuld met een zeer geavanceerde combinatie van lettertypen, zowel groot als klein.

Heldere kleuren rondom een secundair palet van grijs, wit en zwart? Geweldig.

Traditionele aspecten:

Een van de betere voorbeelden van een rastersysteem.
Veel spaties en ademruimte.
Briljante kleurenkeuze.
Goede informatiestroom.

Web 2.0-verbeteringen:

De kleuren zingen eenvoudigweg ... zoveel dat ik het in beide categorieën heb vermeld.
Jumbo-formaat is goed leesbaar, maar smaakvol.
Veel gebruik van illustratie en afbeeldingen.
Veel projecten zijn goed georganiseerd en mooi weergegeven.

4. Knijp in de Zoom

Ik ben een sucker voor geweldige illustratie, vooral als het wordt gepresenteerd bovenop een prachtig voorbeeld van witte ruimte. Ik ben dol op deze site dat het gewoon geweldig is om door de portfolio te klikken. Fantastische witruimte, geweldig rastersysteem en geweldig gebruik van JavaScript; deze dingen hebben een manier om met mij te praten (ja, ik sta voor een computer).

Het belangrijkste om in gedachten te houden wanneer we geconfronteerd worden met de vele technologieën die tegenwoordig beschikbaar zijn, met name de chique fades en bedrog die mogelijk worden gemaakt door JavaScript, is om ze te versmallen en te regisseren.

Denk aan het einde van de jaren negentig toen Flash al de rage was? Weet je nog hoe ziek van Flash we allemaal achteraf kregen? Goede Web 2.0-standaarden gaan net zozeer over discipline als over ontwerp, en Pinch Zoom heeft het goed onder controle.

Ze strooien hun site met de luxe goedheid, maar houden het mager en leuk, met vrijwel nul tijd te wachten op de beelden.

Traditionele aspecten:

Nog een geweldig rastersysteem (zie je hier een patroon?).
Zwart op wit lijkt nooit oud te worden.
Mooie balans tussen lettertypen en koppen. (Het kleine lettertype, hoewel leesbaar, kan een puntgrootte of twee groter zijn).

Web 2.0-verbeteringen:

De JavaScript-portefeuilleschuiver is dang leuk en effectief.
Interface is minimalistisch en direct.
Gevarieerd gebruik van illustratie is een goed idee.
Omarmt de huidige technologie van het web zonder omslachtig te worden.
Unieke oplossingen voor paginalay-out (bekijk de mega-dropdown bij het klikken op het infotabblad Er is vrijwel een hele website verborgen!).

5. Cameron Moll

Ik ben altijd een fan geweest van het werk van Cameron, en zoals je kunt zien is hij geneigd om aan de traditionele kant van het design-speelveld te blijven. Hoewel zijn blogsite de neiging heeft om binnen de traditionele kant van verfijnd ontwerp en kleine lettertypen te vallen, is de elegantie en schoonheid van zijn portfolio-pagina niet te ontkennen, wat een fantastische balans is tussen nieuw en traditioneel.

De kleuren zijn levendig en de lettertype-instellingen passen in het algemene gevoel, maar nogmaals, het type kan op plaatsen vrij klein worden, wat een Web 2.0-nee-nee is. Maar wie ben ik om te kiezen? Cameron heeft veel succes gevonden en is de man achter Authenticjobs.com, een geweldige bron voor ontwerpers (en een die heeft geholpen mijn rekeningen te betalen).

Traditionele aspecten:

Goed gestructureerde inhoud.
Subtiele kleurvariaties zijn een leuke touch.
Type ziet er elegant uit, maar heeft de neiging om aan de kleine kant van het spectrum te rijden. Toch is het leesbaar en ziet het er goed uit.

Web 2.0-verbeteringen:

Heel leuk gebruik van textuur.
Portfolio bevat mooie afbeeldingen van het werk, die heel eenvoudig en gemakkelijk te navigeren zijn.

6. Metalab's "Fluid" Tumblr-thema

Het enige Tumblr-thema om de lijst te maken heeft de titel "Fluid," door Metalab design. Het maakte de lijst om een eenvoudige reden: het is een fantastisch mooi voorbeeld van Web 2.0 op zijn best. Eenvoudig, schoon en glanzend met kleur.

Men zou het een beetje eenzijdig kunnen beschouwen in deze vergelijking (het is een vangnet voor Web 2.0). Dat komt omdat Metalab bekend staat om het stellen van standaarden in de Web 2.0-arena, en deze site is een bewijs van dat feit. Metalab Design houdt echter de basisregels in het oog en houdt de structuur eenvoudig en overzichtelijk.

Transparantie en overlappende afbeeldingen zijn een van de nieuwere trends in Web 2.0. Ze geven een site een grote hoeveelheid diepte en doordringen een baanbrekende, bijna futuristische look. Metalabs 'Fluid' heeft dit concept omarmd en, nog beter, als een downloadbaar thema aan de massa afgeleverd.

Traditionele aspecten:

Eenvoudige, effectieve structuur.
Onderscheidt zich in de massa's van Tumblr-thema's.
Eigentijds (hoewel eenvoudig) kleurenschema.

Web 2.0-verbeteringen:

Grote, levendige fotografie.
Verbetert de ante voor het nieuwste Web 2.0-ontwerp
Goed leesbare lettertypen en kopteksten.
Het gebruik van afgeronde hoeken en hellingen wordt tot het uiterste doorgevoerd, maar ze worden gepresenteerd in een leuke, moderne Web 2.0-oplossing.
Pictogrammen zijn een geweldige, minimalistische manier om door de opties voor elk bericht te navigeren.
Laten we de transparante achtergronden niet vergeten!

7. Viget

Oh jongen. Deze site. Ik krijg er elke keer weer last van. Natuurlijk ben ik een softy voor textuur, maar deze ontwerper heeft ook de subtiliteit van goede kleurentheorie en hiërarchie vastgelegd.

Ik bedoel, kijk eens naar die portretten in de buurt van de bodem! Ze vallen in het oog, maar ze concurreren niet met wat een zeer gecompliceerde ontwerpstroom zou kunnen zijn. Laten we de geweldige lettertype-keuzes en het aquarelgevoel niet vergeten. De kers op de taart is dat, hoewel de site beeld-zwaar is, deze in een handomdraai laadt!

Een ander cool aspect van deze site is dat de ontwerpers veel informatie met hun community willen delen, en het is geen informatie die ze als ontwerpers verkoopt, maar informatie waarvan zij vinden dat typische gebruikers waardevol kunnen zijn.

Ze laten je dieper graven zonder hun behoeften in je keel te proppen, wat altijd een welkome oefening is.

Traditionele aspecten:

Goed gestructureerde inhoud.
Mooie kleur en type.
Hoewel de lettertypen aan de kleine kant zijn, is de hoofdinhoud nog steeds gemakkelijk te lezen.
Geweldig artwork versmelt naadloos in het ontwerp (coole portretten).

Web 2.0-verbeteringen:

Het aquarelthema is uiterst eigentijds en hoewel het beeldzwaar is, is het ontworpen om lean en mean te laden.
De inhoud van de zijbalk is goed georganiseerd en inhoudsgestuurd.
Unieke oplossing voor het vak "Speech Bubble" in de zijbalk.
Veel gedeelde, inhoudsgestuurde informatie.

8. FeelWire

Een ander geweldig voorbeeld van geweldige witruimte is Feelwire. Zwart type op een witte achtergrond, met grote grijstinten er tussenin, lijkt nooit oud te worden. Voeg een paar felgekleurde pictogrammen toe en je hebt een eenvoudige, maar effectieve site. Hier draait alles om eenvoud (ze hebben maar één pagina!).

De Web 2.0 gestileerde pictogrammen dienen als middelpunt voor deze pagina en ze gaan een lange weg in het bij elkaar houden van de site. Ze voorkomen ook dat de site wordt overspoeld met tekst en geven de gebruiker iets om nieuwsgierig naar te zijn.

Bij het omrollen van deze pictogrammen, was ik erg blij met wat ik vond: een zeer eenvoudige zweefstatus die me de informatie gaf waarnaar ik op zoek was, dit met de immer populaire Web 2.0 "Speech Bubble". Een geweldige touch.

Laatste punt: hoewel ik de rode links, die ook van de pagina komen en de pictogrammen goed gebruiken, leuk vind, vind ik dat ze de contactlink een beetje meer opvallen. Vanaf nu is het een beetje te verstopt in de inhoud en moest ik echt op zoek naar een manier om in contact te komen met deze getalenteerde ontwikkelaars. Ik bedoel maar'.

Traditionele aspecten:

Kort, krachtig en to the point: een site met één pagina.
Witte ruimte!
Subtiele, smaakvolle lettertype-keuzes.
Leuke, eenvoudige lay-out.

Web 2.0-verbeteringen:

De glanzende pictogrammen springen op een goede manier van de pagina.
Echt coole rollovers op de pictogrammen houden de site overzichtelijk, maar geven je op een leuke manier de informatie die je nodig hebt.
Leuke avatars voegen een menselijk element toe.

9. Agami Creative

Oké, misschien is het gewoon iets persoonlijks met deze zeer gestructureerde sites, maar wat Agami Creative doet, het doet het heel goed. Het is een ander hedendaags voorbeeld van hoe beeldzware sites een perfect acceptabele oplossing kunnen worden in een dag van snelle verbindingen.

Het middelpunt van deze site is absoluut de aquarel header, die dient als een perfecte achtergrond voor de sluwe logo-ontwerp. Het bevat ook de navigatie, waarbij net voldoende nadruk wordt gelegd op de locatie, maar zonder de gebruiker te beledigen (omdat de meeste mensen tegenwoordig weten waar ze de navigatie kunnen vinden).

Als u naar de portfolio-pagina klikt, ziet u een lay-out met de perfecte hoeveelheid ademruimte en een sterk rastersysteem.

Eenvoudige afbeeldingen dragen bij aan het werk en trekken uw aandacht naar de afzonderlijke projecten, zoals door een sleutelgat naar het eindresultaat kijken. Dit alles is ingepakt met een verfijnd serif-lettertype voor de koppen en een goed leesbaar schreefloos lettertype voor de hoofdtekst.

Traditionele aspecten:

Mooier gebruik van kleurentheorie.
Geweldig kunstwerk.
Interessante combinatie van type / lettertypen.
Artistiek, met de hand getekend logo heeft een uitstraling die door de hele site wordt gedragen.

Web 2.0-verbeteringen:

Overmaatse navigatie maakt het gemakkelijk om door de site te bewegen.
Ze maken het heel gemakkelijk om contact te maken.
Het gebruik van avatars is een goed idee (hoewel ik eerlijk gezegd denk dat ze het beter hadden kunnen doen.) Weet je niet zeker hoe de anime-look verondersteld wordt in deze site te passen, behalve de Aziatische invloed?).
Ik hou van de textuur!

10. Adit Shukla

Een andere site met een geweldige illustratieve aanpak, Designer Adit Shukla weet ook hoe je een geweldig kleurenschema samenstelt en speelt zelfs met een mooie oplossing voor de zijbalk.

Om een vreemde reden zijn veel zijbalken slordig en over het hoofd gezien, alsof ontwerpers toestemming hebben om de regels van goed ontwerp te negeren bij het samengooien van de zijbalk van een site. Niet met deze site.

Hoewel de inhoud minimaal is (zelfs een beetje schaars), kan men niet anders dan houden van de creativiteit, vooral in de illustratieve koptekst, die een broodnodige hoeveelheid diepte toevoegt. De navigatie-tabbladen boven zijn ook een leuke touch.

Traditionele aspecten:

Levendige kleuren.
Creatieve oplossingen voor algemene elementen, zoals de zijbalk en de koptekst.
Illustratie voegt veel diepte toe.

Web 2.0-verbeteringen:

Eenvoudige lay-out met een goed ontwikkelde koptekstillustratie, waarin ook de navigatie is ondergebracht.
Groot type is effectief.
Meerdere manieren om door de site te navigeren (hoewel eerlijk gezegd ben ik er niet van overtuigd dat dit zo goed is).
Transparante tabbladen zijn een leuke touch.

12. Cream Scoop

Het eerste dat je opvalt aan Cream Scoop is de gedurfde selectie kleuren die op de hele site wordt gebruikt. Ze zijn niet bang om de kleuren een tandje hoger te krijgen dan de norm, en het resultaat is even verfrissend als anders.

Hoewel de kleuren vet zijn, zijn er ook subtiele melanges van een sterk type en hellingen die door de hele site zijn gepeperd. Merk op hoe de achtergrondgradiënt aan de bovenkant helderder wordt, zoals de rand van een spot, om de overigens minimale navigatie te markeren. Het type is goed georganiseerd en gebalanceerd, met een duidelijk Web 2.0-gevoel.

Traditionele aspecten:

Gewaagde selectie van kleuren, maar een selectie die op verrassend effectieve manieren werkt.
Minimalistische navigatie die de klus klaart.
Groot gebruik van speelse illustratie.
Lay-out is gestructureerd maar leuk.

Web 2.0-verbeteringen:

Fantastisch gebruik van een verloop op de achtergrond.
Helderblauw pakt echt je aandacht en leidt het naar de belangrijke dingen.
Cool gebruik van avatars op de ongeveer pagina (hoe oud zijn deze jongens?).
Grote lettertypen die overal worden gebruikt.

13. Carbonica

Carbonica gaat voorbij aan de gradiënten en de glinsterende goedheid van Web 2.0 en gaat voor een "samengevoegde" look die doet denken aan een plakboek. Geweldig gebruik van textuur en animatie, maar ook een heel leuk beeld van handgetekende letters.

Zorg ervoor dat u een beetje naar beneden scrolt en bekijk de pictogrammen die ook perfect bij het thema passen!

Traditionele aspecten:

De basisstructuur is in het spel.
Met de hand gemaakte belettering gaat goed samen met het thema van de site.
De animatie is een leuke touch (maar sorry, het gebruik van Flash houdt dit punt buiten de Web 2.0-categorie).

Web 2.0-verbeteringen:

De textuur is geweldig.
Slagschaduwen voegen realistische diepte toe.
Leuke pictogrammen, foto's en illustratie.

14. DSGN + DVLP

Opnieuw werkt het algemene zwart-witte kleurenschema voor deze site, en ze accentueren deze richting met enkele schone pictogrammen die rechtstreeks uit de Web 2.0 handtas getrokken worden.

De startpagina staat als een soort splash-pagina op zichzelf en heeft een goede mix van pictogrammen, een sterke lay-out en zelfs een beetje fotografie. Al deze elementen komen op een verfijnde manier samen en slagen erin behoorlijk wat energie uit te stoten.

U zult opmerken dat de secundaire pagina's een afzonderlijke sjabloon met 3 kolommen gebruiken om de informatie op te dienen. Het is allemaal een minimalistisch ontwerp, maar dat is niet erg.

Traditionele aspecten:

Zwart, wit en grijs bieden een uitgesproken gevoel.
Goede balans van type op de startpagina.
Een paginasjabloon met 3 kolommen maakt een consistente informatiestroom mogelijk als u eenmaal weg navigeert van de startpagina.

Web 2.0-verbeteringen:

Bewustwording van sociale media is zeker in het spel.
Glanzende pictogrammen die overal zijn verspreid, hebben de gewenste kleur nodig.
Goede mix van fotografie en pictogrammen.
Jumbo-pictogrammen worden op de secundaire pagina's weergegeven.

15. Marchand de Trucs

Dus misschien kan ik de taal niet spreken, maar dat betekent niet dat de site nog steeds niet tegen me praat ... Oké, die lijn was zwak, maar toch is deze site best wel lief. Het bevat prachtige kunstwerken en, achter de rug, een geweldige basis en gestructureerde inhoud. Niet zo erg voor wat (denk ik) een online goochelshop lijkt te zijn!

Traditionele aspecten:

Intense aandacht voor detail.
Kleurtheorie is goed in het spel, en het is een zeer betrokken palet.
Goed gebruik van lettertypen die het algemene thema van de site volgen.

Web 2.0-verbeteringen:

Zeer aardig gebruik van illustratie als koptekst
Relatief grote pictogrammen.

16. Paiko

Paiko is, hoewel eenvoudig, een van mijn favoriete sites op de lijst. Het komt over als een gesplitste mix van traditionele ontwerpnietjes en Web 2.0-verbeteringen: een goed type van alle formaten (inclusief de zeer grote mega-headlines van Web 2.0), grote witruimten en natuurlijk het altijd belangrijke raster dat alles bij elkaar houdt.

De keuze voor het toevoegen van textuur op de achtergrond maakt de site echt apart en voegt een nieuwe laag toe aan het toch al sterke ontwerp; het wordt met zorg behandeld en niet overdreven gebruikt zoals het op sommige sites voorkomt. Deze textuur, gecombineerd met de meer verfijnde uitstraling van de site, helpt de identiteit van Paiko versterken.

Blader naar de portfolio-pagina om een voorbeeld van grote spatiëring en rasterstructuur te zien, om nog maar te zwijgen van enkele leuke voorbeelden van goed bijgesneden afbeeldingen.

Traditionele aspecten:

Eenvoudige, tweekoloms-rasterstructuur met gootruimte die het een prettig luchtig gevoel geeft. Deze structuur wordt door de hele site heen gedragen, waardoor deze een zeer consistente stroom krijgt.
Een sluw gevoel geeft een leuke touch, zonder aanmatigend te zijn.
Lettertypevariaties en kleur zijn zeer geavanceerd.

Web 2.0-verbeteringen:

Jumbo-text!
De kop is enorm en goed leesbaar en speelt mooi af tegen het kleinere type hieronder.
Geweldige afbeeldingen en lay-out op de portfolio-pagina.
Conservatief gebruik van textuur draagt bij aan de algehele identiteit.

17. Matt Dempsey

Aan de andere kant van het textuurspectrum hebben we een site van Matt Dempsey. Nu is er zeker iets te veel textuur, en sommige zouden een geldig punt hebben als ze beweerden dat deze site te ver gaat.

Ik vind het echter nog steeds leuk en de details wonnen me toen ik begon met het doorspitten van de informatie. Matt is niet bang om een paar regels te overtreden die me altijd hebben dwarsgezeten (zoals het houden van informatie boven de vouw, een idee dat volgens mij werd uitgevonden tijdens een rondetafeldiscussie over marketingmensen die te veel denken.) Ik zeg het omdat ik er ooit één was van die marketingmensen.).

Als het erop aankomt, presenteert Matt Dempsey zijn werk en zijn site op een gedurfde en 'in your face'-manier. En het overtreden van een paar regels is waar het om draait bij een ontwerper, of de regels nu oud of nieuw zijn.

Traditionele aspecten:

Geloof het of niet, er is een eenvoudig rastersysteem dat ten grondslag ligt aan de textuur.
Onderscheidend en uniek
Niet bang om een paar regels te overtreden

Web 2.0-verbeteringen:

Matt gebruikt een duidelijk Web 2.0-benadering voor zijn lettertypen en logo
Goed gebruik van technologie op de binnenpagina's (de JavaScript-schuifregelaar is een leuke touch).
Alle belangrijke informatie is enorm en gemakkelijk te lezen.
Portfolio presenteert het werk op een leuke, hightech manier.

18. Digital Mash

Met Digital Mash kun je zien dat er veel aandacht is besteed aan de items die ze op de site wilden opnemen, of beter nog, de items die ze wilden weglaten.

In staat zijn om het vet te verminderen is een belangrijke oefening voor elke ontwerper, en Digital Mash legt de basis en alleen de basis. Open de pagina en u weet binnen enkele seconden waar de auteur van de site over gaat.

Het vloeiende verloop van de achtergrond levert een uitstekende bijdrage aan het op een verfijnde manier presenteren van de inhoud. Van het schone type tot de pittige afbeelding van de illustratie, de site houdt het simpel.

Het beste deel moet zijn als je dieper de site induikt. Ga naar de werkpagina en je zult een portefeuille vinden die op een bijna ouderwetse manier wordt gepresenteerd; de afzonderlijke stukken zien eruit alsof ze klaar zijn om te worden afgedrukt en in een leren attachékoffer te worden gebonden.

De strakke presentatie, de dropshadows en de kleine details (zoals de licht gebogen hoeken van elk stuk) geven het allemaal een eigentijdse inslag. Het nieuwe en het oude combineren. Moet ervan houden.

Traditionele aspecten:

Onnodige elementen weggewerkt.
Levendige kleuren op de startpagina en in de kop van de secundaire pagina's voegen een levendig accent toe aan de grijze achtergrond.
Hiërarchie van informatie is sterk, net als de algemene stroom van de site.

Web 2.0-verbeteringen:

Geweldige presentatie van de portfolio-afbeeldingen; dropshadows, opstaande randen en kleine details brengen deze site echt naar een hogere standaard.
Een mooi verloop op de achtergrond geeft de informatie echt goed weer.
Groot type en extra grote afbeeldingen zijn vriendelijk voor de ogen.
Zeer coole navigatie-oplossing.

19. Kyan Media

Kyan Media is een andere site die zwaar leunt op de Web 2.0-kant van het spectrum. Het cloudontwerp en het levendige blauwe kleurenpalet komen rechtstreeks uit het boek, maar het is een extreem sterk voorbeeld van de standaard.

De site speelt het meteen, en vertelt je in grote letters precies wat ze doen, gevolgd door voorbeelden van het werk. Het is een eenvoudige ontwerpstrategie die op talloze sites te vinden is, en met een goede reden. Het is snel en bedreigt geen korte aandachtsspanne.

En zoals alle goede voorbeelden, het omvat zowel de technologie als de traditionele ontwerpregels. Neem de tijd en zweef over de voorbeelden van werk. Het is een leuke en informatieve manier om aanbevolen portfolio-onderdelen te presenteren, en stelt ons als gebruiker in staat om dieper te graven of om de basis in één oogopslag te krijgen.

Traditionele aspecten:

Alles heeft een extreem solide gevoel.
De algemene lay-out van elke pagina is sterk
De informatiehiërarchie is geweldig.
Lettertypen, kopteksten en lettertypekleuren zijn overal consistent.

Web 2.0-verbeteringen:

Helder blauw kleurenpalet.
Leuk gebruik van illustratie (wie houdt er niet van wolken?).
Pittige fotografie.
Goede implementatie van technologie.
Subtiele dropshadows voegen diepte toe.
Goed leesbare lettertypen en te grote headers.

20. Rockatee

Wel, er staat "Functioneel ontwerp" in de kop, dus het heeft beter werk, toch? Gelukkig doet deze site dat. Het is een ander voorbeeld van hoe textuur de webdesignmarkt binnensluipt en bevestigt het idee dat we goed meewerken aan het supersnelle tijdperk van surfen op het web.

Iets dat je misschien opvalt, is dat Rockatee een behoorlijk aantal projecten in de portfolio-sectie liet zien, dus een gestroomlijnde oplossing was zeker in orde. Ze deden dit met een reeks snapshots, die de diepte van hun productieve portfolio laten zien. Doe jezelf een plezier en bekijk het.

Een ander kenmerk van noot is de aardige navigatie. Het is goed geplaatst en maakt de site een fluitje van een cent om doorheen te klikken. Ze helpen je zelfs op de startpagina met een mooie grote knop die naar de portfolio leidt.

Traditionele aspecten:

Alles heeft een extreem solide gevoel.
De algemene lay-out van elke pagina is sterk.
Kleurentheorie is goed verkend en geïmplementeerd.
Sterke aandacht voor detail.

Web 2.0-verbeteringen:

Fantastische navigatie.
Grote knoppen leiden je naar de belangrijke delen.
Coole "snapshot" -portfolio met grote gewassen van de afzonderlijke werken.
Site toont de ontwerpers vele zijprojecten, maar laat ze niet in de weg staan van de centrale elementen.
Geweldig idee met de tijdlijn op de "Over" -pagina.

21. Dingen die bruin zijn

Nog een van mijn persoonlijke favorieten is Things That Are Brown. Ze trekken een extreem gepolijste site af die gelijk is aan (of beter dan) sites gemaakt door grote organisaties, maar ze geven je ook een kijkje in de mensen achter de schermen.

De pagina over bevat geweldige fotografie die, hoewel professioneel genoeg, ook een zeer zelfgemaakte uitstraling heeft. Je kunt zien dat het team naar buiten is gegaan, een goede plek heeft gescout en een paar snapshots heeft gemaakt met hun eigen digitale camera's.

Een professioneel, maar toegankelijk en vriendelijk team is precies het type team waarmee ik wil werken. Deze mensen zijn echt.

Dit is een van die zeldzame sites die sterke ontwerpregels naadloos combineert met moderne aanpassingen. Hun slogan, "Humbly Awesome," is dodelijk.

Traditionele aspecten:

Mooie kleur met geweldige accenten.
Goed gebruik van illustraties die goed integreren.
Stevig en consistent overal.

Web 2.0-verbeteringen:

Navigatie is schoon en gemakkelijk te lezen.
Leuke knoppen die de glans niet overdrijven.
Fotografie is persoonlijk en geeft de site een menselijk tintje.
Het portfolio is duidelijk en gemakkelijk te navigeren, met een geweldige presentatie van het werk.
Krantenkoppen zijn groot en toch verfijnd.

22. Andrew Bradshaw

Dit is misschien een van de meest geavanceerde sites op de lijst. Andrew heeft een geweldige manier om textuur, type, knoppen en fotografie in een gestold pakket in te voegen. Hij houdt ook de hiërarchie in gedachten, accentueert de belangrijke aspecten en minimaliseert de secties die mogelijk niet van belang zijn voor alle gebruikers.

De navigatie is een hoogtepunt, met variërende kleuren die verschijnen terwijl u over de tabbladen beweegt; een zeer slanke aanraking.

Ook van belang is de gestructureerde koptekst en de sterke lettertype-keuze die in zijn logo wordt gebruikt. Nogmaals, Andrew combineert subtiliteit en accenten om een prachtige site te maken die grondig en overtuigend is.

Traditionele aspecten:

Algehele aantrekkingskracht van schone verfijning.
Goed gebruik van accentelementen, zowel in kleur als met type.
Zoals gewoonlijk houdt een sterk rastersysteem het bij elkaar.
Hiërarchie is goed geïmplementeerd.

Web 2.0-verbeteringen:

Een andere kijk op knoppen.
Briljant gebruik van fotografie en beeldpresentatie.
Fantastische details in de navigatie.

23. James Lai

De laatste tijd heb ik iets voor websites met één pagina, en zoals je waarschijnlijk al geraden hebt, ben ik ook een sukkel voor textuur. Voer James Lai in, een ontwerper die weet hoe hij zichzelf moet presenteren door een fraai gebruik van type, textuur en animatie.

Wat ik hem het meest aan hem waardeer, is zijn vermogen om zijn site op één pagina te houden en vergeef ons de pagina "Alles over mij" die op vrijwel elke site te vinden is. Hoewel ik veel waarde hecht aan het menselijke element, spreekt het werk soms voor zichzelf, en ik kan een persoon niet verwijten dat hij in zijn eigen vaardigheden heeft geloofd.

Traditionele aspecten:

Eenvoudige oplossing met één pagina.
Animatie voegt interesse toe aan de presentatie (hoewel het de site een beetje vertraagde aan mijn kant).
Goede aandacht voor detail.

Web 2.0-verbeteringen:

Enorm type op de startpagina vertelt u het exacte doel achter de site.
Contactgegevens zijn gemakkelijk te vinden.
Coole miniaturen helpen gebruikers bij het navigeren door de portfolio.
Interessant gebruik van textuur.

24. Subvert

Subvert is niet alleen opgenomen vanwege de duidelijk functionele indeling, maar ook voor de vervagende diavoorstelling op de startpagina. De presentatie is leuk, maar het is ook informatief en waardevol voor potentiële klanten.

De achtergrondstructuur wordt aangevuld door transparante details, waaronder een geweldig navigatiesysteem met transparante tabbladen! De zweefstatus van deze navigatie is subtiel en behoudt de transparantie.

Ik heb de neiging om direct naar de werkpagina's op deze sites te navigeren, en Subvert stelt niet teleur in zijn presentatie. De rasterstructuur is sterk en gemakkelijk te navigeren, en bij klikken wordt de gebruiker naar een uitgebreidere weergave van het werk geleid.

Traditionele aspecten:

Geweldige algemene flow.
Sterke presentatie van de portfolio op de pagina "Werk".

Web 2.0-verbeteringen:

Enorm type gepresenteerd op een flitsende diavoorstelling.
Transparante navigatietabs!
De knoppen zijn leuk en voegen een goed contrast toe aan de achtergronden.
Diavoorstelling van het kantoor op de "Bedrijf" -pagina is een leuke touch.
Omarmt technologie.

25. Yellow Bird-project

Op het eerste gezicht lijkt deze site misschien een beetje verward of verspreid, maar hoe meer ik ernaar kijk en hoe meer ik door de pagina's blader, hoe meer ik de kracht van de organisatie heb opgemerkt. Beter nog, het Indie-geïnspireerde ontwerp begint echt aantrekkelijker te worden naarmate het verblijf langer is en het verspreide uiterlijk van de site past eigenlijk in het thema.

Als je de Fotogalerij bekijkt, zie je een hoop amateurfoto's die opnieuw bijdragen aan de Indie-look, terwijl het product wordt gepresenteerd.

Dit soort ondergrondse aanpak, populair gemaakt door sites als threadless.com, verbindt de kijker onmiddellijk met het product.

Ze willen deel uitmaken van de menigte en hebben niet het gevoel dat iemand ze gewoon probeert iets te verkopen. Als dat geen Web 2.0-filosofie is, weet ik niet zeker wat dat is.

Traditionele aspecten:

Het Crafty-logo geeft echt het gevoel dat overal op de site wordt toegepast.
Hoewel het aanvankelijk verspreid of los voelt, realiseert men zich dat deze "in elkaar gezet" look precies is waar de ontwerpers voor gingen. Ze trekken de blik af en maken de site nog steeds gemakkelijk te navigeren.
Consistente, niet-traditionele aanpak.

Web 2.0-verbeteringen:

Het gaat meer om de filosofie met deze. Hoewel het sociale aspect van Web 2.0 volledig van kracht is, wordt deze site ook sterk gemaakt vanwege de virale marketingaanpak en de grote onderliggende filantropie.
Bouwt een community!
Geweldige foto's en eenvoudige navigatie doen ook geen pijn.

Tot slot ...

Web 2.0 is een strenge standaard om te definiëren , waar traditionele ontwerpstandaarden een rigide verzameling regels en richtlijnen zijn (rasterstructuur, kleurentheorie, letterspatiëring, kerning, tracking, enzovoort), terwijl Web 2.0 vergelijkbare normen bevat. bijna meer een manier van leven.

Het combineert filosofie, marketing, technologie, gebruiksgemak en talloze andere aspecten van ons drukke universum met als uiteindelijk doel het voor de massa's gemakkelijker te maken.

In dat opzicht hebben Web 2.0 en de traditionele regels die eeuwen geleden zijn opgesteld, uiteindelijk hetzelfde doel: de chaos organiseren en het complex vereenvoudigen .

Tegenwoordig kan het een zwaar optreden zijn, dus we hebben alle tools nodig die we tot onze beschikking hebben, of ze nu van topkwaliteit zijn, of dat ze al eeuwenlang bewezen zijn.

Exclusief geschreven voor WDD door Josh Sears. Hij is een schrijver, illustrator en ontwerper voor een hele reeks webgebaseerde projecten. Hij verdient zijn brood als Lead Web Designer, Creative Director en mede-eigenaar van Littlelines.com . Jij kan bekijk zijn werk hier of volg zijn updates op Twitter .

Hoe gebruik je web 2.0-elementen met traditioneel ontwerp? Geef voorbeelden van uw eigen portfolio of andere goede voorbeelden die u mogelijk bent tegengekomen.

ontwerpregels compilatie van ontwerpen traditioneel Web 2.0