Ugeopgave uge 40 Hold A

Transkript

1 Ugeopgave uge 40 Hold A Gruppe: Don Pablos Emil Vollandt, Mathias Smidt, Jacok Kremmer & Alek Modin Navn: Password: keammd kode2015

2 Analyse Kommunikation Hvem er afsenderen? Cinnobershop.dk Hvem er målgruppen? Moderne/Traditionel segment. Sætter pris på kvalitet/æstetik. Hvad er afsenderens budskab? Sælge kvalitetsbevidste produkter. Hvilken effekt ønsker afsenderen at opnå? Deres produkter signalerer kram og kvalitet, men det visuelle modstrider lidt den identitet de ønsker at opnå. Hvad kan du forestille dig, at afsenderen ønsker, at målgruppen skal tænke om afsenderen? Funktionalitet, enkelthed praktisk traditionsbevidste, æstetik kreativ inspiration. Responsive design Siden er ikke bygget op af et responsivt design. Siden er bygget op af en centreret DIV, som indeholder flere forskellige table tags. Alt er skrevet op i pixels (UDEN) nogen former for breakpoints. Da den er opbygget via en ældre metode, betyder det at mobiludgaven bliver meget lille. Centreret DIV TABLE TABLE TABLE

3 Koncept og idé Vi har i gruppen udarbejdet vores idé, gennem en brainstorm. Vi har individuelt skabt idéer til en hjemmeside vi synes kunne passe godt til det udvalgte firma. Vi startede med at have flere forskellige idéer og måtte derfor foretage en selektionsproces, for at kunne samle de forskellige idéer til et færdigt koncept. Efter en del dialog fandt vi frem til et forslag. Vi delte brainstormen op i forskellige klasser alt efter hvor på hjemmesiden vi skulle have fokus. Dvs. Til at starte med blev vi enige om en landingpage som tog udgangspunkt i en one-page. Derefter udarbejdede vi et udkast til en wepshop. Da vi ikke synes webshop gik hånd i hånd med et onepage layout, blev vi derfor enige om en separat side til wepshoppen. Efter vi havde det grundlæggende på plads, delte vi os og lavede individuel research til designet. Vi lavede derefter en ny brainstorm, hvor vi samlede vores idéer. Resultatet fandt vi frem til via inspiration fra andre sider og hvad vi selv havde af idéer. Her brugte vi vores ekspertise fra de foregående uger, hvad vi havde af erfaringer med kodning, typografi, layout. I hele den første del af idégenereringen havde vi alle sammen ja -hatten på og var åbne overfor nye idéer. jo længere vi kom i processen, desto mere kritiske begyndte vi at være. Grafik og sproglige virkemidler Behovs opfyldning: Grafisk set funktionaliteten ganske udemærket, nem at navigere i - og forholdsvis overskuelig menubar. Deres illustrationer er mangelfulde - siden er kun designet med enkelt elementer - og virker ikke bærende i forhold til den dertilhørende brug af whitespace. Emotionelt er sitet simpelt og informerende - men ikke just blikfangende - og en smule neutralt. Sidens grafiske virkemidler opfyldes funktionelt - til dels også relevansmæssigt, men emotionelt ikke fyldestgørende. Sproglige virkemidler: Sidens sproglige stil, er kortfattende og beskrivende - den information man modtager, er begrænset til det mest relevante. Sproglige konkluderes der, at alle behov er opfyldt, iflg. Jens Hogman Hansens kriterier. Strukturelle virkemidler: Strukturen er opbygget med udgangspunkt i det simple og lettilgængelige. Informationer er opdelt skematisk og overskueligt, og leveres brugervenligt. Strukturelt er historien leveret, men ikke med fyldestgørende indhold og kant. funktionelt er behovet dækket. men den halter i de andres henseende.

4 Visuel rød tråd: Visuel rød tråd Siden holder sin visuelle røde tråd, i form af den enkelt opbygning og fonter - men samtidig er den også så enkel at det er svært ikke at følge dens visuelle udtryk til dørs. illustativt og typografisk samspil virker enkelt og tilfredsstillende - men udfordrer ikke farvemæssigt - og et overdrevet brug af whitespace. Stilarten er simpel med modernistisk præg. Farvepalletten er hold i det sort hvide, og denne kontrast er den eneste gennemskinnende farvekontrast. Den sorte farves gennemslag i forhold til typografi, gør siden skriftlige elementer fremtrædende - men er samtidig også offeret med hensyn til eye-pleasurement. Typografi og tekstopsætning: konsultativ typografi er forbeholdt menulinjen, hvor brødtekst elementerne optræder i klassisk funktion som beskrivelser af produkter og begivenheder. Display skriften er brugt i forbindelse med logo. Der er brugt to forskellige skrifttyper, hvilket fungere overskueligt. Skrifttypen er sans-serif - og brødtekst er overskueliggjort i letlæselige mængder og afsnit. Skriftens kendetegn er, at den skal overskueliggøre lette informationer, hvilket på dette site opfyldes til fulde. Vi har som gruppe diskuteret typografivalget kontra den ellers lidt for lette ydre struktur - og dertil er den passende og afbalancerende. I forhold til at sidens målgruppe/segment er dem de er, synes valget af skrifttype fint - da denne neutral og dens funktion er at levere det simple budskab. Komposition: Hvis man ser på sidenstrukturen i forhold til gestalt love - er siden opbygget i primært åbne bokse - hvor en 3-deling er gennemgående på alle sitets undersider. Der er et overdrevent brug af whitespace, og vi synes ikke at dennes funktion er fyldestgørende for sitet - og er en af de ting vi vil revurdere i vores version af websitet. Som nævnt ovenfor er der stort fokus på brug af grids, hvor størstedelen af undersiderne er 3-delt, men hvor bl.a. webshoppen bryder med disse konventioner og er tillagt mange flere grids. Siden har symmetriske grundelementer, i forhold til elementers placering, men proportionerne på nogle figuerer og tekster bryder symmetrien - og skaber et uoverskueligt hieraki mellem nogle elementer på siderne. Siden strukturelle opbygning med grids og symmetri, giver den et centreret og simpelt look - hvilket kan forbindes med en harmonisk komposition, dog med undtagelser på visse undersider; se webshop. L-komositionen er brugt til dels i navigationsbaren, men er ikke et gennemgående element for sitet. Kompostionen er brugbar i forhold til enkeltheden og produktlevering, og er derfor fuld funktionel mht. dens intentioner.

5 Strukturelt virkemiddel Menuen er sat meget enkelt op i bunden er siden. Menuen er gennemgående for alle de fem forskellige sider. Der er tale om en primary- navigation. Menu punkterne skifter kontrast når man holder musen over. På hver side du besøger, kommer titlen i toppen af billedet, så du hele tiden kan holde dig orienteret hvor du er på siden. Her kan vi referer til The trunk test.

6 Forbedringer Hvad fungerer godt: Siden har en gennemgående enkelthed, som fungerer super godt i forhold til at navigere rundt på siden - og finde det indhold og de elementer, man søger. Sidens opbygning i forhold til struktur, synes dog for enkel - og kan forbedres med specielt visuelle elementer, hvor vi i gruppen har diskuteret os frem mod et mere produkt og målgruppe orienteret desing. Dette kan ske i form af foto-visuelle fremtrædener, og det overdrevne brug af white space(siden er helt basalt sort og hvid), skal udnyttes til at tilkoble flere elementer. Vi vil gerne fremme stemningen omkring deres målgruppe segment, og deres lækre og kvalitetsbevidste produktsortiment - og i forhold til butikkens fysiske placering, spille lidt mere på hele københavner-elementet/oplevelsen - skabe en god historie. Research: Vi har taget et kig på nogle af de nærliggende bogforhandleres sites - og den klassiske tilgang som bogbranchen lægger op til - gennemstråles ikke på samme måde i vores case-site. Vi finder også det nærliggende cafe- og studiemiljø interessant, og har valgt at finde inspiration i hele det webmiljø omkring deres firmaer - med største inspiration i fætter fætter toast-cafe.

7 Mockup Landingpage Desktop Tablet Mobil Webshop Desktop Tablet Mobil

8 wrapper cinnober layoutdiagram desktop landingpage nav - menu line a - link a - link a - link social media landingpage Logo about events find us url img footer contact

9 wrapper cinnober layoutdiagram desktop webshop nav - menu line a - link a - link logo nav - webshop a - link a - link a - link a - link a - link a - link søg div pic colum div pic colum

10 wrapper landingpage cinnober layoutdiagram tablet webshop wrapper nav - menu line a - link a - link a - link social nav - menu line a - link url img header søg Logo Logo category / webshop h2 category a - link kurv events url img

11 wrapper landingpage layoutdiagram mobil wrapper webshop nav - menu line a - link a - link a - link nav - menu line a - link Logo header søg Logo category / webshop category a - link kurv events url img footer

12 wrapper cinnober wireframe desktop menu line baggrundsbillede firmanavn Logo book-shop About afsnits overskrift tekst Events afsnits overskrift tekst find us tekst Contact afsnits overskrift tekst

13 wrapper cinnober wireframe desktop webshop nav - menu line a - link a - link a - link logo menu webshop menu webshop menu webshop menu webshop menu webshop indkøbskurv søg

14 wireframe tablet landingpage wireframe tablet webshop menu menu menu menu firmanavn søg logo logo book-shop category About indkøbskurv om cinnober events info, nyhedsbrev kort Find us contact adresse kontakt info mail. telefon osv

15 landingpage wireframe mobil webshop wireframe mobil menu menu social menu firmanavn søg logo logo book-shop About category om cinnober indkøbskurv events info, nyhedsbrev kort Find us contact adresse kontakt info mail. telefon osv

16 Heuristisk test Usability test

17 Reflektion Vi har i gruppen arbejdet med kommunikation af flere former. Vi har analyseret målgruppen, så vores redesign stadig rammer den rigtige målgruppe og stadig leverer et klart budskab. Med vores meget minimalistiske design, formår vi stadig at vise hvem afsenderen er. Vi har skabt et nyt design der viser en helt ny side af firmaet, men stadig holder stilen og tonen på siden. Gruppens arbejdsproces har fungeret godt, da vi har uddelegeret opgaver til hinanden, men samtidig været med i alle processer. Nogle har kodet mere end andre, men alle har konstant haft et overblik over hvor langt vi var nået. Hvis der har været problemer med nogle ting, har alle i gruppen været involveret, så der ikke er en der sidder med alt læsset til sidst.