Prototyping

Uge 15/21 Tema 7 opgave – Prototyping

Lav Re-Designforslag til 3 sider af kameluld.dk, hvor en af siderne skal være sitets frontpage. Hver af de re-designede sider skal uploades til din portfolio som håndtegnede sketches, wireframes eller  meget gerne digitale mock-ups (Photoshop, Gimp eller lignende software). 

For at kunne tilgå opgaven var det først vigtigt for mig at lave en profil af virksomheden og deres målgruppe for at tune mig ind på kontekst og udtryk af virksomheden. Jeg gennemgik websiden nøje for at hente informationer til dette.

I mit re-design af ‘kameluld.dk’ valgte jeg at:

  • Gå væk fra den oprigtige røde farve, da den var et mismatch til målgruppen.
  • Da kamelen ikke bliver fremhævet på websiden, valgte jeg at se bort fra kamelen. 
  • Anbefaler websiden får et nyt domænenavn, der er et bedre match.

For at lave et re-design lavede jeg en virksomhedsprofil:

  • Profil & historik analyse

Efter denne analyse var jeg klar til at lave en sketching ud fra min plan af re-design af websiden. Jeg har vedhæftet min sketching af plan for forsiden til kameluld.dk.

  • Designet skulle have genkendelighed 
  • Balance / rytme
  • Nærhed / gruppering
  • Lighed

Nu var jeg klar til at lave en mock-ups ud fra mit forarbejde – hertil skulle jeg lige lære at kende Adobe’s Xd, hvor jeg kunne opstille en digital mock-ups. At lære dette program at kende var noget af en opgave for mig, ud over det også var en tidsrøver. 

Min sketching var en kæmpe hjælp, da jeg bedre kunne navigere til målet for re-design, men først efter jeg blev ven med Xd-programmet, hvor jeg også skulle have fat i min tålmodighed. Med det in mente, var det en uvurderlig træning der til sidst, efter rigtig mange timer, gjorde jeg kom frem til følgende resultater på min 3 sider re-design af kameluld.dk.

Forside. En sketching er et godt værktøj indtil det skal skabes ind i en digital mock-ups. For når først det begynder at tage form, i sin skabelse til et næsten virkeligt format, var der ting i sketchingen jeg måtte ændre på i mockups, for at skabe et bedre udtryk. Bl.a. blev logoet ændret og måtte placeres et andet sted end, hvad jeg havde tænkt og billederne fik også en anden placering. For at skabe ro for øjet valgte jeg at logo’et kun skulle figurere på forsiden.

På siden Priser, valgte jeg at bruge space for ikke at overdøve med for meget info. Jeg har valgt at lave fed skrift til ord der skal være blikfang. Jeg vælger også at bruge samme header på alle siderne, for genkendelighed og at lægge fokus på dette skønne sted. Med stedets faciliteter og Hanne’s indfaldsvinkel valgte jeg at skabe lidt feststemning, for at gøre siden med priser lidt mere farveriggennem de billeder jeg valgte.

På siden Priser, valgte jeg at bruge space for ikke at overdøve med for meget info. Jeg har valgt at lave fed skrift til ord der skal være blikfang. Jeg vælger også at bruge samme header på alle siderne, for genkendelighed og at lægge fokus på dette skønne sted. Med stedets faciliteter og Hanne’s indfaldsvinkel valgte jeg at skabe lidt feststemning, for at gøre siden med priser lidt mere farveriggennem de billeder jeg valgte.

Typografi og farvepalette

Jeg var igennem mange forskellige skrifttyper, før jeg blev tilfreds med resultatet. Og drillede det? – Ja tak, mange gange. Det var en god øvelse at undersøge skrifttyper og jeg synes de to jeg valgte, arbejder godt sammen. En ting jeg fandt frem til var, at Helvetica Neue er en virkelig god overskrifts font. Kan godt forstå den er populær.

Konklusion

Wow for en opgave! Jeg læste side op og side ned om prototyping, wireframes og mock-ups for at være parat til denne opgave. Dernæst, sidde og lære Adobe-Xd på video fra deres træningsside, hvor al stof ‘how to’ blev demonstreret på en mobil – og jeg skulle lære det, for at kunne skabe et re-design til en webside! Nuvel, jeg lærte alle ikoner og deres betydning at kende, men ikke rigtig at bruge dem i praksis i forhold til en webside. Jeg er stædig og vedholdende, og tænk engang – 10’øren faldt i en video på YouTube, som forklarede mig hvordan man bruger ikonerne og laver en digital mock-ups i Adobe Xd! Det var lykke. 

Herfra kunne Xd og jeg samarbejde og få alt, hvad der målrettet kunne bruges af hidtil lært stof på SmartLearning faget. Det endte med at jeg gik fra opgivende til, at jeg nærmest blev forelsket i Xd, der gav mig mulighed for at kunne skabe fra min sketching, der blev korrigeret, videre til en digital muck-ups. Jeg lærte også at detaljer er godt, dog kan det være en tidsrøver at fordybe sig for meget i dem, og ikke mindst langsomliggøre at nå til resultaterne. 

Når jeg sidder her og er færdig, må jeg indrømme at det var en god og lærerig opgave af min første mock-ups.