Grafisk produktion & workflow
Grafisk produktion & workflow
19
Hjemmeside Gam Rai Massage
Opgaven
Krav
Løsning
Opgaven var, at jeg skulle lave en hjemmeside til Gam Rai
Massage, som er et firma der tilbyder professionel thaimassage.
Helt frit valg med designet og farvevalg.
Jeg valgte at lave et meget lyst og enkelt design med
fokus på overskuelighed og nem navigation.
Hjemmesiden skal vise Gam Rai Massages ydelser og
professionalisme. Men stadig give følelsen af velvære og
wellness.
Der skal være et banner med billeder der skifter af massage og lign.
Designet gør brug af en gennemgående farve, som er valgt
ud fra noget materiale kunden har leveret.
Der skal være to knapper på forsiden til „Behandlinger“ og
„Bestil en tid“.
Der skal være vist de korttyper som man kan betale med i
klinikken.
Grafisk produktion & workflow
20
En hjemmeside bliver til
Salg af produkt
Kvalifikationsopkald
Udvikling af produkt
Præsentation
Godkendelse af hjemmesiden
Søgeoptimering
Rettelser til hjemmesiden
Hjemmesiden kommer online
Konsulenten tager ud til kunden eller
snakker med kunden over telefon.
Produktet bliver her solgt til kunden.
Hjemmesiden bliver præsenteret af
en teamleder, som tager kontakt til
kunden og får eventuelle rettelser.
Hvis kunden har rettelser til den nye
side, bliver disse sendt over til grafikeren, som retter dem inden for kort
tid.
Grafisk produktion & workflow
Grafikeren kontakter kunden, for at
snakke om eventuelle krav og ønsker.
Her bliver kravspecifikationen tilrettelagt.
Hjemmesiden bliver nu sendt over til
en anden grafiker, der skal sørge for
at tjekke siden igennem, så der ikke
er nogle fejl.
Grafikeren laver designet til hjemmesiden i photoshop og klipper alle
elementerne op. Grafikeren sætter
hjemmesiden op i en template med
kundens tekst og materiale.
Grafikeren søgeoptimerer hjemmesiden. Her bliver der lavet h1, h2 og h3
samt titler, beskrivelser og søgeord
til alle menupunkter.
Når kunden er tilfreds med den nye
side, er den klar til at komme online.
21
Opsætning af dokument
Når designet til hjemmesiden skal laves, starter jeg med
at oprette en .psd med de rigtige indstillinger for design til
web.
Først opretter jeg et Photoshop dokument i den rigtige
størrelse. Jeg laver mit domukment så det passer til en
hjemmeside med en opløsning på 1024 px. I dokumentet er
også guidelines der indikerer en bredde på 960 px, da jeg
gerne vil have plads til noget luft rundt om.
Jeg laver altid dokumentet 2400 px bredt, så jeg er sikker
på, at det også passer til meget brede skærme, hvis kunden ønsker at have et baggrundsbillede.
Jeg sørger også for at mit dokument er optimeret til web
ved at sætte resolution til 72 ppi.
Color sættes til RGB, da en computerskærm kun kan læse
farverne rød, grøn og blå.
Grafisk produktion & workflow
22
Overvejelser
Når man laver et design til en responsive hjemmeside er
der flere ting man skal sørge for at tage højde for.
Call to action:
På denne side har jeg lavet 2 „Call to action“-bokse, som
hovedsageligt består af tekst, så derfor er der ikke de store problemer i forhold til et responsivt design.
Men det er vigtigt at have med i sine overvejelser, hvor
mange bokse man laver på sin side.
Tekstopsætning:
Hvis man laver tekst i flere spalter, er det vigtigt at sikre
sig at disse containere rykker under hinanden når siden
skaleres.
Grafisk produktion & workflow
23
Klargøring af filer
Når man laver en hjemmeside plejer man at klippe de
billeder, som skal bruges på siden op i den størrelse pixels
de skal være. Men når man laver en responsiv side arbejder
man i procenter og er derfor nødt til at klippe billederne op i
en større størrelse, så de kan skaleres ordentligt.
Til at klippe mine filer op bruger jeg en action, som klipper
de elementer ud der er markeret, ved hjælp af „Save for
web“ funktionen i Photoshop.
Jeg sørger for, at de elemter der bliver klippet ud, bliver
gemt i den rigtige fil-type. Sådan at elementer der indeholder transparenthed bliver gemt som .png og elementer
uden bliver gemt som .jpg.
Når filerne bliver klippet op, bliver de automatisk gemt i en
mappe, med det navn jeg giver dem.
Grafisk produktion & workflow
24
Opsætning af hjemmesiden
Når alle elemeter fra designet er klippet op, er det blevet
tid til at sætte hjemmesiden op via vores template- og
cms systemer.
Webvars:
I DanaWeb har vi et system der hedder webvars, som er
der vi sætter hjemmesiden op og administrerer alle de ting
som kunden ikke selv har mulighed for.
Man kan indstille farver ved at oploade en ”farvekode” og
så generer systemet en lille farveskala.
Det er også muligt at administrere tekststyles til hjemmesiden, så man er sikker på at kunden bruger de rigtige
skrifttyper, når de selv skal til at administrere deres side.
Man har også mulighed for at redigere i hjemmesidens
containere/moduler. Man kan flytte rundt, deaktivere og
navngive modulerne og kan dermed redigere hjemmesidens
wireframes hurtigt og nemt.
Grafisk produktion & workflow
25
CMS:
Når hjemmesiden er blevet sat op i Webvars, er det blevet
tid til at håndtere opsætningen af tekst og dette gøres i
DanaWebs Content Management System.
I CMS kan man sætte tekst op og style med h1, h2 og
andre tekststyles, som er forudindstillet i Webvars.
Man har også mulighed for at benytte de farveskalaer, som
blev lavet tidligere i Webvars.
Grafisk produktion & workflow
26
Søreoptimering
Noget af det vigtigste når man laver en hjemmeside, er
at lave søgeoptimering, så kundens side kan blive fundet
af andre mennesker på nettet. Dette gør vi i DanaWeb via
CMS.
Vi har mulighed for at skrive titler og beskrivelser til hver
enkelt side, samt indsætte URL, der peger fra kundens
gamle side over på den nye.
Grafisk produktion & workflow
27