20 populairste trends die webontwerp vorm gaan geven 2016
Naarmate de tijd vordert met elk voorbijgaand jaar, doemen veel nieuwe designtrends op aan de horizon. Het vakgebied van webdesign verandert voortdurend met nieuwe tools, workflows en best practices voor het bouwen van bruikbare lay-outs.
Het is lastig om te voorspellen welke exacte trends de meeste aandacht trekken. Toch toont de recente geschiedenis een patroon van trends die als een lopend vuurtje zijn gegroeid. Ik heb 20 unieke trends georganiseerd die in 2015 aan kracht hebben gewonnen en waarschijnlijk tot ver in 2016 zullen doorgaan.
1. Schets-app voor UI-ontwerp
Sketch vervangt snel Photoshop voor alle UI-ontwerptaken variërend van low-fidelity wireframes naar high-fidelity-mockups en pictogramontwerp.
Sketch App is een Mac-toepassing die speciaal is ontwikkeld voor web- en mobiele ontwerpers. Het biedt een soepelere werkomgeving voor het maken van vectorelementen voor elke interface, maar behoudt ook veel functies die u van Photoshop zou verwachten, zoals teksteffecten en laagstijlen.
Hoewel er geen bewijs is dat Sketch ooit voor Windows zal worden uitgebracht, is het nog steeds een gewaardeerde keuze van OS X-gebruikers. De vereenvoudigde workflow en het goedkopere prijskaartje geven Adobe een run voor zijn geld. Als Sketch de beste UI-ontwerpervaring blijft bieden, zal het zeker tot ver in 2016 en daarna blijven groeien.
2. Op browser gebaseerde IDE's
Desktop IDE's bestaan al tientallen jaren met opties variërend van Notepad ++ tot Xcode en Visual Studio. Een IDE maakt het eenvoudiger om code te schrijven met suggesties en accentuering van syntaxis (naast andere functies).
Maar traditioneel zijn IDE's vrijgegeven als desktop-applicaties. In de afgelopen jaren hebben we een drastische toename gezien in browsergebaseerde cloud-IDE's. Deze vereisen geen andere software dan een webbrowser, waarmee ontwikkelaars code kunnen schrijven vanaf elke computer met internettoegang.
Cloud IDE's werken meer als webtoepassingen waar u codefragmenten kunt opslaan in uw account voor delen of persoonlijke opslag. CodePen is een van de meest populaire IDE's met ondersteuning voor HTML / CSS / JS samen met aangepaste voorverwerking zoals Jade / Haml en LESS / SCSS.
Mozilla Thimble is een andere IDE voor beginnende ontwikkelaars die willen leren terwijl ze coderen. Ook is Codeply prima voor het testen van specifieke responsieve frameworks zoals Bootstrap of Zurb's Foundation zonder dat je bestanden hoeft te downloaden.
3. Gratis Sass / SCSS Mixins
Preprocessors zijn al jaren trendy, maar zijn pas sinds kort mainstream genoeg om zich alomtegenwoordig te voelen op het hele gebied van webontwerp / ontwikkeling. Tegenwoordig lijkt het vreemd om vanilla CSS te schrijven wanneer Sass / SCSS zoveel meer kan bieden.
Een voordeel is een groeiend aanbod van Sass-mixinebibliotheken. Eenvoudige mixins zijn zoals codefragmenten of basisfuncties om herhaalbare code in CSS te genereren. Je kunt er altijd zelf een schrijven, maar veel ontwikkelaars zijn zo vriendelijk geweest om gratis mixins online vrij te geven.
Sommige mixins zijn beschikbaar in bibliotheken zoals Bourbon, terwijl andere losse items kunnen zijn. Probeer een zoekopdracht uit te voeren in GitHub voor Sass / SCSS-mixins om te zien wat u kunt vinden.
4. Kaartlay-outs
Website-kaart lay-outs werden voor het eerst gepopulariseerd door Pinterest een paar jaar geleden en zijn sindsdien een trend geworden voor inhoud-zware webpagina's. Gratis plug-ins zoals jQuery Masonry kunnen worden gebruikt om deze lay-outstijl na te bootsen met geanimeerde kaarten voor verschillende hoogtes en breedten.
Een kaartlay-out kan het beste worden gebruikt op pagina's met veel gegevens die scanbaar moeten zijn. De bestemmingspagina voor Google Now maakt gebruik van een kaartlay-out om reclame te maken voor optionele kaarten voor de Google Now-app.
U kunt kaartlay-outs beschouwen als dynamischere rasters met de nadruk op het minimaliseren van de inhoud tot de essentiële items om meer items samen te voegen. Online tijdschriften zoals UGSMAG en The Next Web zijn beide perfecte voorbeelden van kaartlay-outs die worden gebruikt om recente berichtinhoud te tonen.
5. Aangepaste Explainer-video's
Grote en kleine bedrijven hebben de trend van aangepaste uitlegvideo's opgevolgd. Deze worden vaak gemaakt met animatie zoals het Crazy Egg-voorbeeld. Maar andere video's vertrouwen op real-time beelden zoals Instagram Direct.
Het doel van een uitlegvideo is om te laten zien hoe een product of dienst werkt. Bezoekers kunnen een lijst met functies bekijken en hebben nog steeds geen idee hoe het product werkt. Video's verduidelijken alles visueel en bedekken de belangrijke dingen in slechts een paar minuten.
Als je je hand wilt proberen bij het maken van een aangepaste uitlegvideo, bekijk dan deze cursus van Udemy. Het is een diepgaand onderzoek dat zich richt op video's voor het ontwerp van bestemmingspagina's.
6. Live productvoorbeelden
Het ontwerp van de bestemmingspagina is ongelooflijk gegroeid dankzij de grotere internetsnelheden en browsermogelijkheden. Een belangrijke trend die ik heb opgemerkt, is de toevoeging van live productvoorbeelden op homepages of aangepaste bestemmingspagina's.
Neem bijvoorbeeld de productpagina van Slack. Het biedt een videotour en vectorafbeeldingen met de Slack-interface. Deze productpreviews zijn bedoeld om potentiële gebruikers een idee te geven van hoe het product werkt.
Webydo is een ander schitterend voorbeeld met een live-animatie die op de startpagina wordt afgespeeld. Hierdoor kunnen bezoekers Webydo in actie zien zonder het product handmatig te hoeven demonteren. Maar u hoeft niet altijd op animaties te vertrouwen voor productvoorbeelden. Iconjar gebruikt een eenvoudige PNG-schermafbeelding om te laten zien wat het product is en hoe het werkt.
7. Geautomatiseerde taak lopers
De wereld van frontendontwikkeling is zo veranderd met een handvol nieuwe best practices voor het maken van websites. Taaklopers / build-systemen zoals Gulp en Grunt worden veel vaker gebruikt voor een hele reeks taken waarvoor eerder handmatige inspanningen nodig waren.
Automatisering is de levensader van een snelle ommekeer en het uitwisselen van kwaliteitscodes. Machines maken geen fouten, dus hoe meer je met vertrouwen kunt automatiseren hoe minder problemen je hebt (in theorie).
Ga voor meer informatie naar dit Reddit-bericht met uitleg over taakacteurs. Deze hulpmiddelen gebruiken in feite JS-code die delen van uw workflow automatiseert, aangepaste JS of scripts geschreven door anderen.
8. Native JS mobiele apps
Ik ben een groot voorstander van het gebruik van de juiste tools voor de klus. In het geval van mobiele app-ontwikkeling betekent dit Java voor Android, Objective-C / Swift voor iOS.
Maar niet iedereen wil een nieuwe taal leren, alleen om een mobiele app te bouwen. Gelukkig wordt het voor native apps eenvoudiger om te worden gemaakt en gecompileerd met alternatieve bibliotheken zoals NativeScript of React Native.
De kloof voor het worden van een mobiele app-programmeur wordt verkort met de mogelijkheid om mobiele apps via JavaScript te maken. PhoneGap is nog een andere optie op basis van HTML / CSS / JS-code.
Hoewel het creatieproces sterk varieert, is JS snel een oplossing aan het worden voor codeerders die mobiele apps willen bouwen zonder een nieuwe taal te leren.
9. Samenwerkingshulpmiddelen voor ontwerp
Instant messaging en groepschats bestaat al meer dan een decennium. Deze bronnen hebben echter van oudsher vertrouwd op platte tekst met enige mogelijkheid om bestanden bij te voegen.
Een nieuwe opkomende trend is de mogelijkheid om live ontwerpdocumenten te delen in chattoepassingen. Opmerkelijk is een voorbeeld waarbij annotaties en opmerkingen direct bovenop een document kunnen worden gelaagd. Dit geeft ontwerpers een schone manier om werk rechtstreeks met iedereen in een team te delen.
Slack is op dit moment de meest populaire chat-applicatie die veel vergelijkbare functies ondersteunt. De groeiende Slack-gebruikersbasis is onvermurwbaar geweest over het maken van extensies die de mogelijkheden van Slack aanzienlijk verbeteren en die aansluiten op andere producten zoals Hangouts, MailChimp en zelfs WordPress.
10. Responsieve Frontend-frameworks
Frontend-frameworks zoals Bootstrap bestaan al jaren en blijven nuttig blijken te zijn voor zowel persoonlijke als professionele projecten. Responsive design heeft zich een weg gebaand in frameworks en creëerde een vraag naar frontend-code in plaats van alleen backend (Django, Laravel, enz.).
Verhuizen naar 2016 Ik denk dat we veel meer zullen lezen over responsieve frontend frameworks en hun waarde in webprojecten. Veel ontwikkelaars kijken reikhalzend uit naar de release van Foundation 6 en de public v1 release van Bootstrap 4.
Andere, minder bekende raamwerken die u misschien kunt bekijken, zijn Gumby en Pure CSS.
11. Meer nadruk op UX-ontwerp
Het gebied van gebruikerservaringsontwerp blijft snel groeien met meer aandacht van ontwerpers en ontwikkelaars. UI-ontwerp maakt deel uit van UX-ontwerp, maar het is niet het uiteindelijke doel. UI is een middel om een doel te bereiken, met als einddoel een fantastische gebruikerservaring.
Slechts 5 jaar geleden was ik amper bekend met UX of hoe het paste bij interfaceontwerp. Nu hebben we bronnen zoals UX Stack Exchange en gratis UX ebooks. Als u niet veel weet over gebruikerservaring, is dit het beste moment om te studeren en te leren hoe UX-principes kunnen worden toegepast op alle vormen van digitale interfaces.
12. Pakketmanagers
Digitale pakketbeheerders zijn zo snel gestegen dat ze praktisch een vereiste zijn voor moderne webontwikkeling. Oplossingen zoals Bower en NPM kunnen veel tijd besparen bij het starten van nieuwe projecten.
Het beheersen van elke nieuwe technologie kost tijd en komt met een leercurve. Maar als er één ding is dat elke ontwikkelaar van een frontend (of back-end) zou moeten weten, is het een pakketbeheerder. Ze vereisen enige kennis van terminalopdrachten, maar als je eenmaal gewend bent aan het proces, wil je nooit meer teruggaan.
13. Geavanceerde gebruikersinterface-animaties
CSS3-overgangen waren slechts het begin van een langetermijntrend van animatie op internet. Nu hebben we tientallen CSS- en JavaScript-bibliotheken gewijd aan animatie. Dingen waarvan ik nooit heb gedroomd, zijn nu gratis beschikbaar en beschikbaar als je weet waar je moet kijken.
Animatie is geen vereiste voor een goed ontwerp. Maar het kan een goed ontwerp tot een geweldig ontwerp maken als het op de juiste manier wordt gebruikt.
Houd geanimeerde trends voor interfaces in de gaten en zie wat u kunt weghalen van verschillende websites. Onthoud dat webanimatie geen Disney-film is en met respect moet worden behandeld. Gebruik animatie voorzichtig, zodat het een interface verbetert zonder hinderlijk of storend element van het ontwerp te worden.
14. Ontwerpers Leren coderen
Een hot-buttononderwerp van dit jaar is het geval geweest voor ontwerpers die leren coderen. Sommige ontwerpers vinden het niet hun taak om code te schrijven, terwijl anderen denken dat het de norm wordt en omarmd moet worden.
Ik heb verhitte discussies en fascinerende berichten gelezen over dit onderwerp, dat alleen emotionele reacties lijkt te trekken. Een goed ontwerp is gewoon een mooie foto zonder code. Maar om op beide te focussen, moet een ontwerper minder tijd besteden aan het oefenen van het vak.
Dus is er een definitief antwoord? Sommigen beweren dat de levensvatbaarheid van een baan toeneemt voor ontwerpers die codering op de frontend kennen. Maar wat als iemand geen code wil schrijven? Is het de moeite waard om te leren alleen maar om te concurreren?
Ik voel dat het duidelijkste antwoord is om te doen wat je wilt. Maar het lijkt erop dat dit onderwerp nog steeds op tafel ligt voor veel ontwerpers die de discussie naar 2016 waarschijnlijk zullen voortzetten.
15. Gratis online tools en webapps
Vroeger liepen alle programma's vanaf de desktop, ongeacht wat je moest doen. Maar tegenwoordig ben ik altijd verbaasd over hoeveel webapps er gratis online beschikbaar zijn.
U vindt alles van URL-codering / decodering tot een volledig gratis Markdown-editor. Zelfs Google Drive heeft Microsoft Office-producten in de browser geplaatst (opnieuw volledig gratis).
Het huidige niveau van rekenkracht en homogene normen van webbrowsers bieden een schijnbaar onbeperkte hoeveelheid kansen. Complexe taken, zoals het maken van cv's naar beeldcompressie, kunnen via een browservenster worden afgehandeld.
16. De groei van webcomponenten
Webcomponenten proberen problemen van complexiteit voor ontwikkelaars op te lossen. De website van WebComponents heeft geweldige bronnen en materialen om ontwikkelaars een vliegende start te geven in dit onderwerp.
Als je niet zeker weet hoe je modulaire webcomponenten moet begrijpen, bekijk dan dit bericht voor meer informatie.
Hoewel componenten niet echt zijn opgeblazen tot mainstream-status, worden ze besproken door professionele ontwikkelaars over de hele wereld. Google heeft Polymer uitgebracht, een framework dat wordt gebruikt voor het toevoegen van webcomponenten via JS en HTML.
Dit is misschien nog niet praktisch om te gebruiken in grote klantprojecten. De technologie is echter beschikbaar en met een beetje oefening kun je de concepten gemakkelijk beheersen. Voor meer informatie en enkele codevoorbeelden kunt u dit CSS-Trucs-bericht lezen op modulaire webcomponenten.
17. Middelen voor online leren
We weten allemaal dat het nu de gemakkelijkste tijd is om elke vaardigheid te leren vanuit het comfort van uw computer. Het lijkt erop dat de markt voor online leren exponentieel groeit met nieuwe cursussen en websites die elk jaar verschijnen.
Ik heb meer vertrouwen dan ooit tevoren dat we een toename van online leren zullen zien. Bekende sites zoals Treehouse en CodeSchool bieden ongelooflijke cursussen naast nieuwere sites zoals Bitfountain en Learn-Verified.
Als er een onderwerp is dat u wilt leren, is er waarschijnlijk een cursus online - vooral als u digitale technieken zoals UI-ontwerp of app-ontwikkeling wilt leren.
18. Server-side JavaScript
Hoewel er eerdere opties voor JS op de server zijn geweest, is er nog geen zo snel doordrongen als Node.js. JavaScript-ontwikkelaars zijn verliefd geworden op deze bibliotheek en hebben gekeken naar directe concurrentie met andere backend-talen zoals Python of PHP.
Node stelt ontwikkelaars in staat om websites te bouwen met behulp van een enkele taal voor zowel de frontend + backend-code. En bronnen zoals Node Package Manager geven nog meer waarde aan Node.js.
Van wat ik kan vertellen, is Node nog steeds in opkomst en krijgt nog steeds meer grip van enthousiaste bedrijven. Of je van plan bent om Node te leren kennen of niet, er is geen twijfel dat het zal blijven groeien als een belangrijke trend in 2016.
19. Door aanraking ondersteunde websitefuncties
Smartphone-browsers hebben altijd touch-functies voor alle websites ondersteund om compatibiliteit met eerdere versies te handhaven. Maar recent heb ik gemerkt dat er meer plug-ins en aangepaste functies zijn toegevoegd aan websites met het specifieke doel om aanraakgebeurtenissen aan te pakken.
Plug-ins zoals Photoswipe en Dragend.js zijn gemaakt om vegen en tikken op touchscreen-schermen te verwerken. Het lijkt erop dat webontwikkelaars niet alleen responsieve websites bouwen, maar ook websites met aanraakfunctionaliteit.
Als je rondkijkt, vind je een aantal echt indrukwekkende functies die zijn gebouwd voor internet en die alleen afhankelijk zijn van aanraakgebeurtenissen.
20. Materiaalontwerp op het web
Google's release van materiaalontwerp was een enorm succes voor Android-ontwerpers. Materiaalontwerp wordt beschouwd als een ontwerptaal die bedoeld is om het proces van het maken van gebruikersinterfaces voor Android-smartphones te vereenvoudigen.
In de loop van de tijd hebben webdesigners dit ter harte genomen en hele websites gebouwd op basis van de nieuwe ontwerptaal van Google. Het lijkt erop dat de materiële ontwerptrend verder is gegaan dan alleen mobiele apps naar de wereld van webdesign.
Mensen die materiaalwebsites willen bouwen hoeven niet eens het wiel opnieuw uit te vinden. Gratis bibliotheken zoals Material UI en Materialize bieden aangepaste codes voor het structureren van een nieuwe lay-out bovenop de material design foundation.
Sluitend
Als we naar deze trends kijken, moet het duidelijk zijn dat we een echte gezamenlijke inspanning van de webgemeenschap zien om het proces van het bouwen van websites eenvoudiger te maken. We willen allemaal tijd besparen in onze dagelijkse workflow.
Sinds de start van het web hebben we veel technologieën gezien die alleen maar door betere alternatieven konden worden vervangen. Deze trends in 2016 dringen aan op een meer uniforme reeks van ontwerptechnieken die het bouwen van websites gemakkelijker en veel minder complex maken.
