Trendy kleuren in webdesign. Vermijd "typische" stockfoto's
Elk jaar groeit het aantal sites dat verrast en verrukt met nieuwe ontwerpfuncties. Twee jaar geleden plaatsten we een vertaling van Web Design Trends 2015. Wat is er sindsdien veranderd? De nadruk blijft liggen op afbeeldingen van hoge kwaliteit en minimalisme, grote lettertypen en interactieve elementen (bijvoorbeeld verborgen menu). De technologieën staan echter niet stil en webdesigners experimenteren met dynamiek, animatie, de positie van objecten op het scherm, zonder dat dit ten koste gaat van de siteprestaties. We brengen u een overzicht van de trends die traditiegetrouw door onze westerse collega's worden gezet, onder uw aandacht.
1. Het principe van "mobile-first"
De naam van het principe spreekt voor zich: het ontwerp is ontwikkeld, in de eerste plaats rekening houdend met het gemak van kijken op de schermen van mobiele apparaten. Dit principe is niet nieuw, maar aangezien meer dan 60% van de gebruikers via smartphones toegang heeft tot internet, is het dit jaar bepalend geworden. Omdat de schermen van mobiele apparaten klein zijn, zorgen ontwerpers voor de meest informatieve, maar tegelijkertijd effectieve weergave van inhoud. Hetzelfde geldt voor teksten - er is geen plaats voor water en lege zinnen in het concept van "mobile-first".
2. Illustraties uit de vrije hand
Dit is een geweldige manier om een idee of stemming op een originele manier over te brengen. Handgetekende illustraties zijn uniek en voegen variatie en informaliteit toe aan de interactie van de gebruiker met de site, waardoor het ontwerp warm en vriendelijk is.
Voorbeeldillustratie van dropbox.com
Getalenteerde illustratoren kunnen afbeeldingen maken die: de beste manier past bij het merk en de huisstijl, met hun hulp kunt u diepe personalisatie bereiken.
3. Animatie
Ontwerpers stappen geleidelijk af van het gebruik van alleen statische afbeeldingen en zoeken naar nieuwe manieren om het publiek te betrekken om zich te onderscheiden van anderen. Merken hebben behoefte aan personalisatie en animatie, grotendeels dankzij de vooruitgang van HTML5, CSS en jQuery, speelt hier een belangrijke rol.
Animatie kan op verschillende manieren worden geïmplementeerd: van een ongebruikelijke laadstatusbalk, die het wachten zal opfleuren, tot een verandering verschijning object op hover. Er is ook animatie op volledig scherm, het centrale element dat de aandacht van de gebruiker trekt.
Maar animatie moet spaarzaam worden gebruikt om de interactie van de gebruiker met de site te verdiepen, niet om ze af te schrikken. Niemand wil tenslotte wachten tot de hoofdinhoud wordt bekeken terwijl de belachelijke en nutteloze animatie wordt geladen - alles moet er natuurlijk, passend en niet afleidend uitzien.
4. Gedurfde kleuren
Tot voor kort adviseerden experts om alleen "webcompatibele" kleuren in het ontwerp te gebruiken - kleuren die geen irritatie veroorzaken en het gezichtsvermogen niet belasten. Tegenwoordig verandert alles - bij correct gebruik doen gedurfde kleuren wonderen, waardoor gewone sites levendig, sappig en gedenkwaardig worden.
Een voorbeeld van het gebruik van gedurfde kleuren op spotify.com
Levendige kleuren zijn een manier van personalisatie in de wereldwijde mode voor minimalisme in design. Ontwerpers zullen waarschijnlijk blijven experimenteren met paletten en unieke gradiënten en kleurspatten creëren.
5. Ongebruikelijk scrollen en parallax
In het verleden hebben ontwerpers het meest geprobeerd belangrijke gegevens plaats in het deel van de pagina dat de gebruiker direct ziet nadat hij naar de site is gegaan. Tegenwoordig is het moeilijk om te bepalen welk deel van de pagina "zichtbaar" zal zijn, omdat de overgangen worden uitgevoerd vanaf apparaten met andere resolutie Scherm. Daarom is een andere aanpak nodig.
Scrollen, dat oorspronkelijk nodig was om op de pagina omhoog en omlaag te gaan, wordt nu creatief gebruikt door ontwerpers. Met bekwame implementatie wordt het: universeel gereedschap inhoud indienen. U kunt dus automatisch de weergave en stop van video of animatie configureren tijdens het scrollen, het uiterlijk van tekst en afbeeldingen, enz.
6. Asymmetrische patronen
2016 werd beïnvloed door maaspatronen en in 2017 was er een trend naar asymmetrische en "gescheurde" patronen. Ondanks dat de overgrote meerderheid van merken de voorkeur geeft aan traditionele en eenvoudige UI-sjablonen voor kaarten (ze zijn tenslotte logisch en gemakkelijk te navigeren), beginnen sommigen nog steeds te experimenteren om zich te onderscheiden en zich te onderscheiden van de concurrentie.
Voorbeeld asymmetrisch ontwerp (isaidicanshout.com)
Asymmetrisch ontwerp gemaakt door bekwame handen, geweldig om de aandacht op bepaalde delen van de pagina te vestigen. Dankzij verschillende maten lettertypen en de rangschikking van elementen kunnen accenten op de pagina correct plaatsen en gebruikers in de goede richting leiden.
7. Schaduwen
Shadows zelf zijn verre van nieuw voor webdesign. Ooit waren ze populair, daarna werden ze vergeten. Wat is de trend dan? In het gebruik van enorme, soms zelfs hypertrofische, schaduwen die worden geworpen door afbeeldingen bij zweven.
Diepe schaduwen bij muisaanwijzer over afbeeldingen (abduzeedo.com)
Met deze aanpak kunt u zich concentreren op het actieve element in een platte sjabloon en interactie aangaan. Dit creëert het effect van diepte - het is prettig om de cursor gewoon over dergelijke afbeeldingen te bewegen.
8. Grote en vette lettertypen
Typografie is een andere manier om te personaliseren. Distributie van apparaten met hoge resolutie schermen maakt lettertypen leesbaar en gemakkelijk te onderscheiden, dus ontwerpers experimenteren er steeds meer mee.
Gebruiksvoorbeeld grote afdruk(bigyouth.fr)
9. Ultraminimalisme
Minimalisme is al lang een bepalende trend in webdesign. Maar sommigen gaan verder en verwijderen alle hints van decor van sites, waardoor alleen de belangrijkste elementen voor gebruikers overblijven.
Absoluut minimalisme (mathieuboulet.com)
In dit voorbeeld is er alleen een aanduiding van "Scroll", een link naar de sectie "Over mij" en links naar profielen in sociale netwerken. Verder is er bij het scrollen al een portfolio van een ontwerper.
10. Mix van horizontale en verticale tekst
Verandering van gewoonte horizontale opstelling de tekst "vernieuwt" de site en motiveert om te lezen wat daar staat.
Een voorbeeld van ongebruikelijke tekstrichting (takewhatyoucancarry.com)
Houd er rekening mee dat de mix goed is gedaan - er zijn hier geen onnodige verwarrende elementen. Het woord 'nemen' is verticaal geschreven - dat is genoeg voor de presentatie van merkinhoud.
11. "Modulatie"
In dit geval moet de tekst contrasteren met: achtergrondafbeeldingen zodat ze niet fuseren.
13. Tweekleurig
Het ontwerp van de site is gebaseerd op 2 basiskleuren. Het ziet er stijlvol en modern uit. De website van Australian Design Radio is bijvoorbeeld in deze stijl ontworpen:
14. Geometrische lettertypen
In dit geval worden lettertypen gecombineerd met verschillende geometrische vormen... Lettertypen als Futura, ITC Avant Garde en Proxima Nova zijn hiervoor geschikt.
Een voorbeeld van het gebruik van "geometrische" lettertypen (hugeinc.com)
De expressiviteit, assertiviteit en zelfs enige agressiviteit van de site kan worden gegeven door very vetgedrukte lettertypen van de hierboven genoemde gezinnen.
Opsommen
In 2017 zullen ontwerpers proberen om persoonlijke accenten toe te voegen aan het gebruikelijke minimalisme. Iemand doet dit met kleur, iemand met lettertypen en iemand met een ongebruikelijke opstelling van blokken.
Vergeet bij het ontwikkelen en goedkeuren van een ontwerp de hoofdregel niet: het moet gebruiksvriendelijk zijn en motiveren om de gerichte actie te ondernemen. Bent u zeker van de prestaties van uw resource? Het rapport van de audit van de site in de dienst kan u hierover vertellen “ Persoonlijke manager"SeoPult. Naast de ontwerp- en bruikbaarheidsaudit, ontvangt u een gedetailleerde analyse van de technische component, semantiek, posities ten opzichte van concurrenten, enz. Dit alles zal u helpen de site te verbeteren en de effectiviteit ervan als verkoopinstrument te vergroten.
”John Moore Williams, hoofd contentstrategie, Webflow.
Het einde van het huidige jaar staat voor de deur en elke webdesigner vroeg zich minstens één keer af belangrijk probleem: wat gaat webdesign in 2017 bepalen? Ik besloot het antwoord op deze vraag te vinden en vroeg de Webflow-ontwerpers welke trends zij dachten dat ze de komende 365 dagen zouden overheersen. Ik gaf ook mijn eigen commentaar op hun gedachten.
Laten we eerst eens kijken naar de mening van de hoofdontwerper van Webflow, Sergie Magdalin (Sergie Magdalin).
1. Inhoudsgericht ontwerp
"De opstelling van ontwerpelementen binnen een bepaalde structuur moet zodanig zijn dat de lezer het hoofdidee gemakkelijk kan begrijpen zonder hun gebruikelijke leessnelheid te vertragen" -Herman Zapf
De afgelopen jaren hebben een dramatische verschuiving plaatsgevonden in het denken over de rol van design in het bedrijfsleven. eerder ontwerp werd beschouwd als de laatste stap in het proces van het maken van een object: de ontwerper-goochelaar komt in de finale en overlaadt ons product met magisch stof om het beter te maken dan de concurrenten.
Het was erg interessant om de metamorfosen te zien die plaatsvonden met de ontwikkelingsprioriteiten.
En het mooiste aan deze metamorfosen was de overgang naar het model, wanneer de inhoud weer bovenaan de tafel staat. Ontwerpers over de hele wereld hebben zich gerealiseerd dat gebruikers sites voornamelijk bezoeken voor inhoud, of het nu gaat om korte tweets, omvangrijke gespecialiseerde artikelen of nieuwe internetmemes. De ultieme rol van design is om content op de meest aantrekkelijke, begrijpelijke manier weer te geven en er het best mogelijke resultaat uit te halen.
Dit is een van de redenen voor de overgang van een "skeuomorf" ontwerp (wanneer elementen zo veel mogelijk lijken op hun tegenhangers in echte wereld) tot een plat, minimaal ontwerp. Om deze redenen heeft Google Material Design gemaakt.
Natuurlijk, zoals de derde wet van Newton zegt, is er voor elke actie een reactie met dezelfde kracht. Veel ontwerpers zijn van mening dat de trend van plat design de geest van design heeft gedood. We verwachten dat dit debat het komende jaar zal voortduren, maar de focus zal blijven op de inhoud - de kern van elk ontwerpwerk.
2. Hoogwaardige interactie van ontwerpers met ontwikkelaars en ontwerpers onderling
Het belang van design bij het vormgeven van een bedrijf groeit, dus er komt steeds meer aandacht voor de samenwerking van ontwerpers met hun collega-ontwerpers en hun collega-ontwikkelaars.
Deze zorg voor interactie met ontwerpers komt deels voort uit de massale massa van de mobiele en webapplicaties die tegenwoordig worden ontwikkeld. Naast het feit dat grote bedrijven als Google, Facebook, Twitter en LinkedIn het gigantische werk van een ontwerpteam met absoluut verschillende kanten, moeten ontwerpers altijd met elkaar op dezelfde golflengte zitten. Dit betekent dat er meer moet worden gecommuniceerd over het project en over manieren om het meest effectief te zijn samenwerken.
Om deze taak te vergemakkelijken, zijn er veel tools gemaakt, van collectieve sjablonen en borden in het Webflow-team tot grafische editor Figma-interfaces die wijzigingen in realtime weergeven. Ik weet zeker dat in 2017 deze platforms verbeterd en aangevuld zullen worden.
Als het gaat om de interactie van ontwerpers en ontwikkelaars, wordt er veel aandacht besteed aan extreem belangrijk proces overdracht van werk. In plaats van bijvoorbeeld zware en omvangrijke statische afbeeldingen te verzenden, kunnen ontwerpers nu live gerenderde lay-outs delen dankzij tools zoals InVision, Marvel, UXPin.
Carson Miller becommentarieerde dit in zijn recente TechCrunch-artikel "The Future of Frontend Design":
“Vroeg of laat zullen ontwerptools en ontwerppatronen front-end ontwikkeling volledig vervangen. Je kunt eenvoudig een kwaliteitsframework maken voor al je frameworks zonder dat je met de hand code hoeft te schrijven. ”
3. Vereenvoudigd proces van ontwerper tot ontwikkelaar
Met de hierboven genoemde ontwerp- en prototypingtools kunt u de verschillende stadia van samenwerking visualiseren door middel van visualisaties - van geanimeerde Keynote-bestanden tot volledig functionele websites. Deze manier van het delen van werkmateriaal verkort de responstijd binnen het project, waardoor de kwaliteit van het ontwerp verbetert, de snelheid van het ontwikkelteam toeneemt en de kans op frustratie over het resultaat wordt verkleind. Het verbetert ook de interactie met de klant. Voor veel Webflow-gebruikers zijn bijvoorbeeld klantbijeenkomsten uitgegroeid tot volwaardige workshops, waar ontwerpers snel ideeën kunnen implementeren en iedereen zijn ideeën vrijwel direct kan testen.
Webdesigntrends komend jaar volgens productontwerper Gadzhi Kharcharov:
4. Grote, luide kop
Nu de wereld van webdesign zich op inhoud begint te concentreren, zien sites steeds vaker inspirerende koppen met bijpassende lettertypen - net zo groot en vet als hun inhoud.
De #MadeInWebflow Heco Partners
Zoals u in de voorbeelden kunt zien, verwijzen "groot" en "vet" niet alleen naar lettertypebeschrijvingen. sneller, het komt dat een aanzienlijk deel van het startscherm is gewijd aan een eenvoudige maar sterke en zelfvoorzienende uitspraak over een product of dienst. Zo'n titel moet de essentie bevatten en begrijpelijk zijn voor elke bezoeker, waarbij buitensporige bombast moet worden vermeden (oké, de uitdrukking "Ontwerp het onmogelijke" klinkt misschien te luid).
Tegenwoordig, wanneer mensen het constant druk hebben en de informatie overspoeld wordt, werken zulke korte en krachtige uitspraken goed voor elk merk.
5. Complexe opmaak die voortkomt uit de basisprincipes van grafisch ontwerp
Als we de ontwikkeling van webdesign willen voorspellen (door minstens, de visuele kant), moet je verwijzen naar de geschiedenis van de ontwikkeling van grafisch ontwerp.
In de afgelopen jaren is de lay-out van webpagina's beperkt gebleven tot CSS, maar nieuwe modules zoals Flexbox en CSS-raster(die in maart 2017 wordt uitgebracht), stelt u in staat om de meest gedurfde ideeën in webopmaak te implementeren.
Ons de belangrijkste taak nu - om te begrijpen hoe de nieuwe mogelijkheden voor het blokkeren van netwerken zouden moeten werken binnen reagerend ontwerp.
Hier zijn enkele voorbeelden van wat u kunt verwachten (ervan uitgaande dat u natuurlijk een browser heeft die CSS Grid ondersteunt, zoals Firefox Nightly, Safari Technical Preview of Chrome Canary):
Jen Simmons experimenteel lay-outlab
Besteed aandacht aan de stijl van het hoofdblok - een duidelijke verwijzing naar de geschiedenis van grafisch ontwerp.
Raster per voorbeeld
Op de site zie je nog meer voorbeelden.
6.Meer SVG
SVG (schaalbare vectorafbeeldingen - schaalbaar vectorafbeeldingen) Het heeft meer voordelen voor webdesigners en ontwikkelaars dan traditionele afbeeldingsformaten zoals JPG, PNG of GIF.
De belangrijkste voordelen van SVG worden beschreven in de naam van het formaat - dit zijn schaalbaarheid en vector. In tegenstelling tot op rasters en pixels gebaseerde formaten, zijn afbeeldingen in SVG samengesteld 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 elk apparaat. U hoeft zich geen zorgen te maken over wazige foto's op het netvlies.
Maar dat is niet alles. SVG staat er ook om bekend dat er geen HTTP-verzoeken hoeven te worden verzonden. Als je ooit de laadsnelheid van je website hebt gecontroleerd, is het je misschien opgevallen dat deze HTTP-verzoeken je website zelfs kunnen vertragen. Er is geen probleem met SVG.
7. Tools voor op regels gebaseerd responsief ontwerp
Responsive design heeft de manier waarop we denken over webapplicaties en hoe we deze kunnen maken volledig veranderd.
Maar vreemd genoeg is het principe van de programma's voor het maken van ontwerpen op geen enkele manier veranderd. De meeste van deze tools werken als volgt: je moet steeds opnieuw een vergelijkbare pagina maken voor verschillende apparaten en resoluties. In een branche die vereist snelle generatie ideeën, snelle ontwikkeling en snelle start, is zo'n verspilling van tijd gewoon onaanvaardbaar.
Verwacht nieuwe golf ontwerptools (zoals Figma) op basis van "regels" die het uiterlijk van sites aanpassen op verschillende schermen en apparaten, waardoor het aantal herhaaldelijke acties ontwerper. Dergelijke tools zijn afhankelijk van de ruimtelijke relaties van elementen, en wanneer we de grootte van het scherm of apparaat veranderen, hebben ze de neiging om deze relaties te behouden door het formaat van de elementen en de afstand ertussen aan te passen.
Trouwens, er zijn tegenwoordig vergelijkbare tools voor website-indeling, niet alleen voor ontwerpers, maar ook voor gewone gebruikers. Bijvoorbeeld TruVisibility.com - het platform past het gemaakte ontwerp precies aan volgens bepaalde regels, waarbij de lay-out en grootte van de elementen worden aangepast aan de schermgrootte. Het enige dat u nog hoeft te doen, is een paar aanpassingen maken om de webpagina er op apparaten uit te laten zien zoals u wilt. De gebruiker hoeft de versie voor mobiele apparaten niet opnieuw te maken, en dit bespaart hem aanzienlijk tijd.
Ontwerptrends in 2017 volgens Ryan Morrison, Senior Grafisch Ontwerper.
8. Levendigere kleuren
Toen in 2016 het tijdperk van minimalisme en brutalisme in webdesign begon, probeerden ontwerpers meer persoonlijkheid aan hun werk te geven, zonder verder te gaan dan de modestijlen. En er zijn in ieder geval een paar gevallen waarin heldere en gedurfde kleuren met veel succes zijn gebruikt.
Bekijk de nieuwe Asana-site met een gedurfde kleurvulling:
Nieuw icoon Instagram-apps kreeg veel kritiek, maar dit herontwerp heeft het merk ongetwijfeld opgefrist:
Alles wat Stripe doet, vereist geen aparte presentatie:
Zoals je kunt zien, zijn dit niet alleen heldere en gewaagde kleuren. Verlopen zijn ook weer in zwang, kleuren mengen en vervagen in tinten die doen denken aan een middaghemel of een brandende zonsondergang. Dit is een soort heropleving van het naturalisme met felle kleuren en brutale hellingen, en ik kijk er persoonlijk naar uit om meer van deze in 2017 te zien.
Hoewel, misschien moet je de helderheid toch iets verminderen? We houden je in de gaten, Asana.
9. Meer focus op animatie
Geanimeerde elementen spelen al lang een sleutelrol in de webinterface en deze trend zal zich in 2017 voortzetten. Zolang ontwerpers toegang hebben tot de tools om boeiende animaties te ontwerpen, zullen we zien dat deze effecten zichtbaarder en geavanceerder worden.
Dit onderwerp is vooral belangrijk omdat het elke dag gemakkelijker wordt om animaties te maken. Op de 2016 Design & Content Conference benadrukte animatiegoeroe Val Head dat ontwerpers bij het ontwerpen van geanimeerde elementen rekening moeten houden met de doelen en behoeften van het merk om het effect te bereiken dat makers van inhoud verwachten te zien. Als dit advies opgevolgd wordt, zal de animatie taken uitvoeren die betekenisvol zijn voor het merk, en niet alleen een migraine veroorzaken bij de gebruiker.
10. Ongebruikelijke opmaak
2016 staat, net als de voorgaande jaren, bekend om het eindeloze debat dat webdesign doodgaat of zijn geest verliest.
Degenen die iedereen proberen te overtuigen van de dood van webdesign, overdrijven duidelijk. Veel mensen blijven zoeken naar manieren om inhoud op een nieuwe manier aan gebruikers te presenteren. Een van de meest verleidelijke manieren is om het systeem te doorbreken en de gebruikelijke rasterlay-out te negeren die wordt gedicteerd door de regels van responsief ontwerp.
De "gebroken" opmaakmethode omvat elementen die verder gaan dan een zorgvuldig uitgelijnd raster. Dergelijke technieken kunnen soms zelfs onaangenaam lijken. Bijvoorbeeld:
Overlappende teksten en afbeeldingen:
Teksten en afbeeldingen die (schijnbaar) willekeurig over de pagina zijn verspreid:
Dit was het eerste deel van de vertaling van het artikel "18 Web Design Trends in 2017". Ben je het eens met de meningen van Webflow-experts? Wat voor soort webdesign denk je dat het komende jaar in zwang zal zijn?
Een goede website-eigenaar is constant bezig om deze te verbeteren. In dit werk moet hij niet alleen vertrouwen op zijn doelgroepanalyse, webanalysegegevens en klantrecensies, maar ook op branchetrends. Omdat er veel nuttige dingen in trends zijn die de interactie van klanten met de site kunnen verbeteren. Maar trends moeten zorgvuldig en verstandig worden toegepast. Kies alleen degene die geschikt zijn voor de oplossing huidige problemen site en voor bedrijfsontwikkeling.
Daarom hebben we in dit artikel niet alleen een lijst met trends in webdesign gegeven, maar ook aanbevelingen gedaan om deze trends op uw website toe te passen.
1. Gebruiksvriendelijkheid wordt handelswaar
Een voorbeeld van het verbeteren van de bruikbaarheid van de site http://www.telemirspb.ru/
Volgen Basisprincipes Gebruiksvriendelijkheid helpt sites meer klanten aan te trekken en ondersteuningsoproepen te verminderen. Steeds meer bedrijven bieden site-audits aan, omdat er vraag is naar het vinden van fouten op de site. De gewoonte om aankopen te doen, diensten via internet te bestellen, verhoogt de vraag naar handige sites.
Helaas maken veel mensen zelf websites en komen dan naar ons toe met de gecreëerde schande. Het is belangrijk om vooraf na te denken over het proces van interactie met de bron: welke secties in de eerste versie zullen zijn en welke later zullen worden toegevoegd. Het is onmogelijk om alles te voorzien, maar vooraf geplande navigatie zal tijd en geld besparen voor verbeteringen in de toekomst. Kies ook zorgvuldig de engine voor de site. U moet geen blog-engine kiezen (bijvoorbeeld WordPress) als u van plan bent iets op de site te verkopen, product- / servicepagina's te maken.
Als u in een zeer concurrerende omgeving werkt, begrijpt u hoe belangrijk het is om u te onderscheiden van uw concurrenten.
Dat is de reden waarom, wanneer u van plan bent een website te maken of een bestaande te verbeteren, u in de eerste plaats naar de interface moet kijken door de ogen van de klant, proberen de problemen te voorspellen die de gebruiker kan hebben.
2. Lange teksten verdwijnen
Laten we eerlijk zijn tegen onszelf: niemand leest lange teksten. Uitzonderingen zijn boeken en artikelen. Wanneer een klant een dienst of product wil bestellen, is hij geïnteresseerd in specifieke informatie: prijs, belangrijkste kenmerken van het product / inhoud van de dienst, leveringstermijnen / deadline. Beknopte en gestructureerde informatie bespaart de klant tijd en ontdoet zich van de opdracht. Bovendien, als de klant meerdere sites vergelijkt, zal de meest beknopte beschrijving zeker winnen.
Ook zijn lange teksten onhandig om te bekijken vanaf mobiele apparaten, die bijna iedereen gebruikt. Volgens de resultaten van de wereldstatistieken was in oktober 2016 het aantal mobiele gebruikers er zijn er meer dan desktopversies.
Kijk naar de doelgroep van uw site, bijvoorbeeld in Yandex.Metrica in het rapport Samenvatting → Apparaattype en kijk welk percentage klanten afkomstig is van telefoons en tablets. Vergeet dit publiek niet bij het plaatsen van inhoud.
Voeg verstandig animatie toe aan uw site. Het moet zo nauwkeurig en snel mogelijk zijn. Een afbeelding vergroten wanneer u erop klikt, voortgangsindicatoren tijdens het wachten op resultaten op de site, een pop-upvenster bij het toevoegen van een item aan de winkelwagen, de kleur van knoppen en links wijzigen nadat u erop hebt geklikt, zijn de meest voorkomende micro-interacties die zullen zeker helpen uw gebruikers.
6. Gebruik van cinemagraphs of "live" beelden
Breedbeeldvideo is vervangen door cinemagraphs - beelden waarin slechts één element beweegt. Het is het beste om ze op het eerste scherm van een pagina te plaatsen om de aandacht van de gebruiker te trekken en een wow-effect te creëren.
Als je zo'n gif kiest voor het thema van de site, ziet het er erg gaaf uit. U kunt bijvoorbeeld een "live" foto van uw hoofdproduct maken en deze op Startpagina of op banners met promoties.
In Rusland worden cinemagraphs voornamelijk gebruikt in sociale netwerken, dus we geven voorbeelden van buitenlandse sites - een site voor de bescherming van water en autoverhuur.
7. Vermijd "typische" stockfoto's
We hopen dat allerlei kleine mensen, meisjes met koptelefoons en foto's van lachende gezinnen van de sites zullen verdwijnen. Voorbeeld van stockfoto's:
9. Mobiele apparaten eerst (Mobile First)
De essentie van deze aanpak is dat je bij het ontwerpen van een site moet nadenken over hoe deze zal worden weergegeven mobiele toestellen... Er zijn veel artikelen en boeken over dit onderwerp geschreven, we raden u bijvoorbeeld aan om Mobile First van Luc Wrobleski te lezen.
Zoals hierboven vermeld (zie punt 2) groeit het mobiele verkeer en zijn er zelfs gebruikers die geen desktopervaring hebben. Daarom raden we aan om sites voor mobiel te optimaliseren om geen klanten te verliezen.
Het artikel somt alleen de meest elementaire trends op. Eens kijken wat ons dit jaar te wachten staat. Als je ook enkele trends hebt opgemerkt en er zeker van bent dat ze zich zullen ontwikkelen, schrijf dan in de reacties, we zullen het graag bespreken. En als u twijfelt of uw website-ontwerp up-to-date is of het artikel heeft gelezen en verouderde elementen heeft gevonden - let dan op de service
Een opvallende infographic over de ontwikkelingspaden van een moderne webontwikkelaar en de technologieën die hij moet leren om anno 2017 front-end, back-end of devops te worden.
Invoering
De eerste prioriteit is het definiëren van een profiel verdere ontwikkeling... Probeer, studeer, probeer te begrijpen wat dichter bij je staat - front-end, back-end, devops, of misschien een fullstack?
Het frontend-pad
Op elk gebied van webontwikkeling staat het beheersen van de basis op de voorgrond. Voor een beginner is taak nummer één duidelijk: HTML leren, CSS en JavaScript (+ jQuery). Naarmate je basisvaardigheden ontwikkelt en je theoretische achtergrond uitbreidt, kun je doorgaan naar meer gespecialiseerde dingen.
Er zijn veel JavaScript-frameworks en -bibliotheken die het leven van een webontwikkelaar veel gemakkelijker maken om te bezitten. Onder hen kunt u de meest geschikte en geschikte voor een specifieke programmeur kiezen. pakket manager, test- en montagetool, taakmanager en nog veel meer voor elke smaak en elk bereik.
Tegenwoordig ontwikkelt de frontend-ontwikkelingsindustrie zich als geen ander. Kaders en tools verschijnen voortdurend en verbeteren, nieuwe methodologieën en patronen worden geboren, de ideologie van de frontend is al lang veel verder gegaan dan de lay-out. Daarom is een van de belangrijkste taken van een webontwikkelaar om het hoofd boven water te houden, zich bewust te zijn van moderne trends ontwikkeling van dit gebied.
Backend-pad
Ook op het gebied van back-end development zijn er de afgelopen jaren grote veranderingen geweest. PHP is al lang geen monopolie meer op de markt voor backend-technologie, hoewel het laatste versie PHP 7 is meer dan opmerkelijk. Node.js, Ruby en Go zijn de arena binnengestormd. Moderne technologieën bieden de mogelijkheid om complexe bedrijfslogica te ontwikkelen en hoge prestaties te bereiken.
De devops manier
Het werk van devops is erg veeleisend. Een moderne webapplicatie is een enorm en complex organisme, en de taak van devops is om het correct te laten functioneren. Processen bewaken, werken in de cloud, webcontainers, continue integratie - het is slechts een klein deel van de stapel webtechnologieën waarmee een webapplicatie als geheel kan bestaan en zijn functies kan uitvoeren.
Laten we eens kijken wat het betekent om in 2017 populair, trendy en modern te zijn in webdesign. Overweeg hiervoor de belangrijkste trends in webdesign. De meesten van hen dwalen van jaar tot jaar en zijn al een integraal onderdeel geworden van het bouwen van moderne sites. Dit heeft vooral te maken met ontwikkeling mobiele technologieën, communicatiekanalen en verbetering van apparaten. Zo is bijvoorbeeld een trend als site mobility verplicht geworden. De commercialisering van internet dicteert ook zijn harde voorwaarden aan ontwerpers en webontwikkelaars. Tegelijkertijd verzwakken sommige trends en worden ze minder populair, maar ze blijven nog steeds behoorlijk actief. Modieuze hobby's, kenmerkend voor een korte periode, verschijnen ook. Vorig jaar waren het bijvoorbeeld iconen met een lange schaduw van de afgebeelde objecten. Geometrische patronen zijn dit jaar populair geworden, daar gaan we ook naar kijken. Dus laten we in volgorde gaan.
1. Mobiel, responsief ontwerp
Vandaag misschien wel de belangrijkste en meest verplichte trend. De site moet er even goed uitzien op alle resoluties van monitoren, laptops, schermen mobiele smartphones en tabletten. Zoekmachines houden trouwens nauwlettend in de gaten hoe goed de site is aangepast aan verschillende apparaten, en bepaal op basis daarvan de plaats in de zoekresultaten. 
2. Actieve typografie
Al enkele jaren een van de meest populaire trends. Grote lettertypen en typografie op een website zijn twee dingen. Ten eerste, esthetische - mooie lijnen, de bochten en omtrek van de letters zijn op zichzelf een ornament en decoratief element... En ten tweede is dit functionaliteit - met behulp van een groot lettertype kun je de hoofdgedachte duidelijk en nadrukkelijk overbrengen op de bezoeker. 
3. Breedbeeldvideo
De fullscreen video op de achtergrond van de site trekt ongetwijfeld meteen onze aandacht. het goed welkom om de bezoeker geïnteresseerd te houden. De moderne ontwikkeling van technologie maakt het eenvoudig om video op de site te embedden, waardoor ontwerpers deze techniek steeds vaker zullen gebruiken. Er is echter één kanttekening, het is interessant om de video alleen de eerste keer te bekijken, de tweede en derde keer is het al saai. Daarom is deze techniek alleen effectief voor nieuwe bezoekers.
5. Cinemagrafieën
Een goed alternatief voor breedbeeldvideo en grote achtergrondfotografie. Cinemagraphs zijn foto's waarin kleine repetitieve bewegingen voorkomen. Ze worden meestal gepresenteerd in gif-formaat en creëer de illusie van het bekijken van de video voor de kijker. Meer over cinemagraphs met grote hoeveelheid voorbeelden zijn te vinden in de selectie 
6. Plat ontwerp
Een andere krachtige trend van de afgelopen jaren. Egale kleur websites zijn netjes en duidelijk. Maar in recente tijden, is er een nieuw soort plat ontwerp verschenen - Semi-plat. Dit is wanneer het hele ontwerp in een egale kleur wordt gedaan en slechts één element een schaduw, verloop of textuur heeft. Meestal is dit element een knop, die volume of uitstulping krijgt om de aandacht van bezoekers te trekken.
7. Micro-interactie op de site
nutsvoorzieningen veel aandacht bij webdesign wordt micro-interactie van de functionaliteit en het ontwerp van de site met de bezoeker betaald. De essentie daarvan is dat de bezoeker duidelijk het resultaat van zijn handeling op de site kan zien, of het nu gaat om een aanpassing aangepaste instellingen, een link volgen, een handeling bevestigen, interactie met actieve pictogrammen, knoppen, schakelaars, tellers en andere elementen.
8. Objecten animeren
Dankzij de mogelijkheden van moderne html5 en css3 kun je een groot arsenaal gebruiken visuele effecten op de site. Dit maakt de interactie met de pagina interessanter en spannender voor de bezoeker. Dus in het nieuwe jaar zullen we ook de meest onverwachte interactieve microbewegingen van objecten zien, die in de regel reageren op de beweging van de muis. Misschien zien we voorbeelden van complexere animaties.
9. Levendige kleurenschema's
Populaire trendy kleuren van 2017 geven de voorkeur aan helderheid en verzadiging. Interessante originele tinten scharlaken, mosterd, geel, smaragd, diepblauw, evenals rode, lila en chocoladekleuren zullen uw site helpen opvallen en zijn eigen unieke stijl krijgen. 
10. Door de site scrollen
Aangezien scrollen op de site ideaal is voor mobiele apparaten, zal de aanwezigheid ervan in 2017 aanzienlijk zijn. Het enige is dat scrollen geen ruimte laat voor gebruikersinteractie, en daarom voelt men een zekere vermoeidheid van het eindeloos laden van inhoud. Misschien zal de trend omslaan in de richting van een combinatie van eenvoudige bediening met scrollen.
11. Parallax-effect
Parallax is een verandering in de schijnbare positie van een object ten opzichte van een verre achtergrond. In webdesign wordt dit effect gebruikt bij het scrollen op een site, waar objecten en de achtergrond met verschillende snelheden scrollen, wat resulteert in de illusie van driedimensionaliteit. De trend is redelijk stabiel, dus we zullen parallax-sites meer dan eens zien.
12. Modulair ontwerp
Het modulaire ontwerp, of kaartinterface, bestaande uit op zichzelf staande betekenisblokken, is al een tijdje populair. Deze trend is erg goed voor mobiele apparaten, omdat de blokken goed aansluiten bij elke schermresolutie. Maar op grote sites zien ze er vrijwel hetzelfde uit en zijn ze moeilijk te hiërarchie en te structureren.
13. Eén pagina's
Sites van één pagina, bestemmingspagina's, zijn bestemmingspagina's een integraal onderdeel geworden van modern internet... U kunt meer lezen over wat een bestemmingspagina is in het artikel en. In 2017 zullen bestemmingspagina's meer nadruk leggen op de knop die oproept tot actie - bestellen, bellen, aanmelden, enz. Al het andere is een afleiding potentiële bezoeker, zal worden geknipt.
14. Grafische reclame
Ik wil ook één ding opmerken dat ik me herinner van het afgelopen jaar, en hoogstwaarschijnlijk zal de trend zich in 2017 voortzetten. In verband met de commercialisering van het Russische internet en de groei van de internethandel, is de vraag naar grafisch promotiemateriaal voor reclame en promotie is aanzienlijk toegenomen - banners, teasers, kaarten, flyers. 
15. Automatisering van typische processen
Alles standaard oplossingen en procedures op de site worden geleidelijk aan vervangen geautomatiseerde processen, waardoor het niet meer nodig is om met ondersteuning of online adviseurs te communiceren. In dit opzicht is de populariteit van verschillende toepassingen en uitbreidingen. Nu kun je een product of dienst kopen, een bestelling plaatsen, een afspraak maken, een stoel reserveren, geld overmaken, een vragenlijst invullen of een test doen - dit alles kan online met een paar muisklikken.
16. Infografieken
Grafische presentatie in de vorm van infographics is nog steeds populair en in trek. Tekst begeleiding mooie foto of een icoon gecombineerd met stijlvolle designelementen maken infographics esthetisch aantrekkelijk. Vergelijkende infographics zijn vooral visueel duidelijk en interessant - zoals het was-nu, ja-nee, plussen-minpunten, het is mogelijk-niet, enz. U kunt ook infographics gebruiken om een stapsgewijs verhaal te vertellen of saaie statistieken levendig weer te geven. 
17. Hamburgermenu
Hamburger Menu is een visueel icoon van drie horizontale strepen, in de regel bovenaan in de hoek van de site, wanneer u klikt waarop deze wordt geopend of de zijkant verlaat volledig menu... Veel experts voorspellen het verdwijnen van deze trend, omdat de meeste onervaren gebruikers het doel van dit pictogram gewoon niet begrijpen. Daarom neigen webontwerpers naar vereenvoudigde navigatie. Maar desalniettemin zullen we het hamburgermenu herhaaldelijk zien op nieuw gecreëerde sites.
18. Pictogrammen
Iconen, als een manier om informatie te presenteren en een visualisatietool, zijn en blijven een van de meest gevraagde en geliefde trends van ontwerpers. Het is voldoende om de juiste thematische pictogrammen bij de blokken met de tekst te plaatsen - en nu krijgt de hele tekst een logische en visuele volgorde en structuur. Komend jaar blijven we dus actief iconen gebruiken.
19. Letterstapelen
Letterstapelen is tekst in een vierkant. In feite is dit een voorbeeld van een moeilijke creatieve beslissing - je moet een lange tekst presenteren in het volume van een kleine ruimte. Tegelijkertijd moet het er mooi en origineel uitzien. Dit jaar is het ook in de mode. 
20. Lege knop
Vanwege ruimte en ruimtebesparing op mobiele apparaten verscheen enige tijd geleden een lege knop - een grote inscriptie met een vierkante streep rond het woord. Zo'n knop geeft een overzicht van de achtergrond achter de knop met behoud van de functionaliteit als volledige knop. Bovendien ziet zo'n knop er als designelement stijlvol en netjes uit.
21. Weigering van stockfoto's
Sommige experts merken dat ontwerpers stockfotografie afwijzen. Voor zover moderne apparaten kunt u snel en efficiënt zelf een foto maken, dan kunt u depersonalisatie en unificatie van de voorraad vermijden en uw eigen unieke foto maken en uw eigen unieke ontwerp maken.
22. Ongebruikelijke hoeken op de foto
Het zoeken naar interessante hoeken in foto's is beschikbaar geworden voor elke eigenaar van een smartphone met een camera. In dit opzicht is creativiteit bij het maken van een foto uit de hitlijsten en kunnen we de site decoreren. unieke foto met een ongebruikelijke kijkhoek of perspectief. 
23. Carrousel
De carrouselschuif, die een paar jaar geleden in het ontwerpleven kwam, is nog steeds populair en relevant voor website-ontwerp. De brede schuifregelaar maakt het gemakkelijk om het belangrijkste nieuws te roteren, maar ook om te presenteren huidige promoties, collecties en andere actuele informatie, die de bezoeker direct ziet bij het betreden van de site.
24. Zelfspelende audio en video
Deze trend is een hallo uit de jaren 2000. Ik herinner me dat het toen in de mode was om een geluid af te spelen bij het betreden van een site. En velen van hen. Ik kan niet zeggen dat de audiobegeleiding me blij maakt, maar misschien zal matig gebruik onopvallend zijn. Nou, zelfafspelende video is meer een eerbetoon aan reclame, wat mij betreft. Nou ja, plus de wens om de aandacht van de bezoeker in de feed te houden. Niet de leukste trend, maar commercieel noodzakelijk.
25. Geometrische patronen
Welnu, we zullen onze beoordeling van de korte termijn afronden mode trend in de vorm van verschillende geometrische patronen en patronen. Eind vorig jaar werden ze onverwacht populair. Welnu, een andere manier om uw website-ontwerp te laten opvallen en uniek te maken. 
Webdesigntrends 2017 Infographic
Ik bied je een infographic aan die duidelijk alle trends en tendensen van webdesign laat zien. Download foto in grote maat Je kunt deze link volgen op DeviantArt. Een nieuw venster opent de DeviantArt-pagina. Klik daar op het woord Downloaden rechts van de afbeelding en sla de afbeelding op uw computer op.
