Sådan bliver du en bedre webdesigner - del 1

Udgivet den 18/02 - 2010

Hvis du ikke allerede ved det, så arbejder jeg til dagligt som webdesigner, og kan derfor godt lide at dele ud af de erfaringer, jeg med tiden oparbejder.

Med disse erfaringer skal vi ikke – som tidligere – beskæftige os nær så meget med hverken HTML eller CSS. Jeg vil derimod fortælle om de ting, jeg personligt synes kan være med til at udvikle dig som webdigner. Med andre ord, hvad har jeg selv gjort for at udvikle mine evner som webdesigner.

Overblik

Indholdsfortegnelse

Inden vi går i gang, så vil jeg gerne understrege, at jeg langt fra nævner alle de områder, der kan være med til at udvikle dig som webdesigner. Dette blogindlæg vil lede frem til en opfølger – et sted ude i en uvis fremtid. Personligt, så har jeg meget at lære endnu, og vil derfor også erhverve mig endnu mere erfaring, som jeg med glæde vil dele ud af. Desmere, så har jeg absolut også meget mere at fortælle end, hvad jeg har på programmet i netop dette blogindlæg.

Godt kendskab til HTML og CSS

Det er grundlæggende godt vide, hvad der kan opnåes med ganske almindeligt HTML og CSS. Dette gælder også selvom, at du ikke skal opsætte det endelige webdesign. Der er ingen grund til at skabe unødige komplikationer for hverken dig selv eller øvrige webudviklere. Derfor, hvis kender du til “begrænsningerne”, så vil du gøre arbejdet så meget nemmere for en webudvikling eller eventuelt dig selv. Det er klart, hvis du selv skal sætte designet op, så er du formodentlig også bedre bekendt med “begræsningerne”.

Og med et ganske fornuftigt kendskab til både HTML og CSS, så vil du eksempelvis vide, hvad der er muligt med bl.a. skrifttyper. Det ses ofte også, at anti-aliasing anvendes i et webdesign. Anti-aliasing er ikke en egenskab i hverken CSS eller HTML. Det er enten en generel egenskab i styresystemet eller i browseren. Lad mig her nævne mine tidligere blogindlæg omkring, hvordan du præsenterer kunder for et webdesign, og hvad der er god skik i Photoshop.

Kort og enkelt, så vil du med et godt kendskab til HTML og CSS ikke rode dig ud i nogle uheldige situationer.

Læs eksempelvis Elliot Jay Stocks blogindlæg: Web Designers Who Can’t Code – og glem ikke at skimme alle kommentarerne til Elliots blogindlæg igennem. Eller tag et kig på Mark Boultons blogindlæg: On Designers writing HTML.

Kendskab til programmering

Her tænker jeg ikke på et dybdegående kendskab til programmering i PHP, ASP, ASP.Net, Javascript eller noget helt femte. Har du lidt programmeringsmæssigt kendskab, så kan det mindske hullet, der er imellem webdesigner og programmør.

Ofte er det sådan, at en webdesigner og programmør sidder i hver sin skyttegrav i hver ende af slagmarken. Af logiske årsager, tænker de sjældent ens eller kommunikere på samme sprog (overført betydning). Derfor, hvis du har lidt kendskab til teknikken, hvad der er muligt, hvad der findes af løsninger, så ender du ikke med at designe noget, der ikke kan lade sig gøre.

Omend kan du i hvertfald være med til at gøre livet mindre surt for en programmør, hvis du har kendskab til teknikken. Bare rolig, du behøver absolut ikke at kunne skifte olie eller andet under motorhjelmen. Eksempelvis er det godt at have kendskab til funktionalitet i enten Mootools eller jQuery. Derved lægger du heller ikke bare alt ansvaret over på en programmør eller webudvikler. Det er godt at vide, om en ønsket effekt kun kan opnåes via Flash eller om man kan nøjes med javascript.

Brugervenlighed

Du er nødt til at have en vis viden omkring brugervenlighed, hvis du ønsker at være en god webdesigner. Du kan være nok så dygtig til at sætte streger i Photoshop, men hvis du ikke forstår at formidle et budskab til målgruppen, så kan det færdige resultat være nok så flot.

Du er nødt til at vide mange af de grundlæggende elementer i brugervenlighed. Dette involvere bl.a., at links antal bør understreget, have en god kontrast til brødteksten. Det indebærer også, at logoet som udgangspunkt altid bør placeres øverst til venstre, at brødteksten skal være let læselig og meget andet. Nu nævner jeg kun nogle af de mest åbenlyse ting, men alligevel en række punkter, som jeg faktisk ser brudt næsten dagligt.

Kort og godt, så handler det ganske enkelt om, at få brugeren til at tænke mindst muligt. Det skal være åbenlyst for brugerne, hvad det er, du ønsker, de skal gøre på netop dit website. Derfor må du eksempelvis ikke skabe tvivl omkring, at en tekst nu kan være klikbar bare fordi, at den er understreget.

Derfor SKAL du læse bogen, Don’t Make Me Think , af Steve Krug

Målgrupper

Nu tænker du sikkert, hvad skal jeg dog vide det for? Jo ser du, du er nødt til at kende dine målgrupper eller den enkelte målgruppe for et givet webdesign. Målgrupperne forventer aldrig det samme.

Hvis din målgruppe er teenagere, så kan du tillade dig langt mere fest og balade end, hvis målgruppen er mænd/kvinder i alderen 30-50 år. Du kan sætte nok så mange fine streger i Photoshop, men hvis du ikke rammer målgruppe rigtigt, så nytter webdesignet intet. Hvis du nu besøgte hjemmesiden for Ung Rejs, så ville du vel ikke forvente minimalisme, få farver og enkelthed? Nej vel, men det vil du måske forvente, hvis du besøger hjemmesiden for en tilfældig fotograf, hvor billederne skal være i fokus – Ja, nok ikke det bedste eksempel i verden, men jeg har tillid til, at pointen blev opfattet ;)

Gør brug af et grid

Et grid kan hjælpe dig langt på vej, da du kan skabe en vis ro i et webdesign. Et webdesign kan virke harmonisk uden, at du nødvendigvis ved hvorfor. Dette kunne ganske enkelt skyldes, at elementerne i det pågældende webdesign følger et grid.

Jeg begyndte faktisk først selv at benytte grids sidste år, og synes de har hjulpet mig utroligt meget. Det er ofte meget nemmere at placere elementerne i forhold til hinanden. Man rammer heller ikke nogle yderst uheldige størelser på elemeterne. Hvem kender ikke til de mest skæve størrelser på elementer. Hvorfor skal en kasse være 299 x 123px, hvis den kan være 300 x 120px?

Det grid, jeg har valgt at benytte mig af, er 960 Grid System. Der kan du få grids til Photoshop, Indesign, Fireworks, Illustrator mv. Hos 960 finder du også rigtig mange gode eksempler på hjemmesider, der har benyttet sig af deres grids. Bemærk den harmoni netop disse hjemmesider får.

Brug ej Indesign, Illustrator eller lignende

Jeg kan simpelthen ikke understrege det nok. En dygtig webdesign benytter sig ganske enkelt ikke af denne type programmer. Grundene herfor er relativt enkelt, da nævnte programmer eller lignende er skabt til helt andre formål. Indesign er til håndtering af tryksager, og arbejder desuden ikke i pixels. Illustrator er til håndtering af vektorgrafik, hvilket kunne være udarbejdelse af et logo.

Men skulle du være en af disse grafikere, der kun slår sine folder i Indesign, Illustrator eller lignende (ja, måske ber en stille bøn til programmet hver aften), så får i lige et par hurtige tips til, hvordan i kan lette vores andres arbejde, når i nu engang insisterer på at levere en PDF (ja, det er sjovt nok ikke noget, i bliver populære på her hos mig).

  • Brug websikre skrifttyper, og oplys os om hvilke
  • Medsend en simpel designmanual, der fortæller om farver på tekster, links mv.
  • Fortæl om hvor bred siden skal være – 900px, 920px, 940px eller noget fjerde i bredden
  • Spar på de smarte detaljer så som skygger (De er bare ikke nemme at konvertere fra en PDF)

Nej, en dygtig webdesigner bør som minimum benytte Photoshop eller faktisk endnu bedre, Fireworks. Faktisk burde jeg kun nævne Fireworks, da programmet faktisk er skabt direkte hertil. Dog befinder vi os bare i en verden, hvor hovedparten benytter sig af Photoshop (mig selv inklusiv). Photoshop er faktisk et billedebehandlingsprogram, og hvordan det netop er havnet som det foretrukne program, tør jeg kun gætte på. Photoshop kom vel på markedet længe før Fireworks, og er måske på den baggrund alene blevet det mest udbredte.

Personligt, så har jeg sat mig for at udforske Fireworks nærmere i løbet af 2010, og på den baggrund kunne jeg sagtens finde på at skrive et blogindlæg omkring mine erfaringer. Men her må i dog afvente med stor tålmodighed – har nemlig endnu ikke åbnet Fireworks i år ;)

Læs, læs, læs og læs…

Kort og godt, du har hele tiden noget nyt at lære. Du kan aldrig sætte dig ned og sige, at nu har jeg lært det hele – det sker aldrig!

Selvom webdesign i høj grad handler om udseende, så skal du have en god forståelse for rigtigt mange ting jf. alle punkterne overfor. Derfor er det ene og alene ikke nok, at sidde og kigge på diverse inspirationshjemmesider, der kan præsentere det ene fede webdesign efter det andet. Du er nødt til at bevæge dig meget længere.

Derfor kan jeg kun opfordrer dig til at finde en række gode blogs, der jævnligt præsenterer spændende og interessant indhold, der kan være med til at udvikle dig som webdesigner. Ja eller måske bare være med til at udvikle din kreativitet.

Lad mig foreslå et par gode læsekilder:

Lad mig foreslå et par gode inspirationskilder:

Gode inspirationskilder kan også hjælpe med til at udvikle dit kendskab til gængse teknologier og muligheder.

Bonus

Igår poppede et interessant blogindlæg ind i min RSS-reader. Blogindlæggets fængende overskrift, 6 things that designers can learn from the olympics, fængede straks min interesse. Blogindlægget givet en anderledes og interessant vinkel på, hvor man kan udvikle sig som webdesigner.

Konklusion

Dit formål som webdesigner er ganske enkelt ikke alene at være skarp rent grafisk, nej din palette er faktisk meget bred. I hvertfald hvis du ønsker at være iblandt den absolut bedste liga. På mange måder er du bare mere udsat som webdesigner end programmør. Programmering går ofte ud på at løse en ønsket funktionalitet, hvorimod webdesign næsten altid præges af præferencer og smag.

Dermed ikke sagt, at programmering er nemmere end webdesign. For mig er webdesign nemmere end programmering, men for andre er det omvendt. Man skal ikke være god til alt i her verden, og det skal du heller ikke i webdesign, men din palette er ganske vidst bred – meget bred.

Lad mig afslutningsvis henvise til en sjov lille artikel, der viser, hvad designere mere eller mindre bør kunne eller kan i disse dage – Designers these days…

Og jeg kan selvfølgelig det hele *host* :P

Kommentarer

  1. Henrik Andersen

    Rigtig godt indlæg og der er ingen tvivl om at du er en dygtig webdesigner. Som jeg har sagt før er jeg vild med dit design her på bloggen :)

    Udover dine råd vil jeg anbefale alle webdesignere fokusere mere på hjemmesidens mål og dermed call to action.

    En hver hjemmeside, blog eller webshop har (eller bør have) nogle primære mål. Hvad enten det er at guide brugeren igennem et betalingsforløb, få brugeren til at tilmelde sig et nyhedsbrev, bruge en kontaktformular eller noget helt andet, så skal webdesignet jo også afspejle dette.

    Hvis det f.eks. er vigtigt at brugeren tilmelder sig nyhedsbrevet på en hjemmeside, skal der fokus på fordelene ved at tilmelde sig nyhedsbrevet og så skal det være UMULIGT at overse tilmeld knappen :)

  2. Martin Nielsen

    Rigtigt godt indlæg, gælder faktisk ikke kun webdesignere,hvis sælgere bare kunne få en brøkdel viden indenfor de ovennævnte kategorier tror jeg både webdesignere og senere programmører ville ha det meget nemmere.

    Og ellers helt enig med Henrik, mange websites og webdesignere glemmer helt at fokuserer på målet, der skal være så meget i designet at den der nyhedsknap da sagtens kan komme nederst, men hvis det er det vigtigste mål, ja så er det jo vigtigere at den er i toppen, også selvom det måske ikke er så pænt. Hvad der konverterer bedst er ikke altid det der er pænest.

  3. Morten Vium

    Super indlæg! Du får helt sikkert hevet fat i flere væsentlige pointer.

    Især i forhold til kendskab til CSS/HTML. Det er virkelig vigtigt. Vi ser alt for mange hjemmesider, som benytter kluntede løsninger med billedfiler, hvor man sagtens kunne have opnået samme effekt i CSS.

    Desuden er jeg enig med Henrik og Martin i, at hvis der mangler noget, er det et afsnit om Call to Action. En webdesigner skal ikke dekorere – han skal konvertere.
    (Jeg har tilfældigvis skrevet et blogindlæg om netop dette i mandags: http://webdesignerblog.dk/artikler/sadan-bliver-du-designer-og-ikke-dekorat%C3%B8r)

    Men tak for god læsning. Jeg ser frem til opfølgeren ;)

  4. Michael Østergaard

    @Henrik – Og igen mange tak :) Det er godt, at du nævner “call to action”. Det hermed noteret til et opfølgende blogindlæg. Det er nemlig super vigtigt, at man huske at lægge vægt på det, som man ønsker af brugeren. Brugerne skanner et website, så hvis ikke en tilmelding til et nyhedsbrev træder frem, så tilmelder folk sig logisk nok ikke – eller antallet af tilmeldingen vil i hvertfald ikke være så højt som ønsket.

    @Martin – Helt enig i din betragtning af sælgere. Har oplevet det adskillige gange faktisk – desværre! Det er bare super farligt at love noget, hvis man ikke på forhånd ved, at det kan lade sig gøre. Måske kan det lade sig gøre, men det nytter heller ikke noget, hvis det tager 10 timer, og er solgt til 1 times arbejde.

    @Morten – Det var rent faktisk dit indlæg, der inspirerede mig til at skrive netop dette blogindlæg, så tak for det :)

    Ps: Kan se du har lidt problemer med æøå i din URL. Har selv løst problemet, så kan da hurtigt videregive, hvad jeg har gjort for at løse dette lille og irriterende problem – sig blot til eller eventuelt smid mig en mail ;)

  5. Mikael B

    Hej Michael. fedt indlæg, hvor du virkelig går i dybden, og fortæller en masse brugbare ting, der både kan bruges af en nybegynder eller en der allerede har beskæftiget sig med webdesign et stykke tid. Dog har jeg en lille kommentar, på følgende:”Indesign er til håndtering af tryksager, og arbejder desuden ikke i pixels.”

    Jeg var i Januar 2010 ude på Hansenberg, hvor jeg var et sted hvor folk blandt andet blev uddannede som webdesignere. Her brugte man InDesign til at lave billeder og meget andet på hjemmesiden, fordi at de var af den opfattelse, at det var det optimale. Jeg er jo nysgerrig, og spurgte derfor indtil det, da jeg havde forventet de ville bruge photoshop. Dertil svarede manden der viste os rundt, at det var det bedste, fordi at InDesign lige præcis ikke brugte pixels, men en form for streger hele vejen ned ad siden, i stedet for en masse firkanter.

    Dog skal det da siges at han også nævnte at InDesign også blev brugt hyppigt til håndtering af tryksager!(: Det nævnte er så godt nok også det eneste jeg kan kommentere bare en lille smule kritisk på dit indlæg! Ser frem til en fortsættelse!

  6. Michael Østergaard

    @Mikael – Mange tak for feedback og roserne. Og velkommen til, iøvrigt :D

    Jeg vil dog ikke give Hansenberg ret i, at Indesign er bedre til webdesign. Dog forstår faktisk ikke helt deres begrundelse, må jeg indrømme. Måske jeg er lidt sløv i betrækket idag.

  7. Mikael B

    Tror skam ikke du er sløv i betrækket, for jeg forstod det heller ikke, jeg finder photoshop el. lignende meget mere brugbar på det område!

    Mage tak for velkomsten(:

  8. BCK Design

    Tusinde tak for tin artikel her. Jeg gad godt vide mere om CSS grid dog, syntes der er svært at finde noget om. Og jeg er tvivl om hvad det rent faktisk gør, man kan bruge denne artikel til rigtig meget. Tak skal du ha’ :)

  9. Michael Østergaard

    @BCK – Jeg er glad for, at du kunne bruger blogindlægget :) Det kunne være, jeg skulle skrive et mere dybdegående blogindlæg omkring brugen af grids.

  10. Casper Christensen

    Super indlæg, må sige du kommer med rigtig mange fede indlæg :)
    Super blog !! :)

  11. Michael Østergaard

    Mange tak Casper, det er super skønt at høre :)