Ryan McCready, contentredacteur voor infographicsdienst Venngage, vertelt over wat er momenteel populair is in de wereld. grafisch ontwerp, en welke technieken dit jaar moesten worden opgegeven.

Gedurfde en levendige kleuren

De afgelopen jaren hebben veel technologieleiders gedempte en gemakkelijk leesbare kleuren gebruikt. Daarom probeerden ze een heel duidelijk ontwerpschema te creëren en te laten zien dat de elegante en functionele toekomst, die meestal in sciencefictionfilms wordt getoond, al is aangebroken.

Deze methode hielp het bedrijf bij de overstap nieuwe fase ontwikkeling en verenig al uw applicaties onder één kleur. Net als bij Spotify, dit gewaagd gebruik heldere kleuren maakte het merk herkenbaar.

De mode voor gedurfde en heldere kleuren in design komt voort uit de Material Design-principes van Google. Het bedrijf koos voor een vlak, gestroomlijnd en intuïtief ontwerp met de toevoeging van "onverwachte en energieke kleuren, evenals functionele en oogstrelende lettertypen en afbeeldingen."

Over het algemeen zijn veel huidige trends van 2017 ontstaan ​​onder invloed van de principes van Material Google-ontwerp.

We hebben ze ook gebruikt om dit reclamebeeld te maken. e-boek. Als gevolg hiervan werd het beeld ongelooflijk populair.

Als je niet kunt kiezen beste kleuren voor jouw ontwerp, lees waar het staat geweldige voorbeelden kleurenpaletten. En wees niet bang om kleuren te gebruiken die met elkaar contrasteren.

Vetgedrukte tekst

Vetgedrukte lettertypen trekken de aandacht van de lezer. Onwillekeurig let je op de grote en opvallende inscripties.

Mijn favoriete voorbeeld is Wired. Het gebruikt verschillende lettertypen om specifieke kopjes te markeren en de hiërarchische volgorde van informatie op de pagina te behouden.

Kijk maar eens:

Een andere goed voorbeeld met pakkende lettertypen - HubSpot. De tekst staat op de voorgrond en wordt ondersteund door afbeeldingen:

HubSpot begrijpt dat de hoeveelheid tijd die nodig is om informatie uit een tweet te absorberen elk jaar nul is. Om de aandacht van de lezer te trekken, gebruiken ze daarom korte en beknopte inscripties in vetgedrukte letters.

Bovendien surfen steeds meer mensen vanaf hun mobiele telefoon op internet. Vanwege schermen met hoge resolutie is er steeds meer behoefte aan het gebruik van vetgedrukte lettertypen. Om lezers te behouden, moet u uw inhoud dus op de juiste manier aanbieden.

Buffer benadrukt de koppen in het hele artikel, niet alleen aan het begin, waardoor artikelen op alle apparaten gemakkelijker te lezen zijn. Ik raad aan deze aanpak te gebruiken voor lange artikelen. Op deze manier help je lezers er doorheen te navigeren.

Deze methode hebben wij toegepast bij het maken van deze infographic. Combinatie vetgedrukt en interessante kleuroplossingen trekken de aandacht:

Lettertypen van Google Fonts

Ik gebruik Google-lettertypen heel lang, omdat ze universeel zijn. Als ik een ontwerp moet bedenken voor een online publicatie en dit vervolgens aan een presentatie moet toevoegen, weet ik zeker dat alle lettertypen goed bij elkaar passen. Ze zien er allemaal geweldig uit op elk blogplatform of website.

Trouwens, alle 810-lettertypen zijn helemaal gratis! Oh ja, mensen houden van gratis dingen. Ze houden ook van dingen die heel gemakkelijk te gebruiken zijn. Hier is een voorbeeld van het combineren van verschillende populaire lettertypen van Google:

Op onze website gebruiken we de lettertypen Roboto en Open Sans.

Originele foto's

Elk jaar groeit de hoeveelheid content, evenals de behoefte afbeeldingen van hoge kwaliteit. Zodat de foto's lang meegaan lange termijn proberen de auteurs ze zo universeel mogelijk te maken.

Er is slechts één probleem: de beste algemene afbeeldingen worden na verloop van tijd vaak verouderd. Als je nieuws volgt op het gebied van technologie en marketing, dan ken je deze foto waarschijnlijk wel:

Het wordt gebruikt op landingspagina's, blogs en zelfs in Instagram-posts. Eerlijk gezegd heb ik het zelf gebruikt voor een site waar ik een paar jaar geleden aan werkte. Door de populariteit van dergelijke stockfoto’s is de originaliteit van grafische inhoud sterk gedaald.

En de noodzaak om duidelijke en perfecte foto’s te gebruiken maakte de situatie alleen maar erger.

Als een lezer voor de honderdste keer dezelfde foto ziet, denkt hij dat de auteur van het artikel niet heeft geprobeerd op zijn minst een beetje origineel te zijn. Dus waarom zou je zo’n artikel überhaupt lezen?

Daarom moet u originele afbeeldingen gebruiken. Stop met het maken van populaire foto's, begin met het maken van uw eigen foto's.

Ik weet zeker dat iedereen in je team een ​​cameratelefoon heeft. Waarom gebruik je ze niet? Maak foto's van uw kantoor of logo en gebruik die foto's.

Ontdek of er onder jouw collega’s een aspirant-fotograaf zit. Geef hem een ​​paar dagen de tijd om een ​​kantoor te huren - en je hebt genoeg foto's voor een heel jaar!

Toen we onze nieuwe website maakten, hebben we foto's gemaakt van onze medewerkers en we waren erg tevreden met het resultaat.

Handgetekende afbeeldingen en iconen

Niet alleen de foto's moeten origineel zijn, maar ook de iconen en tekeningen. Sommige merken hebben dit al beseft en proberen zich op deze manier te onderscheiden van de massa. Deze aanpak voegt een persoonlijk en leuk element toe aan het ontwerp.

Sommigen zeggen dat deze trend er onprofessioneel en kinderachtig uitziet, maar toch zeker in het oog springt. Zoals de meeste trends van 2017 fungeert het als alternatief voor het steriele, schone ontwerp van de afgelopen jaren.

Dropbox maakt overal gebruik van handgetekende illustraties. Ze werden onderdeel van het merk van het bedrijf en maakten het herkenbaar.

Dergelijke illustraties creëren een ontspannen sfeer en verrukken het kind dat in de ziel van ieder van ons leeft. Ze zorgen ervoor dat het product er betaalbaarder uitziet. Ze zijn vooral effectief bij grote technologiebedrijven zoals Dropbox.

Een andere goed voorbeeld Deze aanpak is het matrassenbedrijf Casper. Bijna haar hele site bestaat uit handgetekende tekeningen. Hier is er een:

De trend werd ook opgepikt door de dienst MailChimp. In de reportage uit 2016 laat hij soortgelijke tekeningen ook zien.

Moz, een bedrijf dat marketingsoftware ontwikkelt, voegt illustraties in de kop van artikelen:

Soms komt onze liefde voor tekeningen tot uiting in andere projecten:

Keer terug naar de wortels van het minimalisme

Als je zou worden gevraagd om aan een vreemde uit te leggen wat minimalisme is, zou je waarschijnlijk antwoorden dat je dan de decorativiteit moet opgeven ten gunste van functionaliteit. Hoogstwaarschijnlijk zul je meteen aan neutraal denken kleurenpalet, bestaande uit tinten zwart, grijs en wit.

Het lijkt erop dat de ware geest van minimalisme is verdrongen door het gebruik van saaie zwart-witte kleurenschema's. Het lijkt mij dat dit met opzet is gedaan om het kleine schermformaat en het lage stroomverbruik te compenseren mobiele apparaten.

Maar in 2017 zal alles veranderen. Minimalisme zal terugkeren in zijn ware vorm. Dat betekent dat er meer kleur zal zijn. Tegenwoordig zijn mobiele apparaten net zo krachtig als computers, en sommige hebben zelfs betere schermen.

Mijn favoriete voorbeeld van minimalistisch design is het Medium-platformlogo. De makers waren in staat om verschillende kleuren te combineren en toch een minimalistische stijl te behouden.

Google heeft opnieuw een logo-herontwerp gemaakt ten gunste van minimalisme en een combinatie van felle kleuren. Het is opmerkelijk dat het dit bedrijf was dat als katalysator fungeerde voor de opkomst van veel nieuwe trends. De ontwerpers hebben de lettertypestijl enigszins ingekort en gepresenteerd nieuwe look een G-vormig logo dat ik erg leuk vind.

In dit alles is de geest van minimalisme voelbaar, maar de pers schreef er niet over. Mensen zijn vergeten wat echt minimalisme is. Het logo was niet kleurloos en in één enkele vorm gemaakt, waardoor niemand dacht dat het in een minimalistische stijl was gemaakt.

Het nieuwe logo was helder en opvallend, met behoud van een minimalistische uitstraling. Na het herontwerp begonnen de mensen om hen heen Google te imiteren, zoals ze eerder op andere aspecten hadden gedaan.

Zelf zijn we een meer minimalistische stijl gaan gebruiken voor de vormgeving van onze blogs.

Het eenvoudige beeldontwerp brengt gemakkelijk de nodige informatie over.

GIF's gebruiken

Iedereen (nou ja, bijna iedereen) houdt van GIF's. Ze helpen ons bij gesprekken omdat ze emoties soms beter kunnen overbrengen dan tekst.

Om ze te spelen heb je er bovendien geen nodig speciale programma's. Meestal GIF's klein formaat, en ze kunnen vrijwel overal worden ingesloten.

Ze zijn beter dan video's en afbeeldingen, vooral als u de laadtijd van de pagina en het verkeer wilt verminderen. Ik geloof dat GIF's dankzij hun veelzijdigheid nog meer zullen worden nuttig onderdeel ontwerp.

Ik vind het erg leuk om gifjes in de header van een artikel te plaatsen. In plaats van daar een saai stockfoto te plaatsen, neem je een paar minuten de tijd en maak je een GIF zoals deze.

U hoeft hiervoor geen speciale creatieve inspanningen te leveren, maar het zal zeker de aandacht vestigen op uw bericht op sociale netwerken. Hier is nog een goed voorbeeld van het gebruik van GIF's in de kop van een artikel.

Tweekleurige afbeeldingen

Dit is een combinatie van twee, meestal zeer heldere of contrasterende kleuren in één afbeelding. Om dergelijke afbeeldingen te maken, moet je je ontwerpvaardigheden inschakelen, maar het is de moeite waard.

Alleen een zeer bekwame ontwerper kan zulke prachtige tweekleurenafbeeldingen maken. Ik weet zeker dat ik zoiets niet kan maken, maar dat betekent niet dat je deze techniek uit je ontwerpplannen moet schrappen.

In 2016 verschenen er veel interessante sites, waar moderne trends zich duidelijk manifesteerden. Er is geen twijfel dat volgend jaar ons veel geweldige ontwerpoplossingen zal brengen. Natuurlijk zullen sommige trends afnemen, terwijl andere juist aan kracht zullen winnen. Het is best lastig om te voorspellen hoe het er daadwerkelijk uit gaat zien, maar je ziet nu al welke trends het webdesign in 2017 zullen domineren.

Aandacht, inhoud

De snelle ontwikkeling van het web heeft ertoe geleid dat ontwerpers zich te veel hebben laten meeslepen door het ontwerp zelf: zijbalken, headers, reclamebanners, pop-ups, social media buttons, calls to action, registratieformulieren... Dit alles is natuurlijk heel noodzakelijk, maar als gevolg daarvan werden sites overladen met functionele elementen die veel ruimte in beslag namen en gebruikers afleidden.' aandacht van het allerbelangrijkste: de inhoud.

Dus in 2017 zien we mogelijk een langzame beweging terug naar de basis, waarbij ontwerpers inhoud als primaire focus stellen. Sommige functionele elementen zal niet langer relevant zijn, het is heel goed mogelijk dat hun ontwerp zal worden heroverwogen, misschien zal er nieuwe, begrijpelijker functionaliteit verschijnen. Men voelt al dat de trend naar vereenvoudiging aan kracht wint, dus de beweging naar de basis is geen achteruitgang, maar een beweging voorwaarts. De gebruiker heeft dit niet nodig mooie knopen CTA's of aanmeldingsformulieren: het enige waar mensen tegenwoordig om geven is inhoud, en ontwerpers moeten deze op een manier leveren die het voor bezoekers van de site gemakkelijk maakt om met de inhoud in aanraking te komen.

Het einde van het tijdperk van plat design

Het lijkt erop dat het platte ontwerp het hoogtepunt van zijn ontwikkeling heeft bereikt: er zijn veel websites verschenen die er precies hetzelfde uitzien, er zit geen gevoel van individualiteit in hun ontwerp en creatieve aanpak. Dezelfde technieken, vergelijkbare elementen, gemeenschappelijk kleurenschema's– dit alles leidde tot merkbare eentonigheid in het websiteontwerp.

Tot voor kort was plat design een zeer ‘hot’ trend, het had zijn eigen esthetiek, het tegenovergestelde van de esthetiek van skeuomorfisme, en bovendien paste plat design heel goed in mobiele omgeving. Maar het verlangen naar eenwording is in sommige opzichten niet ten goede gekomen aan het webontwerp als geheel: sites en applicaties zijn zo op elkaar gaan lijken dat ontwerpers aanzienlijke inspanningen moeten leveren om hun projecten te onderscheiden van de concurrentie. Plat design gaat natuurlijk nergens heen, maar zijn triomftocht als de meest actuele trend lijkt voorbij.

Geometrische vormen, lijnen en patronen

Geometrische vormen en diverse patronen waren één van de meest opvallende trends van het afgelopen jaar en deze trend zal ook in 2017 blijven bestaan. Er zijn veel manieren om geometrische vormen te gebruiken bij het ontwerpen van websites. Dit zijn niet alleen afbeeldingen die in een cirkel zijn ingeschreven, die overal te vinden zijn - de verscheidenheid aan vormen en patronen is zo groot dat niets de verbeeldingskracht van de ontwerper beperkt. Het gebruik van interessante patronen, lijnen en vormen kan een ontwerp naar een hoger niveau tillen. nieuw niveau en geef de site persoonlijkheid. Een plat ontwerp ontneemt websites hun identiteit, dus zoeken ontwerpers naar manieren om dit probleem op te lossen en verschillende niet-standaard elementen helpen hen om verschijning webpagina's uniek en herkenbaar.

In 2016 was er een zeer opvallende trend naar het gebruik van headers met niet-standaardontwerpen. Er zijn veel sites verschenen waarbij het belangrijkste element op de hoofdpagina de naam was. Het logo, meestal aan de linkerkant bovenste hoek pagina's, vaak plaatsgemaakt voor een spectaculaire getypte titel prachtig lettertype. Dit is allemaal een gevolg van het verlangen naar originaliteit: ontwerpers zijn op zoek naar een mogelijkheid om hun creativiteit tot uitdrukking te brengen en indrukwekkende typografie te creëren op een geweldige manier Geef de site de persoonlijkheid die hij nodig heeft. Zeker, deze tendens zal vrij lokaal zijn, maar het is onwaarschijnlijk dat de invloedssfeer zich verder uitstrekt dan kunstprojecten en de entertainmentsector. Er moeten echter niet-standaard koppen worden gebruikt als de stijl van het project dit toelaat. In alle andere gevallen zou een klassiek logo bovenaan de pagina passender zijn.

Om de aandacht van gebruikers te trekken, gebruiken veel merken tweekleurige afbeeldingen en ongebruikelijke kleurverlopen in het ontwerp van hun websites. Duotone is een opvallende trend van het afgelopen jaar geweest en het lijdt geen twijfel dat veel ontwerpers deze techniek in de toekomst zullen blijven gebruiken. Misschien is het soms niet alleen een duotoon; de afbeelding kan ook andere kleuren bevatten als je hierdoor het gewenste effect kunt bereiken. Tegelijkertijd zien hedendaagse beelden waarin duotoon wordt gecombineerd met een verloop er heel fris uit. Plat ontwerp 'hielp' om de meeste hellingen kwijt te raken, maar nu zijn ze weer terug, in een aangepaste, maar tegelijkertijd zeer aantrekkelijke vorm.

Uitgebreid gebruik van animatie

Animatie wordt steeds gebruikelijker bij het ontwerpen van websites, omdat het een geweldige manier is om gebruikers te vertellen wat ze moeten doen of om simpelweg het hoofdidee sneller over te brengen. Voorheen hadden gebruikers te maken met gewone GIF's, maar nu wint een trend aan populariteit, waarbij animatie wordt uitgevoerd met behulp van de mogelijkheden van SVG en CSS. Deze aanpak is complexer, maar stelt je tegelijkertijd in staat het idee van vrijwel elke ontwerper te implementeren.

Het is duidelijk dat het gebruik van animatie in 2017 nog gebruikelijker zal worden, omdat inhoud interactief wordt en animatie de interactie met de gebruiker sneller en gemakkelijker maakt. Tekst lezen of een video bekijken kost tijd, maar met behulp van animatie kun je je doelen in een veel kortere tijd bereiken.

Vereenvoudigde navigatie

Het aandeel mobiele internetgebruikers groeit gestaag; mensen gebruiken steeds vaker een smartphone of tablet om toegang te krijgen tot het netwerk desktopcomputer. Naarmate de samenleving mobieler wordt, werken eerdere benaderingen van websitenavigatie niet meer. Gebruikers moeten worden geholpen bij het navigeren op de site, en dit kan alleen worden gedaan door de navigatie te vereenvoudigen.

Sites met grote menu's behoren tot het verleden; gebruikers willen niet langer veel tijd besteden aan het zoeken naar de informatie die ze nodig hebben, dus steeds meer sites laten complexe navigatie achterwege en laten 4-5 items in het menu staan. De overige navigatie-elementen, indien aanwezig, blijven verborgen en verschijnen alleen wanneer dat nodig is.

Bij UX-design staat een positieve gebruikerservaring centraal. Daarom moeten micro-interacties gebruikers helpen begrijpen hoe ze met de interface kunnen communiceren zonder onnodige verwarring. Bladeren door foto's, scrollen door afbeeldingen en andere gebruikersacties moet zo natuurlijk mogelijk zijn. Door de gebruiker te helpen effectief met de applicatie te communiceren, kunt u micro-interacties gebruiken om mensen aan te moedigen de inhoud te bekijken. Het belangrijkste is om constant de aandacht van de gebruiker vast te houden door hem aan te bieden handige opties bekijken interessante informatie. De wijdverbreide acceptatie van mobiele apparaten heeft micro-interacties tot een van de meest opvallende trends van 2016 gemaakt, en er bestaat geen twijfel over dat deze trend het komende jaar een van de meest relevante zal zijn.

Aangepaste afbeeldingen

Er wordt steeds meer vraag naar designelementen die eruitzien alsof ze met de hand zijn getekend. Dit geldt niet alleen voor afbeeldingen, het is heel vaak te zien in design. handgeschreven lettertypen, originele afbeeldingen, niet-standaard knoppen of pictogrammen. Kleine veranderingen in het ontwerp van bekende elementen kunnen de site individualiteit geven, waardoor deze ‘levendiger’ en aantrekkelijker wordt voor gebruikers. Als de specifieke kenmerken van het project een informele aanpak mogelijk maken, is het gebruik van aangepaste afbeeldingen een uitstekende manier om het probleem op te lossen zonder gebruik te maken van standaardelementen.

Waardestijging landingspagina's

Omdat gebruikers tegenwoordig met verschillende soorten inhoud omgaan, is het van cruciaal belang om hen zo snel mogelijk te voorzien van de informatie die ze nodig hebben. Daarom zullen we in 2017 een stijging zien in het belang van landingspagina’s. Ontwerp startpagina er zal nog steeds veel aandacht aan worden besteed, maar soms staat er zoveel inhoud op de site dat deze er gewoon compact op moet worden geplaatst landingspagina's. Marketeers hebben aan deze trend bijgedragen door verkeer naar speciale landingspagina's te leiden, zodat gebruikers sneller kunnen vinden wat ze nodig hebben.

In plaats van een conclusie

De tijd zal leren welke trends het toneel zullen verlaten en welke zullen blijven. Er zullen ook nieuwe trends verschijnen - ondanks dat veel mensen denken dat webdesign niet meer in ontwikkeling is, is dit absoluut niet het geval. Volgend jaar kunnen we dus allemaal veel mooie websites met bijzondere ontwerpen verwachten.

Op 11 oktober vond een lezing plaats van de art director van de Vintage Web Production studio Olga Sjevtsjenko, gewijd aan webdesign en digitale trends in 2018. Olga is lid van de Awwwards-jury en beoordeelt elke dag honderden nieuwe sites, ontwikkeld door bureaus en ontwerpers van over de hele wereld. Hierdoor blijft zij op de hoogte van de laatste ontwikkelingen en trends op het gebied van webontwikkeling en design. We hebben de belangrijkste boodschappen van de lezing opgenomen, en met volledige versie je kunt het vinden op de link.

Resultaten 2017

Ik denk dat we, voordat we 2018 gaan analyseren, moeten bedenken wat er in 2017 nieuw is op internet. Oekraïne ontwikkelt zich actief, maar loopt nog steeds achter op de belangrijkste marktspelers, zowel wat betreft technologie als ontwerpkwaliteit. Als we er volgend jaar in slagen om op zijn minst enkele van de mondiale digitale trends uit 2017 te introduceren, zal dit dus al een groot succes zijn.

Groot menu

Het was een trend. Voor velen is dit een musthave. En nu zijn er mensen die dit als slechte manieren beschouwen. Na het verschijnen van hamburgers begon iedereen het menu onder één knop te verbergen, wat voor veel controverse zorgde. Maar deze drie balken waren de roodste zone op de heatmap voor sitegebruik die we hebben samengesteld na onderzoek naar gebruikersgedrag. Maar uiteindelijk verscheen er, na op de burger te hebben geklikt, een klein blokje op de pagina met delen van de site, wat geen zin had om te verbergen.

Daarom verscheen het in 2017 groot menu, waardoor niet een blok aan de zijkant, maar het hele scherm wordt gemarkeerd. Het principe is dit: als je iets verbergt, zorg er dan voor dat het er mooi en open uitziet. Zodat de gebruiker, nadat hij het menu heeft gevonden, meer tevreden is dan verwacht.

Groot menu. Website radioactivefilm.com

Nu is een groot menu een fetisj geworden voor wereldstudio's, net zoals de 404-pagina vroeger was. Ontwerpers begonnen een compositie van elementen erin te bedenken, hover en aanvullende informatie toe te voegen. Het voegt niet alleen esthetiek toe aan de site, maar breidt ook de functionaliteit uit vanwege de grootte.

Mode-effecten

Glitch, morphing, geometrie, explosie van kleur, minimalisme. Dasha Shapovala, de ideoloog van Mercedez-Benz Fashion Week in Kiev, en ik bespraken trends in de mode, en ik sprak over nieuwe trends op internet. En wij vonden gemeenschappelijke kenmerken op totaal verschillende gebieden.

Het maken van een gewone website is niet zo eenvoudig als het creëren van een effectieve online marketingtool met een modern ontwerp. Een mooie en goed geoptimaliseerde website vergt veel tijd, investeringen en zelfs inspiratie. Hoe ontwerp je een website om meer klanten aan te trekken? Laten we het in het artikel ontdekken.

Volgens Internet Live Stats zijn er meer dan 1,2 miljard websites in de wereld. Elke seconde wordt deze waarde ongeveer 10 eenheden hoger. Ongeacht de branche waarin u werkt, uw website moet zowel qua technologie als qua ontwerp up-to-date zijn. In dit artikel zullen we ons concentreren op het uiterlijk van de site - hoe deze er in 2017 uit zou moeten zien. Lettertypen die te helder, kleurrijk en pretentieus zijn, worden lange tijd als achterhaald beschouwd. Pictogrammen vervangen afbeeldingen, zodat gebruikers gemakkelijker door menu-items kunnen navigeren. Deze feiten zijn echter bekend bij de meeste specialisten die betrokken zijn bij internetmarketing. Uit dit artikel leert u hoe modern website-ontwerp eruit zou moeten zien.

1. Webdesign is vooral gericht op mobiele apparaten.

De zogenaamde mobile-first benadering van websiteontwikkeling bestaat al meer dan 5 jaar. Hoewel dit geen nieuwe trend is, is het zeker de moeite waard om te vermelden, omdat het een must-have is geworden voor elke bedrijfseigenaar als hij de omzet wil verhogen via dit marketingkanaal.

Wat betekent mobile-first-aanpak? Dit is webontwikkeling die zich richt op mobiele responsiviteit. Het gebruik van responsief ontwerp is volkomen logisch, vooral als je kijkt naar de officiële statistieken die zijn gepubliceerd door StatCounter, een onafhankelijk webanalysebureau. Volgens hem bedraagt ​​het aandeel internetgebruik via mobiele apparaten 51,3%. Om deze reden is Google gestopt met het ondersteunen van zijn Instant Search-service. Deze functie was beschikbaar voor desktopgebruikers en bood zoekresultaten terwijl iemand zojuist zijn zoekopdracht invoerde. Met meer verkeer kunnen bedrijfseigenaren meer omzet genereren. Daarom is het volkomen logisch om je te richten op een breder publiek.

2. Verborgen navigatie

Velen van ons hebben gehoord dat om het voltooiingspercentage van een doelactie door de gebruiker te verhogen, het noodzakelijk is om het aantal vereiste klikken te minimaliseren. Hoe minder klikken, hoe hoger de conversie. Ondanks dit feit impliceert modern webdesign vaak de aanwezigheid van een verborgen pop-upmenu dat verschijnt na het klikken op de zogenaamde "hamburger". Deze oplossing is gebaseerd op een responsieve ontwerpaanpak, waarbij het nodig is om het menu zo te plaatsen dat het er op mobiele apparaten correct uitziet.

Traditionele sitenavigatie, die elementen bovenaan de pagina bevat, neemt te veel ruimte in beslag en beperkt de mogelijkheid om de aandacht van de gebruiker te vestigen op betekenisvolle inhoud. Het creëren van verborgen navigatie heeft nog een ander voordeel waarmee u een aantrekkelijkere en effectievere startpagina kunt maken.

3. Ruim eerste scherm

Het pop-upmenu wordt gemaakt extra ruimte op het eerste scherm van de startpagina. Hiermee kunt u de belangrijkste voordelen van het bedrijf benadrukken, door grotere lettertypen en aantrekkelijkere en leesbare pictogrammen te gebruiken, om effectief de aandacht van gebruikers te trekken. Het tijdperk van ‘dan’ meer informatie, hoe beter” behoort al tot het verleden. Het is belangrijk dat de gebruiker een soepel pad volgt, waarvan de bestemming de succesvol voltooide doelactie is. Meer vrije ruimte biedt ontwerpers de mogelijkheid om hun eigen ideeën te realiseren beste ideeën voor de hoofdpagina van de site, waardoor dit marketingkanaal uniek en aantrekkelijker wordt voor gebruikers. De beste website-ontwerpen bevatten een eerste scherm met achtergrondafbeelding volle breedte met diverse zachte kleuren. Navigatiegebieden moeten gemakkelijk herkenbaar en leesbaar zijn voor gebruikers.

4. Speciale navigatiegebieden

Dankzij het verborgen menu en het ruime eerste scherm kunt u uw site zo ontwerpen dat de aandacht van gebruikers wordt gevestigd op enkele belangrijke navigatie-elementen, waardoor ze sneller en gemakkelijker beslissingen kunnen nemen. Deze aanpak moedigt gebruikers aan om door het menu te navigeren en de benodigde stappen te voltooien, zonder tijd te verspillen met zoeken de gewenste knop. Dankzij het ruime eerste scherm kun je de belangrijkste elementen met meer uitlichten grote lettertypen en er meer ruimte tussen te laten, waardoor de nuttigste inhoud wordt benadrukt.

5. Ontwikkeling van website-ontwerp in Material Design Lite-stijl

Material Design is een belangrijk verlengstuk geworden van het zogenaamde platte design, een veelgebruikte trend van de afgelopen jaren. Android-ontwerp is gemaakt als interface voor mobiele apparaten, maar heeft nu ook desktops volledig veroverd. Deze visuele benadering maakt bruikbaarheid een kerncomponent van het gehele ontwerp. Material Design Lite (MDL) is de volgende generatie Material Design. Het bevat richtlijnen, lay-outsets en een algemene structuur met tools waarmee elke ontwerper snel en eenvoudig een MDL-site kan maken met behulp van een handige selectie paletten.

6. Grote pictogrammen

De populariteit van iconen in website-ontwerp wordt verklaard door het feit dat een persoon na drie dagen 65% van de visuele informatie onthoudt en slechts 10-20% van de geschreven of gesproken informatie. Dat is waarom menselijk brein Het is gemakkelijker om afbeeldingen te verwerken dan tekst. Het is vermeldenswaard dat het pictogram moet overeenkomen met de tekst waarop het betrekking heeft, om gebruikers niet te verwarren. Verveelde beelden van mensen met overdreven en kunstmatige gezichtsuitdrukkingen zijn achterhaald. Pictogrammen moeten ook vector zijn om correct op elk apparaat te kunnen worden weergegeven. U kunt bij ons voorbeelden van website-ontwerp bekijken en kennis maken met ons werk.

De belangrijkste vereisten voor het gebruik van pictogrammen in webdesign:

• Het icoontje moet overeenkomen met de inhoud;
• Het moet een duidelijke boodschap bevatten;
• Het moet vector zijn;
• Het pictogram moet gemakkelijk leesbaar zijn, of het nu klein of groot is.

Laten we verder gaan met de nieuwste trends bij het kiezen van lettertypen en kleuren voor de site.

7. Eenvoudige lettertypen en zacht kleurenpalet

Giftige kleuren in webdesign raakten ongeveer vijftien jaar geleden uit de gratie. Nu zijn ontwerpers overgestapt op ingetogen pasteltinten, zachte, niet-flitsende kleuren. Het 60-30-10-schema verliest zijn relevantie niet: in modern webdesign Neutrale kleuren van wit tot lichtgrijs hebben de overhand, 30 procent van de ruimte wordt in een helderdere tint gebruikt en slechts 10% is in een rijke kleur geschilderd, waardoor een oproep tot actie ontstaat.

Webontwikkeling is nu het tijdperk van eenvoudige schoonheid ingegaan, waar grote en eenvoudige lettertypen met verschillende zachte tinten. Hoe valt deze trend te verklaren? Deze aanpak is zinvol omdat de aandacht van gebruikers uitsluitend op de belangrijkste stukjes informatie wordt gevestigd.

We hebben een basislijst met nieuwe website-ontwerptrends gegeven. Sterker nog, we zijn met veel meer, waardoor het materiaal te uitgebreid is voor één artikel. We zullen u zeker blijven vertellen over de nieuwste ontwerpoplossingen op het gebied van webontwikkeling op onze blog.

Ons team helpt u graag bij het creëren van een responsive website-ontwerp waarin de belangrijkste trends op het gebied van webdesign zijn verwerkt efficiënte technologieën bereiken maximale optimalisatie. Schrijf ons op en wij helpen u graag verder!

” door John Moore Williams, hoofd contentstrategie bij Webflow.

Het einde van het lopende jaar staat voor de deur en elke webontwerper heeft zich dit minstens één keer afgevraagd belangrijke kwestie: Wat zal webdesign de komende 2017 definiëren? Ik besloot het antwoord op deze vraag te vinden en vroeg WebFlow-ontwerpers welke trends zij dachten dat de komende 365 dagen zouden domineren. Ik heb ook mijn eigen commentaar op hun gedachten gegeven.

Laten we eerst de mening vragen van Webflow's hoofdontwerper Sergie Magdalin.

1. Inhoudsgedreven ontwerp

“De rangschikking van ontwerpelementen binnen een bepaalde structuur moet zodanig zijn dat de lezer het hoofdidee gemakkelijk kan begrijpen zonder zijn normale leessnelheid te verminderen” -Herman Zapf

De afgelopen jaren hebben we een dramatische verschuiving gezien in het denken over de rol van design in het bedrijfsleven. Voorheen werd design gezien als de laatste stap in het proces van het creëren van een object: de ontwerper-goochelaar komt aan het einde en strooit magisch stof over ons product om het beter te maken dan de concurrentie.

Het was heel interessant om de metamorfoses te zien die plaatsvonden met ontwikkelingsprioriteiten.

En het mooiste aan deze metamorfoses was de overgang naar een model waarbij de inhoud weer aan het hoofd van de tafel staat. Ontwerpers over de hele wereld hebben zich gerealiseerd dat gebruikers websites voornamelijk bezoeken vanwege de inhoud, of het nu gaat om korte tweets, lange gespecialiseerde artikelen of de nieuwste internetmemes. De ultieme rol van design is om inhoud op de meest aantrekkelijke, begrijpelijke manier te presenteren en er de beste resultaten uit te halen.

Dit is een van de redenen voor de verschuiving van ‘skeuomorf’ ontwerp (waarbij elementen zo veel mogelijk lijken op hun tegenhangers in de echte wereld) naar een plat, minimalistisch ontwerp. Vanuit deze overwegingen heeft Google Material Design gecreëerd.

Zoals de derde wet van Newton stelt, is er uiteraard voor elke actie een even sterke reactie. Veel ontwerpers zijn van mening dat de mode voor plat design de geest van design heeft ‘gedood’. We verwachten dat dit debat het komende jaar zal voortduren, maar de focus zal blijven liggen op de inhoud – de basis van elk ontwerpwerk.

2. Hoogwaardige interactie tussen ontwerpers en ontwikkelaars en ontwerpers onderling

Het belang van design bij het vormgeven van het bedrijfsleven wordt steeds groter, dus er wordt steeds meer nadruk gelegd op het samenwerken van ontwerpers met hun collega-ontwerpers en hun collega-ontwikkelaars.

Deze zorg voor interactie met ontwerpers is gedeeltelijk ontstaan ​​door de enorme hoeveelheid mobiele en webapplicaties die tegenwoordig worden ontwikkeld. Naast het feit dat gigantische bedrijven als Google, Facebook, Twitter en LinkedIn het gigantische werk vereisen van een ontwerpteam met absoluut verschillende kanten moeten ontwerpers altijd op dezelfde lijn zitten. Dit betekent dat er behoefte is aan meer communicatie over het project en hoe dit het meest effectief kan gebeuren samenwerking.

Om deze taak eenvoudiger te maken, zijn er veel tools gemaakt, van teamsjablonen en borden in Webflow's Team tot grafische editor Figma-interfaces die veranderingen in realtime tonen. Ik ben er zeker van dat deze platforms in 2017 verbeterd en aangevuld zullen worden.

Als we het hebben over de interactie tussen ontwerpers en ontwikkelaars, wordt daar veel aandacht aan besteed belangrijk proces overdracht van werk. In plaats van zware en omvangrijke statische afbeeldingen te sturen, kunnen ontwerpers nu bijvoorbeeld live gerenderde mockups delen dankzij tools als InVision, Marvel en UXPin.

Carson Miller ging in op dit onderwerp in zijn recente artikel “The Future of Front-End Design” op TechCrunch:

“Vroeg of laat zullen tools voor het maken van ontwerpen en ontwerppatronen de front-end ontwikkeling volledig vervangen. Je kunt eenvoudig creëren kwaliteitsbasis voor al uw frameworks zonder dat u handmatig code hoeft te schrijven.”

3. Vereenvoudigd proces van ontwerper tot ontwikkelaar

Met de hierboven genoemde ontwerp- en prototypingtools kunt u visualiseren verschillende stadia samenwerking door middel van visualisatie - dit kan variëren van geanimeerde Keynote-bestanden tot volledig functionele websites. Deze manier van delen van werkmateriaal verkort de responstijd binnen het project, waardoor de kwaliteit van het ontwerp toeneemt, de snelheid van het ontwikkelteam toeneemt en de kans op teleurstelling over het resultaat wordt verkleind. Het verbetert ook de interactie met de klant. Voor veel WebFlow-gebruikers zijn klantbijeenkomsten bijvoorbeeld uitgegroeid tot volwaardige werkbijeenkomsten waar ontwerpers ideeën snel kunnen implementeren en iedereen zijn ideeën vrijwel onmiddellijk kan testen.

Webdesigntrends voor het komende jaar volgens productontwerper Gadzhi Kharkharov:

4. Grote, luide kop

Nu de wereld van webdesign zich steeds meer op inhoud gaat richten, komt het steeds vaker voor dat er inspirerende koppen op websites verschijnen met bijpassende lettertypen die net zo groot en krachtig zijn als de inhoud ervan.

De #MadeInWebflow Heco-partners

Zoals u in de voorbeelden kunt zien, verwijzen ‘groot’ en ‘vet’ niet alleen naar de beschrijving van het lettertype. Het gaat er eerder om dat een aanzienlijk deel van het startscherm wordt besteed aan een eenvoudige, maar krachtige en op zichzelf staande verklaring over het product of de dienst. Zo'n kop moet de essentie bevatten en begrijpelijk zijn voor elke bezoeker, waarbij onnodige gewichtigheid wordt vermeden (oké, de uitdrukking "Ontwerp het onmogelijke" klinkt misschien te luid).

In de huidige drukke, met informatie overladen omgeving werken korte, krachtige uitspraken als deze goed voor elk merk.

5. Complexe opmaak die voortkomt uit de basisprincipes van grafisch ontwerp

Als we de ontwikkeling van webdesign (door ten minste, de visuele kant), moeten we ons wenden tot de geschiedenis van de ontwikkeling van grafisch ontwerp.

De afgelopen jaren is de lay-out van webpagina's beperkt geweest CSS-mogelijkheden, maar nieuwe modules zoals Flexbox en CSS-raster(die in maart 2017 wordt uitgebracht), stelt u in staat de meest gedurfde ideeën in webmarkeringen te implementeren.

Ons hoofdtaak nu - om te begrijpen hoe de nieuwe rasterlay-outmogelijkheden van blokken binnen het raamwerk zouden moeten werken adaptief ontwerp.

Hier zijn enkele voorbeelden van wat u kunt verwachten (ervan uitgaande dat u een browser heeft die CSS Grid ondersteunt, zoals Firefox Nightly, Safari Technische preview of Chrome Canarische):

Experimenteel lay-outlab Jen Simmons

Let op de stijl van het hoofdblok - een duidelijke verwijzing naar de geschiedenis van grafisch ontwerp.

Raster per voorbeeld

Op de website kunt u nog meer voorbeelden zien.

6. Meer SVG-bestanden

SVG (schaalbare vectorafbeeldingen) vectorafbeeldingen) heeft meer voordelen voor webontwerpers en ontwikkelaars dan traditionele afbeeldingsformaten zoals JPG, PNG of GIF.

De belangrijkste voordelen van SVG worden beschreven in de naam van het formaat: schaalbaarheid en vector. In tegenstelling tot op rasters en pixels gebaseerde formaten bestaan ​​SVG-afbeeldingen uit vectoren: wiskundige beschrijvingen van de vorm van een object. Dit betekent dat SVG resolutie-onafhankelijk is en dat afbeeldingen in dit formaat er geweldig uitzien op elk scherm en apparaat. U hoeft zich geen zorgen te maken over wazige beelden op het netvlies.

Maar dat is niet alles. SVG staat er ook om bekend dat er geen HTTP-verzoeken hoeven te worden verzonden. Als u ooit de laadsnelheid van uw website heeft gecontroleerd, is het u wellicht opgevallen dat deze HTTP-verzoeken uw site aanzienlijk kunnen vertragen. Er is geen dergelijk probleem met SVG.

7. Hulpmiddelen voor op regels gebaseerd responsief ontwerp

Responsive design heeft de manier waarop we naar webapplicaties kijken en maken volledig veranderd.

Maar vreemd genoeg is het werkingsprincipe van ontwerpprogramma's helemaal niet veranderd. De meeste van deze tools werken als volgt: u moet keer op keer een soortgelijke pagina maken verschillende apparaten en machtigingen. In een sector die snelle ideeëngeneratie vereist, snelle ontwikkeling En snel beginnen is een dergelijke tijdverspilling eenvoudigweg onaanvaardbaar.

Er wordt verwacht dat een nieuwe golf van ontwerptools (zoals Figma) gebaseerd zal zijn op ‘regels’ die het uiterlijk van sites op internet aanpassen. verschillende schermen en apparaten, waardoor het aantal herhaalde ontwerperacties wordt verminderd. Dergelijke tools zijn gebaseerd op de ruimtelijke relaties van elementen en als we de schermgrootte of het apparaat veranderen, streven ze ernaar deze relaties te behouden door de afmetingen van de elementen en de opvulling ertussen te veranderen.

Trouwens, tegenwoordig zijn er vergelijkbare tools voor de lay-out van websites, niet alleen voor ontwerpers, maar ook voor gewone gebruikers. TruVisibility.com bijvoorbeeld - het platform past het gemaakte ontwerp aan volgens bepaalde regels, volgens welke de lay-out en afmetingen van elementen worden aangepast aan de schermgrootte. Het enige dat overblijft is een paar aanpassingen maken om ervoor te zorgen dat de webpagina er op apparaten uitziet zoals deze zou moeten zijn. De gebruiker hoeft de versie niet opnieuw aan te maken mobiele apparaten, en dit bespaart hem veel tijd.

Designtrends voor 2017 volgens Ryan Morrison, senior grafisch ontwerper.

8. Meer heldere kleuren

Toen in 2016 het tijdperk van minimalisme en brutalisme in webdesign begon, probeerden ontwerpers meer persoonlijkheid aan hun werk toe te voegen zonder verder te gaan dan modieuze stijlen. En er zijn op zijn minst een paar gevallen waarin heldere en krachtige kleuren met veel succes zijn gebruikt.

Kijk eens naar de nieuwe Asana-site met een vleugje kleur:

Nieuw icoon Instagram-apps kreeg veel kritiek, maar dit herontwerp heeft het merk ongetwijfeld opgefrist:

Voor alles wat Stripe doet is geen aparte weergave nodig:

Zoals je kunt zien, zijn het niet alleen heldere en gedurfde kleuren. Ook kleurverlopen zijn weer helemaal in de mode, waarbij kleuren overvloeien en vervagen in tinten die doen denken aan een middaglucht of een brandende zonsondergang. Het is een soort renaissance van het naturalisme met levendige kleuren en gedurfde kleurverlopen, en ik kijk er persoonlijk naar uit om meer van dit soort werk te zien in 2017.

Hoewel het misschien de moeite waard is om de helderheid een beetje te verminderen? We houden je in de gaten, Asana.

9. Meer nadruk op animatie

Geanimeerde elementen spelen al heel lang sleutelrol in de webinterface, en deze trend zal zich in 2017 voortzetten. Zolang ontwerpers toegang hebben tot tools om boeiende animaties te ontwikkelen, zullen we zien dat deze effecten zichtbaarder en geavanceerder worden.

Dit onderwerp is vooral belangrijk omdat het maken van animaties elke dag eenvoudiger wordt. Op de Design & Content Conference 2016 benadrukte animatiegoeroe Val Head dat ontwerpers bij het ontwerpen van geanimeerde elementen de doelstellingen en behoeften van het merk in gedachten moeten houden om het effect te bereiken dat makers van inhoud verwachten. Als dit advies wordt opgevolgd, zal de animatie taken uitvoeren die betekenisvol zijn voor het merk en de gebruiker niet alleen maar migraine bezorgen.

10. Ongebruikelijke markeringen

2016 staat, net als de voorgaande jaren, bekend om de eindeloze discussies dat webdesign doodgaat of zijn geest verliest.

Degenen die iedereen ervan willen overtuigen dat webdesign dood is, overdrijven duidelijk. Velen blijven zoeken naar manieren om inhoud op nieuwe manieren aan gebruikers te presenteren. Een van de meest verleidelijke manieren is om het systeem te doorbreken en de gebruikelijke rasterindeling te negeren die wordt gedicteerd door de regels van responsief ontwerp.

De “gebroken” markeermethode omvat elementen die verder gaan dan het zorgvuldig uitgelijnde raster. Dergelijke technieken kunnen soms zelfs onaangenaam lijken voor het oog. Bijvoorbeeld:

Teksten en afbeeldingen die met elkaar botsen:

Teksten en afbeeldingen verspreid (schijnbaar) willekeurig over de pagina:

Dit was het eerste deel van de vertaling van het artikel “18 webdesigntrends in 2017”. Bent u het eens met de mening van Webflow-experts? Wat voor soort webdesign zal volgens jou het komende jaar in de mode zijn?