20 stijgende trends in webdesign om in 2017 te bekijken

Er is weer een jaar verstreken en ontwerpers kijken vooruit naar de toekomst. Veel veelbelovende designtrends zullen onvermijdelijk in 2017 uitbarsten. Vorig jaar behandelde ik de top 2016 designtrends en dat hebben we gezien veel veranderingen sindsdien.

Dus voor deze post heb ik de top 20 trends dat heb ik gemerkt tractie bereiken in 2017. Deze ontwerptrends kan op elke website van toepassing zijn, dus houd je ogen open voor deze technieken terwijl we door 2017 en verder gaan.

1. “Aanbevolen in” badges

Startups, blogs, SaaS-projecten en zelfs kleine bedrijven gebruiken nu de “zoals weergegeven in” badges op hun websites. Deze badges vaak link naar artikelen over reguliere blogs zoals HuffPo, Forbes, CNN, Fox en andere nieuwsuitzendingen.

Het doel is om een website valideren en vertrouwen op te bouwen met nieuwe bezoekers. Het is gemakkelijker voor iemand om een ​​website te vertrouwen als ze kunnen zien dat het is geweest genoemd in gezaghebbende publicaties.

In feite veel topblogs waardeer de blootstelling, dus het helpt alle betrokkenen echt. Deze grote sites vaak hun logo's online vrijgeven maar je kunt ook transparante PNG's of SVG's vinden door gewoon rond te googelen.

Het is ook aan te raden dat jij link terug naar het originele artikel vermelding van uw site. Dit bewijst dat je werd echt genoemd op de site en u maakt niet alleen vorderingen op.

2. Vette all-caps nav-links

ik heb gezien tientallen gestroomlijnde navigatiemenu's allemaal vertrouwen op hetzelfde ontwerp. Deze nav-links variëren in lettertype en grootte maar meestal hebben vergelijkbare functies, zoals:

• In hoofdletters
• vet
• Gelijkmatig verdeeld
• Uitgelijnd in de rechterhoek

De startpagina van Zazzle is een goed voorbeeld. Maar je kunt dit vinden op veel startup-websites omdat het een is schone manier om links te delen die gemakkelijk te lezen zijn en gemakkelijk kunnen worden doorzocht.

Ik associeer deze trend meestal met bedrijven en tech startups maar het kan ook op blogs overheersen.

Noteer de volgende keer dat u deze trend ziet omdat deze overal is. En ik verwacht dat het tot ver in 2017 blijft groeien.

3. Blogs in tijdschriftstijl

Bloggen was zo'n nicheconcept in de vroege jaren 2000. Als je in 2003 een blog hebt gehad, werd het beschouwd als een schattige kleine hobby. In iets meer dan een decennium is die trend radicaal veranderd. Nu kunnen blogs zorgen voor een voltijds inkomen, en ze beginnen eraan lijkt veel meer op digitale tijdschriften.

Kijk terug naar het oorspronkelijke ontwerp van TechCrunch toen het voor het eerst werd geïntroduceerd in 2006. Lijkt op een generieke WordPress-blog?

Kijk nu naar de huidige startpagina van Techcrunch in 2017:

Het niet alleen lijkt op een tijdschrift, het ook functies zoals een. TechCrunch publiceert elke dag tientallen (zo niet honderden) nieuwe berichten. Ze zijn de beste bron voor opstartnieuws.

De designtrends in tijdschriftstijl maken een groot verschil. De startpagina gebruikt een grootst uitgelicht verhaalgedeelte, elk bericht heeft zijn eigen thumbnail, en de artikelpagina's midden rond de kop.

Als je erover nadenkt, is TechCrunch niet veel veranderd. Het is nog steeds “gewoon een blog”. Maar het is ontworpen en beheerd als een tijdschrift, en dit maakt het verschil.

4. Video-achtergronden

Autoplay-geluid is misschien wel de meest irritante trend op internet. Maar verrassend, video afspelen (zonder geluid) is een snelgroeiende trend. Je kunt dit op tientallen bedrijfssites zien waar een video-achtergrond is neemt het volledige scherm over.

Ik vind deze techniek heel goed wanneer deze correct wordt toegepast. Zolang de video heeft betrekking op de site en belemmert de inhoud niet, Ik vind het een cool effect om te gebruiken in je header.

5. Geestknoppen

Zoals minimalisme feeds verder in webdesign, veel nieuwe trends zijn in opkomst. Een dergelijke trend is de opkomst van ghost buttons die geen binnenvulling hebben maar wel een buitenste rand hebben.

Meestal deze knoppen contrast met anderen aandacht vragen. U kunt dit zien op de startpagina van Instantmojo met de groene aanmeldknop naast gelegen de Ghost-knop die linkt naar een live demo.

Andere sites zijn geadopteerd een puur spookachtige ontwerpstijl op hun knoppen. Een goed voorbeeld hiervan is de nieuwe Bootstrap-lay-out.

Ik denk dat Ghost-knoppen werken op sites die neigen naar minimalisme. Ze zijn misschien niet geschikt voor elke website, maar ik zie wel dat hun gebruik met elk voorbijgaand jaar toeneemt.

6. Modal-vensteropt-ins

Modale vensters zijn super vervelend en ik kan me niet voorstellen dat een gebruiker ze leuk zou vinden. Echter het is bewezen dat ze de aanmeldingen verhogen, en marketeers kunnen technieken die werken niet negeren.

Daarom denk ik dat modal opt-in windows dat wel zullen doen blijf klimmen in 2017.

Ze zijn niet mijn favoriete ding en ik voeg ze nooit toe aan mijn websites. Maar als het doel is om aanmeldingen te verhogen, dan zijn modale vensters een trefzekere manier om dingen te laten rollen.

Nieuwe plug-ins kunnen zelfs target exit intent welke triggert een modaal wanneer de gebruiker probeert de site te verlaten. Andere modals verschijnen na x seconden of zijn ingesteld om te openen wanneer de gebruiker ver genoeg naar beneden scrolt.

Ongeacht hoe modals worden geactiveerd, hoe ze zijn ontworpen, of hoe je je erover voelt, ik denk dat ze er zullen zijn voor de lange termijn.

7. Illustratie & vectorkunst

Met nieuwe vectorontwerpprogramma's, zoals Sketch en Affinity Designer, breekt er een nieuwe golf van illustratoren op het web. Grafisch ontwerp en interfaceontwerp worden nu voortdurend samengevoegd met meer multidisciplinaire ontwerpers dan ooit tevoren.

Dit betekent dat we zullen zien veel meer aangepaste pictogrammen en volledige pagina's in de nabije toekomst.

Veel illustratoren zijn geoefende kunstenaars, dus ik denk dat we het zullen zien meer achtergronden van de volledige pagina gemaakt met digitale schildersoftware, in detail weergegeven zoals concept art.

8. Vaste schuifzijbalies

De eerste golf van een vast ontwerp gericht op navigatiebalken. Deze komen maar al te vaak voor, vooral in responsieve ontwerpen waar de vaste navigatiebalk is repliceert het gevoel van een native mobiele applicatie.

Maar in 2017 verwacht ik nog een ander plakkerig element te zien-de plakkerige zijbalk.

Bijna elke grote blog gebruikt dit soort plakkerige zijbalk. Het houdt de inhoud in beeld te allen tijde en verhoogt de kans dat gebruikers dat zullen doen interactie hebben met inhoud van de zijbalk.

Plus met tientallen gratis jQuery-plug-ins die dat kunnen repliceer het plakkerige zijbalkeffect. Het is gemakkelijker dan ooit om dit op elke website te plaatsen.

9. Inhoudsopgave in de pagina

Een recente case study vond dat longform content presteert beter dan shortform in zowel rankings als kwaliteit van gebruikersretentie. Toegegeven, dit is niet altijd waar, omdat sommige vragen snel kunnen worden beantwoord.

Maar met veel meer longform-inhoud op internet is het natuurlijk om te zien meer inhoudsopgaven toegevoegd aan artikelen. U ziet dit op lange beoordelingswebsites of in artikelen die opsplitsen in de vermelde items.

Het toevoegen van een inhoudsopgave kan de gebruikerservaring verbeteren en helpen verbreek de meting in kleinere stukken. Inhoudsopgave kan ook help uw site beter te rangschikken! Als Google uw pagina waardevol vindt, zou u dat kunnen krijg jump-links in de zoekresultaten.

Het is misschien waar dat ToC's op dit moment vrij schaars zijn. Maar ik verwacht dat deze trend in 2017 en vele jaren daarna zal uitbarsten.

10. Heldere kleurrijke ontwerpen

Ik weet niet zeker of deze trend voortkwam uit het minimalisme of als een reactie op het materiële ontwerp van Google. Maar ik ben op tientallen websites gestuit die gebruiken heldere pastelkleuren gemengd met andere levendige tinten om een ​​zeer fantasievol uiterlijk te creëren.

De homepage van Rentberry is een geweldig voorbeeld dat ook gebruikt tonnen hellingen. En het heeft zelfs het bovengenoemde “Aanbevolen in” badges onder! Twee trends op één site.

Je zult merken dat de kleuren doordring de hele pagina niet, en ze zijn gedempt met andere tinten wit en grijs.

Ik heb er genoeg van gezien levendige kleurenschema's om te geloven dat ze in de lift zitten.

11. Blader animaties

Webontwerpers weten wat scrollen is en hoe vreselijk het is. Maar dat is niet wat ik bedoelde met de titel “scrol animaties”. Ik heb nu veel sites gezien animeer inhoud in beeld wanneer u voorbij een bepaald gedeelte van de pagina bladert.

Deze trend is meestal beperkt tot startup homepages en SaaS-bedrijven die wat pit willen in hun ontwerp.

Ik kan niet zeggen of het een bijzonder nuttige trend is. Het zeker grijpt het in de gaten maar ik denk niet dat het veel verder gaat dan de esthetiek. Toch is het een trend die zich snel lijkt te verspreiden en wanneer spaarzaam gebruikt het kan heel netjes zijn.

12. Apps voor één pagina (SPA's)

Toepassingen met één pagina zijn websites gebouwd puur met Ajax-oproepen. JavaScript haalt inhoud van een server en laadt het dynamisch, dus de pagina wordt nooit vernieuwd.

Veelvoorkomende voorbeelden zijn sites zoals Gmail en Facebook. Maar met meer JS-technologie, Ik merk dat er steeds meer en meer SPA's worden ontwikkeld. Heck, zelfs CodePen kan als een SPA worden beschouwd.

Met krachtige frontend-bibliotheken zoals React & Aurelia wordt het nog eenvoudiger om in 2017 een SPA helemaal opnieuw te maken.

13. Schakel zoekbalken om

Vroeger waren dat zoekvelden waren altijd in zicht ergens op een webpagina, hetzij in de zijbalk of de navigatie. Maar de laatste tijd heb ik gemerkt dat er veel meer zoekvelden zijn standaard verborgen, en moet zijn in beeld gebracht.

Zeker een handige trend om ruimte besparen op de pagina terwijl alsnog de zoekfunctie toegankelijk houden. Als u niet zeker weet waar u een zoekformulier in een nieuw ontwerp moet plaatsen, kunt u overwegen een wisselveld te gebruiken dat is gekoppeld aan een vergrootglaspictogram in de navigatie..

14. Adblock-berichten

Het valt niet te ontkennen dat advertentieblokkering neemt toe. De enige vraag is hoe uitgevers deze trend zullen aanpakken. Sommige sites beleefd voeg berichten toe aan de advertentieruimten zoals Time.com. Op Hongkiat merk je dat interne advertenties om de leegte te vullen die verwijzen verder naar de site.

Een serieuze trend die ik zie toenemen is adblock contentblokken. Dit is een techniek om “blokkeer de adblockers”. Deze functie is al op veel grote sites zoals Business Insider en Forbes aanwezig. Helaas doet dit zowel de gebruiker als de uitgever pijn en komt het allemaal voort uit advertentietechnieken van slechte kwaliteit.

Uiteindelijk maakt het niet uit wie je de schuld geeft of waar je staat in het debat over het blokkeren van advertenties. Meer mensen installeren adblock-plug-ins en ik verwacht dit meer uitgevers om terug te duwen.

15. Zuivere SVG-pictogrammen

SVG-afbeeldingen zijn al in het web gesijpeld, maar ze worden met de dag groter. En ik heb het gevoel dat 2017 zal zijn een enorm jaar voor SVG's op internet.

Je kunt duizenden vinden gratis SVG-pictogramseries op sites zoals Flaticon als je weet hoe je moet zoeken. Maar je kunt ook codeer SVG's naar HTML, bijvoorbeeld door gebruik te maken van dit voorbeeld op CodePen.

Dus ontwerpers hebben een manier om SVG's te gebruiken en ontwikkelaars hebben ook een manier om SVG's te gebruiken. Moderne browserondersteuning ziet er goed uit over de hele linie, dus er is geen probleem met de compatibiliteit. Het enige dat nodig is, is genoeg ontwerpers om de kracht van SVG's herkennen en gebruik ze!

16. Adobe XD

Adobe uitgebracht een volledige bèta van Adobe XD in 2016 en is sindsdien snel gegroeid. Het momenteel ondersteunt zowel Mac als Windows, en zijn in de testfase alvorens volledig te worden uitgerold.

Je mag spotten met het idee dat een programma Schets overrompelt, maar Adobe is het belangrijkste softwarebedrijf van creatief werk met een reden. Plus Sketch is nog steeds Mac-alleen terwijl Adobe dat is op zoek om iedereen te ondersteunen.

Ik ben ervan overtuigd dat we het komende jaar veel meer over Adobe XD zullen gaan lezen. Het kan de go-to software worden voor het ontwerpen van UI-mockups-zodat we Photoshop eindelijk kunnen gebruiken als hulpmiddel voor fotomanipulatie (zoals bedoeld).

Met de opkomst van nieuwe software komen er tientallen tutorials en freebie GUI-kits ook. Je kunt veel Adobe XD-freebies vinden in Dribbble twee nieuwe XD-gefocuste freebie-sites Designmine en XD Guru.

17. Meer hamburgermenu's

Heb het lief of haat het, de hamburger is hier om te blijven. Er zijn tal van bruikbaarheidstudies die debatteren tegen menu's die niet zichtbaar zijn. Maar met een klein scherm en slechts zoveel alternatieven, is er voorlopig geen beter alternatief.

Hamburger pictogrammen zijn langzaam herkenbare symbolen worden voor nav-menu's. Zoals een vergrootglaspictogram impliceert “zoeken”, het hamburgerteken met drie baren is binnenkort synoniem voor “menu”.

Dit geldt al voor de meeste technisch onderlegde individuen. Maar met elk voorbijgaand jaar krijgen meer mensen smartphones en gaan ze op internet surfen. En ze leren het associeer die hamburger met een nav-menu met geen einde in zicht.

18. Pictogrammen voor productfuncties

Ik heb over deze trend op Treehouse geschreven, maar heb er onlangs niets over gezegd. En tegen 2017 in is deze trend zal enorm zijn. Het is waarschijnlijk de meest gebruikelijke manier om dit te doen deel producteigenschappen op een homepage.

Je begint met een lijst met functies maken voor uw product. Het product kan van alles zijn, van een SaaS-programma tot een WordPress-thema of zelfs van een fysiek item.

Dan kun je een van beide ontwerp aangepaste pictogrammen of vind een icon set om deze functies te vertegenwoordigen. Het is het beste om vermijd generieke functies zoals “betrouwbaar” of “snel” omdat de meeste mensen dit soort dingen verwachten.

Geef in plaats daarvan functies weer dat doet er eigenlijk toe. Als het een premium WP-thema is, maak dan een lijst met de responsiviteit, het aantal widgets of hoe het menu werkt.

Deze functiepictogrammen werk als visuals helpen verkoop elke functie. Alleen tekst is dat wel moeilijk te consumeren maar visuals zijn veel eenvoudiger in een oogopslag begrijpen.

19. CTA's boven de vouw

Call-to-actions zijn traditioneel geplaatst overal op een website. Maar met bezoekers minder tijd besteden aan websites, het is cruciaal om een ​​krachtige CTA te hebben vlak boven de vouw.

Deze call-to-actions kunnen knoppen, opt-in-formulieren of andere invoer zijn drijf mensen om wat actie te ondernemen zoals het aanmelden of lezen van een blogpost.

Ik kan u niet vertellen hoe u een CTA ontwerpt of hoe u deze kunt optimaliseren voor conversies. Maar ik kan wel zeggen dat de trend lijkt om deze CTA's te plaatsen boven de vouw en in helder zicht voor alle bezoekers om te zien.

20. Kleinere inhoudsgebieden

Waarnemers zijn zo groot geworden dat de meeste websites dat moeten doen stel een maximale breedte in. Het is veel moeilijker om zinnen te lezen wanneer ze 2000 pixels breed zijn in vergelijking met slechts 700 pixels breed.

Kleinere inhoud is gemakkelijker te consumeren, en maakt uiteindelijk een betere ervaring op inhoudzware websites.

Ik denk dat meer ontwerpers dit beseffen en dat het langzaam zal gebeuren de grootte van hun inhoudsgebieden verkleinen. Ik geef de voorkeur aan een maximale breedte van 750px, maar je zou zo klein als 600px of minder kunnen gaan.

Kortere paragrafen met minder zinnen en kleinere inhoudsgebieden zal altijd verhoging van de leesbaarheid. Grote publicaties zoals de NY Times kunnen afwijken van hun eigen structuurrichtlijnen. Maar voor een eenvoudige blog of bedrijfssite is de trend in aantocht langere inhoud met kleinere paragrafen en inhoudsgebieden.

Afsluiten

Er zijn veel andere trends die ik in dit bericht niet kon behandelen, maar ik denk dat deze 20 het meest interessant zijn. Naarmate we verdergaan in 2017, moet het duidelijk zijn welke trends exploderen en welke niet.

En als u andere ideeën of suggesties voor aankomende ontwerptrends heeft, kunt u hieronder een reactie plaatsen.