Opdracht 1. 2C_ _van_ Ruth_Colin_ Opdracht_1_Compleet

Transcriptie

1 Opdracht 1 2C_ _van_ Ruth_Colin_ Opdracht_1_Compleet

2 Deliverable 1 Visuele merk- en concurentieanalyse

3 Merkanalyse 2C_ _van_ Ruth_Colin_ Opdracht_1_Analyse_ ING_BANK

4

5 Concurentieanalyse 2C_ _van_ Ruth_Colin_ Opdracht_1_Analyse_ ING_BANK

6

7

8

9

10

11

12

13

14

15

16

17

18

19 Wanneer is een productpagina goed? - Belangrijkste informatie boven aan - Duidelijke productomschrijving - Detailkenmerken - Productafbeeldingen - Relevante andere producten - Call to action button Wat zijn visuele kenmerken van een productpagina? - Overzichtelijk - Grote banner boven aan de pagina - Tiles kollomen - Duidelijke structuur Hoe worden beeld, typografie en vorm gebruikt? - In de banner meestal een afbeelding van het product zelf, persoon of een emotie. - Grote titels - Er wordt veel gebruik gemaakt van titels, subtitels en body tekst - Gebruiker wordt direct aangesproken - Meeste productpagina s zijn rechthoekig vormgegeven en zeer gestructureerd - Veel wit - Aantal basis kleuren die overal terug komen Welke elementen verbeteren een productpagina? - Knoppen en kaders die de aandacht direct aantrekken - Sfeerimpressies - Elementen waar gebruikers zich in kunnen herkennen - Elementen die al in andere touchpoints zijn gebruikt

20 Deliverable 2 Schetsen en Styleguide

21 Schetsen

22 1. Header links (Particulier, Personal banking, Private banking en zakelijk) 2. Call to action knoppen voor (home, producten en financeel fit) 3. Zoekveld 4. Titel (Eenmaal mobiel, altijd mobiel) 5. Subtitel (Als u de app gebruikt, wilt u nooit meer anders) 6. Call to action knoppen voor de appstores 7. iphone afbeelding met app screen 8. Call to action scroll knop + Overzichtelijk + Duidelijk te zien waar de app te downloaden is + Verschillende groottes in tekst

23 1. Header links (Particulier, Personal banking en zakelijk) 2. Zoekveld 3. Titel (Functies) 4. Functie icons met tekst 5. Call to action scroll knop + Overzichtelijk overzicht functies + Veel wit ruimte + Header kleiner (onepager effect)

24 1. Header links (Particulier, Personal banking en zakelijk) 2. Zoekveld 3. Titel (Downloaden en installeren) 4. Doorlopende tekst (Het downloaden en installeren op uw smartphone of tablet is heel eenvoudig. In enkele stappen heeft u de app gedownload en bent u aangemeld. U kunt dan direct aan de slag met mobiel bankieren.) 5. 3 iphones met afbeelding van app 6. Call to action scroll knop 7. Footer + Overzichtelijk + Veel witruimte + Verschillende font groottes

25 1. Header links (Particulier, personal banking, private banking en zakelijk) 2. Header 3. Zoekveld 4. Titel ((Altijd en overal uw geldzaken regelen) 5. Subtitel (Download de gratis mobiel bankieren app.) 6. Call to action Appstores knoppen 7. iphone afbeelding met app screen 8. Footer links (Over ING, ING in english, Veilig bankieren, Privacy en cookies en Disclaimer) 9. Footer + Overzichtelijk + Duidelijk te zien waar de app te downloaden is + Verschillende groottes in tekst + Grote afbeelding iphone + screen

26 - Te leeg - Te simpel - Niet de identiteit van ING - Weinig tekst

27 - Te druk - Bovenste deel pagina is geordend - Onderste gedeelte vind ik niet echt geslaagd, oogt als verouderd design (App carousel)

28

29 + Overzichtelijke manier van functies + Compositie interessant, leuke manier om functies te weergeven rondom de device.

30 1. ios Appstore call to action knop 2. Google Play Store call to action knop 3. Scroll knop 4. Call to action navigatieknoppen

31 Styleguide

32 Overboeken Creditcard Adresboek Styleguide ING Bank Icons Afbeeldingen Touch ID Inge Apple Watch Buttons iphone x 667px Download in de APP STORE Download in de GOOGLE PLAY Home Producten Financieel fit Kleuren #FC5600 #FFFFFF #3A3A3A Typografie Rockwell Bold - 36pt Rockwell Regular - 20pt Rockwell Light - 14pt

33 Deliverable 3 Productpage

34 iphone x 667px

35

36 Particulier Home Personal Banking Producten Private Banking Zakelijk Zoeken binnen ING Financieel fit Eenmaal mobiel, altijd mobiel Als u de app gebruikt, wilt u nooit meer anders Download in de APP STORE Download in de GOOGLE PLAY iphone x 667px

37 Particulier Personal Banking Private Banking Zakelijk Zoeken binnen ING Functies Touch ID Met uw vingerafdruk inloggen en betalingen bevestigen in de Mobiel Bankieren App. Inge Ontmoet Inge. Ze helpt u met uw bankzaken in de Mobiel Bankieren App. Apple Watch Hoe laat het is én wat er nog op uw rekening staat ziet u in één oogopslag op de Apple Watch. Overboeken Gemakkelijk en snel geld overschrijven naar andere rekeningen. Creditcard Bekijk uw creditcard transacties gemakkelijk en snel. Adresboek Gemakkelijk transacties uitvoeren vanuit uw adresboek.

38 Particulier Personal Banking Private Banking Zakelijk Downloaden en installeren Het downloaden en installeren op uw smartphone of tablet is heel eenvoudig. In enkele stappen heeft u de app gedownload en bent u aangemeld. U kunt dan direct aan de slag met mobiel bankieren. iphone x 667px iphone x 667px iphone x 667px Zoeken binnen ING

39 Particulier Personal Banking Private Banking Zakelijk Zoeken binnen ING Altijd en overal uw geldzaken regelen Download de gratis Mobiel Bankieren App Download in de APP STORE Download in de GOOGLE PLAY iphone x 667px Over ING ING in English Veilig Bankieren Privacy en cookies Disclaimer

40 2C_ _van_ Ruth_Colin_ Opdracht_1_Compleet