Web 2.0 trends – farver, gradients, styles mm.

Web 2.0 trends – farver, gradients, styles mm.

Web 2.0 begrebet har længe floreret rundt på nettet, der har været utallige meninger om hvad dette begreb, som O’Reilly frembragte i 2004 til en konference, egentlig betyder.

I mine øjne er det oprindelige begreb møntet på hvordan vi brugere agere på internettet, det er blevet et meget mere socialt netværk end en direkte informationskilde. Vi skriver med vennerne, møder nye kærester, finder forretningskontakter og er selv med til at skabe en stor del af det vi i dag kender som Internettet.

Men Web 2.0 begrebet har også taget form af en bestemt design stil, selvom det måske ikke er 100% korrekt at bruge begrebet i sammenhæng med en designart/stil, så er det det folk bruger i dag. Vi bliver ofte ringet op af en potentiel kunde der ønsker et nyt website hvor designet skal være lidt web 2.0 agtigt.

Det jeg vil tage frem her i artiklen er hvad denne designstil så egentlig dækker, og hvor man kan finde noget mere inspiration hvis man vil peppe sit eget site lidt op.

Farvevalg

Hvor de dæmpede, rolige og klassiske farver før i tiden var fremme, så er denne web 2.0 stil meget mere præget af livlige farver, gerne med en masse kontrast. Pink, lime grøn, turkis etc.
Det lyder flot, og det ser også rigtig flot ud når man ser de sites hvor det er lykkedes, men hvor man før i tiden sjældent gik galt i byen hvis man benyttede en dyb kongeblå som Danske Bank f.eks.. Så kan det være utrolig svært med de nye farver.
Adobe udkom for noget tid siden med et utrolig stærkt værktøj til netop at matche farver op imod hinanden -  I bedste web 2.0 stil, lavede de oven i købet sitet sådan at man brugerne i mellem kunne fremvise deres farvekombinationer, giv dem en kommentar og lade brugerne skabe indholdet.
Du finder dette fremragende værktøj på http://kuler.adobe.com ( læg mærke til navnet kuler, igen et web 2.0 fænomen, navne behøver ikke betyde noget, de skal bare lyde smart – google, yahoo etc. )
Derudover har Miles Burke været ude og kigge lidt på de store succes fulde sites der følger denne stil, og set på hvilke farver disse bruger. Det er  blevet til en god pakke på 99 forskellige farver samlet i en photoshop swatches fil så de kan importeres direkte ind i photoshop.
 

Gradients

En anden ting som er et meget tydeligt kendetegn er gradients, eller på dansk farveovergange. De bruges rigtig mange steder, f.eks. på http://home.live.com/ hvor de kan tælles i stor stil.

Her gælder det egentlig bare om at blande nogle af de farver du har fundet på overstående links og lave nogle lækre effekter. Men igen har der siddet nogle gavmilde mennesker ude i den store verden og hjulpet os andre på vej.
http://www.dezinerfolio.com kan du hente en pakke med en helt masse lækre færdig lavede gradients lige til at smide ind i photoshop.  Herunder ser du et lille udsnit af dem.

På samme sites finder du ligeledes en pakke med layer styles, så du nemt kan lave flotte web 2.0 agtige knapper i photoshop. De findes her http://www.dezinerfolio.com/2007/05/06/ultimate-web-20-layer-styles/
Husk dog at vær kreativ, brug overstående som inspiration, lad være med bare at lave det med lukkede øjne og følge andres ideer.

Andre kendetegn

Nogle af de andre kendetegn ved web 2.0 stilen er at man anvender så kaldte badgets, stjerner og lign. Du har sikkert set dem overalt på nettet- Men brug dem varsomt, de er efterhånden blevet cliche agtigt i branchen og kan hurtigt give et dårligt indtryk. Når det er sagt så er det en rigtig spændende måde at fremhæve f.eks. en tilbudspris, eller andre spændende ting.

Brug ligeledes punchlines, gerne med en stor skrifftype og undgå for mange lange tekster, vi er efterhånden så internetvante at vi surfer fra det ene til det andet site og kun skimter sitet i nogle ganske få sekunder – så det er de første 5 sekunder der er kritiske hvor du skal fange dine besøgende.

Andre sites hvor du kan finde inspiration til web 2.0 stilen er følgende:

http://www.dezinerfolio.com/category/web-20/
http://www.smashingmagazine.com/
http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm
http://www.digital-web.com/articles/web_2_for_designers/
http://www.web20zen.com/index.php
http://www.go2web20.net/

Det var en brøkdel af hvad web 2.0 står for, jeg håber artiklen var med til at give dig lidt inspiration til at læse lidt videre på de rigtig mange sites der er ude i cyberspace med netop denne stilart.

7 kommentarer »

  1. avatar comment-top

    Web 2.0 design er også helt klart spejleffekten. (som egentlig også vises på Ultimate 2.0 billedet)..
    Kunne du ikke henvise til en god guide i at lave den effekt i photoshop ?
    (den er blevet en standard funktion i word 2007, og det er super nemt at bruge)

    comment-bottom
  2. avatar comment-top

    Hej Brian, ja du har helt ret, spejl effekten er også blevet meget populær.

    I stedet for at henvise til en anden kilde vil jeg i løbet af imorgen skrive et indlæg om hvordan denne laves, der er lidt forskellige metoder men i 90% af tilfældene er det meget simpelt.

    De sidste 10 vil jeg også komme ind på.

    comment-bottom
  3. avatar
    Martin Maglebjerg Siger:
    1. november 2007 at 10:36 PM
    comment-top

    Super godt Martin, det var noget man kunne bruge, jeg har længe ledt efter gode gradienter.

    comment-bottom
  4. avatar comment-top

    Hej Martin,

    Jeg er glad for du kunne bruge artiklen

    Og til Brian, jeg beklager der endnu ikke er kommet en artikel omkring spejling, vi er hårdt presset op på kontoret, men den skal nok komme :)

    comment-bottom
  5. avatar comment-top

    God gennemgang :)

    comment-bottom
  6. avatar comment-top

    Mange tak Tomm(y)

    comment-bottom
  7. avatar comment-top

    Fedt indlæg. Jeg har faktisk skrevet lidt om web 2.0 på min blog, hvor jeg netop fremhæver det meget oversete synspunkt, at web 2.0 også er et visuelt paradigme.

    Hvad er web 2.0?

    comment-bottom

RSS feed for kommentarer på dette indlæg. TrackBack-URL

Smid en kommentar