Ide Designprocess I denne opgave har jeg udviklet et website for et feriehus. Kunden ønsker et site, som både fungere privat, men også som offentlig hjemmeside. Hele site skal være på dansk, tysk og engelsk. Kunden ønsker at der skal være mulighed for: Booking af feriehuset via en kontaktformular At se billeder fra feriehuset At se private billeder via af et log ind At se et kort over Als, og hvor feriehuset er placeret At kunne se hvor der er akktraktion på als At se hvor der er fiskemuligheder Læse om information om huset Målgruppe Målgruppen for hjemmesiden er alle som gerne vil leje et feriehus i naturskønne omgivelser. Det er en meget bred målgruppe, derfor skal den kunne henvende sig til mange på en gang. Logo lavet i Illustrator Toppen af hjemmesiden med loge, sprogikoner og adresselinje Toppen af hjemmesiden med loge, sprogikoner og adresselinje Med udgangspunkt i disse oplysninger, begyndte jeg at brainstorme. Jeg ville designe en hjemmeside, som er let at navigere rundt på, og som alle kan finde ud af. Man skal ikke være i tvivl om hvor man skal trykke henne for, at komme hen til det man søger, og det skal højst være to klik væk. Sitet skal være lækkert at se på og overskueligt. Det skal være i nogle flotte farver for, at få kunden til at blive på sitet og evt booke feriehuset. Herefter lavede jeg en skitse i Photoshop. Jeg slicede hjemmesiden op i mindre dele ved hjælp af hjælpelinjer. Dette gør det nemmere at opdaterer hjemmesiden i stedet for at den skal uploade et stort billed hver gang. Jeg har designet et logo i Illustrator. Dette er med udgangspunkt i feriehusets farver, rød og grå. Det lille hus i logoet symboliserer feriehuset. Dette symbol er også brugt som favicon i browseren for at skabe genkendelighed. Logoet er placeret øverste i højre hjørne, for hvis kunden har en lille skærm er det logoet der først ses. Dermed bliver de med det samme sikre på, at de er på den rigtige side. Der er placeret et stort flot billed af huset under logoet. Meningen med dette er, at man får indtrykket af, at det er et site for et feriehus. Billedet er i flotte skræppe farver og med en flot blå himmel, som virker indbydende og hyggeligt. Jeg har placeret tre flag ved siden af logoet, som symbolisere, at man kan læse hjemmesiden på dansk, tysk og engelsk. Dette øger brugervenligheden. Jeg har benyttet gestaltlove for at skabe en mere overskuelig og brugervenlig hjemmeside. Loven om Nærhed og Lighed har jeg brugt i min meulinje, og mine små flag (sprogvariationerne) ved at de står tæt sammen og ligner hinanden. På mine overskrif-
ter har jeg også brugt loven om Lighed ved at gøre dem ens på alle siderne og ved at lukke dem inde i røde bokse bruger jeg også loven om Lukkethed. Generelt ligner alle siderne hinanden for at skabe en rød tråd gennem hele sitet. Brødteksten er delt op i to spalter, og der er ca. 50 endheder per linje og en relativ høj linjehøjde for at øge læsevenligheden. Den hvide baggrund er ikke 100% hvid. Dette ville ellers gøre det lidt svært at læse. På index siden er der et kort over Als, hvor man tydeligt kan se placeringen af huset. Dette ser man som noget af det første, og man er derfor ikke i tvivl om hvor man er henne i Danmark. På kortet er der placeret attraktions-ikoner, der fungerer som eksterne links på sitet. Dette er lavet for at kunden kan se, hvor man kan tage hen og se noget på Als. Der er også ikoner for forskellige fiskesteder. Der er placeret en adresselinje i bund af sitet og i toppen. Adressen i toppen er et eksternt link til Google Maps. Her kommer man ind på et kort over området hvor feriehuset er placeret. Jeg har valgt Google Maps og ikke Krak for, at udenlandske kunden ikke er i tvivl om hvad det handler om. Der er brugt websikre skrifttyper, hvilket vil sige, at de er på de fleste computere i hele verden. Så designet af hjemmesiden vil ikke blive ændret. Jeg har brugt h1, h2, h3, p, metatags m.m, skrevet mange forskellige søgeord i Titel og tilmeldt virksomheden hos Google. Dette øger søgeoptimeringen på sitet og derved vil sitet rangere højere hos Google. På kontaktformularen har jeg skjult emailadressen ved, at få hjemmeside-skolen.dk til at generer emailadressen om til koder. Disse koder har jeg sat ind i formularen i stedet for den emailadressen. Hjemmesiden er bygget op i XHTML 1.0 Strict med to eksternt style sheet. Det ene style sheet er mine styles, det andet er et Print style sheet. Dette er med for at undgå, at når man skal printe ud, at der ikke kommer en masse unødvendigt med ud, så som billeder i mange farver. Der kan kun udskrives sort tekst hvilket gør det brugervenligt. Der er lavet udførlige kommentarer i koderne, for bedre at skabe et overblik, også ved evt overdragelse af sistet til en anden webdesigner. For at lave et log ind på sitet har jeg benytte PHP-kodning med session for at sikre at man ikke kan komme ind på det beskyttet site. Koder, bl.a metatags Billedgalleri og log ind funktion
Der er brugt CSS3 til at lave en transperant effekt på billedgalleriet. Det var nødvendigt at benyttet et lille JavaScript for at få billederne og de eksterne link til at åbne i et nyt vindue. Dette er gjort fordi at XHTML 1.0 Strict ikke kan valideres hvis, der er brugt Target. Jeg har brugt meget tid på, at sitet skal kunne valideres. Alle billederne jeg har brugt på sitet er gemt i det mest optimale format, så det fylder mindst muligt. Hjemmesiden er blevet meget brugervenlig og design mæssigt passer den rigtig godt til målgruppen. Grafisk design
Flowchart Engelsk Tysk Google maps Index Om huset Se billeder Booking Logget ind Tak Google maps Danfoss Univers Aug. slot Sønd. slot Dybbøl banke HTML links PHP links Eksterne links
Logo Jeg har arbejdet meget med mit logo, for det er en lang og kreativ process. Jeg startede med at lave et mindmap, hvor jeg placerede Logo: Vores feriehus i en cirkel i midten af papiret. Her udfra har jeg skrevet alt det ned jeg kom i tanke om. De vigtigste begreber jeg kom frem til var: ferie, sommer, familie, natur, strand. Udfra dette begyndte jeg, at lave en masse skitser. Det var en lang udviklingsprocess. Jeg brugte først nogle forskellige fonte, men fandt frem til at Avant Garde passede bedre, da den er dejlig geometrisk. Da jeg gerne ville have et forløb i mit logo, skulle der ikke være så meget spil i fonten. Ellers ville det blive for detaljeret, og det ville ikke være hensigtsmæssigt hvis logoet skulle være i et lille format i en avis med en lav opløsning. Jeg ville gerne skabe et logo, der signalerede hygge og trykhed, så jeg valgte at lave et lille hus. Dette for at understrege at det er et feriehus. Forløbet har jeg med for at skabe dynamik i logoet. Farverne er 40% sort og 100% magenta og 100% yellow. For at prøve af, hvordan mit logo virker i praksis, har jeg lavet en brevlinje med brevpapir, M5 kuvert og visitkort. For at skabe en rød tråd igennem brevlinjen, har jeg valgt at bruge den samme font som i logoet til al tekst. Brevpapir Jeg har valgt at placere logo og oplysninger i øverste højre hjørne. Dette har jeg gjort at flere grunde. Bl.a fordi, at modtagerens navn og adresse står øverst i venstre side. Så for ikke at blive forvirret over modtageradressen i rudefeltet, så mine oplysninger i højre side. Først ville jeg placere mine oplysninger i højre side i bunden, men det virkede mere naturligt, at det stod øverst. Den anden grund til at det står i højre side, er at man altid først ser højre side når man bladre. Derved kan modtageren hurtigere finde evt kontaktoplysninger frem uden at skulle bladre efter det. I bunden har jeg valgt, at placere et stort format af mit logo for at skabe en samhørighed med logoet i toppen. Dog er dette logo i 20% opacity for at der ikke bliver for dominerede, og man kan skrive læsbart tekst oven på det uden at det forstyrrer læsebarheden mærkant. M5 kuvert Da Post Danmark stiller flere krav til hvorledes en kuvert skal udformes, har jeg rettet mig ind efter disse, for ikke at skabe problemer i forsendelsen. Der skal være et friholdt areal på 22,5 x 140 mm til print af stregkode og flytteoplysninger. Hvis stregkoden ikke kan placeres på kuverten, påsættes en selvklæbende stregkodelabel. Derfor er det ikke hensigtsmæssigt at placerer loge og kontaktoplysninger inden for dette felt. Derudover kræver de også et fritholdt felt i øverste højre hjørne på 74 x 40 mm til porto. Jeg har placeret mit logo nederst i højre hjørne samt de vigtigste kontaktoplysninger og en rød linje for at skabe samhørighed. Dog er overstående ikke indenfor stregkodearealet. På bagsiden har jeg placeret afsender oplysninger i én linje øverst i højre hjørne i henholdt til Post Danmarks ønsker. Derudover går den røde linje fra forside igennem på bagsiden. Visitkort På mit visitkort har jeg placeret mit logo øverst i højre side. Dernæst kommer navn, profession og adresse oplysninger. I bunden er; webadresse, email og mobil nr. i én linje. Denne er efterfulgt af en rød linje. Bagsiden af visitkortet er hvid med loget placeret i midten.
A4 format M5 for og bagside 54 mm 54 mm 90 mm 90 mm