Javascript er på topp nå. Nye navigasjonsalternativer

I utgangspunktet var det planlagt å legge ut en oversettelse av en engelskspråklig artikkel om webdesigntrender i 2017, men etter å ha studert ulike kilder bestemte vi oss for å endre konseptet til denne artikkelen litt. Saken er at den siste måneden har det blitt publisert ganske mye på Internett tematiske materialer om moderne, og meninger, som de sier, er forskjellige. På den ene siden er dette logisk, fordi Ulike forfattere har egne antakelser om hva som vil være aktuelt for nettsider i år. På den annen side er disse prognosene svært subjektive.

Generelt har vi samlet alle alternativene og kompilert noe som et sammendrag av nettdesigntrender 2017. La oss starte med de mest populære trendene, som er notert av mange eksperter, og gradvis gå videre til mer "unike" ideer. Forresten, hvis du har tillegg og tanker om emnet, del dem gjerne i kommentarfeltet. Pluss at vi anbefaler å lese om - også et nyttig innlegg.

1. Ikke-standard "abstrakt" design

Rutenettet for nettsider anses som noe etablert grunnleggende konsept, som hjelper til med å organisere plassen til en nettside på riktig måte. Samtidig presset hun spesielt kreative designere inn i visse grenser. Imidlertid har det alltid vært modige sjeler som skaper originale løsninger, ikke kontrollert av noen stive grenser. Slike arbeider finnes som regel i bilde- og kreative emner, men i 2017 vil denne nettsidedesigntrenden spre seg til strenge bedriftsprosjekter.

Ikke-standard arrangement av elementer gir mer interessante muligheter: Lar deg bruke hele sideplassen, legge til lag med objekter og en følelse av dybde til layouten. Du vil kunne implementere et design som vil imponere brukere selv uten fargerike fullskjermsvideo eller animasjon. Med hundretusenvis av klassiske layouter på nettet, vil abstrakte, unike design nesten alltid skille seg ut og tiltrekke seg oppmerksomheten til besøkende (som WOW-faktoren). Og du må bruke dette!

2. Nye navigasjonsalternativer

For et ikke-standardprosjekt - en avansert meny. I dag trenger du ikke å plassere en horisontal i overskriften. På grunn av økende popularitet adaptive oppsett Mange brukere har allerede blitt vant til Hamburger-menyikonet (består av tre horisontale striper), som i økende grad vises på vanlige versjoner nettsteder. Grensen mellom mobil- og skrivebordsdesign viskes gradvis ut. I år vil vi se mange eksperimenter med plassering og form på menyer - dette kan bli en av hovedtrendene for nettdesign i 2017.

Slike løsninger lar deg bruke sideplass på en annen måte. I tillegg til intuitiv rulling ned og til siden, samt festet vertikal blokk Ulike skjulte skyveelementer vil være populære i navigasjon. Med deres hjelp kan du plassere alle nødvendige undermenyelementer på én skjerm. På en måte gjør dette nettstedets navigering mer detaljert og nyttig for brukerne. Det eneste viktige er at de er i stand til å håndtere din ikke-standard løsning. Sørg for å teste effektiviteten i praksis.

3. Kort i design

Kort er langt fra ny trend innen nettstedsdesign, men i 2017 vil det fortsatt være aktuelt. Denne avgjørelsen effektivt presenterer informasjon til ulike plattformer: begynner med mobilapplikasjoner og avsluttes med visning på store TV-skjermer. Dette formatet for organisering av data vil gjøre det så praktisk som mulig for brukere å fokusere all informasjon på objekter.

Denne tilnærmingen brukes av mange populære prosjekter på nettverket: Facebook, Pinterest, Netflix. Siste alternativ- Generelt sett et utmerket eksempel på vellykket implementering av kort i et design som kombinerer minimalisme, navigasjonsevner og effektivitet.

4. Del oppsett med skjermen delt i 2 deler

I år vil vi se flere oppsett med todelt visning av informasjon på skjermen. Denne webdesigntrenden vil være spesielt aktiv i 2017 på hjemmesider og. Visuelt ser implementeringen bra ut i minimalistiske design med kontrasterende bakgrunner eller bilder.

Designeren vil kunne bruke ulike visuelle designteknikker i tilstøtende blokker innenfor ett nettprosjekt. Og resultatet vil se naturlig ut. Forresten, delte layouter fungerer bra for Call to Action på landingssider. Flere detaljer om metoden.

5. Stor og original typografi

Jeg husker tilbake i 2009 publiserte vi hvor bruken av enorme fonter var en av de lovende trendene for nettsteddesign. Det samme vil trolig skje i 2017 (iht i det minste de fleste designere nevner dette). Hovedårsaken er selvfølgelig for å tiltrekke seg oppmerksomhet: noen trenger å fremheve bestemte objekter på siden, noen vil forklare hvordan man bruker navigasjon riktig, etc. Typografi blir uansett tykkere og større. Ved implementering kan du finne blogginnlegg om og nyttige.

Samtidig blir mange nettsteder kvitt standarden systemfonter, som lar deg diversifisere utseendet deres betydelig. Med fremveksten av gratis originale webfonttjenester ( Google Fonts, Typekit), vil deres popularitet øke enda mer. Det ser ut til at vi i 2017 også vil se eksperimenter innen nettstedtypografi. Hovedsaken i denne saken er ikke å overdrive - husk at teksten skal være godt lesbar. Forresten, hvis du jobber med WordPress, kan artikkelen Hvordan koble en font i WordPress (inkludert Google Fonts) være nyttig for deg.

6. Gradienter og lyse farger

En annen webdesigntrend i 2017 er bruken av lys fargepaletter for gradienter (og mer). Starten på epoken med flat design brakt online interessante funksjoner, men du må jobbe i denne stilen veldig nøye, fordi det kan bidra til depersonalisering av nettstedet. For å løse problemet begynte noen eksperter å eksperimentere med lyse farger og gradientløsninger. I år vil trenden fortsette å utvikle seg, og ikke bare på nettet (alle har sikkert allerede lagt merke til den nylige oppdateringen av Instagram).

Denne trenden kan brukes ikke bare for bakgrunnen. En populær teknikk er å lage en overgang mellom to farger og legge dem på bildet. Dette lar deg gjøre bildet mer interessant, og generelt ser effekten uvanlig ut. Lyse farger gir dybde, dynamikk og behagelig energi til designet. De kan fremheve en side og elementene på den godt.

7. Animasjon og mikro-interaksjoner

Animasjon på et nettsted i seg selv er ikke nytt, men designere lærer hvert år å implementere det vakrere og mer effektivt. Liten visuelle effekter for bilder/objekter/innhold kan ikke bare gi prosjektet ditt liv, men også legge til ekstra verktøy tilbakemelding med brukeren. I moderne UI/UX-grensesnitt gjør ulike mikrointeraksjoner rutineprosesser til morsommere måter å få informasjon på + lar brukeren se og forstå hvordan dette eller det sideelementet fungerer (meny, navigasjon, knapper).

8. Parallakseeffekt

En annen tidligere kjent trend for webdesign i 2017 bør åpne med ny side. Parallaxen i seg selv implementeres gjennom forskjellige hastigheter bevegelse av bakgrunn og forgrunn ved rulling, noe som skaper inntrykk av dybde og dynamikk i bildet. I år kan vi forvente mye mer komplekst arbeid med flere lag, ulike bevegelsesretninger og bruk av effekter. Bruk denne teknikken forsiktig for ikke å distrahere brukere fra innholdet på nettsiden. Nedenfor finner du bilder med lenker til kildesider.

9. Nesten virtuell virkelighet

VR er et av de mest aktuelle temaene i dag, til tross for at den reelle situasjonen på dette området er mindre optimistisk enn mange prognoser. Selvfølgelig kunne denne funksjonen ikke annet enn å påvirke designerne. I noen layouter kan du finne forskjellige teknikker som vil skape en "tilstedeværelseseffekt" for brukeren: 360-graders videoer og panoramaer, "filmlignende" videoinnlegg, spill, etc.

10. Taktil, naturlig design

Denne trenden kombinerer to retninger samtidig - naturlige farger og taktil design. Overdreven entusiasme for flate flate løsninger har gjort mange nettprosjekter til monotone, ansiktsløse Bootstrap-oppsett. Nå prøver noen designere å bevege seg mot mer naturlige løsninger, for eksempel legger de ut bilder og realistiske 3D-modeller slik at brukeren får følelsen av å kunne ta på og ta på objekter på siden. De bruker også naturlige materialer som teksturer, illustrasjoner og bakgrunner + naturlige nyanser(grønn, brun, grå, nøytral metallisk).

11. Andre nettdesigntrender 2017

I prosessen med å studere de viktigste nettsteddesigntrendene i 2017, kom vi over forskjellige meninger. Du har allerede gjort deg kjent med de viktigste alternativene, og nå skal vi kort snakke om et par antakelser som viste seg å være mindre populære. Noen av dem ble forresten aktivt brukt tidligere, men i år vil trenden fortsette.

Du kan gjøre bakgrunnen enda mer imponerende ved å legge til animasjon eller video. Takket være YouTube og lignende prosjekter er videoinnhold nå veldig populært, du kan bruke denne funksjonen på nettstedet ditt. Hvis du legger til lyd, ikke slå det på som standard, brukeren må ønske å gjøre det selv.

Geometriske former

Hvis du ser nøye på skjermbildene av nettprosjektene ovenfor, vil du legge merke til bruken av forskjellige geometriske former. Dette er ofte kvadratiske/rektangulære former, men kurver, trekanter og sirkler finnes også. Slike blokker kan inneholde innhold eller brukes til å fremheve bakgrunnen.

Unike illustrasjoner

Vi fant ikke mange originale verk i utvalget, men denne webdesigntrenden vil fortsatt være relevant i 2017. For det første gir illustrasjoner et personlig preg på prosjektet ditt (som er et stort pluss i en tid med flate oppsett). For det andre fungerer metoden godt med tilpasset typografi, slik at du kan lage enda mer unike layouter. Du kan også inkludere brukstrender her. ekte bilder i design/innhold i stedet for bilder fra arkivbilder - originalitet er alltid etterspurt.

Total

Vi har gjennomgått de 10 beste trendene innen webdesign for 2017, som nå vil bli mest aktivt brukt av designere i deres arbeid. Faktisk var det ikke så mange originale teknikker; en betydelig del av trendene gjentas fra tidligere år: kort, lyse bakgrunner, parallakse, stor typografi, etc. Basert på fonter og navigasjon får vi nok se originale alternativer i år. Bortsett fra punkt c virtuell virkelighet, det kan vi si Den generelle trenden mot forenkling utseende nettprosjekter er bevart, designere fortsetter bare å lete etter de mest effektive og interessante måter dens gjennomføring.

Det er ingen hemmelighet at IT-bransjen utvikler seg med stormskritt. Ny teknologi, ny maskinvare, nye prosjekter. Alt dette har heller ikke spart på webutvikling. I dag er sidene langt fra å være de samme som de var for minst et par år siden. Ganske mange ting har endret seg, og nå litt mer detaljer.

Bruke en videobakgrunn

Det ser ut til at bakgrunnen har vært i bruk lenge. Men det ble et virkelig betydelig fragment av stedets interiør først i år. For mange brukere skaper det en ekte "wow"-effekt.
Et eksempel på en god implementering av en videobakgrunn - http://globalmonitoring.ru/

Parallakseeffekt

Et annet tilsynelatende velstående konsept, men det har først nylig begynt å bli brukt overalt. Hvis noen ikke vet det, er dette en måte å legge til volumetriske lag på et nettsted og få dem til å bevege seg etter behov. Med andre ord, legg til mer interaktivitet.
Eksempel - https://www.grabandgo.pt/

JavaScript og biblioteker

Apropos interaktivitet. Har du sett minst ett nettsted uten js i 2017? Ikke meg. Og det handler ikke engang om js selv, men om bibliotekene. Ja, jQuery er en kul ting, men alle de beste front-end-utviklerne har allerede byttet til react.js, angular.js, vue.js og andre biblioteker. Jeg kommer til å lære en av dem selv i fremtiden (sannsynligvis vue.js).
Hvor ville du uten js? Alle disse hoppende elementene, blackouts, myke overganger og så videre - alt er praktisk å implementere gjennom skript.

Tilpasningsevne

Noe som er verdt å snakke om separat, og vi vil definitivt snakke om det. Adaptivt nettsteddesign er ikke engang en 2017-trend. Dette er en generell trend senere år. Som bruker av en av Runet-frilansbørsene ser jeg forespørsler hver dag som: "Opprett en tilpasset nettside" eller "Vi har allerede en nettside, vi trenger en adaptiv" og så videre. Folk forstår at nå bruker menneskeheten mye mer tid på smarttelefoner enn på en datamaskin, så å lage et tilpasset nettsted (med prinsippet Mobil først) er en veldig viktig komponent for å lage et nettsted i prinsippet.

Bots

Sannsynligvis det mest interessante punktet i denne artikkelen er bots. Nå enkle sider få mennesker trenger det. Gi alle interaktivitet og livlighet til nettstedet. En bot er en slags assistent som allerede brukes aktivt. Mest enkle eksempler— VKontakte- og Telegram-roboter som selv sender deg all informasjon på forespørsel eller uten den. Dette er veldig praktisk for administratorer av fellesskapet der boten opererer. Alt er raskt, vakkert og automatisert.

” av John Moore Williams, leder for innholdsstrategi hos Webflow.

Slutten av inneværende år er rett rundt hjørnet, og hver webdesigner har spurt seg selv minst én gang viktig sak: Hva vil definere webdesign i 2017? Jeg bestemte meg for å finne svaret på dette spørsmålet og spurte WebFlow-designere hvilke trender de trodde ville dominere de neste 365 dagene. Jeg ga også mine egne kommentarer til deres tanker.

Først av alt, la oss få meningen til Webflows hoveddesigner Sergie Magdalin.

1. Innholdsdrevet design

"Arrangementet av designelementer innenfor en gitt struktur bør være slik at leseren lett kan forstå hovedideen uten å redusere sin normale lesehastighet" -Hermann Zapf

De siste årene har det vært et dramatisk skifte i tenkningen om designens rolle i næringslivet. Tidligere ble design sett på som det siste trinnet i prosessen med å lage et objekt: designer-magikeren kommer på slutten og drysser magisk støv på produktet vårt for å gjøre det bedre enn konkurrentene.

Det var veldig interessant å se metamorfosene som skjedde med utviklingsprioriteringer.

Og det vakreste med disse metamorfosene var overgangen til en modell hvor innholdet igjen står i spissen for bordet. Designere over hele verden har innsett at brukere besøker nettsteder primært for innholdet, det være seg korte tweets, langformede spesialiserte artikler eller de siste internettmemes. Den ultimate rollen til design er å presentere innhold på den mest attraktive, forståelige måten og få de beste resultatene fra det.

Dette er en av grunnene til skiftet fra "skeuomorphic" design (hvor elementer er avbildet så likt som mulig som deres motparter i den virkelige verden) til flat, minimalistisk design. Ut fra disse vurderingene skapte Google Material Design.

Selvfølgelig, som Newtons tredje lov sier, for hver handling er det en like sterk reaksjon. Mange designere tror at mote er flat design"drepte" selve designånden. Vi forventer at denne debatten vil fortsette i året som kommer, men fokus vil fortsatt være på innhold – grunnlaget for ethvert designarbeid.

2. Samspill av høy kvalitet mellom designere og utviklere og designere seg imellom

Designs betydning for å forme virksomheten øker, så det legges mer og mer vekt på at designere jobber sammen med sine meddesignere og sine medutviklere.

Denne bekymringen for interaksjon med designere har delvis oppstått på grunn av det enorme volumet av mobil- og nettapplikasjoner som utvikles i dag. I tillegg til at slike gigantiske selskaper som Google, Facebook, Twitter og LinkedIn krever det titaniske arbeidet til et designteam med absolutt forskjellige sider, designere må alltid være på samme side med hverandre. Dette betyr at det er behov for større kommunikasjon om prosjektet og hvordan man mest effektivt samarbeid.

For å gjøre denne oppgaven enklere er det laget mange verktøy, fra teammaler og tavler i Webflows Team til grafisk redaktør Figma-grensesnitt som viser endringer i sanntid. Jeg er sikker på at i 2017 vil disse plattformene bli forbedret og supplert.

Hvis vi snakker om samspillet mellom designere og utviklere, vies det mye oppmerksomhet viktig prosess overføring av arbeid. For eksempel i stedet for å sende tungt og klumpete statiske bilder Designere kan nå dele live-renderte mockups med verktøy som InVision, Marvel, UXPin.

Carson Miller vektet dette i sin nylige artikkel "The Future of Front-End Design" på TechCrunch:

«Før eller siden vil verktøy for å lage design og designmønstre fullstendig erstatte front-end-utvikling. Du kan enkelt lage en høykvalitetsbase for alle rammeverkene dine uten å måtte skrive kode for hånd."

3. Forenklet designer-til-utvikler prosess

Design- og prototypeverktøyene nevnt ovenfor lar deg visualisere de ulike stadiene av samarbeid gjennom visualiseringer som spenner fra animerte Keynote-filer til fullt funksjonelle nettsteder. Denne metoden for å dele arbeidsmateriell reduserer responstiden i prosjektet, og øker dermed kvaliteten på designet, øker hastigheten til utviklingsteamet og reduserer muligheten for skuffelse over resultatet. Det forbedrer også kundeinteraksjonen. For mange WebFlow-brukere har for eksempel klientmøter blitt til fullverdige arbeidsmøter hvor designere raskt kan implementere ideer og alle kan teste ideene sine nesten umiddelbart.

Nettdesigntrender i det kommende året ifølge produktdesigner Gadzhi Kharkharov:

4. Stor, høy overskrift

Etter hvert som webdesignverdenen begynner å fokusere på innhold, er det stadig mer vanlig å se inspirerende overskrifter på nettsteder med matchende skrifttyper som er like store og fete som innholdet.

#MadeInWebflow Heco-partnerne

Som du kan se fra eksemplene, refererer "stor" og "fet" ikke bare til beskrivelsen av fonten. Snarere handler det om å dedikere en betydelig del av startskjermen til en enkel, men sterk og selvstendig uttalelse om produktet eller tjenesten. En slik overskrift bør inneholde essensen og være forståelig for enhver besøkende, og unngå unødvendig pompøsitet (ok, uttrykket "Design det umulige" kan høres for høyt ut).

I dagens travle, informasjonsbelastede miljø fungerer korte, kraftige uttalelser som disse godt for alle merker.

5. Kompleks markup som kommer fra det grunnleggende innen grafisk design

Hvis vi ønsker å forutsi utviklingen av webdesign (i det minste den visuelle siden), må vi se på historien til grafisk design.

I løpet av de siste årene har nettsideoppsettet vært begrenset CSS-funksjoner, men nye moduler som Flexbox og CSS Grid (kommer i mars 2017) vil tillate deg å realisere dine villeste web-oppmerkingsideer.

Vår hovedoppgaven nå - for å forstå hvordan de nye rutenettlayoutfunksjonene til blokker skal fungere innenfor rammeverket adaptiv design.

Her er noen eksempler på hva du kan forvente (forutsatt at du har en nettleser som støtter CSS Grid, som Firefox Nightly, Safari Technical Preview eller Chrome Canary):

Eksperimentell layoutlab Jen Simmons

Vær oppmerksom på stilen til hovedblokken - en klar referanse til historien til grafisk design.

Rutenett etter eksempel

Du kan se flere eksempler på nettsiden.

6. Flere SVG-er

SVG (skalerbar vektorgrafikk) Vektorgrafikk) har flere fordeler for webdesignere og utviklere enn tradisjonelle bildeformater som JPG, PNG eller GIF.

Grunnleggende fordeler med SVG er beskrevet i selve navnet på formatet - disse er skalerbarhet og vektor. I motsetning til raster- og pikselbaserte formater, består SVG-bilder av vektorer - matematiske beskrivelser objektformer. Dette betyr at SVG er oppløsningsuavhengig og bilder i dette formatet vil se bra ut på alle skjermer og enheter. Det er ingen grunn til å bekymre deg for at bilder er uskarpe på netthinnen.

Men det er ikke alt. SVG er også kjent for ikke å kreve at HTTP-forespørsler sendes. Hvis du noen gang har sjekket nettstedets lastehastighet, har du kanskje lagt merke til at disse HTTP-forespørslene virkelig kan bremse nettstedet ditt. Det er ikke noe slikt problem med SVG.

7. Verktøy for regelbasert responsiv design

Responsiv design har fullstendig endret måten vi ser på webapplikasjoner og lager dem.

Men merkelig nok har ikke prinsippet om drift av designprogrammer endret seg i det hele tatt. De fleste av disse verktøyene fungerer slik: du må lage en lignende side igjen og igjen for å ulike enheter og tillatelser. I en bransje som krever rask idégenerering, rask utvikling Og kjapp start, slik sløsing med tid er rett og slett uakseptabelt.

En ny bølge av designverktøy (som Figma) forventes å være basert på "regler" som justerer utseendet til nettsteder på ulike skjermer og enheter, og dermed redusere antallet gjentatte designerhandlinger. Slike verktøy er basert på de romlige relasjonene til elementer, og når vi endrer skjermstørrelse eller enhet, streber de etter å opprettholde disse relasjonene ved å endre størrelsen på elementene og polstringen mellom dem.

Forresten, i dag er det lignende verktøy for nettstedoppsett, ikke bare for designere, men også for vanlige brukere. For eksempel TruVisibility.com - plattformen tilpasser det opprettede designet nøyaktig i henhold til visse regler, i henhold til hvilke layout og størrelser på elementer justeres til skjermstørrelsen. Alt som gjenstår er å gjøre noen få justeringer for å sikre at nettsiden ser ut som den skal på enheter. Brukeren trenger ikke å gjenopprette versjonen for mobile enheter, og dette sparer ham for mye tid.

Designtrender for 2017 ifølge Ryan Morrison, senior grafisk designer.

8. Mer lyse farger

Da epoken med minimalisme og brutalisme begynte i webdesign i 2016, prøvde designere å legge til mer personlighet til arbeidet sitt uten å gå utover fasjonable stiler. Og det er i det minste noen få tilfeller der lyse og dristige farger har blitt brukt med stor suksess.

Ta en titt på det nye Asana-nettstedet med en fargeklatt:

Nytt ikon Instagram-apper fikk mye kritikk, men denne redesignen frisket utvilsomt opp merkevaren:

Alt Stripe gjør krever ikke en separat visning:

Som du kan se, er det ikke bare lyse og dristige farger. Gradienter er også tilbake i stil, og blander og uskarp farger i nyanser som minner om en middagshimmel eller en flammende solnedgang. Det er noe av en renessanse av naturalisme med levende farger og dristige gradienter, og jeg personlig ser frem til å se mer av denne typen arbeid i 2017.

Selv om det kanskje er verdt å redusere lysstyrken litt? Vi ser på deg, Asana.

9. Mer vekt på animasjon

Animerte elementer har spilt i lang tid nøkkelrolle i nettgrensesnittet, og denne trenden vil fortsette i 2017. Faktisk, så lenge designere har tilgang til verktøy for å utvikle overbevisende animasjoner, vil vi se disse effektene bli mer synlige og mer sofistikerte.

Dette emnet er spesielt viktig fordi det blir enklere å lage animasjoner hver dag. På design- og innholdskonferansen 2016 la animasjonsguruen Val Head vekt på at designere bør ha merkevarens mål og behov i tankene når de designer animerte elementer for å oppnå den effekten innholdsskapere forventer. Hvis dette rådet blir fulgt, vil animasjonen utføre oppgaver som er meningsfulle for merkevaren, og ikke bare gi brukeren migrene.

10. Uvanlige markeringer

2016, som de foregående årene, er kjent for de endeløse diskusjonene om at webdesign enten dør eller mister ånden.

De som prøver å overbevise alle om at webdesign er dødt, overdriver tydeligvis. Mange fortsetter å lete etter måter å presentere innhold for brukere på nye måter. En av de mest fristende måtene er å bryte systemet og ignorere det vanlige rutenettoppsettet diktert av reglene for responsiv design.

Den "ødelagte" markeringsmetoden innebærer at elementer går utover det omhyggelig justerte rutenettet. Slike teknikker kan noen ganger til og med virke ubehagelige for øyet. For eksempel:

Tekster og bilder som kolliderer med hverandre:

Tekster og bilder spredt (tilsynelatende) tilfeldig over siden:

Dette var den første delen av oversettelsen av artikkelen «18 webdesigntrender i 2017». Er du enig i meningene til Webflow-eksperter? Hva slags webdesign tror du vil være på moten i året som kommer?

I 2016 redesignet mange selskaper nettsidene sine, og reduserte antallet navigasjonsalternativer. Denne trenden vil fortsette i 2017.

Sideoverskriftsmenyer som tidligere inkluderte 5-7 alternativer, vil nå tilby 3-4 alternativer.

Færre alternativer gjør det enklere for brukeren å søke nødvendig informasjon og unngår situasjonen med «valglammelse».

Et godt eksempel på en ny tilnærming er Ikea. I skjermbildene nedenfor kan du sammenligne de gamle og ny verson selskapets hjemmeside.

Gammel versjon:

Ny versjon lansert i 2016:

Avslag på hamburgermenyen

En hamburgermeny gir ikke brukeren noen ide om dybden på nettstedet eller applikasjonen. Som et resultat forblir han desorientert.

Spotify har allerede forlatt hamburgermenyen i appen sin. Flere selskaper vil følge hans eksempel i 2017.

Duotoner

Bruken av duotoner gjør nettstedets design minimalistisk og lar deg holde brukerens oppmerksomhet på hovedbudskapet eller navigasjonen.

I 2017 var mer enn aktiv bruk duotoner i stedet for fullfargebakgrunner.

Taktil design

Ulempen med parallaksrulling er at det senker nedlastingshastigheten til sidene.

I 2016 ble animasjon sett på som en lovende trend. I år er imidlertid utviklernes fokus på ytelse. Fra dette synspunktet er ikke parallaksescrolling den mest optimale løsningen.

Meningsfull handling

Et av kjerneprinsippene for materialdesign er "meningsfull handling." Google tror det "handlingen må være meningsfylt og hensiktsmessig, tjener til å tiltrekke oppmerksomhet og opprettholde kontinuitet".

Tumblr-appen – godt eksempel implementering av dette prinsippet. Den vant en pris i 2016 Materialdesign for animasjon.

Unngå arkivbilder av lav kvalitet

Bedriftsnettsteder bør invitere brukere til å samhandle og reflektere verdiene til virksomheten. Det er ikke lenger plass til kjedelige arkivbilder av lav kvalitet. Som dette:

Færre apper, flere PWAer

PWA-teknologi (Progressive Web Apps) lar et nettsted fungere som en applikasjon. Inkludert offline. Den brukes allerede av så store publikasjoner og selskaper som The Washington Post, Airberlin og Flipkart. I år vil teknologiens popularitet vokse.

Google Fonts

Google har laget et skriftbibliotek med åpen kildekode kildekode i 2010 år. I 2016 fortsetter arbeidet med materialdesign, har selskapet også forbedret sin Google Fonts-tjeneste. Som et resultat har forhåndsvisninger av skrift blitt raskere og tilpasningen enklere. Utvalgte delen inneholder fonter som passer godt med materialdesign.

I 2017 vil enda flere nettdesignere jobbe med Google-fonter.

Minimalisme

Denne trenden kombinerer mange andre trender nevnt ovenfor. Minimalisme betyr en vektlegging av ytelse (hastighet) og brukervennlighet. Innenfor denne tilnærmingen viktig rolle Typografi, kontrast og rom spiller en rolle.

En god nettsideeier jobber hele tiden med å forbedre den. I dette arbeidet må han stole ikke bare på analyse av publikum, nettanalysedata og kundeanmeldelser, men også på bransjetrender. For det er mange nyttige ting i trender som kan forbedre kundeinteraksjonen med nettstedet. Men trender må brukes forsiktig og klokt. Velg kun de som er egnet for løsningen aktuelle problemer nettside og for forretningsutvikling.

Derfor ga vi i denne artikkelen ikke bare en liste over webdesigntrender, men ga også anbefalinger for å bruke disse trendene på nettstedet ditt.

1. Brukervennlighet vil bli en vare.

Et eksempel på forbedring av brukervennligheten til nettstedet http://www.telemirspb.ru/

Følgende grunnleggende prinsipper Brukervennlighet hjelper nettsteder med å tiltrekke seg flere kunder og redusere antallet støtteanrop. Stadig flere bedrifter tilbyr nettsiderevisjoner, da det er etterspørsel etter å finne feil på nettsiden. Vanen med å handle og bestille tjenester via Internett øker etterspørselen etter praktiske nettsteder.

Akk, mange lager nettsider selv, og kommer så til oss med den skapte skam. Det er viktig å tenke gjennom prosessen med interaksjon med ressursen på forhånd: hvilke seksjoner vil være i den første versjonen og hvilke som vil bli lagt til senere. Det er umulig å planlegge alt, men forhåndsplanlagt navigasjon vil spare tid og penger på fremtidige forbedringer. Velg også motoren for nettstedet ditt med omhu. Du bør ikke velge en bloggmotor (for eksempel WordPress) hvis du planlegger å selge noe på siden eller lage produkt-/tjenestesider.

Hvis du jobber i et svært konkurransepreget miljø, forstår du hvor viktig det er å skille deg fra konkurrentene dine.

Det er derfor, når du planlegger å lage en nettside eller forbedre en eksisterende, må du først se på grensesnittet gjennom klientens øyne og prøve å forutsi problemene brukeren kan støte på.

2. Lange tekster vil forsvinne

La oss være ærlige med oss selv: lange tekster ingen leser. Unntak inkluderer bøker og artikler. Når en klient ønsker å bestille en tjeneste eller et produkt, er han interessert i spesifikk informasjon: pris, hovedkjennetegn ved produktet/tjenestens innhold, leveringsbetingelser/oppfyllelsestid. Kort og strukturert informasjon sparer klienten tid og oppmuntrer ham til å bestille. Dessuten, hvis klienten sammenligner flere nettsteder, vil den mest konsise beskrivelsen definitivt vinne.

Lange tekster er også upraktiske å se fra mobile enheter, som nesten alle bruker. Ifølge verdensstatistikk, i oktober 2016 antallet mobilbrukere det er flere enn stasjonære.

Se på publikummet på nettstedet ditt, for eksempel i Yandex.Metrica i rapporten Sammendrag → Enhetstype og se hvor stor prosentandel av kundene som kommer fra telefoner og nettbrett. Ha denne målgruppen i bakhodet når du legger ut innhold.

Legg til animasjon til nettstedet ditt på en fornuftig måte. Det skal være så nøyaktig og raskt som mulig. Å forstørre et bilde når du klikker på det, fremdriftsindikatorer mens du venter på resultater på nettstedet, et popup-vindu som vises når du legger til en vare i handlekurven, endre fargen på knapper og lenker etter å ha klikket er de vanligste mikrointeraksjonene som definitivt vil hjelpe brukerne dine.

6. Bruk av kinobilder eller "live" bilder

Widescreen-videoer er erstattet av cinemagraphs – bilder der bare ett element beveger seg. Det er best å plassere dem på den første skjermen på siden for å tiltrekke brukerens oppmerksomhet og skape en wow-effekt.

Hvis du velger en slik gif for å matche temaet på nettstedet, vil det se veldig kult ut. Du kan for eksempel ta et levende bilde av hovedproduktet ditt og legge det ut på Hjemmeside eller på bannere med kampanjer.

I Russland brukes kinobilder hovedsakelig i sosiale nettverk, så vi gir eksempler på utenlandske nettsteder - et nettsted for vannbeskyttelse og bilutleie.

7. Unngå "typiske" arkivbilder

Vi håper at alle slags små mennesker, jenter i hodetelefoner og fotografier av smilende familier forsvinner fra sidene. Eksempel på arkivbilder:

9. Mobile First

Essensen av denne tilnærmingen er at når du designer en nettside, må du tenke på hvordan den skal vises på mobile enheter. Mange artikler og bøker er skrevet om dette emnet, for eksempel anbefaler vi å lese "Mobile First" av Luke Wrobleski.

Som nevnt ovenfor (se punkt 2), mobiltrafikk vokser, og det er til og med brukere som ikke har skrivebordserfaring. Derfor anbefaler vi, for ikke å miste kunder, å optimalisere nettstedene dine for mobile enheter.

Artikkelen viser kun de mest grunnleggende trendene. La oss se hva som venter oss i år. Hvis du også legger merke til noen trender og er sikker på at de vil utvikle seg, skriv i kommentarfeltet, vi diskuterer gjerne. Og hvis du tviler på at utformingen av nettstedet ditt er oppdatert eller du har lest artikkelen og funnet utdaterte elementer, vær oppmerksom på tjenesten