Screen Design. Inge van Dam CMD2E Screen Design Product page. Inge van Dam CMD2E

(1)

Inge van Dam 0880974 CMD2E

Screen Design

Inge van Dam 0880974 CMD2E

Screen Design – Product page

1

(2)

Visuele merk en Concurrentie analyse

Welke bank heb ik geanalyseerd?

Ik heb de ING bank toegewezen gekregen. Ik maak zelf geen gebruik van de ING en dat zorgde ervoor dat ik niet veel over de bank weet. Ik heb daarom de ING in eerste instantie even opgezocht op google.

Over de ING

De afkoring ING staat voor Internationale Nederlanden Groep. De bank wordt

meestal benoemd met alleen de afkorting. De ING is opgericht in 1881 in Amsterdam onder de vleugels van de overheid. Pas in 1991 gaat de bank geheel onder de naam ING door, voorheen werd het de Postbank genoemd. Op dit moment heeft de ING in Nederland zo’n 9,2 miljoen rekeninghouders. De leeuw is echt de maskotte van de ING. De leeuw wordt ook vaak vertoont als man in een pak en dan vaak in relatie met sport.

Wat is mij opgevallen?

Ik herkende de ING vaak aan de oranje kleur en de leeuw die verwerkt zit in het logo van de ING. Op de website worden ook weer veel dezelfde kleuren gebruikt. Oranje, grijs, wit en zwart. De letters ING in het logo zijn echter donkerblauw, maar die kleur gebruiken ze verder niet veel in de ontwerpen. Ik denk dat ze daar bewust voor gekozen hebben om zo een duidelijker onderscheid te maken met de Rabobank. De Rabobank gebruikt namelijk de kleuren Oranje en Blauw. De banken zouden

moeilijker te onderscheiden zijn als ze beiden dezelfde kleuren gebruiken. De stijl van de ING is verder erg simpel. De websites van ING zijn onderling ook weer erg verschillend. Ik heb ervoor gekozen om de opmaak van de website

www.ING.nl/zakelijk te gebruiken. Ik heb dat gedaan omdat ik de header en footer van deze website mooier vind dan de standaard ING website.

Hoe heb ik mijn merkanalyse vorm gegeven?

Ik heb ervoor gekozen om een duidelijk overzicht te maken van het merk. Links bovenin staat het logo van de bank en daaronder heb ik de 6 belangrijkste kleuren van het merk geplaatst. Onder de kleuren staan de lettertypes van de ING. Van Arial ben ik niet helemaal zeker, maar van Rockwell wel. En onder het lettertype heb ik verschillende buttons en beeld elementen van de ING geplaatst.

De rest van de analyse heb ik verdeeld in vier onderwerpen. De onderwerpen waarvan ik de foto’s/illutraties vandaan heb. De onderwerpen zijn website, applicatie, producten en facebook.

Ik heb niet alle afbeeldingen van mijn analyse erop gezet omdat de afbeeldingen dan erg klein worden. Ik heb de belangrijkse afbeeldingen uitgekozen die het beeld van het merk het meest versterken.

2

(3)

Inge van Dam 0880974 CMD2E Welke concurrenten heb ik geanalyseerd?

Ik heb de belfius bank en Halkbank geanalyseerd. De Halkbank is een bank waarvan ik herinnerde dat ik daar gepint had op vakantie in Macedonie en Belfius vond ik met toeval op google. Belfius en Halkbank hebben beide een hele andere stijl dan de ING en ik vond het daarom geschikte banken voor een concurrentie analyse. Op internet heb ik meer informatie over beide banken gezocht.

Belfius Bank

Belfius noemde zich voor 2012 nog Dexia bank en is onstaan in 1860. Belfius is een belgische financiele instelling met een hoofdgebouw in Brussel. De naam belfius staat voor Bel-‐fi-‐us. Bel staat voor Belgie, fi voor financien en us voor wij.

Halkbank

Halk bankasi staat voor mensen bank. De bank is onstaan in 1933 in Ankara, het is een turkse bank. Het is een bank van de staat en valt onder de 3 grootste banken in Turkije. De bank heeft ondertussen al vele verschillende vestigingen in verschillende landen.

Wat is mij opgevallen bij Belfius?

Belfius bank heeft pas sinds 2 jaar dit nieuwe uiterlijk en deze nieuwe naam. Ze gebruiken veel kleuren en het is erg druk. Ze stoppen veel elementen op een pagina.

Roze en rood tinten gebruiken ze als basis kleur maar het valt mij op dat het niet consistent is. De kleuren wijken vaak af en dat geld hetzeflde voor de kleur blauw.

Wat is mij opgevallen bij Halkbank?

Halkbank richt zich echt op twee tinten. Dat is oranje en lichtblauw. Het zijn

herkenbare kleuren voor de bank omdat ze in alle elementen worden herhaald. Door sponsoren hebben ze en keer de kleur rood gebruikt en ik heb oude visuals van de bank gevonden die donkerdere blauw tinten hebben. Ik heb het juiste lettertype van deze bank helaas niet kunnen vinden.

Hoe heb ik mijn concurrentie analyse vormgegeven?

Ik heb dezelfde stijl gebruikt als bij mijn merkanalyse en daarom spreekt hij voor zich. Ik heb het canvas gedraaid en zo de twee banken op elkaar geplaatst.

3

(4)

#ed8032 #e94f32 #d1d1d6

#000000

#7c7a78 #ffffff

Website

Applicatie

Producten

Facebook

Arial & Rockwell

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula

eget dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean com modo ligula eget dolor.

Facebook

(5)

#e54461 #a2a837 #9b2731

#469b9f

#bcb7af #ffffff

Website

Applicatie

Producten

Facebook

Arial & ubuntotitling

Facebook

Website

Applicatie

Producten

Facebook

#498ec5 #d05e2c #d8413c

#1d406e

#c9c9c9 #ffffff

Arial Lorem ipsum dolor sit amet, con-

sectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commo-

do ligula eget dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commo-

do ligula eget dolor.

(6)

(7)

(8)

(9)

(10)

(11)

Schetsen

Schets 1

In deze schets heb ik een pagina gemaakt waarin een grote afbeelding wordt getoont. De afbeelding wordt gedeelt in vier kleine afbeeldingen die ook klikbaar zijn. Door de grote afbeeldingen ziet de gebruiker verschillende omgevingen van de applicatie. Het zijn aantrekkelijk visuele beelden die de gebruiker nieuwsgierig maakt. Onder de grote afbeelding heb ik nog vier informatie blokken geplaatst.

Bij nader inzien vindt ik het zelf niet prettig dat er boven vier grote klikbare blokken zijn en daaronder weer vier artikelen. Ik vind het niet aantrekkelijk genoeg en ik vind het niet goed passen bij de stijl van de ING.

4

(12)

Inge van Dam 0880974 CMD2E Schets 2

Bij deze schets heb ik de header van de website aangepast. Ik heb de lange

horizontale header een stuk groter en opvallender gemaakt bij deze schets. Het logo is gesplitst in twee onderdelen en neemt daarmee een groot stuk van de pagina in beslag. Onder het grote logo heb ik een horizontale menu balk geplaatst waarmee de gebruiker naar andere pagina’s van de website kan navigeren. Op de pagina zelf heb ik een voorbeeld van de applicatie gezet, met daarbij een overzicht van de voordelen van de applicatie. De gebruiker wordt daarmee als het ware overgehaald om de applicatie te gebruiken.

Bij nader inzien vindt ik de header veelste groot in verhouding met de rest van de pagina. Ik denk dat de header die ik ontworpen heb ook niet goed past bij de stijl van de ING. Het artikel over de voordelen van de applicatie vindt ik wel erg duidelijk.

5

(13)

Bij deze schets kan de gebruiker veel informatie zien over de applicatie. Door de berichtenwolkjes naast het voorbeeld kan de gebruiker zien wat de app doet en kan.

De gebruiker kan op de berichten klikken en meer lezen over dat bepaalde onderwerp. Onder het voorbeeld kan de gebruiker direct zien of de applicatie geschikt is voor zijn of haar telefoon.

Ik vind het goed aan deze schets dat de gebruiker een voorbeeld krijgt van de applicatie met daarbij informatie over wat de app kan. De gebruiker kan er meer informatie over een bepaald onderwerp vinden zonder hij of zij alles door moet lezen. Wel denk ik dat vier informatie wolkjes te weinig zijn en er meer valt te vertellen over de applicatie dan alleen vier onderwerpen. Voor de mensen die liever lezen dan kijken is dit een minder fijne pagina. De stijl van de wolkjes past erg goed bij de stijl van de ING.

6

(14)

In deze schets heb ik een pagina ontworpen waarbij de gebruiker online door de applicatie kan bladeren. Soms vinden mensen het prettig om eerst een beeld te zien van de applicatie voordat ze het downloaden. Het kan ook dienen als wegwijzering voor mensen die de applicatie al gedownload hebben maar niet precies weten wat ze er allemaal mee kunnen. Je trekt met deze pagina daardoor meerdere mensen aan. Er is informatie te lezen over de pagina, en er worden specifieke onderdelen benoemd met tips en voordelen.

Ik vind het doel van deze pagina erg goed. Het is een duidelijke indeling die mensen veel informatie kan bieden. Het kan voor vele klanten van belang zijn. Ik mis de stijl van de ING wel nog een beetje in de schets maar dat kan misschien veranderen als ik er een stijlstudie van maak.

7

(15)

Dit is een schets van een pagina die veel informatie over de applicatie geeft aan de klanten. De pagina begint met een grote foto header waarin de app in een dagelijkse omgeving wordt getoont. Wil je meer weten? Scroll dan verder. Ik heb elementen van mijn vorige twee schetsen hier in verwerkt. De gebruiker kan door de applicatie heen bladeren en lezen wat er mee kan. In de berichtenwolkjes staan tips en

voordelen en in het informatie blok links onder kan de gebruiker een algemen beschrijving van de pagina vinden. Verdere informatie over het downloaden bijvoorbeeld en de veiligheid? Die staan eronder in drie artikelen.

Op deze pagina wordt erg veel informatie gegeven maar in een aantrekkelijke sfeer.

De gebruiker kan zelf de applicatie online gebruiken en nuttige informatie vinden waar hij of zij misschien naar op zoek is. De stijl van de pagina past helemaal bij de ING. De foto header is een element dat zich ook op andere pagina’s bevindt, evenals de drie artikelen. De schets is duidelijk, passend bij het merk, informatief en visueel aantrekkelijk.

8

(16)

Stylestudie

Stylestudie 1

In deze stijlstudie heb ik gekeken hoe schet 3 vorm geeft digitaal. Ik wilde weten of het er goed uit zou zien met de blokjes naast de applicatie en of het wel bij de stijl van de ING past. Ik vind de berichtblokjes erg sterk en ze passen precies bij de ING. Ik wil dit element graag in mijn productpage gebruiken. Ook ziet de screenshot van de app in de telefoon er goed uit vind ik. Ik ben ook tevreden met de kleuren die ik heb gekozen, het sluit goed aan bij de ING.

Stylestudie 2

In deze stijlstudie heb ik schets 4 uitgewerkt. Ik vroeg me af hoe het “Swipe door de app heen!” idee werkt digitaal. Ik vind het er erg aantrekkelijk uit zien om erop te klikken en zo de app te leren kennen. Het idee wil ik graag gebruiken in mijn

productpage. Ik mis hierbij wel de oranje blokken naast de telefoon van stylestudie 1, want die vind ik erg goed bij de ING passen.

Schets 5 is een combinatie van beide stijlstudies en op basis van deze twee stijlstudies kies ik ervoor om die schets uit te werken. Beide stijlstudies hebben namelijk elementen die ik wil gebruiken en daarom wil ik ze combineren.

9

(17)

(18)

(19)

(20)

Productpage

Aansluiting bij het merk

De productpagina sluit goed aan bij het merk. Dat komt doordat ik de stijl van het merk heb geanalyseerd en gebruikt in mijn ontwerp. Ik heb elementen toegevoegd die herhaald worden binnen de gehele website. Zo heb ik een fotoblok bovenin het ontwerp geplaatst met daarin de titel van de pagina. Zo’n fotoblok is helemaal in de stijl van de ING. Een strakke horizontale foto met daarin een titel in Bold en regular letters. Rechts van de foto zit altijd een oranje vlak met daarin een ondertitel en een optie om meer te kunnen lezen of verder te kunnen kijken. Ook heb ik de

driehoekjes van de “lees meer” optie een aantal keer gebruikt. De oranje

wolkblokjes naast de voorbeeld telefoon is ook echt de stijl van de ING. Ze gebruiken deze blokjes in deze stijl ook in de app zelf. De hele productpagina is in ING stijl door de elementen, kleuren en verhoudingen.

Vormentaal

De vormen zijn bijna allemaal plat, net als de rest van de website. Ook zien de klikbare elementen er niet klikbaar uit op de echte website, pas als je muis in de buurt komt. Daarom heb ik dat ook zo gedaan bij mijn ontwerp. Verder is bijna alles in het ontwerp recht, er wordt veel gebruik gemaakt van vierkanten en rechthoeken.

Ik heb er daarom ook voor gekozen om deze vormen te herhalen.

Typografie

Het lettertype Rockwell wordt veel herhaald in de website als titel of bij kopjes, en het lettertype arial wordt gebruikt voor de lange teksten en verhalen. Dat heb ik ook zo in mijn product pagina gedaan. De typografie heeft ook verschil in de kleuren oranje, grijs, wit en zwart.

Uitwerking & verzorging

Ik heb de productpagina uitgewerkt in Photoshop. Ik had al lang niet meer met photoshop gewerkt omdat ik meestal kies voor Illustrator of InDesign en ik moest daarom even wennen. Ik heb mijn best gedaan om een stak eindproduct te maken.

Het leukst aan mijn uitwerking vind ik het “online app” element waarmee de gebruiker een goed beeld krijgt van de applicatie, geschikt voor iedere leeftijd.

Het grid

Ik heb een grid gemaakt met vele lijnen. Er zijn veel elementen die ik aan een lijn wilde zetten en daardoor heb ik bovenop mijn grid nog een aantal lijnen toegevoegd.

Ik had de Griddify optie gedownload voor mijn photoshop, waarmee ik gemakkelijk en snel een grid kon toevoegen. Ik had het canvas verdeeld in 25 horizontaal en in ongeveer dezelfde breedte en hoogte in verticale lijnen. Door het grid zijn de vlakken goed verdeeld en elementen juist geplaatst.

10

(21)

Inge van Dam 0880974 CMD2E Wat vind ik van het resultaat?

Ik ben erg trots op het eind resultaat. Ik heb veel nagedacht over de opdracht en me er veel in verdiept. De productpagina voldoet aan de eisen die ik mezelf gestelt heb.

Ik vind de pagina passen bij de ING stijl, ik vind de pagina visueel aantrekkelijk, ik vind de pagina inhoudelijk een goede hoeveelheid informatie hebben en het heeft een juiste indeling. Ook vind ik het erg leuk dat de gebruiker online door de

applicatie heen kan gaan. Er wordt op een slimme en aantrekkelijke manier informatie weergeven.

11

(22)

Bronnenlijst

Deliverble 1

http://nl.wikipedia.org/wiki/ING_%28bank%29 https://www.ing.nl/zakelijk/index.html

http://www.halkbank.com.mk/

http://www.emiclaer.nl/portals/39/winkellogo/ING-‐logo.gif

https://www.ing.nl/Images/lr_ING_pinpas_betaal_tcm14-‐114668.jpg

http://www.aapstatic.nl/photos/scr/135/52/297663427/ing-‐app-‐krijgt-‐creditcard-‐

ondersteuning-‐voor-‐ios-‐screenshot-‐3.jpg

http://www.emerce.nl/content/uploads/2012/03/03112011_iPhone_iPad_highres.j pg

http://inhaken.files.wordpress.com/2010/07/ing-‐inhaker-‐uru-‐ned.png http://www.konutkredisihesaplama.info/up/kredi/13/halkbank-‐logo.jpg http://nettavir.com/resimler/icerik/ecdd789b25bdc3d04e4d.jpg

Deliverble 2

http://cdniphone.i-‐culture.nl/wp-‐content/uploads/2012/08/ING-‐Bankieren-‐

overschrijvingen.jpeg

overschrijven.jpeg

Deliverble 3

overschrijven.jpeg

http://www.socialmediasocialmedia.nl/strategie_nieuws/wp-‐

content/uploads/2011/11/ing_mobiele_app.jpg

De rest van de bronnen zijn uitgeprint.

12