Material design: wat is het en waar komt het vandaan?

1 maart 2016, 10:30

Voor een lange tijd was skeuomorfisme de meest voorkomende designtrend in webinterfaces. Daarna zagen we flat design voorbij komen. Nu blijkt de nieuwe designtaal van Google, namelijk material design, de trend te zijn voor de opkomende jaren. Maar wat is de gedachtegang eigenlijk achter deze nieuwe ‘designtaal’?

Het is alweer een tijd geleden sinds Google haar material design taal heeft geïntroduceerd. Ontwerpers wereldwijd hebben deze nieuwe designtaal, die een focus heeft op het verenigen en unificeren van designprincipes en interfaces, met lof ontvangen.

De visuele elementen van Google’s material design zien er prachtig uit en de paradigmatische onderbouwing van Google dat interfaces in material design driedimensionale constructies zijn, opgebouwd uit lagen van fysieke onderdelen, klinkt erg cool. De dure woorden die Google gebruikt, heeft er echter in mijn ervaring voor gezorgd dat vele ontwerpers nog niet helemaal begrijpen wat material design precies is en hoe ontwerpers deze kunnen toepassen in het ontwerpproces.

Material design draait namelijk niet om de manier waarop kleuren zouden moeten worden gebruikt of de manier waarop objecten zouden moeten bewegen. Het draait om de manier waarop alle material design-elementen gecombineerd zouden moeten worden om tot een doelgerichte merkbeleving te komen.

Van skeuomorfisme naar flat design

Tot 2013 was skeuomorfisme de designstandaard op het gebied van webdesign en mobile U.I. design. Skeuomorfisme heeft als uitgangspunt de fysieke wereld zo realistisch mogelijk te imiteren op het scherm. Denk hierbij aan knopjes met een glow eroverheen, (menu)balken met een schaduw eronder om diepte te creëren en texturen van ‘echt’ materiaal.

Met de komst van iOS7 veranderde alles. Apple was een van de eerste partijen die op grote schaal overging naar flat design, waarin levensechte designelementen werden vervangen door gedigitaliseerde, platte designelementen. Door het massale gebruik van smartphones begrepen mensen digitale interfaces beter, waardoor het niet meer nodig bleek te zijn om levensechte designelementen te gebruiken, aldus Jony Ive, hoofd van Apple’s designafdeling.

“We understood that people had already become comfortable with touching glass, they didn’t need physical buttons, they understood the benefits”

-Jony Ive

Het komt er dus op neer dat flat design gestript is van zowel alle driedimensionale designelementen als alle designelementen met betrekking tot realisme.

De evolutie van flat design: material design

In 2014 introduceerde Google een nieuwe designtaal, namelijk material design. Material design draait in essentie om het combineren van klassieke design principes met technologische innovaties:

“…a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science”

Google

Het doel van material design is het creëren van een uniform designmodel dat kan worden toegepast op verschillende platformen en apparaten. Met andere woorden is material design een huisstijl van een user interface, waaraan zowel ontwerpers als developers zich moeten houden bij het ontwikkelen van verschillende platformen die bij elkaar horen. Flat design kent dit onderliggende principe niet en gaat voornamelijk uit van grafische elementen (het zo plat mogelijk weergeven van objecten).

Grafische principes van Material Design

Flat design heeft vele visuele overeenkomsten met material design. Designelementen zien er namelijk nog steeds plat uit. Google heeft dit type design echter verder ontwikkeld door nogmaals na te denken of de grote stap van skeuomorfisme naat flat design wel een juiste stap was. Werkt flat design eigenlijk wel zo intuïtief als skeuomorfisme? En hoe kijken gebruikers die niet bekend zijn met web- en mobiele interfaces tegen flat design? Google’s antwoord op deze vragen is diepte en fysica in material design.

De grafische innovaties van material design ten opzichte van flat design bestaan naar mijn mening uit:

  • De herintroductie van delen van skeuomorfisme: de overstap van skeuomorfisme naar flat design bleek een te grote stap te zijn, gezien de te simplistische elementen die de usability uiteindelijk moeilijker hebben gemaakt. Het combineren van skeuomorfisme en flat design, als een lichte schaduw onder een platte knop, zouden ervoor zorgen dat onderdelen in een interface beter kunnen worden onderscheiden van elkaar.
  • De introductie van (design)fysica: een van de principes van material design is het nabootsen van de manier waarop de wereld waarin wij leven werkt op een simplistische manier. Dit kan worden gedaan door realisme slechts te gebruiken als een hulpmiddel om onze hersenen bekend te maken met de manier waarop een interface werkt. Google heeft dit gedaan door de Z-as toe te voegen. Flat design richt zich op het zo plat mogelijk weergeven van objecten, terwijl Google hier verandering in brengt door diepte te creëren door middel van onder andere intuïtieve animaties met diepte. Denk hierbij aan objecten die naar de voorgrond lijken te komen wanneer deze worden gesleept terwijl de rest vervaagt.

In mijn beleving zijn material design, flat design, skeuomorfisme niets meer dan trends. Wel belangrijke en cruciale trends, gezien ze een antwoord zijn op de manier waarop wij interfaces gebruiken in een bepaalde periode. Al met al is material design een combinatie van zowel een (enigszins) filosofisch principe, namelijk het creëren van een uniform U.I.-model, en de bovenstaande praktische grafische principes.

Wat is jullie kijk op material design? En in hoeverre denken jullie dat het voordelen op het gebied van U.I. heeft ten opzichte van flat design? Laat het hieronder weten!

Recources: Google Material Design guide

Samer Hadi
Entrepreneur bij Samer Enterprises

Samer Hadi, online strateeg en ex-freelancer op het gebied van online marketing en design (webdesign, grafisch design, UX- & UI design). Heeft veel organisaties geholpen met het trekken van onwijs veel converterende traffic & er gelikt uit laten zien. Is momenteel eigenaar van LogoLove, een logo ontwerp studio. Let's connect!

Categorie

7 Reacties

    Freek

    Het is geklets dat gebruikers buttons zonder schaduwrandje niet zouden begrijpen. De grote winst van Material Design is uniformiteit.


    1 maart 2016 om 15:45
    samerhadi

    @Freek Mee eens, Material Design draait uiteindelijk puur om uniformiteit. Grafische principes komen daar ook bij kijken.


    1 maart 2016 om 15:48
    Rogier van Roon

    Material Design heeft een hoop goede punten, maar laat op sommige vlakken ook wel weer steken vallen. Zo heeft een zeer eenduidige uitstraling die niet iedereen (bijvoorbeeld Apple liefhebbers) bevalt. Persoonlijk speel ik graag leentjebuur uit verschillende UX principes, door de beste elementen te pakken uit wat ieder principe sterk maakt. Gevolg: een unieke eigen smoel qua UX design.


    1 maart 2016 om 19:29
    Davey

    “Met de komst van iOS7 veranderde alles. Apple was een van de eerste partijen die op grote schaal overging naar flat design”

    Apple was naar mijn idee een van de laatste op de smartphonemarkt. Android, en met name ook Windows Mobile/Phone gebruikte al veel eerder flatdesign.


    1 maart 2016 om 20:03
    samerhadi

    @Davey je hebt volkomen gelijk! Wat ik eigenlijk wilde zeggen was dat de overgang van Apple een groot invloed had op de (online) overgang van skeuomorfisme naar flat.


    1 maart 2016 om 22:30
    samerhadi

    @Rogier denk dat dat uiteindelijk ook het beste is. De bovengenoemde ontwikkelingen zijn echter wel, naar mijn mening, degelijk gebaseerd op de manier waarop wij op dit moment omgaan met interfaces.


    1 maart 2016 om 22:32
    Jules

    Mijn mening, ik heb flat nooit wat gevonden. MD is een verbetering. Tegenwoordig is er zo veel mogelijk en dan zouden we alles juist recht, plat en simplistich designen. Zonde.


    12 februari 2017 om 22:47

Marketingfacts. Elke dag vers. Mis niks!