19 webdesign trends voor het jaar 2018

Ontdek de webdesign trends, technieken en hulpmiddelen die het ontwerp van websites en digitale producten in 2018 – en daarna – zullen bepalen.
Het is gemakkelijk om een beetje snobistisch te worden over trends in creatieve disciplines. Er is tenslotte niets creatiefs of innovatiefs aan het bijhouden van “wat is in” – tenzij je het misschien doet om voortdurend de trends te bestrijden.

Maar het is een feit dat creativiteit een gesprek is.
Een gesprek dat gaande is sinds we voor het eerst leerden elementen van onze wereld te reconstrueren in oker en houtskool op grotmuren. Sinds we hebben geleerd om abstracte tekens die met stokjes in klei zijn gegraveerd om te zetten in pakketten vol betekenis – d.w.z. taal.
Trends zijn slechts de rode draden in dat uitgestrekte, chaotische, polyfone gesprek. Ongeacht de keuze om ze te adopteren of af te wijzen, onze creatieve keuzes bestaan naast deze trends.
Ze bieden context. Want is innovatie niet een breuk met het normatieve? En is het normatieve niet de trends van vorig jaar?
Dus, net als vorig jaar, ging ik zitten met het top ontwerpteam van Webflow en vroeg hen om in hun VR-kristallen bollen te staren om te zien wat het ontwerp in 2018 zal bepalen.
Dit is wat Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero en Darin Dimitroff te zeggen hadden (samen met een paar van mijn eigen gedachten natuurlijk.

1. Broken grid layoutsIn de niet-aflatende zoektocht van ontwerpers naar creatievere en boeiendere lay-outs is het grid, waarop we altijd hebben vertrouwd om harmonie en logica in onze lay-outs te brengen, zelf een soort beperking geworden.
  Dat wil niet zeggen dat broken grid layouts het concept van het grid helemaal overbodig maakt – in plaats daarvan laten ze afbeeldingen en tekstelementen in en over de gutters, die gewoonlijk dienen als harde stops in meer sobere lay-outs, lopen. Hier beginnen de meestal onopvallende boxen van afbeeldingen en teksten elkaar te overlappen en samen te vallen, vaak worden prachtige onverwachte nevenschikkingen van bitmap en letterform gecreëerd.
2. Illustraties gaan centraal staanEén van de interessantere uitdagingen die ik heb gezien in de wereld van marketing van digitale producten, is die van beeldselectie. Ik heb hele ontwerpteams over het debat zien piekeren, meestal eindigend op een van de volgende twee plaatsen:
  1. Product UI-opnamen en GIF’s
  2. Redactioneel/lifestyle fotografie

Eerstgenoemde legt de nadruk op de ervaring, functies en eigenschappen in het product, terwijl de laatste de menselijke dimensie van het product probeert te benadrukken: het effect ervan op het leven van mensen.
Maar terwijl we 2018 ingaan zien we – en zullen we blijven zien – dat het werk van illustratoren een geheel nieuw aanzien krijgt in zowel marketing als productontwerp.
Waarom dit gebeurt fascineert me, en ik kan niet beslissen wat het precies is. Misschien is het gewoon dezelfde cycliciteit die we al lang in de modewereld waarnemen – illustratie domineerde tenslotte de reclamewereld tot eind jaren zestig of zo.
Of misschien was het ontwerpteam van Dropbox iets op het spoor met deze uitleg van hun nieuwe illustratiestijl:
We maken ruwe schetsen met graphite en koppelen ze vervolgens met kleurrijke, abstracte vormen om het creatieve proces tot leven te brengen. Onze stijl is geïnspireerd op het moment waarop je voor het eerst een idee hebt en dient als herinnering dat het “canvas alleen leeg is totdat je het eerste teken maakt”.

Ik bedoel … ze moesten iets op het spoor zijn met dit herontwerp … toch?

Illustraties kunnen ook heel krachtig zijn in het levendig verbeelden van meer abstracte concepten, zoals je kunt zien in de Polaris-site van Shopify. Met één tekening verduidelijkt Shopify dat het Polaris-ontwerpsysteem bedoeld is als een leidend licht – een Poolster – voor elk lid van het team.

Ten slotte is het vermeldenswaardig dat illustraties ook enkele van de representatieve uitdagingen van fotografie kunnen oplossen.
We bouwen onze digitale producten voor een verbluffend diverse reeks mensen – maar zodra je een foto van een echt mens vastlegt en die foto de held van je website maakt, vertegenwoordigd die persoon je gebruiker. En laat alle andere gebruikers niet vertegenwoordigd.
In tegenstelling hiermee is de mens geïllustreerd in de afbeelding van Shopify Polaris held slechts een mens. Specifieke zaken zoals ras, geslacht, nationaliteit en nog veel meer zijn ongedefinieerd, waardoor het voor ons gemakkelijker wordt om onszelf te projecteren in de rol van die eenzame denker, nadenkend over de creatieve mogelijkheden die verlicht worden door een leidend licht.

Brutalisme bereikt de mainstream-status

Begin 2017 publiceerden we een artikel over de opkomst van brutalisme en probeerden we het waarom van de opkomende stijl te beantwoorden:
Brutalisme … scheurt een ruimte open waarin ontwerpers kunnen doen wat ze willen, in plaats van wat ze zouden moeten doen. De hier gemaakte werken schuwen alle optimalisatieadviezen en best practices-lijsten ten gunste van uiterlijkheden en effecten die schokken en soms grenzen aan het offensieve (in ieder geval aan de verwachtingen).

Dus je kunt je onze verrassing voorstellen toen, van alle typen sites, twee e-commerce winkels op de brutale rijdende trein gesprongen zijn:

Meer organische en hellende vormen

De natuur verafschuwt een rechte lijn.

–William Kent

Zowel web- als mobile-lontwerp worden al enkele jaren gedomineerd door kaartgebaseerde gebruikersinterfaces. Tot voor kort waren de meeste van die kaarten (vooral) scherpgerand met rechte hoeken, waardoor de geometrie van hun onderliggende elementen werd blootgelegd in een bijna modernistische bezorgdheid voor de materialen van webdesign.
Dat is in 2017 op een grote, grote manier veranderd. Nu biedt elke app van Google Now tot Twitter en Facebook bijna agressief afgeronde hoeken op hun kaarten, invoervakken, profielavatars en meer.
En het zijn niet alleen die primaire elementen die meer organische vormen kweken. Achtergronden wemelen van bijna amoebeachtige klodders van kleur, dramatische diagonalen, zelfs streepjes van de echte wereld bijna cartoonesk weergegeven.
Maar ontwerpers wenden zich niet alleen tot organische vormen in hun eindeloze zoektocht naar een ‘way out of the box’. Velen geven bij die ‘boxen’ gewoon een draai aan de gebruikelijke hoeken van 90°, waarbij ze hun ontwerpen opfrissen met een eenvoudige verandering van perspectief, zoals op de homepage van Stripe.
Dit alles wil niet zeggen dat rechte hoeken de weg van de dinosaurus gaan volgen. We hebben ook verschillende sites gezien die rechte lijnen verdubbelen – en deze effectief vermengen met meer organische en bolvormige vormen.

Je zult ook de opkomst van “flitsende” of “levendige” kleuren opmerken in veel website-gebruikersinterfaces. Hoewel deze kleurencombinaties ongelooflijk opvallende effecten creëren – inclusief spookachtige nabeelden die in je ogen lijken te blijven hangen terwijl je scrolt – is het de moeite waard om op te merken dat ze een twijfelachtig gebied representeren vanuit een perspectief van toegankelijkheid.
Hoewel toegankelijkheid meestal wordt beschouwd als het maken van een gebruiksvriendelijk ontwerp voor mensen met een handicap, is het de moeite waard eraan te denken dat zelfs mensen met kleurenvisie moeite hebben met schokkende kleurencombinaties.

Volgens de Toegankelijkheids-engineeringsmanager van LinkedIn, Jennison Asuncion, kan toegankelijkheid worden gedefinieerd als:

Het ontwerpen en ontwikkelen van gebruikersinterfaces die iedereen, inclusief mensen met een handicap, zelfstandig kan begrijpen en gebruiken.

Dat iedereen is de sleutel.

Nog meer doordringende interacties en animaties

Het medium is de boodschap.

–Marshall McLuhan

Het web is geen statisch medium. Ondanks de blijvende schoonheid en waarheid van stukken als Justin Jackson’s “Dit is een webpagina”, staat het internet zoveel meer toe dan alleen het afdrukken van woorden op een pagina. En als McLuhan’s beroemde adagium enigszins hout snijdt, betekent dit dat tenminste een deel van de boodschap van het web – de betekenis ervan – ligt in zijn vermogen tot beweging en interactiviteit: de mogelijkheid voor een webpagina om ons niet alleen informatie te geven, maar om deze informatie te laten bewegen en, nog belangrijker, om ons in staat te stellen om met die informatie een interactie te hebben en te beïnvloeden.

Terwijl je door het web scrolt wordt informatie steeds vaker niet alleen aan je gepresenteerd voor je goedkeuring, maar wordt het in je gezichtsveld geschoven, stukje bij beetje vragend om je aandacht.
Het is duidelijk dat we hiermee niet over de top moeten gaan – animaties hebben het potentieel om anders schitterende ervaringen overweldigend te maken, vooral voor mensen met cognitieve beperkingen of gevoeligheid voor beweging.
Maar goed gedaan kan zelfs een subtiele animatie de aandacht van de bezoeker op het juiste moment richten op de juiste inhoud, zodat ze essentiële tekst of een conversie-gestuurd formulier niet missen.
Neem deze prachtige site die Heco Partners heeft gebouwd voor het bureau Black Sheep. Wanneer je naar beneden scrolt helpt het markeren van de “huidige” lijn je gericht te blijven op de zeer goed geschreven tekst. Vervolgens begint een reeks gedurfd ontworpen tooltips met de tekst te wedijveren om jouw aandacht, ze schreeuwen naar je om te stoppen met lezen en door te klikken naar een andere pagina. Het is een creatieve oplossing voor de uitdaging om een inline navigatiesysteem te bouwen, maar het kan voor sommige gebruikers ook onnodige spanning toevoegen aan de ervaring.

We zien ook een hoop tools ontstaan om het maken van complexere animaties en interacties te vereenvoudigen – lange tijd ontbrekend in de toolkit van de digitale ontwerper – van onze eigen Interactions 2.0 tot Airbnb’s Lottie.
Meer specifiek kijken we uit naar meer van twee bijzondere animatiepatronen: ongebruikelijke scrolsnelheden en pagina-overgangen.

Onverwachte scrolsnelheden

Parallax mag dan misschien passé zijn, maar dat betekent niet dat ontwerpers niet geïnteresseerd zijn in het op intrigerende manieren koppelen van scrollen met elementbeweging.
Neem bijvoorbeeld de site van Anna Eshwood. Elke foto op de site werkt normaal totdat je er voorbij scrolt, op dat punt gaan ze snel omhoog, sneller dan je scrolsnelheid. Dit geeft de site een interessant etherisch gevoel dat goed aansluit bij de sobere, monochrome foto’s en hun strenge modellen.
Omdat interacties en animaties een nog prominenter onderdeel van onze online ervaringen worden, kun je verwachten dat er meer onverwachte koppelingen komen om een extra dimensie toe te voegen.

Pagina-overgangen

In een web vol prachtige animaties met de potentie om ons duidelijk te vertellen “er is iets veranderd op deze pagina”, voelt het altijd een beetje raar dat het van de ene pagina naar de andere gaan ongeveer hetzelfde aandoet, ongeacht op welke website je bent.
Een statuswijzigingsanimatie kan je uitzwaaien op de ene pagina en een andere groet je op de nieuwe pagina, maar deze zijn verborgen en er is niets dat hen noodzakelijkerwijs met elkaar verbindt. De transitie zelf lijkt op elke andere overgang van pagina naar pagina: dingen worden even leeg waarna de nieuwe pagina wordt geladen. Niets bijzonders.
Maar we beginnen steeds meer sites tegen te komen die van deze verandering in status iets maken dat mooi is om te zien. Neem bijvoorbeeld deze overgangen op de site van agentschap 3drops:
Hier zorgt de paginaovergang ervoor dat de ervaring samenhangend en on-brand blijft. Je bent niet zozeer “aan het navigeren naar een nieuwe pagina” maar bezig met het openen van een andere “view” binnen een bibliotheek van views. Het is een mooie laklaag om de presentatie van een designgericht merk af te ronden.

De opkomst van maximalisme

Een goed ontwerp is zo min mogelijk design

-Dieter Rams

Al jaren lijkt het erop dat het meest krachtige en felbegeerde stukje ontwerpfeedback dat je kon krijgen was: “het ziet er strak uit”.
Dat was de ontwerpwereld in het tijdperk van het minimalisme. Diepgaand beïnvloed door Dieter Rams’ principes van goed ontwerp en het invloedrijke essay over typografie “The Crystal Goblet” hebben visuele ontwerpers lang geprobeerd om gebruikers niet voor de voeten te lopen door zo min mogelijk keuzes en visuele afleidingen aan te bieden.
En voor een wereld waarin het digitale leven een nieuwe en zeldzame ervaring was, was die keuze heel logisch. We moeten worden verlicht in deze vreemde nieuwe wereld.
Maar vandaag hebben we sites zoals de volgende – die, wees gewaarschuwd, mogelijk epileptische aanvallen kunnen veroorzaken:
Pin-Up Magazine
H. Lorenzo
Razzle Dazzle Torino

Het geheel lijkt ernaar te streven om alle het mogelijke naar je toe te gooien vanaf het moment dat je aankomt.
Je zou dit een soort brutalisme kunnen noemen – en in feite vond ik alle bovenstaande sites op Brutalist Websites – maar we denken dat we allemaal kunnen verwachten dat meer maximalistische sites verschijnen, zelfs buiten wat je brutaal zou achten. Aangezien we allemaal steeds meer digitaal onderlegd worden, is het logisch dat sommige sites meer van bezoekers verwachten.

Serifs zetten hun beste beentje voorIn de slechte oude tijd van niet-retina-schermen en slechte ondersteuning van lettertypen, was het logisch om vast te houden aan sans serif-lettertypen in je webinterfaces. Maar omdat zowel schermen als technologieën voor het renderen van lettertypen – en niet te vergeten, ondersteuning voor aangepaste lettertypen – robuuster worden, beginnen we steeds meer uitgebreide lettertypen te zien die de hoofdrol spelen. Of op zijn minst meer prominentere ondersteunende rollen.
Wees getuige van het recente herontwerp van Kickstarter, waarin blokcitaten van makers in een zacht gebogen serif staan:
Of de grote, vette koppen van Reform Collective:
Terwijl wat neuzen bij Typewolf op zowat elke willekeurige dag verschillende show-stelende serifs zal onthullen:Als een oude fan van serifs en hun vermogen om gevoelens van elegantie, verfijning en literair glans op te roepen, geef ik onze nieuwe heersers een warm welkom.
Zwevende navigatiemenu’sGefixeerde navigatie is een steunpilaar geworden van sites die óf conversiegericht zijn (omdat de kern-CTA bij je kan blijven terwijl je scrolt) óf die over grote menu’s beschikken. Het is een goede manier om de ervaring van een site te vereenvoudigen door besturingselementen voor navigatie constant onder bereik van de gebruiker te houden.
De laatste tijd zien we dat ontwerpers met het idee een stap verder gaan door de nav visueel los te maken van de rest van het siteontwerp en deze een beetje onder het frame van de browser te plaatsen. Dit versterkt het gevoel dat de navigatie een globaal object is, niet noodzakelijkerwijs onderdeel van welke pagina dan ook, die er is om je geruststellend door de site te volgen.
De meest voor de hand liggende manier om dit visueel aan te pakken is door een slagschaduw toe te voegen aan de navigatiebalk en deze iets onder de top van de site te plaatsen, zoals te zien op de bovenstaande site van Reseau. Maar het is ook uitvoerbaar in een platter ontwerp, zoals je kunt zien op de site van Anchor & Orbit.
Vergelijkbaar met off-grid ontwerpen, zorgt dit voor interessante composities die van nature (of doelbewust) in het ontwerp verschijnen, wat een leuke creatieve uitdaging biedt.
Het video-elementWanneer je complexe informatie probeert over te brengen in een visueel formaat, is een statische afbeelding vaak niet voldoende. Complexiteit heeft immers de neiging zich in de tijd te ontvouwen – een stilstaand beeld van een gebruikersinterface vertelt je alleen wat erin zit, niet hoe je het moet gebruiken.En daar verschijnt het video-element.
Deze is om verschillende redenen krachtig:
1. Het kan naadloos in het ontwerp passen, zonder het opdringerige frame van een ingesloten YouTube- of Vimeo-video
2. Het blijft van extreem hoge kwaliteit, zelfs met veel kleuren, gradiënten en details in het beeld – iets wat GIF’s moeilijk kunnen zonder exponentieel te groeien in grootte
3. Het kan worden doorgelust om ervoor te zorgen dat de details van de tekst en die van de afbeelding gesynchroniseerd blijven en herhaald worden voor diegenen die het nodig hebben
Het is dus geen verrassing dat we het video-element overal op internet zien opduiken, van onze eigen homepage tot trefwoorden-pagina’s zoals Stripe Sigma.
Meer meeslepende “multimedia” longformWanneer we longform-inhoud willen publiceren, kan het verleidelijk zijn om gewoon een lang tekstveld op de pagina te gooien en klaar is Kees – vooral wanneer onze longform-inhoud wordt bestuurd door een CMS, waarbij een enkele lay-out het zware werk doet voor inhoud variërend van flapteksten met 200 woorden tot gedetailleerde tutorials van korte lengte.
Maar sommige ontwerpers en schrijvers weerstaan heldhaftig de verleiding en keren terug naar het concept van achtergrondverhalen – het combineren van aangepaste lay-outs met een zorgvuldig op de presentatie toegesneden tekst om meeslepende, lange verhalen te vertellen die het relaas verrijken met video, geluid, diagrammen en grafieken, kaarten, en nog veel meer.
Om eerlijk te zijn, dit is nauwelijks een “nieuwe” trend – in feite zou ik het een hoeksteen van het langlopende gesprek rond webpublicatie noemen – maar met alle tools voor webpublicaties die nu ontstaan, inclusief die van onszelf, lijkt het erop dat het de perfecte tijd is voor dit facet om nog prominenter te worden in 2018.
Neem dit CNN-verhaal over de invloed van de opwarming van de aarde op Groenland – en de rest van de wereld.Het verhaal komt zo dicht bij het je daar letterlijk heen brengen als het maar kan. Dat is van vitaal belang voor een kwestie die nog steeds abstract lijkt – onwerkelijk zelfs – voor te veel. Het zet ook een complex onderwerp slim om in een reeks gemakkelijk verteerbare paragrafen. Je voelt je nooit overweldigd door het totale volume aan inhoud, omdat het niet de aandacht op zichzelf vestigt. In plaats daarvan merk je dat je elk woord leest, omdat het zo simpel en boeiend is.
Merk op dat ik hierover geen kritiek heb op CMS’s: in feite is het mogelijk om dit soort ervaringen via een CMS te leveren. Het vergt slechts een beetje vindingrijkheid – al het beeldmateriaal van dit verhaal kunnen worden geleverd via achtergrondafbeeldingen en video’s – en zorgvuldige aandacht voor consistentie tussen verhalen, terwijl je ze schrijft, ontwerpt en ontwikkelt. En ja, een inhoudsmodel dat verschilt van je standaard blogposts.
Het is vermeldenswaard dat deze meer diverse benaderingen van longform kunnen spelen met een broken grid of met een standaardkolom, zoals te zien is in het stuk van de New York Times hierboven.
Variabele lettertypen!Als we vandaag naar het web kijken, is het moeilijk te geloven dat slechts een paar jaar geleden we gedwongen waren te vertrouwen op een schaars aantal lettertypen voor het leveren van al onze tekstuele inhoud.
Tegenwoordig is het web rijk aan een enorme diversiteit aan prachtige lettertypen, wat leidt tot revolutionaire niveaus van interesse in typografie, lettertypeontwerpen en zoals te verwachten een opvallende consumptie – van lettertypen.
En het wordt alleen maar beter met de uitgave van variabele lettertypen. Een gezamenlijk project van de grootste namen in technologie (en typografie) – Apple, Google, Microsoft en Adobe – het project met variabele lettertypen maakt een geheel nieuwe vorm van lettertypeontwerpen mogelijk. Officieel een toevoeging aan het OpenType-formaat, het:
biedt typeontwerpers de mogelijkheid om de volledige symbolen-set of individuele symbolen van een lettertype te interpoleren over maximaal 64.000 assen van variatie (gewicht, breedte, etc.) en specifieke posities in de ontwerpruimte te definiëren als benoemde tekenstijlen (“Vet”, “Gecondenseerd”, enz.).Als je (zoals ik) bij die zin jezelf een beetje achter de oren krabt, focus je dan op de veel directere versie van John Hudson waarin hij zegt dat een variabel lettertype is:
Een enkel lettertypebestand dat zich gedraagt als meerdere lettertypen.Maar misschien is het verstandig om bij de bespreking van een visuele kunst als lettervormontwerp, vast te houden aan het visuele:

Dat zijn variabele lettertypen in een notendop: een enkel lettertypebestand dat in een oogwenk van Dun naar Dik kan gaan. Zonder 16 verschillende lettertypen in je CSS te plaatsen.
Het gaat groot worden.
Inhoud hubs – of webooks? – worden cool(Voor de duidelijkheid: de inhoud is altijd cool geweest ????)Als inhoud-geek heb ik het in 2017 geweldig gevonden om een heleboel mooie, op inhoud gerichte websites te zien die veel nuttige en goed geschreven informatie bieden. En ik vermoed dat we nog veel meer zullen zien in 2018, gegeven het succes die de partijen van 2017 hebben gehad.Het is ook fascinerend om te zien dat veel toonaangevende merken de vertrouwde PDF-benadering van e-boekverspreiding afdanken en het potentieel van het web voor het publiceren van longform-inhoud volledig omarmen in wat ik “webooks” noem.
Waar heb ik het over? Nou over:
Stripe Atlas Guides
Airtable Universe.
DesignBetter.co
Intercom Books
Onze eigen ebooks site.Moet ik doorgaan?
CSS-grid!Zoals Robin Rendle het zo treffend op CSS-Tricks plaatste:

Nou, CSS Grid is het eerste echte lay-outsysteem voor het web. Het is ontworpen om inhoud te organiseren in zowel kolommen als rijen en geeft ontwikkelaars eindelijk bijna een God-achtige controle over de schermen die we voor ons zien.

Hint: demonisch gelach.

Opmerking: Webflow gaat het CSS-grid ondersteunen, maar er is nog geen officiële datum voor.
De zoektocht naar het perfecte digitale ontwerptool2017 was een groot jaar voor een grondige discussie over de aard van ontwerptools en hoe goed ze geschikt zijn voor ons werk.
Bryn Jackson van Spectrum promootte zijn zaak voor:Een intermediair formaat tussen ontwerp- en engineeringtools om meer efficiënte, capabele tooling mogelijk te maken voor productteams in het algemeen en ontwerpers in het bijzonder.In een post, simpel, “Interface” genoemd. Hij vervolgt met de suggestie: “Elk populair ontwerpprogramma dat vandaag beschikbaar is, is geoptimaliseerd voor illustratie.”
(Hoewel het moet worden opgemerkt dat hij “illustratie” categoriseert als elk ontwerpwerk dat resulteert in “een afbeelding, pictogram, illustratie, lettertype, advertenties, gedrukte media of een ander visueel communicatiemedium zonder oorspronkelijke interactiviteit”, hetgeen een betwistbare bewering is. Lezen en zien zijn per slot van rekening toch ook vormen van interactie?)
Bezijden de bedenkingen over de definities van illustratie en interactiviteit, is het niet moeilijk om Jackson’s punt te zien: aan de basis fixeren de meeste moderne ontwerptools zich op de productie van afbeeldingen, niet op interfaces.

Ontwerper en ingenieur Adam Michela kwam met veel van dezelfde punten aan in ” I’m a Designer at Facebook, and This Is What’s Missing in Design Tools Today.” Daar beweert hij dat de meeste ontwerpers de overgrote meerderheid van hun tijd bezig zijn met het maken van artefacten van weinig tot geen tastbare waarde omdat ze slechts het eindproduct vertegenwoordigen – de digitale interfaces die snel afwijken van de desbetreffende representaties.
Hij eindigt het stuk met een hoopvol bericht, zeggende: “er is gelegenheid om tools te creëren die ontwerp en implementatie combineren (in plaats van overbruggen).”
Dat is precies wat we hier bij Webflow proberen te bouwen. Net als Michela stellen we ons een ontwerpproduct voor dat geen schema van een website is, maar dat de website zelf is. Geen documentatie van de interface, maar de interface zelf. Voortdurend evoluerend in perfecte synchronisatie met de site, maar voortdurend een tijdlijn van versies genererend die kunnen worden beoordeeld en zelfs worden hersteld met een klik op een knop.
We zijn er nog niet helemaal, maar met jouw hulp is dat de richting waarin we ons begeven.
Diversiteit en integratie als ontwerpuitdagingenWebflow is een werkgever met gelijke kansen. We zijn toegewijd aan het opbouwen van een team waarin diversiteit in zowel ideeën als identiteiten niet alleen wordt verwelkomd, maar ook aangemoedigd.- Onze vacaturesIn de Verenigde Staten, waar Webflow huist, zorgt een toenemend verhit politiek klimaat voor een intense focus op de rol van diversiteit en integratie in design.
We erkennen dat ontwerpkeuzes ogenschijnlijk zo klein als het beslissen welke opties er moeten komen in vervolgkeuzemenu’s voor geslacht – of zelfs of er wel een vervolgkeuzemenu’s voor geslacht moet zijn – zeer belangrijk is voor veel van onze medemensen. We zien – helemaal opnieuw – hoe krachtig de formulering van foutmeldingen en het mechanisme van gegevensvalidatie kunnen zijn in de dynamiek van mens-computerinteracties. We realiseren ons dat het maken van een filter op ras in reclametools ronduit racistische effecten kan hebben en daarmee bestaande machtsverhoudingen kan handhaven die velen van ons graag beëindigd willen zien.
En we realiseren ons dat als onze teams niet divers en geïntegreerd zijn, onze ontwerpoplossingen dit ook niet kunnen zijn.
Sommigen van ons in ieder geval.Aan de andere kant zien we ook gendervooroordelen op duidelijk tegenstrijdige en marginaliserende manieren de kop opsteken – waardoor gesprekken die we meestal als deugdzaam beschouwen, zoals het geven van feedback, veranderen in flagrante voorbeelden van dubbele standaarden.
Uiteindelijk, als gebruikerservaring (UX) professionals, is het onze taak om iedereen, ongeacht hun specifieke kenmerken, een bruikbare en idealiter aangename ervaring te bieden.
Met andere woorden: onze taak heeft alles te maken met integratie. Laten we van 2018 het jaar maken dat we ons erop toeleggen om ons werk zo volledig mogelijk te doen.
De “draai naar video” speelt doorOndanks het feit dat ongeveer niemand van ons erom schreeuwt dat video het webpublicatiemedium van de dag moet worden, blijven uitgevers verbazingwekkend optimistisch over de overstap.
Je ziet het overal: van de nieuwssites die bijna volhouden dat je de video bekijkt in plaats van te lezen tot de shortform “verhalen”, gepromoot door eerst Snapchat, dan Instagram en uiteindelijk Facebook. Zeker weten dat Excel binnenkort ook deze trend gaat volgen!
Maar zoals de meeste dingen in tech, is dit nauwelijks een neutrale ontwikkeling. Duizenden journalisten hebben hun baan verloren in deze overstap van tekst naar het bewegende beeld.
En de vooruitzichten zijn misschien ook niet zo goed voor sites die de overstap maken. Volgens de Columbia Journalism Review:Uitgevers die naar video overstapten hebben het grootste deel van hun moeizaam gewonnen oorspronkelijke publiek verspeeld in slechts een jaar produceren van ongedifferentieerde, flauwe stukken van grotendeels samengevoegde “hapslikweg” video.Onafhankelijke journalistiek lijdt sowieso – bedankt, Trump – maar de overstap naar video heeft niet echt geholpen.
Eén positieve opmerking: volgens Digiday zijn “video-CPM’s veel groter dan weergave-CPM’s” (CPM is “kosten per vertoning”). In een ideale wereld zou dat betekenen dat kranten weg zouden kunnen komen met minder advertenties in hun verhalen.
Maar dat zal natuurlijk niet gebeuren.

In het licht van dit alles is het de moeite waard om te denken aan de sterke punten van tekst als zowel een creatief als een informatief medium:
1. Het is relatief snel te produceren
2. Het is goedkoop
3. Het is nog steeds het primaire formaat van de meeste communicatie op internet
Door dat laatste punt kan jij je achter de oren gaan krabben. Maar ik zou je willen aanmoedigen om naar een populair sociaal netwerk te gaan en even te bladeren. Tenzij je naar Instagram, Pinterest of Snapchat gaat, is de kans groot dat je heel veel schrijfsels ziet. En zelfs op die visueel-eerst platforms, speelt tekst nog steeds een belangrijke ondersteunende rol.
Want een foto mag dan wel “duizend woorden waard zijn”, bij het maken van een tafereel wordt zelden de context weergegeven – de wie, wat, wanneer, waar, waarom en hoe, dat beelden zinvol maakt.

Wat ons op nogal natuurlijke wijze naar ons volgende punt leidt:
De opkomst van de UX-schrijver gaat door

Iedereen die invloed heeft op wat het ontwerp wordt, is de ontwerper. Dit omvat ontwikkelaars, PM’s, zelfs bedrijfsjuristen. Allemaal zijn ze de ontwerpers.

–Jared Spool

Ik heb dit summier genoemd in het stuk over de designtrends van vorig jaar, maar vandaag zou ik me nog meer willen richten op de opkomst van de discipel genaamd “UX-schrijven”.
Simpel gesteld, een UX-schrijver richt zich op de inhoud die zichtbaar is in UI’s, meestal voor grotere digitale producten en webapps. Nu, wanneer ik heb uitgelegd dat ik inhoud in producten schrijf voor bedrijven als Webflow en, in het verleden, LinkedIn, hebben mensen de opmerkelijke neiging om te zeggen “wat?”
Maar wees gerust: UI’s zitten boordevol geschreven inhoud. En die inhoud speelt vaak een sleutelrol bij het begrijpen van:
1. Wat je kunt doen binnen een gebruikersinterface
2. Hoe die dingen te doen
3. Welke beperkingen en complexiteiten je onderweg tegen kunt komen
Maar UX schrijven kan veel meer dan dat doen. De woorden binnen een interface kunnen ook een krachtig hulpmiddel zijn om percepties van de merken achter onze favoriete UI’s vorm te geven. Denk aan alle tweets die je hebt gezien waarin een hilarische tekst van een webapp wordt uitgelicht, of alle voorbeelden van 404 pagina’s met grappige berichten die zijn ontworpen om actie te voeren op een suboptimaal moment.
Dit wordt het duidelijkst in het UI-formaat dat bekend staat als de chatbot. Over het algemeen bestaan deze UI’s alleen uit woorden. Woorden worden de gebruikersinterface. De persoonlijkheid van de chatbot – of merk – kan alleen worden uitgedrukt in taal. Met misschien een paar zorgvuldig gekozen emoji erbij om de boel op te fleuren.
Als ervaren UX-schrijver ben ik zeer enthousiast dat deze belangrijke rol meer de erkenning krijgt die het al lang verdient.

Wij zijn ook ontwerpers. We werken alleen in lettergrepen en lettervormen. We kunnen niet wachten om met jou te werken.
Ontwerp. Gesystematiseerd.Nu het ontwerp zijn “plaats aan de tafel” heeft verdiend, is het gesprek gewijzigd van waarde toevoegingen naar een meer volwassen analyse van hoe de successen van het ontwerp systematischer, schaalbaarder en coherenter kunnen worden over de vele voortbrengsels en omgevingen van een merk.
Ontwerpsystemen zijn gericht op het vertalen van merkesthetica en benaderingen van functionaliteit in modulaire componenten die kunnen worden gemixt en gecombineerd om (idealiter) de unieke behoeften van elke gebruikersinterface te dekken. Wanneer een ontwerptaal wordt gesystematiseerd, wordt besluitvorming vereenvoudigd, worden ontwikkeltijden verkort en krijgen ontwerpers de tijd om te werken aan spraakmakende projecten waarvoor nog geen ontwerppatronen zijn vastgesteld.
En merken staan, zoals gewoonlijk, helemaal bovenaan de trend. UXPin lanceerde Systems, een tool voor het maken en onderhouden van ontwerpsystemen. Shopify lanceerde Polaris ter ere van zijn unieke samenvoeging van inhouds-, ontwerp- en ontwikkelingsrichtlijnen (iets waar ik behoorlijk gepassioneerd over ben). UX Power Tools lanceerde een bibliotheek die dat probeert van Sketch een levensvatbaar ontwerpsysteemtool te maken (we zullen zien!).Verwacht hiervan nog veel meer van te zien in 2018.
Principes-eerst ontwerpDe ontwerpwereld is al lang geobsedeerd door een van die kip-ei debatten: inhoud-eerst of ontwerp-eerst.
Ik heb altijd voor de inhoud-eerst kant van het argument geweest. En niet alleen omdat ik een “inhoud-man” ben. Voor mij is het gewoon pure logica om het bericht vast te leggen voordat je besluit hoe je het moet verpakken.
Maar de laatste tijd, nu ik ben overgestapt van het ontwerpen van inhoudstrategieën voor specifieke producten naar meer systeemgericht werken (inhoudstrategieën op merkniveau), ben ik enthousiast over het idee dat ons werk niet moet beginnen met ontwerp of inhoud.
Het zou moeten beginnen met principes.
Al het andere – hoe het eruit ziet, hoe het werkt, hoe het klinkt – moet voortvloeien uit en afhankelijk zijn van een set goed gedefinieerde en nauwkeurig geformuleerde principes.
Of zoals Shopify senior UX-leider Amy Thibodeau het schreef in haar prachtige artikel “Locating Polaris”:Als het systeem gemaakt is om echt werk mogelijk te maken, moet het weerspiegelen hoe een organisatie dingen maakt en wat het waardeert. Een ontwerpsysteem dat niets zegt over principes, of een benadering van de inhoud, bijvoorbeeld, zal in de dagelijkse praktijk geen prioriteit geven aan het denken over die dingen.Principes bieden een raamwerk voor alle andere beslissingen, van hoe lang de tekst in de held zou moeten zijn tot welke afbeelding de achtergrond vormt voor de inhoud. Tenslotte zijn merken gebaseerd op principes: een missie, een visie en een belofte. Elk van deze dingen vereist onderliggende overtuigingen om ze te animeren, om ze relevant te maken voor anderen.
Met andere woorden: principes zorgen voor het waarom.

Bijvoorbeeld: bij Webflow is het onze missie ontwerpers, ondernemers en creatieve professionals in staat te stellen hun ideeën op het web tot leven te brengen. Die missie beïnvloedt alles wat we doen, van de esthetische benadering die Ryan voor ons heeft gemaakt naar de stem- en toonstandaarden die ik heb ontworpen.
En het zijn die standaarden die sturing geven aan onze eerste concepten, onze feedback aan elkaar en die hopelijk elke blogpost, e-mail, marketingpagina, enz. omvat. Tot nu toe is het een geweldige plek om te beginnen.

Wat denkt jij dat 2018 gaat brengen voor digitaal ontwerpen?

Telkens wanneer ik een van deze lijsten samenstel, ben ik overweldigd door hoeveel ik kan bespreken – en hoeveel mijn beperking van jaar + 1 mij dwingt om prioriteiten te stellen.
Daarom heb ik enkele voor de hand liggende krachten weggelaten – zoals AR en VR, die we vorig jaar noemden – die tot nu toe slechts een beperkte impact op het web hadden. Met dat in gedachten, wat zou jij aan deze lijst toevoegen?
(Houd er rekening mee dat als je links opneemt in jouw opmerkingen, deze worden gemarkeerd als mogelijke spam. Je mag dus de links weglaten – geef ons genoeg om het te googelen en we vinden het wel.)
En, hé: bedankt voor het lezen.

Bron: John Moore Williams
https://webflow.com/blog/19-web-design-trends-for-2018