Det var opprinnelig 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 i løpet av den siste måneden har mye tematisk materiale om moderne blitt publisert på Internett, og meninger, som de sier, divergerte. På den ene siden er dette logisk, siden ulike forfattere har sine egne antakelser om hva som vil være relevant for nettsteder i inneværende år. På den annen side er disse prognosene svært subjektive.

Generelt har vi samlet alle alternativene og satt sammen noe som et sammendrag av nettdesigntrender 2017. La oss starte med de mest populære trendene 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

Et nettstedsnett anses å være et slags veletablert grunnkonsept som hjelper til med å organisere plassen til en nettside på riktig måte. Samtidig drev hun spesielt kreative designere inn i visse rammer. Imidlertid var det alltid våghalser som skapte originale løsninger som ikke var kontrollert av noen stive grenser. Slike arbeider finnes som regel i bilde- og kreative emner, men i 2017 vil denne trenden innen nettstedsdesign spre seg til strenge bedriftsprosjekter.

Det tilpassede arrangementet av elementer gir flere interessante muligheter: det lar deg bruke hele plassen på siden, legge til lag med objekter og en følelse av dybde til layouten. Du kan lage design som imponerer brukere selv uten fargerik fullskjermsvideo eller animasjon. Med tanke på hundretusenvis av klassiske oppsett på nettet, vil abstrakte unike løsninger nesten alltid skille seg ut og tiltrekke seg oppmerksomheten til besøkende (som WOW-faktoren). Og du må bruke den!

2. Nye navigasjonsalternativer

For et ikke-standardprosjekt - en avansert meny. I dag trenger du ikke å sette den horisontale i overskriften. På grunn av den økende populariteten til responsive oppsett, er mange brukere allerede vant til Hamburger-menyikonet (bestående av tre horisontale linjer), som i økende grad vises på vanlige versjoner av nettsteder. Grensen mellom mobil- og desktopdesign viskes gradvis ut. I år vil vi se mye eksperimentering med menyplassering og form – dette kan være en av de beste nettdesigntrendene i 2017.

Slike løsninger lar deg bruke sideplassen på en annen måte. I tillegg til intuitiv ned- og siderulling, og en forankret vertikal navigasjonsblokk, vil forskjellige skjulte skyveknapper være populære. 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 brukere. Det er bare viktig 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 en ny trend innen nettstedsdesign, men i 2017 vil det fortsatt være aktuelt. Denne løsningen presenterer effektivt informasjon på ulike plattformer: fra mobilapplikasjoner til visning på store TV-skjermer. Et slikt format for organisering av data vil gjøre det mulig for brukere å fokusere all informasjon på objekter så praktisk som mulig.

Denne tilnærmingen brukes av mange populære prosjekter på nettverket: Facebook, Pinterest, Netflix. Det siste alternativet er generelt et utmerket eksempel på vellykket implementering av kort i et design som kombinerer minimalisme, navigerbarhet og effektivitet.

4. Del oppsett med delt skjerm i 2 deler

Vi vil se flere delte skjermoppsett i år. 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 samme webprosjekt. 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 at tilbake i 2009 publiserte vi hvor bruken av enorme fonter var en av de mest lovende trendene innen webdesign. I 2017 vil nok det samme skje (de fleste designere nevner det i hvert fall). Hovedgrunnen 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 imidlertid tykkere og større. Ved implementering kan du finne blogginnlegg om og nyttige.

Samtidig blir mange nettsteder kvitt standard systemfonter, som kan diversifisere utseendet betydelig. Med det økende antallet gratis, originale webfonttjenester (Google Fonts, Typekit), vil deres popularitet vokse enda mer. Det ser ut til at 2017 også vil se en del eksperimentering med nettstedtypografi. Hovedsaken i denne saken er ikke å overdrive - husk at teksten må være godt lesbar. Forresten, hvis du jobber med WordPress, så kan artikkelen Hvordan koble en font i WordPress (inkludert Google Fonts) komme godt med.

6. Gradienter og livlige farger

En annen 2017 webdesigntrend er bruken av livlige fargepaletter for gradienter (og mer). Starten på epoken med flat design brakte noen interessante funksjoner til nettverdenen, men du må jobbe veldig nøye i denne stilen, fordi det kan bidra til anonymisering 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 Instagram-oppdateringen).

Denne trenden kan brukes ikke bare for bakgrunnen. En av de populære teknikkene er å lage en overgang mellom to farger og legge dem over på bildet. Dette gjør bildet mer interessant, og generelt ser effekten uvanlig ut. Lyse farger gir dybde, dynamikk og behagelig energi til designet. De kan få siden og elementene på den til å skille seg godt ut.

7. Animasjon og mikro-interaksjoner

Selve animasjonen på nettstedet er ikke ny, men hvert år lærer designere å implementere den vakrere og mer effektivt. Mindre visuelle elementer for bilder / objekter / innhold kan ikke bare live opp prosjektet ditt, men legge til et ekstra verktøy for tilbakemeldinger fra brukere. I moderne UI / UX-grensesnitt gjør ulike mikrointeraksjoner rutineprosesser til morsommere måter å få informasjon på + lar brukeren se og forstå hvordan et bestemt sideelement (meny, navigasjon, knapper) fungerer.

8. Parallakseeffekt

En annen kjent trend for nettsteddesign i 2017 er i ferd med å åpne seg fra en ny vinkel. Parallaxen i seg selv realiseres på grunn av den forskjellige bevegelseshastigheten til bakgrunnen og forgrunnen når du ruller, noe som skaper inntrykk av dybde og dynamikk i bildet. I år venter vi mye mer komplekst arbeid med bruk av 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 presserende temaene i dag, til tross for at den reelle situasjonen i 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, videoinnlegg "som i en film", spill osv.

10. Taktil, naturlig design

Denne trenden kombinerer to retninger samtidig - naturlige farger og taktil design. Et overforbruk av 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 for teksturer, illustrasjoner og bakgrunner + naturlige nyanser (grønn, brun, grå, nøytral metallisk).

11. Resten av 2017 webdesigntrender

I prosessen med å studere hovedtrendene innen nettstedsdesign i 2017 møtte vi ulike meninger. Du har allerede gjort deg kjent med de viktigste alternativene, og nå vil vi kort snakke om et par antakelser som viste seg å være mindre populære. Noen av dem ble forresten aktivt brukt før, men i år fortsetter trenden.

Du kan gjøre bakgrunnen enda mer effektiv 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 aktiver det som standard, brukeren bør selv ønske å gjøre det.

Geometriske former

Hvis du ser nøye på skjermbildene av nettprosjektene ovenfor, vil du legge merke til bruken av forskjellige geometriske former i mange av dem. 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 i 2017 vil fortsatt være aktuell. Først gir illustrasjoner et personlig utseende til prosjektet ditt (som er et stort pluss i en tid med flate oppsett). For det andre fungerer det bra med tilpasset typografi for å lage enda mer unike oppsett. Dette kan også inkludere tendensen til å bruke ekte bilder i design/innhold i stedet for bilder fra fotolager – originalitet er alltid etterspurt.

Total

Vi gjennomgikk de 10 beste trendene innen webdesign for 2017, som nå skal brukes så aktivt som mulig av designere i deres arbeid. Faktisk er det ikke så mange originale teknikker, en betydelig del av trendene gjentas fra tidligere år: kort, lyse bakgrunner, parallakse, stor typografi, etc. Når det gjelder fonter og navigering, vil vi trolig se originale varianter i år. Bortsett fra poenget med virtuell virkelighet, kan vi si at den generelle trenden mot å forenkle utseendet til nettprosjekter fortsetter, designere fortsetter bare å lete etter de mest effektive og interessante måtene å implementere det på.

En slående infografikk om utviklingsveiene til en moderne nettutvikler og teknologiene han trenger for å lære for å bli en front-end, back-end eller devops i 2017.

Introduksjon

Hovedoppgaven er å bestemme profilen for videre utvikling. Prøv, studer, prøv å forstå hva som er nærmere deg - front-end, back-end, devops, eller kanskje en fullstack?

Frontend-stien

I alle områder av nettutvikling er mestring av det grunnleggende i forkant. For en nybegynner er åpenbart nummer én oppgave å lære HTML, CSS og JavaScript (+ jQuery). Etter hvert som du utvikler grunnleggende ferdigheter og utvider din teoretiske bakgrunn, kan du gå videre til mer spesialiserte ting.

Det er mange JavaScript-rammer og biblioteker der ute som gjør livet til en webutvikler mye enklere å eie. Blant dem kan du velge den mest praktiske og passende for en spesifikk programmererpakkebehandler, test- og monteringsverktøy, oppgavebehandler og mye mer for enhver smak og rekke behov.

I dag utvikler frontend-utviklingsindustrien seg som ingen andre. Rammer og verktøy dukker stadig opp og forbedres, nye metoder og mønstre blir født, selve ideologien til frontend har lenge gått langt utover layouten. Derfor er en av hovedoppgavene til en webutvikler å holde seg flytende, for å holde seg à jour med gjeldende trender i utviklingen av dette området.

Backend-sti

Innen backend-utvikling har det også skjedd store endringer de siste årene. PHP har lenge sluttet å være et monopol i backend-teknologimarkedet, selv om den nyeste versjonen, PHP 7, er mer enn verdig oppmerksomhet. Node.js, Ruby og Go har brast inn på arenaen. Moderne teknologier gjør det mulig å utvikle kompleks forretningslogikk og oppnå høy ytelse.

Devops-måten

Arbeidet til devops er svært krevende. En moderne nettapplikasjon er en enorm og kompleks organisme, og oppgaven til devops er å holde den fungerende korrekt. Overvåking av prosesser, arbeid i skyen, nettcontainere, kontinuerlig integrasjon - dette er bare en liten del av stabelen av nettteknologier som lar en nettapplikasjon eksistere som en helhet og utføre funksjonene sine.

En god nettsideeier jobber hele tiden med å forbedre den. I dette arbeidet må han stole ikke bare på publikumsanalysen, nettanalysedata og kundeanmeldelser, men også på bransjetrender. For det er mange nyttige ting i trender som kan forbedre interaksjonen til kundene med nettstedet. Men trender må brukes forsiktig og klokt. Velg bare de som er egnet for å løse gjeldende problemer på nettstedet og for forretningsutvikling.

Derfor har vi i denne artikkelen ikke bare gitt en liste over nettdesigntrender, men også gitt 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ølge de grunnleggende prinsippene for brukervennlighet hjelper nettsteder med å tiltrekke seg flere kunder og redusere antallet støtteanrop. Stadig flere bedrifter tilbyr stedsrevisjon, da det er etterspørsel etter å finne feil på siden. Vanen med å foreta kjøp, bestille tjenester via Internett øker etterspørselen etter praktiske nettsteder.

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

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

Derfor, når du planlegger å lage et nettsted eller forbedre en eksisterende, må du først og fremst se på grensesnittet gjennom klientens øyne, prøve å forutsi problemene brukeren kan ha.

2. Lange tekster forsvinner

La oss være ærlige med oss ​​selv: ingen leser lange tekster. Unntak er bøker og artikler. Når en klient ønsker å bestille en tjeneste eller et produkt, er han interessert i spesifikk informasjon: pris, hovedtrekk ved produktet / tjenesteinnholdet, leveringsbetingelser / frist. Konsis og strukturert informasjon sparer tid for klienten og disponerer bestillingen. 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. I følge resultatene av verdensstatistikken økte antallet mobilbrukere i oktober 2016 enn stasjonære brukere.

Se på publikum 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. Ikke glem denne målgruppen 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 når du legger til et element i handlekurven, endre fargen på knapper og lenker etter å ha klikket på det er de vanligste mikrointeraksjonene som vil definitivt hjelpe brukerne dine.

6. Bruk av kinobilder eller "live" bilder

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

Hvis du velger en slik gif for temaet til nettstedet, vil det se veldig kult ut. Du kan for eksempel ta et "live" bilde av hovedproduktet ditt og legge det ut på hjemmesiden eller på reklamebannere.

I Russland brukes kinobilder hovedsakelig i sosiale nettverk, så vi gir eksempler på utenlandske nettsteder - et nettsted for beskyttelse av vann 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 enheter først (Mobile First)

Essensen av denne tilnærmingen er at når du designer et nettsted, må du tenke på hvordan det vil bli vist på mobile enheter. Det er skrevet mange artikler og bøker om dette emnet, for eksempel anbefaler vi deg å lese Luc Wrobleskis Mobile First.

Som nevnt ovenfor (se punkt 2), vokser mobiltrafikken og det er til og med brukere som ikke har en desktop-opplevelse. Derfor anbefaler vi, for ikke å miste kunder, å optimalisere nettsteder for mobil.

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

Nyttårsaften er det noen som gjetter på kaffegruten og kaster tøfler over skuldrene. Og designere prøver å sondere fremtiden og fange trender som vil bli hovedtemaet i 2017. Vi vil prøve også. Vi vil stole ikke bare på smaken og det faktum at "art director sa det", men også på analysen.

1. Video er et funksjonelt element

Tekster er for vanskelige, du må konsentrere deg. Bildene er ikke informative. Og video er en type innhold som en moderne internettbruker er klar til å konsumere og smadre med. Og når du forteller brukeren en historie – for eksempel hvordan en kompleks nettsideutviklingsprosess er strukturert – bruk den. Film og vis hvordan en analytiker lager prototyper og en designer tegner mockups. Fordyp brukeren i historien og svar på spørsmålene de måtte ha.

Og slutt å skyve video der en kunde ber om noe fantastisk innenfor et budsjett. Video for skjønnhet er brukerens knuste håp. Han ser og håper at de vil vise ham noe nyttig, fortelle en historie. Men nei. Derfor, som et dekorativt element i webdesign som ikke utfører en nyttig funksjon, forblir video i 2016.

Ja: En video som svarer på brukernes spørsmål og løser oppgavene til siden.
Nei: Videoen er i bakgrunnen, fordi den er vakker og generelt gjør alle det.

2. Kino i stedet for video

Bruk kinogrammer. De er mer interessante enn statiske bilder, men de inspirerer ikke brukerne til falske forhåpninger, som videoer uten plot og formål.

Forsiktig! Kinogrammer er fryktelig klissete.

3. Fontgrafikk

Et annet alternativ til videoer og bilder er typegrafikk. Det dekorerer samtidig nettstedet og gjør det mer informativt. Hovedproblemet her er kvalitetsinnhold. Men det er en helt annen historie.

4. Ikoner er det viktigste dekorative elementet

Hvorfor trenger du bilder, videoer og fonter, hvis du kan legge til "wow" til ikonene som uansett vil være på siden? Seriøst, legg til litt egendefinert animasjon og avslutt der. Vær den mest trendy.

5. Sticky infografikk

Problemet med brukerne er at de blir mindre utholdende. Og glemsom, som gullfisk - gikk til stedet, så blinket telefonen (å, en falsk alarm - bare et glimt av solen), kom tilbake til skjermen og husker ikke hva de gjorde her. Og de drar.

Problemet blir verre for hvert år. Derfor er oppgaven til designeren å hekte brukeren og få ham til å samhandle med innholdet, selv om dette er kjedelig statistikk. Spesielt (!) hvis dette er kjedelig statistikk.

Animer den, mal den i lyse farger, få brukeren til å interagere med den – gjør alt for å stramme brukeren og ikke gi slipp før slutten av siden.

6. Kombinert navigasjon

Den stadig mer populære teknikken - kombinasjonen av horisontal og vertikal rulling - vil også fortynne den grå hverdagen til brukeren, interessen og få gjennomtenkt samhandling med nettstedet.

7. Avslag fra hamburgermenyen

I 99,9 % av webdesignprognosene for 2015 og 2016 lover forfatterne at designere helt sikkert vil gi opp hamburgermenyen i år. Rett i det hele tatt. Vel, la oss holde tradisjonen i hevd og også si: i 2017 vil ikke hamburgermenyen være i trenden, ikke gjør det, ugh!

Problemet med ikonet med tre linjer er at det ikke er intuitivt. Hun gjenkjennes av de revne rullene som allerede har samhandlet med henne og vet hva som skjuler seg bak symbolet. Men flere nykommere dukker opp på Internett: både svært små rumpetroll og folk av den eldre generasjonen. Og de kjenner eller forstår ikke hamburgermenyikonet. De kan bare finne ut hva hun skjuler og hvor i helvete menyen er etter en smertefull opplevelse.

La oss være realistiske: det er usannsynlig at du vil lykkes med å forlate hamburgermenyen fullstendig. Men før du setter det inn, se etter et mulig alternativ på hvert prosjekt.

studio-spoon.co.jp

8. Ramme rundt området

En populær løsning er ikke å strekke siden til fullskjerm, men å plassere den i en pen ramme. Fint og det er en ledig plass som kan skjerpes for navigering (hvorfor ikke, siden hamburgermenyen holder på å dø bort).

teletype.online

9. Mer emoji

Jo mindre innsats brukeren bruker på å reagere, jo mer villig vil han gjøre det. Og reaksjoner er lettere enn emojier. Mens du på nettsteder bare kan like innhold, er det maksimale å sette Emotion på Facebook. Men det er på tide å bytte til emoji, andre designere.

10. Materialdesign

Ja, han er fortsatt med oss.

11. Mer Mobil først

Antall brukere som surfer på nettsteder fra mobiltelefoner vokser - derfor blir Mobile First-tilnærmingen lettere oppfattet av kunder hvert år. Det regnes ikke lenger som et merkelig eksperiment, men som en selvrettferdiggjørende metode. Så gjør deg klar for et snøskred av nettsteder av samme type, men så praktisk på mobiltelefoner.

12. Flere mikrointeraksjoner

Nettsteder vil absorbere flere av funksjonene til mobilapplikasjoner. I 2017 vil det være elegante, skjelvende mikrointeraksjoner. Som et hjerte på Twitter - vel, et kunstverk zhezh! Jeg vil høste på ham for alltid. Dette vil øke i både Mobile First og klassiske prosjekter.

13. CTA er enda mer påtrengende

For skjønnhetens skyld gjør designeren skjønnhet bare på bordet og i Dribbble. I andre tilfeller (i de det betales penger for), puster markedsførere tungt i øret hans, som trenger noe lysere her og en større knapp der borte. Det ser ut til at det i 2016 var et vendepunkt og en nytenkning av disse kravene – forvent store, saftige, iøynefallende CTA-blokker i 2017. Den typen som markedsførere ikke har noe å legge til dem.

strv.com

14. Nostalgi for 80-tallet

På det raffinerte internett savner designere rørpiksler med fyrstikkhode, åtte-bits set-top-bokslyd og rør-TV-støy. Og vei opp for lengselen etter 80- og 90-tallet innen nettstedsdesign. Vær på trend – legg til sure farger, rot og feil i designene dine.

retrominder.tv

15. Ansvarsfraskrivelse for arkivbilder

Arkivbilder er allerede satt på spissen, seriøst. Verre hamburgermeny og lettere å erstatte. Så la oss skyte vår.

21. århundre i gården, kamon. Telefonene er nå slik at de tar bilder av høy kvalitet. Derfor er det ikke noe problem å filme ansatte eller arbeidsprosessen akkurat nå på telefonen. Det viktigste er tiden og lysten til å lage et godt prosjekt.

16. Grønne

Gutta i Pantone tror at fargen i 2017 er denne grønnaktige Greenery. La oss lytte og legge til listen vår.

17. En ny tilnærming til prototyping

Uansett hvor flott et design du tegner, er det viktigste å presentere det på en slik måte at kunden blir forelsket. Eller i det minste så jeg ham som du kan se.

En statisk layout kan knapt takle denne oppgaven, så i 2017 må du forbedre deg i presentasjonskunsten. Slik at kunden umiddelbart, før oppsettet, ser alle de oppfunne pew-pew, og ikke forestiller seg dem i tankene hans. Ellers planlegger han noe galt for seg selv, og skaper forventninger som utviklerne ikke kan forsvare.
Nå er ikke designeren comme il faut å bare tegne og vise et bilde. Du må kunne håndtere enten ett av prototypeverktøyene for å lage en interaktiv mal, eller pumpe over animasjonsdelen.
Her er arsenalet ditt for det kommende året, kolleger. Men ikke krangle med en kunde som vil ha en videotelefon. Ikke skyv pikselelementer og emoji der du trenger en ren, minimalistisk e-handelsbedrift. Og ikke bombarder motvillige Skype-klienter med lenker til denne artikkelen. Bruk trender med omhu – eller ikke bruk dem i det hele tatt. Uansett, om tre år vil de være fullstendig oppdatert 🙂

"John Moore Williams, leder for innholdsstrategi, Webflow.

Slutten av dette året er rett rundt hjørnet, og hver webdesigner stilte minst en gang et viktig spørsmål: hva vil bestemme webdesign i 2017? Jeg bestemte meg for å finne svaret på dette spørsmålet og spurte Webflow-designerne hvilke trender de trodde ville råde de neste 365 dagene. Jeg ga også mine egne kommentarer til deres tanker.

Først av alt, la oss få meningen til sjefdesigneren for Webflow, Sergie Magdalin (Sergie Magdalin).

1. Innholdsorientert design

"Arrangementet av designelementer innenfor en gitt struktur bør være slik at leseren lett kan forstå hovedideen uten å redusere sin vanlige lesehastighet" -Herman 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 stadiet i prosessen med å lage et objekt: designer-magikeren kommer i finalen og overøser produktet vårt med magisk støv for å gjøre det bedre enn konkurrentene.

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

Og det vakreste med disse metamorfosene var overgangen til modellen, når innholdet igjen står øverst på bordet. Designere over hele verden har innsett at brukere besøker nettsteder primært for innhold, enten det er korte tweets, omfangsrike spesialiserte artikler eller ferske internett-memes. Den ultimate rollen til design er å vise innhold på den mest attraktive, forståelige måten og få best mulig resultat fra det.

Dette er en av grunnene til overgangen fra "skeuomorphic" design (når elementer er avbildet så likt som mulig med sine kolleger i den virkelige verden) til flat, minimalistisk design. Av disse grunnene opprettet Google Material Design.

Selvfølgelig, som Newtons tredje lov sier, for hver handling er det en reaksjon av samme styrke. Mange designere tror at den flate designtrenden har drept selve designånden. Vi forventer at denne debatten vil fortsette inn i det kommende året, men fokuset vil fortsatt være på innhold – kjernen i ethvert designarbeid.

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

Betydningen av design for å forme en virksomhet vokser, så mer og mer oppmerksomhet rettes mot samarbeidet mellom designere og sine andre designere og sine medutviklere.

Denne bekymringen for å samhandle med designere stammer delvis fra massiviteten til mobil- og nettapplikasjonene som utvikles i dag. I tillegg til at slike gigantiske selskaper som Google, Facebook, Twitter og LinkedIn krever titanisk arbeid fra designteamet fra helt forskjellige sider, må designere alltid være på samme bølgelengde med hverandre. Det betyr at det krever tettere kommunikasjon om prosjektet og hvordan man samarbeider mest effektivt.

For å lette denne oppgaven er det laget mange verktøy, fra kollektive maler og tavler i Webflows Team til den grafiske grensesnitteditoren Figma, som viser endringer i sanntid. Jeg er sikker på at i 2017 vil disse plattformene bli forbedret og supplert.

Når det gjelder samspillet mellom designere og utviklere, er det mye oppmerksomhet til den ekstremt viktige prosessen med å overføre arbeid. For eksempel, i stedet for å sende tunge og voluminøse statiske bilder, kan designere nå dele live-renderte layouter takket være verktøy som InVision, Marvel, UXPin.

Carson Miller kommenterte dette i sin nylige TechCrunch-artikkel "The Future of Frontend Design":

"Før eller siden vil designverktøy og designmønstre fullstendig erstatte frontend-utvikling. Du kan enkelt lage et kvalitetsrammeverk 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 – fra animerte Keynote-filer til fullt funksjonelle nettsteder. Denne måten å dele arbeidsmateriell på forkorter responstiden i prosjektet, og forbedrer dermed kvaliteten på designet, øker hastigheten til utviklingsteamet og reduserer muligheten for frustrasjon over resultatet. Det forbedrer også kundeinteraksjoner. For mange Webflow-brukere har for eksempel kundemøter blitt til fullverdige workshops, 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, ser nettsteder i økende grad inspirerende overskrifter med matchende skrifttyper – like store og fete som innholdet.

#MadeInWebflow Heco-partnerne

Som du kan se i eksemplene, refererer "stor" og "fet" ikke bare til skriftbeskrivelser. Snarere handler det om å ha en betydelig del av startskjermen satt til side for en enkel, men sterk og selvstendig uttalelse om et produkt eller en tjeneste. En slik tittel bør inneholde selve essensen og være forståelig for enhver besøkende, og unngå overdreven bombast (ok, uttrykket "Design det umulige" kan høres for høyt ut).

I dag, når folk konstant er opptatt og informasjon overveldet, fungerer slike korte og kraftige uttalelser godt for alle merkevarer.

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 vende oss til historien om utviklingen av grafisk design.

De siste årene har nettsidelayout vært begrenset til CSS, men nye moduler som Flexbox og CSS Grid (kommer ut i mars 2017) vil gi mulighet for noen av de dristigste ideene innen nettmarkering.

Hovedutfordringen vår nå er å forstå hvordan de nye funksjonene til rutenettblokkering skal fungere i en responsiv design.

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

Jen Simmons Eksperimentell Layout Lab

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

Rutenett etter eksempel

Du kan se flere eksempler på siden.

6. Mer SVG

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

De viktigste fordelene med SVG er beskrevet i selve navnet på formatet - disse er skalerbarhet og vektor. I motsetning til raster- og pikselbaserte formater, er bilder i SVG sammensatt av vektorer - matematiske beskrivelser av formen til et objekt. 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 uskarpe bilder 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 faktisk 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 tenker på nettapplikasjoner og hvordan vi lager dem.

Men merkelig nok har ikke prinsippet for programmene for å lage design endret seg på noen måte. De fleste av disse verktøyene fungerer slik: du må lage en lignende side om og om igjen for forskjellige enheter og oppløsninger. I en bransje hvor rask idégenerering, rask utvikling og rask oppstart kreves, er en slik sløsing med tid rett og slett uakseptabelt.

En ny bølge av designverktøy (som Figma) forventes basert på "regler" som justerer måten nettsteder ser ut på forskjellige skjermer og enheter, og dermed redusere antallet gjentatte designerhandlinger. Slike verktøy er avhengige av de romlige relasjonene til elementene, og når vi endrer størrelsen på skjermen eller enheten, har de en tendens til å opprettholde disse relasjonene ved å endre størrelsen på elementene og avstanden 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ørrelse på elementene justeres til skjermstørrelsen. Alt som gjenstår er å gjøre noen få justeringer for å få nettsiden til å se ut slik du vil ha den på enheter. Brukeren trenger ikke å gjenopprette versjonen for mobile enheter, og dette sparer ham betydelig tid.

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

8. Mer levende farger

Da epoken med minimalisme og brutalisme begynte i webdesign i 2016, prøvde designere å bringe mer personlighet til arbeidet sitt, uten å gå utover motestilene. 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 dristig fargefyll:

Det nye Instagram-appikonet vakte mye kritikk, men denne redesignen har utvilsomt frisket opp merkevaren:

Alt Stripe gjør krever ikke en separat presentasjon:

Som du kan se, er dette ikke bare lyse og dristige farger. Gradienter er også tilbake på moten, og blander og uskarp farger i nyanser som minner om en middagshimmel eller en brennende solnedgang. Det er en slags gjenoppblomstring av naturalisme med levende farger og dristige gradienter, og jeg personlig ser frem til å se flere slike verk i 2017.

Selv om du kanskje fortsatt bør redusere lysstyrken litt? Vi ser på deg, Asana.

9. Mer fokus på animasjon

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

Dette emnet er spesielt viktig ettersom det blir lettere å lage animasjoner hver dag. På design- og innholdskonferansen i 2016 understreket animasjonsguruen Val Head at når designere designer animerte elementer, må designere ha merkevaremål og -behov i tankene for å oppnå effekten som innholdsskapere forventer å se. Hvis dette rådet blir fulgt, vil animasjonen utføre oppgaver som er meningsfulle for merkevaren, og ikke bare forårsake migrene hos brukeren.

10. Uvanlig markering

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

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

Den "ødelagte" markeringsmetoden involverer elementer som går utover et omhyggelig justert rutenett. Slike teknikker kan noen ganger virke til og med ubehagelige for øyet. For eksempel:

Overlappende tekster og bilder:

Tekster og bilder spredt (tilsynelatende) tilfeldig over siden:

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