Gewijd aan webdesign en digitale trends in 2018. Olga is lid van de Awwwards-jury en kijkt elke dag naar honderden nieuwe websites die zijn ontwikkeld door bureaus en ontwerpers van over de hele wereld. Hierdoor kan ze nieuwe ontwikkelingen en trends op het gebied van webontwikkeling en design volgen.
Het artikel beschrijft de belangrijkste boodschappen van de lezing, en met volledige versie je kunt de link zien.
Interactief scrollen
De cursor wordt aangegeven met een pijl. Het verandert ofwel in een klikkende vinger, er kunnen hovers verschijnen. Nu kan de cursor een element zijn. De overgang naar de pagina wordt eronder gemarkeerd. Elementen eronder kunnen de cursor veranderen of ermee werken.
De Volcan-website is een favoriet voorbeeld. De diamantcursor wordt een hint van wat je kunt verwachten als je erop drukt. Er is een element van interactiviteit. Als gevolg hiervan is de hover niet nodig, zijn rol wordt gespeeld door de cursor.
Een voorbeeld van een interactieve scroll op de Volcano website
Een nieuw thema voor UI / UX-ontwerpersgevechten - hoe handig is het? Maar als je er goed over nadenkt, kan het goed uitpakken.
SVG-maskers
Met hun hulp kun je ruimteovergangen maken. Ze zijn eenvoudig in ontwikkeling, maar ze bevrijden de handen van ontwerpers. De Rich Brown-site gebruikt een kruis als overgang. Maar het kan elke vorm zijn.
Wie Photoshop gebruikt, daar kan het door simpelweg met een maskertje een gaatje in de laag uit te snijden. Of overlappende 6 vierkanten. Met behulp van dit ding hebben we voor onze klant een overstap gemaakt van scherm naar scherm. Het openen van een afbeelding vanuit een formulier is ook een SVG-masker. Maar als je naar de lay-out kijkt, ziet het eruit als een statische afbeelding.
Canvas
Dit is al moeilijk. Je hebt beslist iemand nodig die verstand heeft van de wiskundige aspecten van het proces. Sommige dingen zijn te leen bij bibliotheken. Maar er is geen cursorsynchronisatie in SVG. En hier is er.
Climachill van Adidas bijvoorbeeld.
Morphing met letter is Canvas. De verloopoverloop is Canvas. En dit is al enkele jaren populair, maar zal niet snel achterhaald zijn. Omdat het lichtgewicht is, en het zijn 2D-graphics die moeilijk te herhalen zijn. Geschikt voor wie veel "wow" op zijn website wil.
3D + WEBGL
De richting zal zich ontwikkelen. Als je zelfs maar een kleine, maar hoogwaardige video van 1 minuut maakt, zijn dit minimaal 10 mensen in een team. In 3D is het 1 ontwerper. En webgl is een +1 ontwikkelaar. 3D kan klassiek zijn, zoals op de Globekit-website. Ziet er fantastisch uit, uniek. Hoewel het in totaal uit 6 dia's bestaat.
Maar nogmaals: je moet voorzichtig zijn met de aanvraag. Eén zo'n effect is voldoende om de site helder, maar niet flitsend te maken.
VR
In maart 2017 verscheen de eerste VR-site. Er zijn er meer. Onlangs is de eerste VR-track bij een voetbalstadion gemaakt. Een man zet een masker op en het lijkt hem alsof hij zich op een racebaan bevindt.
Een virtueel raceapparaat van Audi.
We hebben recentelijk gediscussieerd over de vraag of VR wortel zal schieten. Ja, het heeft een toekomst omdat het gemakkelijker is geworden om te doen. We maken een portfolio in VR zodat je het kunt omdraaien door je hoofd te draaien, en als je je blik vasthoudt, aan het werk gaat.
AR
Cool dat je nu zonder de applicatie kunt. Je gaat naar een browser op een link en je zou een markering moeten hebben die sommige dingen zal lezen. Je laat deze marker zien en hij tekent wat je maar wilt. Dat wil zeggen, je maakt eerst een ontwerp in 3D, laat het zien en het bouwt voort op de reeds augmented reality. Je kunt het voor jezelf aanpassen.
PWA is een browserfunctionaliteit die eruitziet als een applicatie. Het wordt toegevoegd als een pictogram en ziet eruit als een applicatie. Het wordt zelfs in een browser geopend en stelt u in staat om meldingen naar de gebruiker te verzenden, het op te nemen via een formulier en offline inhoud te ontvangen.
Een kader
Dit is een kant-en-klare bibliotheek waar je alles voor AR en VR kunt vinden. Je kunt zien hoe ze werken, ze in actie zien.
Daarom raad ik alle webdesigners aan om hun studie in 3D af te ronden. Dit maakt je site veel levendiger.
Houd ze in de gaten. Ze staan niet stil. Er bestaat zoiets als Google-experimenten. Maak een paar uur vrij om al het moois te ontdekken. Google voert veel experimenten uit, waarbij ontwikkelaars en bureaus betrokken zijn. Dat laatste is het gebruik van big data.
Onlangs is Awwwards een samenwerking aangegaan met Google. Dit betekent dat de focus nu komt te liggen op mobiele sites. Optimalisatie van technologieën zal ze gemakkelijker gaan maken. Google begint steeds meer interesse te tonen in mobiel internet.
WebVj
Een heel nieuw probleem. De pagina wordt opgebouwd op basis van data. Er is een Japanse man, Masatatsu Nakamura, die dit bijzonder serieus neemt. De graphics zijn volledig gemaakt door een programmeur, niet door ontwerpers. Het doet veel voor Google Experiments.
Een voorbeeld van Masatatsu Nakamura-graphics gemaakt met WebVJ
Trendosics
De meest gestelde vraag is “Welke kleur/lettertype/patroon wordt volgend jaar trending?”. Ik noem dit "trendschoenen".
Het is momenteel niet mogelijk om een enkele trending fontset te definiëren of kleurbereik... Soort van pastelkleuren een trend beginnen te krijgen. Maar dan kijk je naar deze heldere explosieve locaties, en je realiseert je dat ze dat niet zijn.
Ik zou je aanraden om toch met de stroom van de component te spelen door patronen te gebruiken. Hierdoor zal de inhoud er duurder en interessanter uitzien. Het gebruikelijke semi-transparante en lichtgewicht patroon geeft al status aan uw site. Schuine lijnen, gebroken elementen - het is niet zo moeilijk en vereist geen betrokkenheid van de ontwikkelaar.
In het tijdperk van opkomende IT-technologieën kun je gewoon niet aan de kant blijven staan en kijken wat er gebeurt. Jij moet dit gebeuren. Om geen buitenstaander te zijn, moet je kennis putten uit alle mogelijke en onmogelijke bronnen. en blijf op de hoogte van alle evenementen. 2016 nadert zijn einde, wat betekent dat 2017 al voor de deur staat en iets nieuws zal brengen op het gebied van webontwikkeling. En wat precies, lees je in dit artikel!
Wees geen buitenstaander, blijf bij de tijd.
Bots
Eenvoudige webpagina's zijn niet meer zo populair, ze worden steeds interactiever, bovendien na een tijdje onze online leven wordt zo vereenvoudigd door verschillende interactieve prompts dat we onze hersenen helemaal niet hoeven te belasten. Bots worden nu veel gebruikt en dit is nog maar het begin. Iedereen kent de Slack-applicatie voor bedrijfscommunicatie en dus kun je daar ook een bot ontmoeten die je begroet, je naam vraagt en deze meteen in je profiel vervangt. Bots duiken ook op in veel andere tools en applicaties, wat het begin is van het tijdperk van online helpers.
Bewegings-UI
Animatie, video, GIF's zijn al lang onze dagelijkse routine, alles is zo levendig en aantrekkelijk, wat heeft een gebruiker nog meer nodig? Ze worden veel gebruikt voor: snelle creatie CSS-overgangen en animaties om bruikbaarheid te bieden. Laatste versie Motion UI is uitgerust met een animatiesysteem voor groepsservice, flexibele CSS-sjablonen met geavanceerde mogelijkheden voor een volledige overgang en kan werken met allerlei soorten animatie JavaScript-bibliotheken. We zijn er meer dan zeker van dat mobiliteit het gebruik van statische beelden volledig zal vervangen.
Aanpassingsvermogen
Mobile first is de slogan van onze tijd, elke dag zoekt iedereen, minstens één keer (om nog maar te zwijgen van de verslaafden die echt met een telefoon in hun handen leven), informatie op het internet, stuurt ze berichten of belt ze, dus hun gebruik moet zo gemakkelijk mogelijk zijn. Als je een website-eigenaar bent en nog niet hebt gehoord over responsiviteit, is het tijd om je voeten te pakken en het te implementeren. , om uw potentiële klant het comfort van het gebruik van uw site te bieden. Zoals je misschien zelf al gemerkt hebt, is dit een echte must-have in de wereld van webdesign en -ontwikkeling, daarnaast helpt het je geld te besparen op de ontwikkeling van mobiele applicaties.
Site met één pagina
Ben je in de war door sites met een heleboel pagina's, waar zoveel van alles en al dat onbegrijpelijk is? Maak je geen zorgen, het tijdperk van sites met één pagina staat voor de deur. Dit type site is erg populair bij grote bedrijven, ze zijn handiger in gebruik en het is gemakkelijker om daar informatie te vinden, noodzakelijk voor de gebruiker het bezoeken van de site voor een specifiek doel.
Javascript is nu rijp
Javascript is de toekomst, ondanks het gerucht dat het gebreken heeft en zwakke kanten... Niemand beweert dat ze er echt zijn, maar wat is ideaal in deze wereld? Zelfs Mac OS gebruikt JS in zijn hardware... Bovendien winnen de front-endbibliotheken zoals Angular, Node en React snel aan populariteit, net als de rest van de kleinere bibliotheken.
Het is niet verrassend dat Javascript een integraal onderdeel is geworden van de standaardstack voor webontwikkeling, samen met HTML en CSS. En dit feit spreekt voor zich.
Parallax-effect
Meestal wordt dit effect gebruikt, maar niet veel mensen weten zeker hoe het wordt genoemd. Verduidelijken: dit is De beste manier volumetrische lagen toevoegen aan de site Het kan ook worden gebruikt om een verbluffend 3D-effect toe te voegen.
Trends die de wereld zullen veranderen
In dit artikel hebben we alle veelbelovende webontwikkelingstrends verzameld die de wereld onmiddellijk zullen veranderen. Maar we weten nog niet welke trends ons 2017 te wachten staan. Blijf op de hoogte moderne technologieën en misschien word je op een dag zo geïnspireerd door wat er gebeurt dat je zelf met iets revolutionairs komt?
Een gewone website bouwen is anders eenvoudige taak hoe je een effectieve online marketingtool maakt met een modern design. Een mooie en goed geoptimaliseerde website kost veel tijd, investering en zelfs inspiratie. Hoe ontwerp je een website om meer klanten aan te trekken? Laten we het uitzoeken in het artikel.
Volgens statistieken van 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 hieraan voldoen moderne eisen zowel op technologisch als op designgebied. In dit artikel zullen we ons concentreren op verschijning site - hoe het eruit moet zien in 2017. Overdreven heldere, kleurrijke en fantasievolle lettertypen werden lange tijd als achterhaald beschouwd. Pictogrammen vervangen afbeeldingen om het voor gebruikers gemakkelijker te maken om door menu-items te navigeren. Deze feiten zijn echter bekend bij de meeste experts die te maken hebben met internetmarketing. In dit artikel leer je hoe een modern website-ontwerp eruit moet zien.
1. De focus van webdesign ligt vooral 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 het vermelden waard, aangezien het een must is geworden voor elke bedrijfseigenaar die de verkoop via dit marketingkanaal wil verhogen.
Wat betekent mobile-first benadering? Het is een webontwikkeling die zich richt op mobiele responsiviteit. Het gebruik van responsief ontwerp is volkomen logisch, vooral als u overweegt officiële statistieken gepubliceerd door StatCounter, een onafhankelijk webanalysebureau. Volgens hem is het aandeel van het internetgebruik dat mobiele toestellen bedraagt 51,3%. Om deze reden heeft Google de ondersteuning voor zijn Instant Search-service beëindigd. Deze functie was beschikbaar voor desktopgebruikers en bood zoekresultaten wanneer een persoon net zijn zoekopdracht invoerde. Naarmate het verkeer groeit, kunnen bedrijfseigenaren meer omzet genereren. Daarom is het logisch om je op een breder publiek te richten.
2. Verborgen navigatie
Velen van ons hebben gehoord dat om het percentage van de gebruiker dat een gerichte actie uitvoert te verhogen, het vereist is om het aantal vereiste klikken te minimaliseren. Hoe minder klikken, hoe hoger de conversie. Ondanks dit feit impliceert modern webdesign vaak een verborgen pop-upmenu dat verschijnt na het klikken op de zogenaamde "hamburger". Deze oplossing is gebaseerd op een responsieve ontwerpbenadering, waarbij het nodig is om het menu zo te plaatsen dat het er op mobiele apparaten correct uitziet.
Traditionele sitenavigatie met elementen bovenaan de pagina neemt te veel ruimte in beslag en beperkt de mogelijkheid om de aandacht van de gebruiker te vestigen op zinvolle inhoud. Er is nog een voordeel aan het maken van verborgen navigatie waarmee u een aantrekkelijkere en effectievere startpagina kunt maken.
3. Ruim eerste scherm
Pop-upmenu creëert extra ruimte op het eerste scherm Startpagina... Dit stelt ons in staat om de belangrijkste voordelen van het bedrijf te benadrukken, met behulp van een groter lettertype, aantrekkelijkere en leesbare pictogrammen om effectief de aandacht van gebruikers te trekken. Het tijdperk van "hoe meer informatie, hoe beter" is al voorbij. Het is belangrijk dat de gebruiker een vloeiend pad volgt, waarvan de bestemming een succesvol voltooide doelactie is. Meer vrije ruimte biedt ontwerpers de mogelijkheid om hun beste ideeën voor de hoofdpagina van de site die dit gaat maken marketing kanaal uniek en aantrekkelijker voor gebruikers. Beste opties website-ontwerpen bevatten het eerste scherm met achtergrond afbeelding volle breedte met een paar zachte kleuren. Navigatiegebieden moeten gemakkelijk herkenbaar en leesbaar zijn voor gebruikers.
4. Speciale navigatiegebieden
Met een verborgen menu en een ruim eerste scherm kunt u uw site zo ontwerpen dat de aandacht van gebruikers wordt gevestigd op een paar basisnavigatie-elementen die hen helpen sneller en gemakkelijker beslissingen te nemen. Deze aanpak moedigt gebruikers aan om door de menu's te navigeren door de stappen te volgen die u moet nemen zonder tijd te verspillen aan zoeken. gewenste knop... Dankzij het ruime eerste scherm kunnen belangrijke elementen worden benadrukt door meer grote lettertypen en laat er meer ruimte tussen, waardoor de meest bruikbare inhoud wordt benadrukt.
5. Ontwikkeling van site-ontwerp in Material Design Lite-stijl
Materiaal ontwerp werd een belangrijke voortzetting van de zgn plat ontwerp, een veelgebruikte trend van de afgelopen jaren. Android-ontwerp is gemaakt als interface voor mobiele apparaten, maar heeft nu ook de desktops volledig veroverd. Door deze visuele benadering is gebruiksvriendelijkheid een kernonderdeel van het hele concept. Material Design Lite (MDL) is de volgende generatie van Material Design. Het bevat richtlijnen, lay-outkits en 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 pictogrammen in website-ontwerp is te danken aan het feit dat mensen 65% onthouden visuele informatie na drie dagen en slechts 10-20% - schriftelijk of mondeling. Dat is waarom menselijke brein gemakkelijker om afbeeldingen te verwerken dan tekst. Het is vermeldenswaard dat het pictogram moet overeenkomen met de tekst waartoe het behoort, om gebruikers niet in verwarring te brengen. Verveelde beelden van mensen met hypertrofische en kunstmatige gezichtsuitdrukkingen zijn achterhaald. Pictogrammen moeten ook vectorpictogrammen zijn om op elk apparaat correct weer te geven. U kunt voorbeelden van site-ontwerp in de onze zien en kennis maken met ons werk.
De belangrijkste vereisten voor het gebruik van pictogrammen in webdesign:
- Het pictogram moet overeenkomen met de inhoud;
- Het moet een duidelijke boodschap bevatten;
- Het moet vector zijn;
- Het pictogram moet gemakkelijk te lezen zijn, of het nu klein of groot is.
Laten we verder gaan met laatste trends in de keuze van lettertypen en kleuren voor de site.
7. Eenvoudige lettertypen en zacht kleurenpalet
Giftige kleuren in webdesign zijn ongeveer vijftien jaar geleden niet meer populair geweest. Nu zijn ontwerpers overgestapt op ingetogen pasteltinten, zachte, niet flitsende kleuren. Het 60-30-10-schema verliest zijn relevantie niet: in modern webdesign hebben neutrale kleuren van wit tot lichtgrijs de overhand, voor 30 procent van de ruimte gebruiken ze een helderdere toon en slechts 10% is geschilderd in een verzadigde kleur, waardoor een call to action ontstaat.
Webontwikkeling is nu een tijdperk van eenvoudige schoonheid ingegaan, waar de voorkeur gaat uit naar grote en eenvoudige lettertypen met verschillende zachte tinten. Hoe is deze trend te verklaren? Deze benadering is logisch omdat het de aandacht van de gebruikers uitsluitend richt op de meest belangrijke blokken informatie.
wij presenteerden basislijst nieuwe trends in website-ontwerp. Sterker nog, er zijn er veel meer, waardoor het materiaal te uitgebreid is voor één artikel. We zullen je zeker blijven vertellen over de nieuwste ontwerpoplossingen in webontwikkeling op onze blog.
Ons team helpt je graag bij het maken adaptief ontwerp een site die de belangrijkste trends in webdesign introduceert en efficiënte technologieën voor prestatie maximale optimalisatie... Schrijf ons op, en we helpen je graag verder!
Op 11 oktober was er een lezing van de art director van de Vintage Web Production studio Olga Shevchenko gewijd aan webdesign en digitale trends in 2018. Olga zit in de jury van Awwwards en kijkt elke dag naar honderden nieuwe websites die zijn ontwikkeld door bureaus en ontwerpers van over de hele wereld. Hierdoor kan ze nieuwe ontwikkelingen en trends op het gebied van webontwikkeling en design volgen. We hebben de belangrijkste boodschappen van de lezing opgenomen, en je kunt de volledige versie vinden via de link.
Resultaten 2017
Ik denk dat je, voordat je 2018 begint te analyseren, moet onthouden wat er nieuw was op internet in 2017. Oekraïne ontwikkelt zich actief, maar loopt nog steeds achter op de belangrijkste marktspelers op het gebied van technologie en ontwerpkwaliteit. Als het ons dus lukt om volgend jaar in ieder geval een deel van de trendrichtingen van world digital vanaf 2017 te introduceren, dan wordt dat nu al een groot succes.
Groot menu
Dit was de tendens. Voor velen is dit hebbeding... En nu zijn er al mensen die het slechte manieren vinden. Na het verschijnen van hamburgers begon iedereen het menu onder één knop te verbergen, wat voor veel controverse zorgde. Maar die drie balken waren het roodste gebied op de heatmap voor sitegebruik die we hebben samengesteld na onderzoek naar gebruikersgedrag. Maar uiteindelijk, na het klikken op de burger, verscheen er een klein bord met delen van de site op de pagina, wat niet eens logisch was om te verbergen.
Daarom verscheen in 2017 een grote menukaart, waarop niet het zijbord opvalt, maar volledig scherm... Het principe is dit: als je iets verbergt, zorg er dan voor dat het mooi wordt gevonden en geopend. Zodat de gebruiker, nadat hij het menu heeft gevonden, meer tevreden is dan verwacht.
Geweldige menukaart. Website radioaktivefilm.com
Nu is een groot menu een fetisj van wereldstudio's geworden, net als de pagina 404. Ontwerpers begonnen met het bedenken van een compositie van elementen erin, voegden hovers toe en Extra informatie... Het voegt niet alleen esthetiek toe aan de site, maar breidt ook de functionaliteit uit vanwege de grootte.
Mode-effecten
Glitch, morphing, geometrie, kleurexplosie, minimalisme. Dasha Shapolovala, de ideoloog van de Mercedez-Benz Fashion Week in Kiev, en ik bespraken modetrends en ik sprak over nieuwe trends op internet. En we vonden veelvoorkomende eigenschappen op totaal verschillende gebieden.
In 2016 hebben veel bedrijven hun sites opnieuw ontworpen, waardoor het aantal navigatie-opties is verminderd. Deze trend zal zich in 2017 voortzetten.
Het menu in de kop van een pagina, dat voorheen 5-7 opties bevatte, biedt nu 3-4 opties.
Minder opties maken het gemakkelijker voor de gebruiker om te vinden de informatie die je nodig hebt en vermijdt de situatie van "keuzeverlamming".
Ikea is een goed voorbeeld van deze nieuwe aanpak. In de onderstaande screenshots kun je de oude en nieuwe versie website van het bedrijf.
Oude versie:
Nieuwe versie gelanceerd in 2016:
- Het hamburgermenu verlaten
Het hamburgermenu geeft de gebruiker geen idee van de diepte van een site of applicatie. Daardoor blijft hij gedesoriënteerd.
Spotify heeft het hamburgermenu in zijn app al gedumpt. In 2017 zullen meer bedrijven volgen.
- Duotonen
Het gebruik van duotonen maakt het ontwerp van de site minimalistisch en stelt u in staat de aandacht van de gebruiker op de hoofdboodschap of navigatie te houden.
Meer dan actief gebruik duotonen in plaats van full colour achtergronden.
- Tastbaar ontwerp
Het nadeel van parallax scrollen is dat het de laadsnelheid van de pagina vertraagt.
Anno 2016 werd animatie gezien als een kansrijke trend. Dit jaar ligt de focus van ontwikkelaars echter op productiviteit. Vanuit dit oogpunt is parallax scrollen niet de beste oplossing.
- Zinvolle actie
Een van de kernprincipes van materiaalontwerp is 'zinvol doen'. Google gelooft dat “De actie moet zijn zinvol en passend, dienen om aandacht te trekken en continuïteit te behouden”.
Tumblr-app - goed voorbeeld uitvoering van dit principe. Het won de 2016 Material Design Award voor animatie.
- Het vermijden van stockfoto's van lage kwaliteit
Bedrijfswebsites moeten gebruikers uitnodigen om te communiceren en de waarden van het bedrijf weerspiegelen. Er is geen ruimte meer voor saaie en slechte kwaliteit. stockfoto's... Dus zo:
- Minder apps, meer PWA's
PWA-technologie (Progressive Web-apps) laat de site werken als een applicatie. Inclusief offline. Het wordt al gebruikt door grote publicaties en bedrijven als The Washington Post, Airberlin en Flipkart. De technologie zal dit jaar in populariteit toenemen.
- Google-lettertypen
Google heeft een lettertypebibliotheek gemaakt met open source broncode in 2010 jaar. In 2016 bleef het bedrijf werken aan Material Design en verbeterde het ook zijn Google Fonts-service. Als gevolg hiervan zijn lettertypevoorbeelden sneller en gemakkelijker aan te passen. Aanbevolen is een verzameling lettertypen die goed passen bij Material Design.
In 2017 gaan meer webdesigners met Google fonts aan de slag.
- minimalisme
Deze trend combineert veel van de andere hierboven genoemde trends. Minimalisme betekent een nadruk op prestaties (snelheid) en bruikbaarheid. Binnen deze benadering belangrijke rol typografie, contrast en ruimtespel.
