Eksamensprojekt 1. semester (Portfolio i HTML + CSS) - Projekt 4

PROJEKTFORMULERING

I dette projekt skulle vi arbejde individuelt. Jeg skulle lave min portfolio i HTML + CSS og redesigne de forrige projekter, vi har været igennem.

Projektbeskrivelse af websiteprojekt.

PROJEKTETS FORLØB

Valg af design
Efter at have fået præsenteret projektet startede jeg med at søge information på nettet om, hvordan andres portfolioer ser ud. Derefter besluttede jeg mig for den stil og den struktur, jeg ville følge. Jeg valgte en menubjælke under et topbillede. Foto, projekter og mit arbejde i diverse programmer skal vises som små billeder, som virker som links. Som topbillede bruger jeg et foto af et sneklædt bjerg, der er omgivet af en sky, så man ikke kan se dalen. Billedet har jeg taget på en skiferie i Maria Alm i Østrig. Det viser natur og action, som afspejler mig meget godt. Topbilledet, hvor mit navn og en lille tekst står, fungerer som et logo.

Matt Ham hvis Portfolio har inspireret mig.

En håndskitse, som blev udviklet i starten af projektet.



Farvevalg og topbillede
Først faldt mit valg af farver på de grå nuancer og et topbillede, der havde målene 800x150. Dette blev kaldt en 95'er stil og lidt kedelig i "farverne" ("grå er ikke en farve" lød beskeden, venligt sagt). Det blev anbefalet flere gange, at topbilledet skulle være større, så jeg endte med at sætte målene til 800x300. Jeg var også oppe på 800x350, men jeg syntes dog, at det blev lige lovlig overvældende, så jeg endte altså med at gå ned på 800x300.

Skitse af et af de første designvalg.

Skitse af et af de første designvalg.


Jeg skiftede de grå nuancer i designet ud med de samme blå nuancer, som der var i billedet. Helheden blev mere blank og ensartet. Den mørkeblå farve symboliserer blandt andet power og viden. Vores politi er blandt nogle af dem, der har mørkeblå uniformer.

Skitse af et senere designvalg.

Skitse af et senere designvalg.


Farver
Farverne i billedet går igen i resten af designet i portfolioen.

#030912 som de mørke træer i billedet: Farven bliver brugt som baggrundsfarven i body samt overskrifterne, brødteskten og billedteksterne i portfolioen.
#142749 som de lyse træer i billedet: Farven bliver brugt i menubjælken.
#E3E5DE som sneen på bjerget: Farven bliver brugt som baggrundsfarven i contentdiven. Den står i god kontrast til farven på brødteksten og overskrifterne.
#7CACC9 som lys himmel i billedet: Farven bliver brugt, når musen kører over menuteksten.
#2F6AA6 som mørk himmel i billedet: Farven bliver brugt, når musen kører over de links der er i brødteksten.

Skærmopløsning
Med hensyn til valget af skærmopløsning vaklede jeg mellem 1024x768 og 800x600. Valgtet faldt på 800x600, da der stadigvæk er få, som har denne skærmopløsning på deres computere.

Valg af font
Mit første valg var Arial, men jeg skiftede til Verdana, da den er lidt bredere og dermed lettere at læse. Verdana er et standardfont, der er på alle windowsbaserede pc'er. Verdana er en Sans-Serif font også kaldet Grotesk, som er en skrifttype uden fødder.

Menu teksten: 13px.
Overskrifter: 14px (h2).
Brødtekst: 12px.
Billedetekst: 10px. Den bruges til teksten under de små billeder.
Teksten under billedteksten: 9px, italic. Den bruges til teksten under billedeteksten, som beskriver, hvilket program billedet er lavet i, og hvilket kamera billedet er taget med.
Overskriften på undersiderne: 20px (h1).

Alle siderne er blevet valideret på hjemmesiden validator.w3.org.

FAGLIGT UDBYTTE

Selvom de andre projekter har givet mig en "del" erfaring, er det dette projekt, der har udviklet mig mest indtil nu.

Min kodning er blevet mere strømlinet og renset for unødige div osv. Jeg er dog stadig klar over, at det kan blive meget bedre.
Efter at have "tegnet" nogle figurer i Illustrator, er viden om værktøjerne i dette program blevet udvidet en del. Det er dog kun et lille trin på trappestien. Jeg er godt tilfreds med mine Adobelogoer.
Min udvikling i PhotoShop har ikke rykket sig så meget i dette projekt, men min navigation rundt i programmet er dog blevet mere glidende.

Min kreativitet bliver stadigvæk udviklet lidt efter lidt.

Selvom det er min kreativitet, der er min største udfordring pt, er jeg rigtig godt tilfreds med mit arbejde og resultatet af projektet. Jeg har tænkt på stort set hver detalje i Portfolioen.
Jeg er især glad for Foto-sitet og opstillingen af billderne, som er nøje udvalgt.

KILDER

NETLEKSIKON
Color Meaning
50 Inspiring Portfolio Designs
Vesthimmelands designmanual skrifttyper
wikipedia - Skrifttype
validator.w3.org
nielsgamborg.dk