EKSAMINATORIan Wisler-PoulsenSTUDERENDECharlotte Lærke Weitze 301164 - clwe@itu.dk

TRIER SKI REDESIGNGrundlæggende Grafisk Design Skriftlig del af Eksamensopgaven ITU Forår 2010

Konstruktion og browservalg Opbygning af sitet Valg af browserVisuel identitetSkitser til den visuelle identitetWebsitetValg af medier til den visuelle delBilleder Motiver BeskæringEksempler på beskæringFarveTypografiDesignprincipper og kompositionRefleksion

I det følgende vises et forslag til et nyt design til Trier Skirejser.

De to rapporter indeholder sammen oplæg til visuel identitet, et webside design, en interaktiv kampagne med en banner-reklame og udkast til mobilsite.

IndledningIndhold - Skriftlig delTriers Univers - Analyse af eksisterende website og visuel identitetVisuel identitet 1. Element: Bomærke 2. Element: Navnetræk 3. Element: Farvevalg 4. Element: TypografiWebsitet Informationsarkitektur Målgrupper Triers styrkerMarkedetGenre - Stil - KonvensionerArgumentation / Konkretisering

1

Triers Univers - Analyse af eksisterende visuel identitet og website

Triers eksisterende visuelle identitet består af de tradi-tionelle 4 grundelementer( Noter bagerst *1):

• Bomærke• Navnetræk• Farve• Typografi

Desuden kan man måske argumentere for at bomærket får karakter af et 5. element, når Trier anvender det som ”vandmærke” på web-sitets lyseblå baggrund.

1. Element: BomærketUmiddelbart formår bomærket i sin nuværende form (et snefnug, det dannes af små mennesker), - at sammen-fatte værdierne: fællesskab og sne. Disse værdier burde matche et ski-rejsebureau. Imidlertid ser menneskerne temmeligt statiske ud i det nuværende udtryk. Ser man på Triers målgruppe (se venligst senere) er der mange unge og dynamiske mennesker iblandt. Derfor kunne Triers visuelle identitet blive styrket ved at ind-

drage et mere dynamisk islæt.

2. Element: NavnetrækNavnetrækket er skrevet i fonten:Banjoman som er ”sjov” på en lidt forældet måde. Her ville en modernisering gøre Triers udtryk mere tidssvarende. Desuden er nav-netrækket og bomærket ikke rigtig ”smeltet sammen” i Triers visuelle identitet.

3. Element: FarvevalgFarvevalget til bomærket er mellem-turkisblåt, hvidt og sort, og passer fint til den blå himmel og den hvide sne, der er på skisports steder. Dog kunne man få lidt mere ungdomme-meligt/ sportsligt ”spræl”, ved at væl-ge en varmere kontrastfarve til enten bomærket eller websiden. Trier har jo selv valgt at deres guider skal gå med røde uniformer.

Det er i øvrigt oppe i tiden med kraftige farver til skitø-jet, hvilket gør man man kan skille sig ud fra andre og blive genkendt, når man kigger efter hinanden oppe på løjperne. Dette (at skille sig ud med en varmere kontrastfarve) er en metafor, som jeg kunne tænke at arbejde med i webdesignet.

4. Element: TypografiPå web-siden har man anvendt en grotesk-skrift, jeg mener at det er arial. Arial er både god som læseskrift og overskrifter (rubrikker/ mellemrubrikker). Imidlertid er der ikke konsistent brug af skriftstørrelserne på Triers nuværende hjemmeside, hvilket giver et rodet og upro-fessionelt udseende.

Triers website kan siges at være gennemtænk og så alligevel med uprofessionelle træk. Der er f.eks. anvendt god skik og brug af designprincipper på forsiden.

Men anvendelsen af billeder er meget blandet. De er dårligt beskårne amatørfotos, der giver et indtryk af et uprofessionelt, eller ”hjemmestrikket” skirejse-bureau, blandet med billeder fra sneklædte bjerge mv. Det ville være at foretrække, at man opdelte tydeligt i professionelle ”salgs-fotos”, og så havde en anden platform til amatør billeder, der gav brugerne mulighed for interaktion og personliggørelse af websitet.

InformationsarkitekturEt andet område, som fungerer uhensigtsmæssigt, er undermenuerne, hvilket kan betyde, at brugeren overser vigtige dele af sitet. Når man vælger et punkt i venstre menuen, f.eks. skiskolen, så er underpunk-

Visuel identitet

Bomærke

Navnetræk

Websitet

Lukkethed

Konsistens

Align

ment

Kontrast

2

terne til skiskolen grafisk placeret et stykke inde på siden, så de kan forveksles med en overskrift, på en måde så de let overses.

Desuden behøver ”søg efter rejse”-feltet i højre side ikke at gå igen på samtlige sider. Ved et gennemsyn af 10-20 andre skirejse websites, er det tydeligt, at det er vigtigt for alle, at man straks kan søge efter rejse, når man kom-mer ind på sitet, da det almindeligvis vil være den første handling en bruger ønsker at fortage, og gerne med så få klik, som muligt. Men mange andre sites, nøjes med et menupunkt (rejsemål), hvor man kan søge efter rejser, når man er længere inde på sitet.

I øvrigt kunne mange af Triers menupunkter i højere grad tage udgangspunkt i brugerens univers, og den adfærd/tankegang, man som bruger vil have når man besøger sitet. Her kunne ske forbedringer i form af call to actions, nyheder, galleri, FAQ, Info mm.

Målgruppe Ud fra billederne på hjemmesiden virker det som om, at der er en kontrast imellem de ”abefester”, der afbilledes og de billeder, der viser smukke skilandskaber. Signalet er uklart. Snelandskaberne er ”klassiske” og måske ligefrem en anelse kedelige og festbillederne har karakter af ukon-trollabel ”grisefest”, som børnefamilierne måske ikke er helt trygge ved.

Man kunne med fordel skabe et klarere signal med web-sitet, hvor man havde en klar afgrænsning af målgrup-perne: Familier, unge og større grupper.

Denne opdeling af målgrupperne er også noget, der går igen på mange skirejse-websites. Denne opdeling ville give brugeren en fornemmelse af, at de trygt kunne rejse med Trier, fordi Trier viser at de kender alle mål-gruppers behov, og kan tage hensyn til dem.

Triers styrkerTrier har, udover at sælge prisvenlige skirejser, sin styrke i 3 ting:

• Guider, med den personlige kontakt• Dagsture/ afterski arrangementer• Skiskoler (for både børn og voksne)

Guiderne står både for forskellige frivillige tilbud og har samtidig en social rolle, hvis man ønsker at snakke lidt efter skituren i den lokale trier-afterskibar. Dette tilbud har altså lidt ”charter-karakter” med underholdning på turen, hvis man ønsker at benytte sig af det.Derfor vil jeg trække disse muligheder lidt mere i for-grunden.

Desuden vil jeg udvide målgruppen lidt ved at foreslå tilbud om snowboad-konkurrencer, Ung Lounge og et billede galleri. Det ville være oplagt at udvide den sociale del af Triers site, derfor fanebladet ”Min Trier”. Det er altså et mål, at gøre Triers side lidt yngre og mere dynamisk rettet, og stadig bevare et troværdigt udtryk på sitet.

Det traditionelle marked for skirejser:

Markedet

Imidlertid kan man søge inspiration til det yngre og mere dynamiske hos andre snesports sites:

3

Genre - Stil - KonventionerUd fra dette har jeg konstrueret et moodboard, der ud-trykker, hvor jeg gerne vil søge inspiration til en forny-else af den traditionelle skirejsebureau-genre til den valgte stil på sitet.

...i praksis er det gennem genren, at producenter skaber konventionsbestemte forventninger til et produkt, og det er gennem stilen, at man position-erer og differentierer sig. Ida Engholm (2004). Note2)

Dette moodboard skal med sine farver, dynamik og en anelse råt udtryk, beskrive fornyelsen. Med dette på den ene side og de traditionelle sites på den anden side, ønsker jeg, ved valget af stil, at lirke lidt ved den tradi-tionelle genre. Dog med ønsket om stadig at bevare det troværdige udtryk så brugerne af sitet bevarer tilliden til Trier Ski.

Jeg har stort set valgt at holde mig til konventionerne inden for navigation og informationsarkitektur på websites, for at gøre sitet så intuitivt at anvende som muligt. Således kan brugeren anvende sine erfaringer fra besøg på andre sites til at finde frem til det de søger. (Logo øverst til venstre viser til forsiden, søgefeltet er øverst til højre, kontaktoplysninger findes både oppe og nede mm.)

Konventionelt weblayout fra www.webstyleguide.com. Sitet er skabt, så det gerne skulle kunne bestå “gang-stertesten” . Note 3)

MOODBOARD

““

4

Den endelige visuelle identitet.

I skabelsen af den visuelle identitet til sitet var ønsket at ramme en ung stil med et dynamisk udtryk, - en enkel stil, der samtidig udstråler troværdighed og stabilitet. Derfor har jeg valgt en mand på snowboard som motiv, da det er mit indtryk at rigtig mange står på snowboard, og at det er lidt ”hippere” end ski. Jeg er klar over at navnet på firmaet er Trier ski(rejser), men jeg mener, at man kan tolke det sådan, at ski rejser kan forstås som en rejseform, hvor man tager til et sted med meget sne, for at have det sjovt og ”lege i sneen”, enten på ski, snow-board eller måske slæde for de små. Jeg har valgt font til logoet i ønsket om at ramme en ung, lidt “snow-board/ ekstreme skiing-smart “stil. Se endvidere venligst under “Typografi”. Se venligst præsentationen i den visuelle del.I øvrigt har jeg analyseret skisportens logoer ved at indsamle mange “logoer”. Dem er der ikke plads til i denne opgave.

Opbygning af sitetSitet er opbygget med Jesse James Garretts model i tankerne (se venligst note 4), en model hvor man arbej-der fra strategilaget op mod overfladen (det grafiske layout) i en stadig iterativ proces. Derfor valgte jeg efter at have set på målgruppens behov og have studeret markedet (strategi), at gå videre og arbejde en del med strukturen og skelettet ved bl.a. at foretage en kortsort-eringstest (billedet herunder) ( se venligst note 5).Der er sket store ændringer rent navigationsmæssigt, men det er der ikke plads til at komme yderligere ind på her i denne del af rapporten. Men se venligst den visuelle del.

Valg af browserIfølge fdim (Foreningen af Danske Interaktive Medier) anvendes browserstørrelsen: 1024 x 768 til18% af side-visninger i Danmark. 61% havde en højere opløsning. (note 6) Derfor mener jeg at det er forsvarligt at designe sitet til 1024 x 768. Tekstområdet (den hvide del af sitet) ca. har størrelsen 960 x600 hvilket vil tilgodese dem, der har en lille skærmopløsning (bl.a. små nye notebooks).

Ser man på Triers nuværende site (se venligst afsnittene: “Målgruppe” og “Triers styrker”) er det værd at bevare værdier som:

Aktiv snesport for alle aldreTrier guider - personlig kontaktFællesskabUngdom og festSmukke landskaberGode tilbud“Oplevelser der gør dig afhængig”

Hvorimod vi gerne skulle væk fra:

Abefest Rod i målgrupperneManglende konsistens på sitet Traditionelt skirejsebureau site

Argumentation/ Konkretisering Konstruktion og browservalg

Visuel identitet

Brugerbehov og formål

Funktionalitet

Interaktion og IA

Interface, navigation,ID

Visuel identitet

Kort

sort

erin

gste

st-r

esul

tat

J.J.G

arre

tts

mod

el fo

r lag

ene

i en

brug

er o

plev

else

på

et w

ebsi

te

5

Skits

er ti

l vis

uel i

dent

itet.

Se v

enlig

st v

isue

l del

for fl

ere

og s

tørr

e ek

sem

pler

Websitet Websitet har fået følgende udseende, se iøvrigt den visuelle del.

Vedr. skitser henviser jeg desuden til bilaget i den visu-elle del af opgaven.

På siden er det forsøgt at tilgodeses kundens forvent-ninger: AIDA. Det står for:Attention: det store forsidebilledeInterest: man søger efter rejseDesire: man får lyst til at rejse på ferie ved at se på sitet.Action: man bestiller en rejse, eller vælger at følge et af de andre mulige calls to action. (note)

Skitser til den visuelle identitet

Evt. antal børn

Tlf 8680 2000trierski@trierski.dk

Vi introducerer korte rejser på 3-5 dage

Download eller bestil vores katalog for sæson 2010-2011

Ung loungeTriers Freestyle konkurrence 2011

Transportform

Uge

Antal voksneEvt. antal børn

Rejsemål

Transportform

Uge

Antal voksne

Evt. antal børn Søg

Trier Familie

Til børnefamilien

FORSIDE l REJSEMÅL l KONCEPT l BESTIL REJSE l MIN TRIER l INFO l FAQ l

Oplevelser der gør dig afh ængig!

Trier Speciel

Trier Ung

Grupper

Rejsemål

Tilbud til unge

Gode tilbud for grupper

Hvor vil du hen?

Se vores specialiteter

Tilmeld dig vores nyhedsbrev og deltag i konkurrencen om en skirejse for 4 personer

Se vores aktuelle rabatter

Katalog

Nyheder

Korte rejser

Restpladser

Nyhedsbrev - Konkurrence

Søg rejse

Kontakt: trierski@trierski.dk l Tlf.: 86802000

Tlf 8680 2000trierski@trierski.dk

Forside // Koncept // Trier Speciel

Trier Speciel

Triers Guider

I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Vi fl otter med et hold.Læs om Skiskolen

Skiskole

Trier Familie

I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Hvis det er træet til dit bord der får dig op, er det snarere varmen over de andre.

Læs om Triers guider

I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Vi fl otter med et hold. Hvis det er træet til dit bord der får dig op, er det snarere varmen over de andre.

Læs om tibud til familien

Se billeder og videoer

DagstureI en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Hvis det er træet til dit bord der får dig op, er det snarere varmen over de andre.

Læs om dagens program

Trier Familie

Til børnefamilien

FORSIDE l REJSEMÅL l KONCEPT l BESTIL REJSE l MIN TRIER l INFO l FAQ l

Oplevelser der gør dig afh ængig!

Trier Speciel

Trier Ung

Grupper

Tilbud til unge

Gode tilbud for grupper

Se vores specialiteter

Nyhedsbrev - KonkurrenceTilmeld dig vores nyhedsbrev og deltag i konkurrencen om en skirejse for 4 personer.Tilmeld dig her

Trier Bio

Kontakt: trierski@trierski.dk l Tlf.: 86802000

6

Jeg har valgt at designe en interaktiv kampagne med hhv. mobilsite og webbanner for Trier Ski, da der forgår en øget digitalisering, bl.a. med de mange nye touch-phones, der har bevirket at flere benytter mobilen til at søge efter ting på nettet. De digitale platforme er således i fortsat vækst og dermed oplagte at reklamere på for Trier ski.

Billederne til opgaven er dummybilleder, da de ikke alle har tilstrækkelig høj opløsning til at kunne anvendes til tryk. Ved en rigtig udarbejdelse af sitet skal billederne købes, og de billeder, der skal anvendes til tryk skal have en opløsning på mindst 300dpi.Alle billeder er links (hvis det giver mening på stedet). Dvs. logo (visuelidentitet), banner i højreside, billeder, der har tilhørende tekst, menupunkter, mv. Altså alle billeder, hvor man intuitivt ville kunne forvente at blive sendt et andet sted hen, når man klikker.

MotiverRedesignet af Triers site har mere spektakulære, farverige og professionelle billeder end der er på det eksisterende site. Jeg har valgt at understøtte de 3 mål-grupper gennem billedevalg: familier, unge og grupper. Billederne er dynamiske og giver lyst til at komme ud at stå på ski og have det sjovt sammen. Ved at vise semi-professionelle skiløbere og snowboardere får brugeren en lille oplevelse af/ drøm om selv at prøve det. Jeg har valgt at anvende billeder der dels har dannet basis for og dels støtter farvevalget på sitet. På websitet har jeg arbejdet en del med at give det et ”fysisk” præg, og er endt med en form for ”snowboard-metafor”, ved hjælp af den lidt rå hvide overflade samt de afrundede hjørner i bunden. Desuden har den sorte baggrund en råhed som is, der er kørt på eller bagsiden af brugte ski eller snowboard.

BeskæringJeg har anvendt beskæring og frilægning af billeder for at fokusere på det væsentlige og for at skabe billeder med mere interessante vinkler.

BillederValg af medier til den visuelle del Eksempler på beskæring

Velkommen tilTrier skirejser

Besøg www.trierski.dk

Rejsemål

Min Trier

Konkurrence

Rejsemål

Tryk på kortet for at zoome ind

Hvor vil du hen?

Min Trier

Konkurrence

Til Forsiden

Rejsemål

Besøg www.trierski.dk

Hvor vil du hen?

Min Trier

Konkurrence

Rejsemål

www.trierski.dk

Få en ny vinkel på hverdagen

Vind en skirejse

Deltag i konkurrencen

Design til m.trierski.dk

Web-banner til www.trierski.dk

7

Til at begynde med har jeg valgt en farvepalette ud fra forside billedet, ved at oploade billedet til Kuler.com.

I den nye farvepalette, er der både:

En blå, svarende til den blå himmel, der kan symbolisere enkelhed, fred og kølighed.

En diskret, ydmyg og neutral lysegrå, som er anvendt til at skabe de forskellige afgrænsende streger på siden,

En mørkere grå, som er anvendt til teksten.

En varm rød kontrastfarve anvendt til den røde ”tunge” og displaytekst, der symboliserer aktivitet og glæde (og matcher Trier guidernes jakker) samt

En gul, der kan spille sammen med den anden kontrast-farve, og symboliserer solen og lyset. Note 7)

Fonten Corbel er en grotesk skrift der er læsevenlig. Note 10) . Den er bred og forholdsvis let at læse også i 10-punkts-størrelse. Jeg har valgt at anvende den moderne ”workhorse”- font Corbel, der er i familie med Verdana på web- og mobilsitet. Corbel giver sitet et moderne udtryk, men med rødder i en kendt font: Verdana. Corbel er en font, der blev frigivet sammen med Windows vista, hvilket vil sige at 45% af de danske styresystemer har den ( www.fdim.dk), og ellers kan den downloades gratis. Dog skal den efterfølges af andre fonte (verdana, arial, helvetica, sans-serif ) i kodningen af Font-family i HTML-programmeringen. (Dog bør web-sitet så afprøves på styresystemer uden Corbel, inden den endelig vedtages.)

Som det kan ses af moodboardet s. 3 ønskede jeg også at anvende nogle større, lidt ”behandlede” /rå bog-staver. Hertil brugte jeg som ”model” Zeppelin Medium Bold, som jeg med illustrator tegnede henover og fik nogle lidt ujævne bogstaver, som jeg både har anvendt som Navnetræk i den visuelle identitet og display-tek-sten: ”Skirejser” og ”Konkurrence”.

På sitene er der kun anvendt Corbels garniturer regular og bold, for at bevare enkelheden. Jeg henviser til den visuelle del af rapporten for at se anvendelsen af skrift-typer og typografiske parametre.

Farve

Jeg fandt imidlertid denne farvepalette lidt for kølig og anvendte den i stedet som udgangspunkt for den endelige farvepalette.

Farvepaletten nærmer sig en kombination af en kompli-mentær (modstillet) og triadisk (tredelt) palette.

Typografi

8

Analyse af Trier Ski’s site, markedet omkring, samt analyse af målgruppen gav et fundament for et rede-sign af Triers visuelle identitet. En ny informationsarki-tektur var et af resultaterne af denne analyse.

Herefter udvikledes de forskellige dele af den visuelle identitet website og interaktive kampagne ved at lade den ene skitse lede til den næste. Herunder var designprincipperne inddraget, som forudsætning for de forskellige løsninger.

Gennem mange iterationer udvikledes nu efterhånden mere håndgribelige prototyper, der forfinedes under-vejs. Hvis det havde været tidmæssigt muligt, ville det have været oplagt at inddrage brugertests af de forskel-lige prototyper.

Undervejs samlede jeg billedearkiver i forskellige kat-egorier til de nye målgrupper.

Tilsidst kom designet nærmere på det færdige produkt og blev gennemgået i detaljer med valg af motiver, beskæring, tekst, mv.

Jeg har således i mange af processerne anvendt 10-punktsmodellen fra kursets kompendie. (analyse, markedet, mv.).

Jeg har valgt at opsætte den skriftlige del af oplægget i foldet A3 format, og har for at skabe ensartethed valgt et liggende format til begge. Dette giver et lidt utradi-tionelt “kalender layout” på denne skriftlige del.

Bemærk at den visuelle aflevering består af 2 dele på dvd’en.

For anvendelse af grids, komposition og designprincip-per på sitet: se venligst den visuelle del af rapporten.

DesignprincipperDog skal kort nævnes at følgende designprincipper (se venligst Note note 9) er anvendt til for at skabe et harmonisk, overskueligt og forhåbentligt æstetisk vali-derende site.

KontastStørrelse, form, farve, placering / brug af luft.

Similarity Ved at den visuelle identitet, det røde (”5.element”) samt forside billedet går igen på mobilsite og website og webbanneret Hovedmenu alt inkl. samt displaytekst og visuel iden-titet, går igen på samtlige websider.

ChunkingPå web-forsiden er der skabt en overskuelig inddeling I overmenu, venstre menu med koncepter mv. og højre-menu med nyheder.

Nærhed - ProximityTeksten under konkurrencebanneret på websiden: Trier speciel, står umiddelbart under, så man kan se det hører til.

AlignmentAlignment ved de lige linjer der kendetegner menuer, billeder med tilhørende tekst mv.

Designprincipper og komposition RefleksionLukkethedAfgrænsning med streger og kasser alle steder på inter-facet på web- og mobil-site.

Hicks lawDer er kortere tid til handling på sitet, især på undersid-erne, da den tidligere hovedmenu er blevet reduceret fra 14 punkter til 7.

Work in progress!

Henvisningersamtlige menupunkter og underpunkter op, og de-refter forsøger en informant, at placere kortene på en logisk måde, så det svarer til den mentale model, de har af sitet.6) www.fdim.dk7) Cooper, J. C. (1999): Symbolleksikon s. 99-1028) Wisler-Poulsen, Ian (2007): Layout i opgaven s. 50-51. 9) Lidwell, William; Holden, Kristina; Butler, Jill (2003): Universal Principles of Design. s. s. 18, 22, 30, 34, 38, 46, 80, 86, 98, 102, 104, 142, 152, 160, 184, 200.

1) Wisler-Poulsen, Ian (2005): Hvad er meningen med Virksomhedens logo? s. 20-23.2) iflg. S.T.Gronemann Web-design og Webkommuni-kation E2009.3) Gangstertesten: Gregersen, Ole; Wisler-Poulsen, Ian (2009): Usability s., 42-49. Gangstertesten går ud på, at man fra hvilkensomhelst underside kan fortælle hvilket site man er på, hvor man befinder sig på dette site, samt hvordan man navigerer tilbage til forsiden.mm.4) Garrett, Jesse James (2003): The Elements of User Experience s. 21-365) Kortsorteringstest er en test, hvor man skriver

Oplevelser der gør dig afhængig!