20 populairste trends die webdesign 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 moeilijk te voorspellen welke exacte trends de meeste aandacht trekken. Toch laat de recente geschiedenis een patroon zien 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 Photoshop snel voor alle UI-ontwerptaken, variërend van low-fidelity wireframes tot hifi-modellen en pictogramontwerp .

Sketch App is een Mac-toepassing die speciaal is ontwikkeld voor web- en mobiele ontwerpers. Het biedt een vloeiendere werkomgeving om vectorelementen voor elke interface te maken, maar het 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 vrijgegeven, 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. Met een IDE is het eenvoudiger om code te schrijven met suggesties en syntaxisaccentuering (naast andere functies).

Maar traditioneel zijn IDE's vrijgegeven als desktop-applicaties. In de afgelopen paar jaar 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 en aangepaste preprocessing zoals Jade / Haml en LESS / SCSS.

Mozilla Thimble is een andere IDE voor beginnende ontwikkelaars die willen leren terwijl ze coderen. Ook is Codeply ideaal 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 werden pas recentelijk 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. Hoewel je altijd je eigen teksten kunt schrijven, zijn veel ontwikkelaars zo vriendelijk geweest om gratis mixins online vrij te geven.

Sommige mixins komen 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 hoogten en breedten.

Een kaartlay-out kan het best worden gebruikt op pagina's met veel gegevens die scanbaar moeten zijn. De bestemmingspagina voor Google Now maakt gebruik van een kaartlay-out om te adverteren 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

Zowel grote als kleine bedrijven hebben de trend van aangepaste uitlegvideo's genomen. 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 productpreviews 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 nog een briljant 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 tools gebruiken in feite JS-code die delen van uw workflow automatiseert, aangepaste JS of scripts die door anderen zijn geschreven.

8. Native JS mobiele apps

Ik ben een groot voorstander van het gebruik van de juiste hulpmiddelen 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 maar 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 aanmaakproces 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

Chatten en groepchatten 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 aantekeningen 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 enorm 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 een nieuwe technologie kost tijd en komt met een leercurve. Maar als er één ding is dat elke ontwikkelaar van een frontend (of backend) 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 dat het niet hun taak is om code te schrijven, terwijl anderen denken dat dit 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 het werk 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 waarschijnlijk de discussie over 2016 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 genomen (weer 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 vanuit 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 u niet zeker weet hoe u modulaire webonderdelen begrijpt, bekijkt u 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 server-side JS 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 één taal voor zowel de frontend als de 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 nu van plan bent om Node te leren 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 als specifiek doel het omgaan met aanraakgebeurtenissen.

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 responsive websites bouwen, maar ook aanraak-enabled websites.

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 set van ontwerptechnieken die het bouwen van websites gemakkelijker en veel minder complex maken.