20 Creșterea tendințelor de design web pentru a viziona în 2017
Un alt an a trecut și designerii se uită în viitor spre viitor. Mulți tendințe de design promițătoare sunt obligate să erupe în 2017. Anul trecut am acoperit primele tendințe de design pentru 2016 și am văzut o mulțime de schimbări de atunci.
Deci, pentru acest post am ales top 20 de tendințe pe care l-am observat câștigând tracțiunea în 2017. Aceste tendințe de design se poate aplica oricarui site web, așa că păstrați-vă ochii pentru aceste tehnici pe măsură ce ne mișcăm prin 2017 și dincolo.
1. “Recomandate în” insigne
Startup-urile, blogurile, proiectele SaaS și chiar întreprinderile mici utilizează acum “așa cum este prezentat în” insigne pe site-urile lor. Aceste insigne de multe ori link la articole pe bloguri mainstream cum ar fi HuffPo, Forbes, CNN, Fox și alte știri.
Scopul este acela de a validarea unui site web și a cladi increderea cu noi vizitatori. Este mai ușor pentru cineva să aibă încredere într-un site web atunci când poate vedea că a fost menționate în publicațiile autoritare.
De fapt, multe bloguri de top apreciați expunerea, așa că îi ajută cu adevărat pe toți cei implicați. Aceste site-uri mari de multe ori lansează logo-urile lor online dar puteți găsi, de asemenea, PNG-uri transparente sau SVG-uri doar prin navigare în jur.
De asemenea, este recomandat ca tine trimiteți înapoi la articolul original menționând site-ul dvs. Acest lucru dovedește acest lucru ați fost într-adevăr menționați pe site și nu faceți doar reclamații.
2. Link-uri cu litere albe
am vazut zeci de meniuri de navigare elegant toate bazându-se pe același design. Aceste linkuri nav variază în funcție de font și dimensiune dar de obicei au caracteristici similare, precum:
- Toate capacele
- îngroșată
- Distanțate uniform
- Aliniat la colțul din dreapta
Pagina principală a Zazzle este un exemplu excelent. Dar puteți găsi asta pe multe site-uri de pornire pentru că este a curat calea de a împărtăși legături care sunt ușor de citit și ușor de navigat.
Mai ales asociaz această tendință cu întreprinderi și start-up-uri de tehnologie dar poate fi răspândită și pe bloguri.
Observați data viitoare când vedeți această tendință, deoarece este peste tot. Și mă aștept să se mențină în creștere până în 2017.
3. Bloguri în stilul revistelor
Blogging-ul a reprezentat un concept de nișă la începutul anilor 2000. Dacă ați rulat un blog în 2003, a fost considerat un hobby drăguț. În doar peste un deceniu, această tendință sa schimbat radical. Blogurile pot acum să ofere un venit cu normă întreagă, și încep să arata mult mai mult ca revistele digitale.
Uită-te înapoi la designul original al TechCrunch când a fost lansat pentru prima oară în 2006. Se pare că este un blog WordPress generic drept?
Acum, uitați-vă la pagina de pornire curentă a Techcrunch în 2017:
Nu numai arata ca o revista, de asemenea funcționează ca unul. TechCrunch publică zeci (dacă nu sute) de postări noi în fiecare zi. Acestea sunt sursa # 1 pentru surse de pornire.
Tendințele de design în stilul revistei au o mare diferență. Pagina de pornire utilizează a mare secțiune poveste featured, fiecare post are o miniatură proprie, și paginile articolului centru în jurul titlului.
Când te gândești la asta, TechCrunch nu sa schimbat prea mult. E încă “doar un blog”. Dar este proiectat și gestionat ca o revistă, și asta face diferența.
4. Fundaluri video
Sunetul de redare automată este probabil cea mai enervantă tendință pe web. Dar surprinzător, redare automată (fără sunet) este o tendință de creștere rapidă. Puteți observa acest lucru pe zeci de site-uri de afaceri unde există un fundal video preia întregul ecran.
Îmi place foarte mult această tehnică atunci când este aplicată corect. Atâta timp cât videoclipul se referă la site și nu obstrucționează conținutul, Cred că este un efect interesant de utilizat în antetul tău.
5. Butoane fantomă
La fel de minimalismul se alimentează în continuare în designul web, multe tendințe noi sunt în curs de dezvoltare. O astfel de tendință este creșterea butoanelor fantomă care nu au o umplutură interioară, dar au o margine exterioară.
De cele mai multe ori aceste butoane contrast cu ceilalți a atrage atentia. Puteți vedea acest lucru pe pagina de pornire a Instantmojo cu butonul de înscriere verde situat chiar lângă butonul fantomă care leagă un demo live.
Alte site-uri au adoptat un stil de design cu fantome pură la butoanele lor la nivel local. Un exemplu excelent aici este noul aspect Bootstrap.
Cred că butoanele fantome funcționează pe site-uri înclinat spre minimalism. Este posibil ca acestea să nu fie potrivite pentru fiecare site web, dar văd că utilizarea lor crește cu fiecare an care trece.
6. Opt-ins din fereastra modală
Ferestrele modale sunt foarte enervante și nu-mi pot imagina că orice utilizator le-ar plăcea. in orice caz acestea se dovedesc a crește numărul de înscrieri, iar marketerii nu pot ignora tehnicile care funcționează.
De aceea cred că ferestrele modale opt-in vor continuați să urcați în 2017.
Nu sunt lucrurile mele preferate și niciodată nu le adaug pe site-urile mele. Dar dacă scopul este de a crește înregistrările, atunci ferestrele modale sunt o modalitate sigură de a face rost de lucruri.
Plugin-uri noi pot chiar țintă intenția de ieșire care declanșează o modalitate ori de câte ori utilizatorul încearcă să părăsească site-ul. Alte modale apar după x secunde sau sunt setate să se deschidă atunci când utilizatorul scroll jos destul de departe.
Indiferent de modul în care sunt declanșate modalitățile, de modul în care sunt proiectate sau de modul în care vă simțiți despre ele, cred că vor fi pe drumul lung.
7. Ilustrație și vector art
Cu noi programe de design vectorial, cum ar fi Sketch și Affinity Designer, există un nou val de ilustratori care se încadrează pe web. Designul grafic și designul de interfață sunt în mod continuu îmbinate cu mai mulți designeri multidisciplinari acum decât oricând.
Asta înseamnă că o să vedem mult mai multe icoane personalizate și ilustrații de pagină in viitorul apropiat.
Mulți ilustratori sunt practicanți, așa că cred că vom vedea mai multe fundaluri de pagină completă realizat cu software digital de pictură, redat în detaliu ca arta conceptului.
8. Bare laterale fixe
Primul val de design fix axat pe barele de navigare. Acestea sunt toate prea frecvente, mai ales în cazul modelelor receptive în cazul în care bara fixă navbar replică sentimentul unei aplicații mobile native.
Dar în 2017, mă aștept să văd un element mai lipicios-bara laterală lipită.
Aproape fiecare blog major folosește acest tip de bara laterală lipicioasă. Aceasta păstrează conținutul în vedere în orice moment și crește probabilitatea ca utilizatorii să facă acest lucru interacționați cu conținutul barei laterale.
Plus cu zeci de pluginuri jQuery gratuite care pot replicați efectul barei laterale lipicioase. Este mai ușor ca oricând să configurați acest lucru pe orice site web.
9. Cuprins în pagină
Un studiu de caz recent a constatat acest lucru lungimea conținutului depășește forma scurtă în ambele clasamente și calitatea de retenție a utilizatorilor. Acordat acest lucru nu este întotdeauna adevărat, deoarece unele întrebări pot fi răspuns rapid.
Dar, cu mult mai mult conținut pe lungime pe web, este natural să vedem mai multe tabele de conținut adăugate în articole. Veți vedea acest lucru pe site-urile de revizuire de lungă durată sau în articole care se încadrează în elementele listate.
Adăugarea unui cuprins poate îmbunătăți experiența utilizatorului și să ajute descompune lectura în bucăți mai mici. Cuprinsul poate, de asemenea ajuta site-ul dvs. sa se situeze mai bine! Dacă Google găsește pagina dvs. valoroasă s-ar putea obține link-uri de salt în rezultatele căutării.
Ar putea fi adevărat că tocurile sunt destul de limitate acum. Dar mă aștept ca această tendință să explodeze peste 2017 și după mulți ani.
10. Desene colorate colorate
Nu sunt sigur dacă această tendință a ieșit din minimalism sau ca reacție la designul material al Google. Dar am dat peste zeci de site-uri care folosesc culori pastelate culori amestecate cu alte nuanțe vibrante pentru a crea un aspect foarte fantezist.
Pagina de pornire Rentberry este un exemplu excelent pe care îl folosește de asemenea tone de gradienti. Și chiar are cele menționate mai sus “Recomandate în” insigne amplasate dedesubt! Două tendințe pe un site.
Veți observa că culorile nu pătrunde întreaga pagină, și sunt dezactivate cu alte nuanțe de alb și gri.
Am văzut destul din acestea vibrante scheme de culori să creadă că sunt în creștere.
11. Derulați animațiile
Designerii web știu despre scroll-jacking și cât de teribil este. Cu toate acestea, nu asta am vrut să spun cu titlul “derulați animațiile”. Am vazut multe site-uri ca acum animați conținutul în vedere când parcurgeți o anumită secțiune a paginii.
Această tendință este cea mai mare parte limitat la pagini de pornire și companiile SaaS care doresc unele pizzazz în designul lor.
Nu pot spune dacă este o tendință deosebit de utilă. Este sigur apuca ochiul dar nu cred că oferă mult dincolo de estetică. Totuși, este o tendință care pare să se răspândească rapid și când folosit cu ușurință poate fi foarte elegant.
12. Aplicații pe o singură pagină (APS)
Aplicațiile pe o singură pagină sunt site-uri web construit exclusiv prin apelurile Ajax. JavaScript trage conținut de pe un server și îl încarcă dinamic, astfel încât pagina nu se reface.
Exemple comune sunt site-urile precum Gmail și Facebook. Dar cu mai multe tehnologii JS, Observ mai multe și mai multe SPA-uri dezvoltate tot timpul. Heck, chiar și CodePen ar putea fi considerat o SPA.
Cu bibliotecile frontale puternice, cum ar fi React & Aurelia, va fi chiar mai ușor să creați o SPA de la zero în 2017.
13. Bare de căutare care pot fi modificate
Obișnuiau să fie acele câmpuri de căutare au fost întotdeauna în vedere undeva pe o pagină web, fie în bara laterală, fie în navigație. Dar, în ultima vreme, am observat mai multe domenii de căutare ascuns în mod implicit, și trebuie să fie înclinat în vedere.
Desigur, o tendință la îndemână economisiți spațiu pe pagină în timp ce încă menținerea accesibilității funcției de căutare. Dacă nu sunteți sigur de locul unde puteți plasa un formular de căutare într-un design nou, vă recomandăm să utilizați un câmp de comutare legat la o pictogramă de lupă din navigație.
14. Mesajele Adblock
Nu neagă faptul că blocarea anunțurilor este în creștere. Singura întrebare este cum editorii se vor ocupa de această tendință. Unele site-uri politicos adăugați mesaje în spațiile publicitare cum ar fi Time.com. În Hongkiat, veți observa reclame interne pentru a umple golurile care leagă mai departe site-ul.
O tendință serioasă pe care o văd în creștere este blocuri de conținut adblock. Aceasta este o tehnică “blocați blocarea anunțurilor”. Această caracteristică este deja disponibilă pe multe site-uri mari, cum ar fi Business Insider și Forbes. Din nefericire, acest lucru dăunează atât utilizatorului, cât și editorului, și totul provine din tehnici de publicitate de slabă calitate.
În cele din urmă, nu contează cine dai vina sau în care stai în dezbaterea de blocare a anunțurilor. Mai multe persoane instalează pluginuri adblock și mă aștept mai mulți editori să împingă înapoi.
15. icoane pure SVG
Grafica SVG au intrat deja pe web, dar cresc din ce în ce mai mult pe zi. Și am sentimentul că 2017 va fi un an imens pentru SVG-uri pe internet.
Puteți găsi mii de gratuit seturi de pictograme SVG pe site-uri precum Flaticon dacă știți cum să căutați. Dar poți și tu codul SVG în HTML, de exemplu, prin utilizarea acestui exemplu pe CodePen.
Deci, designerii au o modalitate de a utiliza SVG, iar dezvoltatorii au o modalitate de a utiliza și SVG-uri. Suportul pentru browserul modern arată bine peste bord, deci nu există nici o problemă cu compatibilitatea. Tot ce este necesar este suficient de mult pentru designeri recunosc puterea SVG-urilor și începeți să le utilizați!
16. Adobe XD
Adobe a ieșit un beta complet de Adobe XD în 2016, și de atunci a crescut rapid. Este în prezent acceptă atât Mac, cât și Windows, si este în faza de testare înainte de a fi complet rulat.
Poți să te superi pe ideea unui program care să depășească Sketch-ul, dar Adobe este principala companie software de creație pentru un motiv. Plus Sketch este încă Mac-only în timp ce Adobe este căutând să sprijine pe toți.
Cred cu fermitate că vom citi mai multe despre Adobe XD în anul următor. Poate deveni software-ul "go-to" pentru proiectarea machetelor UI-astfel încât să putem folosi în cele din urmă Photoshop ca un instrument de manipulare a fotografiilor (așa cum se intenționează).
Odată cu apariția de noi software-uri, vine zeci de tutoriale și kituri GUI gratuite de asemenea. Puteți găsi o mulțime de freebies Adobe XD în Dribbble împreună cu două noi site-uri gratuite concentrate pe XD Designmine și XD Guru.
17. Mai multe meniuri pentru hamburger
Iubeste-o sau urăște-o hamburgerul este aici pentru a rămâne. Există o mulțime de studii de uzabilitate se opun meniurilor ascunse de vedere. Dar, cu un mic ecran și doar cu atât de multe alternative, nu există o alternativă mai bună pentru moment.
Icoanele din hamburger sunt încet devenind simboluri recunoscute pentru meniurile nav. La fel ca o pictogramă cu lupă implică “căutare”, pictograma de trei baruri de hamburger va fi în curând sinonimă cu “meniul”.
Acest lucru este deja valabil pentru majoritatea persoanelor cu experiență în tehnologie. Dar, cu fiecare an care trece, mai multe persoane primesc smartphone-uri și încep să navigheze pe web-ul mobil. Și ei învață asociați hamburgerul cu un meniu nav fără sfârșit.
18. Icoane pentru caracteristicile produsului
Am scris despre această tendință în Treehouse, dar nu am menționat-o recent. Și mergând în 2017, această tendință este va fi imens. Este probabil cea mai comună cale împărtășiți caracteristicile produsului pe o pagină de pornire.
Începeți făcând o listă de caracteristici pentru produsul dvs. Produsul poate fi orice, de la un program SaaS la o temă WordPress sau chiar un element fizic.
Apoi, puteți fie a crea pictograme personalizate sau găsiți un set de pictograme pentru a reprezenta aceste caracteristici. Cel mai bine este evitați caracteristicile generice precum “de încredere” sau “rapid” deoarece majoritatea oamenilor se așteaptă la aceste lucruri.
În schimb, caracteristicile listei care contează. Dacă este vorba despre o temă WP premium, poate lista că este receptivă, câte widget-uri sunt livrate sau cum funcționează meniul.
Aceste pictograme caracteristice lucrează ca vizuale a ajuta vinde fiecare caracteristică. Textul este singur greu de consumat dar vizuale sunt mult mai ușor să înțelegeți dintr-o privire.
19. CTA de mai sus
Call-to-acțiuni au fost plasate în mod tradițional peste tot pe un site web. Dar cu vizitatorii petrec mai puțin timp pe site-uri web, este crucial să aveți un CTA puternic chiar deasupra ori.
Aceste solicitări de acțiuni pot fi butoane, formulare de înscriere sau alte intrări conduce oamenii să ia ceva măsuri cum ar fi înscrierea sau citirea unei postări pe blog.
Nu vă pot spune cum să creați un CTA sau cum să îl optimizați pentru conversii. Dar pot spune că tendința pare să fie plasarea acestor CTA deasupra ori și în vederea clară pentru toți vizitatorii să vadă.
20. Zone de conținut mai mici
Monitoarele au devenit atât de mari încât majoritatea site-urilor web trebuie să fie setați o lățime maximă. Este mult mai greu să citești propozițiile când sunt 2000px lățime, comparativ cu lățimea de numai 700px.
Conținutul mai mic este mai ușor de consumat, și în cele din urmă creează o o experiență mai bună pe site-urile cu conținut greu.
Cred că mai mulți designeri realizează acest lucru și vor încetini să diminueze dimensiunile ariilor lor de conținut. Prefer o lățime maximă de 750 pixeli, dar ați putea merge la 600px sau mai puțin.
Paragrafe mai scurte cu mai puține fraze și zonele cu conținut mai mic intotdeauna va crește lizibilitatea. Publicațiile majore, cum ar fi NY Times, se pot abate cu propriile orientări structurale. Dar pentru un blog simplu sau un site de afaceri, tendința se îndreaptă spre continut mai lung, cu paragrafe mai mici si zone de continut.
Înfășurați-vă
Există multe alte tendințe pe care nu am reușit să le acoperim în acest post, dar cred că cele 20 sunt cele mai interesante. Pe măsură ce avansăm în 2017, ar trebui să fie evident care sunt tendințele care explodează și care nu sunt.
Și dacă aveți alte idei sau sugestii pentru viitoarele tendințe de design, vă rugăm să renunțați la un comentariu de mai jos.
