20 Trendovi rasta web dizajna koje treba pratiti u 2017. godini
Prošla je još jedna godina i dizajneri gledaju u budućnost. Mnogi obećavajuće trendove u dizajnu Prošle godine sam pokrio vrhunske trendove u dizajnu za 2016. i vidjeli smo ih mnogo promjena od tad.
Dakle, za ovaj post sam izabrao 20 najboljih trendova što sam primijetio dobivanje vuče u 2017. Ovi trendovi u dizajnu može se primijeniti na bilo koju web lokaciju, zato držite oči na tim tehnikama dok se krećemo kroz 2017. godinu i dalje.
1. “Istaknuto u” značke
Startupi, blogovi, SaaS projekti, pa čak i male tvrtke sada koriste “kao što je prikazano u” značke na njihovim web stranicama. Ove značke često link na članke o mainstream blogovima kao što su HuffPo, Forbes, CNN, Fox i druge vijesti.
Cilj je da potvrdite web-lokaciju i izgraditi povjerenje s novim posjetiteljima. Nekome je lakše vjerovati web-lokaciji kada vide da je to bilo spomenuti u autoritativnim publikacijama.
U stvari mnogi top blogove cijeniti izlaganje, tako da stvarno pomaže svima koji su uključeni. Ove velike stranice često objavite svoje logotipe online ali također možete pronaći prozirne PNG-ove ili SVG-ove samo pomoću Googlea.
Također je preporučeno da i vi link natrag na izvorni članak spominjući vašu web-lokaciju. To dokazuje doista ste spomenuti na web-lokaciji, a ne samo da izmišljate zahtjeve.
2. Bold all-caps nav veze
Vidjela sam desetaka elegantnih navigacijskih izbornika svi se oslanjaju na isti dizajn. Ove nav veze razlikuju se prema fontu i veličini ali obično imaju slične značajke, kao što su:
- Sve velikim slovima
- podebljane
- Ravnomjerno raspoređeni
- Poravnato u desni kut
Početna stranica Zazzlea je sjajan primjer. Ali možete pronaći ovo na mnogim web-lokacijama za pokretanje jer je to čist način dijeljenja veza koje se lako čitaju i lako se pregledavaju.
Taj trend uglavnom povezujem s tvrtkama i tehnološkim startupima ali može se pojaviti i na blogovima.
Zabilježite sljedeći put kada vidite taj trend jer je posvuda. I očekujem da će nastaviti rasti iu 2017. godini.
3. Blogovi u stilu časopisa
Blogging je bio takav koncept niša još u ranim 2000-im. Ako ste pokrenuli blog 2003. godine, smatrali smo ga slatkim malim hobijem. U nešto više od desetljeća taj se trend radikalno promijenio. Sada blogovi mogu pružaju stalni prihod, i počinju izgledaju više kao digitalni časopisi.
Osvrnite se na originalni dizajn TechCruncha kada je prvi put pokrenut 2006. Izgleda kao generički WordPress blog?
Sada pogledajte trenutnu početnu stranicu Techcrunch u 2017. godini:
Ne samo to izgleda kao časopis, također funkcionira kao jedan. TechCrunch objavljuje desetke (ako ne i stotine) novih postova svaki dan. Oni su izvorni izvor za početne vijesti.
Trend dizajna u stilu magazina čini veliku razliku. Početna stranica koristi a veliki dio priče, svaki post ima svoju minijaturu, i stranice članka oko naslova.
Kada razmislite, TechCrunch se nije mnogo promijenio. Još uvijek “samo blog”. Ali projektiran je i vođen kao časopis, i to čini razliku.
4. Pozadine videozapisa
Zvuk s automatskim reproduciranjem možda je najneugodniji trend na webu. Ali iznenađujuće, automatska reprodukcija videozapisa (bez zvuka) je brzo rastući trend. To možete uočiti na desetinama poslovnih web lokacija na kojima se nalazi pozadina videozapisa preuzima cijeli zaslon.
Stvarno mi se sviđa ova tehnika kada se pravilno primjenjuje. Sve dok videozapis odnosi se na web-lokaciju i ne ometa sadržaj, Mislim da je to super učinak u zaglavlju.
5. Tipke s duhovima
Kao minimalizam hrani dalje u web dizajn, pojavljuju se mnogi novi trendovi. Jedan takav trend je porast tipki duhova koji nemaju unutarnje punjenje, ali imaju vanjsku granicu.
Većina tih gumba kontrast s drugima privući pozornost. Ovo možete vidjeti na početnoj stranici Instantmojo s zelenim gumbom za prijavu nalazi se odmah pokraj gumb duhova koji se povezuje s demoom uživo.
Ostale su stranice usvojene stil dizajna čisto duhova na njihove gumbe širom svijeta. Izvrstan primjer je novi Bootstrap raspored.
Mislim da tipke duhova rade na web-lokacijama nasloniti se na minimalizam. Oni svibanj ne biti velik stane za svaku web stranicu, ali ja ne vidim njihovu uporabu povećava sa svake godine prolazi.
6. Mod-ovski opt-ins
Modalni prozori su vrlo neugodni i ne mogu zamisliti da bi im se svidio bilo koji korisnik. Međutim dokazano je da povećavaju prijave, i trgovci ne mogu ignorirati tehnike koje djeluju.
To je razlog zašto mislim da će modalni opt-in prozori biti nastavite penjati u 2017.
Oni nisu moja omiljena stvar, a ja ih nikada ne dodajem na svoje web-lokacije. Ali ako je cilj povećati prijave onda su modalni prozori siguran način da se stvari pokrenu.
Novi dodaci mogu čak i cilj izlaznog cilja koji aktivira modal kad god korisnik pokuša napustiti web-lokaciju. Ostali modali pojavljuju se nakon x sekundi ili su postavljeni za otvaranje kada korisnik dovoljno brzo sklizne prema dolje.
Bez obzira na to kako se modali pokreću, kako su dizajnirani ili kako se osjećate u vezi s njima, mislim da će oni biti na dugom putu.
7. Ilustracija i vektorska umjetnost
S novim programima za dizajn vektora kao što su Sketch i Affinity Designer, pojavljuje se novi val ilustratora koji se probijaju na web. Grafički dizajn i dizajn sučelja konstantno se spajaju s više multidisciplinarnih dizajnera nego ikada prije.
To znači da ćemo vidjeti mnogo više prilagođenih ikona i ilustracije cijele stranice u bliskoj budućnosti.
Mnogi ilustratori su prakticirali umjetnike pa mislim da ćemo vidjeti više pozadina stranica napravljen digitalnim softverom za slikanje, detaljno prikazan kao konceptualna umjetnost.
8. Fiksno pomicanje bočnih traka
Prvi val fiksnog dizajna usredotočena na navigacijske trake. Sve su to previše uobičajene, pogotovo u odgovarajućim dizajnu gdje je fiksna navbar ponavlja osjećaj izvorne mobilne aplikacije.
No, u 2017. godini očekujem još jedan ljepljivi element-ljepljiva bočna traka.
Gotovo svaki veliki blog koristi ovu vrstu ljepljive bočne trake. To zadržava sadržaj u prikazu uvijek povećava vjerojatnost da će korisnici to učiniti interakciju sa sadržajem bočne trake.
Plus s desecima besplatnih jQuery dodataka koji mogu ponovite efekt ljepljive bočne trake. To je lakše nego ikada postaviti na bilo koju web-lokaciju.
9. Sadržaj unutar stranice
Nedavna studija slučaja otkrila je to sadržaj dugog oblika nadmašuje kratki oblik u rangiranju i kvaliteti zadržavanja korisnika. Odobreno to nije uvijek istina jer se na neke upite može brzo odgovoriti.
No, s daleko više sadržaja na webu, to je prirodno vidjeti više sadržaja dodano u članke. To ćete vidjeti na dugim web-lokacijama za pregled ili u člancima koji se dijele na navedene stavke.
Dodavanje sadržaja može poboljšati korisničko iskustvo i pomoći razbiti čitanje u manje komade. Sadržaj također može pomoći da bolje rangirate svoju web lokaciju! Ako Google pronađe vašu stranicu vrijednu, možda biste to i učinili dobiti skok veze u rezultatima pretraživanja.
Možda je istina da su ToC-ovi prilično oskudni upravo sada. Ali očekujem da će se taj trend povećati tijekom 2017. godine i nakon mnogo godina.
10. Svijetli šareni dizajn
Nisam siguran je li taj trend proizašao iz minimalizma ili kao reakcija na Googleov dizajn materijala. Ali naletio sam na desetke web-mjesta koja koriste svijetle pastelne boje pomiješane s drugim živim nijansama stvoriti vrlo maštovit izgled.
Početna stranica Rentberrya odličan je primjer koji također koristi tona nagiba. I to čak ima i gore spomenuto “Istaknuto u” značke smještene ispod! Dva trenda na jednom mjestu.
Primijetit ćete boje nemojte prožeti cijelu stranicu, i prigušeni su drugim nijansama bijele i sive.
Vidio sam dosta toga sheme živih boja da vjeruju da su u usponu.
11. Pomičite animacije
Web dizajneri znaju za pomicanje i kako je to strašno. No to nije ono što sam mislio s naslovom “pomicanje animacija”. Vidio sam mnoge web-lokacije koje sada animirati sadržaj u prikazu kada se pomaknete pored određenog dijela stranice.
Ovaj trend je uglavnom ograničena na početne stranice i tvrtke SaaS koji žele pizzaz u svom dizajnu.
Ne mogu reći je li to osobito koristan trend. To sigurno ne zgrabi oko ali ne mislim da nudi mnogo više od estetike. Ipak, to je trend koji se brzo širi i kada štedljivo može biti stvarno uredno.
12. Aplikacije na jednoj stranici (SPA)
Aplikacije s jednom stranicom su web-lokacije izgrađena isključivo s Ajax pozivima. JavaScript izvlači sadržaj s poslužitelja i dinamički učitava, tako da stranica nikad ne osvježava.
Uobičajeni primjeri su web-lokacije kao što su Gmail i Facebook. Ali s više JS tehnologije, Primijetio sam da se sve više i više SPA-ova stalno razvija. Čak i CodePen se može smatrati SPA.
Uz moćne knjižnice s frontendima, kao što su React & Aurelia, u 2017. bit će još lakše stvoriti SPA od nule.
13. Poništene trake za pretraživanje
Nekada je to bilo polje za pretraživanje uvijek su bili na vidiku negdje na web-stranici, bilo u bočnoj traci ili u navigaciji. Ali u zadnje vrijeme sam primijetio mnogo više polja za pretraživanje skriveno prema zadanim postavkama, i mora biti uključen u prikaz.
Svakako da je to zgodan trend uštedite prostor na stranici dok je još održavanje pristupačnosti značajke pretraživanja. Ako niste sigurni gdje smjestiti obrazac za pretraživanje u novom dizajnu, razmislite o korištenju preklopnog polja povezanog s ikonom povećala u navigaciji.
14. Adblock messages
To se ne može poreći Blokiranje oglasa raste. Pitanje je samo kako će izdavači riješiti taj trend. Neke stranice uljudno dodajte poruke u oglasna mjesta kao Time.com. Na Hongkiatu, primijetit ćete interni oglasi koji popunjavaju prazninu koji se dalje povezuju s web-lokacijom.
Jedan ozbiljan trend koji vidim je povećanje blokovi sadržaja oglasa. To je tehnika “blokirajte blokatore oglasa”. Ova značajka već postoji na mnogim velikim web-lokacijama kao što su Business Insider i Forbes. Nažalost, to boli i korisnika i izdavača, a sve to proizlazi iz loše kvalitete oglašivačkih tehnika.
Na kraju krajeva, nije bitno tko krivite ili gdje stojite u debati o blokiranju oglasa. Više ljudi instalira dodatke za oglasne blokove, a ja očekujem više izdavača da se vrate.
15. Čiste SVG ikone
SVG grafika već su prodrli u web, ali iz dana u dan postaju sve veći. I imam osjećaj da će 2017. biti velika godina za SVG-ove na internetu.
Možete pronaći tisuće besplatne SVG ikone na mjestima kao što je Flaticon ako znate pretraživati. Ali možete i vi upišite SVG u HTML, na primjer korištenjem ovog primjera na CodePen.
Dakle, dizajneri imaju način da koriste SVG-ove, a programeri također mogu koristiti SVG-ove. Moderna podrška za preglednike izgleda dobro preko ploče, tako da nema problema s kompatibilnošću. Sve što je potrebno je dovoljno dizajnerima prepoznati snagu SVG-ova i počnite ih koristiti!
16. Adobe XD
Adobe ugasite puna beta inačica Adobe XD-a u 2016., a od tada je brzo rasla. Trenutno podržava i Mac i Windows, I je u fazi testiranja prije nego se potpuno izvuku.
Možete se rugati ideji o bilo kojem programu koji preskače Sketch, ali Adobe je glavni softver tvrtke kreativnog rada s razlogom. Plus Skica je još uvijek samo za Mac dok je Adobe u potrazi za podrškom svima.
Čvrsto vjerujem da ćemo čitati puno više o Adobe XD-u u nadolazećoj godini. On može postati go-to software za dizajniranje UI maketa-tako da konačno možemo koristiti Photoshop kao alat za manipulaciju fotografijama (kao što je namijenjeno).
S razvojem novog softvera dolazi desetak tutoriali i freebie GUI setove također. Možete naći puno Adobe XD freebies u Dribbble zajedno s dvije nove freebie stranice usmjerene na XD Designmine i XD Guru.
17. Više izbornika hamburgera
Volite ga ili ga mrzite hamburger je ovdje da ostane. Postoji mnogo studija o upotrebljivosti tvrde protiv izbornika skrivenih od pogleda. Ali s malim zaslonom i samo toliko alternativa, za sada nema bolje alternative.
Ikone hamburgera polako postaju prepoznatljivi simboli za navigacijske izbornike. Baš kao što implicira ikona povećala “traži”, ikona hamburgera s tri trake uskoro će biti sinonim “izbornik”.
To je već istina za većinu pojedinaca koji su pametni za tehnologiju. Ali svake godine sve više ljudi dobiva pametne telefone i počinje pregledavati mobilni web. I uče povezati taj hamburger s navigacijskim izbornikom bez kraja na vidiku.
18. Ikone značajki proizvoda
Pisao sam o tom trendu na Treehouseu, ali ga nisam nedavno spomenuo. U 2017. taj trend je će biti ogroman. To je vjerojatno najčešći način dijelite značajke proizvoda na početnoj stranici.
Počinjete izradu popisa značajki za svoj proizvod. Proizvod može biti bilo što, od programa SaaS do WordPress teme ili čak fizičke stavke.
Onda možete i vi dizajn prilagođenih ikona ili pronađite skup ikona za predstavljanje tih značajki. To je najbolje izbjegavajte generičke značajke kao što su “pouzdan” ili “brzo” jer većina ljudi to očekuje.
Umjesto toga, navedite značajke to je zapravo važno. Ako je riječ o vrhunskoj WP temi, možda je to popis koji odgovara, koliko widgeta ima, ili kako radi izbornik.
Te ikone značajki rad kao vizualni pomoći prodati svaku značajku. Samo tekst je teško konzumirati ali vizuali su mnogo lakši razumjeti na prvi pogled.
19. Povišeni CTA-i
Poziv na radnju tradicionalno su postavljeni na cijeloj web-lokaciji. Ali s posjetiteljima manje vremena provodite na web-lokacijama, ključno je imati snažan CTA točno iznad poklopca.
Ti pozivi na radnje mogu biti gumbi, obrasci za uključivanje ili drugi unosi natjerati ljude da nešto poduzmu poput prijavljivanja ili čitanja posta na blogu.
Ne mogu vam reći kako dizajnirati CTA ili kako ga optimizirati za pretvorbe. Ali mogu reći da se čini da je trend stavljanje tih CTA-ova iznad pregiba iu jasnom pogledu za sve posjetitelje.
20. Manja područja sadržaja
Monitori su porasli toliko da većina web stranica mora postavite maksimalnu širinu. Mnogo je teže čitati rečenice kad su široke 2000px u odnosu na samo 700 piksela.
Manji je sadržaj lakše konzumirati, i na kraju stvara bolje iskustvo na web-mjestima koja su teška za sadržaj.
Mislim da više dizajnera to shvaća i da će polako smanjiti veličinu područja sadržaja. Radije maksimalnu širinu od 750px, ali možete ići kao mali kao 600px ili manje.
Kraći paragrafi s manje rečenica i manja područja sadržaja uvijek ću povećati čitljivost. Glavne publikacije, kao što je NY Times, mogu odstupati od vlastitih strukturalnih smjernica. Ali za jednostavan blog ili poslovni site, trend se kreće prema dulji sadržaj s manjim točkama i sadržajnim područjima.
Završavati
Postoje mnogi drugi trendovi koje nisam mogao pokriti u ovom postu, ali mislim da su ti 20 najzanimljiviji. Kako idemo naprijed u 2017., trebalo bi biti jasno koji trendovi eksplodiraju i koji nisu.
A ako imate druge ideje ili prijedloge za nadolazeće trendove u dizajnu, slobodno ispustite komentar ispod.
