GRAFISK PRODUKTIONSFORSTÅELSE

Transkript

1 GRAFISK PRODUKTIONSFORSTÅELSE

2 Opgavebeskrivelse Julie Abels Dansestudie vil gerne have en ny hjemmeside, der skal promovere studiet. De har en opsat hjemmeside fra 123hjemmeside, som de gerne vil have lavet om. Kunde Julie Abels Dansestudie Ansvar Jeg har fået fuldmagt over deres domæne og har fået frie tøjler med design og opsætning. Kunden har angivet hvilke informationer skal med, hvilke billeder der gerne må bruges og farver. Programmer Adobe Photoshop Adobe Illustrator Wordpress Browser kompatabilitet Google Chrome Mozilla Firefox Internet Explorer Tema Brooklyn Udgivet af UnitedThemes Hosting Domæne Designkrav Enkelt Ikke meget tekst Væsentlig information Kontakt formular Pink farve Kvalitetskontrol Store billeder Farve sammenspil Responsiv Luft Minimalt af tekst Mest muligt undgåelse af unødvendig information og overflødig tekst Humoristisk Procesbeskrivelse Det starter med en samtale med kunden, hvor snakken er hvorvidt man kan opdatere deres hjemmeside. De er ikke tilfrede med dens nuværende udseende og synes der er for meget rod. Jeg får opgaven og vejleder kunden om hvordan tilgangen kan være, og vi kommer frem til en enighed om at købe et domæne og et wordpress tema, hvor jeg står for designet. Efter design af hjemmeside blev den sendt til kunden til godkendelse. SVENDEPRØVE 2017 HALLUR GULLAKSEN 16

3 Tidsplan Da vi skal nedlægge studiets gamle side og få en ny op at køre hurtigst muligt, er der konstant pres på. De fleste billeder og tekste bliver lavet klar på forhånd, og der bliver lavet en tidsplan som skal følges nogenlunde. Mandag Tirsdag Onsdag Torsdag Fredag Lørdag Søndag Opsigelse af host Billedoptimering Oprettelse af ny host Opsætning af tema Opsætning af tema Tema søgning Design Design Design Design Design SEO SEO Korrektur Korrektur Godkendelse Kunden står til rådighed hele dagen med hjælp, hvis det skulle være nødvendigt SVENDEPRØVE 2017 HALLUR GULLAKSEN 17

4 Farver og Typografi Studiet har sin egen pink farve, som skal bruges på hjemmesiden. Det er oplagt at bruge den sammen med grayscale billeder for at skabe en kontrast i designet. Farver Sort CMYK: 0 / 0 / 0 / 100 RGB: 0 / 0 / 0 HEX: # Hvid CMYK: 100 / 100 / 100 / 100 RGB: 255 / 255 / 255 HEX: #FFFFFF Pink CMYK: 10 / 100 / 0 / 0 RGB: 219 / 81 / 151 HEX: #DA5097 Skrifttyper H2, H3, H4, H5, H6 samt paragraph Open Sans Regular Størrelsen på brødtekst er 16px. Open Sans er en meget brugt sans-serif grotesk skrifttype designet af Steve Matteson. Den er optimeret til print, digital og mobil læsbarhed. Skrifttypen er designet i Den er generelt meget brugt både på tryk og digital. Open Sans Regular ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå H1 og Citater Selima Regular Selima er en brush script skrifttype, med et livligt design. Skrifttypen står i god kontrast til en organiseret skrifttype som Open Sans. Selima Regular ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå SVENDEPRØVE 2017 HALLUR GULLAKSEN 18

5 GRAFISK PRODUKTIONSFORSTÅELSE Wireframe & Flowchart Wireframe blev skulle give en idé om hvordan hjemmesiden skulle se ud på det tidlige stadie. Den var sat op som en guide til inspiration, og ikke nødvendigvis som en bestemt form. Flowchart viser en oversigt over the vigtige punkter der skulle med på siden. INDEX FORSIDE OM OS SOCIAL MEDIA INFO OM FOLK SVENDEPRØVE 2017 HALLUR GULLAKSEN HOLD OG PRISER KONTAKT FORMULAR 19

6 GRAFISK PRODUKTIONSFORSTÅELSE Wordpress Tema Efter at have kigget flere temaer igennem faldt valget på et tema lavet af United Themes, og hedder Brooklyn Theme. Temaet giver mange muligheder for opdatering og optimering af hjemmesider. Temaets brugervenlighed og support er rigtig god, og temaet tilbyder gratis opdateringer. Hosting Domænet har førhen var i fuldmagt hos 123hjemmeside.dk, men er igennem one.com flyttet over hvor jeg har fået lov at tage over. Domænenavn er det samme, SVENDEPRØVE 2017 HALLUR GULLAKSEN 20

7 Plugins Der er lavet et udvalg af plugins mht. forbedring og funktionalitet på hjemmesiden. Ud over de plugins påkrævet af temaet er der installeret forskellige funktionelle plugins. Plugins følger med temaet Yoast SEO Optimering Plugin viser punkter hvor der kan forbedres på siden, hvad enten det er nøgleord eller en tekst der skal forlænges eller forkortes. Her gøres det også muligt at ændre den snippet man ser på google når den vises på google. Collapse-O-Matic Gør det muligt via. et shortcode at kollapse tekst ind i en dropdown. (Dette plugin demonstreres på hold oversigten.) Contact Form 7 Følger med temaet, med er et universalt plugin til kontakt formular. Der kan nemt oprettes og redigeres en kontakt formular. WP Super Cache Caching plugin til blog, hvis den skulle blive en realitet. Font Organizer Giver mulighed for upload af skrifttyper, der ikke er på google fonts, eller i wordpress standard bibliotek. PB SEO Friendly Images Hjælper med søgeoptimering på billeder via. alt-text og titler. Yoast SEO Et af de mest brugte søgeoptimerings plugins via. meta description og tags. Den danner også et overblik over sidens generelle søgeoptimering og giver vejledning til hvordan det kan forbedres. SVENDEPRØVE 2017 HALLUR GULLAKSEN 21

8 Brug af plugins Der findes både simple og komplekse plugins. Collapse-O-Matic har hjulpet mig med dette skema, hvor der skal listes hold til hele ugen og priser der er delt op i tre kategorier. Skema Skemaet lister alle hold til hele ugen. For at undgå at skulle bruge ekstra meget plads til at liste priser, kan et plugin som dette hjælpe til at gøre det mere overskueligt. Via. placering af shortcode før og efter tekst, sætter det indholdet i en dropdrown. Dropdown Listen viser tre forskellige kategorier af priser. Shortcode Teksten sættes ind i en shortcode start og slut, der angives et titel. Expanderet Ved klik på listen, expanderes listen og den omfattende tekst vises. SVENDEPRØVE 2017 HALLUR GULLAKSEN 22

9 GRAFISK PRODUKTIONSFORSTÅELSE Browser kompatabilitet Siden er testet på forskellige browsere i forskellige størrelser og viser minimale problemer. Titler bliver venstrestillet når man kommer ned i en vis bredde, og dette skal rettes i koden. Microsoft Edge Tablet landskab iphone Google Chrome Tablet portræt 1024x768 Mozilla Firefox SVENDEPRØVE 2017 HALLUR GULLAKSEN 23

10 Konklusion Jeg er godt tilfreds med siden. Siden har opnået de vigtige ting den skal. Siden har et moderne og lækkert design, og gør brug af store billeder, der sætter liv i siden. Farverne spiller godt sammen, og der er ikke rod på siden. Informationen er ligetil, og der er mindst muligt overflødig tekst. SVENDEPRØVE 2017 HALLUR GULLAKSEN 24