GRAFISK DESIGN. Kenneth Friis Petersen

Transkript

1 GRAFISK DESIGN Kenneth Friis Petersen

2 Kenneth Friis Petersen - Svendeprøve 2015 Opgavebeskrivelse Total redesign af hjemmeside til Trademark Textiles A/S, både layout og kodning af side. Trademark textiles er en privat label virksomhed, der primært producere undertøj, accessories og sko. Briefing Trademark Textiles A/S er en af landets førende inde for privat label pdroduktion af undertøj, accessories og sko. Derfor er virksomheden nu klar til at få opdateret deres hjemmeside, til et mere moderne look, samt en nemmere navigering rundt på siden, for besøgende. Designmæssige overvejelser Hjemmesiden skal have et stort 100% coverbillede i toppen af siden, som skal fange besøgende, så snart de kommer ind på siden. Det skal være super nemt at navigere rundt på siden, samt få et indtryk af, hvad det er trademark kan tilbyde. Trademarks grønne, sorte og hvide farver, skal gå igen på siden, så der hele tiden er en rød tråd igennem designet. Det hele skal være ny moderne og der skal bruges grafiske flat-icons til at få et bedre overblik, hvor de forskellige ting er på siden. Idé fasen Jeg startede med at lave skitser, for at få et overblik over, hvor jeg gerne ville hen med sitet, og for at have et design at følge. De første tanker gik på at have et stort fangende billede på forsiden, der skulle give god stemning, og være den del, der gjorde at besøgende, har lyst til at læse mere om Trademark Textiles. Forsiden skulle give en hurtig ide om, hvad firmaet laver, og hvad de tilbyder, samt overskuelige genveje til de vigtigste informationer. I bunden skal alle virksomheds informationer og genveje til de sociale link være. Undersiderne skal være informerende og ikke have unødvendige informationer, der forvirre. Samtidig skal alt være moderne og stilrent, som moderne ikoner skal være behjælpsomme med. Programvalg Photoshop, Illustrator, Sublime, Dreamviewer. Font valg Jeg har til alle overskrifter valgt at bruge fonten Oswald, som er en sans serif font, også kaldet en grostesk font. Oswald er blevet omtegnet, så den formede sig bedre efter pixels og er derfor en god font at bruge på alle elektroniske pixel basseret enheder. Fonten er kun brugt i versaler, for at alle overskrifter skiller sig ud, og er fangende. Til alt indholdstekst, har jeg valgt er bruge Trebuchet MS, som også er valgt af Microsoft til at være en af deres a good webdesign font og er en af deres kerne skrifttyper inden for web. Trebuchet er også en sans serif font. At begge fonte er sans serif fonte, gør at de nemme at læse på elektroniske enheder. Overskrifter, h1 er, h2 er: Oswald abcdefghijklmnopqrstuvxyzæøå ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ , : ; ( ) %!? Indholdstekst: Trebuchet MS abcdefghijklmnopqrstuvxyzæøå ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ , : ; ( ) %!? Arbejdsprocess 01. Der laves brainstorm, skitser og research. 02. Hjemmesiden designes i Photoshop. 03. Billeder, ikoner og lign., bliver gemt ned i målte størrelser og gemt som web billeder/elementer. 04. Opsættelse af genereller og vigtige ting i Sublime 05. Gemt html fil og stylesheet ned i rigtig mappe. 06. Bygget skelettet, for at få en grundlæggende ramme at kode i. (wrappen) 07. Der bliver lavet fixed dropdown menu. 08. Der bliver lavet udfyldnings formular via Dreamviewer 09. Der bliver brugt absolut og relative position 10. Siden bliver søgeoptimerings venlig. 11. Der læses korrektur og rettes for eventuelle fejl. AIDA ATTENTION: INTEREST: DESIRE: ACTION: SWOT STYRKER: SVAGHEDER: MULIGHEDER: TRUSLER: Analysemodeller Blikfang der udtrykker modernitet, fornyelse og kvalitetsbevidsthed. Venligt og imødekommende design. Man bliver bevist om at Trademark Textiles kan levere kvalitet og finder hurtigt de informationer man har brug for. Kunden bliver inspireret af den gratise design service, og overvejer om der er penge at spare ved at arbejde sammen med en virksomhed, der arbejder med fabrikker i østen. Trademark kan nu tilbyde kunden gratis design af forskellige oplæg og samtidig sende uforpligtet priser. Billige priser pga samarbejde med østen. Gratis hjælp til grafiske opgave. Kvalitets kontrol, kommunikation, tidsforskel, minimums styk. Trademark er aldrig påvirket af kriser, alle har brug for undertøj. Ved ansættelse af danske medarbejdere i østen, kunne man være med til at kvalitetsikre forspørgelserne. Konceptet er nemt at efterligne, og der er allerede konkurrenter på markedet. Derfor er det vigtigt at være opdateret på udstrålingen ud af til, via design. 2 3

3 Kenneth Friis Petersen - Svendeprøve 2015 Skitser 4 5

4 Kenneth Friis Petersen - Svendeprøve 2015 Der er lavet fav-icon. Detaljer Ved at bruge denne regel øverst i css en, laver jeg en fælles regel for hele mit stylesheet. Der er lavet drop down menu, da siden har mange undersider, som ikke alle kan være i menuen. Der lavet kommentarer i både html og css en, i tilfælde af at andre skulle arbejde med sitet en dag, og for selv at gøre de mange koder mere overskuelige. 6 7

5 Kenneth Friis Petersen - Svendeprøve 2015 Der er i topbanneret arbejdet med procenter, for at det kan gå helt ud til kanterne af sitet, når man skallere siden. Detaljer Alle billeder er blevet gemt i rigtig format, via save for web, og sat i mindst brugerlige kvalitet, i forbindelse med hastigheden ved indlæsning af siden. Der er arbejdet med søgeoptimering, via meta tags, og ved at kalde billederne realaterede navene til billederne. Der er gjort brug af absolut og relative position til NY ADRESSE stemplet, så det kan flyde ud over billedekassen. 8 9

6 Kenneth Friis Petersen - Svendeprøve 2015 Tidligere hjemmeside Ny hjemmeside 10 11

7