Plat ontwerp: waarom is ontwerp plat geworden? De aarde is nog steeds plat: vlakke stijl in ontwerp Plat ontwerp van iconen, knoppen, illustraties.

In dit artikel vertel ik je over plat design. Je hebt hier waarschijnlijk al iets over gehoord, aangezien plat de afgelopen jaren een van de toonaangevende trends op internet is geworden.

Vandaag bekijken we wat plat ontwerp is, hoe het tot stand is gekomen en wat je nodig hebt om een ​​strak, helder en responsief ontwerp te creëren.

Goede voorbeelden van plat ontwerp vindt u op http://market.envato.com/. Er zijn talloze lay-outs, pictogrammen en sjablonen die u een duidelijk inzicht geven in hoe modern design eruit ziet .

1. Wat is plat ontwerp?

Plat ontwerp is een moderne stijl van gebruikersinterface en grafisch ontwerp, gekenmerkt door minimalisme. Plat ontwerp wordt gekenmerkt door het gebruik van een minimum aan elementen en de afwezigheid van verschillende effecten van textuur, schaduw en licht, bijvoorbeeld: gemengde kleuren, verlopen, highlights, enzovoort.

Flat is tegengesteld aan skeuomorfisme( Skeuomorfisme is een ontwerpprincipe waarbij het ene product het uiterlijk krijgt van een ander product, d.w.z. wanneer verschillende interface-elementen worden gekopieerd van echte objecten - ca. , evenals een rijk ontwerp Het is echter de moeite waard om te zeggen dat een plat ontwerp helemaal niet zo eenvoudig is als het op het eerste gezicht lijkt. Het bevat enkele kenmerken van skeuomorfisme, maar we zullen hier later over praten.

Over het algemeen helpt flat de gebruiker zich te concentreren op de inhoud, zonder te worden afgeleid door beelden. Het platte ontwerp benadrukt de eenvoud van de elementen, terwijl de interface tegelijkertijd responsiever, prettiger en gebruiksvriendelijker wordt.

2. Een beetje geschiedenis

Zoals u weet bestond plat ontwerp al lang voordat het een wereldwijde trend op internet werd. Plat ontwerp was in de jaren 80 behoorlijk populair vanwege het feit dat de technologie op dat moment nog niet voldoende ontwikkeld was om complexe effecten, texturen en schaduwen te ondersteunen. Maar zelfs toen streefde het ontwerp naar skeuphomorfisme, in een poging de interface-elementen zo realistisch mogelijk te maken.

Plat ontwerp, in de vorm waarin we het nu zien, begon aan populariteit te winnen nadat Microsoft producten in de zogenaamde metrostijl begon te produceren. Metro is een UI-ontwerp van Microsoft dat opvalt door zijn stijl en eenvoud.

In 2010 Microsoft heeft Windows Phone 7 uitgebracht, dat een plat ontwerp gebruikte met scherpe randen en eenvoudige grafische afbeeldingen, overgenomen van een van zijn eerdere producten. Microsoft (Zune). Later bracht Microsoft, geïnspireerd door het succes, het Windows 8-besturingssysteem uit, gebaseerd op dezelfde platte Metro-stijl.

Het platte ontwerp bereikte immers zijn hoogtepunt in populariteit in 2013, toen Apple het uitbracht iOS 7, met een volledig nieuw ontwerp met volledig opnieuw ontworpen elementen van de gebruikersinterface, inclusief pictogrammen en lettertypen. Apple heeft gecreëerd visuele principes van gebruikersinterface en pictogramontwerp .

Kort daarna begon Google de platte stijl ook te gebruiken in zijn applicaties en webpagina's, onder de noemer Materiaal ontwerp. Google heeft zelfs een hele sectie gewijd aan deze stijl, inclusief een beschrijving van de doelen van webdesign, de principes ervan en instructies voor het maken van verschillende ontwerpobjecten: pictogrammen, lay-outs, enzovoort.

Sindsdien is plat een belangrijke trend geworden in webdesign, waardoor websites, applicaties en interface-elementen elegant, strak en stijlvol worden gemaakt.

Er zijn dus drie mondiale voorbeelden van plat ontwerp van bedrijven zonder welke het moeilijk is om de moderne wereld van de technologie voor te stellen:

Metro-ontwerp van Microsoft

Apple iOS 7-ontwerp

Materiaalontwerp van Google

3. Vergeet niet om schoon te zijn

Plat ontwerp wordt blijkbaar ‘plat’ genoemd vanwege het ontbreken van driedimensionale elementen en realistische effecten zoals verlopen, texturen, hooglichten, halftonen en schaduwen. Vergeet niet dat platte stijl een tweedimensionale (platte) manier is om objecten weer te geven.

Bovendien worden objecten in een plat ontwerp op een zeer vereenvoudigde en gestileerde manier weergegeven.

En soms wordt zelfs alleen het silhouet of de contouren van het object gebruikt, d.w.z. net genoeg om het object herkenbaar te maken, maar het niet te overbelasten met kleine details.

Minimalisme is tegenwoordig een wereldwijde trend geworden: eenvoud van vormen en het gebruik van scherpe randen zorgen voor een strak en aangenaam ontwerp. Eenvoudige formulieren zijn duidelijker en gemakkelijker te begrijpen. Hierdoor blijft het ontwerp minimalistisch en strak zonder dat het een drukke, rommelige uitstraling krijgt.

4. Breng het tot in de perfectie

Weet dat als het gaat om het maken van platte pictogrammen en UI-elementen, je ze er helder, netjes en pixel-perfect uit moet laten zien, dat wil zeggen: zoveel mogelijk. Bovendien geldt dit voor zowel raster- als vectorafbeeldingen.

Adobe Photoshop is hier duidelijk: het werkt met rasterafbeeldingen, die zijn gebaseerd op pixels.

Wat het Adobe Illustrator-programma betreft, het gebruikt vectorafbeeldingen die bestaan ​​uit curven en lijnen, vectoren genoemd, die worden gespecificeerd door wiskundige formules.

Ooit was Adobe Illustrator geen bijzonder handig programma voor het maken van pixel-perfecte afbeeldingen. Het goede nieuws is dat de nieuwste versies van Illustrator een geweldig hulpmiddel zijn geworden voor het maken van goede afbeeldingen.

Ik moet zeggen dat vectorafbeeldingen meestal het werken met eenvoudige, platte vormen, pure kleuren en rasters inhouden. Adobe Illustrator is zeer flexibel in zijn instellingen en stelt u in staat het raster aan uw behoeften aan te passen, objecten uit te lijnen en verschillende soorten uitlijning te gebruiken. Dit maakt het eenvoudiger om het perfecte ontwerp te creëren dat er op elk scherm strak en stijlvol uitziet. Als je wilt leren hoe je perfecte graphics kunt maken, lees dan het artikel: Hoe u pixel-perfecte illustraties kunt maken met Adobe Illustrator .

5. Kleur

Een van de meest specifieke kenmerken van plat ontwerp, naast schaduwen, is het kleurgebruik. De meeste kleuren die Flat Design in zijn elementen gebruikt, bestaan ​​uit slechts een paar basiskleuren.

Kleur in plat ontwerp is helder, rijk en rijk.Het vlakke kleurenschema is niet beperkt tot een paar speciale kleuren. Het bevat veel tinten, en hun keuze hangt alleen af ​​van wat je afbeeldt, of het nu iconen van snoep zijn of objecten in retrostijl in een verfijnd retropalet.

Stel dat u een UI-ontwerper bent met een goed begrip van kleurenpaletten, en dat u experimenteert met het kleurenpaneel in Photoshop en Illustartor, waarbij u kleuren naar eigen inzicht mengt. Dit proces is echter behoorlijk complex en vereist een goede intuïtie, ervaring en vaardigheden. Hier vindt u enkele hulpmiddelen die u kunnen helpen uw eigen kleurenpalet te creëren.

Sommige zijn geschikt voor alle soorten ontwerpen en illustraties, niet alleen voor platte ontwerpen. Bijvoorbeeld Adobe Color CC, beter bekend als Cooler. Tegenwoordig is er toegang toe, zowel via de website als rechtstreeks via Adobe-producten. Cooler is een zeer flexibele tool waarmee u uw eigen kleurenpalet kunt maken of kunt kiezen uit een aangepast palet uit een bibliotheek.

Een andere eenvoudige en handige kleurenpaletgenerator is Coolors. Druk gewoon op de spatiebalk en het programma genereert een kleurenpalet, je kunt de kleuren aanpassen, er is ook een exportfunctie.

Er zijn verschillende andere soortgelijke services met aangepaste paletten die nuttig kunnen zijn. Er is echter één tool die speciaal is gemaakt voor plat ontwerp FlatUIColors.com door Designmodo: een service met een reeks "platte" kleuren, erg handig voor op het werk. Deze site is erg populair geworden onder ontwerpers die op zoek zijn naar goede kleuroplossingen voor een perfect ontwerp. Probeer het!

En je kunt er ook een grotere verscheidenheid aan kleuren en paletten in vinden Material Design-gids van Google.

6. Lange schaduwen

Zoals hierboven vermeld, wordt plat ontwerp gekenmerkt door eenvoud en veel vrije ruimte. Daarom wijst plat ontwerp het gebruik van effecten af. Er is echter één effect dat typerend is voor een plat ontwerp. Dit effect is een trend en een karakteristiek kenmerk van de flat geworden.

We hebben het nu over lange schaduwen. Ze hebben enkele typische kenmerken die dit effect herkenbaar maken, namelijk: een helling van 45 graden en een groot formaat (de schaduw kan meerdere malen langer zijn dan het onderwerp zelf. Lange schaduwen geven het vlak daardoor wat diepte-effect.

Dit effect maakt het object meer driedimensionaal, maar houdt het tegelijkertijd in de context van een plat ontwerp.

7. Werken met lettertypen

Typografie speelt een grote rol bij plat ontwerp. Vaak wordt de tekst het belangrijkste element van de compositie.

Platte ontwerpen gebruiken doorgaans eenvoudige lettertypestijlen, waardoor het hele ontwerp over het algemeen schoon en leesbaar is. Als u Adobe-producten gebruikt, kunt u in Adobe Typekit veel gratis lettertypen vinden. Je vindt ook veel goede gratis lettertypen op Font Squirrel. Maar vergeet niet de licentie te lezen als u van plan bent het lettertype voor commerciële doeleinden te gebruiken.

Meestal is het bij een plat ontwerp gebruikelijk om hoofdletters en contrasterende kleuren te gebruiken, dit maakt de tekst beter leesbaar.

Gebruik lettertypen spaarzaam en bedenk dat ze het ontwerp moeten aanvullen en aanvullen en niet als een afzonderlijk element moeten verschijnen. Dit betekent niet dat u geen schreeflettertypen of handgeschreven complexe lettertypen kunt gebruiken. Vergeet niet om minimaal te zijn en alles in balans te houden. Flat gebruikt echter nog steeds vaak schreefloze lettertypen, omdat deze er strenger en netter uitzien.

8. Voor- en nadelen van plat ontwerp

Hoewel plat ontwerp zo populair is geworden vanwege de vele voordelen, zijn er nog steeds enkele nadelen waarmee ontwerpers te maken krijgen bij het gebruik van deze stijl. Laten we eens kijken naar de voor- en nadelen.

Pluspunten

Populariteit

Plat design is een trend geworden, die steeds meer positieve recensies krijgt van ontwerpers en webontwerpers, en het lijkt zijn positie helemaal niet te verliezen. Integendeel, het verspreidt zich steeds meer, krijgt een aantal nieuwe vormen en kenmerken en wordt steeds creatiever.

Eenvoud

Het platte ontwerp is eenvoudig, minimalistisch en strak. Met platte webinhoud kunnen gebruikers zich concentreren op de inhoud in plaats van te worden afgeleid door beelden. Dit werkt ook voor mobiele app-interfaces: een strak ontwerp met grote knoppen maakt de mobiele ervaring perfect.

Helderheid

Kleur is een ander cool pluspunt in een plat ontwerp. Heldere en rijke kleuren zien er aantrekkelijk en strak uit, en het ontbreken van kleurverlopen maakt het ontwerp stijlvol. Bovendien maken zulke pure kleuren het positiever en representatiever; het platte ontwerp zorgt voor de juiste sfeer.

Gebreken

Plat heeft nog veel meer voordelen, maar geen enkel ontwerp is perfect en we kunnen het niet idealiseren. Hier zijn enkele nadelen van een plat ontwerp die we moeten vermelden:

Niet-reageren

Soms maakt het ontbreken van belangrijke details of visuele effecten het proces van het creëren van een gebruiksvriendelijke interface moeilijk, en dit zorgt er doorgaans voor dat het hele ontwerp niet meer reageert. Niet alle gebruikers voelen zich op hun gemak bij Flat, omdat het moeilijk kan zijn om elementen op een webpagina te vinden waarop u moet klikken of tikken op het scherm van een mobiele telefoon, omdat ze niet interactief zijn.

Problemen met typografie

Zoals eerder vermeld, kan niet elk lettertype geschikt zijn voor een plat ontwerp. Soms ziet zo’n rijk lettertype met scherpe randen er heel evenwichtig en stijlvol uit. Als het lettertype echter verkeerd wordt gekozen, kan dit het hele ontwerp verpesten. Je moet heel goed aanvoelen welke lettertypen geschikt zijn voor plat en welke niet. Een gebrek aan ervaring maakt het kiezen van een lettertype erg moeilijk.

Zwakke beelden

Door beperkingen in het gebruik van effecten, kleuren en lettertypen kunnen platte ontwerpen er te simpel en koud uitzien. Het minimalisme kan ook het grootste nadeel zijn: andere platte ontwerpen zien er uiteindelijk precies hetzelfde uit als die van jou. Het is dus erg moeilijk om uw pictogrammen of webpagina's er anders uit te laten zien dan het ontwerp van iemand anders, omdat u dezelfde vereenvoudigde vormen, beperkte kleurenpaletten en vergelijkbare lettertypen gebruikt. Als gevolg hiervan kan een plat ontwerp na verloop van tijd saai worden.

9. Toekomstige platte ontwerptrends

Er kan niet worden gezegd dat het platte ontwerp volledig is gevormd en tot stilstand is gekomen. Misschien komt dit door de hierboven genoemde tekortkomingen; het platte ontwerp streeft naar ontwikkeling en verandering, het verwerven van nieuwe functies en het verbeteren van de visuele expressiviteit.

Als je goed naar het laatste voorbeeld van plat ontwerp kijkt, merk je misschien dat het echt zo isgeleidelijk afstand van zijn strikte tools en begint subtiele effecten toe te voegen zoals: verlopen, schaduwen, verlichting en andere visuele effecten.

Deze kleine details geven het platte ontwerp wat diepte zonder al te gedetailleerd te zijn, zoals skeuomorfe ontwerpen. Deze subtiele verbeteringen maken het platte ontwerp responsiever en comfortabeler, en zorgen ook voor een frisse uitstraling, waardoor het platter flexibeler en veelzijdiger wordt.

Plat verliest dus zijn kenmerken niet, maar wordt interessanter en flexibeler- Hij wordt echt beter.

Conclusies

Zo bespraken we enkele feiten uit de geschiedenis van plat design, en spraken we over kleuren, vormen en typografie. We keken naar verschillende gezichtspunten, concentreerden ons op de voor- en nadelen van een plat ontwerp en leerden enkele van de belangrijkste principes van het maken van een goed ontwerp.

Ik hoop dat je iets nieuws uit dit artikel hebt geleerd, of het in ieder geval interessant hebt gevonden. Je bent het aan jezelf verplicht om te proberen een plat ontwerp te maken als je dat nog niet eerder hebt gedaan.

Wat valt er tenslotte nog meer te zeggen over plat design?

Als je echt van plat houdt met zijn scherpe randen, rijke kleuren en heldere lettertypen, zijn netheid en minimalisme, ga er dan voor!

Het is trendy, maar zoals bij elke grafische stijl, beperk je jezelf niet tot slechts één techniek. Dat plat trendy is, betekent niet dat je geen andere stijlen in je project kunt gebruiken. Skeuomorfisme, met zijn kleine details en texturen, kan ook een goede oplossing zijn. Het belangrijkste is om te onthouden dat het ontwerp voor elk project anders is, het moet de geest, het doel en de essentie ervan uitdrukken en tegelijkertijd handig en functioneel blijven. Vooruit!

Relatief recent is een dergelijke ontwerprichting als FLAT-ontwerp of plat ontwerp populair geworden.

Gebruikers van Windows 8 en latere versies zijn al bekend met het FLAT-ontwerp, aangezien dit scherm het eerste is dat ze tegenkomen bij het laden van het systeem.

Het uiterlijk van FLAT-ontwerp is te danken aan de verspreiding van mobiele applicaties. En ik denk dat dit te wijten is aan het feit dat FLAT-ontwerpobjecten worden gemaakt met behulp van vectorobjecten, en dienovereenkomstig zijn ze gemakkelijker aan te passen aan verschillende gadgetplatforms.

FLAT – ontwerp heeft de volgende kenmerken:

Volledige of gedeeltelijke afwijzing van kleurverlopen, complexe texturen en schaduwen , waar ik persoonlijk erg blij mee ben. Ik heb geen klachten over schaduwen en ik gebruik ze graag zelf, maar laat de eeuwige problemen met de weergave van kleurovergangen verdwijnen.

Typografie en geometrie komen naar voren. Zeker als het om webdesign gaat.

Harmonie en. Het ontwerp maakt gebruik van een beperkt aantal kleuren. Hier is een voorbeeld van het populaire FLAT-ontwerppalet.

Gebruik van creatieve informatieve iconen.

Zoals ik al zei, is FLAT-ontwerp erg populair geworden in mobiele toepassingen, omdat het belangrijkste kenmerk de eenvoud van lay-out en aanpasbaarheid is. FLAT-ontwerp is ook wijdverspreid geworden in infographics, omdat het gebaseerd is op de harmonieuze perceptie van informatie door het gebruik van constructieve technieken van typografie en kleur.

Ooit was Web 2.0 de populairste trend in webdesign. Nu is zijn plaats ingenomen door FLAT design. Mode heeft de gewoonte terug te keren naar het vergeten oude om er iets nieuws van te maken. Wie weet wanneer FLAT-design uit de mode raakt, maar geniet nu van de eenvoud, harmonie en informatie-inhoud van de huidige trend. Overigens was plat design al populair in de jaren 80, maar toen kwam dat door technische kenmerken en het onvermogen om schaduwen en kleurverlopen weer te geven. En nu zijn de meeste toonaangevende IT-bedrijven overgestapt op Flat Design.

Welnu, ook wij zullen ons aanpassen aan de veranderende wereld. In het volgende artikel laat ik u zien hoe u FLAT-stijlpictogrammen kunt maken met behulp van eenvoudige vormen in Photoshop.

Als mijn publicaties u interesseren, raad ik u aan op de hoogte te blijven van de laatste updates op de site.

(2.333 keer bezocht, 1 bezoek vandaag)

Plat ontwerp is tegenwoordig een van de belangrijkste trends, zowel op het gebied van webdesign als op het gebied van technologieën voor het creëren van gebruikersinterfaces. De meest opvallende recente voorbeelden zijn de beslissende stap van Microsoft in deze richting met Windows 8 en het nieuwe ontwerp van Google, met een duidelijke demonstratie van de wens om dieper in het minimalisme te duiken.

Hier volgen voorbeelden van elementen die .

Leven na Web 2.0

In de vorm van afgeronde vormen van elementen met allerlei effecten - 3D, schaduwen, hooglichten en reflecties, verlopen, reliëf. Kortom, alles wat diepte en volume creëert. Grote, heldere bedieningselementen, glans, texturen en andere soortgelijke uitdrukkingen maken plaats voor eenvoudige, tweedimensionale representaties van visuele objecten.

Zwevend ontwerp

Typografie vormt de kern van de stijl

Houd er rekening mee dat dit de basis is voor het bouwen van een “vlakke” site. De eenvoud van Flat-ontwerpelementen, evenals de principes van het minimalisme zelf, versterken de betekenis van typografie. Het is in principe mogelijk om een ​​deel van de zware afbeeldingen of afbeeldingen te vervangen door tekstinhoud. Tegenwoordig is typografie op veel websites design geworden. Omdat een plat ontwerp vaak minimalistisch is, moet de aard van de lettertypen uiteraard consistent zijn met het algehele schema, de stijl en de compositie. Voor elementen of titels worden bijvoorbeeld vaak hoofdletters gebruikt.

Coderwall

Lees ook: 12 primaire kleuren en voorbeelden van hun perceptie door gebruikers

Kleurenpalet met plat ontwerp

Plat design evolueert ook naar een grotere kleurdiversiteit. Webontwerpers gebruiken steeds vaker kleurenpaletten om misschien wel het meest fundamentele ontwerpprincipe te implementeren: een website moet anders zijn dan zijn concurrenten.

Minimale aap

Vrije ruimte, grote elementen

Van begin tot eind heeft het een minimalistische basis, wat betekent dat het de basisprincipes overneemt: grote blokken inhoud, grote elementen, vrije ruimte, gebrek aan onnodige poespas en pretentie.

Baard ontwerp

Platte ontwerp van iconen, knoppen, illustraties

Knoppen, iconen, badges en illustraties krijgen ook een 2D-uiterlijk. Ze moeten overeenkomen met de opgegeven stijl op alle pagina's van de site, de sfeer van de site zelf overbrengen en voor elke gebruiker gemakkelijk te begrijpen zijn.

Het kiezen van kleuren voor pictogrammen, zoals de pictogrammen zelf, is geen gemakkelijke taak. Je kunt pure kleuren gebruiken. In een poging om het ontwerp te verfraaien, moet u nadenken over hoe u de site gebruiksvriendelijk kunt maken. Aan de ene kant is het belangrijk om de stijl niet te schenden, maar aan de andere kant is het noodzakelijk om de iconen opvallend te maken. In illustraties streven we naar minimalisme, waarbij we de voorheen populaire 3D-effecten vermijden.

Lees ook: 20+ inspirerende websites met platte illustraties in ontwerp

Voorbeelden van websitesjablonen met plat ontwerp Platte gebruikersinterface

Voorbeelden van websites in de platte ontwerpstijl

Identiteit

83 Ontwerpcollectief

Frunisch

De Paraplugroep

Stichting Scl

Mijn vilt

Behzad

Atlant

Eenvoudig als melk

Familie Weranda

Het woord "plat" vertaald uit het Engels betekent "plat". Sinds de oprichting heeft het zogenaamde Flat-ontwerp zijn positie gedurende meerdere jaren behouden en een leidende positie op de markt ingenomen.

Waar het allemaal begon

Webdesign is sinds de oprichting een groot aantal keren veranderd. Het heeft een lange weg afgelegd: van eenvoudige en saaie elementen naar driedimensionaal, convex en bijna materieel. Dit is gemakkelijk te zien in het voorbeeld van het wijzigen van het uiterlijk van het Windows-besturingssysteem. De visuele component ontwikkelt zich parallel met de ontwikkeling van de technologie. Maar de nieuwe trends wijzen eerder op een terugkeer naar minimalisme en eenvoud.

Van skeuomorfisme tot plat ontwerp

De stijl die aan plat voorafging, was skeuomorfisme. Het is al heel lang een belangrijke designtrend. Skeuomorfisme is een pseudo-volumetrische stijl, waarvan alle elementen het uiterlijk van echte objecten (notitieboekje, wekker) imiteren, met behulp van schaduwen, natuurlijke texturen en andere dingen. De treffende voorbeelden ervan werden gevonden in vroege smartphone-interfaces. Het begon zijn positie te verliezen na 2010, toen ontwerpers van grote bedrijven naar vereenvoudiging begonnen te kijken en bij het ontwikkelen van gebruikersinterfaces zich begonnen te ontdoen van het belangrijkste kenmerk van skeuomorfisme: driedimensionaliteit.

Een uitstekend visueel voorbeeld van het verschil in stijlen is de onderstaande foto. De afbeelding aan de linkerkant is een plat ontwerp, terwijl de afbeelding aan de rechterkant skeuomorfisme is.

Kenmerken van vlakke stijl

Flat is een tweedimensionale stijl. Het heeft absoluut geen visuele effecten, zoals vloeiende kleurovergangen, schaduwen of driedimensionale texturen. Kortom, alles wat het beeld driedimensionaal maakt.

De belangrijkste informatie-inhoud is vervat in de pictogrammen (plat ontwerppictogram). Ze moeten zo duidelijk mogelijk zijn voor de gebruiker als het gaat om smartphoneapplicaties. Voor websites zijn pictogrammen de belangrijkste elementen die de specificiteit en de informatieve boodschap ervan weerspiegelen. In de regel worden ze gepresenteerd in de vorm van eenvoudige geometrische vormen, een cirkel of een vierkant, met een karakteristiek conventioneel beeld.

Bij het ontwikkelen van Flat design wordt aandacht besteed aan de kleurstelling. Het moet eentonig zijn, niet opdringerig en niet afleidend voor de gebruiker. Meestal worden één pure kleur en verschillende contrasterende tinten gebruikt. Er zijn trouwens veel internetdiensten met sets platte ontwerpkleuren die u kunt gebruiken door de hexadecimale codes van de gewenste kleuren te kopiëren.

Niet minder belangrijk is zoiets als typografie (tekst). Door de algemene eenvoud valt vooral de tekstcomponent op. Dit betekent dat het leesbaar moet zijn en niet in tegenspraak moet zijn met de algemene stijl. Dit hangt af van de succesvolle keuze van het lettertype en de kleur ervan.

Platte ontwerpvoorbeelden

Laten we beginnen met het feit dat de iconen van veel bekende internetbronnen en sociale netwerken op een vlakkere manier zijn veranderd. Nog niet zo lang geleden veranderden de giganten Google en YouTube hun ontwerp ook naar plat. Het Windows-besturingssysteem, te beginnen met de acht, verliet volledig alle tekenen van volume in de pictogrammen die de ogen van sommige gebruikers in eerdere versies bevielen, en begon zich te houden aan het platte ontwerp. Ontwikkelaars van mobiele applicaties voor iOS en Android volgden dit voorbeeld.

Websites van één pagina (landingspagina's) maken op grote schaal gebruik van de voordelen van plat ontwerp, waarbij de beslissende rol niet wordt gespeeld door een pretentieus uiterlijk, maar door functionaliteit en leesbaarheid.

De evolutie van plat design

In eerste instantie was het Flat-ontwerp inderdaad volledig plat, wat bepaalde problemen opleverde voor gebruikers die gewend waren aan bolle knoppen. Was bij skeuomorfisme de klikbaarheid van knoppen onmiddellijk merkbaar, dan was het bij de eerste varianten van plat ontwerp niet altijd mogelijk om de interactiviteit van elementen de eerste keer te bepalen.

Nadat Microsoft Windows 8 uitbracht, ontworpen in een platte stijl, konden niet alle gebruikers meteen de nieuwe interface achterhalen en op welke pictogrammen ze konden klikken. Het uiterlijk van de elementen duidde op geen enkele manier op een mogelijke interactie ermee. Dit ontwerp was handiger voor mobiele toepassingen, die dit idee oppikten. En Apple was de eerste die dit deed met iOS 7.

Flat design staat echter niet stil en evolueert naar meer complexiteit. Tegenwoordig lijkt het steeds meer op een semi-plat ontwerp of, zoals het ook wel Flat 2.0 wordt genoemd. Diepte-effecten, schaduwen en gradiënten begonnen erin te verschijnen. Diepte in een plat ontwerp wordt bereikt door elementen op verschillende niveaus of onder hoeken te plaatsen.

Hoe het ook zij, de stijl bevindt zich op het hoogtepunt van populariteit en er is veel vraag naar. Als u dus van plan bent uw website te ontwerpen, kunt u gerust kiezen voor Flat design. En als u enkele ontbrekende elementen voor uw website nodig heeft, kunt u op internet een groot aantal gratis UI-elementen met plat ontwerp vinden (gratis te downloaden), zoals pictogrammen, lettertypen, sjablonen en andere noodzakelijke componenten van de gebruikersinterface.

Voor- en nadelen van stijl

In het snelle leven van vandaag is zo'n discrete, informatieve stijl ongetwijfeld handiger dan zijn voorganger. Plat ontwerp heeft een aantal onmiskenbare voordelen.

Het belangrijkste is misschien wel het snel laden van webpagina's. Websites die een plat ontwerp gebruiken, openen veel sneller dan websites die overladen zijn met animaties en andere zware objecten. Laadtijd is vooral belangrijk voor SEO-optimalisatie en websitepromotie naar de top.

Een vereenvoudigd uiterlijk maakt de tekst gemakkelijker leesbaar en zorgt ervoor dat u zich kunt concentreren op de hoofdinhoud.

Het ontwerp ziet er harmonieus en holistisch uit, wat een algehele aangename indruk creëert.

Niets kan perfect zijn en een plat ontwerp is daarop geen uitzondering. Ondanks al zijn schijnbare eenvoud is het ontwikkelen van een echt succesvol plat webontwerp niet zo eenvoudig. Er is een mogelijkheid om het saai en onaantrekkelijk te maken. Of, integendeel, ga overboord met het ontwerp en vergeet de functionaliteit. De belangrijkste taak bij het ontwikkelen van Flat design is het behouden van de perfecte balans tussen schoonheid en gebruiksgemak.

Plat design is een belangrijke richting in design voor de komende jaren, dus we nodigen je uit om het beter te leren kennen en de 5 fundamentele principes te leren die de basis vormen.

Inleiding tot plat ontwerp

In het Russisch wordt plat ontwerp vertaald als ‘plat ontwerp’, en het werd een absolute favoriet nadat Apple het iOS-besturingssysteem presenteerde. De nadruk lag op een minimalistische benadering van usability-ontwerp. De focus ligt op gebruikerscomfort. Dit is een uitgesproken protest tegen het ‘squeformisme’ (visualisatie van objecten zoals in de werkelijkheid). De keuze viel op meer vereenvoudigde en tegelijkertijd eenvoudigere esthetische oplossingen. Gebruikers, moe van realistische visualisaties, begroetten deze richting met vreugde, en steeds meer webprojecten gaan naar dit formaat.

Ik zou willen opmerken dat “plat” niet “saai” betekent. Platte ontwerpoplossingen kunnen mooi zijn, ze zijn verfijnder, schoon, vrij van redundantie en transformeren in een ‘eiland van rust’. Ze maken de inhoud eindelijk begrijpelijk. Het enige dat overblijft is het leren van de basisprincipes om deze in de praktijk toe te passen.

“Plat” ontwerp streeft er niet naar om volumes over te brengen, dus het is gebaseerd op tweedimensionale visualisatie. Dit betekent dat je bij texturen geen schaduwen, reflecties of hooglichten ziet (met uitzondering van lange schaduwen). Alleen de overdracht van contouren, en meer niet.

Het wordt aanbevolen om monosyllabische figuren in het ontwerp te gebruiken en om de helderheid van de contouren te bewaken, die bedoeld zijn om lichtheid en gewichtloosheid te benadrukken. Bovendien imiteren dergelijke laconieke elementen een sensor goed, waardoor een verlangen ontstaat om met het object te communiceren (een uitnodiging om op te drukken, aan te raken). De eenvoud van de elementen is echter niet gelijk aan de eenvoud van het ontwerp als geheel; dit geldt alleen voor de contouren. Hierdoor is alles wat de gebruiker ziet duidelijk voor hem en kan hij er gemakkelijk gebruik van maken.

Een plat ontwerp vereist uiterste voorzichtigheid bij het werken met lettertypen. Dat wil zeggen, hun karakter moet het ontwerpschema aanvullen zonder het tegen te spreken. Bovendien is het lettertype bij een plat ontwerp ook een belangrijk navigatie-element.

Niet alleen het lettertype, maar ook de kleur is een essentieel onderdeel van een “plat” ontwerp. De overgrote meerderheid van de paletten is gebaseerd op 2-3 kleuren, hoewel er natuurlijk uitzonderingen zijn. Meestal worden rijke en heldere, maar tegelijkertijd pure kleuren gekozen. Zoals opgemerkt zijn er geen gradiënten of onnodige overgangen.

Plat ontwerp is een treffend voorbeeld van zo'n wereldwijde trend als minimalisme. Ontwerpers weigeren onnodige toeters en bellen, wijken af ​​van complexe en impliciete benaderingen van visualisatie, die vruchten afwerpen in de vorm van gebruikersactiviteit.

Plat of bijna plat? Wij zoeken een compromis!

Concluderend zou ik willen opmerken dat er vandaag de dag een synergie bestaat tussen plat en niet-plat ontwerp. We hebben het over een “bijna plat” ontwerp. Dit is de meest voorkomende toepassing van het beschreven concept, wanneer ontwerpers, samen met eenvoudige en beknopte elementen en tweedimensionale ruimte, 1-2 technieken gebruiken voor diepte en perspectief.

Ook een trend in 2017 was Semi Flat Design – semi-plat design. Onder invloed van Material Design is het iets ruimtelijker geworden. Er verschijnen lichte schaduwen waardoor het ontwerp semi-plat lijkt. Plat ontwerp is vandaag de dag nog steeds relevant; vanwege schaduwen is het dieper en complexer geworden, maar het basisconcept wordt niet geschonden.