Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 1

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Indhold Projekt Beskrivelse... 3 Temaer... 3 Afsender... 4 Budskab & Kommunikations formål... 4 Tidsplan:... 5 Målgruppe Beskrivelse... 6 De 6 Designparametre... 7 Skitser... 9 skelet Index... 22 Flowchart... 25 CSS Regler... 26 Layout... 27 Evaluering af egen indsats... 29 Link til siden... 42 2

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Projekt Beskrivelse Kunden ønsker at få lavet en hjemmeside, aarhusportalen. Siden skal indeholde en indexside samt mindst 5 underliggende sider og en undermenu. Kunden ønsker også at siden skal indeholde mindst 2 eksempler på interaktivitet. Eksempel vis JavaScript, jquery eller PHP. Der skal forekomme en formular på en af siderne, hvorefter den skal linke til en takkeside. Derudover ønsker kunden et logo og logotype, som kun skal bruges sammen og ikke hvert for sig. Logoet skal fungere i alle størrelser, farver og i sort og hvid, derfor skal dette laves i illustrator som er vektor baseret. Der skal anvendes forskellige billeder eller grafik eksempler på alle siderne. Og der skal være mindst 1 eksempel på en sammenkopiering af min 3 billeder, som selvfølgelig skal se lækker og naturligt ud. Alle billeder skal være i god kvalitet, og optimeres til web brug. Kundens krav til skærmopløsning er at det skal forholde sig relevant til den målgruppe sitet høre til. Temaer Jeg vil beskrive mit tema som simpelt, moderne, stilet og let overskueligt. Jeg har lave en sider der kan blive kæmpe stor, men den skal alligevel kun poste det ud som brugeren ønsker at få ud af siden. Jeg har gået en smule efter en "artikel hjemmeside" som skal være minimalistisk i det begreb af du ikke få kastet en hel masse forskellige information i hovedet sekundet man indtræder på siden. Men her har jeg valgt specielt at gå ind under nogle specielle emner, Kultur, arkitekt, seværdigheder, Overnatninger, Restauranter og Værtshuse /bar mm. 3

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Afsender Afsenderen for denne hjemmeside er VisitArhus, de ønsker en hjemmeside som kan bruges af mange forskellige mennesker, derfor skal afsender virke troværdig og moden. De skal også have et seriøst image for at siden også kan virke som en seriøs side. Budskab & Kommunikations formål Budskabet med siden, er at fremme turismen i Aarhus. Derudover at give folk et leksikon over Aarhus som alle kan benytte sig af. Både for folk som allerede bor i byen men også for tilflyttere. Dette gøres via ren information, brugerne indtaster selv hvad han/hun skal bruge og "artikler" om det relevante emne kommer frem. 4

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Tidsplan: Aktiviter / opgaver Projekt beskrivelse mm målgruppe inspiration/ Skitser Farve/fonte skelet flowchart layout finpudsning word opsætning kodning jquerry opsægning Uge Uge 00 Uge 00 Planlagte Dag ons tor fre lør søn man tir ons tor fre lør søn man tir opgaver i alt Forbrugt i alt P 2 2 F 2 2 P 3 3 F 3 3 P 3 3 F 2 2 P 3 3 F 3 3 P 4 4 F 3 3 P 2 2 F 0 P 6 6 F 2 4 2 8 P 6 6 12 F 6 3 12 P 6 6 6 18 F 3 0 P 6 6 F 0 Planlagt i alt P 5 6 6 0 0 6 6 6 6 6 0 0 6 6 59 Brugt i alt F 9 7 5 0 0 6 0 0 0 0 0 0 0 0 33 Timeløn i Alt 400 kr. 23.600,00 5

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Målgruppe Beskrivelse Min målgruppe til aarhusportalen er 18 år - 40år jeg går efter at ramme den moderne type, som interessere sig for kultur, byliv og en type som kan lide at komme ud og opleve noget. Mit produkt henvender sig til personer der gerne vil flytte til Aarhus, allerede bor i Aarhus eller turister. Min målgruppe kan man sige er ret bred hvad angår økonomi. Da der både er information om dyre restauranter men også om gratis glæder så som skov ture mm. Mit produkt er perfekt til familien med børn som mangler en aktivitet de kan bruge deres tid på i deres weekender, ferier mm. Men derimod er den også god til alle andre som ønsker at finde en oplevelse at bruge tid på F.eks kæreste par. Efter denne målgruppe segmentering, tilhøre mine kunder den lyserøde gruppe, som har fokus på familien,. Og elsker hjemmeligt hygge. For eksempel elsker denne gruppe at bage, holde fødselsdag, Jul og påske mm. Her er aktiviteten Den Gamle by et glimerne eksempel, da det virkeligt bygger på gamle traditioner. Man kan nemt gå rundt med familien og hygge sig en hel dag. Denne person vil gå ind på aarhusportalen og finde information, åbningstider og priser på siden. Personas: Vi henvender os både til mænd og kvinder med mulige børn men dette er ikke noget krav. De skal have en fast indtægt/ løn og en fast økonomi. Personen kan gode lide og have styr på tingene og måske planlægge deres dag. 6

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 De 6 Designparametre Komposition: Jeg har valgt at opsætte min hjemmeside med en header, content og footer. Min header er en stor søge bar, som også er hele konceptet i hjemmeside, for at gøre den dynamisk og sjov. Under den, er der placeret en "teaser" boks, den er lavet ud af 1 font som er placeret tilfældigt i forskellige størrelser. Dette er lavet for at give noget liv og for at gøre siden rigtig sjov og lækker. Min content sektion er oprettet af forskellige artikel teasers, samt et slide show på forsiden. På min 'undermenu' side, er der en gruppe forskellige små teasers som linker videre til selve artiklen. På siden hvor hele artiklen er for eksempel SKRU NED, er der et stort stemning billede, efterfulgt af en mere beskrivende længere tekst også en boks med et google maps. Min footer er meget simpel, her er der kun et link til en kontakt/om aarhusportalen side, samt en formular til tilmelding af aarhusportalens nyhedsbrev. Typografi: Her har jeg valgt at holde mig til 2 simple fonte. De ligner lidt hinanden men Lucida Console som er min overskrift font er lidt mere firkantet. Jeg bruger arial til al min brød tekst. Farver: Jeg har valgt en grøn farve som grund farve, dette gør jeg for at skabe troværdighed. Derudover har jeg valgt at bruge en farve til hvert emne på siden, jeg har tænk lidt over emnerne og har valgt farver ud fra dette. For eksempel er brun til arkitektur, hvor jeg havde gamle mursten / gamle huler eller slotte i mine tanker. 7

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Illustrationer: jeg bruger en masse forskellige billeder, både på forsiden men også på alle undersider. Dette gør jeg for at skabe lidt liv på min skide, derudover kan man også se et udsnit af for eksempel den restaurant man overvejer at besøge. Animation: Jeg bruger en lille animation på min forside via en billede slider. Dette gør jeg for at fange brugerens interesse for siden, sådan at de ikke lukker siden kort efter besøget og bliver på siden. Lyd: Jeg har valgt ikke at bruge lyd på min side, da jeg selv synes at det kan være trælst for brugeren at der "popper" lyd op når man åbner siden. 8

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Ide udvikling / Brain storm 9

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Skitser Ide udviklings fasen 10

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Funde ide: Layout udtænkes 11

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Under sider 12

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Font Mine overvejelser: Først tænkte jeg at bruge den samme font som jeg har brugt til mit logo - Harabare. Men jeg valgte at gå over til en lidt mere neutral font til mine overskrifter og spotboks. Den er meget simpel, endda lidt minimalistisk som mig projekt bygger på. Fonten Harabara Mjøderiet abcdefghijklmnopqrstuvwxyzæøå - 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ Fonten Lucida Sans Unicode Mjøderiet abcdefghijklmnopqrstuvwxyzæøå - 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ 13

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Til min brødtekst har jeg valgt at bruge en 100 % web sikker font. Her stod valget imellem Arial, Verdana og Helvetica. Jeg valgte Arial fordi den er web sikker både for mac og windows hvor Helvetica er en mac type, og derfor kun er 100% web sikker på Mac. Derudover er Arial let læselig, og er ikke en alt for tynd skrifttype så den bliver svær at læse. Fonten Arial Brød tekst, brød tekst abcdefghijklmnopqrstuvwxyzæøå - 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ Fonten Verdana Brød tekst, brød tekst abcdefghijklmnopqrstuvwxyzæøå - 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ Fonten Helvetica Brød tekst, brød tekst abcdefghijklmnopqrstuvwxyzæøå - 1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ 14

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Farver Mine første ideer Jeg havde ideen om at mine forskellige emner til siden skulle have hver sin farve. Sådan at brugeren kan se lidt forskel på siderne. 15

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Farvevalg. Jeg har tænkt en del over farvevalget til denne opgave, og jeg har derfor været langt omkring med en hel masse forskellige muligheder. Her kan du se et udsnit af overvejelser. Her kan du se at jeg har valgt de mange farve: Jeg bruger den grønne på alle siderne, med 1 af de andre farver sammen med. De 2 sort/grå nuancer bruger jeg til mine skrifttyper 16

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 Farverne Koder og position forklaring HEX: # A2B139 HEX: # E1CC20 RGB: 162-177 - 57 RGB: 225-204 - 32 Denne farve er min grund farve, den bliver brugt til min søg knap i toppen af siden. Samt min slider på forsiden. Jeg bruger også min grønne farve på min kultur.html side Denne gule farve bruger jeg på min forside til min nyheds sektion. Som overskrift boks. HEX: # 3A2414 HEX: # B62026 RBG: 58-36 20 RGB: 182-32 - 38 Denne Mørke brune farve bruger jeg til min arkitektur.html side Som overskrift boks. Denne røde farve bliver brugt til min seværdighed.html som overskrift boks. HEX: # 274599 HEX: #EA882D RGB: 39-69 - 153 RG RGB: 234-136 - 45 Denne blå farve bruger jeg på min overnatning.html side. Som overskrift boks. Denne orange farve har jeg brugt på min Resturant.html side. Som overskrift boks 17

Marc Creutzberg aarhusportalen AARHUSTECH 19/06 2012 HEX: # 274599 HEX: # 333333 RBG: 39-69 - 153 RGB: RGB: 51-51 - 51 Denne lilla farve har jeg brugt til min natteliv.html side. Som overskrift boks Denne sorte nuance har jeg brugt til mine overskrifter, jeg valgte at bruge en stort nuance som ikke har helt sort altså #000 da jeg tit synes den kan blive for voldsom og for uprofessionel HEX: # 78787A RGB: 120-120 - 120 Denne farve bruger jeg til min brød tekst, her har jeg valgt at bruge en grålig nuance sådan at min brød tekst ikke tager blikfang fra et eventuelt billede eller overskrift.

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 Logo overvejelser 19

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 20

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 logo 21

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 skelet Index 22

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 skelet Natteliv 23

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 Skelet Skru ned 24

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 Flowchart 25

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 CSS Regler Body: Background-image: bg.gif Font: normal 12px/18px Arial Color: #212121 Nav: text-decoration: none; color: #333333; Hover: #a1ae14 padding: 5px 0 2px 0 Spotbox span1: 14px, Lucida Grande span2: 24px, Lucida Grande span3: 34px, Lucida Grande Typografi: h1: logo.png h2: 18px, Lucida Grande #fff h3: 18px, arial #292929 h4: 14px, bold - arial #a1ae14 p : 12px, arial # 8a8a8a Slider: Nivoslider plugin slider_img1.jpg slider_img2.jpg slider_img3.jpg slider_img4.jpg slider_img5.jpg Article: Nyheder: BG-color: # e3cd14 Kultur: BG-color: # a1ae14 Arkitektur: BG-color: # 3e2104 Seværdighed: BG-color: # b70606 Overnat: BG-color: # 0f2eb1 Restauranter: BG-color # ea8830 Natteliv: BG-color # 3b1d5e Article: Image lille = img/article/article_xxxx.jpg stor = img/article/article_stor_xxxx.jpg Formular: Nyhedsbrev: Width: 200px Height: 20px Lille: Width: 125px Height: 20px Stor: Width: 260px Height: 20px Textarea: Width: 260px Height: 180px 26

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 Layout 27

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 28

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 29

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 30

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 31

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 32

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 33

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 34

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 35

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 36

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 37

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 38

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 39

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 40

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 Evaluering af egen indsats Jeg vidste at tiden var knap i denne opgave, derfor valgte jeg at arbejde en del hjemme fra for at være sikker på at kunne nå at have et produkt færdigt, som jeg kan være stolt af. Jeg følte at jeg var nød til hurtigt at få min hoved ide hurtigt i gang, dette skyldes at når jeg først har min ide i gang og kan jeg se fremgang så går det stærkt! Jeg synes selv at første del af mit projekt er gået som forventet, jeg blev heldigvis færdig i god tid, sådan at jeg ikke har skullet stresse for at blive færdig. Jeg har endda nået at kode en lille smule. Dette gjorde jeg mest for at tjekke om min ide kunne lade sig gøre, uden at skulle køre min hjemmeside server site. Men heldigvis kunne jeg klare dette problem med en lille smule jquerry. 41

Marc Creutzberg aarhusportalen AAHUSTECH 19/06 2012 Link til siden http://www.mediegrafiker-ats.dk/12web1b/eksamen/marccreutzberg Backup link http://aarhusportal.marccreutzberg.dk/ 42