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
© Copyright 2024