Grafisk Design. Svendeprøve Portfolio Anja Jelstrup Jensen, Kailow

Transkript

1 Grafisk Design Svendeprøve Portfolio Anja Jelstrup Jensen, Kailow

2 Gammelt layout Nyt layout 6 Grafisk Design

3 Kunden Mindfullife er en forskningsinvolveret uddannelsesvirksomhed indenfor mindfulness-baseret intervention. De tilbyder kurser, retreats og uddannelse centreret om Mindfulness-baseret Stress Reduktion (MBSR). Flowchart Målgruppe Mænd og kvinder i alderen 30 til 60 år, som er interesseret i selvudvikling og ønsker et sundt arbejds- og privatliv. Beskrivelse af opgaven Kunden har længe ønsket at forny sin hjemmeside. I den forbindelse har jeg tilbudt at udforme et komplet redesign af den nuværende hjemmeside ud fra kundens behov og ønsker. Ved hjælp af et CMS (Content Management System) har kunden haft mulighed for at redigere den eksisterende side. Det er kundens ønske, at dette skal overføres og benyttes på det redesignede koncept. Tekniske detaljer Tid: 10 dage Sideopsætning: HTML og CSS Sidebrede: 960 px Billedeopløsning: min. 72ppi Billedeformater: PNG, GIF og JPEG Farverum: RGB Skitser Flowchart Udarbejdning af flowchart er med til at skabe et overblik over hjemmesidens struktur. Skitser For at illustrere, hvordan siden skal opdeles, har jeg lavet skitserne til hjemmesiden som stregtegninger i hånden. Efterfølgende har jeg rentegnet skitserne i Photoshop med detaljer, farver, skrift og billeder. Grafisk Design 7

4 d r a o b Mood M IND F ULLIF E INSTITU TE M IND F ULLIF E INSTITU TE M IND F ULLIF E INSTITU TE 8 Grafisk Design

5 Moodboard Jeg har benyttet moodboard som værktøj til at finde den rette visuelle stil og stemning for den nye hjemmeside. Logo Jeg har i samarbejde med kunden udarbejdet et nyt logo. Kunden udleverede en skitse, som jeg formede til det ønskede resultat. Kunden har haft et ønske om at styrke sin identitet, og det har derfor været et bevidst valg, at logoet har fået en mere fremtrædende rolle på den nye hjemmeside. Font: SignPainter-HouseScript Mindfullife Skitser modtaget fra kunden Font: Aaux Next Udsnit af logo skitser fra Illustrator Grafisk Design 9

6 Kreative fase Stilmæssigt er jeg gået efter et meget enkelt og funktionelt layout, hvor det er let for brugerne at navigere rundt mellem de mange sider og informationer. Jeg har valgt med inspiration fra moodboard, mine skitser og viden om sidens tekstmængde, at hjemmesiden skal have en hvid baggrund med vægt på flotte billeder, som kan give brugerne en stemning af ro og mindfulness. Skrifttyper Jeg har brugt Roboto som den primære skrifttype, hvilket er en sans-serif font. Det er en web-optimeret font med et stilrent og enkelt design. Samtidig indeholder den mange snit, hvilket kan være nyttigt på en hjemmeside med meget tekstbaseret indhold. Som sekundær skrifttype har jeg valgt Playfair, der er en serif font. Den er med til at give siden sjæl og særpræg i det ellers stilrene layout. Begge fonte er gratis at benytte fra Google Fonts, hvilket sikre, at alle kan se siden med de rette fonte. Farver For at holde konsistent branding og holde hjemmesiden enkelt og stilren, har jeg valgt at bruge dén blå farve, som også er i logoet. Den blå farve giver følelsen af fred, ro, harmoni, tillid og selvtillid, hvilket en hjemmeside som denne skal udstråle. Roboto Roboto Regular abcdefghijklm Roboto Regular Italic abcdefghijklm Roboto Light abcdefghijklm Roboto Light Italic abcdefghijklm Roboto Medium abcdefghijklm Roboto Medium Italic abcdefghijklm San-Sherif font Grotesk font Playfair Display Playfair Display Regular Italic abcdefghijklm Playfair Display Bold abcdefghijklm Playfair Display Bold Italic abcdefghijklm Playfair Display Black abcdefghijklm Antikva font Sherif font Valgte farver HEX # RGB CMYK HEX #00619E RGB CMYK HEX #f2f2f2 RGB CMYK HEX #ffffff RGB CMYK Grafisk Design

7 Opbygning Jeg har brugt Gestaltlovene om lighed og nærhed i min opbygning af hjemmesiden. Lighed: Mange af elementerne på hjemmesiden gentager sig på alle siderne, eksempelvis er menuerne, billedbanneret og footeren gennemgående i deres placeringer. Nærhed: Jeg har bl.a. brugt denne lov i opsætning af teksterne, så det er let for brugerne at se, hvad der hører sammen. Html Index HTML og CSS Siden er opbygget med HTML og CSS. Det er en eksempelside, som kunden har haft mulighed for at klikke rundt på og teste. Det er derfor kun hovedmenuens links, der virker. Afsluttende fase: Inden siden uploades til kundens domæne afprøves den fra både MAC og PC og i forskellige browsere: Firefox, Internet Explorer og Google Chrome. Se hjemmesiden live på CSS Stylesheet Grafisk Design 11

8 Index/fors ide 12 Grafisk Design Underside/retreat

9 Underside/Bøger& CD er Underside/kontakt Grafisk Design 13