Material design is een techniek om betekenisvolle webinterfaces aan te maken die zowel duidelijkheid verschaffen aan de gebruikers én die een webpagina beschouwen als een plaats waar verschillende elementen zich tot mekaar verhouden als materialen en als dusdanig een invloed hebben op mekaar. In die zin is het een uitbreiding van Responsive Design maar maakt het het ruimer gebruik van gestructureerde pagina-opmaken en diepte zichten.

Material design is de erfgenaam van de Metro-style van Microsoft

Wie herinnert zich nog de hoogdagen van de Metro style van Microsoft ? Het moet zo ergens in 2012 geweest zijn dat Microsoft een volledig nieuwe stijl ontwikkeld had voor het windows OS van de Windows Phone 7.  Hét belangrijkste kenmerk van Metro stijl was ongetwijfeld de tegelinterface die we naderhand nog hebben zien opduiken in windows7 en windows8.

Het antwoord van Google heeft maar twee jaar op zich laten wachten. In navolging van de release van de nieuwste versie van Android (Lollipup), werd een volledig nieuw systeem voor user-centric design voorgesteld op het I/O congres van 25 juni 2014.  En “material design” was geboren.

Een van de belangrijkste kenmerken van material design, is de erkenning van het feit dat (web)interfaces 3-dimensionele constructies zijn, samengesteld uit lagen met fysieke componenten. Dat met andere woorden, elke element op ene webpagina een hoogte, breedte maar ook een diepte heeft.  Vandaar dat bijvoorbeeld diktes en schaduwwerking zo belangrijk zijn in material design.

Daarnaast erkent Google duidelijk dat de inspiratie voor material design uit de fysieke wereld komt, of zelfs, volgens eigen zeggen, uit de print-wereld. Andere kenmerken zijn felle kleuren, het gebruik van grote beelden of afbeeldingen. Ook de te gebruiken fonts zijn al bepaald : bij voorkeur Roboto en Noto.

De eerste toepassingen van material design werd toegepast op Google+, Chrome en gmail. Voor meer informatie, verwijzen we graag door naar de Material Design pagina van Google.

material design 1 Material Design thema's in wordpress
material design

Material design voor wordpress

De praktijken voor goede design die door material design worden naar voren gebracht, hebben stilaan hun weg gevonden in wordpress en meer bepaald in thema’s die de principes proberen zo goed mogelijk toe te passen.

Een van de bekendste thema’s is Divi van Elegant Themes. Dit modern thema is inderdaad een goede toepassing van de bovenstaande principes waarbij elementen naast een breedte en hoogte ook vaak een diepte hebben. De elementen zijn kleurrijk en de graphics groot en dominant. Ook Zephyr is een thema dat gebruik maakt van dezelfde principes als Divi. Een eervolle vermelding kunnen we geven aan Material WP maar hier zien we de mogelijke toepassingen toch beperkter dan bij de twee voorgaande thema’s.

Dit artikel op Colorlib brengt een mooie lijst van wordpress thema’s die de principes van material willen toepassen.

Ook wordpress plugins zijn er bij de vleet : Icons,  componenten en layout,  admin thema en layouts van beelden.