20 Stigande webbdesignstendenser att titta på år 2017

Ett annat år har gått och designers ser fram emot framtiden. Många lovande designtrender kommer att bryta ut i 2017. Förra året täckte jag de översta 2016 designtrenderna och vi har sett många förändringar sedan dess.

Så för det här inlägget har jag valt topp 20 trender som jag har märkt få traktion 2017. Dessa designtrender kan gälla alla webbplatser, så håll ögonen öppna för dessa tekniker när vi flyttar genom 2017 och därefter.

1. “Med i” märken

Startups, bloggar, SaaS-projekt och till och med småföretag använder nu “som visas i” märken på deras webbplatser. Dessa märken ofta länka till artiklar på vanliga bloggar som HuffPo, Forbes, CNN, Fox och andra nyheter.

Målet är att validera en webbplats och bygga förtroende med nya besökare. Det är lättare för någon att lita på en webbplats när de kan se att det har varit nämns i auktoritativa publikationer.

Faktum är många toppbloggar uppskattar exponeringen, så det hjälper verkligen alla involverade. Dessa stora webbplatser ofta släppa sina logotyper online men du kan också hitta transparenta PNG eller SVGs bara genom att gå runt.

Det rekommenderas också att du länka tillbaka till den ursprungliga artikeln nämna din webbplats. Detta bevisar det du nämnde verkligen på platsen, och du gör inte bara upp fordringar.

2. Bolda all-caps nav länkar

Jag har sett dussintals snygga navigationsmenyer alla förlitar sig på samma design. Dessa nav länkar variera i teckensnitt och storlek men de brukar har liknande egenskaper, som:

• Alla kepsar
• fetstil
• Jämnt fördelad
• Aligned till höger hörn

Hjemmesiden till Zazzle är ett bra exempel. Men du kan hitta det här på många startwebbplatser för att det är a rent sätt att dela länkar som är lätta att läsa och lätt att bläddra i.

Jag associerar mestadels med denna trend med företag och tech startups men det kan också bli vanligt på bloggar också.

Notera nästa gång du ser den här trenden eftersom den är överallt. Och jag förväntar mig att den fortsätter att växa bra in i 2017.

3. Magazine-stil bloggar

Blogging var ett sådant nischbegrepp i början av 2000-talet. Om du körde en blogg 2003 betraktades det som en söt liten hobby. På drygt tio år har denna trend förändrats radikalt. Nu kan bloggar ge en heltidsinkomst, och de börjar ser mycket mer ut som digitala tidningar.

Titta tillbaka på den ursprungliga designen av TechCrunch när den lanserades första gången 2006. Ser ut som ett generellt WordPress-blogg rätt?

Kolla nu Techcrunchs nuvarande hemsida 2017:

Det inte bara ser ut som en tidning, det är också fungerar som en. TechCrunch publicerar dussintals (om inte hundratals) nya inlägg varje dag. De är # 1 startkälla för startnyheter.

Designtrenderna i tidskriftsstil gör stor skillnad. Hemsidan använder a stor featured historia avsnitt, varje inlägg har sin egen miniatyrbild, och artikelns sidor center runt rubriken.

När du tänker på det, har TechCrunch inte förändrats mycket. Det är fortfarande “bara en blogg”. Men Den är utformad och hanterad som en tidning, och det här gör hela skillnaden.

4. Videobakgrunder

Autoplaying ljud är kanske den mest irriterande trenden på webben. Men överraskande, autoplaying video (utan ljud) är en snabbt växande trend. Du kan upptäcka detta på dussintals affärsidor där en videobakgrund tar över hela skärmen.

Jag gillar verkligen den här tekniken när den appliceras ordentligt. Så länge som video relaterar till webbplatsen och hindrar inte innehållet, Jag tycker att det är en cool effekt att använda i din rubrik.

5. Ghost-knappar

Som minimalism matar vidare in i webbdesign, framträder många nya trender. En sådan trend är uppkomst av spökknappar som inte har en inre fyllning men har en yttre kant.

De flesta gånger dessa knappar kontrast med andra att dra till sig uppmärksamhet. Du kan se detta på Instantmojos hemsida med den gröna anmälningsknappen ligger precis bredvid Spökningsknappen kopplar till en levande demo.

Andra webbplatser har antagits en ren spökdesign stil till sina knappar över hela världen. Ett bra exempel här är den nya Bootstrap-layouten.

Jag tror att spökknappar fungerar på webbplatser som luta sig mot minimalism. De kanske inte passar bra för varje hemsida, men jag ser att deras användning ökar med varje passande år.

6. Modala fönsteroptioner

Modal windows är super irriterande, och jag kan inte föreställa mig att någon användare skulle vilja ha dem. dock De har visat sig öka registreringen, och marknadsförare kan inte ignorera tekniker som fungerar.

Det är därför jag tror att modal opt-in windows kommer att fortsätt att klättra år 2017.

De är inte min favorit sak, och jag lägger dem aldrig till på mina webbplatser. Men om målet är att öka registreringen är modala fönster ett säkert sätt att få saker att rulla.

Nya plugins kan även målavgångsintresse som utlöser en modal när användaren försöker lämna webbplatsen. Andra modaler visas efter x sekunder eller är inställda att öppna när användaren rullar ner tillräckligt långt.

Oavsett hur modals utlöses, hur de är utformade, eller hur du känner för dem, tror jag att de kommer att vara runt för lång tid.

7. Illustration & vektorkonst

Med nya vektordesignprogram som Sketch and Affinity Designer finns det en ny våg av illustratörer som bryter mot webben. Grafisk design och gränssnitt design sammanfaller ständigt med fler multidisciplinära designers nu än någonsin tidigare.

Det betyder att vi kommer att se många fler anpassade ikoner och fullständiga sidobilder Inom en snar framtid.

Många illustratörer utövas konstnärer så jag tror vi kommer att se mer fullständig sida bakgrunder gjord med digital målningsprogram, gjord i detalj som konceptkonst.

8. Fasta rullningspaneler

Den första vågen av fast design fokuserad på navigeringsfält. Dessa är alltför vanliga, särskilt i lyhörda mönster där den fasta navbaren replikerar känslan av en inbyggd mobilapplikation.

Men i 2017 förväntar jag mig att se ett annat klibbigt element-den klibbiga sidofältet.

Nästan alla stora bloggar använder den här typen av klibbig sidofält. Det håller innehållet i sikte hela tiden och ökar sannolikheten för att användarna kommer att interagera med sidfältet innehåll.

Plus med dussintals gratis jQuery-plugins som kan replikera den klibbiga sidebar effekten. Det är lättare än någonsin att ställa upp det på vilken webbplats som helst.

9. Innehållsförteckning

En ny fallstudie fann att Longform-innehållet överträffar kortformat i både rankningar och kvalitet av användarretentionen. Beviljas detta är inte alltid sant eftersom vissa frågor kan besvaras snabbt.

Men med långt mer långformat innehåll på webben är det naturligt att se fler innehållsförteckning i artiklar. Du får se detta på långa översiktswebbplatser eller i artiklar som bryter ner till listade objekt.

Lägga till en innehållsförteckning kan förbättra användarupplevelsen och hjälpa till bryta upp läsningen i mindre bitar. Innehållsförteckning kan också Hjälp din webbplatsrankning bättre! Om Google finner din sida värdefull kanske du hoppa länkar i sökresultaten.

Det kan vara sant att ToCs är ganska knappa just nu. Men jag förväntar mig att denna trend ska blåsa upp under 2017 och många år efter.

10. Ljusa färgstarka mönster

Jag är inte säker på om denna trend uppstod ur minimalism eller som en reaktion på Googles materialdesign. Men jag har snubblat på dussintals webbplatser som använder ljusa pastellfärger blandade med andra livfulla nyanser för att skapa ett mycket fantasifullt utseende.

Rentberry hemsida är ett bra exempel som också använder massor av gradienter. Och det har även den ovan nämnda “Med i” märken ligger nedanför! Två trender på en plats.

Du märker att färgerna genomträng inte hela sidan, och de är dämpade med andra nyanser av vit och grå.

Jag har sett tillräckligt med dessa livfulla färgscheman att tro att de är på väg.

11. Bläddra animeringar

Webbdesigners vet om scroll-jacking och hur hemskt det är. Men det är inte vad jag menade med titeln “bläddra animeringar”. Jag har sett många webbplatser som nu animera innehållet i sikte när du bläddrar förbi en viss del av sidan.

Denna trend är mestadels begränsad till startsidor och SaaS-företag som vill ha lite pizzazz i sin design.

Jag kan inte säga om det är en särskilt användbar trend. Det är verkligen tar tag i ögat men jag tror inte att det erbjuder mycket bortom estetik. Ändå är det en trend som verkar spridas fort, och när används sparsamt det kan vara riktigt snyggt.

12. Enkelsidiga appar (SPA)

Enkelsidiga applikationer är webbplatser byggt rent med Ajax samtal. JavaScript drar innehåll från en server och laddar den dynamiskt, så sidan uppdaterar aldrig.

Vanliga exempel är webbplatser som Gmail och Facebook. Men med mer JS-teknik, Jag märker mer och fler SPA utvecklade hela tiden. Heck, även CodePen kan betraktas som ett SPA.

Med kraftfulla frontendbibliotek som React & Aurelia blir det ännu enklare att skapa ett SPA från början i 2017.

13. Skiftbara sökfält

Det brukade vara sökfälten var alltid i sikte någonstans på en webbsida, antingen i sidofältet eller navigeringen. Men senast har jag märkt många fler sökfält som får dold som standard, och måste vara växlade till vyn.

Visst en praktisk trend att spara plats på sidan medan fortfarande hålla sökfunktionen tillgänglig. Om du är osäker på var du ska placera en sökformulär i en ny design kan du överväga att använda ett växlingsfält kopplat till en förstoringsglasikonen i navigeringen.

14. Adblock-meddelanden

Det förnekar inte att Annonsblockering ökar. Den enda frågan är hur utgivare kommer att hantera denna trend. Några platser artigt Lägg till meddelanden i annonsutrymmena som Time.com. På Hongkiat märker du interna annonser för att fylla tomrummet som länkar vidare till webbplatsen.

En seriös trend som jag ser att öka är blockeringsblock. Detta är en teknik till “blockera annonsblockeraren”. Den här funktionen finns redan på många stora webbplatser som Business Insider och Forbes. Tyvärr skadar detta både användaren och förlaget, och allt härrör från reklamtekniker av dålig kvalitet.

I slutändan spelar ingen roll vem du skylder eller var du står i annonsblåsningsdebatten. Fler personer installerar adblock plugins, och jag förväntar mig fler utgivare att trycka tillbaka.

15. Rena SVG-ikoner

SVG-grafik har redan siktat in på nätet men de växer större om dagen. Och jag har en känsla av att 2017 kommer att bli ett stort år för SVGs på webben.

Du kan hitta tusentals gratis SVG ikonuppsättningar på webbplatser som Flaticon om du vet hur man söker. Men du kan också kod SVG: er till HTML, till exempel genom att använda detta exempel på CodePen.

Så, designers har ett sätt att använda SVG, och utvecklare har också möjlighet att använda SVG. Modernt webbläsarstöd ser bra ut över hela linjen, så det finns inget problem med kompatibilitet. Allt som behövs är tillräckligt med designers till känna igen SVGs kraft och börja använda dem!

16. Adobe XD

Adobe slog ut en full beta av Adobe XD i 2016, och det har sedan dess vuxit snabbt. Det för tillfället stöder både Mac och Windows, och det är det i testfasen innan den rullas helt ut.

Du kan scoff vid idén om något program som tar över Sketch, men Adobe är det främsta mjukvaruföretaget av kreativt arbete av en anledning. Plus Sketch är fortfarande Mac-only medan Adobe är ser till att stödja alla.

Jag tror verkligen att vi kommer läsa mycket mer om Adobe XD under det kommande året. Det kan bli en go-to-programvara för designa UI mockups-så vi kan äntligen använda Photoshop som ett foto manipulationsverktyg (enligt plan).

Med uppkomsten av ny programvara kommer tiotals handledning och freebie GUI-kit också. Du kan hitta massor av Adobe XD-freebies i Dribbble tillsammans med två nya XD-fokuserade freebiesites Designmine och XD Guru.

17. Fler hamburger menyer

Älska det eller hata det, hamburgare är här för att stanna. Det finns många användbarhetsstudier som argumentera mot menyer gömda från visning. Men med en liten skärm och bara så många alternativ finns det inget bättre alternativ för nu.

Hamburger ikoner är långsamt bli igenkännliga symboler för navmenyerna. Precis som en förstoringsglasymbol innebär att “Sök”, ikonen med tre bar hamburger kommer snart att vara synonymt med “meny”.

Detta gäller redan för de flesta tekniskt kunniga personer. Men med varje passande år får fler människor smartphones och börjar surfa på mobilbanan. Och de lär sig att associera den hamburgaren med en navmeny utan slut i sikte.

18. Produktfunktionsikoner

Jag skrev om denna trend på Treehouse men har inte nämnt det nyligen. Och går till 2017 är denna trend kommer bli enorm. Det är förmodligen det vanligaste sättet att dela produktfunktioner på en hemsida.

Du börjar med gör en lista över funktioner för din produkt. Produkten kan vara allt från ett SaaS-program till ett WordPress-tema eller till och med ett fysiskt objekt.

Då kan du heller utforma anpassade ikoner eller hitta en ikonuppsättning att representera dessa funktioner. Det är bäst att undvik generiska egenskaper som “pålitlig” eller “snabb” eftersom de flesta förväntar sig dessa saker.

I stället listar funktioner som faktiskt betyder något. Om det är ett premium WP-tema kanske det anges att det är lyhörd, hur många widgets det finns med, eller hur menyn fungerar.

Dessa funktionikoner jobba som visuella att hjälpa sälja varje funktion. Texten är ensam svårt att konsumera men visuella är mycket lättare att förstå en överblick.

19. Överträffade CTA: er

Call-to-åtgärder har traditionellt placerats över en webbplats. Men med besökare spenderar mindre tid på webbplatser, Det är viktigt att ha en stark CTA precis ovanför veckan.

Dessa uppmaningar kan vara knappar, inloggningsformulär eller andra inmatningar till kör folk att vidta några åtgärder till exempel att logga in eller läsa ett blogginlägg.

Jag kan inte berätta hur du utformar en CTA eller hur du optimerar den för konverteringar. Men jag kan säga att trenden tycks vara att placera dessa CTA ovanför vikten och i klar vy för alla besökare att se.

20. Mindre innehållsområden

Bildskärmar har blivit så stora att de flesta webbplatser måste Ange maximal bredd. Det är mycket svårare att läsa meningar när de är 2000px breda jämfört med endast 700px breda.

Mindre innehåll är lättare att konsumera, och skapar i slutändan en bättre erfarenhet på innehållsrika webbplatser.

Jag tror att fler designers realiserar detta, och kommer långsamt minska storleken på deras innehållsområden. Jag föredrar en maximal bredd på 750px men du kan gå så liten som 600px eller mindre.

Kortare stycken med färre meningar och mindre innehållsområden kommer alltid öka läsbarheten. Stora publikationer som NY Times kan avvika med sina egna strukturella riktlinjer. Men för en enkel blogg eller företagswebbplats går trenden mot längre innehåll med mindre avsnitt och innehållsområden.

Avslutar

Det finns många andra trender jag inte kunde täcka i det här inlägget, men jag tror att dessa 20 är mest intressanta. När vi går vidare till 2017, bör det vara uppenbart vilka trender som exploderar och vilka som inte är.

Och om du har andra idéer eller förslag till kommande designtrender kan du släppa en kommentar nedan.