Planlægning af website

© Webbooks ApS · www.webbooks.dk Webdesign med Adobe Dreamweaver © Webbooks ApS · www.webbooks.dk

Planlægning og designkapitel: 3

Troede du lige du kunne gå hen til skærmen, åbne Dreamweaver og lægge ind-hold ind på din første webside? Du må desværre tro om igen.

OK, indrømmet! Som computerfreak har jeg selv en tendens til at starte lidt for hurtigt ved computeren uden at have tænkt det hele igennem.

Og hvad får vi ud af det? Højst sandsynligt et halvfærdigt websted, som hverken er særlig pænt eller let at �nde rundt på. Som en klog mand engang sagde til mig: ”Man kan ikke tænke på en tom skærm”.

Derfor får du i dette kapitel nogle redskaber, som vil give dig mere fokus og målrettethed i din webproduktion i Dreamweaver.

< Skitser

< Weblayout

< Flowchart

< Målgruppeanalyse

< Storyboarding

Fælles for metoderne er, at de ikke har fokus på computeren som værktøj, men derimod på papiret og blyanten.

Igennem bogen vil du arbejde ud fra en case, hvor du kommer igennem hele web-processen fra planlægning til det færdige websted på World Wide Web.

Case: Nordic SeaWorldDer er netop blevet bygget et stort akvarium ved havnen i Århus. Akvariet hedder Nordic SeaWorld og åbner om en måned. Anna Haugaard fra marke-tingsafdelingen vil have DIG til at lave deres websted. Du har i en mail bedt om informationer om, hvad webstedet skal indeholde og har fået følgende svar:

”Hjemmesiden skal markedsføre vores akvarium, så vi får rigtig mange gæster. Der skal være informationer om priser, åbningstider, kørselsvejledning, osv. Vi har et stort skibsvrag med akvarium i, som der skal informeres om. Vores daglige aktivite-ter skal også beskrives på siden. Vi har del�nshow, fodring af hajer, samt badning med pingviner �ere gange om dagen. Desuden har vi også nogle udstillinger om �skearter, andre havdyr og planter.

Der skal også være en formular, så folk kan rekvirere brochurer, og selvfølgelig skal der være kontaktinformationer. Det er desuden vigtigt at reklamere for vores eksklusive restaurant i skibsvraget med udsigt til de mange eksotiske �sk.

Der skal være en masse billeder på siden og måske også videoklip. Vi skal nok levere al tekst og billeder, så det skal du ikke tænke på. Men vi regner med at du har ideer til hvordan hjemmesiden skal se ud. Vil du hurtigst muligt sende os nogle forslag til hjemmesidens udseende?

Med venlig hilsen

Anna HaugaardNordic SeaWorld”


2

kapitel: 3Planlægning og design

SkitserAnna Haugaard vil have dig til at lave nogle skitser over, hvordan siderne skal se ud. Fordelen ved skitser er, at de er hurtige og billige at lave, i stedet for at lave et design på computeren, som alligevel bliver kasseret.

Du tænker måske: ’Øv - jeg kan ikke tegne, - kan jeg ikke bare beskrive hvordan websiderne skal se ud? ’

Nej, for det er meget lettere at forholde sig til en skitse frem for en beskrivelse. Og skitser skal ikke være detaljerede, der skal hverken være tekst eller farver med, blot streger af, hvor billeder, tekst og menu skal placeres.

Hvor store skal skitserne være? Det er der ingen regler for, men 4 stk. på et A4-ark er passende. Det er vigtigt, at der er forskellige forslag til, hvor billeder, tekst og ikke mindst menuen skal placeres, så Anna Haugaard har noget at vælge mellem.

Herunder vises nogle hurtige skitser, som kan sendes til kunden.

Skitserne er sendt, og du har modtaget svar fra Anna Haugaard:

”Tak for dine gode tegninger. Jeg kunne især godt lide skitse nr. 1 med menuen øverst til højre, men dog uden undermenuen i venstre side. Jeg vil gerne have vores navn og logo til at stå helt oppe i venstre hjørne over billedet. Kan du sende mig en mere detaljeret tegning af f.eks. forsiden, gerne med farver? Og hvis du også kan sende mig et forslag til, hvordan man skal kunne klikke sig rundt på siderne! På forhånd tak!

Med venlig hilsen

Anna HaugaardNordic SeaWorld«

Anna Haugaard vil altså have os både til at lave en mere detaljeret tegning, samt et overblik over, hvordan brugeren kommer fra én side til en anden. Det første hedder et weblayout, og det sidste hedder et flowchart.


3


TIP: Når du laver layout i hånden, kan du tage et skærmdump af en tilfældig webside.

I et billedbehandlingsprogram fjer-ner du al indhold, så du kun har browseren tilbage.

Til sidst printer du nogle eksempler ud på A4-papir, som du kan bruge til weblayout og storyboard.

WeblayoutEt weblayout giver både designeren og kunden en idé om, hvordan websiden vil se ud. I forhold til skitserne, skal weblay-out være større og mere detaljeret. Der skal være farver med og en mere nøjagtig placering af billeder, menu og tekst.

Tekstafsnit vises blot med linier, mens der kan laves et omrids af billederne. Det er vigtigt at være så præcis som muligt med hensyn til placering og størrelse af elementer.

Husk på, at kunden skal se dit weblayout, og du vil gerne vise, at du nu grundigt har tænkt over, hvordan det færdige websted skal se ud.

Nogle foretrækker at lave weblayout på computeren i f.eks. Adobe Illustrator eller Photoshop, som billedet herunder illustrerer.

Der er nogle mærkbare fordele ved at lave weblayout ved computeren: du har mulighed for at sende det pr. e-mail til kunden, f.eks. som et PDF-dokument. Hvis kunden siger god for det, kan du arbejde videre med materialet i Dreamweaver.

En ulempe ved at lave layout på computeren er, at tekniske be-grænsninger kan komme til at styre de kreative ideer, du har. Især hvis du ikke er vant til at arbejde med layout i de respek-tive programmer.

Da denne webbook ikke omhandler andre programmer end Dreamweaver, tager vi ikke udgangspunkt i denne metode.


4


FlowchartEt flowchart er et diagram over sidernes indbyrdes sammenhæng. Flowcharts bru-ges især til større websteder med flere hundrede sider. Her kan det hjælpe med at have overblikket over siderne. Flowcharts kan også bruges i forhold til en kunde til at forklare webstedets opbygning. Et simpelt eksempel på et flowchart:

Brugeren starter på forsiden, og herfra kan han klikke videre til tre andre sider. Han har også mulighed for at klikke mellem siderne og tilbage til forsiden.

Hvis brugeren kun kan navigere til en side, men ikke tilbage igen, f.eks. hvis det er en side med et billede, som åbner i et nyt vindue, markeres det med en pil den ene vej.

For at vi kan lave et flowchart for Nordic SeaWorld skal vi se på den første mail, vi fik fra Anna Haugaard. Her markerer vi alle de ord, som har noget med ind-hold at gøre:

»Hjemmesiden skal markedsføre vores akvarium, så vi får rigtig mange gæster. Der skal være informationer om priser, åbningstider, kørselsvejledning, osv. Vi har et stort skibsvrag med akvarium i, som der skal informeres om. Vores daglige aktiviteter skal også beskrives på siden. Vi har delfinshow, fodring af hajer, samt

badning med pingviner flere gange om dagen. Desuden har vi også nogle udstillin-ger om fiskearter, andre havdyr og planter. Der skal også være en formular, så folk kan rekvirere brochurer, og selvfølgelig skal der være kontaktinformationer. Det er desuden vigtigt at reklamere for vores eksklusive restaurant i skibsvraget med udsigt til de mange eksotiske fisk.«

For ikke at gøre webstedet for stort i denne case, vælger vi at gruppere noget ind-hold på samme sider. F.eks. kan priser, åbningstider, kørselsvejledning og kontak-tinformationer placeres på en side om planlægning. Information om akvariet kan placeres på forsiden. Forslag til Nordic SeaWorlds flowchart:

Vi sender nu weblayout og storyboard til Anna Haugaard, og hun skriver tilbage:

”Det ser fint ud. Jeg kan godt lide det simple design af siden, og jeg synes, det er en god måde du har struktureret siderne på. Jeg sender dig hermed tekst til siderne og nogle billeder, så du kan gå i gang...«

Før vi går videre til opbygningen af de enkelte sider, er det væsentligt at se på, hvem der skal bruge webstedet. Det vil være nærliggende at spørge vores kunde, men vi kan ikke lige få fat i hende. Derfor laver vi en målgruppeanalyse.


5


Vi kan selvfølgelig ikke gå ud fra, at andre brugere ikke ser væsent-lig anderledes ud. Og hvis du har overskud til det, vil det være opti-malt med 2-3 forskellige arketyper. Når vi laver et design, som falder i vore arketypers smag, er der STOR sandsynlighed (men ingen garanti) for at de øvrige brugere også er tilfredse.

TP: Din kunde ved sandsynligvis en masse om gæsterne og brugerne.

Du kan også opsøge målgruppen i parken eller et lignende sted, hvor samme type mennesker vil befinde sig. Her kan du spørge dem om f.eks. deres smag, internetvaner, osv.

Målgruppen kan bruges til at give positiv/negativ feedback på, hvor-dan dit websted virker

MålgruppeanalyseDet er vigtigt for dig at vide, hvem den typiske bruger på webstedet er. Indhold, layout, naviga-tion, osv. skal gerne falde i brugerens smag, og der er f.eks. stor forskel på, hvad en teenager og hvad en pensionist synes om.

Målgruppen for vores websted vil sandsynligvis være nogle af gæsterne i Nordic SeaWorld, men ikke alle. Gæsterne i parken vil overvejende være børnefamilier i Østjylland, men det vil først og fremmest være forældrene, som besøger webstedet.

En god idé er at beskrive en arketype, dvs. en typisk besøgende på webstedet. Arketypen har de karakteristika, andre brugere sandsynligvis også vil have. Du kan beskrive en arketype ud fra f.eks. alder, bopæl, job, interesser, familie, kulturelle vaner, ferie, og ikke mindst computer-/internetvaner.

Arketypen for vores websted kan være:

En 38-årig mand fra Århus med 2 børn og hustru. Job som ingeniør. Spiller golf i fritiden, og løber også. Interesserer sig også for fodbold i TV. Ikke den store bruger af kulturliv, kan dog godt lide at gå på restaurant og læse krimibøger. Holder sommerferie i Danmark og tager på skiferie i Alperne. Er prisbevidst, kører i en Skoda Octavia. Ingen nævneværdig viden om fisk – eller interesse

for. Favoritmusik: Rock, bl.a. U2 og Pink Floyd. Har som regel en travl dag.

Computervaner: bruger dagligt computer på arbejde og hjemme på samme computer, en bærbar med 1024x768 px i skærmop-løsning. Bruger internettet primært til at søge informationer, bestille billetter, købe bøger, læse mail og gå på Facebook. Bruger Windows Vista og Firefox. Har en 5 Mbit/s forbindelse hjemme. Computeren anvendes i kort tid ad gangen.

Og hvilken indflydelse vil disse karakteristika få på vores websted? Jo, f.eks.:

� Kan godt lide at gå på restaurant > Der skal være tydelige informa-

tioner om restauranten.

� Ingen viden/interesse om/for fisk > Korte, let forståelige

informationer.

� Prisbevidst > Informationer om priser skal være lette at finde.

� 2 børn > Vigtigt med information om aktiviteter til børn.

� Bil > Tydelig information om parkering.

� Bestiller billetter over nettet > Evt. interesse for at rekvirere

brochurer.

� Skærmopløsning 1024x768 px > Webstedet skal kunne ses i denne

skærmopløsning.

� Browser: Firefox > Webstedet skal se pænt ud i Firefox.

� Travl dag/bruger computeren kort tid ad gangen > Ingen intro på

webstedet, men hurtige informationer.

� Ingeniør/golf > Foretrækker et klassisk design uden for sprælske

farver.


6


HTML-farver på dit webstedFør vi går igang med vores egentlige webproduktion skal vi vide, hvilke farver baggrunden, skriften, osv. skal have. Det er ikke nok at skrive ’rød’, da der er mange varianter af rød. En moderne skærm kan vise over 16 millioner farver.

Som webdesigner får du brug for at kende til den måde, farver opfattes af en browser. En typisk farve skrevet i HTML vil se sådan ud: #FFFF00.

Det ser sværere ud, end det egentlig er. HTML farver skrives med det hexadeci-male talsystem, som indeholder 16 tal: 0123456789ABCDEF. F har altså den højeste værdi: 16.

De to første tal i #FFFF00 er værdien for rød, dvs FxF=16x16=256. De to næste er værdien for grøn, dvs. FxF=16x16=256. De to sidste tal er værdien for blå, dvs 0x0=0. Farven er altså R=256, B=256 og B=0, og det betyder, at #FFFF00 = gul, da gul fås ved at blande en helt rød med en helt grøn farve (og ingen blå farve).HTML-farven for hvid er #FFFFFF, og for sort er den #000000.

HTML farverne kan findes både i Photoshop og Dreamweaver.

Det er en rigtig god idé at holde sig til 3-5 farver på webstedet, så det ikke bliver én stor blanding af tilfældige farver. Samtidig er det vigtigt, at farverne passer til temaet: i vores tilfælde et havtema. Derfor vælger vi nogle farver som folk forbin-der med havet, nemlig blå, tyrkis og grøn.

Herunder kan du se, hvilke farver vi vælger til de forskellige elementer på siden. Bemærk igen, at det er HTML-farven, vi er interesseret i, da det så er let at finde den samme farve i Dreamweaver.

#CBE6E1

Til baggrundsfarve på siden, samt tekstfarve i menu og sidebar

#007D7F

Til baggrundsfarve i sidebar og menu, samt tekstfarve i hovedoverskrifter

#3696FD

Til baggrundsfarve i footer (nederst på siden), tekstfarve i underoverskrifter, baggrundsfarve når musen bevæges henover links.

#FFFFFF

Til baggrundsfarve i indholdssiden, tekstfarve i footer

#000000

Til tekstfarve på indholdssiden


7


StoryboardingStoryboard er det engelske ord for en drejebog. Du har måske hørt om et story-board ved indspilning af en film. Her viser et storyboard, hvad der skal ske i den enkelte scene, dvs. bevægelser, replikker, kameravinkler, osv. Ligeledes viser et storyboard hver enkelt webside med oplysninger som:

� Layout, dvs. opstilling af tekst, menu, billeder, osv. Helst med farver og med om-

rids af billeder. Teksten vises dog blot med linier.

� Farvekoder, fonte, størrelse, osv..

� Filnavne på billeder osv.

� Handlinger, dvs. hvad skal der f.eks. ske, hvis man klikker på ’forside’.

Vær særlig grundig med forsiden, mens du på storyboardet til de øvrige websider kan du nøjes med at beskrive de elementer, som er forskellige fra forsiden.

Et storyboard skal i princippet kunne gives videre til en programmør, som skal kunne sætte webstedet op efter anvisningerne. Vi vil i de kommende kapitler bruge vores storyboard til at sætte vores sider op i Dreamweaver, men først skal vi have lavet det.

Det kan være en hjælp at bruge computeren til at teste fonte, skriftstørrel-ser, farver, osv.

Storyboardet er ikke ’endeligt’, dvs. hvis du senere i din produktion i Dreamweaver finder ud af, at du vil bruge en anden font, farve eller bil-lede, så er der ikke noget galt med det. Hvis du sammenligner storyboardet til højre med det færdige resultat, er der også en del forskelle, primært på billederne.

Storyboards til Nordic SeaWorldHerunder kan du se storyboardet for vores kommende forside. Af pladshensyn udelader jeg storyboards for de øvrige sider, men princippet er det samme. Nogle foretrækker en mere struktureret opbygning af storyboards med oplysninger om farver, fonte, links, osv. nederst på siden, men det er op til dig. Der findes ikke én korrekt måde at lave storyboards på.


8


En webproces kan se meget forskel-lig ud fra situation til situation. Nogle gange er en kunde meget styrende og har bestemt alt vedrørende ind-hold og udseende, men vil blot have dig til at udføre det tekniske.

Andre kunder er i den helt anden grøft: de har ingen idé om web-mediet og forventer at du står for det hele og selv fremskaffer billeder, tekst, osv.

Fælles for alle webprocesser er dog, at der er en udveksling af informa-tioner mellem dig som webdesigner og din kunde.

Spiralen viser veksel-virkningen mellem på den ene side de ting man som webdesigner la-ver alene og på den anden side de n kom-munikation der sker mellem dig og din kunde.

OpgaveDu har nu fået et indtryk af, hvordan du planlægger din webproces. Vi har taget udgangspunkt i vores fiktive case om Nordic SeaWorld, men hvorfor ikke afprøve metoderne på din egen case?

Du kender forhåbentlig en, som også læser denne webbook. Prøv at spille hinandens kunde og webdesigner, hvor I bestil-ler et websted hos hinanden. Hvis du er alene kan du bede om feedback fra en du kender. Det er jo ikke noget krav, at ’kun-den’ kender noget til webdesign.

Det vigtigste er, at du bruger din kunde til at få informationer om webstedets indhold og holdninger til sidernes udseende.

Den case, du selv tager udgangspunkt i, kan du arbejde videre med igennem bogens kapitler, sideløbende med casen om Nordic seaWorld.

� Kom med nogle forslag til webstedets indhold. I kan eventuelt

brainstorme, dvs. skrive en masse forslag ned på et papir og bagefter

finde ud af, hvilke I vil arbejde videre med.

� Tegn nogle skitser til kunden, og giv kommentar på skitserne.

� Tegn et flowchart ud fra forslag til indhold. Flowchartet skal ikke

bestå af mere end 5 websider.

� Tegn et weblayout. Hvis du har erfaring med Photoshop eller

Illustrator kan du ud fra dine skitser opbygge dit weblayout i et af

disse programmer.

� Beskriv webstedets målgruppe udfra mindst én arketype. Husk per-

sonens computervaner.

� Vælg nogle farver og fonte, som du vil anvende på dit websted.

Argumentér for dine valg og fravalg.

� Lav et storyboard for hver side. Afprøv gerne farver, fonte osv. på

computeren.

� Find til sidst de billeder og den tekst, du skal bruge, og tilføj på sto-

ryboardet navnene på dine filer.


9

Documents

Planlægning af website