grafisk design Se webappen på din mobil

Transkript

1

2 ideudvikling Jeg har valgt at bruge kulturbegivenheden Aarhus Festuge, som udgangspunktet i min svendeprøve. Jeg vil redesigne deres marketingsmateriale såsom logo, magasin, plakater m.m. Derudover vil jeg tilføje nogle elementer selv, som jeg synes festugen kunne blive bedre ved. Der har jeg valgt en webapp, med alle arrangementer og et kort over de steder de foregår i Aarhus. Et gennemgående træk i alt materialet vil være min opdeling af Aarhus Festuge i tre kategorier: Musik, Kultur og Mad. Det vil bliver præsenteret på forskellige måder.

3 grafisk design I kernefagligheden grafisk design har jeg valgt at lave en webapp til Aarhus Festuge. Webappen skal fungere som et infomationscenter, som man har lige ved hånden. Den giver adgang til programmet, kort over stederne hvor der bliver afholdt arrangementer, nyheder omkring festugen og andet praktisk information. Til dette har jeg brugt programmerne Photoshop og Aptana Studio 3. Se webappen på din mobil

4 udvikling af webapp Før jeg gik igang med at designe et layout til webappen, undersøgte jeg blandt andet hvad festugen vil kunne bruge en webapp til og hvad den så skulle indeholde. Jeg har også diffineret en målgruppe til en webapp omkring Aarhus Festuge. Funktion Grundlaget for at udvikle en webapp til Aarhus Festuge var, at flere besøgende forventer i dag, at de hurtig kan finde alt information online, og at den vil være let tilgængelig også via alle slags smartphones. Overvejelser Opbygningen af webappen skulle syne og fungere som et online informationscenter. Derfor skulle designet dertil være let gennemskueligt med et simpelt overblik. Brugeren af appen skal uden at tænke for meget finde det logisk, hvor man søger noget bestemt informatioen. Målgruppe Aarhus Festuge er afsenderen af denne webapp. Modtageren af webappen vil være besøgende eller mulige besøgende af Aarhus Festuge, som i forvejen finder det naturligt at bruge sin smartphone som et opslagsværk.

5 Mindmap mobilbrugere børn erfarne webapp brugere førstegangs webapp brugere unge voksne ældre besøgende brugere tilgængelig dækker hele byen oplevelser arrangementer Aarhus Festuge + Webapp årlig begivenhed kendetegn brugervenlig overskuelig stort program mange besøgende simpel logisk kompatibilitet godt ry kun mobilversion alle slags smartphones Jeg har udfra ordene»aarhus Festuge«og»Webapp«lavet mindmaps, som skal hjælpe med skitserne til designet. Skitser Udfra de ideer jeg fik ned i mine mindmaps, kunne jeg gå igang med at skitsere nogle mulige designs til webappen

6 flowchart Index Program Hele festugen 28. august 29. august 30. august 31. august 01. september 02. september 03. september 04. september 05. september Kort Nyheder Info Musikhuset Nyhed 1 Amifiscenen Nyhed 2 Tivoli Friheden Nyhed 3 Tangkrogen osv. Efter designet var på plads, udformede jeg et flowchart, så jeg kunne få et overblik over webappens opbygning. Brugervenlighed i koden Et script, som tjekker hvilken skærmstørrelse brugeren sidder ved, så brugeren bliver ført til desktop eller webapp version For at brugeren nemt kan finde frem til noget bestemt information, har jeg lavet valgmuligheds-bar

7 fontvalg a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å Jeg har valgt at bruge en google font kaldet Lato, som er en sans-serif. Fonten fungere godt som brødtekst, da den har et meget gennemsnitlig og standard sans-serif udtryk, men samtidtig fungere den også godt i større størrelse på grund af de semi- afrundede detaljer i bogstaverne. Som designeren selv beskriver den:»mandlig og kvindelig - alvorlig, men venlig - med følelsen af sommeren«. Det citat forklar rigtig godt grunden til valget af denne font. Skriftstørrelsen på brødteksten er valgt i forhold til at det skal læses på en smartphone, uden at man skal bruge zoom funtionen. farvevalg C 00 M 75 Y 85 K 00 R 235 G 095 B 046 HTML EB5C2E C 40 M 05 Y 00 K 00 R 162 G 211 B 243 HTML A2D3F3 C 70 M 85 Y 40 K 45 R 073 G 042 B 071 HTML 492A47 C 60 M 52 Y 51 K 21 R 100 G 100 B 100 HTML Valget af farver til webappen er genbrugt fra logoet, så det på den måde er med til at skabe en rød tråd gennem hele designet. Valget bag de enkelte farver står på side 14.

8 designelementer Ikoner Jeg har designet fire ikoner til webappens menu. De første ikoner jeg lavede var meget neutrale i gråtoner, fordi jeg ikke synes de skulle være for dominerende. Jeg så herefter at de blev alt for neutrale og faktisk forsvandt lidt. Jeg valgte derfor at bruge de samme farver som er gennemgående i resten af Aarhus Festuge materialet. Piktogrammerne er lavet udfra at de skal være så simple de kan, samtidig med at de er nemme og logiske at gemmenskue. Dog giver det en hjælp at menupunktet også er skrevet. Første design Andet design Tredje design Kasser Det meste af designet er bygget op af kasser, så det er nemt og overskueligt at finde rundt i alt den information, som er på siderne.

9 Layout - index Logo Navigation

10 Layout - program Logo Overskrift Valgmuligheds-bar En begivenhed Ens layout Navigation

11 Layout - program - bestemt dato Logo Overskrift Valgmuligheds-bar En begivenhed Ens layout Navigation

12 Layout - Kort Logo Overskrift Valgmuligheds-bar En kort-kasse Kort er hentet via google maps Navigation

13 Layout - Kort - valgt sted Logo Overskrift Valgmuligheds-bar En kort-kasse Kort er hentet via google maps Navigation

14 Layout - Nyheder Logo Overskrift En nyhed Læs mere funktion der viser et billede og mere tekst Ens layout Navigation

15 Layout - Nyheder - åben nyhed En nyhed Ens layout Luk nyhed funktion der skjuler billedet og det ekstra tekst Navigation

16 information Logo Overskrift Informations menu med genveje til teksten nedenfor Informationskasse Ens layout Gå til toppen funtion der fører tilbage til menuen i toppen Navigation

17 Svendeprøve 2014 Dokumentation Trine Krogh Andersen