grafisk workflowOPGAVE: EMBRACE-IT – WEBSITE

33

BESKRIVELSE – GRAFISK WORKFLOW

BESKRIVELSEDen tidligere nævnte virksomhed Embrace-IT, forsøger i takt med at virksomhen vokser, at opdatere og optimere deres visuelle udtryk. Derfor skal de have designet og udviklet et nyt website, som fungerer bedre på mobile enheder. Derudover har de behov for et større fokus på deres services, som viser potientielle kunder, hvad Embrace-IT kan tilbyde dem.

TONE OF VOICEWebsitets udtryk skal stemme overens med Embrace-IT's designmanual, og derudover være: • Enkel• Brugervenlig• Overskuelig• Responsive• Personlig• Moderne

FORMATDesktop, Tablet og Mobil.

PROGRAMMERIllustrator CC Photoshop CC BracketsChromes Inspect ElementFilezilla

34

FORARBEJDE – GRAFISK WORKFLOW

OPSTARTJeg laver en brainstorm i samarbejde med Embrace-IT, for at få sat ord på de ønsker der er til deres nye website.

INSPIRATIONUdfra brainstormen finder jeg eksempler på andre websites, som fungerer godt, og har et enkelt visuelt udtryk på alle enheder.

DESIGNELEMENTERFor at gøre processen nemmere i forhold til produktionen af websitet, sender jeg allerede nu designelementerne til godkendelse, for at afstemme forventninger med Embrace-IT.

35

OPSTART – GRAFISK WORKFLOW

OUR CLIENTS

PORTFOLIO

ABOUT US CONTACTTECHNOLOGYSERVICES

SERVICESOUR CLIENTS CONTACT

HOME

960 GRIDFor at gøre designprocessen nemmere, anvender jeg hjælpeprogrammet Grid 960 System, hvor jeg kan vælge at designe ud fra 12, 16 eller 24 kolonner.

SKITSERFør arbejdet i Photoshop påbegyndes, tegnes der skitser over websitet, for at afprøve designideer.

FLOWCHARTFor at få et overblik over alle siderne på websitet, laver jeg et flowchart med alle undersider.

WIREFRAMESJeg skitserer wireframes, så jeg kan bruge skitserne til at kode den basale HTML og CSS.

36

KODNING – GRAFISK WORKFLOW

OPSTART I BRACKETSDer opbygges en logisk mappestruktur, hvor jeg gemmer HTML- og CSS-filer lavet i Brackets.

RESPONSIVEFor at kode et responsive layout, anvendes CSS-teknikken media queries. For at dette virker, indsættes et viewport meta-tag i , som gør at browseren registrerer størrelse og opløsning på den enhed der besøger websitet. Desuden anvendes der procent til at angive bredder.

37

LAYOUT & WIREFRAMES – GRAFISK WORKFLOW

GODKENDELSE Efter at have kodet wireframes gennemgåes strukturen og designet med Embrace-IT. Når begge dele er godkendt, kan stylingen påbegyndes.

Desktop Mobil

38

STYLING – GRAFISK WORKFLOW

GRAFISKE ELEMENTERPå forsiden af websitet skal der være bogstavgrafikker, som laves i Illustrator. Herefter indsættes baggrundsbilleder i bogstavsgrafikkerne i Photoshop.

GOOGLE FONTSGoogle Fonts er et skriftværktøj, hvor det er muligt at implementere en skrift direkte i HTML- og CSS-filer.

Embrace-IT bruger skriften Source Sans Pro, som implementeres med alle skriftens vægte på websitet.Dette kan dog gøre loadingtiden længere, men jeg vurderer at det ikke bliver et problem i dette tilfælde.

Linket til skriften sættes ind i , hvorefter P- og H-tags kan styles.

KONTAKTFORMULARFor at gøre det nemt for potientielle kunder at kontakte Embrace-IT, laves der en kontaktformular. Formularen er kodet som en , og stylet så den passer ind i resten af layoutet på websitet. Der er indstillet patterns, så det kan ses hvis der er skrevet forkert i et felt.

GOOGLE MAPSFor at give besøgende et overblik over Embrace-IT's kontorer, integreres fire kort over adresserne med Google Maps. Dette gøres ved at bruge og .

39

BILLEDER – GRAFISK WORKFLOW

RETINAFor at optimere billederne til retinaskærme, er alle billeder gemt i to størrelser, ved hjælp af en Action, som forstørrer billederne.

Javascriptet Retina.js indsættes nederst i HTML'en. Scriptet søger automatisk efter billeder hvor „@2x“ indgår i navnet, og viser de billeder, hvis den besøgende enhed har en retinaskærm.

BILLEDERAlle billeder til websitet gemmes i 72 PPI med farveprofilen sRGB, da dette er den mest brugte farveprofil til web. Ved at bruge funktionen Save for Web, kan det nemt vurderes hvor lav opløsning der kan anvendes på de forskellige billeder.

FAVICONEmbrace-IT‘s logosymbol anvendes som Favicon. Dette optimeres også til Retina, og jeg indsætter derfor logosymbolet som ICO-fil i 32x32 px.

SEOFor at blive indekseret på Google, er der lavet basal SEO-optimering på websitet. Dette inkluderer – foruden almindelig brug af H-tags og at websitet er responsive – Alt-tags på billeder, Meta Description, Meta Keywords og derudover bliver der brugt Google Search Console når websitet er blevet uploadet.

40

UPLOAD & TEST – GRAFISK WORKFLOW

UPLOADTil upload af websitet anvendes FTP-client'en Filezilla, da det er en nem og hurtig måde at tilgå den FTP-server jeg har gennem mit webhotel. Embrace-IT får her tildelt en undermappe, hvor websitet kan uploades til test.

W3C.ORGFor at tjekke om HTML- og CSS-koden på websitet kan forståes af browsere, anvendes websitet W3C.org, hvor linket til websitet kan uploades, hvorefter den genererer en liste over fejl og mangler. Disse rettes efterfølgende i HTML- og CSS-filerne.

TEST OG GODKENDELSESom det sidste testes websitet på mobil, tablet og desktop enheder med forskellige styresystemer. Websitet testes også i forskellige browsere.

Herefter sendes linket til websitet til Embrace-IT, som herefter har mulighed for at tjekke for fejl i tekster og lignende, før websitet går live.

Websitet er endnu ikke godkendt, da kun forsiden og kontaktsiden er færdige.