Inleiding

- Een eigentijdse en gebruiksvriendelijke interface ontwerpen voor een responsieve bankapplicatie, waarbij een balans wordt gevonden tussen gebruiksgemak en een speelse esthetiek, waardoor deze zich onderscheidt van conventionele bankinterfaces.- Ontwerp en optimaliseer gebruikersinterfaces voor drie belangrijke schermen en zorg voor een probleemloze gebruikerservaring op desktop, tablet en mobiele apparaten, met een vleugje speelsheid om de betrokkenheid te vergroten.

#89B999
#9DCCD6
#DC7662
#EFC84A
#89B999
#F9AACC
#FFFFFF
#000000
PRIMAIRE KLEUR
SECUNDAIRE KLEUR
PRIMAIRE KLEUR

Brand story

De enige web- en merkdesigner met brede crossmediale ervaring in grafisch ontwerp, UI/UX, merkidentiteit, website design. Voor ondernemers, kleine tot middelgrote bedrijven en start-ups in Nederland die wil helpen een online aanwezigheid te creëren die hun unieke identiteit omarmt. Blom Design begrijpt dat ondernemers een sterke online aanwezigheid nodig hebben om te kunnen groeien. Daarom biedt Blom Design ontwerpen op maat en uitstekende service zodat haar klanten hun visie tot leven kunnen brengen en hun doelen kunnen bereiken

Typography
LOGO TYPEFACE : OHNO BLAZE
PRIMARY TYPEFACE : GRAFIK FONT FAMILY

Primary
Typeface

ABC

Graphic Font Family
Aa Bb Cc Dd Ee Ff Gg Hh Ll Mm Nn Oo
Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890

The fox jumps over the
lazy brown dog

The fox jumps over the
lazy brown dog

The fox jumps over the lazy brown dog
The fox jumps over the lazy brown dog
The fox jumps over the lazy brown dog

Secondary
Typeface

Abc

Elephant font family
Aa Bb Cc Dd Ee Ff Gg Hh Ll Mm Nn Oo
Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890

Missie & Doel

• Maak een frisse nieuwe interface voor een responsive bankapplicatie. Iets vertrouwds in gebruik, maar ook speelser dan gevestigde banken.

• Ontwerp gepolijste gebruikersinterfaces voor drie schermen, elk op een desktop, tablet en mobiel schermformaata
Taken: Moodboard, Kleurenpalet, Typografische schaal, Iconografie, Lay-out en raster, High fidelity mockups


Tools: Figma
Project duration: 3 weeks

Het doel van deze bank is om een revolutie teweeg te brengen in de bankervaring door een innovatieve, speelse en gebruiksvriendelijke interface te creëren die het conventionele overstijgt en bankieren leuk en toegankelijk maakt voor iedereen.

Typography
LOGO TYPEFACE : OHNO BLAZE
PRIMARY TYPEFACE : GRAFIK FONT FAMILY

Primary
Typeface

ABC

Graphic Font Family
Aa Bb Cc Dd Ee Ff Gg Hh Ll Mm Nn Oo
Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890

The fox jumps over the
lazy brown dog

The fox jumps over the
lazy brown dog

The fox jumps over the lazy brown dog
The fox jumps over the lazy brown dog
The fox jumps over the lazy brown dog

Secondary
Typeface

Abc

Elephant font family
Aa Bb Cc Dd Ee Ff Gg Hh Ll Mm Nn Oo
Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890
Typography
LOGO TYPEFACE : OHNO BLAZE
PRIMARY TYPEFACE : GRAFIK FONT FAMILY

Primary
Typeface

ABC

Graphic Font Family
Aa Bb Cc Dd Ee Ff Gg Hh Ll Mm Nn Oo
Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890

The fox jumps over the
lazy brown dog

The fox jumps over the
lazy brown dog

The fox jumps over the lazy brown dog
The fox jumps over the lazy brown dog
The fox jumps over the lazy brown dog

Secondary
Typeface

Abc

Elephant font family
Aa Bb Cc Dd Ee Ff Gg Hh Ll Mm Nn Oo
Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890
75% asset size
Social Media Proof
75%
25%

Brand story

De enige web- en merkdesigner met brede crossmediale ervaring in grafisch ontwerp, UI/UX, merkidentiteit, website design. Voor ondernemers, kleine tot middelgrote bedrijven en start-ups in Nederland die wil helpen een online aanwezigheid te creëren die hun unieke identiteit omarmt. Blom Design begrijpt dat ondernemers een sterke online aanwezigheid nodig hebben om te kunnen groeien. Daarom biedt Blom Design ontwerpen op maat en uitstekende service zodat haar klanten hun visie tot leven kunnen brengen en hun doelen kunnen bereiken

No items found.
No items found.
No items found.

Merkpersoonlijkheid: Maak een moodboard

Het begrijpen en overbrengen van de toon en waarden van het merk zijn essentieel voor dit project. Moodboards, gevuld met inspirerende referenties, helpen om de ontwerpbenadering effectief over te brengen zonder meteen originele ontwerpen te maken.

Ik begon met het onderzoeken van concurrenten en het verzamelen van inspiratie uit de markt, door screenshots en afbeeldingen op te slaan. Ik zocht naar voorbeelden die de kwaliteiten van het merk belichamen:

• Speels: Producten met een speels ontwerpelement.

• Overzichtelijk: Producten met witruimte en duidelijke typografie voor gebruiksvriendelijkheid.

• Betrouwbaar: Producten met een betrouwbare presentatie.

‍

Kleurenpalet

Tijdens het maken van het moodboard heb ik referenties verzameld over het effectieve gebruik van kleur en vorm door verschillende andere merken in hun producten. Deze inspiratie werd probleemloos geïntegreerd in het kleur- en vormgedeelte van het moodboard, vergezeld van aantekeningen over waarom deze referenties me zo boeiden. Bij het selecteren van kleuren heb ik bewust rekening gehouden met toegankelijkheid.

Wireframes: indeling en raster

Ik implementeerde basisrasters voor desktop-, tablet- en mobiele schermen met specifieke parameters:
• Elk scherm had een 8-punts raster.
• De desktop lay-out gebruikte een 12-koloms raster.
• Het tabletontwerp maakte gebruik van een 8-kolommenraster.
• Voor mobiel gebruikte ik een raster van 4 kolommen.


Rekening houdend met marges, opvulling, goten en kolomgroottes. Na verloop van tijd heb ik deze afmetingen verfijnd, maar het ontwerpproces werd aanzienlijk vergemakkelijkt doordat ik al over de basisrasters beschikte. Ik begon met het uitlijnen van elementen binnen de eerste wireframes.

‍

Iconografie

Ik verzamelde inspirerende iconen van websites en mobiele apps voor het moodboard. In de eerste wireframes verving ik placeholders door stijlvolle bankiconen, met aandacht voor consistentie in vorm en stijl. Ook overwoog ik of deze navigatiepictogrammen op zichzelf konden staan. Ik onderzocht het gebruik van pictogrammen voor onderscheid tussen rekeningtypen en betalingen, met variaties in stijl, grootte en detail.

‍

Desktop scherm

Voor desktopschermen heb ik een links navigatiepatroon gekozen om ruimte te besparen en een overzichtelijke weergave te bieden. Ik behield een minimalistische benadering en experimenteerde met oppervlakte- en boxcontrasten om de aandacht te trekken. Belangrijke informatie, zoals het totale saldo, werd benadrukt met een doordachte typeschaal en lettertypegewicht. Accentpictogrammen en labels werden gebruikt voor duidelijkheid, en grafieken werden strategisch toegepast voor snelle inzichten.

Tablet scherm / Mobiele scherm

Ik heb de taak op me genomen om desktoponderdelen aan te passen voor gebruik op tablets. Hierbij moest rekening worden gehouden met vakgroottes, pictogrammen en navigatieaanpassingen. Hoewel er wat herontwerp nodig was, zorgde het vasthouden aan het 8-punts systeem in het desktopontwerp voor een sneller proces.

Tijdens de overgang naar mobiel was het behoud van de merkpersoonlijkheid een primaire zorg. Ik concentreerde me op het vertalen van vormen, effecten en hiërarchie die op desktop en tablet waren vastgelegd naar kleinere schermen. De keuze voor een app-navigatiebalk was een bewuste keuze, die de toegankelijkheid van de belangrijkste navigatiepunten voor de gebruiker verbeterde. Ik zorgde voor consistentie met het boxsysteem door zorgvuldig de grootte van lettertypen en pictogrammen aan te passen om de toegankelijkheid en leesbaarheid te verbeteren.

Klaar om een project te starten?

Laten we dit doen!