Pagina 1 van 13. Screen design. Justin koopmans

Maat: px

Weergave met pagina beginnen:

Download "Pagina 1 van 13. Screen design. Justin koopmans"

Gerarda de Boer
7 jaren geleden
Aantal bezoeken:

1 Pagina 1 van 13 Screen design Justin koopmans

2 Inleiding Pagina 2 van 13 Voor het vak Screen Design was opdracht 1 al een leuke. We moesten een pagina van een bank herontwerpen. Dit sprak mij erg aan door de visie die ik zelf heb. Dat is dat ik de digitale wereld zo simpel mogelijk wil maken. Met deze visie ging ik aan de slag. We moesten eerst wat research doen natuurlijk. Want zo beginnen we nou eenmaal. Wel moet ik zeggen dat iets mij stoorden tijdens mijn research. Dat was het feit dat ING bezig was met een totale redesign van de website. Althans dit lijkt mij want sommige pagina s waren heel mooi, terwijl andere pagina's duidelijk in een oudere huisstijl waren. Dit heeft mij echter niet zodanig gestoord dat ik niet verder kon met de opdracht. Het werd er alleen maar leuker door. Het researchen was leuk om te doen. Simpel weg omdat je dan opeens heel anders naar een website gaat kijken. Ik heb visuele elementen van de ING site gepakt en laten zien. Er is goed te zien hoe het Ik heb een pagina gepakt van de app. Die was naar mijn mening het rommeligst. Met mijn visie in mijn achterhoofd ben ik aan de slag gegaan. lettertype gebruik is en de symbolen e.d.

3 Inhoudsopgave Pagina 3 van 13 Visuele merk- & concurrentie analyse Pagina 4 Concurentie analyse Pagina 6 Schetsen Pagina 7 Oud en nieuw Pagina 11 Bijlage Pagina 13

4 Visuele merk- & concurrentie analyse Pagina 4 van 13 ING Digitaal Hier is zijn de visuele elementen te zien. Zoals het logo, de top navigatie, knoppen, het zoekveld en andere links en symbolen. Dingen die mij echt opvoeden waren dat de koppen allemaal dik gedrukt zijn. Er zijn twee lettertypes gebruikt namelijk Arial en Rockwell. De kleur oranje komt ook overal in terug. Ik vind zelf dat de ING een hele mooie style heeft. Dit doordat het design best simpel in elkaar zit. Simpel design is echter lastig te bereiken en kan altijd nog aan geschaafd worden.

5 Pagina 5 van 13 ING Analoog Hier zijn wat analoge factoren te zien. Zoals een sponsoring op voetbal shirts die we allemaal wel kennen denk ik. Het pin pasje die we zeker allemaal kennen. Ook de winkels zijn erg in stijl. De oranje leeuw, tja die was vroeger blauw natuurlijk net als het logo. Een oranje leeuw is krachtiger naar mijn mening doordat het lekker puur hollands is.

6 Pagina 6 van 13 Concurentie analyse Rabobank Dit is echt precies het tegenovergestelde van de ING qua design. waar de ING heel strak en misschien modern te noemen is, is de Rabobank heel zakelijk. In het geheel vind ik het goed er uit zien echter kunnen ze veel leren van de witruimtes van de ING ABN Amro Wat ik erg tof vind is dat ze het logo als vorm ook gebruikt hebben in de site. De kleuren samenstelling en de lettertypes zijn ook wat moderner allemaal. Verder kan ik zeggen dat ze meekunnen gaan met de tijd door een flat design toepassen

7 Schetsen Schets 1 Pagina 7 van 13 Hier heb ik de site al aardig omgetoverd. Ik heb hier geprobeerd de site terug te brengen naar de nodige informatie en de overtollige informatie achter knoppen te plaatsen De download(voor de app) zit in het plaatje verwerkt Op deze manier is de site veel duidelijker en simpeler. Echter zijn de elementen wel heel groot en denk ik niet dat dit het ging worden.

8 Schetsen Schets 2 Pagina 8 van 13 Hier heb ik het al heel anders aangepakt. Door de foto strategisch in het midden te plaatsen moesten de andere elementen wel kleiner. Ook het functie tabel heb ik verkleind tot een zekere maat de functies van Windows apparaten en windows tablets waren het zelfde. Toen dacht ik waarom zouden we het dan nog extra vermelden. Helaas moet ik zeggen dat de verticale foto niet in de ING stijl is.

9 Schetsen Schets 3 Pagina 9 van 13 Toch wilde ik kijken of ik het in de ING stijl kon doen. Dus probeerde ik de foto aan de zijkant te plaatsen als in een banner. Dit gaf mij echter niet het effect wat ik wilde en was ik ook al snel klaar met deze schets. Voor mij was dit als een punt achter de verticale foto. Het werkte gewoon niet.

10 Schetsen Schets 4 Pagina 10 van 13 Ze zeggen wel eens dat je eerste idee de veste is. Dit was mijn laatste schets en deze vond ik toch echt de beste. ING maakt al veel gebruik van horizontale foto s het enige wat nu buiten de boot valt is dat ik kaders aan die horizontale foto s heb toegevoegd. Dit samen met het verkleinde functie tabel en de instructies van de app makkelijk in beeld was dit het uiteindelijke ontwerp.

11 Oud en nieuw Pagina 11 van 13 Hier is de oude pagina te zien. Ik heb het tabel er via een tweede screenshot even toegevoegd. Zo is goed te zoen dat deze pagina eigenlijk helemaal geen gebruik maakt van de breedte die het heeft. Naar mijn mening is het ook goed te zien wat ik eerder bedoelde met rommelig.

12 Pagina 12 van 13 Zie hier het eindresultaat. Ik heb veel beter gebruik gemaakt Particulier Personal Banking Private Banking Zakelijk Zoeken in Particulier Home Producten Financieel fit Rentepuntenwinkel Service & Contact van de horizontale ruimte dan Overzicht Bankieren App Download de App dat van het originele. Ook heb ik download knoppen voor elk device toegevoegd en het Uw saldo checken, geld overmaken en afen bijschrijvingen bekijken? Het is mogelijk met de Mobiel Bankieren App. We blijven steeds nieuwe functies ontwikkelen. Daarmee maken we het makkelijk om uw bankzaken te regelen met uw mobiel of tablet. ios Android stappen plan over hoe te Meer info Windows installeren toegevoegd die op het origineel met 2 extra klikken te bereiken was. Ik zeg persoonlijk dat ik het zo zou op de website zou zien. Mobiel & Internetbankieren Overzicht Mobiel Bankieren App Beginnen met mobiel bankieren Mobile Banking in English Saldolijn ING Fame Game Instructies van de app Download de mobiele app Vul uw gegevens in Vraag uw bevestigingscode aan en vul deze in Accepteer de voorwaarden Maak uw 5-cijferige mobiele pincode aan Functies ios Andriod Windows Saldo, afen bijschrijvingen bekijken Zoeken in Af & Bij Geld overboeken Creditcard inzichtelijk Nieuw: digitale berichten Nieuw: inloggen met uw vingerafdruk Over ING ING in English Veilig bankieren Privacy en cookies Disclaimer Volg ons:

13 Bijlage: Eindontwerp groot Pagina 13 van 13 Particulier Personal Banking Private Banking Zakelijk Zoeken in Particulier Home Producten Financieel fit Rentepuntenwinkel Service & Contact Overzicht Bankieren App Download de App Uw saldo checken, geld overmaken en afen bijschrijvingen bekijken? Het is mogelijk met de Mobiel Bankieren App. We blijven steeds nieuwe functies ontwikkelen. Daarmee maken we het makkelijk om uw bankzaken te regelen met uw mobiel of tablet. ios Android Meer info Windows Mobiel & Internetbankieren Overzicht Mobiel Bankieren App Beginnen met mobiel bankieren Mobile Banking in English Saldolijn ING Fame Game Instructies van de app Download de mobiele app Vul uw gegevens in Vraag uw bevestigingscode aan en vul deze in Accepteer de voorwaarden Maak uw 5-cijferige mobiele pincode aan Functies ios Andriod Windows Saldo, afen bijschrijvingen bekijken Zoeken in Af & Bij Geld overboeken Creditcard inzichtelijk Nieuw: digitale berichten Nieuw: inloggen met uw vingerafdruk Over ING ING in English Veilig bankieren Privacy en cookies Disclaimer Volg ons:

Vergelijkbare documenten

Opdracht 1. 2C_0888632_van_ Ruth_Colin_ Opdracht_1_Compleet

Opdracht 1. 2C_0888632_van_ Ruth_Colin_ Opdracht_1_Compleet Opdracht 1 2C_0888632_van_ Ruth_Colin_ Opdracht_1_Compleet Deliverable 1 Visuele merk- en concurentieanalyse Merkanalyse 2C_0888632_van_ Ruth_Colin_ Opdracht_1_Analyse_ ING_BANK Concurentieanalyse 2C_0888632_van_