Blog Creative Natives
07

Google Material Design en Merkidentiteit

posted on

Google Material Design biedt een systeem aan om functionele en elegante software te ontwerpen. De vraag die in deze blog centraal staat is hoe je jouw merk in dit Framework past. Hieronder volgt een stappenplan om merkvast te blijven met Google Material Design.

Material Design geeft uitgebreide richtlijnen voor het ontwerpen van effectieve en elegante UI’s – met een sterke nadruk op beweging, dimensies, kleur en grafische hiërarchie maar met ruimte voor verschillende niveaus van betrokkenheid. Zo hoef je niet alle niveaus van het Material Design systeem te gebruiken voor jouw merk. Een maatwerkfont, een uniek kleurenschema en onderscheidende teksten zijn voorbeelden van stijlelementen die een uniek onderscheid maken en ter versterking van jouw product kunnen worden meegenomen en ondersteund door het Material Design Framework.

MAAK JE MERK

Je logo kan je allerbelangrijkste grafische besluit zijn, wanneer je de identiteit van je merk ontwikkeld. Het is belangrijk om dit logo goed te gebruiken. Het moet je UI niet domineren of je interactiepatronen verstoren. Als kenmerk van je merk kun je je logo het beste gebruiken bij de aanvang van een reeks, bij splash screens en kort in app bars. Een logo is een hoog niveau aanrakingspunt en hoort ook zo te worden gebruikt in de design hiërarchie.

Voorbeelden

  • SPLASHSCREEN: Door het logo te gebruiken in je splash screen creëer je een visuele ingang voor je app en zet je logo de toon voor de rest van de ervaring.
  • ZIJ-NAVIGATIE: Wanneer je het logo inbed in de zij-navigatie, wordt de branding in de hoofd navigatie geïntegreerd zonder de productervaring te verstoren.
  • VERSCHILLENDE VERSIES VAN EEN LOGO: Het is handig om verschillende versies van je logo te ontwerpen voor print, web en app. Bij een app kan het logo bijvoorbeeld groot op je splashscreen staan om vervolgens veel minder prominent aanwezig te zijn wanneer de gebruiker in interactie is met de inhoud.

UI TIPS MERKIDENTITEIT

  1. Logo’s moeten worden ingebed in hoog-niveau UI elementen.
  2. Logo’s mogen de gebruikersinteractie niet verstoren. Een logo moet bv nooit op een FAB (Floating Action Button) staan.
  3. Logo’s of grafische elementen als extensies van het merk zijn geweldig voor korte elementen in je UI.
  4. Logo’s kunnen van vorm veranderen om meer aan te sluiten bij de ervaring van compleet logo tot een bug.

HET GEBRUIK VAN FONTS

Roboto is het default Android systeemfont, maar het is zeker niet het enige font dat goed werkt met Material Design. Het beste font, is een font dat iets zegt over je merk. Typografie versterkt het karakter van je merk. Let wel: met een mooi font dat je slordig gebruikt, zal dit niet lukken. De Material Design Gids geeft advies over hiërarchie, baseline grids, opacity en schaal.

UI TIPS FONTS

  1. Je kunt ieder font gebruiken binnen het Material Design Systeem.
  2. Ontwikkel een rationeel systeem voor je merk en blijf daarbij.
  3. Speel met schaal en hiërarchie om te kijken wat het beste bij jouw merk past.
  4. Volg de Material Design richtlijnen voor baseline grids.

DE JUISTE KLEUREN

Kleur is een van de meest belangrijke onderdelen van de merkidentiteit. Indien je een sterk kleurenschema hebt ontwikkeld voor je merk, blijf daar dan bij. Het is erg desoriënterend voor een gebruiker wanneer deze het gevoel krijgt dat hij ineens bij een ander product terecht is gekomen binnen de UI vanwege ander kleurgebruik. Material Design geeft een eenvoudige, slimme benadering om harmonieuze kleurenschema’s op te bouwen, los van of je dit palet voor je eigen kleurenpalet gebruikt. De sleutel is de manier waarop kleur wordt toegepast in de UI.

Het Material Design Palet begint met de primaire 500’s en schaalt van licht naar donker waarbij een aantal nauwkeurig gekozen kleuren zijn uitgezocht. De 500’s kun je gebruiken voor het beschrijven van het dominante thema van je merk en zijn geweldig voor grote gebieden met kleur, zoals achtergronden en statusbars. 

Vanaf daar kun je een aanvullende kleur kiezen, zoals bv 700 voor systeembars of 300 voor secundaire informatie. Accentkleuren zijn feller en hebben meer saturatie. Zij moedigen de gebruiker aan tot interactie, omdat zij van het scherm af knallen en in contrast zijn met de rest van het palet. Zij zijn perfect voor:

  • Floating Action Buttons (FAB’s)
  • Knoppen
  • Switches
  • Sliders

Je kunt dit systeem eenvoudig gebruiken voor je eigen merkkleuren. Je schaalt elementen in de UI donkerder of lichter gebaseerd op de mate van importantie en gebruik. Kies daarbij een mooie contrasterende kleur voor primaire call-to-action elementen in de UI zoals FAB’s. Voor de inhoudelijke merken met veel beelden en merken die kleur als herkenning gebruiken is het het beste om een neutraal kleurenthema voor je UI te gebruiken.

Voorbeelden

  • ZWART WIT: Je kunt zwart en wit naast elkaar gebruiken om hiërarchie en contrast te maken. De kleur binnen het product komt van de inhoud. 
  • DONKERGRIJS: Je kunt als hoofd canvaskleur en primaire kleur bv donkergrijs gebruiken. Dit creëert een contrast met de fellere meer kleurrijke aanvullende kleuren die door de UI worden gebruikt in de vorm van grafische handelingen en UI elementen.
  • 2 ACCENTKLEUREN: Je kunt ook 2 accentkleuren gebruiken. Deze kleuren worden verstandig gebruikt in een mooi gebalanceerd contrast met een witte canvas.

UI TIPS KLEURGEBRUIK

  1. Kies een palet en blijf daarbij. 
  2. Maak een hiërarchie door gebruik van contrast om de attentie te richten op belangrijke knoppen en informatie.
  3. Wat je kleurenschema ook is, bekijk Material Design ter inspiratie over hoe je je kleurenthema het beste kan gebruiken.

BEELDEN EN BEELDSCHERMEN

Of het nu foto’s, illustraties of grafische handelingen zijn, hoe je deze beelden toepast (of juist niet) in je merk maakt een verschil.
Indien je de kans hebt, ontwikkel dan een te herkennen beeldtaal binnen je product. Beelden, grafische elementen en iconen horen bij elkaar aan te sluiten. Of zij nu stilistisch het zelfde zijn of juist niet.

Bijvoorbeeld: je hebt dikke, volle kleuren voor je grafische elementen en iconen door je UI. Sluit je beelden dan hierop aan. Denk na over de vraag hoe de omliggende design elementen zoals typografie en grid je kunnen helpen een visuele identiteit te creëren. Wanneer het gaat over beeld, dan is het het belangrijkst om een samenhangende stijl te kiezen die op een verstandige manier wordt gebruikt binnen de UI.

Voorbeelden:

  • DIAGONALE LIJNEN: gebruikt grafische sleutel elementen op een consistente manier, zoals bijvoorbeeld diagonale lijnen om door de gehele gebruikerservaring een gevoel van continuïteit en beweging te creëren.
  • ORTHOGRAFISCHE FOTO’S: behoudt een visuele consistentie door het gebruik van beelden in dezelfde orthografische (3D=2D) stijl op een wit canvas. Wanneer foto’s het allerbelangrijkste aspect van je app zijn, is het o.a. belangrijk om een grid te kiezen dat grote tiles toestaat en voor het grootste gedeelte gebruikt wordt voor beelden.

UI TIPS BEELDEN

  1. Denk na over het doel van je beelden binnen je product. Zijn je beelden informatief, decoratief of ter inspiratie. Indien dit zo is, maak dan een hiërarchie en een systeem waarbij deze kwaliteiten worden benadrukt.
  2. Denk na over hoe je beelden samenwerken met je product. Zijn je beelden divers of in stijl consistent en zorg ervoor dat je foto’s, iconen en grafische elementen bij elkaar passen.

HEF JE STEM

Het geluid van je merk hoort overal in je productervaring terug te komen. Van algemene copy tot notificaties en foutmeldingen. Is je product heel persoonlijk en voor een jonge doelgroep, maak dan geen notificaties aan die klinken alsof ze van een robot afkomstig zijn.
Ook wil je niet dat je product vol zit met jargon of slang die eenvoudige gebruikersinteracties onduidelijk maken.
Neem je voordeel van kansen om je gebruiker door een product heen te leiden door te werken met kleine gebaren en interactiepatronen in plaats van een handgeschreven uitleg.
Denk eraan dat je een persona ontwikkeld met je merk. Dit moet te zien zijn in de taal die je gebruikt, maar het moet de functionaliteit niet in de weg komen te staan.

UI TIPS TEKSTEN

  1. Gebruik woorden en termen die specifiek zijn voor jouw merk en doelgroep om de betrokkenheid met je doelgroep te versterken en affiniteit met je gebruiker te maken.
  2. Laat zien, vertel niet. Hoe meer je de gebruiker door het product kan sturen met gebaren en interactiepatronen, hoe beter.
  3. Maak niet teveel gebruik van jargon of trendwoorden die je gebruiker kunnen verwarren en het interactiepatroon kunnen verbreken.

KIES VOOR DIEPTE EN BEWEEG MET BETEKENIS

Material Design is voorstander van het bekijken van de UI in 3 dimensies, omdat dit een duidelijk systeem geeft voor het rationaliseren van informatie op het scherm. Tevens helpt dit de gebruiker om op een intuïtieve manier de interactie met het product te begrijpen. Ontwerpen voor een x, y, z ruimte kan in eerste instantie intimiderend zijn, maar door al heel vroeg in het proces na te denken over hoe informatie beweegt, krijg je ruimte om unieke interactiepatronen uit te werken en de gebruikersvriendelijkheid te optimaliseren.

Interactiepatronen moet je ook zien als een sterk onderdeel van je merk identiteit. Gebruikers leren om beweging en gebaren te associëren met je merk. Zij worden een onlosmakelijke ervaring met je product: bv het swipen naar rechts voor ja en naar links voor nee.

Sleutelcomponenten in de UI helpen een landschap te ontwikkelen voor je product en bepalen de manier waarop je gebruiker door je product beweegt. De FAB’s leggen de nadruk op de belangrijkste call-to-action, of dit nu het schrijven van een e-mail is of het aanmelden voor een evenement via een kalender. Het is belangrijk om na te denken over deze gebruikerservaring wanneer zij op de knop klikken. Hoe kan beweging de gebruiker verder helpen een actie te voltooien? Hoe kan je bevestigen dat de informatie is ontvangen? Met ripples, buttons die zweven op het scherm en vragen om aangeraakt te worden, of app bars die veranderen wanneer je scrollt. Dit zijn een paar oplossingen die Google Material heeft ontwikkeld. Je kunt ze zeker meenemen in je UI!

UI TIPS BEWEGING MET BETEKENIS

  1. Gebruik sterke interactie patronen om je overkoepelende merkervaring te definiëren.
  2. Maak het meest gebruikte interactie patroon het meest toegankelijk.

Material Design legt een fundering voor het maken van goed ontworpen en functionele producten. Maar denk groter en denk na over de vraag hoe jouw merk in dit Framework past. Het toepassen van jouw product haar individuele merkidentiteit naar deze richtlijnen – of dit nu door kleur, iconografie, beelden, typografie, tekst of beweging is- brengt niet alleen uniciteit voor je product maar zorgt tevens voor uitbreiding van de overkoepelende taal van Material Design.

Bron: design.google.com

Heeft u vragen over de integratie van het Material Design Framework met uw merk. Neem dan contact op met Letty Verhoeve voor een vrijblijvend kennismakingsgesprek.

Letty Verhoeve

| Categories: UX Design | Tags: | View Count: (1413) | Return

Post a Comment

Aanmelden Nieuwsbrief
Aanmelden
Zoeken
Categorieën