GRAFISK WORKFLOW. Hjemmeside design til Chem-Tec Plating

Transkript

1 GRAFISK WORKFLOW Hjemmeside design til Chem-Tec Plating

2 REDEGØRELSE Hvad går opgaven ud på Virksomheden Chem-Tec Plating, som specialisere sig i metallisk overfladebehandling, havde været igennem et generationsskiftet de sidste år, og mente derfor ikke deres visuelle profil matchede dem længere. Derfor bookede vi et møde med dem, og dertil skulle jeg udarbejde et hjemmeside udkast som skulle præsenteres til mødet. Udkastets formål var at vise Chem-Tec Plating hvad en ny profil, i form af hjemmeside, kunne gøre for deres virksomhed. Afsender Chem-Tec Plating A/S Hvad har jeg bidraget med? Jeg har alene stået for udarbejdelsen af hjemmeside udkastet. Komposition og Layout Under min design fase, var det vigtigt for mig at få skabt en hjemmeside som kunne vise Chem-Tec Platings muskler frem, sætte ansigt på menneskerne og stadig være intuitiv og nem at bruge. Eftersom deres nuværende materiale ikke passede til dem længere, var det også vigtigt at få skabt en hjemmeside der kunne danne fundament for en ny profil til Chem-Tec Plating. Derfor skulle hjemmesiden være let genkendelig, funktionel, moderne og have et naturligt flow der føre kunden igennem hjemmesiden. Det var også vigtigt at få skabt et dynamisk og levende layout, som ville fange kunden og som ville kunne bruges fremadrettet i Chem-Tec Platings markedsføring. Desuden skulle jeg også udarbejde et udkast mere af samme hjememside, hvor der belv vist et andet slider billede og hvordan hjemmesidens elementer blev vist når musen var over. Kundemøde Min egen præsentation til kundemødet var vigtigt, da det var mit design der skulle hjælpe Chem-Tec Plating med at visualisere deres nye hjemmeside. Desuden ville udkastet kunne føre til en dialog på mødet, omkring Chem-Tec Platings tanker og ideer til hjemmesiden layout. 2

3 PROCES Overdragelse: Opgaven gennemgåes i samarbejde med mødebooker - Generelle spørgsmål som formål, stil og profil afklares. Indholdet: Hjemmesidens flowchart og generelle layout tegnes op. Responsive design: Hjemmesiden designes til tablet og smartphone. Mødet Mødet afholdes og Chem-Tec Plating er positive overfor udkastet - afventer afklaring. Idéudvikling: Muligheder udforskes i form af inspirationssøgning på Pinterest - Skitsering af forskellige ideer. Design fase: Fonte, farver og billeder udvælges, og hjemmesiden designes ved hjælp af Photoshop. Præsentation Prezi præsentation med mockups af det færdige udkast udarbejdes inden mødet - Præsentation klargøres og afprøves internt. 3

4 OVERDRAGELSE Briefing Efter mødet var booket af vores salgskonsulent, satte salgskonsulenten og jeg os sammen, så jeg kunne få en briefing om virksomheden, deres styker og hvilke ting der skulle ligges vægt på. Det første jeg modtager er en skriftlig overdragelse, hvor salgkonsulenten har skrevet de vigtigste ting ned. Derefter sætter vi os sammen og får eventuelle spørgsmål afklaret. 4

5 IDÉUDVIKLING Inspiration Skitse 5

6 INDHOLDET Størrelser og indhold Efter jeg havde udvalgt min stil og fået skitseret hjemmesiden, gik jeg igang med at udforske Chem-Tec Platings gamle hjemmeside, for at få afklaret hvor mange undersider den indeholdte. Derfor udarbejdede jeg en Flowchart, så jeg let kunne overskue siden. Derefter tegnede jeg hjemmesidens skelet op i procent, så jeg, før jeg begyndte på at layoute siden, havde en fornemmelse af størrelsen på mine elementer. Skelet; forside Flowchart; forside Index Om os Overfladebehandling Kvalitet & miljø Referencer Datablade Totalløsninger Kontakt 6

7 DESIGN FASE Æstetik Nu hvor de faste ting var klargjorte, kunne jeg gå igang med at udvælge font, farve og billeder til mit design. Fonten valgte jeg vha. google fonts, farven valgte jeg udfra virksomheden gamle materiale og skilte udenfor deres bygning og billederne udvalgte jeg fra Outsource dks gamle projekter. Lag i Photoshop Da jeg ikke selv skulle stå for at kode hjemmesiden, hvis Chem-Tec Plating takkede ja, var det vigtigt at jeg hele tiden havde godt styr på mine lag i Photoshop. Photoshop filen skal i tilfælde af at Chem-Tec Plating siger takker ja, overdrages til vores programmør. Derfor skulle filen være let overskuelig, og være nem at navigere rundt i. Af den grund indelte jeg hjemmesidens sectioner i mapper, og sørgede for en fornuftig og sigende navngivning af mine lag. 7

8 RESPONSIVE DESIGN Alle platforme: Eftersom vi kun tilbyder hjemmeside design der fungere på alle platforme hos Outsource DK, skulle jeg også udarbejde et tablet og smartphone udkast til min præsentation. Under tilpasningen af den nuværende hjemmeside, lagde jeg stor vægt på at alt skulle være læsbart og at brugervenligheden ikke blev dårligere. Derfor valgte jeg at skabe et intuitivt layout hvor man skal scrolle for at se det forskellige indhold på hjemmesiden. Derudover tog jeg navigationsmenu en og lavede til en knap, hvor menu en popper frem og fylder hele skærmen. Da smartphone og tablet delen ikke skulle vises frem i fuldt format, kunne jeg nøjes med at udarbejde det øverste af siden. 8

9 PRÆSENTATION Prezi Til mødet, som jeg skulle deltage i, skulle der udarbejdes en præsention af hjemmesiden. Hos Outsource dk er vi begyndt at anvende Prezi til vores møder, og derfor skulle jeg også stå for udarbejdelsen af dette. Jeg startede med at lave mock-ups af hjemmesiden og skulle derefter indsætte disse i vores skabelon på prezi.com. Mundtlig præsentation Jeg startede med at forberede min præsentation, og skrev derfor stikord/linjer ned som jeg kunne støtte mig op ad. Da jeg havde forberedt mig, øvede jeg præsentationen internt, for at få feedback, og derved forbedre min præsentation. 9

10 KVALITETS VURDERING Egen vurdering: Min personlige vurdering af mit workflow, er positiv. Jeg fik taget mig stort set den tid jeg gerne ville, og er meget tilfreds med slutresultatet. Hvad kunne jeg have gjort anderledes? Jeg ville gerne have brugt mere tid på mit fontevalg. Jeg er ikke helt tilfreds med min brødtekst font, og ville derfor gerne have haft tid til at revudere mit valg. Fonten i sig selv fejler intet, men jeg synes personligt at font størrelsen kunne have været mindre. Desuden vil jeg mene at velkomst teksten skulle have været kortere. Udover fonten ville jeg også gerne have sat mere tid af til mine responsive designs. Jeg synes ikke at tablet version er optimal og ville derfor gerne have brugt mere tid på dette. 10