Grafisk. Workflow. Side 1

Transkript

1 Grafisk Workflow Side 1

2 Side 2

3 Kunde: Inger Marie, Hotel Inger Målgruppe: Aldersgruppe mellem år. Hvad har jeg bidraget med? Mit bidrag til denne opgave er redesign af Hotel Inger s hjemmeside. Inger har selv stået for teksten på siden og har valgt at den skal ligne lidt den forhenværende hjemmeside. Jeg har taget udgangspunkt i den nuværende hjemmeside, og forsøgt at få den til at være mere stilren og nemmere at overskue. Opgaven: (Denne opgave er fiktiv) Opgaven gik ud på at redesigne Hotel ingers hjemmeside, da den nuværende hjemmeside ikke rigtig fanger kundernes opmærksomhed og så er den heller ikke brugervenlig, da den ikke er responsiv. Ejeren af Hotel Inger bad mig om at lave et nyt design til deres hjemmeside, og et af mine krav var at jeg skulle beholde alle menu punkterne, men at faa det til at se bedre ud. Udover teksten har jeg haft frie tøoejler til at gøoere alt hvad jeg synes har væaeret noedvendigt for at goere siden mere indbydende at komme ind paa for kunderne. Min opgave er at lave hjemmesiden mere frisk og give den et moderne pust. Det goer siden nemmere at overskue men breder ogsåaa maalgruppen for gæaesterne. Oveni skal jeg goere siden responsiv og tilføoeje nogle indbydende billeder. Programvalg: Brackets Arbejds proces: 1. Det første jeg gjorde, da jeg begyndte denne opgave var, at kigge den nuværende side godt igennem. Finde fejl og mangler, så jeg kan udbedre dem i det nye design. 2. Jeg startede på et flowschart, for at finde ud af om jeg ønskede at lave noget af det til drop down menu. 3. Dernæst begyndt jeg at lave skitser til forskellige layouts, hvor jeg fik inspiration fra andre sider, som der er billeder af længere nede. 4. Da jeg havde fundet min endelige layout, begyndt jeg at kigge efter fonte, og ville gerne bruge en overskriftsfont der mindede lidt om den hun har i forvejen, og der fandt jeg Allura og andre fonte der skulle bruges skulle være meget letlæselige, så det er nemt for ældre mennesker at læse. 5. Søgning efter billeder der passer til overskrifterne, og billederne fandt jeg alle på Pexels.com 6. Nu begynder kodningen for alvor, hvor jeg startede med at lave index siden, så jeg kunne kopierer de koder jeg også skal bruge på de andre sider, så jeg ikke hele tiden skulle sidde og rette til på alle siderne. 7. For mit vedkommende har jeg nemmere ved at gøre hjemmesider responsive efter jeg har kodet alt det nødvendige, så jeg begyndte at lave siden responsiv, så den også er brugbar på mobile enheder og tablets. 8. Optjekning på at alt virker og små rettelser til de ting som ikke virker som de skal, hermed kommer padding så tingene ikke kommer til at stå for tæt. 9. Nu er siden færdig og skal præsenteres for kunden. Hvis kunden ikke kan lide produktet skal det naturligvis laves om. Side 3

4 Flowchart Forside Book Restaurant Information Værelser Bestillinger Menu Arrangement De Gode gamle Selskaber Historie Omgivelser Arrangement Begivenheder Arrangement Tilbud Links Grunden til at jeg har lavet et flowchart er primært hvis der er andre der skal arbejde videre på siden, en anden gang, så kan de kigge på flowchart og finde ud af hvilke sider der hænger sammen og linker til hinanden, det gør det meget nemmere, så man ikke skal ind og lede efter de forskellige sider hver gang. Dette flowchart viser fx at Book - åbner op for at kunne komme ind på Værelser og bestillinger via en dropdown menu. Drop down menuen gør det meget nemmere at overskue de mange menupunkter, da mange af dem ikke er synlige i første omgang, først når man bevæger sig rundt på hjemmesiden Side 4

5 Layout & Responsivt Designkrav: Ét af designkravene var at jeg skulle prøve at bruge så meget som muligt fra den gamle side, så hun ikke mistede nogle af sine menupunkter og diverese som kontrol rapport og andre links til aktuelle sider. Layout: Siden har jeg width på 100%, hvilket nav en også har fået så det giver en helhed. tekstbokse har fået en width på 30% og er centreret på siden ved hjælp af margin: 0 auto; Billeder: background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background position: bottom; *nødvendigt ved nogle billeder. medie screen and (max-width: XXX px; ) Ved hjælp af denne formel, kan jeg gøre hjemmesiden responsiv til måde mobil, tablet og computer. Formlen gør således at jeg kan bestemme hvilken størrelse hvert enkelt punkt i hjemmesiden skal have når siden fx ryger ned på en bredde på 300 px, så man er sikker på at man kan se hele punktet når siden bliver sat ned i only screen and (max-device-width: 480px) er lavet til den mobile enhed, så når siden kommer ned i denne størrelse, vil den bruge de refferencer jeg har sat til istedet for de ellers brugte refferencer. Side 5

6 Programmering Kodning Jeg har valgt at kode hjemmesiden fra bunden af ved hjælp af Brackets, grunden til at jeg valgte at kode siden fra bunden var primært for at blive mere i kontakt med koden og for at kunne brgrænse mig en smule ved at jeg ikke kender alle koder endnu, langt fra. Derfor kunne jeg blive udfordret ved at bruge nogle koder jeg ikke har brugt før, fordi kunden ønsker disse koder. Der er brugt en smule Java script i forbindelse med at få implementeret de font typer jeg har valgt at bruge som er web fonts. De skal ligges ind mellem: <head> <meta charset= UTF-8 > <title>selskabsmenu</title> <link rel= stylesheet href= css/style.css > <script src= ></script> <script src= ></script> </head> Side 6

7 Skelet Side 7

8 Fonte Fonte: Allura Regular 50 px Denne font er brugt til følgende områder i hjemmesiden H1 og H2 Denne font er brugt som H1 er fordi, at den minder meget om den nuværende font der er brugt på hjemmeside, men jeg synes at Allura er noget skønnere at kigge på end den nuværende font. Oveni kan man kun se den nuværende font på nogle computere, og med den nye font kan den ses på alle. Abel (webfont) 15 px Denne font er brugt til følgende områder i hjemmesiden al brødtekst samt kontakt information. Denne font er brugt som brødtekst fordi, at den er letlæselig og den virker ikke så tung for øjnene. Den er også brugt ved kontakt info, så der ikke kommer for mange forskellige fonte med ind i siden. For mange fonte kan også være med til at gøre det mere forvirrende, for kunderne at finde rundt i siden. Fonten er også meget venlig med hensyn til at det er lidt ældre mennesker som typisk bruger denne hjemmeside. Helvetica H6 Jeg har brugt denne font til de sider der er under opbyggelse, og derfor ikke har noget side layout. På disse sider har jeg indsat en kort tekst der beskriver at siden er under opbyggelse på både dansk, engelsk og tysk. Jeg synes den ligger godt ind, og man kan se at der er noget anerledes på siden kontra de fungerende sider, så folk hutigt kan se at siden ikke kan bruges. Side 8

9 Skitser Side 9

10 Inspiration Side 10

11 Kvalitetsvudering Det er en opgave jeg har brugt lang tid på at lave, da jeg allerede begyndte at lave den på grundforløbet som en lille opgave om at skulle lære at lave dropdown menu er. Men efter grundforløbet blev jeg mere hooked på faktisk at gøre noget ud af denne side, og brugte derfor min fritid på at redesigne den. Resultatet er blevet meget godt efter min kunnen, dog kunne jeg godt have brugt mere tid på tekstombrydning og jeg ville egentlig også gerne have haft nogle billeder ind på siden, så det ikke bare er tekst der skal gøre trikket. Oveni har opgaven faktisk været lidt svær, fordi at jeg dårligt nok havde overblik over den originale side, da der er så meget galt med den, så det kan kun være blevet bare lidt bedre det resultat jeg har fået ud af det. Side 11