grafisk workflow OPGAVE: EMBRACE-IT WEBSITE

Størrelse: px

Starte visningen fra side:

Download "grafisk workflow OPGAVE: EMBRACE-IT WEBSITE"

Jan Marcussen
5 år siden
Visninger:

1 grafisk workflow OPGAVE: EMBRACE-IT WEBSITE

BESKRIVELSE GRAFISK WORKFLOW BESKRIVELSE Den tidligere nævnte virksomhed Embrace-IT, forsøger i takt med at virksomhen vokser, at opdatere og optimere deres visuelle

Derudover har de behov for et større fokus på deres services, som viser potientielle kunder, hvad Embrace-IT kan tilbyde dem.

2 BESKRIVELSE GRAFISK WORKFLOW BESKRIVELSE Den 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. 33 TONE OF VOICE Websitets udtryk skal stemme overens med Embrace-IT's designmanual, og derudover være: Enkel Brugervenlig Overskuelig Responsive Personlig Moderne FORMAT Desktop, Tablet og Mobil. PROGRAMMER Illustrator CC Photoshop CC Brackets Chromes Inspect Element Filezilla

INSPIRATION Udfra brainstormen finder jeg eksempler på andre websites, som fungerer godt, og har et enkelt visuelt

3 FORARBEJDE GRAFISK WORKFLOW OPSTART Jeg laver en brainstorm i samarbejde med Embrace-IT, for at få sat ord på de ønsker der er til deres nye website. INSPIRATION Udfra brainstormen finder jeg eksempler på andre websites, som fungerer godt, og har et enkelt visuelt udtryk på alle enheder. DESIGNELEMENTER For 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. 34

4 OPSTART GRAFISK WORKFLOW SKITSER Før arbejdet i Photoshop påbegyndes, tegnes der skitser over websitet, for at afprøve designideer. 960 GRID For 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. FLOWCHART For at få et overblik over alle siderne på websitet, laver jeg et flowchart med alle undersider. SERVICES TECHNOLOGY HOME OUR CLIENTS ABOUT US CONTACT OUR CLIENTS CONTACT PORTFOLIO SERVICES WIREFRAMES Jeg skitserer wireframes, så jeg kan bruge skitserne til at kode den basale HTML og CSS. 35

KODNING GRAFISK WORKFLOW OPSTART I BRACKETS Der opbygges en logisk

RESPONSIVE For at kode et responsive layout, anvendes CSS-teknikken

For at dette virker, indsættes et viewport meta-tag i <head>, som gør

5 KODNING GRAFISK WORKFLOW OPSTART I BRACKETS Der opbygges en logisk mappestruktur, hvor jeg gemmer HTML- og CSS-filer lavet i Brackets. RESPONSIVE For at kode et responsive layout, anvendes CSS-teknikken media queries. For at dette virker, indsættes et viewport meta-tag i <head>, 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. 36

6 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 37 Mobil

STYLING GRAFISK WORKFLOW GRAFISKE ELEMENTER På forsiden af

muligt at implementere en skrift direkte i HTML- og

Embrace-IT bruger skriften Source Sans Pro, som

Dette kan dog gøre loadingtiden længere, men jeg vurderer

Linket til skriften sættes ind i <head>, hvorefter P- og

KONTAKTFORMULAR For at gøre det nemt for potientielle

Formularen er kodet som en <form>, og stylet så den passer

7 STYLING GRAFISK WORKFLOW GRAFISKE ELEMENTER På forsiden af websitet skal der være bogstavgrafikker, som laves i Illustrator. Herefter indsættes baggrundsbilleder i bogstavsgrafikkerne i Photoshop. GOOGLE FONTS Google 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 <head>, hvorefter P- og H-tags kan styles. KONTAKTFORMULAR For at gøre det nemt for potientielle kunder at kontakte Embrace-IT, laves der en kontaktformular. Formularen er kodet som en <form>, 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 MAPS For 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 <script> og <iframe>. 38

BILLEDER GRAFISK WORKFLOW BILLEDER Alle billeder til websitet gemmes i 72 PPI med farveprofilen srgb, da dette er den mest brugte farveprofil til web.

RETINA For 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.

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

8 BILLEDER GRAFISK WORKFLOW BILLEDER Alle 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. RETINA For 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 indgår i navnet, og viser de billeder, hvis den besøgende enhed har en retinaskærm. FAVICON Embrace-IT s logosymbol anvendes som Favicon. Dette optimeres også til Retina, og jeg indsætter derfor logosymbolet som ICO-fil i 32x32 px. SEO For 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. 39

UPLOAD & TEST GRAFISK WORKFLOW UPLOAD Til upload af websitet anvendes FTP-client'en Filezilla, da det er en nem

Embrace-IT får her tildelt en undermappe, hvor websitet kan uploades til test. W3C.

org, hvor linket til websitet kan uploades, hvorefter den genererer en liste over fejl og mangler.

TEST OG GODKENDELSE Som det sidste testes websitet på mobil, tablet og desktop enheder med forskellige

9 UPLOAD & TEST GRAFISK WORKFLOW UPLOAD Til 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.ORG For 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 GODKENDELSE Som 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. 40

Relaterede dokumenter

GRAFISK PRODUKTION & WORKFLOW

GRAFISK PRODUKTION & WORKFLOW CASPER GEIPEL JENSEN INDHOLDSFORTEGNELSE OPGAVEBESKRIVELSE...3 MÅLGRUPPE...3 KUNDEKRAV...3 SPECIFIKATIONER...3 BRUGTE TEKNIKKER...3 PROCESSEN...4 INSPIRATION...4 STYLETILE: