Webdesign trends 2018

Tot nu toe was 2018 een opmerkelijk jaar voor trends in webdesign. We zien dat jaren van ontwerpevolutie eindelijk tot wasdom komen in trends als Design Systems en Tactile Design, maar ook leuke en energieke stijlen zoals de terugkeer van retro. Meer dan ooit is het cruciaal om na te denken over wat er gebeurt met webdesign en wat er in de toekomst zal gebeuren.

In dit artikel bespreken we enkele webontwerptrends die het meest invloed hebben op 2018, te beginnen met een trend die een nieuwe ontwerpbehoefte wordt.

1. Component-gebaseerde ontwerpsystemenAls uw bedrijf nog geen ontwerpsysteem heeft geïmplementeerd, is de kans groot dat u dit de komende jaren zult doen. Volgens het meest recente Enterprise UX Industry Report 2017- 2017 , bouwt 67% van de ondervraagden momenteel het hunne op, als ze er nog geen hebben.

Er is ook een goede reden voor hun succes. Ontwerpsystemen zijn de natuurlijke ontwikkeling van stijlgidsen en patroonbibliotheken, maar met zoveel meer om te voldoen aan de behoeften van moderne bedrijven.

Wat is een ontwerpsysteem?
Een ontwerpsysteem omvat ontwerpstandaarden, documentatie en - een van de belangrijkste voordelen - een UI-toolkit met patronen en codes. Ontwerpsystemen zijn erop gericht de consistentie tussen elk van de producten van een organisatie te waarborgen, en zelfs binnen individuele producten zelf, en om de optimale ontwerpoplossingen in een bepaalde situatie te gebruiken.
Een "ontwerpsysteem is geen project, het is een product dat producten serveert". 

Omdat sommige van deze gebieden kunnen veranderen, is een ontwerpsysteem een ​​'levend document', dat zichzelf voortdurend bijwerkt wanneer nieuwe of betere oplossingen zich openbaren.

Wat doet een ontwerp in de praktijk? Laten we eens kijken naar het Polaris Design System , gebruikt door Shopify. Ze breken hun ontwerpsysteem in vier gebieden:

Productprincipes : missieverklaringen en benaderingen van productontwerp, zoals het eerst plaatsen van de verkoper en de nadruk op toegankelijkheid.

Geschreven inhoud: een stijlgids voor alle geschreven inhoud, inclusief grammatica / spellingskeuzes, stem en toon, en algemene richtlijnen zoals doelleesniveaus.

Visuele eigenschappen : alle dingen visueel: kleur, typografie, beeldrichtlijnen, pictogrammen, grafiekpresentatie, enz.

Componenten: de onbetwistbare, dekkende ontwerppatronen, hun gebruiksregels en snelkopieercodes.

2. Veelhoekige vormen en geometrische lagen
Een van de meest opvallende webdesigntrends van 2018 is gericht op geometrische thema's, met name polygonen en gelaagde vormen. De kans is groot dat u deze stijl herkent wanneer u deze ziet, maar om een ​​nauwkeurige definitie ervan te geven, is een polygoon een gesloten vorm met rechte lijnen, meestal 3-5 zijden. Deze trend omvat elke zwevende driehoek en vierkant die u ziet, maar ook originele vormen die bij de definitie passen.

De stijl draait in essentie om geometrie, hetzij met vormen (zowel regulier en onregelmatig) of geometrische basispatronen (rasters, vlakken). Laten we de specifieke componenten ervan opsplitsen:

Eenvoudige geometrie
In plaats van het hele scherm te vullen, kiezen veel bedrijven zoals ESPN ervoor liever voor originelere, maar eenvoudige vormen. Dit kan andere subtielere voordelen brengen; ESPN's schuine vormen hierboven beïnvloeden bijvoorbeeld de natuurlijke visuele stroom, waardoor er over het algemeen een dynamischer scherm ontstaat.

Vet lijnen om aandacht te grijpen
Lijnen zijn ook geometrisch, dus het markeren van hen past ook in deze stijl. Bij correct gebruik kunnen grote, vette lijnen visueel een scherm dragen, of de aandacht vestigen op het complementaire beeld.

Wanneer u dikke lijnen gebruikt, wilt u aandacht schenken aan zowel kleur- als snijpunten. Kleur bepaalt waar de aandacht van de gebruiker gaat, of hij nu de aandacht op of weg van de lijnen vestigt. Snijpunten worden inherent brandpunten, dus gebruik ze in uw voordeel.

detaillering
Als u zich niet wilt binden aan een volledige geometrische esthetiek, kunt u deze trend ook gebruiken voor detaildetails. Veelhoeken en geometrische lagen zijn visueel interessant op elke grootte en dus maken ze geweldige secundaire afbeeldingen of zelfs knoppictogrammen.

3. Tactiel ontwerp
Tactile Design heeft een interessante oorsprong: het groeide uit de principes van Material Design, maar tegelijkertijd moderniseerde het de oude skeuomorfismetrends vanaf het begin van 2010.

In een notendop maakt Tactile Design objecten in een digitale ruimte echt. In de woorden van de Material Design-richtlijnen van Google : "het materiaal is gebaseerd op tastbare realiteit, geïnspireerd door de studie van papier en inkt, maar technologisch geavanceerd en open voor verbeelding en magie." Tastbaar ontwerp is moeilijk vast te pinnen met woorden, maar net als de geometrische trends, weet je het wanneer je het ziet. Laten we eens kijken naar de gemeenschappelijke componenten:

Geen grenzen
Net als de echte wereld zijn er geen randen of vensters; alles is helemaal in beslag genomen. Bepaalde elementen - met name tekst - steken over van het ene element of scherm naar het volgende. Om dit te laten werken, maken ontwerpers goed gebruik van de ruimte, zodat gebruikers weten waarop ze kunnen klikken en waar ze naartoe gaan. Dat is waarom je vaak een grote negatieve ruimte ziet (witte ruimte).

Multilayer ontwerp
Net als Material Design bevat Tactile Design meerdere lagen om een ​​realistischer uiterlijk te creëren. Dat betekent veel slagschaduwen om lagen te onderscheiden en wat meer realisme in te blazen.

Doelgerichte beweging en animatie
Tactile Design geeft de voorkeur aan zinvolle bewegingen over meer gecompliceerde animaties, gewoon voor de lol. Bewegende elementen zoals zweeftoestanden en overgangsanimaties verbeteren niet alleen de beelden, ze dienen ook een doel en verbeteren de bruikbaarheid.

Gedetailleerde fotografie
Wederom vanwege het belang van realisme, gebruikt Tactile Design zeer gedetailleerde fotografie, een combinatie van HD-kwaliteit en close-uphoeken. Dit is dubbel gunstig voor e-commercesites, omdat gedetailleerde foto's kopers een beter begrip geven van wat ze kopen.


4. Complex Desktop / Simple Mobile
De desktop versus mobiele rivaliteit bestaat al sinds de opkomst van smartphones, maar wat we nu gaan beseffen is dat ze helemaal geen rivalen zijn. Ze werken eigenlijk samen. Volgens een GO-Gulf-studie completeert ongeveer 90% van de gebruikers dezelfde taak op meerdere apparaten, in alle leeftijdsgroepen.

Onlangs hebben we een onderscheid zien tussen mobiele en desktopinterfaces van een site. In plaats van een complex systeem in een mobiel apparaat te proppen of een simplistisch systeem zoals desktop te verplaatsen, ontwerpen bedrijven meer apparaatspecifieke varianten van hetzelfde product, dezelfde site of dezelfde app.

Het probleem is weten wat er moet veranderen en hoe. Hieronder hebben we enkele tips verzameld voor het beste gebruik van de individualiteit van mobiele apparaten in plaats van alleen een desktopsysteem te vertalen:

Mobiele alternatieven voor complexe interacties
Vervang koptekstvideo's door foto's uit de video. Als je een video op je mobiele site wilt opnemen, gebruik dan een link naar YouTube. Gebruik geen zweefeffecten. In plaats daarvan kunnen tikbare knoppen of gebaarknoppen informatie verbergen / weergeven. Vereenvoudig geanimeerde effecten. Ze werken gewoon niet zo goed op mobiel. Coach vervangt bijvoorbeeld de combinatie van bureaubladslider-animatiecombinatie met een geanimeerde gif op mobiel.

Vervang vervolgkeuzemenu's met hamburgermenu's. Houd van ze of haat ze, hamburger-menu's zijn een gevestigd patroon dat iedereen al weet te gebruiken. Implementeer stemactivatie wanneer dat mogelijk is. Dit wordt steeds populairder en kan over een paar jaar de nieuwe norm zijn. Evalueer kleuren en achtergronden opnieuw. Mobiele apparaten vereisen soms meer contrast om de leesbaarheid te behouden.


5. Modern retro-ontwerp
Zelfs de New York Times gaf toe dat webdesign momenteel in een tijd van nostalgie verkeert. Tegenwoordig ontlenen ontwerpen steeds meer aan de verschillende smaken van de jaren 90, 80 en 70. Laten we eens kijken naar wat elk van deze tijdperken aan tafel brengt:

Jaren 90: een tijd waarin ontwerpers op zoek waren naar wat digitale platforms konden doen. Veel animatie, kleuren en bewegende delen, of anders uitgeklede ontwerpen van pure informatie.

80s : De pixelatie van de ontluikende videogamebranche mengt zich met de felle neoncultuur uit de modefashion en de vroege MTV.

70s: gedempte kleuren en gedurfde typografie - met name psychedelische lettertypen - van toen de printmedia nog steeds sterk waren.Het gebruik van retrostijlen in moderne tijden vereist het kiezen en selecteren van de beste elementen om te gebruiken. Tenslotte kunnen bepaalde ontwerpstijlen het best in het verleden worden achtergelaten. Hieronder staan ​​onze suggesties over wat u moet bewaren:

Old-School typografie
We zien een heropleving van niet alleen grote en gewaagde tekst, maar ook de lettertypen zelf. Lettertypen met uitgebreide streken, dikke cursieve en / of ruwe randen worden weer populair, net als lettertypen die doen denken aan oude filmposters.

De sleutel tot het effectief gebruiken van dergelijke "luide" lettertypen is moderatie. Grote en krachtige typografie is ideaal voor titels en koppen, maar kan afleiden voor secundaire informatie of hoofdtekst. Het beste is om luide lettertypen te paren met een eenvoudiger en subtielere lettertype voor normale kopie.

Extreme kleuren
Of het nu gaat om gedempte kleuren of felle kleuren, bij modern webdesign is er extra aandacht voor kleur. Kleurenoverlays zijn gebruikelijk, en het gebruik van overeenkomende kleuren om andere afbeeldingen en illustraties te accentueren.

Textuur en verlopen
Net als kleuren worden textuur en hellingen vaak gezien in extremen. Sommige organisaties voegen veel structuur toe om hun sites een realistischer gevoel te geven, terwijl andere dergelijke effecten verwijderen voor een grimmig minimalisme.

Stijl van videogame
Pixelation, die de originele Nintendo-console nabootst, is een populaire stijl, zelfs voor niet-gaming-sites. De nevenschikking van lage en hoge getrouwheid zorgt voor een interessante esthetiek waar zowel oudere als jongere generaties van houden, om nog maar te zwijgen over hoe gemakkelijk het opvalt.


6. Eenvoudige homepages
Als laatste een terugkeer naar de basis. Trends op de homepage zijn in de loop der jaren ontstaan, maar nu zien we eenvoudigere startpagina's die meer als een gateway dan als een bron van informatie werken.

Deze trend omvat eigenlijk een aantal andere trends. Dus om een ​​homepage te krijgen die er modern uitziet, kunt u een aantal van de onderstaande trends gebruiken.

minimalisme
De go-to-stijl voor eenvoudige en eenvoudig te gebruiken interfaces. Je kunt minimalisme herkennen aan de overvloedige negatieve ruimte (witte ruimte), grote en krachtige typografie en kleurrijke accenten. Voor homepages werkt kleur het best om de aandacht te vestigen op uw belangrijkste call-to-action, zoals bij Evernote hierboven.

Platte designfamilie
Flat, Almost Flat en Flat 2.0 - vergelijkbaar maar met duidelijke verschillen - alles werkt goed om homepages te vereenvoudigen. Net als minimalisme verminderen ze afleiding en maken ze gebruik van kleurige kleuren, maar een plat ontwerp is meer vergevingsgezind van gedetailleerde beelden zoals een HD-heldbeeld.

Subtiele animaties
Animaties kunnen zowel de bruikbaarheid als het gebruikersplezier verbeteren, maar ze kunnen ook afleiden van uw belangrijkste elementen. De animaties van de startpagina zijn de afgelopen tijd meer ingetogen geworden, voornamelijk beperkt tot:

- geautomatiseerde animaties die volgens een vaste planning verlopen
- trigger-gebaseerde animaties die bewegen wanneer de gebruiker klikt of scrolt
Deze subtielere animaties behouden de voordelen van beweging, maar zonder de eenvoud te verliezen waar moderne homepages voor gaan.

Mooie fotografie en videografie
Zolang je andere aandachtstolende beelden buiten beschouwing laat, kan het gebruik van een solide hero-afbeelding of video-achtergrond nog steeds een eenvoudige homepage zijn. Hiermee kan de gebruiker zich uitsluitend op het onderwerp van het visuele concentreren, wat een krachtig effect kan hebben wanneer het goed wordt gedaan.

Prioriteit geven aan leesbaarheid
Met name populair bij sites met langwerpige inhoud, zien homepages een hernieuwde waardering voor de leesbaarheid. Als u uw homepagina-kopie wilt markeren, maak dit dan beter leesbaar met:

- boven het gemiddelde tekstformaat (> 16 pt. voor body copy).
- overdreven lijn- of lijnhoogten (tekstgrootte 1,75x).
- overdreven lijn- of lijnhoogten (tekstgrootte 1,75x).
- oversized dakgoten.
- tekstkleur gecontrasteerd met achtergrond.
- gecentreerde afbeeldingen en callouts, zodat lijnlengten gelijk blijven.

Conclusie
Het webontwerp in 2018 maakt enorme vorderingen, misschien meer dan in elk ander jaar. Dat maakt dit jaar een van verandering en overgang, waar velden zoals mobiel ontwerp en op componenten gebaseerde systemen op hun eentje komen, terwijl oudere stijlen zoals drukke pagina's met pensioen gaan.

Het is nu meer dan ooit tijd om je ontwerpstrategieën opnieuw te evalueren en alles bij te houden wat de afgelopen maanden en jaren aan het licht is gekomen.



design-limburg.nl | drukwerk-limburg.nl | limburg-ontwerp.nl | limburg-software.nl | online-blog.nl
software-leudal.nl | software-maken.nl | software-oplossingen.nl | software-webdesign.nl
webbureau-leudal.nl | webbureau-limburg.nl | websites-limburg.nl