GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE

Størrelse: px

Starte visningen fra side:

Download "GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE"

Eva Christensen
8 år siden
Visninger:

1 GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE Det var på tide med en ny hjemmeside til privat brug. Jeg valgte at starte helt fra bunden i stedet for at ændre på noget eksisterende. Jeg er en blomsterpige, derfor skal baggrundsbilledet selvfølgelig være noget med blomster! Jeg fandt et gratis baggrundsbillede på wallike.com/ natural-flowers.html. Billedet har ikke for meget mark, horisont og himmel, men derimod en mere ensartet baggrund, så blomsterne bliver mere tydelige. Jeg lavede et billede med de gængse skærmopløsninger brugt til hjemmesider, som jeg satte som baggrundsbillede på skrivebordet på min computer. Derved kunne jeg hurtig se, om det jeg designede var brugervenligt eller ej. Jeg har valgt at holde antallet af nyheder på ca. 1 om månenden. Så kan jeg stadig overskue at opdatere indholdsiden, og jeg spammer ikke eventuelle læsere. Det er ikke en blog som sådan, snarere et sted hvor min nærmeste familie, der bor lang Skærmopløsninger: GRAFISK DESIGN L

Jeg fandt et gratis baggrundsbillede på wallike.com/ natural-flowers.html.

2 væk, kan følge med i min og min families dagligdag. Selvom Facebook overtager den rolle mere og mere, er det nu hyggeligt at have sit eget legested. Her bestemmer jeg selv hvordan jeg vil ytre mig, både grafisk og indholdmæssigt. Jeg designer først det grafiske udtryk i Adobe Illustrator. Når jeg er blevet tilfreds, laver jeg del-elementerne i Adobe Photoshop i dette tilfælde footeren, hr en og skyggen rundt om main. Jeg kan godt lide at arbejde i Adobe Illustrator, for der kan jeg trække billeder rundt og hive billeder ind og ud af arbejdsområdet, indtil jeg er tilfreds. Men jeg synes ikke Adobe Illustrator er god når jeg skal gemme del-elementerne, dertil er Adobe Photoshop superb! Farverne er valgt ud fra baggrunden, hvor jeg med pipetteværktøjet i photoshop fik farven frem. Og det er med vilje at brødteksten ikke er ren sort men koksgrå, så der ikke er så stor kontrast imellem den hvide baggrund og teksten, det synes jeg øger læsbarheden. Ydermere er overskriften lysnet til en lysere grå. Jeg har forsøgt ikke at bruge for mange farver, da det hurtigt kommer til at se rodet ud. Den orange er en accentfarve (her linkfarven), hvor de grå er grundfarvene. Menubaren og footeren er grøn og lilla. Jeg valgte kun at have 3 undersider. Det er ikke dovenskab, men jeg skal kunne opdatere siderne regelmæssigt og jeg synes at når man L GRAFISK DESIGN - 3

Når jeg er blevet tilfreds, laver jeg del-elementerne i Adobe Photoshop i dette tilfælde footeren, hr en og skyggen rundt om main.

3 #333 #666 #AAA #FFF #A877B2 #DBBFDD #A6BA66 #FF8000 har sin egen hjemmeside, så skal man sørge for at opdatere den jævnligt, og hvis man ikke magter det, skal man ikke have den. 1. side - Hovedsiden, index.html Startsiden om man vil, det er her nyhederne er. 2. side - Om Mig, mig.html Hvis man nu ikke ved hvem jeg er, men vil i kontakt med mig eller vide lidt om hvem jeg er, kan man søge informationen her. 3. side - Opskrifter, opskrifter.html Opskrifter, lige fra kager til brød og smoothies. Da jeg er meget intolerant overfor en del fødevarer, bager jeg meget selv og finder på nye madsammensætninger. Det kan jeg jo ligeså godt dele med jer! Opskrifterne er alle rigtige opskrifter som jeg selv har gennemtestet indtil flere gange. Så gør endelig brug af dem! Jeg holder fast på at man skal kunne komme til alle sider fra alle sider, dvs. menubaren altid er synlig og gerne fastfrosset. Derved sparer man irriterende ekstra klik og museskader. 4 - GRAFISK DESIGN L

html Hvis man nu ikke ved hvem jeg er, men vil i kontakt med mig eller vide lidt om hvem jeg er, kan man søge informationen her. 3. side - Opskrifter, opskrifter.

4 DEN TEKNISKE DEL Jeg ved at man kan designe i Adobe InDesign, Notesblok eller lignende tekstprogrammer. Sågar Word kan man designe hjemmesider i, men jeg har altid holdt meget af Adobe Dreamweaver, så jeg har designet min hjemmeside i det. Jeg havde en del udfordring med at få menubaren til at være under main, over wrapperen og ikke få main til at hoppe ned Jeg brugte dage på den menubar! Jeg researchede, jeg googlede og testede og blev mere og mere frustreret, for under main der skulle den menubar altså være! Jeg lagde menubaren på hylden, lavede undersiderne, tog hjem og sov på det. Så en onsdag morgen, så var den der! Istedet for at lave wrapperen 100% bred, lavede jeg den x antal pixels bred og centrerede den vha. margin: 0px auto;. Main fik attributten position:relative; og menubaren fik attributten position:fixed; så den er fastfrosset til skærmen, og følger med når man scroller. Jeg satte en høj venstremargin på menubaren og den satte sig præcis der hvor jeg ville have den! Endelig! Så var det bare om at få bredden af menubaren til at passe til linkteksten. L GRAFISK DESIGN - 5

Jeg havde en del udfordring med at få menubaren til at være under main, over wrapperen og ikke få main til at hoppe ned Jeg brugte dage på den menubar!

5 Forsiden er jo en del mindre end Opskrifter og Om Mig. Jeg ville have det sådan at det aktive link var fuld synligt, og det inaktive link blev skubbet ind under main, men stadig kunne ses. Hooveren på det inaktive link skulle være fuldt synligt ligesom det aktive link, bare med en anden farve. Jeg ville lave en lidt sjovere Om mig side, så jeg tog udgangspunkt i gamle venindebøger, dog uden det blev for poptøse-agtigt. Jeg lavede en figursats rundt om billedet vha. en class med attributten float:left;, og lavede links relevante steder. 6 - GRAFISK DESIGN L

Hooveren på det inaktive link skulle være fuldt synligt ligesom det aktive link, bare med en anden farve.

6 Facebooks officielle logo findes her: Twitters officielle logo findes her: Footeren og de andre grafiske elementer jeg har lavet, er gemt som PNG er. De giver en god gennemsigtighed, også hvis opacitien er lav bliver elementet også gennemsigtigt. PNG blev oprettet som en forbedret, ikke-patenteret erstatning for Graphics Interchange Format (GIF), og er det mest anvendte tabsfri billedekomprimeringsformat på internettet 1. Menubaren og teksten i footeren har fået henholdsvis box-shadow: 0px 1px 3px #333; og text-shadow: 1px 1px #FFF;. Skyggen rundt om main er lavet i Adobe Photoshop. Dermed er mit digitale produkt færdigt og klar til at komme på internettet! L GRAFISK DESIGN - 7

PNG blev oprettet som en forbedret, ikke-patenteret erstatning for Graphics Interchange Format (GIF), og er det mest anvendte tabsfri billedekomprimeringsformat på internettet 1.

Relaterede dokumenter

RÆSENTATIONSPORTEFØLJE. Lea Skovbo Jensen 2014 leaskovbo.dk/portfolio/index.html

RÆSENTATIONSPORTEFØLJE. Lea Skovbo Jensen 2014 leaskovbo.dk/portfolio/index.html P RÆSENTATIONSPORTEFØLJE L Lea Skovbo Jensen 2014 leaskovbo.dk/portfolio/index.html GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE Det var på tide med en ny hjemmeside til privat