CSS CSS CODEING CODEING COLOUR HTML PORTFOLIO RAPPORT //2016 MARIE EGEBERG MULTIMEDIE DESINER MULB

Transkript

1 Id COLOUR HTML CSS Ai CODEING CSS CODEING Ai PORTFOLIO RAPPORT //2016 MARIE EGEBERG MULTIMEDIE DESINER MULB

2 INDHOLD s.01 Indledning s.02 Brainstorm s.03 Negativ brainstorm s.04 PBS s.05 WBS s.06 Usability s.07 Wireframes s.08 Mockup s.09 Designprincipper s.10 Farver s.11 Font s.12 Info.arkitektur s.13 Redesign s.12 Konklusion

3 INDLEDNING Dette er min rapport som jeg har udarbejdet på baggrund af min portfolio, som er femte projekt og dermed sidste projekt på 1. semester af multimedie design uddannelsen. Dette projekt omhandler min egen portfolio som jeg har udarbejdet ved at håndkode hjemmesiden fra bunden af, ved brug af HTML5 og CSS4. I denne rapport vil jeg gennegå forskellige elementer af projektet som har haft betydning for mine resultater af produktet.

4 BRAINSTORM Før jeg begyndte på selve opgaven, syntes jeg at det var vigtigt at lave Brainstorm på opgaven. Her var det tanker, ideer, planlægning og strukturering som var de første ting der dukkede op i min Brainstorming. Nedenunder har jeg lavet Branstoring over mit projekt med henblik på det visuelle og kreative design. ERFARING? PLANLÆGNING KODNING DESIGNDEADLINESDESIGPRINCIPPER COLOR CSS4RESPONSIVT PROJEKTDOKUMENTATION HTML5 FONT USABILITY Grænser Eksperimenter ILLUSTRATOR PHOTOSHOP INDESIGN

5 NEGATIV BRAINSTORM Da jeg havde lavet min Brainstorm som ses på forrige side, begyndte jeg at lave min Negative brainstorming. Den negative brainstorm gik for mig ud på at være kritisk omkring den Brainstorm jeg først havde lavet. Her så jeg på hvilke ting der kunne påvirke/begrænse mit arbejde iforhold til de nuværende kompetancer jeg har på studiet. Nedenunder har jeg lavet den negative branstorming over mit projekt med henblik på det visuelle og kreative design. minuserfaring? visioner uklare ideer MULIGHEDER? MÅL RESPONSIVT?USIKKERHED svært at BEGRÆNSE INDESIGN færdigheder minus PHOTOSHOP Javascript Grænser KODNING USIKKERT strukturering

6 PBS Jeg har valgt at bruge PBS for at organiserer mit projekt fra start til slut i processen. PBS er efektivt blevet brugt til at dele mit projekt op i hvad den består af, og hvad jeg skal bruge for at få det optimale ud af min hjemmeside. Det har givet mig et godt overblik over de forskellige underpunkter, hvilket har gjort det lettere at organiserer indholdet af hjemmesiden. Nedenunder ses min PBS på en visuel måde. 1.1 Forside 1.4 Kontakt 1 PORTFOLIO 1.2 Om mig CV PBS 1.3 Projekter

7 WBS Ved at have benyttet WBS i min arbejdsprocess med projektet har gjort at jeg helt præcist har kunne dele mit projekt op i flere underpunkter, for at gøre det håndterbart og struktureret. Ved at dele hver enkel arbejdsopgave op, har resulteret i at jeg har kunne fokuserer på hver enkel opgave. Dette har gjort at jeg har haft en godt overblik over projektet fra starten, hvilket har gjort det muligt for mig at planlægge hvor lang tid jeg har skulle sætte af til hver enkel opgave. Nedenunder ses min WBS som jeg, på næste side, vil gennemgå og uddybe PBS CV Brainstorm 1.1 Planlægning WBS Usability Wireframe Validering 1.4 Deadline 1 PORTFOLIO 1.2 Design Skitser WBS Aflevering Layout Mockup 1.3 Hjemmesiden Info. arkitektur Designprincipper Responsivt design Home Contact HTML/CSS About Portfolio Skills

8 USABILITY For at lave den bedst mulige portfolio, er det vigtigt at have lavet en brugertest 2 af den allerede eksisterende portfolio, Wordpress. Der er nogle allerede eksisterende frameworks i Wordpress, som umiddelbart ikke kan ændres. Dette betyder at hjemmesiden allerede i forvejen er brugervenlig på den vis at disse framworks allerede har taget forbehold i at den der opretter en wordpress, ikke nødvendigvis bør have erfaring med hjemmesidekodning eller brugervenlighed. 1 Dette betyder at brugertesten sådan set gik som den skulle og ud fra dette har jeg taget forbehold i nogle andre elementer i websitet som måske i denne portfolio ikke var nødvendig at have med eller som faktisk helt burde undværes. Jeg vil nu gennemgå de forskellige opgaver og ud fra dette, konkluderer hvad der bør tages stilling til i den nye portfolio. OPGAVE 1 - Find 1.projekt beskrivelse med pdf Klik på semesters Klik på 1. semesters Find pdf for 1.projekt 1 Igang med wordpress: 2 Usability, Wisler-Poulsen, Ian: (Alle diss opgaver til udgangspunkt i disse sider) Side #

9 USABILITY Dette var den første opgave brugeren fik på websitet. Kommentarene til dette var: Jeg går ind under semester, så kan jeg se at beskrivelsen er her. Jeg syntes at der er lidt meget tekst ifht. project decription. OPGAVE 2 - Find tilbage til forsiden Klik på logoet Opgave 2 var en simpel opgave, som brugen skulle løse. kommentarene til dette var: Klikker på logoet. Det virker, men der mangler en home også. OPGAVE 3 - Find 4. projekt intercultural website Klik semesters Vælg 4.projekt intercultural website Gå tilbage til forsiden Kommentarene til opgave 3 var: Jeg går ind under learing.. der står den hmm.. måske under semesters

10 USABILITY OPGAVE 4 - Brug søgefeltet og find mobilnummeret Klik på søgefunktionen i højre hjørne Søg phone Vælg contact Dette var den 4 opgave til brugeren. Kommentarene til dette var: Hvad skal jeg skriv?. Mobile?... Telephone?... Så måske Contact?.. Der er det!. Nu har alle fire opgaver testet hos brugeren. Selvom jeg allerede fra starten af havde forestillet mig at den wordpress site jeg havde lavet var brugervenlig, opstod der nogle problemer undervejs, som gjorde at brugervenligheden ikke var så optimal som jeg ønskede den at være. En af de problemer som brugeren faldt over var at der manglede en Home knap på sitet. Det er ikke alle brugerer som ved at logoet fungerer som en Home knap, så den skal selvfølgelig tage i betragtning. Det næste problem som brugeren faldt over, var denne forvirring omkring learning og semesters. Hvis man som udefra ikke er sat ind i materialet på skolen, kan det være svært/ næsten umuligt at finde ud af hvad der er under hvilke punkter.

11 USABILITY Samtidig var der alt for meget tekst for brugeren at tage stilling til, og vedkommende mistede hurtigt overblikket over indholdet. Det bliver også gjort klart at søgefunktionen på websitet var unødvendigt at have med. Det skabte mere forvirring end det gavnede denne side. Da portfolioen ikke rummer en masse underpunkter og funktioner, ser jeg det udnødvendig at have med i denne sammenhæ ng. Ud fra disse konklusioner har jeg taget stilling til hvordan min portfolio skal indrettes. Jeg har her valgt at lave en Home knap på min portfolio således at alle ved hvordan de kommer tilbage til forsiden/ udgangspunktet. Logoet har jeg også valgt at lave til et link, så der er flere muligheder for at komme tilbage til forsiden. Jeg har valgt at samle learning og semesters under en samlet titel portfolio. Dette har jeg gjort da det giver mere mening for den uvisse bruger at betjene websitet, og forstå indholdet og sammenhængen. Her har jeg valgt at dele projekterne op én for én og tilføjet dem mere visuelle elementer iform af billeder og væsentlig mindre tekst. Under hvert projekt er der nu links til learning hvor at alt tekst materialet er samlet på et sted. Samtidig linkes der til websites og andet materiale i forhold til opgave beskrivelsen. Jeg har valgt ikke at have en søgefunktion med i portfolioen, da portflioen i sig selv har få elementer, så dette anses som værende ikke er nødvendig.

12 Wireframe Før jeg begynde at kode min portfolio, lavede jeg nogle wireframe for både forsiden og indholdssiderne. Dette har hjulpet til at visualiserer ideerne før man går igang med kodningen. Forsiden Logo Navigation

13 Wireframe Indhold Logo Navigation Emne Som det ses på begge frameworks er der taget hensyn til det enkelte look, uden for mange forstyrrende elementer. På næste side vil en visuel mockup bliver præsenteret, hvilket vil vise det (næsten) endegyldige version af websitets forside og dets design.

14 CSS Mockup Dette er mit mockup af forsiden på min portfolio, dette mockup, vil vise den endegyldige guideline til hvordan min portfolio forventes at se ud som slutprodukt. Dette mockup er en god hjælp til at visualisere en præcis skitse af din hjemmeside med fokus på de mindste detaljer. Jeg har valgt at lave mockuppet i Illustrator, da det er en præcis og god måde at tilføje detaljer på. Id CODEING Ai Ps COLOUR ab out sk ills po rtfolio co ntact

15 Designprincipper Jeg har anvendt nogle forskellige designprincipper, for at gøre min portfolio så anvendelig for brugeren som overhovedet muligt. Jeg har anvendt designprincipperne: Enkelhed, Ensartethed, Genkendelighed, Kontrast og Luft. 3 På de næste sider vil jeg gennemgå de forskellige designprincipper og beskrive hvordan jeg har anvendt dem på min hjemmeside. # 3 - Enkelhed Jeg har valgt at gøre brug af designprincippet om Enkelhed for at gøre mit design så enkelt som muligt og herved mindske unødvendig støj på hjemmesiden. Dette har jeg bl.a. gjort i henhold usability testen, hvor flere af mine undersider i menuen er blevet ændret til færre elementer. Dette gør især at forvrring mindskes og unødvendige elementer fjernes eller ændres. Især det simple udtryk i designet af hjemmesiden gør kommunikationen helt klar for brugeren. # 4 - Ensartethed Jeg har på min hjemmeside valgt at gøre brug af designprincippet om Enkelthed. Dette har jeg valgt for at give elementerne et fælles karaktertræk. Dette fælles karaktertræk gør at elementerne vil opleves som have relationer til hinanden Designprincipper - Wisler-Poulsen, Ian: (Alle designprincipper tager udgangspunk i dette) Side #

16 Designprincipper På min hjemmeside ses dette især i min menu og ved indholdet under menuen, de former (polygoner) som jeg har valgt skal være gennemgående i billed elementerne på min side. Størrelsen af disse elementer har jeg valgt at gøre i samme størrelse i forhold til de grupperinger de indgår i. # 8 - Genkendelighed Jeg har valgt at gøre brug af designprincippet om Genkendelighed i det jeg har valgt at gøre mine sider i menuen mens. dette vil sige at når man går ind på de forskellige sider på menuen, vil alle siderne have de samme ensartet elementer, som skaber genkendelighed for brugeren. Dette betyder at brugeren vil genkende forskellige elementer i designet på alle undersiderne, hvilket gør at brugeren ved hvilke hjemmeside de befinder sig på. # 14 - Kontrast Jeg har gjort brug af designprincippet om Kontrast. Jeg har anvendt størrelseskontrast og formkontrast. Størrelseskontrast er anvendt i forbindelse med tekst størrelsen på de forskellige sider. Det vigtige er blevet markeret med bold mens det mindre vigtige har beholdt sin regulære font style. Samtidig er alle overskrifter lavet til all caps og al brødtekst med small caps. Dette gør at kontrasten melle disse elementer er blevet styrket hvilket ska-

17 Designprincipper Jeg har anvendt formkonstrast i det at alle elementerne i indholdet som har fælles relationer til hinanden har den samme form (polygon). Billeder jeg har anvendt f.eks. under mine projekter og som kun skal fremvises som billeder, har den firkantet form. På denne måde sikres det at disse elementer skiller sig ud fra de andre, hvilket skaber struktur og sikre genkendelighed og de rette grupper. #16 - Luft Jeg har valgt at anvende designprincippet om luft, for at skabe mere opmærksomhed omkring overskrifter og elementer på sitet. Samtidig gør luft at designet ikke virker klemt. Det kan ud fra disse principper konkluderes at det er vigtigt at have forskellige guidelines for et design, hvis brugeren skal kunne navigerer ordentligt rundt i designet uden at det mister sin sammenhæng.

18 Farver Jeg vil forklare og vise de farver som jeg har valgt at benytte på mit website. 4 De farver jeg har valgt er de kolde farver. Farvene som ses nedenfor vil blive beskrevet i forhold til deres betydning og kodning. #F2F2F2 #1919FF #83A6A4 #447C78 # #F2F2F2 Denne farve er i familie med den helt hvide farve. Den hvide farve symbolisere enkelthed i sit udtryk blandet med den grå farve, som symbolisere bl.a. pålidelighed og stabilitet. 5 Denne farve har stor betydning for hele websitet da dette er baggrundsfarven. 4 Farvers betydning: (Dette afsnit om farver er inspireret af) 5 Farvers betydning: (Dette afsnit om er inspireret af)

19 Farver #1919FF, #83A6A4 Den blå farve symboliserer ro og tillid. 6 Farven skaber stabilitet omkring elementerne og passer godt til den hvide og rolige farve. Den blå-grå farve, er den blå farve med opacitet. Denne opacitet skaber ro og neutralitet til sitet. #447C78 Denne farve er ovre i de blå-grønne nuancer og kaldet mørk tyrkis. Den tyrkise farve udstråler fred, ro og balance i sine nuancer. Farven er med til at skabe en rolig atomosfære på websitet og virker harmoniserende sammen med de andre blå nuancer. 6 Farvers betydning: (Dette afsnit er inspireret af) 7 Farvers betydning: (Dette afsnit er inspireret af)

20 Farver # Den sorte farve symboliserer elegance, autoritet og kan virke dramatisk. 8 Denne farve skiller sig ud på den grå-hvide baggrund og skaber opmærksomhed omkring dets elementer. Farven er med til at skabe et elegant look til websitet og giver det sofistikert udtryk. Det kan konkluderes ud fra ovenstående farvesymbolikker, at de farver jeg har valgt til min portfolio, er kolde farve nuancer. Disse farver skaber ro og balance, samt et stabilt og elegant udtryk. Alle farvenuancerne der er blevet anvendt hænger sammen, hvilket skaber et sammenhængende udtryk på sitet. 8 Farvers betydning: (Dette afsnit er inspireret af)

21 Font Den font jeg har valgt at benytte i min portfolio er Helvetica. 9 Fonten Helvetica er en af de mest brugte sans-sherif typografier rundt omkring i verden. Meningen med denne font er at den skal være enkel og læsbar samt skal kunne benyttes til forkellige formål. Den font som minder mest om Helvetica er fonten Arial, som kun adskiller sig fra Helvetica, i dets få store og små bogstaver. 10 Jeg har valgt at min anden font (hvis Helvetica ikke kan ses på andre computere) er Arial. Da denne font næsten ikke skiller sig ud fra Helvetica, er dette en oplagt font, da jeg allerede ved hvordan denne font fungerer ifht. mit design. Den sidste font type jeg har valgt er en eller anden form for sans-sherif, som er i samme kategori som Helvetica og Arial. Her ses forskellen mellem de to fonte: 11 9 Fontens betydning: (Dette afsnit er inspireret af) 10 Fontens betydning: (Dette afsnit er inspireret af) 11 Arial vs. Helvetica:

22 Informations arkitektur Jeg har gjort brug af informationsarkitektur i min portfolio. Den informations arkitektur jeg har gjort brug af er Hypertext. 11 Jeg har valgt denne informationsarkitektur, da jeg i min Portfolio linker rundt i mellem elementer, modsat min wordpress site, hvor Hieraki her er informationsarkitekturen og hvor underpunkterne ses i en hirakisk visning. 11 Hypertext: (Dette afsnit er inspireret af) Ditlev Skanderby. A Practical Guide to Information Architecture - PDF. 18th June 2010.

23 Redesign Jeg har valgt at lave redesign af projekterne: #2 Promote your country #3 Political campaign #4 Intercultural website #2 Promote your country Jeg har valgt at lave redesign af projekt 2, da jeg mente at wordpress sitet kunne blive mere detaljeret end den nuværende. Nuværende site:

24 Redesign Ny site: #3 Political campaign Jeg valgte at ændre en funktion i denne site. Jeg valgte at lave en formular under show support så det lignede at man kunne donerer penge.

25 Redesign Nuværende site: Ny site:

26 Redesign #4 Intercultural website Med dette projekt valgte jeg at gøre det mere tydeligt hvilke emne Pernille præsenterer, og hvad hun står for. Dette var ikke tydeliggjort på nuværende site, så det skulle ændres. Nuværende site:

27 Redesign Ny site:

28 Konklusion Det kan ud fra min rapport konkluderes at portfolioen er blevet skabt på baggrund af analyse af brugertest, samt forskellige designmæssige guidelines.

29 Kilder Wordpress Usability Usability - Wisler-Poulsen, Ian Designprincipper 20 designprincipper - Wisler-Poulsen, Ian Farver Farversymbolik Font Font Hypertext Ditlev Skanderby. A Practical Guide to Information Architecture PDF. 18th June 2010.

30 Kilder Arial vs. Helvetica