Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning.

Transkript

1 Portfolie Redesign dette er en gennemgang af opbyggelse af mit portfolie, med samtilige begrunderlser af design valg. Forord Min portfolie hjemmeside er fra start af ment som et startplatform og ikke et endegyldigt produkt. Med dette mener jeg at jeg fra start af vil opbygge min hjemmeside med det hendblik at denne nemt kan blive udbygget eller ændres uden nogen større arbejde. Jeg gør dette da jeg mener at et portfolie afspejler en selv og da man hele tiden udvikler sig selv burde et portfolie kunne gøre det samme. Det tekniske Css på den mere tekniske side har jeg besluttet mig for at jeg vil bruge så meget css3 som muligt ud fra et lærings perspetktiv, samt da jeg ser det som en fremtids sikring af min hjemmeside. Opløsning Min hjemmeside er optimeret til en opløsning på 1280 x710 og op efter med en design brede på 1100, da online statistik viser at jeg ville kunne ramme flest mulig brugere med optimal opløsning. kilder: skaermoploesning/#test En skitse over hjemmesidens tekniske opbygning, Denne opbygning er for mig selv så jeg ikke skal rode for meget rundt når jeg leder efte filer osv. Tema ide Min ide til temaet et noget som visuelt forklare at dette er en krative hjemmeside. Tanken var at lave et maleri ramme som hængte på en slags væg. med et sort/hvid bagrund.

2 informationsarkitektur Min hjemmeside er planlagt til at have få museklik og en god opdeling af sider så det er nemmere for brugeren at få sig et overblik samt hurtigt kan han/hun finde det de søger efter. Jeg har udarbejdet følgende skitse før påbegyndelsen af bygge hjemmesiden, for at få et overblik over hvordan hjemmesiden skal udforme sig. 1klik 2klik 3klik

3 Baggrund udfra ideen med et malleri lavede jeg en abstrakt bagrund i photoshop. Jeg valgte af lave baggrunden i sort/hvid for at give et mere afslappet baggrunds effekt, da for mange farver og former ellers bare ville forvirre øjet og gøre hjemmeiden svære at overskue. Baggrunden er lagt en i master div som skal indeholde resten af min kode Jeg har valgt 3 primære områder som skulle havde abstrate former de samme steder hvor centrale menu linjer er at forefinde. Ideen er af dette skal hjælpe øjet med at finde menu linjerne og indhold på hjemsiden. Det hvide felt i midten er hvor selve teksten og resten af hjemmesidens indhold skal være pattern for at skabe den effekt at en min hjemme side er et maleri der hænger på en væg, tilføjer jeg en pattern som baggrund i body Tag hvilket gentager sig i både y og x aksel. selve Billedet er fra min gratis photoshop pattern kartotek som jeg har gjort sort og hvid så den passer med temaet og så har jeg optimeret den lidt så den fungere bedre som et pattern. mit valg af lige netup denne pattern ligger i af den har en super fed kontrast i sig selv med et fedt sammenspil af knaster og planker, der giver et god detajleret baggrund uden at være for frem springene og overskygger inholdet af hjemmesiden. Skrift-typer som font har jeg valgt 2 typer. Til overskrifter har jeg valgt Arial da jeg den fungere godt som den overskrifts type jeg leder efter, nemlig en god fyldig form det kan vise en farve uden at virker tyn. Til brødtekst og links har jeg valgt at bruge Georgia, da denne font er optimeret til at kunne være let læselig på skærme.

4 Farver jeg har valgt 2 gennemgående farver der står i stærk kontrast til den sort/hvide bagrund. Dette kan hjælpe mig med af fixere brugerens blik og gøre mit budskab skarpere. Disse 2 farverer har også en funktion som kan hjælpe brugeren med at navigere nemmere på siden. hex # FF0000, denne farver bliver brugt til over skrifter hex # F0F, denne farve bliver brugt til link, alt hvad fungere som et link bruger denner farve i en form. Logo I logoet til min hjemmeside bruger jeg den samme ide med af være abstrakt dog ikke i et så stort omfang, da man skal kunne læse hvad der står. For at opnå den ønskede effekt har jeg gjort teksten en smule skævt samt prøvet af ridse lidt i farven. Farverne i logoet er de samme farver som gå igen i resten af hjemmesiden, dette giver en bedre gengendelighed og harmunere godt med ideen om gennemgående farver. I mit valg af logo valgte jeg et nemt og hurtig design med en nem tekst, der fremhæver mit navn og giver et lille tvist med ordene Design by. Jeg har nogle fremtids planer med et flash logo, derfor brugte jeg denne nemme opstilling.

5 Menu er Jeg har valgt at dele min menu op i to en vandret der inderholder mine gallerier og en lodret som indeholder informationer. Jeg har gjort dette jeg jeg mener det hjælper med at katagorisere min hjemmeside bedre og skabe bedre overblik Grafisk er menuerne ret simple. På mit vandrete menu har jeg lagt en kant under der hjælper med at holde sammen på teksten samt medvirker den til opfattelsen af dette en menu. Samtidig har jeg lagt kanter imellem vær ord for for at skabe ideen om dette er knapper. En hvid let gennemsigtig baggrund på hele menuen hjælper med af afskærme fra baggrunden og gør det hele nemmere af læse. Den lodrete menu er af samme udforming her er ordrene bare skrevet lodret samt kanten flyttet til højre hvilket sammen med den vandrete kant en udforming af en stor menu samt skaber et indre område hvor indholdet af hjemmesiden kan være uden at flyde over i menuerne. For at vise hvilke side man er på er den på gældende knap highlightet med den link identikerende af de 2 gennemgående farver nemlig #F0F. Samme effekt vises også under hover, samt andre links på siden.

6 Forside På forsiden har jeg valgt at oprette en hurtig intro til siden og om mig. jeg mener det er nødvendig at skabe et klart overblik fra starten af hvad det hele går ud på. Jeg har lagt et java script ind. Det køre igennem mine gallerier med eksempler samt giver en lille tekst der beskriver hvad det er. En god effekt det skal være med til at vække interesse hos brugeren. ud over dette har jeg også en kort beskrivelse over hvem hvad jeg er så brugeren for en hurtig overblik over hvad der er han ser på og hvem han har af gøre med I højre side har jeg en hurtig fakta/note boks, der forklare mine kompitancer i stikord. Igen er dette for at skabe et hurtig overblik og sørge for brugeren findet det han søger hurtigt. den samme fakta/note bok er at forefinde på mine opgaver sider her den funktion den samme nemlig opbevaring af links og screencaps.

7 Galleri Til galleriet har jeg valgt en slide in visning som man kan bladre igennem. Jeg valgte denne fremvisnings form da jeg mener folk der ser disse sider ikke leder efter noget konkret men hellere vil klikke igennem det som et slags reklame blad. Ud fra dette synspunkt mente jeg at det vare passende af optimere efter dette. billede området er optimeret til 660x550 px en størrelse. med det for jeg meget detalje samt passer det fint ind medhjemmesidens dimensioner kilde koden til mit galleri fant jeg på : Et tekstet område der følger resten af sidens tema. Overskrift i #FF0000 og met et link i farven #F0F det hele på en let gennemsigtig bagrund som i de 2 hovede menuer. koden er bliver modificeret af mig i en større omfang. Billede størrelse, udseende og knapper er blevet ændret så der fik en bedre sammenhæng med resten af hemmesiden.

8 Kontakt Til kontakt har jeg brugt en form fra joltform.com de levere gratis form service og samtidig giver stor frihed til at editere ens kontaktform efter behov. Jeg har valgt her at holde brugerens input simpelt med et navn felt samt mail og den egentlige besked. Det hele styles til så passer ind med resten af temaet. Jeg har også valgt af det på nuværende punkt er den eneste kontakt mulig til mig, da jeg ikke bryder mig om af ligge mobil nr og andre personlig oplysninger ud på nettet. oveskrift farven er den gennemgående #FF0000 men en tekst som samtidig foklare hvordan brugen skal bruge kontakt formualren. Jeg har valgt at skrive selve beskrivelsen i italic for at fremhæve det fra resten af siden. selve processen foregår ved at brugerne indføre sit navn, mail og besked og trykker send mail,. Herpå vil der komme en besked på skærmen der forklare at hans besked er blevet sendt, samtidig vil der også blive sendt en bekræftelses mail til brugerens med en kopi af brugerens besked.

9 Skole Til skole/opgaver siderne har jeg valgt at bruge bokse med små thumbernails af opgaverne. Jeg har valgt dette da modsat til gallerierne, har brugerne der klikker sig ind her i en specifik ting de leder efter og her vil en thumbnail overblik hjælpe bedre med at finde det de søger. Boksene er grå tonet så de falder bedre ind i temaet. Dette giver også en god effekt med skriften i boksen som bruger en af mine 2 gennemgående farver nemlig overskrifts farven # FF0000 boksene skifter fra sort/hvid til farve når musen køre over, samt for den typiske link farve #F0F.Igen er dette en del af den gennemgående tema og visuel hjælp til at navigere rundt på hjemmesiden. Afslutene bemærknnger Min hjemmeside er testet i de nyeste versioner af firefox, chrome, og iexplore. herfra har jeg kun fundet en fejl hos iexplore som ikke viser slide in effekt i galleriet, dette er dog snare en limitation i iexplore end en fejl i min kode. for fremtidig opdateringer regner jeg med at lave et flash logo og udvidere mine gallerier samt på et længere sigt vil jeg gerne konvertere hele siden til PHP. For en dybere gennemgang af html og css. kik i kilde kode for komentare.