Ontwerpdocument Lindsay Leatemia & Nick Gazendam 31 03 2016

IN-FRAME

ONTWERPDOCUMENT

NICK GAZENDAM EN LINDSAY LEATEMIA SIM B - IMEC - ROBERT LARICCIA - 31 MAART 2016

INHOUDSOPGAVE Inleiding

04

Highlights / conclusies research

06

Programma van eisen

12

Research onderwerp

15

Research vormgeving

18

Concept applicatie

23

Look en feel

24

Logo

28

Highlight / conclusie designstudie

30

Schermontwerpen web

34

Schermontwerpen mobiel

50

Customize element

56

Bronnen

66

Reflecties

67

Logboeken

69

Bijlage A

70

Bijlage B

73

Voor het vak IMEC hebben wij, Nick Gazendam en Lindsay Leatemia, de opdracht gekregen om een applicatie te ontwikkelen en ontwerpen. Het moet een responsive website worden voor een fictief bedrijf of organisatie waarvoor er drie pagina’s worden uitgewerkt.

Het onderwerp voor de opdracht is ‘customize your own..’; een dynamische pagina met interactieve elementen waarmee een gebruiker zelf een product kan samenstellen en vervolgens bijvoorbeeld kan bestellen en betalen.

Het concept dat wij hebben bedacht is een responsive website ontwerpen en ontwikkelen waar de gebruiker zelf posters kan creëren en deze kan combineren met verschillende lijsten.

De producten die de gebruiker heeft gecreëerd kan worden besteld. Het bedrijf gaat In-Frame heten.

Om een zo goed mogelijk product op de markt te kunnen zetten hebben wij voor ons concept al een aantal analyses gedaan zoals een context, content, gebruikers en taakanalyse.

Deze analyses zijn te vinden in onze omgevingsanalyse.

In dit verslag draait het om het ontwerp van In-Frame. We gaan op zoek naar beeldmateriaal naar aanleiding van research naar het onderwerp en we ontwikkelen een stijl voor In-Frame.

De stijl wordt uitgebreid besproken zoals onze kleurenschema’s interactie, navigatie, typgrafie, layout en grids. Ook komt het eindresultaat van In-Frame aan bod.

Bron: Michitecture dot com 2015

4

INLEIDING

5

HIGH LIGHTS Opdracht debrief De opdracht voor het vak IMEC is een webapplicatie ontwikkelen en ontwerpen. Het moet een responsive website worden voor een fictief bedrijf of organisatie waarvoor er drie pagina’s worden uitgewerkt. Het onderwerp voor de opdracht is ‘customize your own..’; een dynamische pagina met interactieve elementen waarmee een gebruiker zelf een product kan samenstellen en vervolgens bijvoorbeeld kan bestellen en betalen. Eisen zijn dat er drie pagina’s worden uitgewerkt en dat er een formulier wordt ontworpen.

Opdrachtgever / onderwerp De gebruiker kan op onze website, genaamd InFrame, eigen posters ontwerpen en inlijsten.

In-Frame richt zich vooral op de Scandinavisch design (posters). De gebruiker kan gebruik maken van bestaande posters of eigen posters creëren. De bestaande posters zijn natuurlijk ook aan te passen.

De posters bestaan vooral uit zwart, wit met steunkleuren. Het zijn strakke (grafische) design met vooral quotes.

De posters kunnen aangeschaft worden zonder of met lijsten. De gebruiker kan individuele producten aanschaffen maar ook meerdere als groepsproducten.

De gebruiker kan een eigen poster ontwerpen, een bestaande kiezen of bewerken. Denk hierbij aan de lettertypes, formaten, achtergronden, kleuren, doodles, illustraties enzovoort. Er kunnen foto’s worden toegevoegd en filters worden gebruikt. Alles kan wel veranderd worden en het eindproduct wordt dan precies zoals de gebruiker het wilt hebben.

Om te kijken hoe het aan de muur hangt kunnen er verschillende woonomgevingen worden geselecteerd. Er kan ook een eigen foto van bijvoorbeeld de woonkamer worden geüpload.

Zo kunnen de gebruikers zien hoe het in hun eigen huis zou staan.

6

Mogelijke opdrachtgevers voor In-Frame kunnen zijn vtwonen, Rivderdale en Bloomingville. vtwonen is een unieke Nederlandse one stop shop voor woonproducten, inspiratie en praktische informatie en maakt wonen leuk voor iedereen. Je kunt op vtwonen.nl terecht om te shoppen naar meubels en woonaccessoires, inspiratie opdoen, zelfmaak ideeën vinden en binnenkijken in andere huizen. Via Twitter, Facebook en Pinterest houden ze volgers en fans op de hoogte van acties en trends en gaat vtwonen de dialoog aan met haar lezers en bezoekers. Naast dat vtwonen een webshop heeft hebben zij een magazine en tv-programma.

(Sanoma, 2016) Riverdale is een Nederlands bedrijf dat woonaccessoires aan bied voor het gehele huis. Naast een eigen webshop, is riverdale verkrijgbaar in ruim tweehonderdvijftig winkels in Nederlands, Europa en zelfs landen daarbuiten. (Riverdale, z.d.)

Bloomingville is een Deens bedrijf dat Deens design combineert met de Noordse trends van het moment. Bloomingville ontwerpt, ontwikkelt en verkoopt op breed scala aan interieurstijlen.

Ze houden altijd de gedachten van verandering in het huis van de gebruiker in het achterhoofd.

De producten van Bloomingville bestaan uit woonaccessoires tot meubelen.

7

Doelgroep (segmentatie) De doelgroep van In-Frame bestaat uit een brede groep vrouwen en mannen tussen 20 en 45 jaar en middel tot hoogopgeleid. Het zijn zowel vrouwen als mannen die een creatieve en inspirerende woon- en leefomgeving belangrijk vinden.

De doelgroep bestaat uit jongeren, (jonge) stellen en gezinnen. De meesten hebben een eigen huis of hebben recent een nieuwe woning aangeschaft. Het zijn mensen die graag actief in en om het huis bezig zijn met hun inrichting. De doelgroep heeft een gemiddeld tot hoog inkomen. Zij geven met alle plezier geld uit aan het huis.

Ze zijn zeer actief op internet en social media. Ze houden het liefst Pinterest en Instagram in de gaten voor de nieuwste trends en woon inspiratie. Daarnaast reizen ze meer dan de gemiddelde Nederlander, hechten waarde aan cultuur, een gezonde levensstijl en status. De doelgroep is vooral geïnteresseerd in kunst, cultuur, vormgeving, film, literatuur en architectuur. Of je nou een liefhebber bent van interieur design of gewoon een leuk cadeautje wil bestellen In-Frame faciliteert beiden.

Bron: Decordots 2014

Programma van Eisen Het programma van eisen hebben wij op een rijtje gezet met behulp van de MoSCoW methode. Het belangrijkste wat toegepast moet worden is alles wat onder must haves valt. Andere belangrijke eisen zijn dat er drie werkende pagina’s in het prototype zitten, er een dynamisch element in zit, een eigen huisstijl is vormgegeven en dat er een formulier op de website aanwezig is die werkt.

Het programma van eisen geldt ook voor de mobiele versie alleen wordt deze natuurlijk op een andere manier ontworpen/ingedeeld.

8

Must-have: Vereist om te kunnen spreken van een werkbaar product; • Werkend customizable element in de website • Aantrekkelijke en professionele uitstraling

• Overzichtelijke korte teksten • Scandinavische look en feel • How does it work (element info) • De website moet gebruiksvriendelijk zijn • Professioneel uitziende beeldmateriaal zoals foto’s Should-have: Hoge prioriteit, maar niet vereist voor een bruikbaar product; • Clickable single page scroll-website • About us

• Inlogmogelijkheid met profiel • Contact mogelijkheid • Zoekfunctie • Snelle laadtijd • Gebruik van iconen voor meer duidelijkheid Could-have: Optie die alleen wordt meegenomen als er tijd over is; • Social media koppelen • Betaalbare prijzen bij bestellen Would-have: Geen prioriteit, kan eventueel in de toekomst opnieuw worden overwogen; • Uitgebreide originele teksten en informatie • Te veel whitespace • Te veel elementen en informatie op een pagina 9

Scenario’s van de interactie en / of dynamische onderdelen De gebruiker komt eerst op de homepagina terecht waar een navigatie te vinden is en korte informatie over In-Frame. Als de gebruiker er voor kiest de In-Frame webapplicatie te gaan gebruiken gaat de gebruiker naar de navigatie en klikt hij of zij of design your own.

Als de gebruiker er voor kiest gebruik te maken van onze webapplicatie, kan hij of zij verschillende handelingen uitvoeren. (We gaan hier even uit van een hij gebruiker.) De gebruiker kan kiezen of hij een groep aankoop wilt doen (meerdere lijsten) of een individuele aankoop. Nadat hij zijn toekomstige aankoop heeft geselecteerd kan hij aan de slag gaan met ontwerpen.

Hij kan kiezen uit bestaande ontwerpen en door gaan naar bestellen en betalen. Hij kan er ook voor kiezen om zelf te gaan ontwerpen. Handelingen die hij dan kan uitvoeren zijn het veranderen van lettertypes, formaten, achtergronden, kleuren, teksten, illustraties, foto’s, filters, doodles, en kleuren. Om te kunnen zien hoe het in zijn eigen woonkamer staat kan hij ook een foto van zijn muur uploaden. Zo heeft hij een beter beeld van zijn toekomstige decoratie aan de muur.

Na dat de gebruiker klaar is met zijn eigen ontwerp kan hij gaan kiezen wat voor een papiersoort hij wilt voor zijn poster. Dit kan belangrijk zijn als de gebruiker geen lijst er bij zou willen. Hij kan er dan bijvoorbeeld voor kiezen om het te bestellen op 350 gram zodat hij een soort karton (harde) poster heeft om op te hangen. Natuurlijk kan dit ook als hij het ingelijst zou willen hebben. Na de papierkeuze kan de lijst gekozen worden. De lijst kan aangepast worden in formaat en kleur.

Na dat deze keuze is gemaakt kan er besteld worden. De gebruiker kan bestellen als gast maar ook als klant met eigen profiel. De gebruiker zal dan een account moeten aanmaken met een gebruikersnaam en wachtwoord. Voor het bestellen moet een formulier worden ingevuld zoals adresgegevens. Na dat het formulier is ingevuld kan de gebruiker gaan betalen. Dit zou via iDeal, Paypal of acceptgiro kunnen. Vervolgens wordt de bestelling in behandeling genomen en bezorgd bij de klant.

10

Bron: Homedsgn 2015

Concurrentie In de omgevingsanalyse hebben we gekeken naar een aantal concurrenten. De concurrenten hebben duidelijk een eigen huisstijl met steunkleur wat het bedrijf ‘eigen’ maakt. Sommige websites bevatten veel informatie op de homepage waardoor je niet weet waar je moet kijken, wat je wilt lezen en waar je heen wilt. Een concurrent maakte gebruikt van veel white space waardoor het lijkt alsof er iets ontbreekt op de website.

De websites maken gebruik van foto’s van hoge kwaliteit. Dit straalt professionaliteit en vertrouwen uit. Ook gebruiken ze veel iconen en buttons om voor duidelijkheid te zorgen bij de gebruiker. Op de websites van de concurrenten kan je meestal wel eigen foto’s uploaden en laten drukken. Zelf ontwerpen kan niet of nauwelijks waardoor gebruikers zelf ervaring moeten hebben in ontwerpen met andere programma’s of ze moeten kiezen uit bestaande ontwerpen.

11

PROGRAMMA VAN EISEN

Inspiratie / trends De stijl van In-Frame willen wij aanpassen op het Scandinavisch interieur. We gaan onze inspiratie halen uit interieur foto’s. Zo willen wij de website ook wit, licht, strak en minimalistisch ontwerpen. Om een indruk te krijgen op het Scandinavisch interieur is in het hoofdstuk beeldresearch een moodboard te vinden.

Conclusie Met behulp van de bovenstaande highlights die zijn gebleken in de omgevingsanalyse hebben we een beter beeld van onze doelgroep, concurrentie, eisen en inspiratie gekregen.

De doelgroep van In-Frame bestaat uit een brede groep vrouwen en mannen tussen 20 en 45 jaar en middel tot hoogopgeleid. Het zijn zowel vrouwen als mannen die een creatieve en inspirerende woon- en leefomgeving belangrijk vinden.

Er is geen specifieke concurrentie met het concept dat wij hebben bedacht. Wel hebben ze goede maar ook slechte elementen op de websites. Deze elementen hebben wij opgenomen in het programma van eisen. Goede elementen zijn dat ze gebruik maken van foto’s van hoge kwaliteit waardoor ze professionaliteit uitstralen. Dit is voor ons een must have geworden. Ook hebben de concurrent een eigen huisstijl wat ze ‘eigen maken’ Ook dit hebben wij bij de must haves toegevoegd. Een slecht element is te veel gebruik van white space waardoor het lijkt als of er iets ontbreekt. Dit hebben wij opgenomen onder het kop je won’t have.

Onze inspiratie is duidelijk geworden. We halen onze inspiratie uit Scandinavische interieur foto’s en designs. De inspiratie is vooral wit, licht met strakke designs

Het programma van eisen hebben wij op een rijtje gezet met behulp van de MoSCoW methode. Het belangrijkste wat toegepast moet worden is alles wat onder must haves valt. Andere belangrijke eisen zijn dat er drie werkende pagina’s in het prototype zitten, er een dynamisch element in zit, een eigen huisstijl is vormgegeven en dat er een formulier op de website aanwezig is die werkt.

Must-have: Vereist om te kunnen spreken van een werkbaar product; • Werkend customizable element in de website • Aantrekkelijke en professionele uitstraling • Overzichtelijke korte teksten • Scandinavische look en feel • How does it work (element info) • De website moet gebruiksvriendelijk zijn • Professioneel uitziende beeldmateriaal zoals foto’s

12

Bron: Bynordics 2014

Should-have: Hoge prioriteit, maar niet vereist voor een bruikbaar product; • Clickable single page scroll-website • About us • Inlogmogelijkheid met profiel • Contact mogelijkheid • Zoekfunctie • Snelle laadtijd • Gebruik van iconen voor meer duidelijkheid Could-have: Optie die alleen wordt meegenomen als er tijd over is; • Social media koppelen Would-have: Geen prioriteit, kan eventueel in de toekomst opnieuw worden overwogen; • Uitgebreide originele teksten en informatie • Te veel whitespace • Te veel elementen en informatie op een pagina

13

BEELDMATERIAAL ONDERWERP Beeldmateriaal onderwerp In-Frame staat in het teken van posters en lijsten. Het is dan essentieel dat de website beschikt over product- en inspiratiefoto’s. We willen vooral bestaande content gebruiken zoals Scandinavische interieur foto’s. Hier is al onderzoek naar gedaan in de omgevingsanalyse.

De foto’s worden voorbeelden voor de gebruikers. Zo zien zij waar In-Frame voor staat en wat het is. Ook moeten de foto’s de gebruikers inspiratie geven. De inspiratie kan leiden tot een aankoop. Het is dus belangrijk dat de foto’s er goed uit zien.

Uit de concurrentieresearch in de omgevingsanalyse is gebleken dat het belangrijk is om beeld te hebben van hoge kwaliteit. Dit straalt professionaliteit en betrouwbaarheid uit. Dit zijn zeker eisen aangezien In-Frame eigenlijk ook een webshop is. InFrame moet de gebruiker vertrouwen geven. Dit vertrouwen kan de gebruiker overhalen een aankoop te doen.

Waar Scandinavisch design vandaan komt is eerder beschreven in de context van de omgevingsanalyse. We hebben in dit gedeelte gezocht bij Google afbeeldingen en op Pinterest op de term Scandinavian living. Beide zoekresultaten kwamen vooral uit op witte interieur foto’s, veel licht, planten en strakke stijlvolle meubels zoals de beroemde stoel van Eames.

Wat ons op viel was dat naar schatting tachtig procent van de interieur zoekresultaten grafische posters met lijsten bevatte.

Hierdoor is dus Scandinavische context voor ons bevestigd en zitten wij op het goede pad voor In-Frame.

Bij het dynamisch element van In-Frame kan de gebruiker kiezen uit illustraties en patronen. Voor deze onderdelen willen wij ook gebruik maken van bestaande content. Op Pinterest zochten we naar onder andere op de term graphic pattern. We kwamen uit op patronen die overeen kwamen met de posters uit de Scandinavische interieur foto’s. Deze content willen we dan ook graag gebruiken voor ons element. Dit beeldresearch is te vinden in een moodboard op de volgende pagina.

14

Bron: Mihome 2015

15

POSTERS

FRAMES

16

17

RESEARCH VORMGEVING De stijl van In-Frame willen wij dus aanpassen op het Scandinavisch interieur. Zo willen wij de website ook wit, licht, strak en minimalistisch ontwerpen. We zijn op zoek gegaan naar websites die in deze ‘stijlekeuze’ zijn vormgegeven. Omdat we de homepage graag single page scroll willen hebben, zoeken we hier ook naar.

Herschel De pagina beschikt over hoge kwaliteit product foto’s. De producten worden hierdoor mooi weergegeven en de pagina straalt hierdoor professionaliteit af. De pagina heeft een uitklap menu als je klikt op het menu icon linksboven in.

Op deze pagina wordt veel met iconen gewerkt zoals het menu, het winkelwagentje rechtsboven, en onder de pagina worden social media iconen gebruikt. Bij verschillende informatie op de pagina staat buttons om verder te kunnen gaan zoals winkelen of verder lezen. Hierdoor bevat de pagina bevat weinig tekst en ziet het er strak en ‘clean’ (schoon/netjes) uit.

Zeyn De pagina beschikt over hoge kwaliteit product foto’s. De producten worden hierdoor mooi weergegeven en de pagina straalt hierdoor professionaliteit af.

Het is duidelijk dat de pagina in vlakken is opgedeeld en er duidelijk een wireframe door heen te zien is. Er wordt vooral grijs, wit met zwarte tekst gebruikt waardoor de foto’s nog beter tot zijn recht komen. Hierdoor springen de producten er boven uit.

De broodtekst bevat een schreefletter en wordt weergeven in onderkast letters. Ook hier zijn de titels weer in kapitalen en hebben ze een schreefloze lettertype.

Voor de titels worden er kapitaal gebruikt met een schreefloze lettertype. Het logo is bevat een sierlijk lettertype dat terug komt in een welkoms zin op de pagina. Voor de broodtekst wordt er een lettertype gebruikt met een schreef. Hierdoor is er onderscheid tussen de titels, die bestaan uit kapitalen en een schreefloze lettertype, en de broodtekst die bestaat uit onderkast letters met een schreeflettertype. Opvallend is ook dat de teksten gecentreerd staan. Dit is fijn voor het lezen als de gebruiker naar benden scrolt.

18

De pagina bevat bovenaan een navigatiebalk, gecentreerd. Hierdoor kan de gebruiker meteen zien uit welke hoofdpagina’s de website bestaat en wat voor een informatie zij kunnen vinden.

Er worden verschillende iconen gebruikt zoals voor social media, maar ook om titels te weergeven in beeld.

De pagina bevat duidelijk een wireframe en is opgebouwd uit verschillende vlakkenmet behulp van dunne lijnen. De kleuren grijs, wit en zwart worden hier vooral gebruikt met als steunkleur licht rood wat Zeyn eigen maakt, een huisstijl.

Ook deze pagina bevat weinig tekst en maakt gebruik van buttons om verder te gaan op bijvoorbeeld een artikel.

Op de volgende pagina is beeld inspiratie te vinden.

19

20

21

CONCLUSIE RESEARCH Conclusie beeldresearch vormgeving Door de research naar vormgeving zijn we erg geïnspireerd geraakt en willen we onze inspiratie gaan toepassen op het concept. De stijl van In-Frame willen wij dus aanpassen op het Scandinavisch interieur.

Zo willen wij de website ook wit, licht, strak en minimalistisch ontwerpen.

We hebben onderzoek gedaan naar single page scrol websites. Door dit onderzoek willen we op het gebied van tekst verschillende lettertypes gaan gebruiken. Voor de titels worden er kapitaal gebruikt met een schreefloze lettertype. Voor de broodtekst wordt er een lettertype gebruikt met een schreef.

Hierdoor is er onderscheid tussen de titels, die bestaan uit kapitalen en een schreefloze lettertype, en de broodtekst die bestaat uit onderkast letters met een schreeflettertype. Ook zagen we dat onderdelen worden gecentreerd. Dit willen we ook gaan doen omdat dit fijn is voor het lezen als de gebruiker naar benden scrolt.

CONCEPT In-Frame De gebruiker kan op onze website, genaamd InFrame, eigen posters ontwerpen en inlijsten gericht op het Scandinavisch design. De gebruiker kan gebruik maken van bestaande posters of eigen posters creëren. De bestaande posters zijn natuurlijk ook aan te passen.

22

Bron: Roomed 2015

Om te kijken hoe het aan de muur hangt kunnen er verschillende woonomgevingen worden geselecteerd. Er kan ook een eigen foto van bijvoorbeeld de woonkamer worden geüpload. Zo kunnen de gebruikers zien hoe het in hun eigen huis zou staan.

De posters bestaan vooral uit zwart, wit met steunkleuren. Het zijn strakke (grafische) design met vooral quotes.

De posters kunnen aangeschaft worden zonder of met lijsten. De gebruiker kan individuele producten aanschaffen maar ook meerdere als groepsproducten.

Unique selling points • Doelgroep is op zoek naar inspiratie en informatie over het creëren van een eigen poster en of frame.

De gebruiker kan een eigen poster ontwerpen, een bestaande kiezen of bewerken. Denk hierbij aan de lettertypes, formaten, achtergronden, kleuren, doodles, illustraties enzovoort. Er kunnen foto’s worden toegevoegd en filters worden gebruikt.

Alles kan wel veranderd worden en het eindproduct wordt dan precies zoals de gebruiker het wilt hebben.

• In-fram biedt customize producten tegen een betale prijs aan.

• In-Frame biedt een hoogwaardig platform voor producenten en leveranciers.

• In-Frame benadert woonstijlen met gevoel voor kwaliteit: van persoonlijk tot eigentijdse luxe.

•De inhoud van In-Frame is uniek; wat u met InFrame kunt creëren kunt u nergens anders vinden.

23

POSTERS

LOOK EN FEEL Een groot deel van de content van de website willen wij zelf gaan maken. We ontwerpen zelf de website zoals de vormgeving en dus ook de huisstijl. We kiezen zelf welke lettertypes we gaan gebruiken, kleuren en iconen. Wat wij niet zelf gaan maken zijn de foto’s en afbeeldingen die gebruikt gaan worden. De foto’s en afbeeldingen worden bestaande content die passen bij onze huisstijl.

Foto’s en afbeeldingen Op de website willen we veel interieur foto’s gaan plaatsen zodat de gebruiker geïnspireerd raakt en de applicatie van In-Frame wilt gaan gebruiken.

Waar Scandinavisch design nou vandaan komt is eerder beschreven in de contextanalyse. We hebben gezocht bij Google afbeeldingen en op Pinterest op de term Scandinavian living. Beide zoekresultaten kwamen vooral uit op witte interieur foto’s, veel licht, planten en strakke stijlvolle meubels zoals de beroemde stoel van Eames.

Wat ons op viel was dat naar schatting tachtig procent van de interieur zoekresultaten grafische posters met lijsten bevatte. Hierdoor is dus Scandinavische context voor ons bevestigd en zitten wij op het goede pad voor In-Frame.

Bij het dynamisch element van In-Frame kan de gebruiker kiezen uit illustraties en patronen. Voor deze onderdelen willen wij ook gebruik maken van bestaande content. Op Pinterest zochten we naar onder andere op de term graphic pattern. We kwamen uit op patronen die overeen kwamen met de posters uit de Scandinavische interieur foto’s.

Deze content willen we dan ook graag gebruiken voor ons element.

24

FRAMES

Bron: Interiordots 2014

Kwaliteit De kwaliteit van de gevonden interieur foto’s zien er hoog uit. De foto’s zouden zo in een magazine geplaatste kunnen worden. Voor ons is het ook een must have om foto’s te hebben met een professionele uitstraling. Deze uitstraling weergeeft de kwaliteit van In-Frame bij de gebruiker. De haalt vertrouwen op bij de gebruiker waardoor ze durven te bestellen bij In-Frame.

Tekst De teksten (informatie) op de website gaan wij zelf typen. Een must have voor ons is dat we niet te veel informatie aan tekst willen. Te veel tekst wordt kan bij de gebruiker een storend en of saai gevoel opwekken. We willen zoveel mogelijk met foto’s werken. De teksten op de site worden kort.

Stijl De stijl van In-Frame willen wij aanpassen op het Scandinavisch interieur. Zo willen wij de website ook wit, licht, strak en minimalistisch ontwerpen.

Onze huisstijl vindt je in het ontwerpdocument.

25

Kleurpalet In de omgevingsanalyse hebben we research gedaan naar content. We zochten op Pinterest en Google naar Scandinavian living. We kwamen vooral uit op witter interieur foto’s, veel licht, planten en strakke stijlvolle meubels.

In het hoofdstuk research vormgeving zagen we dat een aantal websites vooral zwart, wit en grijs gebruikten waardoor de fotografie er uit sprong. Dit willen wij graag ook omdat het gaat om productfoto’s. De foto’s moeten opvallen en gezien worden door de gebruiker.

De kleuren zwart, wit en grijs komen dus ook voor in de interieur foto’s die wij willen gebruiken. Hier door wordt de pagina één geheel.

Om de website net iets meer eigen te maken dan andere websites die in de zelfde context vallen, hebben we gekozen voor een steunkleur.

De steunkleur is geel/goud geworden. Deze kleur geeft in combinatie met het schreeflettertype Baskerville een chique gevoel. De gebruiker moet zich naemlijk speciaal voelen op onze website en een unieke ervaring beleven. Dit doen wij dus door onder andere de vormgeving zoals kleur, lettertype maar ook de itnerieur foto’s.

Typografie Door research naar vormgeving zijn we geïnspireerd geraakt door het gebruik van verschillende lettertypes bij elkaar. We zagen dat verschillende websites schreefloze lettertypes met schreeflettertypes combineerden. Ook combineerden verschillende websites kapitalen met onderkast letters. Dit willen wij ook gaan doen.

Voor de titels willen wij een schreefloos lettertype gaan gebruiken. Dit wordt het lettertype Helvetica Bold en de titels komen in kapitalen te staan. Voor de broodtekst kiezen wij een lettertype met een schreef. Het schreeflettertype dat wij hebben gekozen is Baskerville Regular. De broodtekst wordt gebruikt met onderkast letters.

We hebben er voor gekozen om een Bold in Kapitalen met Regular en onderkast letters te combineren. Hierdoor is er onderscheid tussen de titels, die bestaan uit kapitalen en een schreefloze lettertype, en de broodtekst die bestaat uit onderkast letters met een schreeflettertype.

Helvetica Bold

abcdefghijklm nopqrstuvwxyz 0123456789 Baskerville Regular abcdefghijklm nopqrstuvwxyz 0123456789

Omdat we de homepage als one page scroll willen ontwerpen, hebben we er voor gekozen om zoveel mogelijk alinea’s gecentreerd neer te zetten. Dit kan prettig zijn voor het lezen als de gebruiker naar benden scrolt.

26

Bron: Homedsgn 2014

27

LOGO

Het logo wilden we graag niet uitgebreid hebben en minimalistisch houden. Door research naar vormgeving wilden we graag het logo wit op zwart of zwart op hebben. Het logo kan op beiden manier gebruikt worden. Omdat standaard printpapier wit is hebben we er voor gekozen om het logo eerst zwart op wit te ontwerpen. Wordt het logo gebruikt op een zwarte achtergrond dan gebruiken we een wit logo.

De naam In-frame komt van het Engels vandaan. Naar Nederlands vertaald is het letterlijk inlijsten. Dat is wat de gebruiker kan doen bij In-frame dus de naam is toepasselijk bij het concept. Dit wilden we nog extra uitdrukken in het logo. Het logo bestaat uit tekst met beeld. De tekst is onze naam en voor het beeld wilden we graag een omlijning gebruiken dat staat voor een lijst. Nick heeft een aantal schetsen op papier gemaakt en Lindsay heeft er een aantal uitgewerkt op de computer. Van alles schetsen hebben we uiteindelijk gekozen voor In-frame met een omlijning. In-frame komt aan de zijkanten van de frame uit. Hierdoor lijkt het alsof we nog bezig zijn met In-frame omlijsten.

Het logo is op de website uiteindelijk wit op zwart geworden naast het menu die ook ook wit op zwart is weergeven. Voor de responsive mobiele website hebben we er voor gekozen om het zwart op wit te doen. Hier is het menu namelijk uitklapbaar.

Het logo onder in de pagina is het definitieve logo geworden.

Voor de naam hebben we een schreefloos lettertype gekozen genaamd Helvetica. De naam hebben we in light weergeven.

We hebben ook een aantal schetsen in bold. Het gebruik van Helvetia Bold vonden wij nogal ‘in your face’ dus hebben we er voor gekozen om In-Fram in light te zetten. Hierdoor hoeft het frame er om heen ook niet dik gelijnd te worden.

IN-FRAME

In de bijlagen van dit document zijn een aantal schetsen te vinden.

IN-FRAME 28

IN-FRAME

Bron: Decordots 2014

IN-FRAME 29

IMEC HIGHLIGHTS Bron: Homedsgn 2015

Interactie, navigatie en interface GUI Een Graphical User Interface, afgekort ook wel GUI, zorgt er voor dat in principe iedereen zonder voorkennis apparaten goed kan bedienen.

Graphical User Inferface bestaat vooral uit vensters, menu’s, knoppen, iconen, kleuren en typografie. Deze elementen helpen de gebruiker te navigeren en handelingen uit te voeren. Ze maken de gebruiker het makkelijk waardoor de gebruiker geen voorkennis nodig heeft.

Voor de website van In-Frame maken we vooral gebruik van rollover buttons. Dit zijn knoppen waarop de gebruiker kan klikken. Om de gebruiker te helpen met navigeren en een handeling te maken, geven we de klikbaren knoppen een andere kleur wanneer de gebruiker er met de muis over heen gaat.

Ook willen we gebruik maken iconen. De iconen helpen de gebruikers bepaalde teksten of elementen sneller te begrijpen. Gebruikers kunnen weten wat de iconen betekenen door eigen ervaringen. Zo maken we gebruikt van een vergrootglas icon. De gebruiker weet door dit icon dat het een zoekfunctie is. Ook maken we gebruik van iconen bij teksten. Door de iconen hoeft de gebruiker minder snel de tekst te lezen. Ze weten hierdoor bijvoorbeeld al wat voor een informatie de tekst geeft. Als de gebruiker dan ergens naar op zoek is kunnen zij sneller hun informatie vinden.

30

Voor de titels maken we gebruik van grote schreefloze lettertypes en zetten we de titels in kapitalen. Hierdoor vallen de titels voor de gebruiker meteen op en weten ze op welke plek ze zijn op de website.

De header boven in de website is fixed. Hierdoor kan de gebruiker makkelijk, snel en altijd navigeren door de website heen. Wordt er geklikt op een onderdeel zoals About In-Frame, dat scrollt de pagina meteen naar de positie op de website waar dit onderdeel staat. We maken het hierdoor makkelijker voor de gebruiker, zij hoeven niet zelf te scrollen.

De website maakt ook gebruik van een grid. De website is namelijk opgebouwd uit verschillende blokken. Dit is te zien aan de afwisselende kleuren bij elk onderdeel. Hierdoor weet de gebruiker wanneer een onderdeel stopt en er een nieuwe onderdeel volgt.

Onder verschillende onderdelen staat een aantal puntjes. De puntjes geven aan dat de gebruiker kan scrollen voor meer onderdelen zoals meer blogposts of foto’s. Als de gebruiker de website met een trackpad bezoekt, zou de gebruiker bij deze onderdelen kunnen swipen. Hierdoor ziet er een stukje NUI in onze interface.

Formulier Voor het formulier hebben we gekozen om een contact formulier te gaan creëren. In het contact formulier moeten gebruikers hun gegevens kunnen invoeren. De labels worden links uitgelijnd naast de invoervelden. Hierdoor ziet de gebruiker het verband tussen het label links en invoerveld rechts.

Er zijn geen onnodige oogbewegingen nodig.

De invoervelden en labels worden netjes naast elkaar uitgelijnd en hebben de zelfde breedtes. Om het de gebruiker niet moeilijk te maken komt het formulier op één pagina te staan. Het bestaat dus niet uit meerdere pagina’s zoals bijvoorbeeld een bestel formulier.

Bij een aantal labels staan sterretjes. De sterretjes geven aan dat het een verplicht veld is om in te voeren. Dit kan toegepast worden op informatie die bijvoorbeeld te klantenservice nodig heeft om de klant verder te kunnen helpen bij een probleem.

Worden de verplichte velden niet ingevoerd, dan omlijnt het veld rood en kan het formulier niet verstuurd worden.

Onder het formulier komt een knop te staat waarmee de klant het formulier kan versturen. De knop heet dan ook gewoon versturen om het voor de gebruiker makkelijk en begrijpelijk te maken.

Voor het formulier hebben we een aantal elementen.

Zo wordt er een radio button gebruikt om aan te geven welke aanhef de gebruiker heeft. Voor het onderwerp wordt een drop down menu gebruikt.

De gebruiker kan dan kiezen onder welk onderwerp zijn of haar verhaal valt.

Lay-out Voor de website wilde we graag gebruik maken vaan één pagina, ook wel een one scroll page. Omdat alles op één pagina te vinden is, is het belangrijk dat we een goed gestructureerd lay-out gebruiken.

De lay-out van de website is dan ook in blokken verdeelt zo dat de gebruiker kan zien wanneer een onderdeel stopt en er een nieuw onderdeel begint omdat alles op één pagina onder elkaar staat.

De lay-out bestaat ook wel uit een grid. Bovenaan staat een header. Hier onder volgen er verschillende onderdelen die in het head menu staan weergeven.

Deze onderdelen worden gescheiden van blokken met wisselend de kleuren. Na alle onderdelen is onderaan een footer te vinden. De header hebben de zelfde kleur, zwart. Hierdoor weet de gebruiker waar het begin en het eind van de website is.

Onder bijlage A achterin dit document zijn schetsen te vinden.

31

SCHERMONTWERPEN IN-FRAME 32

Op de volgende pagina’s zijn schermaontwerpen, sfeerfoto’s en dynamische onderdelen met beschrijvingen te vinden. In bijlage B zijn wireframes schetsen en de definitieve wireframe te vinden.

33

IN-FRAME WEBSITE

34

35

HOME

Dit is de home pagina van In-Frame. Bovenaan is een header te zien die fixed is. Deze header blijft dus in beeld wanneer de gebruiker scrollt. Links in de header is het logo te vinden. Zo weten gebruikers op welke websites zij zich bevinden.

Rechts in de header is een zoek icon te vinden en naast het icon kunnen gebruikers klikken om zich in te loggen of te registeren. Wanneer zij dit doen komt er een inlogscherm in beeld, een apart venster, dat zich nog wel in de website bevindt. De gebruiker kan via een X wegklikken en terugkomen op de website.

De website bestaat dus maar uit ĂŠĂŠn pagina. Omdat we niet te veel tekst, informatie en subonderdelen op de pagina willen, komen deze onderdelen zoals het inloggen als een apart venster in beeld. Zo blijft de gebruiker op de In-Frame pagina en kan hij of zij het venster na gebruik wegklikken.

De titels in de header zijn klikbaar en zijn alle hoofdonderdelen die op de one scroll page te vinden zijn.

Wanneer de gebruiker met de muis over een link gaat kleurt deze geel/goud. Hierdoor weet de gebruiker dat de titel klikbaar is. Wanneer er geklikt wordt, wordt de gebruiker naar de positie van het onderdeel gebracht. Bij een klik scrollt de pagina dus voor de gebruiker. We hebben er voor gekozen om de titels op de website in het Engels neer te zetten. De doelgroep komt grotendeels uit hoog tot gemiddeld opgeleiden en deze doelgroep kan hierdoor Engels lezen en schrijven. De Engelse woorden triggeren de mensen meer dan de Nederlandse vertaling hiervan. Dit komt grotendeels doordat de doelgroep zich bezighoud met technologie en alles er om heen. Denk hierbij aan mobiele apparaten en computers.

Op de pagina is een grote afbeelding te vinden die meteen de aandacht van de gebruiker trekt. Op de afbeelding is een woonkamer te zien (in Scandinavische sferen, onze context zie omgevingsanalyse) met posters in lijsten aan de wand. We hebben voor deze afbeelding gekozen omdat In-Frame natuurlijk om posters en lijsten draait. Om nog een keer te benadrukken waar In-Frame om draait staat er een toepasselijke zin onder de afbeelding met een stukje tekst. De zin is groter geplaats dan het stukje tekst zo dat deze eerder opvalt en bevat het onze steunkleur geel/goud. Het stukje tekst onderin informeert de gebruiker dat zij zelf aan de slag kunnen om hun eigen posters te ontwerpen.

In de afbeelding onderin staat een pijl icon gecentreerd. Wanneer de gebruiker met de muis over de pijl heen gaat kleurt deze geel/goud. Hierdoor weet de gebruikre dat het icon klikbaar is. Wanneer er geklikt wordt, wordt de gebruiker naar de positie van het onderdeel About In-Frame gebracht. About In-Frame is een verlenging van het onderste deel op de homepage, de zin met het stukje tekst.

36

37

ABOUT IN-FRAME

Dit is het gedeelte van About In-Frame. Het is een verlenging van het onderste deel op de homepage, de zin met het stukje tekst. Dit gedeelte is op de vorige pagina te vinden. Hier was ook beschreven dat als de gebruiker op het pijl icon klikt ze bij de About In-Frame pagina komen. Om bij deze pagina te komen kan de gebruiker ook in de header klikken op About In-Frame.

De verlenging zijn de drie blokken naast elkaar in het grijs. De grijze kleur onderscheid About In-Frame met het Home gedeelte en het volgende onderdeel, How Does It Work? In de blokken is informatie te vinden over In-Frame. Het zijn eigenlijk drie stappen kort beschreven, design, kies en bestel. De blokken bestaan uit iconen die een samenvatting weergeven van de informatie eronder.

Er is gekozen voor de drie blokken met korte teksten omdat we de gebruiker niet te veel informatie willen geven. Grote teksten met veel informatie kan de gebruiker afschikken, zij kunnen geen zin hebben om alles te gaan lezen. Daarom maken we het de gebruiker makkelijker met iconen en een korte beschrijving. Kort maar krachtig.

Door research naar vormgeving hebben we er voor gekozen titels met kapitalen in Helvetica bold te zetten en broodtekst in Baskerville regular met onderkast letters. Door verschillende typografie stijlen en gebruik is er onderscheid tussen de titels, die bestaan uit kapitalen en een schreefloze lettertype, en de broodtekst die bestaat uit onderkast letters met een schreeflettertype. Hierdoor kan de gebruiker ook onderscheid maken, zij weten hierdoor wat titels zijn en broodtekst.

Het typografie gebruik, wat is beschreven hierboven, wordt niet alleen bij dit onderdel gebruikt maar op de hele website van In-Frame.

38

HOW DOES IT WORK?

Dit is het gedeelte van How does it work?. Bij het vorige onderdeel werd kort verteld over In-Frame maar hoe werkt dat nou precies? Bij het onderdeel How does it work? vindt de gebruiker een instructie video.

In deze video laat In-Frame zien hoe je de website gebruikt, het dynamisch onderdeel Desgin Your Own. Een medewerker van In-Frame laat zien hoe je op de computer of op een mobiel apparaat je eigen posters kan ontwerpen en bestellen. Ook laat de medewerker zien hoe je posters en of lijsten kan cobineren met andere woonaccessoires in huis.

De video geeft dus niet alleen instructie en informatie, maar probeert ook de gebruiker te inspireren door te laten zien hoe het thuis ingericht kan worden met In-Frame producten. Hiermee willen wij dus gebruikers overhalen gebruik te maken van In-Frame.

De video is op de website gecentreerd omdat In-Frame een one scroll page is. Omdat de gebruiker eigenlijk alleen maar hoeft te scrollen maken we het voor de gebruiker makkelijk om zoveel mogelijk onderdelen te centreren. De kijker hoeft hierdoor niet de hele pagina te analyseren want er staan geen onderdelen links of rechts. De gebruiker kan rustig blijven zitten, scrollen en alle informatie opnemen.

Het centreren geldt niet alleen op dit onderdeel maar ook op alle andere onderdelen op de website.

39

EXPLORE

DESIGN YOUR OWN

Dit is het gedeelte van Explore. Voor dat gebruikers aan de slag gaan met ontwerpen van hun eigen In-Frame producten, kunnen zij eerst inspiratie op doen van andere In-Frame gebruikers.

Op de de schermafbeelding hierboven zijn een aantal interieur foto’s te zien van In-Frame gebruikers. Als de gebruiker met de muis over een foto heen gaat veranderd de foto van kleur, zwart/wit. Ook veranderd de muis naar een ‘aanwijsmuis’, hierdoor weet de gebruiker dat de foto klikbaar is. Klikt de gebruiker op de foto, dan wordt de foto vergroot. Door ergens naast de foto te klikken kan de gebruiker de foto afsluiten en terug naar het onderdeel gaan.

Om meer foto’s te kunnen zien kan de gebruiker horizontaal gaan scrollen. Dit is aangegeven met drie puntjes onder de foto’s. Het donkere puntje geeft de huidige pagina aan. De lichtere puntjes geven aan dat er meer pagina’s zijn. Gaat de gebruiker naar de volgende pagina, dan wordt het volgende puntje donker (geeft huidige pagina aan) en het vorige puntje wordt weer lichter.

Zoals te zien heeft dit onderdeel ook een grijze achtergrond. Alle onderdelen op de website zijn om en om gewisseld van achtergrond kleur. Zo worden alle onderdelen van elkaar gescheiden en weet de gebruiker wanneer een onderdeel eindigt en een nieuw onderdeel begint. De onderdelen hebben de kleuren wit of lichtgrijs.

Tussen alle onderdelen worden er interieur foto’s, met natuurlijk lijsten, weergeven zoals boven het onderdeel Explore, zie prototype en gehele schermafbeelding. De foto’s geven de context van In-Frame weer, Scandinavisch design. Hierdoor komt de sfeer van In-Frame naar voren. Ook zijn de foto’s inspiratie voor de gebruiker. Ze moeten de gebruiker triggeren om gebruik te gaan maken van In-Frame.

40

41

BLOG

CONTACT

Dit is het gedeelte Contact. In dit gedeelte van de website kunnen gebruikers contact opnemen met In-Frame. Sommige gebruikers vinden het prettig om meteen antwoord te krijgen op hun vraag dus vertellen we de gebruiker eerst dat er ook telefonisch contact kan worden opgenomen.

Dit is het gedeelte van Blog. In dit onderdeel staan blogartikelen. Ze gaan niet over In-Frame maar zijn wel geralateerd aan interieur. De blogartikelen gaan onder andere over woon- tips en inspiratie.

Net als bij het onderdeel Explore, kan de gebruiker horizontaal gaan scrollen om meer blogartikelen te zien. Dit is weer aangegeven met drie puntjes onder de foto’s. Het donkere puntje geeft de huidige pagina aan. De lichtere puntjes geven aan dat er meer pagina’s zijn. Gaat de gebruiker naar de volgende pagina, dan wordt het volgende puntje donker (geeft huidige pagina aan) en het vorige puntje wordt weer lichter.

Om de gebruiker van te voren te laten zien wat voor een soort blogartikel het is, is dit met een omschrijving en icon aangeven. Zo bevat bijvoorbeeld het artikel ‘De creatieve loft van een kunstverzamelaar in Londen’ een filmpje. Dit is te zien aan de camera icon en het woordt binnenkijken. Het filmpje laat je dus binnenkijken in de creatieve loft van een kunstverzamelaar in Londen. De omschrijving staan in blokjes met weer de steunkleur geel/goud.

Om te laten zien wanneer de artikelen zijn geplaatst staan er data’s bij de artikelen. De volgorde van de artikelen is de nieuwste als eerst. Onder de artikelen staat een begin alinea. Willen de gebruikers verder lezen, dan kunnen zij klikken op de button lees verder.

Wanneer de gebruiker met de muis over de button gaat veranderd deze van kleur, de steunkleur geel/goud. Hierdoor weet de gebruiker dat het een link is en er op geklikt kan worden.

Wordt er op de button geklik dan komt de gehele blogartikel in beeld. Het artikel zit in een apart venster dat zich nog wel in de website bevindt. De gebruiker kan via een X wegklikken en terugkomen op de website. De gebruiker kan ook naar de vorige/volgende blogpost gaan door middel van pijlen die zich links en rechts in beeld bevinden.

42

Willen gebruikers toch geen telefonisch contact opnemen maar simpelweg mailen dan kan dat via het contactformulier eronder. De labels in het formulier zijn links uitgelijnd naast de invoervelden. Hierdoor ziet de gebruiker het verband tussen het label links en invoerveld rechts. Er zijn geen onnodige oogbewegingen nodig.

De invoervelden en labels zijn netjes naast elkaar uitgelijnd en hebben de zelfde breedtes. Om het de gebruiker niet moeilijk te maken komt het formulier op één pagina te staan. Het bestaat dus niet uit meerdere pagina’s zoals bijvoorbeeld een bestel formulier.

Bij een aantal labels staan sterretjes. De sterretjes geven aan dat het een verplicht veld is om in te voeren.

Dit kan toegepast worden op informatie die bijvoorbeeld te klantenservice nodig heeft om de klant verder te kunnen helpen bij een probleem.

Worden de verplichte velden niet ingevoerd, dan omlijnt het veld rood en kan het formulier niet verstuurd worden.

Hierdoor weet de gebruiker dat er iets mist.

Onder het formulier komt een knop te staat waarmee de klant het formulier kan versturen. De knop heet dan ook gewoon versturen om het voor de gebruiker makkelijk en begrijpelijk te maken. Als de gebruiker over de knop heen gaat, veranderd de knop van kleur zoals de andere knoppen/buttons op de website (roll-over button).

Het formuliar bevat een aantal elementen. Zo wordt er een radio button gebruikt om aan te geven welke aanhef de gebruiker heeft. Voor het onderwerp wordt een drop

down menu gebruikt. De gebruiker kan dan kiezen onder welk onderwerp zijn of haar verhaal valt.

Onder het formulier staan social media iconen.

Gebruikers kunnen hier op klikken en ook hier kleuren de iconen weer naar een andere kleur wanneer de geberuiker er over heen gaat. De gebruiker komt uit op de gekozen scoial media pagina van In-Frame zoals bijvoorbeeld Facebook.

Onder social media kan de gebruiker zich aanmelden voor de nieuwsbrief. De gebruiker kan in het invoerveld zijn of haar e-mailadres invullen en de gegevens versturen via de aanmelden button. Ook deze button is weer een roll-over en veranderd dus van kleur wanneer de gebruiker er over heen gaat.

Onder de nieuwsbrief staat de footer, het einde van de website. De footer is net als de header zwart. Zo weet de gebruiker dat er een begin is, de header, en waar het eind is, de footer. In de footer staan een aantal zinnen die de gebruiker kan triggeren gebruik te maken van InFrame. Zo geeft de een zin weer dat de gebruiker gratis verzendkosten kan krijgen en dat de gebruiker bij wel 500 locaties zijn of haar product kan ophalen.

Onder deze zinnen staan een aantal titels zoals in het menu. De titels bevatten vooral zakelijke informatie zoals de algemene voorwaarden van In-Frame. Klikken zij op één van de titels, dan komen ze in een apart venster terecht zoals bij het blog onderdeel voor meer informatie. Helemaal onderin de footer staan een aantal logo’s. Deze staan voor twee betaalmethodes.

Hierdoor kunnen gebruikers zien dat ze op makkelijk manier kunnen betalen zoals iDeal en met Paypal.

Het andere logo staat voor de bezorgdienst. De bezorgdienst van In-Frame is DHL en is wereldwijd bekend waardoor de gebruiker vertrouwen heeft in de bezorging van hun product.

43

Menubalk = fixed. Dit is in de screendumps niet te zien!

Wanneer je met de muis over de titels in de menu balk gaat, veranderd de tekst van kleur.

Ook veranderd de muis in een wijzende vinger, hierdoor weet de gebruiker dat er geklikt kan worden.

Dit is het scherm als je op het pijltje hebt geklikt of in het menu op About In-Frame. Wanneer er is geklikt scrollt het scherm dus naar deze positie.

44

Wanneer je met de muis over het pijltje heen gaat, veranderd het van kleur. Ook veranderd de muis in een wijzende vinger, hierdoor weet de gebruiker dat er geklikt kan worden.

Wordt er geklikt dan scrollt de pagina naar een andere positie.

Zie het scherm hier onder.

Een zoekbalk verschijnt wanneer er op het icon geklikt wordt.

Dit is het scherm als je op How does it work? in het menu hebt geklikt.

Wanneer er is geklikt scrollt het scherm dus naar deze positie.

De video laat zien hoe het dynamisch onderdeel gebruikt kan worden en een persoon laat inspiratie zien voor het thuis ophangen van de producten.

Dit is het scherm als je op Explore in het menu hebt geklikt.

Wanneer er is geklikt scrollt het scherm dus naar deze positie.

Wanneer je met de muis over een foto gaat, veranderd het in zwart wit.

Ook veranderd de muis in een wijzende vinger, hierdoor weet de gebruiker dat er geklikt kan worden.

45

Wanneer er op een foto is geklikt, wordt de foto uitvergroot. Door naast de foto te klikken, links of rechts, verlaat de gebruiker de foto.

Wanneer je met de muis over lees verder gaat, veranderd de tekst en balk van kleur. Ook veranderd de muis in een wijzende vinger, hierdoor weet de gebruiker dat er geklikt kan worden. Wordt er geklikt dan komt de gebruiker uit op het scherm hier onder.

Via de pijlen links en rechts kan de gebruiker naar andere blogs navigeren.

Door op het kruisje te klikken kan de blogpost worden afgesloten.

De scrollbalk toont dat er gescrollt kan worden.

46

47

Wanneer je met de muis over de knop versturen gaat, veranderd de tekst en balk van kleur.

Ook veranderd de muis in een wijzende vinger, hierdoor weet de gebruiker dat er geklikt kan worden.

Dit geldt ook voor alle social media knoppen en bij de knop voor het aanmelden van de nieuwsbrief.

Wanneer er een formulier wordt verstuud veranderd het scherm. Dit scherm is hier onder te zien.

Wanneer de gebruiker het formulier wilt sturen maar een verplicht veld niet is ingevuld, kan het formulier niet worden opgestuurd en wordt het veld rood gekleurd. Zo ziet de gebruiker dat er nog iets mist in het formulier.

Wanneer je met de muis over de titels in de footer gaat, veranderd de tekst van kleur.

Ook veranderd de muis in een wijzende vinger, hierdoor weet de gebruiker dat er geklikt kan worden.

48

49

IN-FRAME MOBIEL

50

51

Op de vorige pagina’ is de In-Frame website beschreven. Links op de pagina is de mobiele versie van In-Frame te vinden.

Alle handelingen die beschreven worden zijn op de volgende pagina te zien.

Voor de mobiele website wilden we graag het logo zwart op wit weergeven. Bij de website is dit net andersom. Op de website was het menu, de header, zwart. Voor de mobiele versie wilde wij deze ook zwart hebben.

Naast het logo is een icon te vinden dat staat voor menu. Wordt er op het menu gedrukt dan komt er vanuit de zijkant een menu tevoorschijn. Wordt er geklikt, dan komt de gebruiker net als op de website op de positie van het gekozen onderdeel.

De drie blokken, de stappen van In-Frame in het kort, worden in de mobiele versie apart weergeven.

In het onderdeel staan de drie puntjes die ook in de website terug komen. Het donkere puntje geeft de huidige pagina aan. De lichtere puntjes geven aan dat er meer pagina’s zijn. De gebruiker kan op de mobiel in dit gedeelte swipen. Swipt de gebruiker, dan wordt het volgende puntje donker (geeft huidige blokje aan) en het vorige puntje wordt weer lichter.

Na dit onderdeel komt weer de instructievideo. Deze kan bekeken worden via de mobiel omdat de video via YouTube wordt bekeken. YouTube is namelijk responsive voor mobiel.

Explore bestaat nu uit vier foto’s. Hiervoor hebben wij gekozen zodat de foto’s een grootte hebben om goed te kunnen zien via mobiel. Als er op gedrukt wordt, kan de foto natuurlijk weer in grotere weergaven gezien worden.

DYNAMISCH ELEMENT Na Design your own komt Blog. De mobiele website gaat in de zelfde volgorde als de website. De blogartikelen worden per artikel weergeven. Er staan er dus geen drie naast elkaar zoals op de website. Door te swipen zoals bij Explore, kan de gebruiker naar andere blogartikelen. Ook in dit onderdeel komen de puntjes weer terug. Wordt er op geklikt dan wordt het scherm gevuld met de blogpost. De gebruiker kan terug door op een pijl icon te klikken.

De knoppen die op de website roll-overs hadden, hebben dit niet op de mobiele versie. De gebruiker heeft dan namelijk geen muis maar vingers. Raakt de gebruiker namelijk het scherm aan dan wordt er ‘geklikt’. Om de knoppen duidelijk te maken voor de gebruiker waarom ze er staan, staan er logische woorden in de knoppen. Dit hadden we al op de website toegepast. Denk aan verzenden en de knop aanmelden.

De Contact pagina bevat hetzelfde formulier alleen nu staan de invoervelden en de verzendknop onder elkaar.

Op de mobiele versie hebben we de nieuwsbrief een eigen blokje gegeven. Dit omdat nu veel meer delen onder elkaar gezet wordt. Hierdoor kunnen de blokken, wisselend van kleur, te lang worden.

Onder de nieuwsbrief staan alle zakelijke titels. Deze staan op de website in de footer. Omdat we geen zwart groot blok wilde creëren staan ze boven de footer als zwart op wit. Om de links te openen kan er op geklikt worden. Dit kan ook via de pijl iconen ernaast. De informatie opent dan onder de titel.

Natuurlijk kunnen ze ook weer ingeklapt worden.

Onder de zakelijke titels staan de social media kanalen van In-Frame. Wordt er opgeklikt dan kan de gebruiker toestemming geven om naar de app te gaan van het social media kanaal als de gebruiker deze in bezit heeft. In deze app opend dan de In-Frame pagina. Hierdoor kunnen zij In-Frame op social media meteen volgen.

Na de social media iconen, komen de logo’s van de betaalmethoden en bezorgdienst. Deze staan er weer, zoals op de website, om de gebruiker te triggeren In-frame te gaan gebruiken.

52

53

54

55

Het concept is design your own wall art.

De gebruiker kan op onze website, in het customize element, eigen posters ontwerpen, inlijsten en natuurlijk bestellen. De gebruiker kan gebruik maken van bestaande posters of eigen posters creëren. De bestaande posters zijn natuurlijk ook aan te passen.

De posters bestaan vooral uit zwart, wit met steunkleuren. Het zijn strakke (grafische) design met vooral quotes.

De posters kunnen aangeschaft worden zonder of met lijsten.

De gebruiker kan individuele producten aanschaffen maar ook meerdere als groepsproducten. De gebruiker kan een eigen poster ontwerpen, een bestaande kiezen of bewerken. Denk hierbij aan de lettertypes, formaat wijzigen, patronen, kleuren, illustraties enzovoort. Er kunnen foto’s worden toegevoegd en filters worden gebruikt. Alles kan wel veranderd worden en het eindproduct wordt dan precies zoals de gebruiker het wilt hebben.

Om te kijken hoe het aan de muur hangt kunnen er verschillende woonomgevingen worden geselecteerd.

Er kan ook een eigen foto van bijvoorbeeld de woonkamer worden geüpload. Zo kunnen de gebruikers zien hoe het in hun eigen huis zou staan.

Voor het customize gedeelte van de In-Frame website hebben wij een deel vormgegeven met een aantal werkende elementen die te zien zijn in een prototype. Op de volgende pagina is het prototype te zien met bijgevoegde beschrijvingen.

56

CUSTOMIZE ELEMENT

57

58

59

In-Frame concept Het concept dat wij hebben bedacht voor de opdracht is customize your own wall art. De gebruiker kan op onze website eigen posters ontwerpen en inlijsten.

X

De gebruiker kan gebruik maken van bestaande posters of eigen posters creëren. De bestaande posters zijn natuurlijk ook aan te passen.

De posters bestaan vooral uit zwart, wit met steunkleuren. Het zijn strakke (grafische) design met vooral quotes. De posters kunnen aangeschaft worden zonder of met lijsten. De gebruiker kan individuele producten aanschaffen maar ook meerdere als groepsproducten.

De gebruiker kan een eigen poster ontwerpen, een bestaande kiezen of bewerken. Denk hierbij aan de lettertypes, achtergronden, kleuren, doodles, illustraties enzovoort. Er kunnen foto’s worden toegevoegd en filters worden gebruikt. Alles kan wel veranderd worden en het eindproduct wordt dan precies zoals de gebruiker het wilt hebben.

Om te kijken hoe het aan de muur hangt kunnen er verschillende woonomgevingen worden geselecteerd. Er kan ook een eigen foto van bijvoorbeeld de woonkamer worden geüpload. Zo kunnen de gebruikers zien hoe het in hun eigen huis zou staan.

Customize element Voor het customize element zijn een aantal functie werkend gemaakt om een beeld te creeren hoe het in werkelijkheid er ongeveer uit zou zien en wat de gebruiker nou in het element kan doen.

Het customize element hoort natuurlijk in de website waardoor we de zelfde vormgeving hebben gebruikt. De kleuren wit, zwart en de steunkleur geel/goud komen in het element voor De header van de website komt terug in het element. Hier vindt de gebruiker het logo aan de linker kan met er naast existing design en design your own. De gebruiker kan hier op klikken. Bij existing design komt de gebruiker bij bestaande design die zij meteen kunnen bestellen. Natuurlijk kunnen deze designs ook door de gebruiker 60

worden aangepast. De functie van bestaande design is dat de gebruiker dan al een ontwerp heeft waar hij of zij verder mee kan gaan. Dit is handig voor gebruikers die niet goed weten hoe ze moeten ontwerpen of wat ze willen.

Bij design your own kan de gebruiker zelf ontwerpen en beginnen met een ‘leeg canvas’. De gebruiker kan dus kiezen uit verschillende dingen zoals (text) quotes, illustraties, patronen en filters plaatsen. Deze kopjes staan links in het element.

Onder de kopjes komen de keuzes te staan zoals de patronen als er op patterns wordt geklikt. Om door de keuzes heen te gaan kan er verticaal gescrollt worden. Dit merkt de gebruiker doordat er een scrollbar naast staat.

Net zoals op de website worden er Engelse titels gecombineerd met Nederlandse teksten. We hebben er voor gekozen om de titels op de website in het Engels neer te zetten. De doelgroep komt grotendeels uit hoog tot gemiddeld opgeleiden en deze doelgroep kan hierdoor Engels lezen

en schrijven. De Engelse woorden triggeren de mensen meer dan de Nederlandse vertaling hiervan. Dit komt grotendeels doordat de doelgroep zich bezighoud met technologie en alles er om heen. Denk hierbij aan mobiele apparaten en computers.

Alle titels in het element zijn klikbaar en hebben een rollover kleur. Wanneer de gebruiker met de muis over een link gaat kleurt deze geel/goud.

Hierdoor weet de gebruiker dat de titel klikbaar is.

De titel design your own is geel zodat dit kopje afwijkt van de rest. Dit geeft aan dat de gebruiker op het design your own gedeelte is. Wilt de gebruiker naar bestaande ontwerpen dan kan er geklikt worden op existing designs. Dit geldt ook voor het kopje patterns. Het geel geeft aan dat de gebruiker keuzes kan maken van patronen omdat de gebruiker zich onder dit kopje bevindt.

gebruiker bijvoorbeeld bij patronen, dan kan de gebruiker ook kiezen wat voor een patronen hij wilt zien. De patronen kunnen worden gesorteerd op kleur. Dit kan onder het kopje kleur. Het pijltje er naast geeft aan dat er bij het klikken een uitklap venster verschijnt met meerdere keuze. Dit geldt ook voor het kopje divers en in het werkset.

Onder het kopje upload afbeelding kan de gebruiker een eigen afbeelding uploaden. Dit kan bijvoorbeeld een foto zijn of een eigen illustratie.

Onder de keuzes staan nog twee titels, lijsten en papier. Bij lijsten kan de gebruiker kiezen welke lijst zij willen hebben. Dit is niet verplicht.

Bij papier kan de gebruiker kiezen wat voor een papier zij willen. Dit kan bijvoorbeeld zwaar papier zijn voor alsde gebruiker zonder lijst wil bestellen, waardoor het stevigheid heeft en mooier aan de muur hangt.

Onder de titels text, patterns, illustratuions en filters staan nog een aantal subkopjes. Is de 61

In de balk boven aan kan de gebruiker ook inloggen zoals op de website. Dit is handig voor de gebruiker als hij of zij zijn design wilt opslaan of een eerder ontworpen design wilt laden. Deze kopjes staan rechts onderin het element. Als de gebruiker meerder posters wilt ontwerpen en of bestellen kan hij of zij een nieuw design toevoegen (knop +nieuw design). De gebruiker kan dus een design opslaan (knop design opslaan) of een eerder ontworpen en opgeslagen design laden (knop design laden). Is de gebruiker niet tevreden over het ontwerp dan kan de gebruiker opnieuw beginnen door op de knop design opnieuw te klikken.

X

Wanneer de gebruiker bezig is met ontwerpen kan hij of zij natuurlijk ook het onderdeel weer verwijderen. Dit doet de gebruiker door op het onderdeel te klikken. Het onderdeel wordt dan geselecteerd en er komt een kruisje recht boven in de hoek te staan. Door op het kruisje te klikken wordt het onderdeel verwijderd.

Wil de gebruiker het ongedaan maken, dan kan de gebruiker op het linkse pijltje klikken in de werkset die zich in de balk bevindt. Wil de gebruiker het toch weer weg hebben dan kan de gebruiker op het rechter pijltje klikken.

Boven aan in de balk staat dus een werkset. Dze werkset is vooral bedoelt als de gebruiker bezig is met een eigen geplaatste tekst.

62

In het begin van de werkset staat nog een printer icon. Hiermee kan de gebruiker het ontwerpen printen als hij of zij dit graag wilt.

De gebruiker kan een tekst toevoegen door op de T+ knop te drukken. Er komt dan een invoerveld op het scherm waar de gebruiker kan gaan typen.

De gebruiker kan de tekst vormgeven door een lettertype te kiezen (knop Arial) en de grootte aan te passen (Knop 11). De gebruiker kan door de knoppen er naast kiezen of de tekst dikgedrukt, schuin of onderstreept moet worden. Naast deze knoppen kan de gebruiker een alinea stijl kiezen.

Onder de werkset in het ontwerpveld staan nog een aantal kopjes. Onder het kopje delen kan de gebruiker zijn of haar ontwerp delen. Die kan via een link maar ook via social media kanalen zoals Facebook of Instagram. Naast delen staat het kopje upload omgeving. De gebruiker kan een achtergondomgeving toevoegen aan het ontwerpvel. Dik kan bijvoorbeeld een foto van de woonkamer zijn. Zo kan de gebruiker bijvoorbeeld zien hoe zijn of haar ontwerp aan eigen muur hangt.

De laatste knop is de weergave van het scherm.

De gebruiker kan om beter te kunnen ontwerpen het design gedeelte (het gedeelte rechts in het element onder de werkset) in en uit zoomen. De normale weergave is 100% en voor inzoomen moet dus een hogere keuze procent worden gemaakt.

Natuurlijk kan de gebruiker zijn of haar ontwerp(en) ook bestellen. Dit kan onder de knop bestellen.

De gebruiker komt dan op een ander gedeelte va het element uit waar de bestel stappen gevolgt kunnen worden.

Om de gehele omgeving beter te zien kan de gebruiker klikken op het eerste kopje, terug naar groep. De gebruiker heeft in het voorbeeld meerdere ontwerpen gemaakt. Om te zien hoe ze in zijn of haar omgeving hangen is onder dit kopje een beter overzicht te vinden.

In dit gedeelte van het element kan de gebruiker de ontwerper overal heen slepen. Zo kan de gebruiker bijvoorbeeld experimenteren met het inrichten van de ontwerpen. “Op welke muur hangen de lijsten beter, de linker of de rechter?�. Door te slapen kan de gebruiker dus een voorbeeld zien.

De gebruiker heeft hier ook weer de keuze om terug te gaan naar het ontwerpen (knop terug naar ontwerpen). Hij of zij komt dan weer terug bij het laatse ontwerp.

Ook deze kopjes zijn klikbaar en bevatten een rollover.

De gebruiker kan in dit gedeelte ook weer delen, kiezen voor een andere omgeving door een andere te uploaden en bij een definitieve keuze kan de gebruiker via dit scherm ook weer naar het bestel scherm gaan.

Op het scherm kan de gebruiker ook weer kiezen om een nieuw ontwerp toe te voegen door op nieuw design te gaan klikken. Er kan ook opnieuw worden ontworpen door op design opnieuw te klikken. De gebruiker krijgt dan een melding omdat alle ontwerpen dan weggaan. In de melding staat of de gebruiker wel echt door wilt gaan met alle ontwerpen verdwijderen. De gebruiker zou dan kunnen annuleren of akkoord gaan.

Wil de gebruiker de design met omgeving opslaan dan kan dat weer onder de knop design opslaan.

Wilt de gebruiker een eerder ontworpen design laden dan kan dat weer onder design laden.

63

64

65

Dmlights (2014) Scandinavisch interieurdesign: tips, tricks en voorbeelden Geraadpleegd op 4 februari 2016, van https://www.dmlights.nl/blog/scandinavisch-interieurdesign-tips-tricks-voorbeelden/ Riverdale (z.d.)

Ons verhaal Geraadpleegd op 4 februari 2016, van http://www.riverdale.nl/nl-NL/Over%20Riverdale/Ons%20verhaal Sanoma (2016) vtwonen Geraadpleegd op 4 februari 2016, van http://www.sanoma.nl/merken/artikel/vtwonen/print/merk-profiel/

BRONNEN

Lindsay Een ontwerpdocument heb ik eerder in deze opleiding gemaakt, zoals in het vorige semester AVI, dus dat was geen moeilijke klus. Ik houd liever van ontwerpen dan verslagen schrijven dus dit document was leuker om aan te werken.

Ons concept valt in de context Scandinavisch design. Omdat ik dus groot interesse heb in interieurstyling en vooral Scandinavisch design, kon ik alle inspiratie een beetje kwijt die ik in me heb op het gebied van interieur. Ik kan namelijk uren Pinterest afstruinen naar mooie interieur foto’s en inspiratie. Ik kan ook een halve dag bezig zijn met mijn huis opnieuw inrichten met decoratie dus dit concept paste helemaal bij mij. Hierdoor kon ik makkelijk door het ontwerpdocument heen werken.

Alle onderdelen uit de analyse gingen voorspoedig doordat ik, maar ik geloof ook Nick, het leuker vind om te ontwerpen dan te schrijven. Aangekomen bij het ontwerpen van de website kwam alle inspiratie er uit die ik had opgedaan van alle analyses en research.

Het concept van In-Frame zat helder in het hoofd waardoor ik precies wist hoe de website er uit moest gaan zien. Samen zijn we gaan schetsen en Nick was eerder begonnen met wireframes dan ik. Mijn wireframes zijn dan ook geïnspireerd op de mijne waardoor we eigenlijk samen de website hebben ontworpen.

Nick is wel van het websiteontwerpen en ik heb het ook wel eens vaker moeten doen in mijn vorige opleiding. Omdat we beide ervaring en ons concept duidelijk en helder voor ons was, is de website in twee dagen ontworpen.

Ik ben dus begonnen met wireframes maken en daarna ben ik de definitieve wireframe gaan uitwerken in Photoshop. Mijn wireframes zijn dus geïnspireerd op die van Nick waardoor we samen de website hebben ontworpen. Uiteindelijk heb ik het omgezet in het echte design en heeft Nick alles omgezet in Invision om een werkende demo te hebben. Omdat ik de website had ontworpen in Photoshop hebben we samen het wireframe voor mobiel bedacht en heeft Nick het design voor ontworpen in Photoshop.

Helaas werkte Invision niet goed mee met wat wij graag wilden. Zo’n werkten rollovers niet en bleef de pagina dan vast hangen. Dit vind ik erg jammer omdat het nu lijkt alsof wij een snelle prototype hebben gemaakt zonder interacties.

Ik heb dit dan ook duidelijk beschreven in het ontwerpdocument zodat de lezer weet wat wij eigenlijk voor de website in gedachten hadden.

66

Bron: michitecturedotcom 2015

REFLECTIE

67

Lindsay Week 5 Begonnen aan het ontwerpdocument. Highlights hoofdstuk er in gezet want is samenvatting van omgevingsanalyse.

Gewerkt aan research onderwerp en vormgeving. Geschetst en wireframes. Highlights design studie geschreven.

REFLECTIE Nick Als ik terug kijk naar het ontwerpdocument hebben we erg hard ons best op dit document gedaan. Ik denk ook dat het ontwerpdocument ruim voldoende aan informatie bevat. We hebben veel onderzoek gedaan naar andere merken ik denk dat dit heel goed is geweest voor het eindproduct.

Week 6 Wireframe omgezet naar design in Photoshop. Website in Invision laten zien aan docent voor feedback.

Schermontwerpen in ontwerpdocument gezet.

Onderdelen beschreven.

Interacties ontworpen en beschreven.

Ik denk dat de doelgroep erg uitgebreid beschreven is.

Misschien hadden we nog meer onderzoek moeten doen naar met echte gebruikers dan informatie van internet.

We hebben wel een mini-enquête gehouden maar ik denk dat als we deze mini-enquête groter hadden gemaakt en nog meer mensen die in de doelgroep vallen hadden geïnterviewde dat dit misschien had gezorgd voor nog wat meer informatie. We hebben natuurlijk later wel getest en deze informatie uit de testen weer toegevoegd aan het eindproduct.

Week 7 Dynamisch element omgezet naar design in Flash. Aantal functies werkende gekregen.

We hebben een uitgebreide flowchart en site map gemaakt om zo te laten zien wat er allemaal mogelijk is op de website. We hebben niet super veel onderdelen op de website staat omdat wij vonden dat dit niet nodig was. Dit hebben we ook terug gehoord van onze doelgroep dat ze van minimalistisch houden en van strak design. Dit zagen we ook terug in de concurrentieanalyse.

Veel van de websites bevatten elementen die onze website ook heeft. Dit zie je ook weer terug in de mobiele versie van verschillende concurrenten.

Week 8 Dynamisch element beschreven in verslag en schermontwerpen toegevoegd.

Onderdelen beschreven.

Interacties ontworpen en beschreven.

Ook ons eigen mobiele ontwerp heeft overeenkomsten.

Ik denk misschien dat we ook geheel andere bedrijven hadden moeten analyseren die niet posters of lijsten verkopen maar andere woonartikelen. Misschien hadden we daar meer uit kunnen halen dan de concurrenten die wij nu hebben beschreven.

Nick Week 4 Ontwerp document Concept

De doelgroep is natuurlijk hetzelfde maar ik denk dat de woonartikel bedrijven meer hetzelfde design hebben als onze website. Verder denk ik dat het ontwerpdocument een goede basis is geworden voor ons concept.

Week 6 Ontwerp document applicatie

Week 5 Ontwerp document Research Concept

Week 7 Ontwerp document Beeldmateriaal onderwerp

68

LOGBOEK

Week 8 Ontwerp document af maken 69

IN-FRAME FRAME I N - EF RAM IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME In-frame IN-FRAME IN-FRAME IN-FRAME IN-FRAME In-frame In-frame IN-FRAME IN-FRAME IN-FRAME BIJLAGE In-frame In-frame IN-FRAME IN-FRAME In-frame IN-FRAME IN IN IN FRAME F N I IN FRAME FRAME R IANM-EF R FRAME IN-FRAME R AME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME IN-FRAME Helvetica PT Sans Caption

Voor de titels worden er kapitaal gebruikt met een schreefloze lettertype. Het logo is bevat een sierlijk lettertype dat terug komt in een welkoms zin op de pagina. Voor de broodtekst wordt er een lettertype Helveticagebruikt met een schreef. Hierdoor is er onderPT Sans Caption de titels worden uit er kapitaal met een scheid tussenVoor de titels, die bestaan kapitalengebruikt en schreefloze lettertype. logo is bevat een schreefloze lettertype, en de Het broodtekst die een sierlijk lettertypeletters dat terug komt in een welkoms zin op de bestaat uit onderkast met een schreeflettertypagina. wordt er een lettertype pe. Opvallend is ookVoor dat de debroodtekst teksten gecentreerd staan. Dit isgebruikt fijn voormet het een lezenschreef. als de Hierdoor gebruiker is er onderscheid descrolt. titels, die bestaan uit kapitalen en naartussen benden een schreefloze lettertype, en de broodtekst die Helvetica bestaat uit onderkast letters met een schreeflettertyPT Sans Caption Voor de titels worden er kapitaal gebruikt met een pe. Opvallend is ook dat de teksten gecentreerd schreefloze lettertype. Het logo is bevat een sierlijk staan. Dit is fijn voor het lezen als de gebruiker lettertype dat terug komt in een welkoms zin op de naar benden scrolt. pagina. Voor de broodtekst wordt er een lettertype gebruikt met een schreef. Hierdoor is er onderscheid tussen de titels, die bestaan uit kapitalen en een schreefloze lettertype, en de broodtekst die bestaat uit onderkast letters met een schreeflettertype. Opvallend is ook dat de teksten gecentreerd staan. Dit is fijn voor het lezen als de gebruiker naar benden scrolt.

A

70

Helvetica

Helvetica PT Sans Caption

Voor de titels worden er kapitaal gebruikt met een 71

BIJLAGE

B

72

73

DEFINITIEVE WIREFRAME LOGO

2/2

Home • How does it work • Design your own • Explore • Blog • About us • Contact

LATEST DESIGNS

Log in / Join

••• LATEST BLOGPOSTS

(OVER) In-Frame

DESIGN

ORDER

RECEIVE

••• CONTACT INSCTRUCTIE VIDEO

(BETAAL MOGELIJKHEDEN)

(SOCIAL MEDIA)

(FOOTER) 74

Door Lindsay 1/2

75

2/2

LOGO

Home • How does it work • Design your own • Explore • Blog • About us • Contact Log in / Join

LATEST BLOGPOSTS

(OVER) In-Frame

STAP 1

STAP 2

STAP 3

(FOOTER)

LATEST DESIGNS

(BETAAL MOGELIJKHEDEN)

NIEUWSBRIEF

(SOCIAL MEDIA)

EXPLORE >> 76

Door Lindsay 1/2

77

2/2

LOGO

Home • How does it work • Design your own • Explore • Blog • About us • Contact

LATEST BLOGPOSTS

Log in / Join

INSTRUCTIE VIDEO

••• CONTACT

DESIGN YOUR OWN NOW!

GET STARTED! >>

STAP 1

STAP 2

STAP 3

(BETAAL MOGELIJKHEDEN)

(SOCIAL MEDIA)

(FOOTER)

LATEST DESIGNS

••• 78

Door Lindsay 1/2

79

DESIGN YOUR OWN LOGO

FORMULIER

Home • How does it work • Design your own • Explore • Blog • About us • Contact

Dynamisch element

LOGO

Home • How does it work • Design your own • Explore • Blog • About us • Contact Log in / Join

Log in / Join

Aanhef * Voornaam * Achternaam * Geboortedatum *

Straat en huisnummer * Huisnummertoevoeging * Postcode * Woonplaats *

<>

Land *

E-mailadres * Wachtwoord * Wachtwoord bevestigen * *Verplicht veld Ja ik ga akkoord met de algemene voorwaarden en de gegevensbescherming van In-Frame.

Ja, informeer mij over de laatste trends en exclusieve promoties per e-mail. Afmelden is later mogelijk.

JOIN!

(FOOTER)

(BETAAL MOGELIJKHEDEN)

NIEUWSBRIEF

(FOOTER)

(SOCIAL MEDIA) (BETAAL MOGELIJKHEDEN)

80

NIEUWSBRIEF

Door Lindsay

(SOCIAL MEDIA)

81

DEFINITIEVE WIREFRAME

Door Lindsay

LOGO

Log in / Join

REVIEWS (SWIPE)

LOGO

LATEST DESIGNS (SWIPE)

••• •••

LATEST BLOGPOSTS (SWIPE)

STAP 1 (SWIPE)

CONTACT

(OVER) In-Frame

••• (SOCIAL MEDIA)

•••

(SOCIAL MEDIA)

(OVER) In-Frame

STAP 1 (SWIPE)

(FOOTER)

(FOOTER)

•••

NIEUWSBRIEF

NIEUWSBRIEF

LATEST DESIGNS (SWIPE) INSTRUCTIE VIDEO

(BETAAL MOGELIJKHEDEN)

(BETAAL MOGELIJKHEDEN)

••• 82

83

Door Lindsay

DEFINITIEVE WIREFRAME

LOGO INFRAME

TEXT

ILLUSTRATIONS

WERKSET (TYPOGRAPHY, GROOTTE, UITLIJNING ETC.)

EXISTING DESIGNS / DESIGN YOUR OWN terug naar groep

PATTERNS

Share icons social media

Upload (button) omgeving

design bestellen

FILTERS

Kleur Categorie Upload afbeelding LIJST

(SCROLLBALK)

(DESIGN AREA)

Kies papier 84

Kies lijst

+ nieuw framedesign

opnieuw beginnen

design opslaan

design laden

85

Door Lindsay

DESIGN YOUR OWN Kies papier

GO TO EXISTING DESIGNS TEXT

ILLUSTRATIONS

PATTERNS

Upload (button) omgeving WERKSET (TYPOGRAPHY, GROOTTE, UITLIJNING ETC.)

Kies lijst

(DESIGN AREA)

FILTERS

(SCROLLBALK)

LIJST

opnieuw beginnen

design opslaan

design bestellen

Share icons social media 86

87

DESIGN YOUR OWN GO TO EXISTING DESIGNS

Kies papier

Door Lindsay Upload (button) omgeving

Kies lijst

WERKSET (TYPOGRAPHY, GROOTTE, UITLIJNING ETC.)

(DESIGN AREA)

Texts

> LIJST

Illustrations

>

(SCROLLBALK)

Patterns

opnieuw beginnen

88

design opslaan

design bestellen Share icons social media

89

90

91

92

93

94

95