20 Rising Web Design Trends To Watch I 2017
Et annet år har gått og designere ser fremover mot fremtiden. Mange lovende designtrender er bundet til å bryte ut i 2017. I fjor dekket jeg de øverste 2016 designtrender, og vi har sett mange endringer siden da.
Så, for dette innlegget har jeg plukket topp 20 trender som jeg har lagt merke til får trekkraft i 2017. Disse designtrender kan gjelde for ethvert nettsted, så hold øynene dine ut for disse teknikkene når vi beveger oss gjennom 2017 og utover.
1. “Utvalgt i” merker
Startups, blogger, SaaS-prosjekter og til og med små bedrifter bruker nå “som omtalt i” merker på deres nettsider. Disse merkene ofte lenke til artikler om vanlige blogger for eksempel HuffPo, Forbes, CNN, Fox og andre nyheter.
Målet er å validere et nettsted og bygge tillit med nye besøkende. Det er lettere for noen å stole på et nettsted når de kan se at det har vært nevnt i autoritative publikasjoner.
Faktisk mange toppblogger setter pris på eksponeringen, så det hjelper virkelig alle involverte. Disse store nettstedene ofte slipp ut logoer på nettet men du kan også finne gjennomsiktige PNGs eller SVGs bare ved å gå rundt.
Det anbefales også at du lenke tilbake til den opprinnelige artikkelen å nevne nettstedet ditt. Dette viser det du ble virkelig nevnt på nettstedet, og du er ikke bare å gjøre opp krav.
2. Fet all-caps nav linker
Jeg har sett dusinvis av elegante navigasjonsmenyer alle stoler på samme design. Disse nav linkene variere i skrift og størrelse men de vanligvis har lignende funksjoner, som for eksempel:
- Alle caps
- uthevet
- Jevnt fordelt
- Aligned til høyre hjørne
Hjemmesiden til Zazzle er et godt eksempel. Men du kan finne dette på mange oppstart nettsteder fordi det er en ren måte å dele lenker det er lett å lese og enkelt å bla gjennom.
Jeg for det meste forbinder denne trenden med bedrifter og teknologiske oppstart men det kan også være utbredt på blogger.
Legg merke til neste gang du ser denne trenden fordi den er overalt. Og jeg forventer at den skal vokse godt inn i 2017.
3. Magazine-stil blogger
Blogging var et slikt nisje-konsept tilbake tidlig på 2000-tallet. Hvis du kjørte en blogg i 2003, ble det regnet som en søt liten hobby. På litt over et tiår har denne trenden endret seg radikalt. Nå kan blogger gi en heltidsinntekt, og de begynner å se mye mer som digitale magasiner.
Se tilbake på den opprinnelige utformingen av TechCrunch da den ble lansert første gang i 2006. Ser ut som en generell WordPress-blogg til høyre?
Se nå på Techcrunchs nåværende hjemmeside i 2017:
Det er ikke bare ser ut som et magasin, det også Fungerer som en. TechCrunch publiserer dusinvis (om ikke hundrevis) nye innlegg hver eneste dag. De er nummer 1 til kilde for oppstartsnyheter.
Designtendensene i magasinet stil gjør en stor forskjell. Hjemmesiden bruker en stor kjennetegnet historie avsnitt, hvert innlegg har sin egen miniatyrbilde, og artikkelsidene senter rundt overskriften.
Når du tenker på det, har TechCrunch ikke forandret seg mye. Det er fortsatt “bare en blogg”. Men Den er designet og forvaltet som et magasin, og dette gjør hele forskjellen.
4. Video bakgrunner
Autoplaying lyd er kanskje den mest irriterende trenden på nettet. Men overraskende, autoplaying video (uten lyd) er en raskt voksende trend. Du kan få øye på dette på dusinvis av forretningssider hvor en videobakgrunn tar over hele skjermen.
Jeg liker virkelig denne teknikken når den brukes riktig. Så lenge som video relaterer til nettstedet og hindrer ikke innhold, Jeg synes det er en kul effekt å bruke i overskriften.
5. Ghost-knapper
Som minimalisme strømmer videre inn i webdesign, kommer mange nye trender fram. En slik trend er oppstart av spøkelsesknapper som ikke har en indre fylling, men har en ytre kant.
Mesteparten av tiden disse knappene Kontrast med andre å trekke oppmerksomhet. Du kan se dette på hjemmesiden til Instantmojo med den grønne registrerings-knappen ligger rett ved siden av Spøkelsesknappen kobler til en live demo.
Andre nettsteder har vedtatt en spøkelsesdesign stil til knappene deres over hele verden. Et godt eksempel her er det nye Bootstrap-oppsettet.
Jeg tror at spøkelsesknapper jobber på nettsteder som lene seg mot minimalisme. De kan ikke være perfekt for hver nettside, men jeg ser at deres bruk øker med hvert år som går.
6. Modal vindu opt-ins
Modale vinduer er super irriterende, og jeg kan ikke forestille meg at noen bruker vil like dem. derimot de er bevist å øke registreringer, og markedsførere kan ikke ignorere teknikker som fungerer.
Det er derfor jeg tror at modal opt-in windows vil Fortsett å klatre i 2017.
De er ikke min favoritt ting, og jeg legger dem aldri til mine nettsteder. Men hvis målet er å øke registreringene, er modale vinduer en sikker måte å få ting på å rulle.
Nye plugins kan til og med målflyktsintensjon hvilken utløser en modal når brukeren forsøker å forlate nettstedet. Andre modeller vises etter x sekunder eller er satt til å åpne når brukeren ruller ned langt nok.
Uansett hvordan modalene utløses, hvordan de er utformet, eller hvordan du føler om dem, tror jeg at de vil være rundt for lang tid.
7. Illustrasjon og vektorkunst
Med nye vektordesignprogrammer som Sketch and Affinity Designer, er det en ny bølge av illustratorer som bryter opp på nettet. Grafisk design og grensesnittsdesign samles kontinuerlig med flere tverrfaglige designere nå enn noensinne.
Dette betyr at vi skal se mange flere egendefinerte ikoner og fullsidebilleder i nær fremtid.
Mange illustratører er praktiserte kunstnere, så jeg tror vi skal se flere fulle sidebakgrunner laget med digital maleri programvare, gjengitt i detalj som konsept kunst.
8. Fast rulling sidebjelker
Den første bølgen av fast design fokusert på navigasjonsbjelker. Disse er altfor vanlige, spesielt i responsive design der den faste navbaren replikerer følelsen av en innfødt mobilapplikasjon.
Men i 2017 forventer jeg å se et mer klebrig element-den klissete sidebaren.
Nesten alle store blogger bruker denne typen klebrig sidebar. Den holder innholdet i sikte til enhver tid og øker sannsynligheten for at brukerne vil samhandle med sidebar innhold.
Pluss med dusinvis av gratis jQuery-plugins som kan gjenta den klissete sidebar-effekten. Det er enklere enn noensinne å sette opp dette på noen nettside.
9. Innholdsfortegnelse
En fersk case studie fant det longform innhold overgår shortform i både rangeringer og kvalitet av brukerens oppbevaring. Gitt dette er ikke alltid sant fordi noen spørsmål kan besvares raskt.
Men med langt mer longform innhold på nettet, er det naturlig å se flere innholdsfortegnelser lagt til i artikler. Du ser dette på lange gjennomgangssider eller i artikler som bryter ned i listede elementer.
Legge til innholdsfortegnelse kan forbedre brukeropplevelsen og hjelp til bryte opp lesingen inn i mindre biter. Innholdsfortegnelse kan også Hjelpe din rangering bedre! Hvis Google finner din side verdifull du kanskje få hoppe lenker i søkeresultatene.
Det kan være sant at ToCs er ganske knappe akkurat nå. Men jeg regner med at denne trenden blåser opp over 2017 og mange år etter.
10. Lyse fargerike design
Jeg er ikke sikker på om denne trenden kom ut av minimalisme eller som en reaksjon på Googles materialdesign. Men jeg har snublet på dusinvis av nettsteder som bruker lyse pastellfarger blandet med andre levende fargetoner å skape et veldig fantasifullt utseende.
The Rentberry hjemmeside er et godt eksempel som også bruker tonnevis av gradienter. Og det har til og med den nevnte “Utvalgt i” merker plassert under! To trender på ett nettsted.
Du vil legge merke til at fargene ikke gjennomsyr hele siden, og de er dempet med andre nyanser av hvitt og grått.
Jeg har sett nok av disse levende farger å tro at de er på vei oppover.
11. Rull animasjoner
Webdesignere vet om scroll-jacking og hvor forferdelig det er. Men det er ikke det jeg mente med tittelen “bla animasjoner”. Jeg har sett mange nettsteder som nå animere innhold i visning når du ruller forbi en bestemt del av siden.
Denne trenden er for det meste begrenset til oppstart av hjemmesider og SaaS-selskaper som ønsker litt pizzazz i deres design.
Jeg kan ikke si om det er en spesielt nyttig trend. Det sikkert tar tak i øyet men jeg tror ikke det gir mye utover estetikk. Likevel er det en trend som ser ut til å spre seg fort, og når brukt sparsomt det kan være veldig pent.
12. Enkeltversjonsprogrammer (SPA)
Enkeltprogrammer er nettsteder bygget rent med Ajax-samtaler. Javascript trekker innhold fra en server og laster det dynamisk, så siden oppdateres aldri.
Vanlige eksempler er nettsteder som Gmail og Facebook. Men med mer JS-teknologi, Jeg merker mer og flere SBOer utviklet hele tiden. Heck, selv CodePen kan betraktes som et SPA.
Med kraftige frontendbiblioteker som React & Aurelia, blir det enda enklere å lage et SPA fra begynnelsen i 2017.
13. Toggleable søkestenger
Det pleide å være disse søkefeltene var alltid i sikte et sted på en nettside, enten i sidefeltet eller navigasjonen. Men i det siste har jeg lagt merke til mange flere søkefelt som får gjemt som standard, og må være skiftet til visning.
Absolutt en praktisk trend til Spar plass på siden mens det fortsatt er holder søkefunksjonen tilgjengelig. Hvis du er usikker på hvor du skal legge inn et søkeskjema i et nytt design, kan du vurdere å bruke et vekselfelt knyttet til et forstørrelsesglassikon i navigasjonen.
14. Adblock meldinger
Det er ikke nektet at Ad blokkering er økende. Det eneste spørsmålet er hvordan utgivere skal håndtere denne trenden. Noen steder høflig Legg til meldinger i annonsene mellomrom som Time.com. På Hongkiat vil du legge merke til interne annonser for å fylle tomrummet som lenker videre til nettstedet.
En seriøs trend som jeg ser økende er blokkeringer for blokkering av adblock. Dette er en teknikk til “blokkere annonseblokkene”. Denne funksjonen er allerede på plass på mange store nettsteder som Business Insider og Forbes. Dessverre er det vondt både brukeren og utgiveren, og alt kommer fra dårlig reklameteknikk.
I siste omgang spiller det ingen rolle hvem du skylder eller hvor du står i reklameblokkeringen. Flere mennesker installerer adblock plugins, og jeg forventer flere utgivere å presse tilbake.
15. Rene SVG ikoner
SVG-grafikk har allerede seeped på nettet, men de vokser større om dagen. Og jeg har en følelse av at 2017 vil bli et stort år for SVGs på internett.
Du kan finne tusenvis av gratis SVG ikon sett på nettsteder som Flaticon hvis du vet hvordan du skal søke. Men du kan også kode SVGer i HTML, for eksempel ved å benytte dette eksempelet på CodePen.
Så designere har en måte å bruke SVGer på, og utviklere har også mulighet til å bruke SVGs. Moderne nettleserstøtte ser bra ut over bordet, så det er ikke noe problem med kompatibilitet. Alt som trengs er nok designere til gjenkjenne SVGs kraft og begynn å bruke dem!
16. Adobe XD
Adobe satte ut en full beta av Adobe XD i 2016, og det har siden vokst raskt. Det for øyeblikket støtter både Mac og Windows, og dets i testfasen før den blir fullt utrullet.
Du kan scoff på ideen om ethvert program som overtar Sketch, men Adobe er det viktigste programvarefirmaet for kreativt arbeid av en grunn. Plus Sketch er fortsatt Mac-only mens Adobe er ser for å støtte alle.
Jeg tror fast at vi skal lese mye mer om Adobe XD i det kommende året. Det kan bli en go-to-programvare for designe UI mockups-så vi kan endelig bruke Photoshop som et foto manipulasjonsverktøy (som ment).
Med fremveksten av ny programvare kommer det dusinvis av tutorials og freebie GUI kits også. Du kan finne mange Adobe XD-freebies i Dribbble sammen med to nye XD-fokuserte freebie-nettsteder Designmine og XD Guru.
17. Flere hamburger menyer
Elsker det eller hater det, Hamburger er her for å bli. Det er mange bruksstudier som krangle mot menyer skjult for visning. Men med en liten skjerm og bare så mange alternativer, er det ikke noe bedre alternativ for nå.
Hamburger-ikoner er sakte blir gjenkjennelige symboler for navmenyer. Akkurat som et forstørrelsesglassikon innebærer “Søke”, tre-bar hamburgerikonet vil snart være synonymt med “Meny”.
Dette gjelder allerede for de fleste teknikkfaglige personer. Men med hvert år som går, får flere mennesker smarttelefoner og begynner å surfe på mobilnett. Og de lærer å knytte den hamburgeren med en nav-meny uten ende i sikte.
18. Produktfunksjonsikoner
Jeg skrev om denne trenden på Treehouse, men har ikke nevnt det nylig. Og går inn i 2017 er denne trenden blir stor. Det er sannsynligvis den vanligste måten å dele produktfunksjoner på en hjemmeside.
Du starter med lage en liste over funksjoner for ditt produkt. Produktet kan være alt fra et SaaS-program til et WordPress-tema eller til og med en fysisk gjenstand.
Da kan du heller designe egendefinerte ikoner eller finn et ikonsett å representere disse funksjonene. Det er best å unngå generiske funksjoner som for eksempel “pålitelig” eller “rask” fordi de fleste forventer dette.
I stedet må du liste funksjonene som faktisk betyr noe. Hvis det er et premium WP-tema, kan det hende at det er responsivt, hvor mange widgets det kommer med, eller hvordan menyen fungerer.
Disse funksjonen ikoner jobbe som visuelle å hjelpe selg hver funksjon. Tekst alene er vanskelig å konsumere men visuals er mye lettere å forstå med et øyeblikk.
19. Over-the-fold CTAs
Call-to-handlinger har tradisjonelt blitt plassert over et nettsted. Men med besøkende bruker mindre tid på nettsteder, Det er viktig å ha en sterk CTA rett over brettet.
Disse anropene kan være knapper, opt-in skjemaer eller andre innganger til kjør folk til å ta noe tiltak for eksempel å registrere deg eller lese et blogginnlegg.
Jeg kan ikke fortelle deg hvordan du skal designe en CTA eller hvordan du optimaliserer den for konverteringer. Men jeg kan si at trenden ser ut til å plassere disse CTA over brettet og i klar visning for alle besøkende å se.
20. Mindre innholdsområder
Skjermer har blitt så store at de fleste nettsteder må sett en maksimal bredde. Det er mye vanskeligere å lese setninger når de er 2000px brede sammenlignet med bare 700px bred.
Mindre innhold er lettere å konsumere, og til slutt skaper en bedre opplevelse på innholdsrike nettsteder.
Jeg tror flere designere realiserer dette, og vil sakte redusere størrelsen på deres innholdsområder. Jeg foretrekker en maksimal bredde på 750px, men du kan gå så liten som 600px eller mindre.
Kortere avsnitt med færre setninger og mindre innholdsområder Vil alltid øke lesbarheten. Store publikasjoner som NY Times kan avvike med sine egne strukturelle retningslinjer. Men for en enkel blogg eller forretningsside, går trenden mot lengre innhold med mindre avsnitt og innholdsområder.
Innpakning
Det er mange andre trender jeg ikke kunne dekke i dette innlegget, men jeg tror disse 20 er mest interessante. Når vi går fram til 2017, bør det være tydelig hvilke trender som eksploderer og hvilke som ikke er.
Og hvis du har andre ideer eller forslag til kommende designtrender, vær så snill å slippe en kommentar nedenfor.
