Sådan bliver du en bedre webdesigner - del 2

Udgivet den 19/05 - 2010

Tiden er kommet til anden del i en større følgeton omkring, hvordan du bliver en bedre webdesigner. Siden sidst har min liste af relevante punkter vokset sig stor, så forvent ikke en afslutning i denne omgang, heldigvis ;)

Hvis ikke du nåede at fange første del i sagaen, så klik dig blot til første del omkring det at blive en god webdesigner.

Overblik

Indholdsfortegnelse

  1. Call to action
  2. Visuelt hieraki
  3. Visuel vægt
  4. Webkonventioner
  5. Lær dine programmer at kende
  6. Læs, læs, læs og læs
  7. Konklusion

1. Call to action

Sidst blev dette punkt nævnt adskillige gange, så derfor starter jeg hårdt ud med, hvad call to action er for størrelse. Det går i al sin enkelthed ud på, at et element, område, grafik eller andet ligger op til at gøre en handling. Måske du driver et community, hvor du har et ønske om, at besøgende opretter sig som bruger, hvis det er relevant for dem. Her kan du med fordel drage stor gavn af call to action, så besøgende ikke er i tvivl om, hvor de skal klikke for at kunne blive en del af dit community.

Hvis de besøgende har svært ved at finde muligheden for at blive en del af dit community, så er chancen meget stor for, at de ganske enkelt forlader siden igen. Det er næppe i din interesse, vel ;) I modsætning hertil dur det ikke, hvis du har adskillige elementer, der tiltrækker den besøgendes opmærksomhed, specielt ikke, hvis det er svært at adskillige vigtigheden. Ganske enkelt, så skal du ligge stor vægt på det vigtigste.

Hvordan kan du være sikker på, at dette er synligt nok, som webdesigner? Jo, du kunne selvfølgelig bevæge dig ud i en lille brugertest, men inden du går så langt, så har jeg et lille fif gemt i lommen ;)

Jeg antager, at du bruger Adobe Photoshop, og derfor også er bekendt med Gaussian Blur. Dette filter i Photoshop er ganske nifty (jeg har i hvertfald brugt det utallige gange), fordi det kan hjælpe dig med at bedømme, om du har lagt stor nok vægt på det element eller område, der skal skabe en lyst til handling fra den besøgende. Ganske enkelt så tilføjer du Gaussian Blur til dit webdesign (gerne i en relativ stor mængde), hvorefter alt bliver slørret.

Hvis dit element eller område stadigvæk fremgår ganske tydeligt, så er der en god sandsynlighed for, at dit mål er opnået. Lad mig illustrere god og dårlig call 2 action med et par eksempler nedenfor.

1.1 Eksempel på dårlig brug af call to action:

Kilde: http://www.edbpriser.dk

blogsnap_skidt_call-to-action_thumb

Personligt synes jeg ikke, Edbpriser byder på nogen rigtig form for call to action. For mig fremstår siden som et stort virvar, hvor jeg nærmere synes det skulle være langt større fokus på det at søge priser. Er det ikke det, vi bruger Edbpriser til? Det er i hvertfald det, jeg selv, bruger siden til.

Måske i synes noget andet?

1.2 Eksempel på god brug af call to action:

Kilde: http://www.mozilla.com

blogsnap_skidt_call-to-action_thumb

Som du kan se på eksemplet fra Mozilla, så gør de rigtig god brug af call to action. Du er fri for at skulle lede efter knappen/linket for at kunne download Firefox. Kender vi det ikke alle sammen, hvor irriterende det kan være, når vi ikke kan finde vejen til downloadmuligheden, fordi linket er “usynligt” for os?

Det går stærkt på internettet idag, så du skal hurtigt og smertefrit fange brugernes opmærksomhed ellers besøger de måske konkurrenten i stedet for.

1.3 Hvordan kan jeg skabe call to action?

I bund og er grund er det relativt enkelt, fordi det handler om at skabe et fremtrædent element, som eksempelvis Mozilla har gjort det.

Derfor vil jeg heller ikke skrive side op og side ned om, hvordan du kan opnå call to action, men i stedet liste områder, du kan arbejde med:

  • Kontrast
  • Størrelse
  • Farver
  • Udformelse
  • Position
  • Whitespace og padding

Og husk at du altid kan bruge Gaussian Blur til at tjekke,  om dit element træder tydeligt nok frem.

2. Visuelt hieraki

I forlængelse af call 2 action hopper vi straks videre til et andet oplagt emne, nemlig visuelt hieraki. Visuelt hieraki har på mange måder en del ting til fælles med call 2 action, fordi det vigtigste er placeret højt i det visuelle hieraki.

Et hieraki handler i alt sin enkelthed omkring at have det væsentligste ting øverste, hvilket har rigtig meget at sige, når vi befinder os på en hjemmeside. Det vil eksempelvis være yderst uhensigtsmæssigt, hvis du placerede en navigation i bunden af hjemmesiden. Og i henhold til snakken omkring call 2 action, så ville dette også falde til jorden, hvis det lå udenfor brugerens synsfelt på skærmen.

Derfor er det yderst vigtigt at få prioriteret vigtigheden af alle de elementer, en pågælden hjemmeside skal have – specielt på forsiden, men glem ikke undersiderne. Hvis ikke en forside formår at skabe et hieraki, hvordan skal brugerne så have en chance for at adskillge elementerne? Ganske enkelt så vil en forside flyde sammen for brugerne, fordi de ikke kan adskille elementerne fra hinanden. Igen kan du drage en god nytte i ovennævnte trick med brugen af Gaussian Blur.

Inden vi skal kigge på min illustrationer med et dårligt visuelt hieraki kontra et godt visuelt hieraki, så vil jeg gerne understrege, at eksemplerne ikke er medtaget for at hænge nogle ud, men udelukkende for at illustrere et visuelt hieraki eller mangel på samme.

2.1 Eksempel på et mindre godt visuelt hieraki:

Kilde: http://www.edbpriser.dk

Igen har jeg fremhævet Edbprisers hjemmeside, hvor det visuelle hieraki ikke rigtigt fremtræder tydeligt nok. Siden fremstår mere rodet end hvad godt er – efter min mening.

Og når du ser siden med gaussian blur tilføjet, så træder mange elementer frem, men ingen mere end den anden – i hovedtræk. Edbpriser er et godt eksempel på, at man vil frygtelig mange ting med siden, men glemmer at sætte fokus på det vigtige. Samtidig forsvinder det visuelle hieraki i mængden, fordi intet træder helt nok frem i forhold til andet.

Et sted, hvor jeg dog synes det visuelle hieraki lykkedes fornuftigt er i footeren, der står knap så kraftigt frem i forhold til resten af siden.

Men lad mig høre, hvis i er uenige i mine betragtninger? Eller måske i har et langt værre eksempel?

2.2 Eksempel på et fornuftigt visuelt hieraki:

Kilde: http://net.tutsplus.com

2.3 Undersiderne skal også have et visuelt hieraki

Ja, det er ganske vidst ikke kun på forsiden af en hjemmeside, at et visuelt hieraki er vigtigt, nej, tværtimod.

Befinder den besøgende sig på en underside, så skal det være tydeligt for denne, hvad der er hovedoverskrift, underoverskrifter og meget andet. Nøjagtig på samme måde, som sad du og læste i en avis. Forskellen er blot den, at tekstmængderne bør være afkortet, når de befinder sig på internettet – men det er en helt anden snak ;)

Jeg foreslår dig at læse at læse denne artikel, der både kigger på et visuelt hieraki, men også det næste punkt, visuel vægt.

2.4 Hvordan kan jeg skabe et godt visuelt hieraki

Det visuelle hieraki er straks lidt mere tricky – på nogle punkter – end call to action, fordi du har fokus på hele siden (for- som underside).

Men som med call to action er det faktisk mange af de samme områder, du kan arbejde med.

  • Kontrast
  • Størrelse
  • Farver
  • Udformelse
  • Position
  • Whitespace og padding
  • Effekter (Eks: Lys)

Og husk igen at du kan bruge Gaussian Blur til at tjekke, om det visuelle hieraki træder nok frem.

3. Visuel vægt

På mange måder går visuel vægt hånd i hånd med et visuelt hieraki. Hvordan kan det være? Jo ser du, med visuel vægt kan du bl.a. med farver fremhæve elementer på en given hjemmeside.

Vi ved eksempelvis alle sammen, at den gule farve er meget fremtræden i forhold til andre farver, fordi den nærmest skriger til os. Hvorfor tror du, at gul er brugt i stor stil ved udsalg? Netop, fordi det fanger vores opmærksomhed.

Selvom et element måske er placeret højt i hierakiet og samtidig har en prominent størrelse, så er det ikke sikkert pågældende element tiltrække den opmærksomhed, som det fortjener. Derfor kan farver, effekter og andet moderne være med til at give elementet den opmærksomhed, det kræver. Det får derfor også elementet til at fremtræde bedre i hierakiet, og vigtigheden bliver ligeledes fremhævet.

Eksempelvis har man på Net Tuts brugt de moderne lyseffekter til at skabe et mere synligt og prominent logo. Ganske vidst er lyseffekter en af de mange nutidige trends, men ikke desto mindre en trend, der er fantastisk i et ønske om visuel vægt og et visuelt hieraki.

3.1 Eksempel på egen brug af visuel vægt:

Kilde: http://www.michael-ostergaard.dk

Hvis du tager et kig på området, hvor mit “logo” er placeret, så står logoet ikke bare placeret på den mørkegrå/sorte baggrund.

Jeg har gjort brug af lidt eye candy, der får baggrunden til at lyse op, og derfor også logoet til at træde en lille smule mere frem. Man kan så diskutere om vigtigheden af selve billedet, jeg har brugt. Effekten i sig selv er ikke overflødig, men brugen af billedet kan godt betegnes som grafisk støj, fordi effekten kunne være opnået uden brug af et billede.

Heldigvis er jeg selv herre over siden, så fandt det lidt mere spændende at benytte et billede – også selvom billedet i sig selv ikke har nogen relation til siden. Nogle gange må man gerne bryde reglerne, specielt når ingen andre har noget at sige ;)

3.2 Andet eksempel på brugen af visuel vægt:

Kilde: http://www.designerbyheart.dk

Eksemplet her stammer fra mit gamle portefølje, da det lå helt for sig selv. Det er faktisk et endnu bedre eksempel på brugen af visuel vægt – som jeg selv ser det. Det skal dog bemærkes, at websitet ikke længere kan besøges i en live udgave.

Igen, hvis du fokuserer på området, hvor logoet er placeret, så bemærk den meget fremtrædende røde baggrund, men bemærk også lyseffekt bagved, som får området til at træde endnu mere frem.

Her kunne jeg have undladt både den råde farve samt lyseffekten, men så ville logoet på mange måder bare falde i med selve navigationen, og det var ikke mit ønske. Selvom logoet stadig ville have sin rigtige plads, så vil det ikke tiltrække nogen videre opmærksomhed – i hvertfald ikke af samme karakter.

3.3 Tredje eksempel på brugen af visuel vægt:

Kilde: http://www.designerbyheart.dk

Vi befinder os stadigvæk på mit gamle portefølje, men nu på en underside. Her er fremhævningen af logoet pludseligt forsvundet, fordi brugeren gerne skulle vide, hvor de nu befinder sig. Logoet er dog ikke forsvundet, men bare ikke fremhævet så meget.

På undersiderne har jeg i stedet lagt den visuelle vægt på de aktive menupunkter i navigationen. Brugeren skulle ikke have nogen tvivl omkring, hvor de befandt sig. Jeg kunne have lagt meget mindre vægt på fremhævningen, men syntes samtidig, at markeringen af det aktive menupunkt underbyggede sidens samlede udtryk.

Det var så det, ikke flere eksempler for denne gang. Jeg tog ved visuel vægt kun udgangspunkt i mit eget arbejde, men du kunne jo prøve at analysere den visuelle vægt på nogle af de andre eksempler, som jeg brugte ved call to action og visuelt hieraki.

4. Webkonventioner

I forlængelse af både call 2 action og et visuelt hieraki har vi atter et oplagt emne. Når vi beskæftigere os med hjemmesider, så har vi en række faste konventioner, der er gode at kende. Hvad mener jeg egentlig, når jeg snakker konventioner? Jo, konventioner i webdesigner/webudvikling er en række punkter, der er blevet en slags regler over årene.

Et meget klassisk punkt blandt de adskillige konventioner er placeringen af et logo. Det er ganske enkelt kutume at placere et logo øverst til venstre på en hjemmeside (selvom en placering i højre side af og til ses). Dette har i mange år altid har været normen, og er derfor blevet til en konvention. Langt de fleste brugere vil ganske enkelt forvente et logo i toppen til venstre. Hvorfor bryde den konvention? I visse tilfælde har jeg set logoet placeret i midten, men her har man sørget for ikke at skabe tvivl.

Nu når brugerne har disse faste forventninger, når de kommer for at besøge din hjemmeside, hvorfor så gøre det svært for dem? Derfor skal du som webdesigner ikke uden videre bare begynde med at bryde disse konventioner. Dog med så meget andet, så kan og vil der altid være visse undtagelser, hvor du godt kan tillade dig at bryde de vante rammer, men det afhænger rigtig meget af pågældende målgruppe. Eksempelvis skal du ikke bryde konventionerne, når du designer en business-hjemmeside.

4.1 En lille liste over vigtige webkonventioner

  • Logo i toppen til  venstre
  • Hovednavigationen i toppen eller toppen til venstre
  • Kontaktoplysninger/adresse i bunden
  • Links er understreget og tydelige

Der findes mange flere af disse konventioner end dem jeg har nævnt her. Jeg vil ikke gå i dybden med de mange konventioner, men derimod er min pointe nærmere at understrege, at du som webdesigner ikke må se igennem fingerne med basal viden eller basale webkonventioner.

Vil du gerne udvide din horisont på området, så foreslår jeg, at du læser – The Need for Web Design Standards – af Jakob Nielsen.

5. Lær dine programmer at kende

Lad os bevæge os over i en helt anden boldgade, nemlig de programmer du anvender, som webdesigner. De fleste af jer anvender formodentlig Adobe Photoshop mens nogle få benytter Adobe Fireworks (som vi alle nu nok burde anvende).

Et bedre kendskab til programmernes mange muligheder kan være med til at forbedre dine evner som webdesigner. Det kan også forbedre dine processer i dit arbejde med webdesign, fordi du hurtigere kan opnå forskellige effekter. Med hurtigere og bedre processer har du også bedre tid til at tage hånd om et pågældende webdesign.

Ganske enkelt siger mine erfaringer mig, at man fra tid til anden skal gennemfører et par tutorials i eksempelvis Photoshop, fordi du på den måde har chancen for at lære nye små tricks, du kan benytte i dit arbejde. Det behøver slet ikke være tutorials i webdesign, tværtimod. Det handler om at lære programmerne at kende.

Som webdesigner kan man nemt ende i en slags ond cirkel, hvor man benytter de samme effekter eller metoder om og om igen, fordi man enten ikke ved bedre eller simpelthen ikke kan andet. Derfor kan gode tutorials være med til at øge dine kompetencer, og derved ikke havne i en ond cirkel. Dermed ikke sagt, at det er desideret skidt at bruge nogle af de samme ting om og om igen. Jeg synes det er helt iorden at genbruge visse elementer fra et webdesign til et andet, fordi det bl.a. kan spare dig tid. Det er heller ikke alle opgaver, der kræver en “genskabelse” af den dybe tallerken.

Nedenfor har jeg samlet en lille række gode ressourcer, der kan være med til at forbedre dine evner i Photoshop.

5.1 Udvid dine kompetencer i Photoshop

Generelt er et sted som PSD Tuts et godt sted at starte, hvis man gerne vil udvikle sin kompetencer i Photoshop, derfor stammer flere af linkene ovenfor også fra nævnte side. Desuden har Niels Gamborg samlet en lang række tutorials, der også er et kig værd.

6. Læs, læs, læs og læs

Sidst havde jeg også et punkt med at omkring udvidelse af din viden. Grunden til punktet går igen skyldes, at du aldrig kan lære nok. Du må aldrig sætte dig ned på din flade og forvente, at du har lært alt, der er at lære. Kort sagt, det vil aldrig ske.

Denne gang vil min anbefaling på godt læsestof bl.a. gå på bogen Sexy Web Design af Elliot Jay Stocks. Bogen er både anbefalingsværdig om du er ny eller erfaren i faget webdesign. Selvom bogen gentog en del vide, jeg havde i forvejen, gav den mig stadigvæk en række gode fif og ideer, jeg kunne bruge i mit arbejde med webdesign.

Udover nævnte bog kan Designing the Obvious: A Common Sense Approach to Web Application Design af Robert Hoekman Jr. anbefales. Selvom den ikke fokusere desideret på webdesign, så giver den et stort indblik i udformningen af formularer. Som webdesigner skal man ofte opsætte en visuelt fængende formular, og i den forbindelse er nævnte bog guld værd.

Udover at læse bøger, så er der også mange super spændende og interessante udenlandske blogs at følge med i. Jeg har samlet et par stykker, jeg synes, du som webdesigner bør følge med på.

6.1 Har også et par interessante personligheder at følge på Twitter

7. Konklusion

Denne gang kom vi om endnu en række vigtige punkter som call to action og visuelt hieraki, men også webkonventioner og de programmer, vi bruger.

Ønsker du at være en dygtig webdesigner, så handler det ikke bare om at sammensætte streger, brushes og andet i Photoshop/Fireworks, så det går op i en højere enhed. Det handler i den grad om et solidt fundament af viden, som vi også lærte i første del omkring det at blive en bedre webdesigner, så er der mange punkter at skulle dække.

Kunsten at være en god webdesigner er langt fra at være dygtig i Photoshop/Fireworks, selvom det absolut hjælper, så handler det i den grad om at forstå brugerne, og deres behov. En visuelt appellerende hjemmeside nytter ganske enkelt ikke noget, hvis brugerne af pågældende hjemmeside ikke kan finde, det de søger – eller ikke ved, hvad de skal på siden. Derfor er punkter som call to action og visuelt hieraki pokkers vigtige, men alle de andre punkter er også vigtige.

Kort og godt, så er jobbet som webdesigner slet ikke så nemt, som mange måske antager. Der er ufattelig mange processer, beslutninger og andet, som man skal beskæftige sig med. Sæt dig ned og sug al den viden til dig, som du kan – men det skal selvfølgelig være i dit tempo ;)

Kommentarer

  1. Niels Gamborg

    Super fed og meget grundig artikel igen, Michael. Og jeg fornemmer, at der endda er områder du springer lidt lettere hen over for at får plads til det hele.

    Jeg kunne f.eks. godt tænke mig at høre meget mere detaljeret om, hvordan du arbejder med visuel vægt.

  2. Peter Lauge

    Av min arm for en god artikel!
    Tak….

  3. Michael Østergaard

    @Niels, mange tak skal du have. Tænkte faktisk lidt det samme omkring visuel vægt, der ikke var min plan fra starten at medbringe. Kendte faktisk ikke til udtrykket før, jeg læste en artikkel omkring visuelt hieraki – en artikkel, jeg iøvrigt linkede til.

    Du har ret i, at området egentlig fortjener mere uddybelse end det egentlig får, hvilket har givet mig anledning til supplere med lidt ekstra – så som et godt og skidt eksempel.

    Der er virkelig mange gode punkter at skrive om, og mange fortjener nærmest sit helt eget blogindlæg. Måske der engang kommer en All-in-one – måske som eBog eller noget i den stil, man ved aldrig ;)

    @Peter, mange tak skal du have, og velkommen til. Iøvrigt interessant shop. Nu har man jo en vis interesse i kaffe, så den bliver jeg lige hængende lidt på ;)

  4. Lene Aarup Vinther

    Du gør det rigtigt godt, tak! Vil fluks kigge nærmere på dine anbefalede links.

    Jeg har lige diskuteret det med gode og dårlige eksempler med en kollega – og når man kigger på hjemmesider – så kan der være en, der bare har nogle knald gode elementer, men så falder igennem på noget andet, og det der er godt for en branche – hænger muligvis ikke sammen for en anden.

    De GODE eksempler du kommer med – har noget helt andet – og ekstremt vigtigt tilfælles, nemlig ENKELhed. Når man dyrker enkelhed, er det meget nemmere at følge din liste over virkelig god webdesign etikette!

    Og så må jeg hellere se at få læst første del af din serie ;)

  5. Michael Østergaard

    Mange tak for et super godt input, Lene :)

    Du har ganske ret, det er væsentlig nemmere, når enkeltheden er en stor faktor. Alligevel synes jeg netop mange propper alt for meget ind på deres hjemmesider, de vil ganske enkelt alt for mange ting. Men igen, det er selvfølgelig ikke nødvendigvis, webdesignerens skyld.

    Som webdesigner er det absolut en udfordring at få mange elementer til at spille sammen på bedste vis. Netop her er punkter som visuelt hieraki og visuel vægt vigtige, men de er også svære at mestre – specielt hvis man glemmer at tænke på, at mange brugere ikke sidder med en god skærm (mere om det næste gang, dog).

    Igen, mange tak for dit input, yderst værdsat :D

  6. Mikael B

    Hej Michael..

    God opfølgning på den første del..
    Du har ret i det du skriver, og det er alt sammen utrolig brugbart for nybegyndere, såvel som hærdede webdesignere .

    Super Michael, indlægget er totalt godkendt, en af de bedste du har lavet, jeg kan ikke kritisere noget!!

  7. Michael Østergaard

    Mange tak, Mikael, det er dejligt at høre :)

  8. Kim Sørensen

    Du har altså rimelig godt styr på det du fortæller om – respekt for det.

  9. Lisa Ingemann

    Hej Michael,

    Tak for to gode indlæg om at blive en bedre webdesigner. Du har nogle rigtig gode litteraturreferencer og kilder, som jeg vil kigge nærmere på. De røg direkte i min “SKAL læses”-mappe i fortrukne :)

    /Lisa

  10. Michael Østergaard

    @Kim – Mange tak for roserne, det varmer :)

    @Lisa – Dejligt at kunne byde ind med noget brugbart. Pas nu på, at din mappe ikke bliver for stor – taler af erfaring ;)

  11. Michael Østergaard

    Apropos snakken omkring visuel vægt, så læs:
    http://sixrevisions.com/graphics-design/visual-weight-designs/