INTRODUKTION... 3 PROBLEMSTILLING... 3 PROBLEMFORMULERING... 4 METODE... 4 AFGRÆNSNING... 5 ANALYSE... 5 KOMMUNIKATION... 5 SEGMENTERINGSPROCESSEN...



Relaterede dokumenter
Grundforløbsprøve Projektbeskrivelse

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Grafisk produktion & workflow

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Programvalg Dreamweaver CC, html Photoshop CC 2015

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

Produkt. Index side GRAFISK DESIGN

GRAFISK PRODUKTION & WORKFLOW. Endotest website

Dokumentation. Karen-Louise Fejerskov

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S.

WORKFLOW & PRODUKTION

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen.

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.

GRAFISK WORKFLOW - RESPONSIV WEBSIDE

Brugervejledning til Design Manager Version 1.02

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

Grafisk workflow. Se siden her:

Navn: Skole: Anslag: Emne: Klasse: Dato: URL:

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se.

Van, Olaf, Stine & Nicolette Style and Experience

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning.

Sabine Puk Sørensen Svendeprøve portfolio

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen.

Active Builder - Brugermanual

Grafisk workflow 3. Hovedforløb

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2

1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

Grafisk Design 70% Skitser

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder.

GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

ActiveBuilder Brugermanual

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

WORKFLOW & GRAFISK PRODUKTION

Produktion og workflow STINE D. LAURSEN

Portfolio. Udvikling af min portfolio Link til portfolio: Michell Aagaard Dranig

Grafisk Design. fra idé til visuelt udtryk Benett

Trin for trin guide til Google Analytics

FRISØR VEST. Link til hjemmesiden: Frisorvest.github.io. Lavet af: Aleksander, Benjamin, Line & Cathrine

Grafisk design. Ide. Designprocess. Målgruppe

kollegiekokkenet.tmpdesign.dk Side 1

Redaktørvejledning for Skriv en artikel

portfolio GRAFISK WORKFLOW

Projekt - Valgfrit Tema

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed

GRAFISK DESIGN. Kenneth Friis Petersen

Style & Experience project

GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE

Når man skal udfylde i feltet: branche, kan det være relevant, at se valgmulighederne lidt igennem for at finde den mest passende.

Projekt 1 Re-design af Odense Bunkermuseum

OPGAVE: WELOVEORGANIC.COM WEBSHOP

sweetbot.design Kodning og design af hjemmeside Navne: Emma Blæsbjerg, Michell Aagaard Dranig og Andreas Oliver Hansen

KALAS FESTIVAL. Link til hjemmesiden: Laura Lundby Gravesen

5 ARBEJDE MED EDITOREN

Portfolioudvikling. Line la Fontaine. Multimediedesigner

GRAFISK DESIGN. webdesign af pl.dk

GRAFISK DESIGN DOTHOST HJEMMESIDE

Kom godt i gang med I-bogen

Opgaven. Brugervenlighed. Designparametre. Følgende krav var : Research. Målgruppe. Konklusion. sitet ikke bliver for mørkt.

Mit grafiske workflow inkluderer:

Grafisk produktion og workflow

GRAFISK PRODUKTIONSFORSTÅELSE

Indholdsfortegnelse Valg af opgave... 2 Introduktion... 2 Problem... 2 Målgruppe... 2 Afsender... 2 Budskab... 2 Kodning... 3 Effekt...

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, Der refereres fra nu af blot

Generel information. Brugere. Hjemmesidens lay-out. HIF Hjemmeside How to do

WOODKID. The Golden Age. Banner Projekt - 1 Semester, CPH Business, MUL-A13E. Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm

WORKFLOW. RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling.

Opgaven. Væsentlighed. Problemstillinger. Browserkompabilitet. Layout. Kvalitetsvurdering. Format. Processer. Komposition og modulopbygning

Hjemmeside design til Everyday Health

GRAFISK WORKFLOW. 1 Grafisk workflow

En praktisk håndbog om tips til anvendelsen af. som effektivt redskab

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

Vejledning. Indhold. Side 1

Produktbeskrivelse - Grafisk workflow

Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN

I denne manual kan du finde en hurtig introduktion til hvordan du:

grafisk workflow OPGAVE: EMBRACE-IT WEBSITE

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

GRAFISK WORKFLOW Hjemmesidedesign

Portfolio redesign. Kia Dahlen! 1. semester eksamen! MUL-A 2013! !!!

Opgavebeskrivelse. Opgaveløsningen

Undervisningsmateriale - Rapport

Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse

HESTBJERG WEB GRAFISK WORKFLOW

Roskilde Tekniske Gymnasium. Afsluttende opgave Ældre og handicappede Frederik & Peter

Udover denne simple tidsplan har jeg også lavet et GANTT-kort for at vise den reelle tid jeg har brugt på hver opgave.

Outlook 2010 opsætning

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT

Opstart. I gang med Dreamweaver. Læs mere om...

Vejledning for LOF s afdelingshjemmeside

Transkript:

1

INTRODUKTION... 3 PROBLEMSTILLING... 3 PROBLEMFORMULERING... 4 METODE... 4 AFGRÆNSNING... 5 ANALYSE... 5 KOMMUNIKATION... 5 SEGMENTERINGSPROCESSEN... 7 GALLUP... 7 Delkonklusion... 9 DESIGN... 10 MODERNISME: (VORES EGEN)... 10 VORES EGEN STILART:... 11 THUMBNAILS... 13 SITEMAP... 13 WIREFRAME... 14 PROTOTYPE... 14 FÆRDIGT SITE... 15 Delkonklusion... 15 INTERAKTION... 16 KODEPROGRAMMER... 16 SKÆRMOPLØSNING... 16 Delkonklusion... 21 KONKLUSION... 21 LITTERATURLISTE... 22 INTERNET-ADRESSER... 22 BØGER... 22 BILAG... 23 BILAG 1 GALLUPS KOMPAS... 23 BILAG 2 DIGITALE BUSINESS MODEL... 23 BILAG 3 THUMBNAILS... 24 BILAG 4 ALIGNMENT... 25 BILAG 5 SUBSITES... 26 BILAG 6 GANT CHARTT... 27 2

Introduktion Går du og er færdig med en gymnasial uddannelse og ikke helt ved, hvad du skal læse videre til. Syntes du ernæring, mejeri, proces- og fødevareteknologi lyder interessant, så er procesteknolog måske en uddannelse lige for dig. Uddannelsen tager kun 2 år, og det sidste 1½ år vælger du en af de 4 grene som du vil uddanne dig som. Uddannelserne er - Ernæringsteknologi - Mejeriteknologi - Procesteknologi - Fødevareteknologi Det første halve år er grundforløb, hvor du sammen med de andre studerende finder ud af, hvad uddannelsen indebære og du bliver informeret om, hvad de forskellige retningslinjer handler om. Efter det halve år vælger du så den retningslinje, som du gennemføre i løbet af det næste 1,5år Du kan læse meget mere om uddannelsen ved at klikke ind på EAL's hjemmeside og derefter ind under vores helt nye side som indeholder alt, hvad du skal bruge om procesteknolog. God fornøjelse. Problemstilling Hvordan kommer vi frem til bedst mulige løsning, for vores subsites, for at gøre procesteknolog uddannelsen mere attraktiv for unge, som ønsker at gå denne vej. Hvad skal fange de unge, for at vælge denne uddannelse? 3

Problemformulering Vi er blevet bedt om at komme med mindst 3 helt konkrete subsites til Procesteknolog uddannelsen, for at gøre det nemmere for studerende, at vælge retning, og gøre denne uddannelse mere attraktiv for unge, samt en brugervenlig hjemmeside. Hvad skal fremhæves? Hvordan laves den mest brugervenlig? Hvordan vedligeholdes siden nemmest? Hvilke feltstudier har vi valgt? Metode Vi har valgt at bruge flow og online flow, for kort at komme ind på, hvordan en side optimalt kommunikerer ud til forbrugerne, når den loader siden osv., for at få en optimal brugeroplevelse. Gallups kompas anvender vi, da vi vil have vores segmenter delt lidt mere op i nogle kasser, for at stille dem op i nogle mere specifikke kriterier. B2C markedet er egentlig ikke en metode, men mere et udtryk for, at processen sker imellem business 2 konsumer, vi vil dog stadig nævne den, fordi det er det marked vi er på i opgaven. Demografisksegmentering deler igen segmenterne op i nogle grupper, men vi ville godt vise, hvordan vores målgruppe, kan kortlægges af den befolkning der er, f.eks. angående køn og alder. Dette bliver også nævnt i vores statistik fra DST. 4

Den digitale business model, anvender vi fordi, procesteknolog uddannelsen har brug for en større eksponering, da tilgangen til uddannelsen er meget lille, og derigennem benytter vi sociale assets og web assets til dette i modellen. Vi har skitseret vores ideer i hånden, Photoshop og illustrator, eftersom disse programmer er bedst til at fremvise og illustrere vores ideer, fra hånd til computer. Vi har også benyttet en ideproces og arbejdsprocs metode, for netop at komme frem til vores endelige koncept og målgruppevalg, i forhold til procesteknolog uddannelsen. Afgrænsning Vi er blevet afgrænset, da vi ikke kan få en video til, hver af de fire uddannelser, da en af dem, foregår i vejle. Eftersom vi har kort tid til dette projekt, har vi fravalgt, at få en video til hver, men vil stadig blive erstattet, med et layout, som om der skal være en video. Udformning af et spørgeskema, er fravalgt, da vi først kunne kommer derud torsdag d. 31/5, derfor fravalgte vi dette og ville hellere implementere videoerne. Under udformningen af videoen, vil vi også få svar på nogle spørgsmål, som vi evt. måtte have, i forhold til vores feltstudier. Analyse Kommunikation Vi har valgt at tage en bestemt indgangsvinkel på vores ideproces, for at vores endelige koncept kan blive kommunikeret korrekt, så der opnås en high involvement, fra forbrugerens side. Det vi ønsker at kommunikere bedst, ved hjælp af vores feltstudier og ideproces 5

er, at gøre procesteknolog uddannelsen mere attraktiv for de unge, så de få det rigtige afsæt fra starten af, igennem deres karriere. Igennem vores ideproces, diskuterede vi frem og tilbage, vores indgangsvinkel på vores endelige koncept. Vi ville prøve at gøre det så overskueligt og nemt som muligt. Siden skulle kommunikere simpelhed og funktionalitet. Unge som surfer rundt på nettet, for at undersøge deres fremtidige studie, søger også efter noget, som kan give dem nogle stærke forbindelser i fremtiden, som måske bliver skabt igennem deres studieklasse, så derfor vil vi også sætte en lidt mere personlig og social vinkel på vores koncept. Dette gøre vi igennem nogle videoer, som vi optager, hvor en studerende fra hver af de 4 uddannelser, ganske kort siger, hvorfor de valgte den, og hvad de ønsker at få ud af den. Dette gør også at sitet opnår et godt flow, med skrift og noget dynamisk, for at fange forbrugerens interesse, og undersøge sitet yderligere. Når sitet bliver brugt, skal det online flow også tilpasses, så det er en klar og flydende navigation på sitet. Vi har valgt at lave en video sekvens, da vi igennem vores feltstudier, ikke havde den tid der skulle til, for at udforme et evt. Spørgeskema, samt observere brugerne. Vi får et indblik i uddannelsen, når vi skal filme de studerende, og hvad det er der skal fange potentielle studerende, til procesteknologuddannelsen. Herunder ses en wireframe, som kort beskriver den simple opdeling med de fire vinduer til de fire forskellige uddannelser, samt plads til video, og en informationsboks, hvor man f.eks. kan ansøge osv. Illustrer resultaterne af vores ideproces og efterfølgende feltstudier. 6

Segmenteringsprocessen For at lave en endelige beskrivelse af vores koncept, og for at vise, hvem vi henvender os til, vil vi gennemgå en segmentering proces, så vi får en homogen brugergruppe, med ensartet præferencer, i relation til uddannelsen og vores site, som foregår på B2C 1 markedet. Dette er for at opnå den optimale målgruppe. Ved denne proces giver vi også virksomheden et grundlag for at optimere tilgangen til netop deres site, igennem vores endelige koncept, plus den deling der sker igennem facebook linket og derved kommunikationen. Gallup Gallups kompas 2 Hjælper os med at inddele segmenterne op i 9 punkter. Moderne Moderne fællesskabsorienterede Traditionelle Fællesskabsorienterede Traditionelle Traditionelle individorienterede Individorienterede Moderne individorienterede Fællesskabsorienterede I Gallups kompas, har man også et center, hvor disse punkter cirkler omkring, men dette er den del af befolkningen, som ikke er indenfor disse dimensioner. 1 B2C: International markedsføring 3 udgave Finn Rolighed side. 150 afsnit 1.1 2 Se bilag 1 7

Eftersom denne uddannelse er meget fødevare orienteret og miljøbevidst, ligger vi imellem de traditionelle fællesskabsorienterede og de fællesskabsorienterede. Begge disse grupper, går op i miljø, sundhed og natur. Dette er en vigtig del, da det jo ville være det optimale at dele den samme interesse på et studie, hvor det er fire forskellige uddannelser det drejser sig om, når der evt. Er tværfaglige opgaver. Når dette site omhandler B2C markedet, hvor der jo også nogle flere kriterier, som spiller ind, tænker vi på: Køn Alder Familielivscyklus Erhverv Indkomst Disse kriterier på B2C markedet bringer os hen til en demografisk opdeling, for at kunne komme med en nogenlunde optimal målgruppe. I den nedenstående model kan man se, at tilgangen til uddannelserne er størst fra 23 år og frem. Dette kan skyldes, at man måske skal overtage en familiecyklus, tænker på en fremtidig indkomst, eller i det hele taget bliver mere sundhed og miljøorienteret, når man kommer op i en lidt højere alder. I dag er det jo meget op i tiden m ed, hvad man spiser, hvordan vores fødevare er sammensat osv. Derfor er det også vigtig at kommunikere netop disse uddannelser ud til de unge, som stadig sidder og søger efter en potentiel fremtidig uddannelse. Nedenstående model viser også at disse uddannelser har brug for eksponering igennem deres site, da tilgangen er meget lille, mens der er brug for eleverne til disse uddannelser. I den digitale 8

business model 3, har man også valgmuligheden for at benytte sig af sociale assets 4, samt web assets 5. Dette viser vi ved at benytte et facebook link, som skal kommunikere uddannelsen gratis ud over de sociale medier, for at opnå en højere eksponering, til vores optimale målgruppe, som er de 23 årige til de 29 årige. Denne målgruppe, er også stærk repræsenteret på de sociale medier, så... Tilgang af elevere 2010 6. 2010 Proces- og fødevareteknologi Både mænd og kvinder. 18 år 0 19 år 3 20 år 6 21 år 11 22 år 17 23 år 26 24 år 15 25 år 16 26 år 5 27 år 12 28 år 10 29 år 22 implementeringen af facebook linket, samt den stilart vi har valgt skal skærpe procesteknolog uddannelsen for fremtidige studerende. Delkonklusion Proces teknolog uddannelsen, skal have en større eksponering, som opnås igennem vores nye site. Dette skal ske igennem hele vores ideproces, med wireframes osv. Vores implementering af en video 3 Se Bilag 2 4 Facebook, twitter, linkedin, youtube, google+ 5 F.eks. Banner ads 6 Danmarks statistik, 31-05-2012. http://dst.dk/ 9

på sitet, personliggøre oplevelsen af uddannelsen, så der kan skabes langsigtet relationer og netværk igennem de studerende. Den optimale målgruppe for uddannelserne ligger mellem 23 til 29 år, hvor tilgangen er størst. Dette kan skyldes, at man måske skal overtage en familiecyklus, tænker på en fremtidig indkomst, eller i det hele taget bliver mere sundhed og miljøorienteret, når man kommer op i en lidt højere alder. Design 7 Surrealisme: Denne stil art er meget kunstnerisk. Det der betegner surrealisme er nogen billeder som er meget fantasifulde eller overtroiske. Det kunne for eksempel være en person med to hoveder. Eller hvis vi skal befinde os på en hjemmeside kunne et eksempel være billedet til højre. Billedet viser en planet af et æble med byer, træer, mennesker og bygninger på. Dette er noget det ikke kan findes sted i virkeligheden og derfor er det surrealistisk. 8 Modernisme: (vores egen) Karakteristika for modernisme er: Stærke farver, stilfuldt og simpelt. Det billede der ses til højre er blot et eksempel på hvordan en modernistisk hjemmeside kan se ud. 7 DzineBlog, 30-05-2012, http://dzineblog.com/2010/08/30-impressivesurrealist-website-designs.html 8 Taimur Asghar, 30-05-2012, http://www.1stwebdesigner.com/inspiration/single-page-website-designs/ 10

Vores egen stilart: Vi har valgt at benytte modernisme som vores egen stilart da det er simpelt og giver en god helhed til hjemmesiden. EAL er også en moderne uddannelsesinstitution som underviser inden for det nyeste materiale og derfor fandt vi det relevant at benytte denne stilart. For at komme videre fra feltstudiet til et færdigt design skulle vi finde nogle kendetegn ved uddannelsen som vi kunne bruge til vores hjemmeside. For at få ideer til et tema som siden kunne bruge var vi ude og lave noget research. med hensyn til farver researchede vi på uddannelserne og hvad der gik igen hos dem alle 4. Vi har blandt andet været ude på uddannelsen stedet og interviewe 2 studerende om hvad de syntes om uddannelsen og hvorfor de valgte den. Det vi kom frem til var at uddannelserne havde noget med mad, sundhed, ernæring og proces at gøre. Ud fra dette konkluderede vi at farverne der kunne bruges til hjemmesiden var blandt andet grøn som det endte med at vi ville bruge. Vi valgte farven grøn fordi farven har noget med natur og sundhed at gøre og symbolisere det. Vi gennemførte siden i grøn monokromatisk stil. Monokromatisk er en farve type hvor alle farverne der bruges er inden for den samme genre, fra hvid til sort. 9 Grøn er en farve som symboliserer håb og levende vækst. Grøn er håbets farve og giver optimisme hvilket er godt for den besøgende studerende, som skal have en positiv og optimistisk oplevelse af at besøge hjemmesiden. Repetition bliver brugt på siden da vores undersider har samme banner i toppen og beholder stil arten som findes på forsiden. Selve temaet går igen på alle undersider samt siderne for linksne. Vores kontrast punkt finder sted midt på siden hvor vi har vores 4 uddannelser, i form af billeder. Dette kontrast punkt er lavet ved 9 Visible, 30-05-2012, http://www.visible.dk/videnom/farvers-betydning.php 11

hjælp af billeder som retter den besøgendes øjne ind midt på siden hvor det vigtigste er, nemlig uddannelserne. Noget andet som fanger den besøgendes øjne er vores top banner hvor der står procesteknolog som viser den besøgende hvad man kan finde på siden. Ved siden af banneret er EALs logo som man kan klikke på og blive linket direkte til EALs hjemmeside. Selve stilen som vi har brugt til siden, kommunikere gennem EAL s hjemmeside, og derfor er det kun personer inden for vores målgruppe som kommer til at benytte siden. Ud over disse studerende vil siden kunne blive benyttes for unge mennesker der skal til at have en uddannelse og er i tvivl om hvilken retning de skal gå. 10 Inspirations kilden til vores hjemmeside ligger i billedet som ses til højre. Vi blev inspireret af at hjemmesiden var så simpel og lige til. Ikke for meget tekst men samtidig den information som man skal bruge. Fordelene: - En begrænsning for designet. - Er hurtigere at designe. Ulemperne. - En begrænsning for designet. - Tager længere tid at designe. Den surrealistiske stilart: Til vores surrealistiske stilart har vi brugt liquify tool i photoshop, til at give billederne og stilen på siden, et touch a surrealisme. Vi har brugt samme grid og opsætning som siden har fra standard og derefter redigeret siden til surrealistisk stil. Arbejdsproces 10 31-05-2012, http://i.tmimgcdn.com/library/free-website-template- Business-jQuery-Slider-p-13-02-2012.jpg 12

Strukturering/skitsering Brainstorm Første del af processen var brainstorm. Brainstormen blev brugt som ide generering til hvad indholdet skulle være, og hvordan hjemmesiden skulle være opbygget. Thumbnails Efter brainstormen begyndte vi at lave thumbnails. Vi lavede en masse thumbnails til hvordan opsætningen af indholdet skulle være på og ikke mindst hvordan designet skulle være. Thumbnailsne ses til højre. Efter vi havde lavet en del thumbnails udvalgte vi vores endelige opsætning, dog var den ikke 100% færdig og rettelser kom efterfølgende. Vi tog højde for at vores thumbnails skulle tilpasses 2 styles som er en del af opgaven. Vores egen og Surrealisme som vi valgte ud af de valg muligheder vi havde. 11 De to sidste thumbnails visser vores færdige resultater til vores forside og vores subsite. Sitemap Efter vi havde fundet vores udsende til hjemmesiden skulle vi bruge et sitemap så vi kunne se hvordan man skal kunne navigere rundt på siden. 11 Se bilag 3 13

Wireframe Efter vi var kommet frem til en beslutning om hvilken thumbnails vi skulle bruge og navigeringen er på plads kan vi så småt gå i gang med at få vores wireframe op. Wireframen viser vores side med de rigtige størrelser og hvordan siden ser ud i en mere færdig udgave en thumbnailsne. Denne wireframe brugte vi til at se hvordan tingene fungerede i praktisk og om der skulle yderligere ændringer til for at gøre siden fuldt ud funktionel. Som der kan ses på siden bliver siden delt enkelt op med en titel øverst hvorefter vi kan finde de 4 forskellige uddannelser midt på siden. Disse uddannelser ses som billeder med en lille tekst nederst på billedet. Man kan trykke ind på uddannelserne for at finde flere informationer omkring den enkelte uddannelse. Nederst på siden kan man læse omkring procesteknolog uddannelsen og til højre for det er der links til diverse hjemmesider, som har noget med uddannelsen at gøre. Disse links er bland andet Økonomi under uddannelse, optagelse til uddannelsen, kontakt informationer og så videre. Subsite Forside Prototype Siden er nu næsten færdig og kun enkelte rettelser mangler. En prototype bruges til at finde fejl og rette dem. Man kan også kalde 14

det af hjemmesiden kommer ind i sin beta face. En beta face er hvor et produkt er ved den sidste face inden udgivelse. Færdigt site Alignment. 12 Delkonklusion Vi har benyttet diverse metoder til at finde ideer til hjemmesiden, blandt andet brainstorm hvorefter vi afgrænsede materialet og kom frem til en opsætning til siden. Vi har benyttet diverse design til at fange målgruppen bedst muligt. Arbejdsprocessen er gennemført ved hjælp at diverse skitserings metoder som thumbnails, wireframe og prototype. 12 Se bilag 4 og 5 15

Interaktion Vi har valgt at benytte HTML og CSS til at konstruere vores side. Desuden benytter vi os af flash i form af vores videoer. Grunden til at vi ikke benytter JavaScript er ren prioritering, da vi ikke er så erfarne med det, og det derfor ville tage for meget af vores i forvejen knappe tid. Vi benytter os ikke af flere interaktive elementer eksempelvis i form af flash da der er relativt meget tekst på siden, som man skal kunne læse uforstyrret. Kodeprogrammer Vi har brugt text editorerne TextWrangler og Sublime Text 2 til kodningen. Grunden til at vi ikke benyttede eksempelvis Dreamweaver, som er en såkaldt What You See Is What You Geteditor, er, at vi gerne ville prøve at udfordre, hvad vi har lært i interaktionsundervisningen så meget som muligt. Derfor faldt valget på text editorerne, selvom der er blandede præferencer i vores grupper i forhold til valg af værktøjer. Skærmopløsning Vores hjemmeside fungerer optimalt til alle skærmopløsninger, som er på 1024x768 pixels eller derover, hvilket dækker over omkring 98% 13. Hvis skærmopløsningen er under 960 pixel bred, vil det kræve, at man scroller horisontalt. Derudover fungerer vores hjemmeside i de gængse browsere som Internet Explorer, Firefox, Safari og Chrome dog er der små afvigelser i placeringen af nogle få elementer i Internet Explorer 8 og tidligere versioner. Dog benytter vi CSS3 til at lave runde hjørner samt skygge på vores side, hvilket ikke vil blive vist i tidligere browserversioner, der ikke understøtter dette. 13 W3schools, d. 30-05-2012, http://www.w3schools.com/browsers/browsers_display.asp 16

Et kig på koden til vores forside, for at få et indblik i vores fremgangsmåde rent kodemæssigt: Vi starter med at definere, at det er HTML, vi skriver, hvorefter vi åbner vores head. Inde i vores head angiver vi så titlen, der vises i browserens fane. Efterfølgende angiver vi, at vi bruger Unicode Transformation Format-8, således at æ, ø og å vises problemfrit. Derefter henvises der til fire. css-filer. De tre første filer bruges ofte i forbindelse med brug af The 960 Grid System, som vi har valgt at bruge, da det er en stor hjælp til at få layoutet af en hjemmeside på plads, og vi havde en begrænset tidsramme. Systemet går ud på, at man får en side, der er centreret af skærmen og har en bredde på 960 pixels. De 960 pixels er delt ind i et bestemt antal søjler, som har en bestemt bredde samt en bestemt afstand. Den første fil reset bruges til at undgå uoverensstemmelser mellem de forskellige browseres standarder indenfor bl.a. linjehøjder, margener og font-størrelser. Dette betyder, at vi skal angive mere i vores stylesheet, men til gengæld er vi sikre på, at det er de samme værdier i alle browserne. Den anden fil text.css angiver noget basal styling til teksten. Den tredje fil 960_24_col.css angiver, at vi bruger 960 grid med 24 søjler, hvilket vil sige, at hver kolonne har en bredde på 30 pixels samt en afstand på 10 pixels. Den fjerde fil style.css er den fil, hvor vi angiver al vores styling til hjemmesiden. Afslutningsvis lukker vi vores head. 17

Vi starter med at åbne vores body, hvorefter vi laver en div kaldet container_24, hvilket angiver, at vi laver en beholder på 24 søjler altså en bredde på 960 pixels. Derefter laver vi to div s, som vi kalder henholdsvis grid_23 banner1forside og grid_23 banner2forside. Begge div s har en bredde på 23 søjler og er altså ikke helt så brede som vores container, således at vi får noget luft på både højre og venstre side. Den sidste del af navnene bruger vi til at style de specifikke elementer i vores stylesheet. Inde i banner1forside har vi to img-tags, som vi bruger til henholdsvis vores logo, der henviser til forsiden, samt vores overskrift. Inde i banner2forside har vi et img-tag, der bruges til vores salgstekst. Vi har en div kaldet grid_5 boxforside, og den er derfor 5 søjler bred. Inde i denne div har vi endnu en div som vi bruger til at style img-tagget samt en overskrift, noget tekst og afslutningsvis en henvisning til den relevante underside. Denne boxforside -div har vi fire af på forsiden, således at vi har én boks til hver linje på uddannelsen. 18

Vi starter med at lave en div kaldet grid_17 tekstforside, hvilket vil sige, at vi har en 17 søjler bred boks, som vi så deler op i henholdsvis grid_8 col1forside og grid_8 col2forside, således at vi får 2 kolonner på 8 søjler inde i den store boks. Dette gør vi for at kunne skrives vores tekst i to spalter. Derefter laver vi en div kaldet grid_5 diverseforside, hvilket vil sige, at vi har en 5 søjler bred boks. Inde i boksen laver vi en række henvisninger til vores side med diverse informationer. 19

Vi starter med at lave en div kaldet grid_23 footer, hvilket vil sige, at vi har en 23 søjler bred boks. Inde i div en laver vi et paragraftag, som vi udfylder med de vigtigste kontaktoplysninger. I kontaktoplysningerne har vi to forskellige span classes: spacing og linecolor. Disse to classes bruger vi til at justere afstanden mellem tekst og -tegn samt farven og størrelsen af -tegnene. Ved at benytte classes til det, kan man nemt og hurtigt ændre farven samt justere bredden, hvis nogle af oplysningerne skal ændres. Desuden laver vi et img-tag med en henvisning til EAL s Facebookside. Næstsidst laver vi en class til vores knap til at skifte stil på hjemmesiden vi har valgt en løsning med ganske enkelt at lave en henvisning til en anden. html-fil. Afslutningsvis lukker vi vores body og vores HTML. Vi har så vidt muligt opstillet vores kode, således at det er nemt at se, hvor de forskellige div s åbnes og lukkes. Derudover har vi indrykket de forskellige elementer således at det er let at skelne mellem parents og childs samt sat vores stylesheets op alfabetisk. Denne kombination skaber overskuelighed samt gør det nemt at 20

Finde rundt i og redigere stylingen. Desuden har vi benyttet os af 960 grid, hvilket gør inddeling, og derved også alignment, let. Delkonklusion Vi vil lave vores side i 960 grid system, da det er mest optimalt for hjemmesidens visning, og den relative korte tid vi havde til dette projekt. Vores skærmopløsning køre på 1024*768, hvilket dækker 98% af alle skærmopløsninger, for at dette også bliver optimalt. Vi benytter HTML og CSS, til kode og design,fordi vores undervisning har været i programmerne, og er de bedste til hjemmeside opbygning. Vi har også benyttet CSS3, men kun til skygger osv. Konklusion Procesteknolog uddannelsen har i dag brug for en større eksponering, da det er et meget lille antal studerende, som starter på disse uddannelser. Igennem vores ideproces og arbejdsproces er vi kommet frem til at siden, skal være så simpel som muligt, for at kommunikere det korrekte budskab ud til nysgerrige studerende, som søger en uddannelse, til deres fremtid. Den mest optimale målgruppe for vores site, er unge imellem 23 0g 29 år, i henhold til vores segmenteringsproces, og har rettet vores site efter dem, men er selvfølgelig også imødekommende til yngre studerende og ældre. Vi forsøger at give den et personligt præ, igennem vores video, hvor nuværende studerende fortæller om uddannelsen. Vi benytter diverse metoder til hjemmesiden, for at komme frem til vores designproces og udforme den igennem vores thumbnails, wireframes og prototyper. Siden er simpel, men har i vores andet style valg, lavet den surrealistisk, for at gøre den lidt mere fraverig og sjov, igen til den lidt mere unge målgruppe. 21

Siden er i 960 grid, for optimal visning, samt en skærmopløsning på 1024*768, hvilket dækker de fleste skærme. I vores designproces og sideudvikling, er programmerne HTML,CSS og CSS3 benyttet, far vores undervisning, og man kan bygge siden helt fra bunden selv. Litteraturliste Internet-adresser Danmarks statistik, 31-05-2012. http://dst.dk/ DzineBlog, 30-05-2012, http://dzineblog.com/2010/08/30-impressivesurrealist-website-designs.html Taimur Asghar, 30-05-2012, http://www.1stwebdesigner.com/inspiration/single-page-website-designs/ Visible, 30-05-2012, http://www.visible.dk/videnom/farvers-betydning.php 31-05-2012, http://i.tmimgcdn.com/library/free-website-template-businessjquery-slider-p-13-02-2012.jpg Bøger International markedsføring 3 udgave: Finn Rolighed Trojka 22

Bilag BILAG 1 Gallups kompas BILAG 2 Digitale Business model 23

BILAG 3 Thumbnails 24

BILAG 4 Alignment 25

BILAG 5 Subsites 26

BILAG 6 gant chartt 27