Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio

Transkript

1 Endeligt layout Forside Om mig Portfolio 1

2 Hjemmeside Opgaven I dette design projekt skulle jeg gennemføre en designproces, hvor jeg enten skulle redesigne eller designe et produkt. Jeg valgte at designe min egen hjemmeside, som kan bruges i forhold til at fremvise portfolio til potentielle praktikpladser. Min hjemmeside Hjemmesiden skal indeholde 3 sider: Index side/ forside Her skal der være en lille velkomsthilsen. Portfolio Her skal der være links til de 4 kernekompetencer. De 4 kernekompetencer åbner op i pdf formater. På længere sigt bliver der også en ekstra portfolio galleri, hvor jeg vil have de mere frie ting, som jeg laver i fritiden liggende. Om mig På denne side vil der være en kort præsentation af, hvem jeg er, et billede af mig og et link til mit CV, som åbner op i pdf format i et nyt vindue. Målgruppe Min første målgruppe er først og fremmest potentielle praktikpladser, derudover kan den også henvende sig til eventuelle kunder. Formål Formålet med mit produkt er at brande mig selv. Jeg vil med min hjemmeside, brande mig selv som elev til de steder jeg søge praktikplads. Programvalg Dreamweaver: opsætning af min hjemmeside. Illustrator: Til skelet, flowchart og logoet jeg vil bruge i min header Photoshop: Bruges til layout af hjemmesiden, billeder til de 4 kernekompetencer, redigering af billedet af mig selv og Lin kedin + Facebook logoerne. Word: Tekst Excel: Tidsplan Layout Formatet er 900 x 700 px. Dette er et format der passer til de fleste skærme. Det ville måske have været mere korrekt at vælge 600 px i højden, men dette blev for småt syntes jeg. Fordi jeg har centreret wrapperen, vil alt indholdet på hjemmesiden altid være centreret, ligemeget hvilken størrelse skærm den ses på. Jeg bestemte mig for, at jeg kun ville have indholdet i #content til at ændre sig. Alt det andet på siden, skulle ligge det samme sted og være ens på alle sider. Jeg ville have haft mit indhold i #content til at være one page, men det fungerede ikke ret godt i forhold til mit layout valg. Jeg valgte derfor at lave den mere traditionel. Keep it simple. Baggrunden på hjemmesiden er en papirstruktur. Dette er valgt da det passer rigtig godt til min header, som er skrevet i hånden, og kaffepletten i footeren. Derudover holder jeg meget af at tegne, så også af personlige grunde giver det mening for mig at have papiret som baggrund. Headeren har jeg placeret øvert i venstre hjørne. Det er mit navn skrevet i hånden, sat sammen med ordet mediegrafikerelev. Det er lidt et slags logo, og derfor er det placeret der. Et stykke under headeren i venstre side har jeg min menu. Den er meget enkel. Udelukkende tekst med en prikket border imellem. Det eneste den ændrer sig er at der kommer en rød boks og teksten skifter farve til hvid, når musen føres hen over den enkelte side. Jeg vil senere lave hjemmesiden i Responsive Webdesign, så den får layouts, der er tilpasset både smartphone, tablet og computer. Fonte og farver Jeg har valgt kun at bruge rød(#a01700), som den eneste farve ud over sort og hvid på hjemmesiden. Det er den samme røde, der går igen de steder den ses. Det giver et fint og enkelt udseende, at der ikke er for mange farver. Linkedin og Facebook logoet er redigeret i Photoshop, så også disse er den samme røde farve. I forhold til fonte har jeg valgt at bruge RawengulkSans, da den er meget tynd og elegant skrifttype. Jeg havde til at starte med valgt BonvenoCF, men jeg måtte desværre droppe den, da den manglede Æ, Ø og Å. Jeg har dog valgt at beholde den i kernekompetencebillederne, da de to er meget ens, men BonvenoCF er en lille smule mere dekorativ, og derfor synes jeg den fungerer fint i billederne. Brødteksten er font-family: Verdana, Geneva, sans-serif. Denne er meget brugt, og det er muligt, at jeg inden længe skifter den ud med en anden. Dog synes jeg den er god, fordi den er letlæselig, og den passer fint sammen med RawengulkSans. Både RawengulkSans og BonvenoCF er fundet på Billeder Billederne, der er brugt til de 4 kernekompetencer, er lavet udfra 2 indholdet i den enkelte kernekompetence. Hvert billede består af et lille udsnit af indholdet (i sort/hvid) og henover det ses en rød bjælke med navnet på den pågældende kernekompetence. Billedet på Om Mig siden, er et billede taget i en fototime på skolen. Det er i bund og grund et dårligt og sløret billede. Jeg har valgt at fritlægge mig selv og lave en masse noise i baggrunden, og derefter lave billedet S/H. Dette giver jo ikke meget mening, men jeg kan godt lide at billedet er lidt utraditionelt, og at det ikke er opstillet. Alle billeder er gemt til web, så de fylder mindre, end de ellers ville og derfor er hurtigere at loade, når man åbner hjemmesiden (File - Save for Web) Font oversigt Farve Font Str./lineheight <p> #000 Verdana... 12/17 <h1> #000 RawengulkSans 16/16 a:link #000 RawengulkSans 16 a:hover #fff RawengulkSans 16 #adresse p #000 RawengulkSans 13/18 Header Logoet her består af mit navn som jeg har skrevet med blyant. Jeg har herfter scannet det ind og fritlagt det i Photoshop. Hvorefter jeg har indsat teksten mediegrafikerelev og lagt det ind bagved blyantsbilledet. En font erstatter en anden Jeg havde jo valgt BonvenoCF som den font jeg ville bruge til menu, <h1> osv. Da den desværre ikke havde Æ, Ø og Å, måtte jeg vælge en anden. Her ses de to fonte: BonvenoCF RawengulkSans Browserkompatibilitet Hjemmesiden er tjekket i følgende: Safari Google Chrome Firefox Internet Explorer Hjemmesiden virker/er ens i alle 4 browsere. Dog er der en lille afviger i Explorer. Hoveren i menuen har ikke opacity, og den fader heller ikke lige så stille frem, når musen føres hen over. Derudover har jeg været nød til at tilføje en ekstra regel på de to ikoner/links, for ellers kom der en blå kant på, når siden blev vist i Explorer. Kvalitetsvurdering Jeg er alt i alt rigtig godt tilfreds med mit endelige produkt. Det er blevet, som jeg havde planlagt det. Jeg er dog ved at have set på den rigtig mange gange, og er efterhånden blevet lidt træt af den, men måske en pause fra den hjælper lidt på det. Jeg vil dog have lagt mit papir med kaffepletterne i pres. Man kan se at kaffepletten bølger, hvilket er lidt ærgeligt, men det er jo svært at undgå. Jeg tror effekten vil se bedre ud, hvis papiret har været i pres. Jeg vil i hvert fald give det et forsøg, for jeg synes det er en god detalje. Jeg har i løbet af denne opgave lært utrolig meget. Jeg har siddet alene rigtig meget af tiden, og jeg har derfor været nød til at prøve at lære mig selv at få tingene til at virke. Dette var også en af grundene til, at jeg valgte hjemmeside som produkt i denne opgave, og det har jeg bestemt ikke fortrudt. Opgaveforløbet Problemformulering (i hånden) Brainstorm (i hånden) Skitsering af layout til hjemmesiden (i hånden) Udarbejdelse af flowchart (i hånden) Udarbejdelse af skelet (Illustrator) Forslag til forskellige layouts (Photoshop) Ændring af skelet (Illustrator) Kernekompetencebilleder lavet (Photoshop) Tekst om mig skrevet (Word) Opsætning/ kodning (Dreamweaver) Billeder rettet til i størrelse (Photoshop) Tegning til forside (i hånden - ideen blev droppet) Upload til

3 CSS UTF-8 ; * { margin: 0; padding: 0; body { background-image: url(../images/paper.png); #header { background-image: url(../images/header.png); height: 68px; width: 327px; margin: 10px; #wrapper { position: relative; width: 900px; min-height: 700px; z-index: 1; margin: auto; #nav { width: 190px; margin-top: 135px; margin-left: 10px; opacity: 0.7; overflow: hidden; #nav ul { list-style-type: none; #nav li { border-top: 1px dotted #333; #nav li:last-child { border-bottom: 1px dotted #333; #nav ul li a { font-size: 16px; text-decoration: none; color: #000; padding-top: 5px; padding-bottom: 5px; display:block; -webkit-transition: background linear.2s; background:none; #nav ul li a:hover { color: #fff; background: #a01700; #content { float: right; width: 650px; height: 370px; margin-top: 131px; margin-left: 250px; margin-right: auto; #tekst { width: 400px; height: 370px; margin-top: px; margin-left: px; margin-right: auto; #adresse { width: 190px; height: 120px; margin-top: 300px; margin-left: 10px; #footer { margin-top: 500px; height: 200px; width: 900px; background-image: url(../images/footer-smal.png); #portfolio { width: 600px; height: 400px; margin-left: px; margin-top: auto;.portfolio { margin-right: 20px;.logoer { margin-right: 10px; margin-top: 10px; border: none;.img { max-width: 100%; float: right; margin-right: 20px;.skydning { padding-top: 8px; p { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 17px; color: #000; h1 { font-size: 16px; line-height: 17px; font-weight: normal; #adresse p { font-size: 13px; line-height: 18px; 3 /* Generated by Font Squirrel ( on April 22, :19:39 AM America/New_ York { src: url( RawengulkSans-094-webfont.eot ); src: url( RawengulkSans-094-webfont.eot?#iefix ) format( embedded-opentype ), url( RawengulkSans-094-webfont.woff ) format( woff ), url( RawengulkSans-094-webfont.ttf ) format( truetype ), url( RawengulkSans-094-webfont.svg#RawengulkSansRegular ) format( svg ); font-weight: normal; font-style: normal;

4 Dumps fra Dreamweaver (html) Om Mig Forsiden Portfolio 4

5 Ideudvikling Farveovervejelser For pink For mørk Kaffepletterne Da jeg skulle lave kaffepletten til footeren, lavede jeg den meget realistisk. Efter et par mislykkede forsøg, hvor jeg dyppede en kop i noget kaffe og stillede den på et stykke papir, fandt jeg ud af at det rent faktisk virkede bedst, hvis jeg tog en lille smule kaffe på mine fingre og duppede det på den ene side af koppen. Dette gjorde at kaffen rendte lige så stille ned ad den ene side, og når det nåede papiret, spredte det sig lidt fint ud rundt i kanten af bunden på koppen. Tidsplan For postkasserød Passende rød - hverken for mørk eller for lys. Baggrund Denne papirstruktur er fundet på Den er lavet, så man ikke kan se, at den bliver gentaget mange gange for at udfylde baggrunden på hjemmesiden, hvilket resulterer i, at det ligner et stort stykke papir. Jeg valgte denne papirstruktur, da jeg syntes det var vigtigt at man ikke er i tvivl om at det er papir, men jeg ville stadig gerne have det lyst og uden linjer/tern. Dette papir har en vis eksklusivitet over sig, og jeg synes selv, det er lækkert at modtage et brev med posten, som er printet på denne slags papir. 5

6 Ideudvikling Skitser Her ses de skitser jeg startede ud med at lave i min ideudvikling. Der er lidt forskellige ideer til hvordan hjemmesiden kunne se ud. Jeg har prøvet at lave lidt ideerne lidt forskellige fra hinanden. På den måde er det lettere at finde frem til den ide, man synes fungerer bedst. Hovedet ude tiil højre er en skitse over den tegning jeg overvejede at sætte ind på forsiden. 6

7 Skelet De første skeletter Forsiden Det endelige skelet Brugt på alle sider Om Mig Portfolio 7

8 Layout forslag 8