20 Rising Web Design Trends at se i 2017

Et andet år er gået, og designere ser fremad mod fremtiden. Mange lovende designtendenser er bundet til at bryde ud i 2017. Sidste år dækkede jeg de øverste 2016 designtendenser, og vi har set en masse ændringer siden da.

Så for dette indlæg har jeg valgt top 20 tendenser som jeg har bemærket vinde trækkraft i 2017. Disse designtendenser kan gælde for enhver hjemmeside, så hold øje med disse teknikker, da vi bevæger os gennem 2017 og derover.

1. “Udvalgt i” badges

Startups, blogs, SaaS projekter og endda små virksomheder bruger nu “som indgår i” badges på deres hjemmesider. Disse badges ofte Link til artikler om almindelige blogs såsom HuffPo, Forbes, CNN, Fox og andre nyheder.

Målet er at validere et websted og opbygge tillid med nye besøgende. Det er nemmere for nogen at stole på et websted, når de kan se, at det har været nævnt i autoritative publikationer.

Faktisk mange top blogs sætte pris på eksponeringen, så det hjælper virkelig alle involverede. Disse store steder ofte frigive deres logoer online men du kan også finde gennemsigtige PNG'er eller SVG'er bare ved at gå rundt.

Det anbefales også at du Link tilbage til den oprindelige artikel omtale dit websted. Dette beviser det du blev virkelig nævnt på stedet, og du laver ikke bare krav.

2. Fede all-caps nav links

Jeg har set snesevis af slanke navigation menuer alle stoler på det samme design. Disse nav links varierer i skrifttype og størrelse men de plejer har lignende funktioner, såsom:

• Alle caps
• fed skrift
• Jævnt fordelt
• Alignned til højre hjørne

Hjemmesiden til Zazzle er et godt eksempel. Men du kan finde dette på mange start hjemmesider fordi det er a ren måde at dele links der er nemme at læse og let at gennemse.

Jeg for det meste forbinder denne tendens med virksomheder og tech startups men det kan også forekomme på blogs.

Vær opmærksom på næste gang du ser denne tendens, fordi den er overalt. Og jeg forventer, at den fortsætter med at vokse godt ind i 2017.

3. Magazine-stil blogs

Blogging var sådan et niche-koncept tilbage i begyndelsen af ​​2000'erne. Hvis du løb en blog i 2003, blev det betragtet som en sød lille hobby. På lidt over et årti har denne tendens ændret sig radikalt. Nu kan blogs give en fuldtidsindkomst, og de begynder at ser meget mere ud som digitale magasiner.

Se tilbage til det oprindelige design af TechCrunch, da det blev lanceret i 2006. Ligner en generisk WordPress blog til højre?

Se nu på Techcrunchs nuværende hjemmeside i 2017:

Det ikke kun ligner et magasin, det også fungerer som en. TechCrunch udgiver dusinvis (hvis ikke hundreder) nye indlæg hver eneste dag. De er nummer 1 til kilden til opstartsnyheder.

Designtendenserne i magasin stil gør en stor forskel. Hjemmesiden anvender en stor featured historie sektion, hvert indlæg har sin egen miniature, og artikelsiderne center omkring overskriften.

Når du tænker på det, har TechCrunch ikke ændret sig meget. Det er stadig “bare en blog”. Men Det er designet og styret som et magasin, og det gør hele forskellen.

4. Video baggrunde

Autoplaying lyd er måske den mest irriterende tendens på nettet. Men overraskende, autoplaying video (uden lyd) er en hastigt voksende trend. Du kan få vist dette på snesevis af forretningssider, hvor en video baggrund overtager hele skærmen.

Jeg kan virkelig godt lide denne teknik, når den anvendes korrekt. Så længe som video relaterer til webstedet og hindrer ikke indhold, Jeg synes, det er en cool effekt at bruge i dit overskrift.

5. Ghost-knapper

Som minimalisme føder videre i webdesign, er der mange nye trends der opstår. En sådan tendens er stigning af spøgelsesknapper som ikke har en indre fyld, men har en ydre grænse.

De fleste af disse knapper Kontrast med andre at henlede opmærksomheden Du kan se dette på Instantmojos hjemmeside med den grønne tilmeldingsknap placeret lige ved siden af Spøgelsesknappen linker til en live demo.

Andre steder har vedtaget en spøgelsesdesign stil til deres knapper over hele verden. Et godt eksempel her er det nye Bootstrap layout.

Jeg tror, ​​at spøgelsesknapper arbejder på websteder, som læne mod minimalisme. De kan ikke være en god form for hver hjemmeside, men jeg ser deres brug stigende med hvert afgangsår.

6. Modal vindue opt-ins

Modale vinduer er super irriterende, og jeg kan ikke forestille mig nogen bruger vil gerne have dem. Imidlertid de har vist sig at øge registreringer, og marketingfolk kan ikke ignorere teknikker, der virker.

Derfor tror jeg modal opt-in windows vil Fortsæt med at klatre i 2017.

De er ikke min favorit ting, og jeg føjer dem aldrig til mine hjemmesider. Men hvis målet er at øge tilmeldinger, så er modale vinduer en surefire måde at få ting til at rulle.

Nye plugins kan endda mål exit intention hvilken udløser en modal når brugeren forsøger at forlade webstedet. Andre modaler vises efter x sekunder eller er indstillet til at åbne, når brugeren ruller ned tilstrækkeligt langt.

Uanset hvordan modaler udløses, hvordan de er designet, eller hvordan du føler om dem, tror jeg, at de vil være rundt i det lange træk.

7. Illustration og vektor kunst

Med nye vektor design programmer som Sketch og Affinity Designer, er der en ny bølge af illustratorer bryde på nettet. Grafisk design og interface design samler konstant sammen med flere tværfaglige designere nu end nogensinde før.

Det betyder, at vi vil se mange mere brugerdefinerede ikoner og fuld-side illustrationer i den nærmeste fremtid.

Mange illustratorer praktiseres kunstnere, så jeg tror vi vil se flere fulde side baggrunde lavet med digital maleri software, gengivet i detaljer som koncept kunst.

8. Fast scrolling sidebjælker

Den første bølge af fast design fokuseret på navigationstænger. Disse er alt for almindelige, især i lydhøre design, hvor den faste navbar replikerer følelsen af ​​en indbygget mobil applikation.

Men i 2017 forventer jeg at se endnu et klæbrigt element-den klæbende sidebjælke.

Næsten hver store blog bruger denne slags klæbrig sidebar. Det holder indhold til syne til enhver tid og øger sandsynligheden for, at brugerne vil interagere med sidebar indhold.

Plus med snesevis af gratis jQuery-plugins, der kan replik den klæbende sidebar effekt. Det er nemmere end nogensinde at sætte det op på enhver hjemmeside.

9. Indholdsfortegnelse på side

En nylig casestudie fandt det Langformet indhold overgår shortform i både rangeringer og kvalitet af brugerretention. Tildelt dette er ikke altid sandt, fordi nogle forespørgsler kan besvares hurtigt.

Men med langt mere longform indhold på nettet, er det naturligt at se flere indholdsfortegnelser tilføjet til artikler. Du kan se dette på lange oversigtswebsteder eller i artikler, der bryder ned i listede genstande.

Tilføjelse af indholdsfortegnelse kan forbedre brugeroplevelsen og hjælpe med bryde op læsningen i mindre klumper. Indholdsfortegnelse kan også Hjælp dit websted bedre! Hvis Google finder din side værdifuld, kan du måske få spring links i søgeresultaterne.

Det kan være rigtigt, at ToCs er ret knappe lige nu. Men jeg forventer, at denne tendens blæser op i 2017 og mange år efter.

10. Bright farverige designs

Jeg er ikke sikker på, om denne tendens opstod ud af minimalisme eller som en reaktion på Googles materiale design. Men jeg har snuble på snesevis af hjemmesider, der bruger lyse pastelfarver blandet med andre levende farver at skabe et meget fantasifulde udseende.

The Rentberry hjemmeside er et godt eksempel, som også bruger tons af gradienter. Og det har endda det førnævnte “Udvalgt i” mærker placeret nedenunder! To trends på et websted.

Du vil bemærke, at farverne gennemsyr ikke hele siden, og de er dæmpet med andre nuancer af hvid og grå.

Jeg har set nok af disse levende farver at tro på, at de er på vej.

11. Rul animationer

Webdesignere ved om scroll-jacking og hvor forfærdeligt det er. Men det er ikke det, jeg mente med titlen “rulle animationer”. Jeg har set mange steder nu animere indhold i betragtning når du ruller forbi et bestemt afsnit på siden.

Denne tendens er for det meste begrænset til at starte hjemmesider og SaaS virksomheder der ønsker noget pizzazz i deres design.

Jeg kan ikke sige, om det er en særlig nyttig trend. Det helt sikkert tager fat i øjet men jeg tror ikke det giver meget ud over æstetik. Alligevel er det en tendens, der synes at sprede sig hurtigt, og hvornår bruges sparsomt det kan være rigtig pænt.

12. Enkeltstående apps (SPA'er)

Enkeltidsapplikationer er websteder bygget udelukkende med Ajax opkald. JavaScript trækker indhold fra en server og læser det dynamisk, så siden opdateres aldrig.

Fælles eksempler er websteder som Gmail og Facebook. Men med mere JS teknologi, Jeg laver mere og flere SBO'er udviklet hele tiden. Heck, selv CodePen kunne betragtes som et SPA.

Med kraftige frontend-biblioteker som React & Aurelia bliver det endnu nemmere at oprette et SPA fra bunden i 2017.

13. Skiftbare søgefelter

Det plejede at være disse søgefelter var altid til syne et sted på en webside, enten i sidepanelet eller navigationen. Men i det sidste har jeg bemærket en masse flere søgefelter, der får skjult som standard, og skal være skiftet til visning.

Bestemt en praktisk tendens til spare plads på siden mens det stadig er holde søgefunktionen tilgængelig. Hvis du er usikker på, hvor du skal placere et søgeformular i et nyt design, kan du overveje at bruge et skiftefelt, der er knyttet til et forstørrelsesglasikon i navigationen.

14. Adblock meddelelser

Der kan ikke benægtes, at Annonceblokeringen er stigende. Det eneste spørgsmål er, hvordan udgivere vil håndtere denne tendens. Nogle steder høfligt Tilføj meddelelser i annoncerummet som Time.com. På Hongkiat vil du bemærke interne annoncer for at udfylde tomrummet der linker videre til webstedet.

En seriøs tendens, som jeg ser stigende er adblock indhold blokke. Dette er en teknik til “bloker annonceblokkerne”. Denne funktion er allerede på plads på mange store websteder som Business Insider og Forbes. Det beklager desværre både brugeren og udgiveren, og det hele skyldes dårlig reklame teknikker.

I sidste ende betyder det ikke noget, hvem du bebrejder eller hvor du står i den annonceblokerende debat. Flere mennesker installerer adblock plugins, og jeg forventer flere udgivere til at skubbe tilbage.

15. Pure SVG ikoner

SVG grafik har allerede seeped på nettet, men de vokser større om dagen. Og jeg har en fornemmelse af, at 2017 vil være et stort år for SVGs på nettet.

Du kan finde tusindvis af gratis SVG ikon sæt på websteder som Flaticon, hvis du ved, hvordan man søger. Men det kan du også kode SVG'er i HTML, for eksempel ved at benytte dette eksempel på CodePen.

Så designere har en måde at bruge SVG'er på, og udviklere har også mulighed for at bruge SVG'er. Moderne browser support ser godt ud på tværs af bordet, så der er ikke noget problem med kompatibilitet. Alt, hvad der er brug for, er nok designere til genkende SVGs magt og begynd at bruge dem!

16. Adobe XD

Adobe satte ud en fuld beta af Adobe XD i 2016, og det er siden vokset hurtigt. Det i øjeblikket understøtter både Mac og Windows, ogdet er i testfasen før de bliver fuldt udbygget.

Du kan scoff ved ideen om ethvert program, der overvinder Sketch, men Adobe er det vigtigste softwarefirma for kreativt arbejde af en grund. Plus Sketch er stadig Mac-only, mens Adobe er søger at støtte alle.

Jeg tror fuldt ud, at vi læser meget mere om Adobe XD i det kommende år. Det kan blive go-to software til designe UI mockups-så vi kan endelig bruge Photoshop som et foto manipulationsværktøj (som beregnet).

Med fremkomsten af ​​ny software kommer der snesevis af tutorials og freebie GUI kits såvel. Du kan finde masser af Adobe XD freebies i Dribbble sammen med to nye XD-fokuserede freebiesites Designmine og XD Guru.

17. Flere hamburger menuer

Elsker det eller hader det, den hamburger er her for at blive. Der er mange brugbarhedsstudier der argumentere mod menuer skjult fra visning. Men med en lille skærm og kun så mange alternativer er der ikke noget bedre alternativ til nu.

Hamburger ikoner er langsomt bliver genkendelige symboler til nav menuer. Ligesom et forstørrelsesglasikon indebærer “Søg”, ikonet med tre bar hamburger vil snart være synonymt med “menu”.

Dette gælder allerede for de fleste tech-savvy individer. Men med hvert år, flere mennesker får smartphones og begynder at surfe på mobilwebben. Og de lærer at associere den hamburger med en nav menu uden ende i syne.

18. Produktfunktionsikoner

Jeg skrev om denne trend på Treehouse, men har ikke nævnt det for nylig. Og i 2017 er denne tendens bliver enorm. Det er nok den mest almindelige måde at del produktfunktioner på en hjemmeside.

Du starter med lave en liste over funktioner til dit produkt. Produktet kan være alt fra et SaaS-program til et WordPress-tema eller endda en fysisk genstand.

Så kan du enten design brugerdefinerede ikoner eller find et ikon sæt at repræsentere disse funktioner. Det er bedst at undgå generiske funktioner såsom “pålidelig” eller “hurtig” fordi de fleste mennesker forventer disse ting.

I stedet lister listen funktioner det betyder faktisk noget. Hvis det er et premium WP-tema, kan du måske oplyse, at det er lydhurt, hvor mange widgets det kommer med, eller hvordan menuen fungerer.

Disse feature ikoner arbejde som visuelle at hjælpe sælge hver funktion. Tekst alene er svært at forbruge men visuelle er meget lettere at forstå et øjeblik.

19. Ovenstående CTA'er

Opfordring til handlinger er traditionelt blevet placeret over et websted. Men med besøgende bruger mindre tid på hjemmesider, Det er afgørende at have en stærk CTA lige over folden.

Disse opfordringer til handling kan være knapper, opt-in-formularer eller andre input til køre folk til at tage noget som f.eks. tilmelding eller læsning af et blogindlæg.

Jeg kan ikke fortælle dig, hvordan du designer en CTA eller hvordan du optimerer den til konverteringer. Men jeg kan sige, at tendensen synes at være at placere disse CTA'er over folden og i klar visning for alle besøgende at se.

20. Mindre indholdsområder

Skærme er vokset så stort, at de fleste hjemmesider skal Indstil en maksimal bredde. Det er meget sværere at læse sætninger, når de er 2000px brede sammenlignet med kun 700px brede.

Mindre indhold er lettere at forbruge, og i sidste ende skaber en bedre oplevelse på indholdstunge websteder.

Jeg tror flere designere realiserer dette, og vil langsomt reducere størrelsen på deres indholdsområder. Jeg foretrækker en maksimal bredde på 750px, men du kan gå så lille som 600px eller mindre.

Kortere afsnit med færre sætninger og mindre indholdsområder vil altid øge læsbarheden. Store publikationer som NY Times kan afvige med deres egne strukturelle retningslinjer. Men for en simpel blog eller forretningsside er tendensen i retning mod længerevarende indhold med mindre afsnit og indholdsområder.

Afslutter

Der er mange andre tendenser, jeg ikke kunne dække i dette indlæg, men jeg tror, ​​at disse 20 er de mest interessante. Da vi bevæger os frem til 2017, skal det være tydeligt, hvilke tendenser der eksploderer, og hvilke der ikke er.

Og hvis du har andre ideer eller forslag til kommende designtendenser, er du velkommen til at droppe en kommentar nedenfor.