Ontwerptrends: Flat Design 2.0
Het platte ontwerp heeft de designwereld de laatste jaren stormenderhand veroverd, maar geen enkele ontwerpbeweging blijft 100% zuiver voor zijn roots en idealen. Dat is precies wat er gebeurt met een plat ontwerp: het heeft geleidelijk subtiele, maar betekenisvolle wijzigingen in de oorspronkelijke iteratie gezien.
Deze veranderingen waren voldoende om kijkers en experts de nieuwe iteratie als Flat Design 2.0 te laten kopiëren. 2.0 is erg interessant omdat het de juiste balans vindt tussen precies genoeg wijzigingen om de gebruikerservaring te veranderen en trouw te blijven aan de oorspronkelijke principes.
De evolutie van Flat naar 2.0 was echter onvermijdelijk: naarmate ontwerpers comfortabeler werden met Flat, konden ze zien dat, vanwege al zijn populariteit, sommige problemen werden niet goed aangepakt . En nu hebben we 2.0 om enkele van deze tekortkomingen aan te pakken.
Herkomst van plat ontwerp
Kijk naar platte ontwerpen als een soort opstand tegen de toen populaire ontwerpstijl van skeuomorphism . Het vertrouwde op 3D-effecten om de real-life eigenschappen van 3D-objecten te kopiëren als een manier om bekendheid te gebruiken om de gebruikerservaring te helpen. In de initiële iteraties van de Kindle Fire van Amazon was er bijvoorbeeld een 3D-boekenplank op de achtergrond om het doel van de tablet voor lezen te versterken.
Toen Apple, een grote voorstander van het skeuomorfische ontwerp, in 2012 besloot om het skeuomorfisme te staken, kondigde het een volledige swing naar flat aan, die de laatste jaren erg populair is gebleven. De nadruk op minimalisme heeft er ook toe bijgedragen om het naar zijn huidige alomtegenwoordigheid te drijven.
Flat kenmerkt zich door de afwezigheid van:
- verhoogde elementen die voor gebruikers betekenen dat ze kunnen worden aangeklikt;
- holle of verzonken elementen die voor gebruikers betekenen dat ze kunnen worden ingevuld (denk aan zoekvelden en andere invoervelden).
Overgang naar 2.0
Ondanks het succes van flat, begonnen sommige ontwerpers legitieme fouten op te merken die niet werden aangepakt in de ontwerpgemeenschap. Terwijl plat enorm veel stoom kreeg vanwege het welkome minimalisme, ging het een beetje te ver in de sobere richting. De kenmerken van sommige 3D-effecten bleken buitensporig en hadden een negatieve invloed op de gebruikerservaring.
Het was dus onvermijdelijk dat er nog een verandering zou plaatsvinden. Dat is waar we vandaag zijn met het aanbreken van plat design 2.0.
Problemen met Flat Design
Alle bruikbaarheidsproblemen van flat kunnen worden samengevat in de volgende verklaring: Flat handelt doorgaans in de behoeften van een gebruiker voor hippe esthetiek.
Met andere woorden, ontwerpers die ontwerpen dat een interface 'plat' is, zullen meer de nadruk leggen op het minimaal houden van dingen, niet-3D en levendig / vet in plaats van de gebruikerservaring eerst te plaatsen. Dat is meestal waar alle slechte dingen in de ontwerpwereld beginnen en daarom is flat geëvolueerd naar 2.0.
Hier zijn de algemene bruikbaarheidsproblemen met flat:
- afwezigheid van alle belangrijke betekenaars (verlopen, schaduwen, onderstrepingen, enz.);
- afwezigheid van bekende patronen (blauw, onderstreepte tekst voor links, enz.);
- ontbreken van contextuele indicaties (plaatsing van CTA, bruikbare kopie, enz.).
Misschien wel het meest beruchte voorbeeld in de recente herinnering aan alle problemen met de bruikbaarheid van flat was Microsoft's release van Windows 8, met zijn zogeheten Metro UI. Dat ontwerp was de belichaming van plat omdat alles extreem was.
De gebruikerservaring was zo slecht omdat een volledig plat ontwerp betekent dat gebruikers niet de nodige aanwijzingen krijgen om hen te vertellen waarop kan worden geklikt en wat niet op een interface kan staan. Dientengevolge zijn gebruikers natuurlijk gedwongen om extra tijd te besteden aan het uitzoeken van dit door experimenten of, erger nog, acties uit fout die ze niet wilden in de eerste plaats!
Zoals je kunt zien, is het Windows 8-scherm zo plat dat het mensen onmogelijk is om te vertellen wat ze moeten klikken en wat ze niet moeten klikken. Zelfs als gebruikers al bekend zijn met elementaire sitenavigatie, betekent dit niet dat het een goed idee is om alle betekenaars te verwijderen (aanwijzingen die gebruikers vertellen dat ze kunnen communiceren met pagina-elementen) en hints van affordances (aanwijzingen over hoe gebruikers kunnen communiceren met pagina-elementen).
Geweldige voorbeelden van Flat Design 2.0
2.0 is een subtiele verandering of verbetering ten opzichte van een flat, dus er kan meer concentratie nodig zijn om true 2.0 te vinden in websites en interfaces. Daarom gaan we u begeleiden bij enkele actuele, grote voorbeelden van 2.0 die al volledig operationeel zijn.
De Dropbox-gids
De gids van Dropbox ziet er in eerste instantie misschien heel plat uit, maar als je beter kijkt, zie je 3D-suggesties die duidelijk aan gebruikers communiceren dat sommige elementen boven anderen worden geplaatst. Dit is vooral zichtbaar in afbeeldingen van het hoofd van de jongen (aan de linkerkant) en de schroevendraaiers (aan de rechterkant). Beide afbeeldingen hebben sterke, hoewel subtiele, zwarte randen, die diepte en de indruk overbrengen dat ze boven op de achtergrond zitten in plaats van erbij te mengen.
Tolia Ice Cream
Tolia's site zit vol met subtiele, verhoogde effecten die de uitgesproken indruk van 3D geven, terwijl het algehele ontwerp nog steeds vlak en minimaal is. De verhoogde indruk is aanwezig in de kop, de subkop en de beschrijving (dat wil zeggen de paginakexemplaar). Het is ook aanwezig in de call-to-action-knop en de CTA-kopie binnenin de knop. Je kunt het subtiele gebruik van fijne schaduwen langs de randen van deze elementen bedanken voor het geven van deze verhoogde indruk.
Google Santa Tracker
Niet verwonderlijk, Google is op de 2.0-bandwagon, en zijn Santa Tracker pagina laat zien hoe je 2.0 op een leuke en handige manier kunt integreren. De subtiliteiten van 2.0 zijn overal aanwezig, van de hellingen en schaduwen op de verschillende gebouwen en pop-up bubbels (wanneer gebruikers op een gebouw zweven) tot de 3D-indruk van de kop boven aan de pagina.
Publicis Groupe
Publicis Groupe's 90-jarig jubileumpagina heeft 2.0 invloed op een voor de hand liggende manier. Als u aan de linkerkant van de pagina kijkt, ziet u de combinatie van schaduwen en hellingen naar beneden komen en naar buiten straalt vanuit de bleke cirkel en op het blauwe gedeelte eronder. Het grimmige minimalisme geeft ook aan dat de esthetiek van het ontwerp nog steeds sterk geworteld is in puur vlak.
Jumeirah
Deze site want een luxehotel in de Verenigde Arabische Emiraten wordt meestal gedomineerd door gigantische video op de achtergrond, maar laat je niet afleiden van de subtiliteit van zijn 2.0-bijdrage. De kop 'Jumeirah Inside' bevat oh zo subtiele arceringen die met succes de 3D-weergave geven en toch de algehele, platte look behouden.
Een evolutie door de vraag
In de ontwerpwereld, dingen meestal veranderen omdat er een vraag naar is. Iemand zal opmerken dat er iets ontbreekt en een manier vinden om dingen te verbeteren, of iemand anders zal een concept aannemen en het naar een ander niveau brengen dat logisch voortbouwt op een bepaald concept.
Voor zover 2.0 gaat, is het zeker een combinatie van beide, omdat de bruikbaarheidstekorten van flat worden gefixeerd door het oorspronkelijke concept uit te breiden op een manier die nog steeds de principes van minimalisme respecteert die door flat worden gedefinieerd.