D E S I G N S T U D Y

UrbanPrint

CRIA-Project (2012-2013, S1) Projectgroep 18

Dennis Anderson student#: 495200Chaib el Kouri student#: 501089Peter Xhofleer student#: 465180Nicky Wiesbrock student#: 498579Nick de Kruyff student#: 490475

p a g i n a 3

I n h o u d

1. Inleiding blz.4

2. Navigation blz.5 3. Forms blz.11

4. Grids blz.16

5. Colour palette blz.19 6. Typography blz.23

7. Icons blz.26

8. Images blz.29

p a g i n a 4

Inleiding

Hier voor u treft u ons Design studies document voor ons te ontwikkelen applicatie: ‘UrbanPrint’. Dit document is onderdeel van de bewijslast voor de VSD_ONTW van het projectgedeelte van het semester CRIA (Hogeschool van Arnhem & Ni-jmegen).Het doel van dit document is om de lezer een helder beeld te geven van de achtergrondin-formatie en achtergrondonderzoek die wij hebben verricht voor het design van de applicatie Urban-Print. In dit document staan we stil bij de verschil-lende visuele elementen van onze applicatie, respectievelijk: kleur, typografie, navigatie, grid, afbeeldingen, iconen, gestalte en formulieren.

Per element zal er een hoofdstuk gewijd worden, waarin wij in de eerste plaats relevante ontwerp-principes kort worden toegelicht. Verder zullen we per hoofdstuk ook enkele inspirerende voor-beelden benoemen die wij denken te gaan ge-bruiken voor de applicatie. Uiteindelijk zal er per onderdeel een aantal schetsen uit voortvloeien voor de applicatie, die de basis zullen vormen van het uiteindelijk ontwerp van ons te ontwikkelen applicatie: ‘UrbanPrint’. Dit zal aan het einde van Iedere hoofdstuk samengevat worden in het defin-itief concept.

p a g i n a 5

Trunktest

De trunk test is ontwikkeld door Steve Krug. Via deze test bestaande uit 6 vragen krijg je inzicht krijgt in de navigeerbaarheid van een website.

De test is bedoeld alsof je geblinddoekt en opges-loten in de kofferbak van een auto ergens op het internet wordt gedropt. Waarbij je vervolgens aan de hand van de 6 vragen bepaalde elementen van een website moet identificeren. Indien de desbe-treffende website met goed ontworpen is zou je

zonder lang te aarzelen antwoord moeten kunnen geven op deze 6 vragen. Deze 6 vragen zijn dus gekoppeld aan de 6 essentiële onderdelen van de navigatie van een website. • Welke site is dit?• Op welke pagina ben ik?• Wat zijn de hoofdcategorieën van de site? • Wat zijn de mogelijkheden op het huidige

niveau? • Waar bevindt ik mij tov. de rest van de site? • Hoe kan ik zoeken op de site?

1 . 1 R e s e a r c h1.navigation

p a g i n a 6

Fly-out menu

Fly-out menu’s worden vaak ingezet als oplossing om ruimte te besparen. Ze zijn compact en kun-nen veel informatie bevatten. Ook worden fly-out menu’s vaak toegepast om gebruikers zo snel mogelijk toegang tot de content te verlenen. Wat betreft ruimtebesparing dient de ontwerper zich af te vragen of er überhaupt zo veel ruimte nodig is. Met andere woorden: is de navigatie wel dusdanig goed ingedeeld dat je zoveel menu items nodig hebt? Wellicht is een simplificering van de hoofd-navigatie wel een betere oplossing dan een extra subnavigatie.

Zoals Steve Krug in zijn boek Don’t Make Me Think al aangeeft is niet het met zo min mogelijk clicks het doel te bereiken de belangrijkste usabil-ity regel, maar juist het zo min mogelijk laten den-ken van de gebruikers. Mensen scannen een pa-gina snel en klikken dan zondeveel na te denken. En wat gebeurt er als gebruikers een dropdown menu’s tegenkomen? Mensen gaan (zonder na te denken) met hun muis ernaartoe en zien ineens een nieuw menu. Dat verwachten gebruikers niet en worden zij weer geconfronteerd met (tekstuele) informatie, waardoor de bezoekers weer moeten nadenken, vooraleer zij verder kunnen.

CSS3 mega dropdown menu

Bovenstaande voorbeelden zijn afkomstig uit het CSS3 Mega Drop Down Menu van Pixelshop. Deze combineert een horizontale / verticale fly-out menu met verschillende weergaves voor menu items. Deze weergaves van menu items varieren niet alleen in lengte (1-5 kolommen), maar ook in inhoud. Daar waar de smalste (1 kolom) slechts ruimte biedt voor (korte) tekstuele labels, kun je bij de breedste (5 kolom) ook grotere delen tekst en zelfs kleine afbeeldingen (thumbnails) plaat-sen. Echter een mega menu als deze zorgt voor veel informatie overload, waarbij gebruikers eerst de informatie moeten scannen voordat ze verder kunnen.

De reden dat ik dit als voorbeeld wil stellen is vanwege het contactformulier dat ook als fly-out menu verschijnt. Hoewel een fly-out menu voor de navigatie dus niet raadzaam is, is het uitermate wel handig om kleine taken uit te voeren op de huidige website, zonder dat daarvoor een nieuwe page geladen moet worden. Te denken valt aan taken zoals in dit geval een contactformulier invul-len, uitgebreidere zoekfunctie of inloggen via een inlogscherm.

1 . 1 N a v i g a t i o n r e s e a r c h

p a g i n a 7

1 . 2 N a v i g a t i o n i n s p i r a t i o n

Yabiladi.com

Hoewel ik in geen fan ben van fly-out menu’s, is bovenstaande variant een voorbeeld van een fly-out menu, die ik wel goed vind. Dit komt vooral doordat de informatie overload redelijk binnen de perken wordt gehouden, vanwege de horizontale uitlijning.

Bij fly-out menu’s is vaak het geval dat er vanuit het niets een blok verschijnt aan nieuwe tekstuele informatie. Of zelfs meerdere blokken informatie, indien er ook meerdere niveau’s aan menu items zijn uitgewerkt. In zulke gevallen krijgen gebrui-kers van fly-out menu’s te maken met een over-vloed aan informatie. In het voorbeeld hierboven afkomstig van de website van Yabiladi worden de additionele subsecties van 1 lagerliggende niveau echter op dezelfde regel weergegeven. Gebrui-

kers worden hierdoor minder geconfronteerd met nieuwe informatie en kunnen eigenlijk gewoon doorlezen op dezelfde regelhoogte. Wat ten goe-de komt aan de leesbaarheid.

Ook wordt er onderscheid gemaakt in de navi-gatiestructuur door middel van kleur. Alle secties van de hoogste niveau hebben een rode kleur die van links naar rechts onverzadigd wordt. De subsecties van het lagerliggend niveau daarente-gen hebben een lichte contrasterende kleur (sterk onverzadigd), waarbij ook de tekstkleur zwart is gemaakt.

p a g i n a 8

Amazon.com

Bovenstaande tabs zijn afkomstig van de (oude) website van Amazon. De tabstructuur is correct ontworpen, aangezien het de uiterlijke schijn heeft dat de actieve tab in verbinding staat met de met de rest van de website en dat die vanwege de groene kleur boven de andere tabs rest. Amazon gebruikte verschillende kleuren voor verschillende secties van de website. Deze kleur werd cons-quent toepgepast op andere navigatie elementen

op de website om het geheel van kleurcodering af te maken. Het contrast tussen de gekleurde actieve tabs en de grijze inactieve tabs was erg duidleijk om onderscheid in de navigatie aan te brengen. Daarnaast zorgde Amazon dat er altijd een tabs geslecteerd was, om zo gebruikers con-tinu attent te maken op de tabstructuur. Bij de lan-dingspagina was altijd de tab “books” actief, later is er een tab genaamd “welkom” voor gemaakt.

1 . 2 N a v i g a t i o n i n s p i r a t i o n

p a g i n a 9

1 . 2 N a v i g a t i o n i n s p i r a t i o n

Tabs

Tabs zijn volgens Steve Krug vanzelfsprekend. Volgens hem kunnen zelfs personen met weinig tot geen ervaring met computers, een interface met tabbladen begrijpen. Verder zijn tabs moeilijk over het hoofd te zien. Tabs hebben een dusdanig onderscheidend visueel karakter, dat ze ideaal ingezet kunnen worden om te navigeren door de informatie. Het ontwerpen van tabstructuren is dus een voor de hand liggende oplossing voor het onderscheid, die men wil aanbrengen tussen de content en de navigatie.

Daarnaast creëren tabs de schijn van ruimtelijke diepte, die gebaseerd is op een visueel signaal. Dit signaal zijn mensen erg goed in het detecteren (“dingen in het bijzijn van andere dingen”). Hierbij dient er een contrast te zijn tussen de voorgrond en achtergrond. Het resultaat van de tabs op een website is de schijn dat de site is verdeeld in sec-ties en de schijn dat je je als gebruiker in een van de secties bevindt.Ten slotte kunnen tabs volgens Krug er gelikt uit zien. Webdesigners hebben altijd moeite om pagina’s visueel aantrekkelijk te mak-en. Het toepassen van tabbladen kan websites een strak uiterlijk geven.

p a g i n a 1 0

1 . 3 N a v i g a t i o n c o n c e p t

Concept #1

Er is gekozen om de informatiestructuur vrij sim-pel te houden. Als uitgangspunt hebben gekozen om gebruikers bij aankomst op de landingspa-gina te laten kiezen uit 4 subpagina’s waarbij ge-bruikers op elk van de 4 pagina toegang hebben tot een specifieke taak van de RIA. Te weten: ShopPage; GamePage; TutorialPage en De-signPage. Echter voor het verrichten van taken zoals inloggen; registreren; ontwerp inzenden; ontwerp opslaan; is er gekozen om te werken met pop-ups. Verder is er ook bewust gekozen dat gebruikers zowel via de DesgnPage als de ShopPage uiteindelijk bij de ShoppingBag terecht kunnen komen. Dat houdt in voor gebruikers dat ze zowel t-shirts kunnen bestellen die ze zelf hebben gemaakt alsook t-shirts kunnen bestellen via de webwinkel.daarbij gebruik maken van een gezamelijke navigatiepad.

Concept #2

Hiernaast ziet u het concept voor de hoofd-navigatie die zich naast de logo in de header bevindt. De hoofdnavigatie is daarbij uitge-werkt in de 4 verschillende standen. Op de bovenste navigatiebar is te zien hoe deze zich in een normale toestand bevindt; het logo en zoekscherm in de header hebben oranje kleur terwijl de menuknoppen (Design; Shop; Contest; Tutorial) een grijze achter-grondkleur hebben. Op het moment dat er een mouseover plaatsvindt zal de desbtref-fende menunknop van de grijze achtergrond-kluer veranderen naar een oranje kleur. Het logo en het zoekscherm daarentegen krijgen een grijze kleur.

Ook verschijnt er een kleine fly-out menu die extra info kan bevatten of een snelkoppeling naar pagina.Als er dan verder een mouse-click gebeurt verdwijnt allereerst de fly-out menu en zal de hoofdnavigatie terugkeren naar de normale toestad. Alleen zal het logo niet meer oranje worden maar grijs blijven en zal de actieve menuknop oranje blijven. Dit fungeert als een you-are-here indicator zodat gebruikers in een oogopslag kunnen zien op welke pagina ze zich bevinden.

p a g i n a 1 1

Stapsgewijze informatieverstrekking

Ook wel aangeduid met de term progressive disclosure, omvat het verdelen van informatie in meerdere lagen en alleen die lagen weer te ge-ven, die nodig of relevant zijn. Het wordt voorna-melijk gebruikt om een overload aan informatie te voorkomen. Stapsgewijze informatieverschaffing houdt beeldschermen overzichtelijk en opge-ruimd. Het helpt gebruikers ook om de complexi-teit te beheren zonder dat deze verward, gefrus-treerd, of gedesoriënteerd raken.

Zo worden zelden gebruikte bedieningselementen in de software-interfaces vaak verborgen in dia-loogvensters, die worden aangeroepen door te klikken op een knop “Toon meer”. Voor de gebrui-kers die geen behoefte hebben om de bedienings-elementen te gebruiken worden deze verborgen. Voor gebruikers van gevorderde niveau, zijn de

opties wel direct beschikbaar. In beide gevallen is het ontwerp vereenvoudigd door alleen de meest vereiste standaard controles te tonen en extra besturingselementen alleen weer te geven indien daar om gevraagd wordt.

Het voordeel van stapsgewijze informatiever-schaffing is dat het aantal fouten aanzienlijk verminderd, en bijgevolg de hoeveelheid tijd en moeite om fouten te herstellen sterk wordt gere-duceerd. Een ander voordeel is de vermindering van de complexiteit. In het bijzonder wanneer de gebruikers die in interactie staan methet ont-werp beginners of onregelmatige gebruikers zijn. Zelden gebruikte controles of informatie dienen verborgen te worden, maar via een aantal een-voudige bewerking, zoals het indrukken van een knop “Toon meer”, direct oproepbaar indien de gebruiker daarom heeft gevraagd.

2 . 1 R e s e a r c h2.FORMS

p a g i n a 1 2

Chunking

De techniek van chunking streeft ernaar om de de beperkingen van het kortetermijn geheugen zoveel mogelijk tegemoet te komen. Dit wordt bereikt door het herindelen van informatie in een kleiner aantal eenheden. Het maximum aantal “chunks”, dat efficiënt kan worden verwerkt door kortetermijn geheugen is ongeveer 4.

Chunking wordt vaak toegepast als een algemene techniek om ontwerpen te vereenvoudigen. Dit is ech-ter een verkeerde toepassing van het principe. Het principe van chunking gaat specifiek over het opslaan van gegevens in het kortetermijn geheugen. In omge-vingen waar ruis kan optreden op het moment dat er kritische display-informatie wordt weergegeven, kan chunking de informatieverwerking in het kortetermijn geheugen tegemoet komen.

5 Kapstokken

De organisatie van de informatie is erg van belang voor de manier waarop mensen omgaan met een ont-werp. Het principe van de 5 kapstokken gaat ervanuit dat er voor de organisatie van informatie slechts een beperkt aantal strategieën zijn, ongeacht de specifieke toepassing. De 5 strategien kunnen ingedeeld worden op: categorie, tijd, locatie, alfabet, en continuüm.

• Categorie verwijst naar de organisatie op basis van gelijkenis of verwantschap.

• Tijd verwijst naar de organisatie in chronologi-sche volgorde.

• Locatie verwijst naar de organisatie door geogra-fische of ruimtelijke referentie.

• Alfabet verwijst naar de organisatie op alfabeti-sche volgorde. Voorbeelden hiervan zijn woor-denboeken en encyclopedieën.

• Continuum verwijst naar de organisatie op basis van omvang.

2 . 1 F o r m s r e s e a r c h

p a g i n a 1 3

Apple.com

In dit voorbeeld heb ik gekeken naar het plaatsen van een order bij de computerbedrijf Apple. Via dit checkout formulier kunnen gebruikers een order plaatsen en deze afhandelen. Het formulier van Apple maakt onder meer gebruik van een accordion patroon, waarbij de verschillende onderdelen afzonderlijk worden getoond. Hierbij vindt er nog wel interactie plaats tussen de verschillende afzonderlijke onderdelen. Eerder inge-voerde data wordt herkend en desgewnst in een later stadium weer toegepast.

Daarnaast kiest Apple ervoor om bij de tekstuele in-voervelden de labels in de invoervelden te plaatsen. DIt zorgt ervoor dat geheel nog compacter wordt. Bij de betalingsopties wordt de gebruiker geholpen met een bevestiging door overbodige keuzes matter af te beelden. Bij het invoeren van de postcode wordt de gebruiker geholpen door de ingevoerde postcode te ondersteunen met de corresponderende regio in een dropdown list.

Wat betreft foutmeldingen kiest Apple ervoor om de ge-bruikers middels een gele accent in de foutieve invoer-velden. Verder wordt er feedback gegeven middels een gele tekstvakje.

2 . 2 F o r m s i n s p i r a t i o n

p a g i n a 1 4

Ov-chipkaart.nl

Dit voorbeeld van een check-out formulier is afkomstig van de website van de studenten reisproduct. Het eerste wat mij opvalt is dat de wesite heeft gekozen voor een sterke reducering van de ruis door het checkout formulier op een lege pagina te laden met enkele en alleen de checkout for-mulier. Wat verder ook gelijk in het oog springt is de roze kleur die zij gebruiken ter accentuering.Daarnaast wordt er ook geen onderscheid gemaakt in de primairy en secondai-re actie buttons. Alle knoppen lijken hetzelfde en daardoor is het niet altijd even duidelijk hoe een gebruiker verder kan navigeren.

Wat betreft de keuze van de positionering om het label bo-ven het invoerveld te plaatsen. Voor de meeste gebruikers zal dit natuurlijk ogen, aangezien mensen gewend zijn om formulieren van boven naar beneden in te vullen. Wat be-treft de foutmelding is te zien hoe men heeft gekozen voor een simpele aanpak.

Indien de gebruiker een invoerveld verkeerd of niet heeft ingevuld, wordt het desbetreffende invoerveld gemarkeerd met de roze accent kleur. Daarnaast verschijnt er boven een foutmelding. Deze indicatoren vertellen gebruiker al-leen dat iets verkeerd is, maar geeft geen positieve feed-back of tips om invoervelden juist in te voeren.

2 . 2 F o r m s i n s p i r a t i o n

p a g i n a 1 5

2 . 3 F o r m s c o n c e p t

Concept #1Hiernaast is het concept te zien van het contactfor-mulier zoals wij die willen toepassen in onze RIA. Het is losjes gebaseerd op het contactformulier zoals die eerder besproken is bij het CSS3 Mega Drop Down Menu. Hierbij is er gekozen om een contactformulier te ontwerpen in de vorm van een fly-out menu.

Verder is er gekozen om de labels in de tekst invo-ervelden te plaatsen en niet erboven of ernaast. Hi-erdoor blijft het ontwerp compact en zal het niet veel ruimte innemen tov. de rest van de elementen van de website. De menuknop om bij het contact formulier zelf zal worden aangegeven met een pictogram van een brief.

Concept #2

Hiernaast is het concept te zien van het checkout-formulier zoals wij die voor ogen hebben. Hierbij willen we gebruik maken van drie kolommen voor de inhoud die ingevuld dient te worden door de gebruikers. Hierbij valt te denken aan de persoonsgegevens, adresgegevens en gegevens die te maken hebben met de betalingsmogelijkheden. Indien gebruikers bij het invullen gegevens niet ingevuld hebben of ver-keerd ingevuld hebben zal de desbetreffende tekst invoerveld met een rood vierkant geaccentueerd

worden. Daarnaast zal er in de rechterkant in het rood een foutmelding worden getoond aansluitend met een tip om de foutmelding op te lossen. Aan de linkerkant wordt er gebruik gemaakt van een accordeon om de verschillende fases in het bestelproces aan te geven, zodat de gebruiker een goed overzicht heeft hoeveel stappen hij al heeft gemaakt en hoeveel hij nog moet zetten voordat hij de bestelling heeft afgerond.

p a g i n a 1 6

3 . G r i d

960 grid

Het 960 grid is een manier om de workflow in web develop-ment te stroomlijnen door middel van algemeen gebruikte dimensies, gebaseerd op een breedte van 960 pixels. Er zijn twee varianten: 12 en 16 kolommen. De 12-kolom ras-ter is verdeeld in porties die 60 pixels breed. De 16-kolom raster bestaat uit kolommen van 40 pixel. Elke kolom heeft 10 pixels van de marge aan de linker-en rechterkant, die een gutter van 20 pixels breed creeert tussen de kolommen door. Het uitgangspunt van het 960 grid systeem is dat het bij uitstek geschikt voor snelle prototyping. Maar het zou net zo goed werken in een productie-omgeving.

3 . 1 R e s e a r c h

Gulden Snede

De gulden snede vormt een terugkerende verhouding bij lengtes en is ongeveer 1:1,618. Dit betekent dat in een reeks van lengtes, het volgende getal steeds 1,618 keer groter is dan het voorgaande. De gulden snede hangt nauw samen met de Fibonacci reeks.

De toepassing van de gulden snede is terug te vinden in oa.: de natuur, het menselijk lichaam, ontwerpen van Piet Mondriaan en van Leonardo Da Vinci, piramide van Gizeh, Stonehenge en kathedraal van Chartres. De toepassing van de gulden snede kan volgens sommigen voortgeko-men zijn uit een onbewust menselijk voorkeur voor deze verhouding, maar dit is volgens andere weer discutabelDe toepassing van de gulden snede alleen overwegen in-dien het andere elementen niet tekort doet en moet zeker niet de basis vormen van een ontwerp.

p a g i n a 1 7

Bleupixel.net

Deze website maakt gebruik van de 12 column grid, in deze site zijn 6 verticale hoofdlijnen te vinden. Er zijn ook 3 horizontale hoofdlijnen aanwezig. De indeling van deze site is heel simpel en eenvoudig. Je ziet telkens het zelfde patroon terug komen.

3 . 2 G r i d i n s p i r a t i o n

Colourpixel.com

Deze website varieert met de grotes van de kolommen, je ziet dat de kolommen van smal naar breed verlopen. Deze site speelt duidelijk met het grid systeem.

Vamizi.com

Deze website gebruik een ook de 12 column grid, maar wijkt er heel iets in af. Als je naar de breedte van sommige kolommen kijkt zijn somigge iets smaller dan de andere. Ook wordt hier gespeelt met verschillende hoogtes en breedtes van bepaalde div’s

p a g i n a 1 8

Concept #1

Vanaf het 1e concept is al de keuze gemaakt om te wer-ken met een grid voor onze website die gebruik maakt van de 12 column grid. Dit maakt het voor ons makkelijk om de verschillende elementen van onze RIA in een evenwichtig lay-ou weer te geven.

3 . 3 G r i d c o n c e p t

Concept #2

In het concept hebben we de papieren versie omgezet naar een schematische weergave van onze wireframes. Hierbij hebben we de belangrijkste elementen van onze RIA een plek gegeven overeenkomstig de uitkomsten van de trunk test. Bovendien hebben we hierbij een stramien toegepast met niet al te veel uitlijning om zo de ordening van elementen simpel te houden.

Definitief concept

Hiernaast is een skelet weergave van het definitief con-cept te zien. Hierbij is duidelijk te zien dat het concept in feite nauwelijks is veranderd tov. de bovenstaande concepten. Er wordt nog steeds gekozen voor een 3de-ling van de website met in het midden een main content en aan de zijnkanten 2 sidebars. Boven en beneden is er uimte voor de header en de footer.

p a g i n a 1 9

4 . C o l o u r

Kleurenpalet

Met kleur kan een ontwerper diens ontwerp visueel aan-trekkelijk maken. Ook kan er met kleur bepaalde elemen-ten in het ontwerp extra benadrukt worden. Echter het verkeerd gebruik van kleur kan vorm en functie van een ontwerp ernstig verstoren.

• Een kleurenpalet van maximaal 5 kleuren• Combinatie van analoge kleuren• Combinatie van complementaire kleuren• Kleuren uit een triadische kleurenschema• Kleuren uit een tetradische kleurenschema• Kleurencombinatie uit de natuur• Warme kleuren passen beter bij elementen op de voorgrond• Koude kleuren passen beter bij elementen op de achtergrond

4 . 1 R e s e a r c h

Marketing

Het vermogen van kleuren om de aandacht te grijpen is een zeer relevante vraagstuk binnen de marketing, met name voor de reclame-industrie en bij het ontwikkelen van de de visuele identiteit van een merk. De onderzoe-kers Favre en Novembre hebben een experiment uitge-voerd om te achterhalen welke kleuren het gemakkelijkst werden opgevangen door de ogen. Zo toonden ze een oppervlak in verschillende kleuren voor een fractie van een seconde met een tachitoscoop en mensen werd dan gevraagd om de eerste kleur die werd waargenomen aan te geven.

De resultaten luiden als volgt: oranje (21,4%) en rood (18,6%) trekken de aandacht het beste van alles. Echter de kleur blauw (17%) en geel (12%) werden minder goed waargenomen door de testpersonen. Deze resultaten kunnen verklaren het veelvuldig gebruik van rood in re-clame en product design (Marlboro, Ferrari, Coca-Cola). Bovendien, door middel van hun betekenis, symboliek en persoonlijkheid, kunnen kleuren het gedrag van consu-menten beïnvloeden. Bijvoorbeeld, rood is een dynami-sche en spannende kleur terwijl blauw wordt beschouwd als kalm, ontspannen en zelfs slaapverwekkend. Echter, de betekenissen geassocieerd met kleuren zijn gerela-teerd aan culturen en kan variëren van land tot land.

p a g i n a 2 0

GTA San Andreas

Bij het kiezen van de kleur is er onder meer gekeken naar inspiratie van bestaande computerspellen uit de gamein-dustrie. Een van de computerspellen die qua thematiek (de stad) dicht bij het concept van Urbanprint staat staat is het computerspel van Grand Theft Auto.

Bij dit spel draait het erom dat de speler een crimineel speelt die hogerop wilt komen. Echter de speler is niet gedwongen een bepaalde verhaallijn te volgen, maar kan er ook voor kiezen door de stad te zwerven, onbekende gebieden te verkennen of op eigen houtje een zo groot mogelijke chaos te veroorzaken.

Bovenstaande wallpapers van het computerspel GTA: San Andreas vielen daarbij qua kleurenpallet erg in de smaak. De combinatie van warme kleuren lichtbruin-goud-oranje-rood op de voorgrond tegen een zwarte achtergrond is erg aantrekkelijk om naar te kijken. En bovendien vallen de witte letters daarbij gelijk in het oog. Al met al hebben bovenstaande

4 . 2 C o l o u r i n s p i r a t i o n

p a g i n a 2 1

Jean Michel Basquiat

Jean-Michel Basquiat (22 december 1960-12 augustus 1988) was een Amerikaanse kunstenaar. Hij begon als een obscure graffiti kunstenaar in New York City in de late jaren 1970 en groeide in de jaren 80 uit tot een gewaardeerde Neo-expressionistische schilder.

Gedurende zijn carrière Basquiat gericht op “suggestieve tegenstellingen,” zoals rijkdom tegenover armoede, inte-gratie tegenover segregatie of innerlijke ervaring tegenover uiterlijke ervaring. Basquiat’s kunst maakt daarbij gebruik van een mix van zowel tekstuele elementen, schilderij ele-menten als ook totaal abstracte vormen. Sommige ontwer-pen van Basquiat ogen daarbij erg primitief en vertonen daarbij gelijkenissen met rotstekeningen uit de steentijd of tekeningen gemaakt door kleine kinderen. Ontwerpen van Basquiat waren vaak politiek geladen en droegen daarbij een kritieke boodschap uit jegens het kolonialisme en ter ondersteuning van de klassenstrijd.

Bovenstaande ontwerpen Cabeze (links) en Ernok (rechts) van Basquiat zijn ter inspiratie gebruikt, vanwege ietwat aparte keuze van kleurgebruik. Basquiat kiest namelijk voor warme kleuren zoals geel en rood op de achtergrond en een donkere gitzwarte kleur voor de voorgrond.

Om de donkere voorgrond in de vorm van een personage te compenseren past Basquiat bij de donkere voorgrond gekleurde omlijningen toe om diepte en detail verder aan te brengen bij de personages. De kleuren die hij bij de strokes gebruikt zijn veel in de basiskleuren geel, blauw en rood met verder wat witte en groene accenten. Met name de witte en gele accentlijnenen geven de figuur op de voorgrond vorm. Hierbij lijkt het met name in het ontwerp Cabeze alsof het lijkt alsof je binnen in het geraamte van de figuur kan kijken.

4 . 2 C o l o u r i n s p i r a t i o n

p a g i n a 2 2

Concept #1

Het 1e concept was gebaseerd op het computerspel GTA San Andreas. Het kleurenpalet bestaande feitelijk uit 2 kleuren: zwart en oranje, waarbij de kleur oranje tevens in 2 lichtere tinten worden toegepast. De warme oranje kleur wordt voor de achtergrond gebruikt. En naarmate de voor-grond wordt die kleur steeds lichter tot het uiteindelijk een witte kleur is. Wit voor de voorgrond levert een sterk con-trast met de zwarte accentlijnen.

Definitief concept

Concept #2

Het 2e concept was gebaseerd op het contrast bij zwart-wit foto’s. In tegenstelling tot het 1e concept is er gekozen om zwart te gebruiken voor de achtegrond. Daarbij is er ge-kozen voor een geel gouden kleur Met name zwart als kleur voor de achtergrond oogt heel neutraal, terwijl de warme gele kleur Het kleurenpalet bestaande uit 2 kleuren zwart en oranje, waarbij de kleur oranje tevens in 2 lichtere tinten worden toegepast. De warme oranje kleur wordt voor de achtergrond gebruikt. En naarmate de voorgrond wordt die kleur steeds lichter tot het uiteindelijk een witte kleur is. Wit voor de voorgrond levert een sterk contrast met de zwarte accentlijnen.

4 . 3 C o l o u r c o n c e p t

TOP 3

Design Design Design Design Design

TOP 3

DesignDesignDesignDesignDesign

TOP 3

DesignDesignDesignDesignDesign

TOP 3

DesignDesignDesignDesignDesign

TOP 3

DesignDesignDesignDesignDesign

TOP 3

Design Design Design Design Design

#F36100 #F79300 #9E9E9E #000000 #FFFFFF

p a g i n a 2 3

5 . t y p o g r a p h y5 . 1 R e s e a r c h

Leesbaarheid

Hierboven zie je buttons voorzien van tekst, waar het ons nu om gaat is de typografie van deze tekst in de button. Waarom wij deze vermelden bij de research is omdat dit een goed leesbare lettertype is die wel eens gebruikt kan worden op onze website. Het is vet, goed leesbaar en is net niet helemaal strak eigenlijk een beetje speels. Dit zou goed

passen bij UrbanPrint.Waar we ook naar moeten kijken is, welk lettertype gebruiken we voor de content teksten. Het moet in ieder geval goed leesbaar zijn voor de gebruiker en niet storend of snel afleidend zijn. Zo kun je niet je verhaal kwijt aan de gebruiker. Hiernaast zie je een mooi voorbeeld van een lettertype dat strak en goed leesbaar is, en wat tevens gebruikt kan worden op de UrbanPrint website.

Graffiti

Waar we ook op zoek naar waren is een sterk letter-type dat binnen de stijl past, een lettertype dat opvalt. Denk bijvoorbeeld aan graffiti teksten. Vaak heel kleur-rijk, mooi en opvallend. Dit is een goed punt om terug te laten komen op de website. Het nadeel echter is dat de leesbaarheid wel gegarandeerd moet worden dus dat er misschien aangepast moet worden om het leesbaar te maken. Hiernaast zie je een soort van graffiti stijl letter-type dat wel goed leesbaar is voor de gebruiker, echter saaier dan de graffiti rechts bij inspiration.

p a g i n a 2 4

5 . 2 T y p o g r a p h y i n s p i r a t i o n

Keith Haring

Keith Haring (4 mei 1958-16 februari 1990) was een straat-kunstenaar, die wereldwijd bekend is geworden met zijn ontwerpen die iconische poppetjes. Als sociaal bewogen persoon stond hij erom bekend dat hij zich inzette voor de onderste lagen van de samenleveing. In het bijzonder voor de homoseksuele minderheid. Zijn werk bevat veel verwijzingen naar homoseksualiteit. Het kenmerkend van Harings werk is dat hij veelvuldig gebuik van antropomorfe stripfiguurpoppetjes zonder gelaat die steeds met elkaar verbonden zijn. In zijn werk reageerde Keith Haring op de straatcultuur van New York van de jaren 1980. Zwaarbe-laden thema’s zoals geboorte, dood, seks en oorlog drukt Haring uit in een haast komisch stijl van simplisme. Hier-door Harings beeldspraak uitgegroeid tot een alom erken-de visuele taal van de 20ste eeuw.

p a g i n a 2 5

5 . 3 T y p o g r a p h y c o n c e p t

amsterdam Graffiti

bcdefghijklmn

0123456789

LOgo NAVIGATIEBAR

Kop tekstcontent tekst

Concept #1

Dit wat je hier ziet is het logo van UrbanPrint, niet heel orgineel voor de content typografie maar wel iets wat we ongeveer zoeken voor de lettertype van bijvoorbeeld de navigatie. Voornamelijk de kleuren maar ook de stijl dat alles een beetje over elkaar loopt is iets wat we zoeken. Graffiti stijl kunnen we het wel noemen. Na een beetje font search werk zijn we ook op de lettertype ‘Amster-dam Graffiti’ gekomen. Deze kunnen we heel goed ge-bruiken op onze website. Het heeft precies de uitstraling wat we nodig hebben.

Concept #2

Hiernaast zie je twee lettertypes die gekozen kunnen worden voor op de website, we moeten kijken welke van de twee net wat beter staat op de website wanneer we een uiterlijk concept afhebben waar we het op kun-nen testen. Deze twee lettertypen lijken veel op elkaar. Beide zijn erg modern, leesbaar voor de gebruiker, fris van uitstraling en passen binnen de context van Urban. Toch zitten er kleine verschillen in als je ze bijvoorbeeld een iets andere grote geeft. De reden dat we voor deze gekozen hebben is omdat de wat meer speelse letter-types het te druk maken omdat de rest ook al kleurrijk en druk is. Vooral om de designpage bijvoorbeeld. Dit is afleidelijk en niet mooi, ook kan dit de klant wegjagen of laten. Deze gekozen lettertypes doen dat niet. Deze zorgen voor rust.

Definitief concept

• Amsterdam Graffiti• Futura• Arial Rounded MT Bold• Arial Narrow

ArialABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

HelveticaABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

f i

p a g i n a 2 6

6 . I c o n s6 . 1 R e s e a r c h

Beeldende representatie

Hiernaast ziet u een winkelwagentje, niet geheel speciaal maar wel een soort button wat wij ook willen gebruiken voor bij ons op de website. Het mooie aan deze winkelwagen is dat het aantal producten in de winkelwagen wordt aange-geven op de winkelwagen zelf, zoals je kan zien zit er nu niks in de winkelwagen maar als je bijvoorbeeld een t-shirt toevoegt wordt dat natuurlijk een 1. Doe je er nog wat bij dan komt er een 2. Deze valt onder research omdat een winkelwagen in vele gevallen hetzelfde is als elders, er zijn vaak maar kleine onderscheidingen. Deze die wij hier ge-bruikt wordt is een mooi voorbeeld wat past in onze Urban style.

Daarnaast zie je een afbeelding van een vergelijkbare web-site die ook t-shirt ontwerpen aanbiedt. Bij deze afbeeldin-gen gaat het vooral om het iconen gebruik als toevoeging en opvulling van de teksten ‘Submit a design’, ‘community feedback’ en ‘ fame. friends $1000’. Hierbij worden name-lijke iconen/images gebruikt wat er perfect bij past. Submit heeft een icoon van een upload uiterlijk (universeel icoon), bij community feedback een gespreksballon met daarin een hartje als feedback naar jouw design, en de derde met twee t-shirts waarbij er een is voorzien van een dollar teken dat aan wilt geven dat je cash kan verdienen met jouw t-shirt.

p a g i n a 2 7

6 . 2 I c o n s i n s p i r a t i o n

Spreadshirt.nl

Hiernaast zie je een stuk uit de website van Spreadshirt. Hier kan je verschillende buttons klikken om een effect toe te passen op je ontwerp. Zo heb je keuzes uit kleur, soorten druk, spiegelen van afbeeldingen of bijvoorbeeld de afbeelding precies in het midden te krijgen. Dit is voor onze website ook van belang hoe de wij de werkpanelen indelen voor de ontwerpers. Dit onderdeel plaats ik in het kader inspiratie omdat wij hier veel van kunnen gebruiken, voornamelijk de verschillende kleuren en bijvoorbeeld het spiegelen van een ontwerp.

Customink.com

Hiernaast zie je een afbeelding met verschillende iconen, die de tekst ondersteunen. Bij bijvoorbeeld animals, heb je tekst en een afbeeling (icoon) van een dier. Dus ook men-sen van een andere afkomst die niet sterk zijn in de engelse taal weten waar ze wat kunnen vinden op de website. Wil je een afbeelding van een voertuig kijk je bij een auto’tje, mu-ziek bij een muzieknoot etc. Het zijn internationale iconen die overal gebruikt worden en hetzelfde zijn. De reden dat wij deze plaatsten bij inspiratie is omdat het een idee kan zijn om hetzelfde te doen op onze designpage.

Facebook.com

Hier zie je eigen een icoon dat meerdere malen gebruikt wordt. Het is namelijk dat pennetje. Dit pennetje heeft een wereldwijde betekenis en word gebruikt om bijvoorbeeld iets aan te passen als het gaat om digitale gegevens zo-als teksten. Bij het selecteren hiervan krijg je 9 van de 10 keer een invulveld waar je in kan typen. Zo ook bij deze afbeelding, afkomstig van Facebook. Dit willen wij ook ver-werken op onze website UrbanPrint, de gebruikers moeten hun profielpagina kunnen wijzigen zoals gegevens en ont-werpen.

p a g i n a 2 8

6 . 3 C o n c e p t

Concept #1

Hiernaast zie je meer twee buttons die net als iconen be-langrijk zijn. En vooral zichtbaar moeten zijn voor de gebrui-ker. Bij de meest linkse button heb je een normale vierkant/langwerpige button met ronde hoekjes, met daarin nu als voorbeeld het woord ‘koop’, echter zie je hier nog zo ge-naamd verf van de graffiti naar beneden druipen. Dit maakt de button meer bij de rest van de elementen passen. Wel is het oppassen dat je deze button niet tevaak gebruikt. An-ders wordt het te druk en niet opvallend meer.De rechter button is meer een standaard button (kleuren in urban stijl en met de rest van de website) hier hebben we een pijl toe-gevoegd aan de button dit maakt duidelijk dat deze button de functie heeft om de gebruiker erop te wijzen dat er meer content te vinden is als de gebruiker hierop drukt.

Concept #2

Hiernaast zie je een vijf aantal iconen die ongeveer de looks hebben hoe wij het willen voor onze website. Zo zie je links een gepimpte winkelwagen als je er artikelen toe-voegt. De nummer past zich aan de aantal artikelen, de bult wordt groter als de gebruiker meer artikelen toevoegt (bij een groot aantal misschien er nog een berg voor leggen) En de winkelwagen wielen in de Urban stijl natuurlijk. De reden waarom wij dit doen is omdat de winkelwagen op de andere websites zo standaard en saai is. De gebruiker zien nu nogsteeds hetzelfde icoontje alleen dan aanpast voor op de website. Daarnaast icoontjes voor de designpage. Voornamelijk voor het toevoegen, vandaar het plusje dat al-gemeen staat voor ‘nog 1’ of ‘toevoegen’ etc. Het onderste icoontje kunnen we misschien gebruiken voor het uploaden van een afbeelding voor op het t-shirt. Het upload teken verwerkt in een afbeelding icoon.

Definitief concept

Hiernaast zijn de iconen te zien zoals we die gaan toepas-sen op de RIA. Het betreft hier de iconen voor: informatie, winkelwagen, contact, home, wachtwoord, gebruikers-naam, en ten slotte een icoon voor instellingen.

p a g i n a 2 9

7 . I m a g e s7 . 1 R e s e a r c h

Regel van derden

Dit is een techniek voor de compositie van foto’s. Hierbij wordt een fotoin drieën verdeeld, waardoor esthetische posities worden gecreerd voor de primaire elementen van een foto. Het wordt toegepast door de foto zowel verticaal als horizontaal te verdelen in drieën. Hierdoor ontstaat een onzichtbare rooster van negen rechthoeken en vier kruis-punten. De primaire element van een foto wordt vervolgens geplaatst op een snijpunt van het raster. De asymmetrie van de resulterende compositie is interessant om naar te kijkenen heeft enige estethische waarde.De regel van der-den werkt over het algemeen goed, is gemakkelijk aan te brengen, en dient dan ook in acht te worden genomen bij het samenstellen van een compositie van een foto.

p a g i n a 3 0

7 . 2 I m a g e s i n s p i r a t i o n

Okimono.nl

Bij dit ontwerp wordt er gebruik gemaakt van een volledige afbeelding op de achtergrond deze sliden op een bepaal-de volgorde. Hier komen ontwerpen voor van designers waardoor je de bezoekers gelijk een indruk kan geven wat er te doen is. Voor het missende content gedeelte hebben ze button’s gemaakt aan de onderkant van de site. Als je een button aanklikt wordt er een venster geopend met de bijbehorende informatie.

City skyline vogelperspectief

Hiernaast zie je een afbeelding die we zouden kunnen ge-bruiken als achtergrondafbeelding voor de website. Deze afbeelding is interessant voor ons aangezien de associatie met het stedleijke karakter wordt gelegd. De foto is boven-dien genomen in vogelperspectief, daardoor krijg je veel diepgang op de website.

Banksy

Banksy is een pseudoniem van een graffitikunstenaar, poli-tiek activist, filmregisseur en schilder uit Engeland.Zijn satirische street art en controversionele spotprenten combineren zwarte humor met graffiti in een karakterise-rend sjablonentechniek. Dergelijke artistieke werken van politieke en sociale commentaar zijn gekenmerkt op straat, muren en bruggen van steden over de hele wereld. Afbeel-dingen van ontwerpen van Banksy passen heel goed bij het imago en uitstraling van urbanprint omdat daarmee het ste-delijke met het creatieve wordt gecombineerd. Bovendien levert dit in het geval van Banksy aansprekende plaatjes op die goed gebruikt zouden kunnen worden als achtergrond van een website.

p a g i n a 3 1

7 . 3 C o n c e p t

Concept #1

We hebben voornamelijk onderzoek gedaan naar het ge-bruiken van achtergrond afbeeldingen deze zult u dan ook terug vinden in de concept. Dit is het eerste concept, we willen dit als achtergrond van de website gebruiken. Door deze afbeelding te gebruiken leggen we de nadruk voor-namelijk op het ‘‘stedelijke’’. De afbeelding is genomen uit vogelperspectief, daardoor krijg je veel meer diepgang op de website.

Concept #2

Dit is het tweede concept, het is juist het tegenoverge-stelde van het eerste concept. Bij het vorige concept was de achterground afbeelding dynamisch, het tweede concept is statisch en plat. Het is een afbeelding van het werk van Banksy, Banksy is een groot graffiti artiest. Het is de bedoeling dat deze site de nadruk legt op de creatieve kant van urban.

Definitief concept

Als feedback kregen we: Ga voor het tweede concept, een statische afbeelding als achtergrond. Maar zoek nog een ‘‘viezere’’ afbeelding van grafitti. De vsd expert wil meer graffiti doorelkaar zien! Het eerste concept vond de expert niet bij de doelgroep passen. Bij de skyline moest hij denken aan een zakenman die op reis was en uit zijn vliegtuig keek.