Niels Gamborgs online notesbog

Web 2.0 logo design

januar 12th, 2009. Kategori: Design

Web 2.0 logoer adskiller sig fra traditionelle logoer, da de ofte er designet udelukkende til skærmbrug.

På en skærm kan man bruge en lang række subtile farvenuancer og farveforløb, som man ikke ser i  traditionelt logo design. Der skal ikke tages hensyn til, at et logo skal kunne faxes, fotokopieres eller trykkes i den lokale avis.

Web 2.0 bølgen er ved at have en del år på bagen. Og der er store forskelle et logo, der er designet først i perioden, og de logoer, der er blevet designet sidst i perioden. Men samtidig er der også mange fællestræk ved mange af periodens logoer.

Nogle typiske web 2.0 logo kendetegn:

  • Simpel logotype
  • Neutrale sans serif font
  • Stærke klare farver
  • Subtile farveforskelle og farveforløb, ofte brugt til glaseffekter eller spejlinger.

De første web 2.0 logoer

I den tidlige del af web 2.0 bølgen indeholdt logoerne ofte en neutral logotype. I mange tilfælde bestod logoet udelukkende af denne simple logotype. Udviklerne af de første web 2.0 tjenester var typisk programmører og fokus var på funktionalitet frem for design.

Digg er en af de ældre web 2.0 teknologier. Den startede tilbage i 2004. Digg’s logo er et godt eksempel på et tidligt web 2.0 logo baseret på logotype. Typografien er en firkantet sans serif font, der signalerer teknologi og funktionalitet.

Kort efter dukkede YouTube op på web 2.0 scenen. Deres logo var i starten noget større og virkede lidt mere klodset, men udfomningen var identisk med det vi kender i dag. Logotypen er en simpel og meget neutral sans serif font. YouTube har dog peppet logoet op ved at tilføje en rød afrundet rektangel (symboliserer en skærm) til deres logo.   Skærmen har fået tilføjet en svag gradient, der giver den et lidt plastikagtigt feel. En forløber for de senere så populære glaseffekter på web 2.0.

Picasa er fra 2004 og logoet udskiller sig fra mange af de samtidige logo’er ved også at have et traditonelt symbolistisk logo sammen med logotypen. Selve logotypen er typisk for perioden. En neutral Sans Serif. Logoet fik en opstramning i 2005, hvor fonten blev skiftet ud til en anden sans serif med noget mere karakteristiske a’er.

Et andet web 2.0 kendetegn er de klare farver i den symboliserede blændeåbning.

De senere Web 2.0 logo

Efter den allerførste web 2.0 bølge begyndte web 2.0 bølgen at udvikle sine helt egne designtrends. I starten blev der ironisk refereret til web 2.0 som værende identisk med grønne glasknapper. Og rent designmæssigt var det ikke skudt helt ved siden af. Den righoldighed og avancerethed man oplevede i de moderne web 2.0 webapplikationer begyndte også at afspejle sig i designet. Det blev leget med gradienter og farveforløb, og både stærke farver og sarte nuancer. Det lidt hårde tekniske udtryk er blevet afløst af en mere organisk og levende stil.

På dette mailbigfile logo fra 2006 ses flere af periodens karakteristika.  Glaseffekten er iøjnefaldende, og det samme er det utraditionelle farvevalg for et logo. Fonten er en moderne sans serif, men i modsætning til mange af de tidligere web 2.0 logoer, er fonten afrundet og organisk. Og det organiske udtryk bliver yderligere forstærket af det hvide omrids på logotypen.

Twitter logoet fra 2007 har mange af de samme web 2.0 kendetegn . Igen sammme organiske udtryk i logotypen som mailbigfile logoet. Nuancerne er tilgengæld lidt mere sarte, og farveforløbet er ganske subtilt. I dag har twitter helt fjernet farveforløbet fra deres logo, og farven på logotypen er blevet mere blå.

Som et sidste eksempel har jeg valgt et logo fra wipbox. Wipbox er en nyere web 2.0 tjeneste fra 2007.  Logoet skiller sig meget ud fra de andre logo’er vi har kigget på, men indeholder alligevel mange web 2.0 karakteristika.

Logotypen er en kursiv serif skrift, så udtrykket er stadig meget organisk i stil med de andre nyere web 2.0 logoer. Logoet har en anelse glaseffekt ved at det er delt i 2 nuancer af grøn. Og endelig har logo’et en spejleffekt, der også er ganske typisk for web 2.0 logo’er.

Flere Web 2.0 logoer og Web 2.0 design

Her er en række ressourcer, hvor du kan skaffe dig et overblik over mange flere web 2.0 logoer, og andet typisk web 2.0 webdesign.

Web 2.0 logo showcases er et site der samler på web 2.0 logo’er

Flere Web 2.0 logoer fra et web 2.0 site. Linket er til deres logo samling.

Web 2.0. Design guide er en lidt ældre artikel, der beskriver en række design karakteristka ved web 2.0. Blandt andet også logo design.

  1. 6 Responses to “Web 2.0 logo design”

  2. By Jan Kaczmarek on jan 12, 2009

    Rigtig god gennemgang af de forskellige typer. Jeg er helt vild med web 2.0 logostilen – især glaseffekter og gradienter får mit hjerte til at banke 😛

  3. By Bjarke on jan 12, 2009

    Tak for et glimrende indlæg og gode links. Jeg kan lide de logoer du har vist (bortset fra wipbox)

  4. By Kim Andersen on jan 12, 2009

    Super gennemgang af de forskellige faser og trends i web 2.0 logo’erne.
    Jeg er også vild med de nye web 2.0 logoer med gradienter osv., men kun fordi at de skal bruges til web.

    Som du selv starter med at sige, så ville det aldrig kunne gå som et logo der skulle trykkes alverdens steder, eller bruges i sort/hvid for den sags skyld 🙂

  5. By Michael Østergaard on jan 12, 2009

    Tak for endnu et spændende indlæg, Niels 😉

    Er selv begyndt at arbejde mere med logodesign på min arbejdsplads. Det er absolut et interessant område, men også et meget svært og udfordrende område. Man skal virkelig gøre sig ufattelig mange tanker med et logo.

    Hvad angår brugen af gradienter, så kan det jo i dag sagtens lade sig gøre at lave vha. af vektorgrafik. Umiddelbart bliver det også muligt med CSS 3.0.

    Er det til tryk, så vil man selvfølgelig stadig prøve at undgå for mange smarte ting, men især spejlingen finder man ikke sådan ved tryksager. Men en spejling synes jeg også godt, at man kan tillade sig, når logoet optræder på hjemmesiden. Det er jo ikke just fordi, at man ændrer logoet – det får bare en ekstra effekt.

    Ellers er det altid interessant at kigge på logoer.

    Worst/Best 2008

    Logoer efter den financielle krise

  6. By Niels on jan 12, 2009

    Tak for de positive kommentarer.

    Jeg er selv helt vild med at kigge på logoer. Både de traditionelle logoer og web 2.0 logoer.

    Desværre får jeg alt for sjældent lejlighed til selv at forsøge mig ud i logo design kunsten. 😉

  7. By Martin on mar 2, 2010

    Rigtig fed gennemgang og oversigt over de forskellige logoer! Fedt at få noget baggrundsviden.

Skriv en kommentar