GRAFISK DESIGN
Kenneth Friis Petersen
Kenneth Friis Petersen - Svendeprøve 2015
Opgavebeskrivelse
Font valg
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.
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.
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.
Overskrifter, h1’er, h2’er:
Oswald
abcdefghijklmnopqrstuvxyzæøå
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ
1234567890 . , : ; ( ) % ! ?
Indholdstekst:
Trebuchet MS
abcdefghijklmnopqrstuvxyzæøå
ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ
1234567890 . , : ; ( ) % ! ?
Analysemodeller
AIDA
ATTENTION:
Blikfang der udtrykker modernitet, fornyelse og kvalitetsbevidsthed. Venligt og imødekommende design.
INTEREST:
Man bliver bevist om at Trademark Textiles kan levere kvalitet og finder hurtigt de informationer man har brug for.
DESIRE:
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.
ACTION:
Trademark kan nu tilbyde kunden gratis design af forskellige
oplæg og samtidig sende uforpligtet priser.
SWOT
STYRKER:
Billige priser pga samarbejde
med østen. Gratis hjælp til grafiske opgave.
SVAGHEDER:
Kvalitets kontrol, kommunikation, tidsforskel, minimums styk.
MULIGHEDER:
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.
TRUSLER:
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.
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.
2
3
Kenneth Friis Petersen - Svendeprøve 2015
Skitser
4
5
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
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
Kenneth Friis Petersen - Svendeprøve 2015
Tidligere hjemmeside
10
Ny hjemmeside
11