Tendințe moderne în dezvoltarea web. Videoclipul este un element funcțional. Folosind cinemagraphs sau imagini live

În fiecare an învățăm ceva nou despre design, iar 2016 nu face excepție. Articolul pe care l-am scris anul trecut a fost un succes atât de mare încât ne-am hotărât să facem niște previziuni pentru 2017, așa că să începem!

Articol nou publicat →← Citește și inspiră-te!

Tendințele de design sunt influențate de media, tehnologie, industria modei și, mai recent, de utilizare. Tendința apare încet, treptat, pătrunzând în toate domeniile designului, apoi dispare exact în același mod. Cele mai multe tendințe de design nu durează mai mult de unul sau doi ani. Designul în 2017 va continua tendințele care au început în 2016, cu câteva noi schimbări adăugate, acest sentiment este bine cunoscut și familiar și este posibil să fi observat-o în ultimii doi ani. Principala influență rămâne Material Design-ul Google, cu modificări minore.

Ce tendințe de web design ne așteaptă în 2017

01. Design semi-plat

În ultimii ani, designul plat a fost cel mai popular pe piața de web design, dar acum, sub influența Material Design, devine din ce în ce mai unidimensional. Această tranziție începe cu niște umbre ușoare, făcându-l un design semi-plat. Evoluția designului plat de la stilul minimalist se mută în noile tehnologii în curs de dezvoltare. Designul plat este încă acolo, dar a suferit unele îmbunătățiri.

Umbrirea netedă adaugă profunzime și complexitate fără a distruge senzația designului plat. Aceasta este o caracteristică nouă adăugată la trendul plat și va continua să se dezvolte în 2017.

Proiect: Resursa | Instrument UI/UX pentru servicii web
Autori: Ruslan Latypov; LS Graphics; Anton Mishin; Valeri Gurkov

Proiect: Lista de redare a ascultătorului

02. Fotografii în mișcare (Cinemagraphs)

Cinemagraphs nu sunt acele animații GIF pe care le vedem peste tot pe Internet. Cinemagrafele sunt imagini statice cu elemente minore de mișcare. Această tehnică face o fotografie simplă mai realistă.

03. Mai mult 3D

3D se mișcă cu siguranță în direcția noastră și vom vedea această influență în toate domeniile designului. Cu tehnologiile VR/AR care își iau ritmul rapid, acest domeniu se dezvoltă destul de repede.

Proiect: IUBESC; INDRAGESC

Proiect: Deschideți premiile anuale

Proiect: Air Max '17

Proiect: NIKE F.C. | Bile de aur 3D în lumea reală

Proiect: Better You Brand

04. Animații

Animația este din ce în ce mai prezentă în web design, formatul poate fi orice - WebGL CSS, GIF-uri, SVG sau video. Animația a fost una dintre cele mai importante tendințe de web design din ultimul an, nu vă sfiați să o folosiți.

Proiect: Nickelodeon Kids alege președintele

Proiect: Aplicația Virtual Fitness Coach AR

Proiect: ZH OURO- Rio 2016

05. Site-uri/pagini de destinație de o pagină

În 2017, vom vedea o creștere a site-urilor de o pagină datorită potențialului lor în scopuri de marketing și a capacității lor de a viza mai bine vizitatorii.

Dacă aveți nevoie de o pagină de destinație, o puteți comanda de la mine →

06. Forme geometrice, modele, linii și cercuri

Această tendință a început în 2016 și va continua cu siguranță și în 2017. Vă puteți personaliza site-ul prin simpla adăugare a unor forme moderne, fie plate, fie cu o umbră moale.

Proiect:

Proiect: DRAP.agency Branding

Proiect: Pfizer - activ și peste 50 de ani pentru The New York Times

07. Culori curajoase

Folosește culori strălucitoare pentru a ieși în evidență. Materialul și designul plat se potrivesc bine cu culorile strălucitoare. Puteți folosi paleta de culori oferită de Google pentru a selecta și combina culorile dorite.

Proiect: Edris — Logo creat de MiLo

Proiect: Rendered - Website Demo responsive pentru Adobe

Proiect: b2mach

08. Scrolling și Paralax inovatoare

Aceasta este o idee vizuală grozavă care va adăuga unicitate oricărui site web. De la paralaxă multistrat până la paralax video, totul este posibil cu pluginul D.ex Multilayer Parallax. Acest produs a fost dezvoltat integral de studioul Milothemes sub conducerea Loredanei Papp si Mihai Baldean. Este disponibil pentru cumpărare pe Envato Market / codecanyon.net

Acesta este un plugin WordPress care vă permite să faceți blocuri Parallax frumoase cu mai mult de un strat. Fiți creativ și combinați straturi în orice stil doriți. Am făcut 12 exemple diferite în ghidul de pluginuri pentru a vă face prima introducere în lumea minunată a paralaxei. Joacă-te cu straturi!

09. Tranziții de culoare

Gradientele sunt una dintre cele mai mari tendințe în acest moment. Tendința a început să câștige popularitate în 2016 și continuă să crească rapid după ce mărci mari, precum Instagram, au decis să-și schimbe logo-ul și imaginile de la o culoare la o tranziție multicoloră (gradient). De la logo-uri la butoane sau suprapuneri de imagini, această tendință este peste tot.

10. Navigare pe mobil (Design responsiv)

2015 și 2016 au înregistrat o creștere semnificativă a vizionărilor de pe dispozitivele mobile. Tabletele și smartphone-urile sunt acum alegerea preferată pentru navigarea pe web, depășind desktop-urile și laptopurile - iar tendința continuă. Orice site web care nu are un design web responsive trebuie actualizat cât mai curând posibil!

Proiect: Animație de site responsive

11. Grafică și ilustrații personalizate

Fotografia de stoc este încă destul de populară, dar o nouă tendință a apărut în 2016 și va continua să crească în 2017: utilizarea graficelor și ilustrațiilor personalizate. Dacă doriți un site web unic, frumos, de care orice vizitator să vă amintească, colaborați cu designeri digitali. Aceasta înseamnă mai puține fotografii de stoc și mai multe imagini originale, unice.

12. Utilizarea creativă a spațiului neutru și a rețelei

În ultimii ani, designul web a fost mai înclinat spre coloane și grile ordonate, organizate, dar în 2016 am putut observa o schimbare semnificativă către straturi neregulate și design ultra-modern.

13. Spune povești (Storytelling)

Site-urile web încep acum să spună povești pentru a câștiga clientul. Oamenii tind să-și amintească povești mai mult decât să citească informații simple (seci).

Mai multe videoclipuri despre povestirea de la Business of Youth:

14. Încărcarea treptată a conținutului (Lazy Loading)

Lazy Loading întârzie încărcarea imaginilor pe pagini web lungi, ceea ce permite informațiilor să apară într-un anumit punct în timpul derulării în jos, ceea ce reduce timpul de încărcare a paginii.

15. Conținut împărțit

Conținutul împărțit este acum popular în designul web responsiv; acesta împarte ecranul în 2 sau mai multe părți. Un astfel de site cu ecran divizat va arăta spectatorului mai multe mesaje la fel de importante într-un singur bloc al site-ului. Această tendință a apărut în 2015, dar în 2017 va continua să crească și, cel mai probabil, o veți vedea pe multe site-uri.

16. Formulare pe ecran complet

Nu este nevoie să navigați la o altă pagină pentru a completa un formular, deoarece site-urile noi folosesc formulare cu lățime completă care se adaptează designului adaptabil.

17. Videoclipuri peste tot

Conținutul video a crescut în ultimul an, iar oamenii au devenit mai pretențioși la videoclipuri de înaltă calitate. Un videoclip de pe un site web poate fi scurt și se poate repeta automat, prezentând un produs sau un proiect cinematografic la scară largă care va menține spectatorul implicat în poveste.

Proiect: Cantecul dealului

18. SEO este important! (SEO este important)

SEO este foarte important pentru un site web, așa că un site frumos fără SEO bun va rămâne un outsider.

19. Navigare ascunsă

Meniurile cu hamburger creează o mulțime de dezbateri pro și contra cât de dificil este pentru utilizatori să găsească meniul, dar un lucru este sigur - această tendință este aici pentru a rămâne și oamenii se vor obișnui în cele din urmă cu astfel de meniuri.

20. Detalii de design minuscule

Concentrarea pe detalii este foarte importantă anul acesta. Mici detalii precum puncte de navigare etc. Concentrarea asupra micilor detalii va duce la finalizarea lucrării.

Proiect: Barometa - Platforma de locuri de muncă de ultimă generație

21. Tendințe în design de logo

21.1. Minimalism

Toate brandurile mari se îndreaptă către modele mai simple, minimale și această tendință este aici pentru a rămâne.

21.2. Desenat de mână

Această tendință a fost în centrul atenției în ultimii ani și acest stil este grozav pentru afacerile hipster. Este folosit pentru saloane de coafură (frizerie), cafenele, restaurante, articole de artă și meșteșuguri.

21.3. Spațiu negativ

Aceasta este o tendință veche, dar am văzut că a luat avânt în ultimii câțiva ani și va continua să crească în 2017, așa că cu siguranță merită să o aruncăm o privire mai atentă.

21.4. Decuparea

Nu devine mai minimalist decât această tendință. Arată doar ceea ce este suficient pentru a indica în logo pentru a recunoaște compania și nimic mai mult.

21.5. Geometrie

Această tendință este vechea școală, dar este unul dintre acele stiluri care nu vor muri niciodată.

21.6. Linie de arta

Această tendință este populară în rândul afacerilor de nouă generație

Autori: Sam Healy; Andrea Schlaffer; Jacek Janiczak

21.7. Modele

Modelele sunt noul trend, iar această repetare este o modalitate neobișnuită de a face o afacere memorabilă și de a o diferenția de concurenții săi. Această direcție originală poate fi folosită și în prezentarea logo-urilor.

Autori: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner

21.8. Logo-uri animate

Motion Design este o tendință populară astăzi și o putem vedea în toate domeniile designului.

Autori: Javier Miranda Nieto; The Work Co

21.9. Epocă

Stilul vintage este încă în joc. Chiar dacă această tendință este populară de mult timp, încă mai are ceva de spus.

Autori: Roman Dodonov; Mingo Ideas Up; Voi încerca mai departe

21.10. Tranziții de culoare

Gradientele sunt peste tot anul acesta, iar siglele nu fac excepție.

21.11. Ilustrații în logo-uri

Ilustrațiile sunt o modalitate bună de a crea un logo unic și personalizat pentru afacerea dvs. Ele devin din ce în ce mai populare în acest an.

Autori: Bodea Daniel; Jacek Janiczak

21.12. Fotografie în logo-uri

Combinația de imagini și tipografie este foarte populară acum. Lucrează foarte bine împreună și creează un contrast între ei.

22. Tendințe în tipografie

22.1. Tipografie mare, îndrăzneață și frumoasă

Tipografia poate fi cel mai important element în crearea unui design uimitor. Anul acesta, tipografia va fi aldine (bold) și mare, cu titluri proeminente.

Autori: Alexandru Laguta

Autori: Quim Marin

Proiect: Seria Baugasm - Pachetul 4

22.2. Degrade/tranziții de culoare în tipografie

Gradienele sunt, fără îndoială, o tendință astăzi și le veți găsi și în tipografie.

22.3. Ierarhie vizuală

Ierarhia în tipografie este importantă în orice direcție de proiectare. Mărimea și lățimea fontului pot indica cu ușurință cuvintele sau titlurile care au prioritate, așa că utilizați acest factor atunci când creați textele. De asemenea, ar trebui să rețineți că puteți obține o ierarhie vizuală clară prin plasarea textului și culoare.

22.4. Tipografie minusculă

Textul foarte mic este de obicei înconjurat de un spațiu de culoare opus, dar puteți crea o diferență vizuală între culoare sau imagine pentru a face textul să iasă în evidență. De asemenea, puteți folosi animația pentru a vă ajuta textul să iasă în evidență.

Autori: Slava Oleinik; Bahaa Samir; Digital inteligent

Proiect: Seria Baugasm - Pachetul 4

22.5. Tipografie animată

Animația este folosită peste tot acum, iar tipografia nu face excepție. Dacă utilizați software de mișcare, nu puteți greși anul acesta.

Proiect: Gotham Pro Animated Font gratuit

22.6. Tipografia întâlnește fotografia

Combinația dintre text și fotografie poate produce rezultate excelente. Consultați aceste exemple grozave.

22.7. Forme geometrice și tipografie

Formele geometrice pot funcționa bine cu tipografia pentru a crea un design frumos.

22.8. Împerecherea fonturilor

Utilizați două sau mai multe fonturi împreună. Acest lucru este încă în tendințe în 2017.

———————————

Este o credință comună printre designeri că tendințele vor fi o parte importantă a muncii lor. A fi la curent cu cele mai recente actualizări este considerat o necesitate. Mulți designeri judecă munca altora prin prisma tendințelor, iar etichetarea unor lucrări cu #old poate fi văzută ca o insultă, ca și cum un design nu încorporează cele mai recente tendințe și devine automat mai puțin valoros.

Cu toate acestea, există motive pentru a urma tendințele. Consultarea site-urilor precum Awwwards, FWA sau CSS Design Awards vă poate inspira și, prin urmare, vă poate ajuta să priviți dincolo de obiceiurile de design. Puteți învăța despre noi lumi vizuale, pe care apoi le puteți integra (conștient sau nu) cu un limbaj grafic. Privind pe alții lucrând vă ajută să vă îmbunătățiți propriile abilități, precum și să rămâneți la curent cu cea mai recentă tehnologie.

În ultimul an sau doi, a devenit vizibil că mulți designeri încearcă să se îndepărteze de compozițiile simple. Apar lucrări de design din ce în ce mai deschise, aparent haotice, „rupte” și „tăiate”. Glorificarea grilei, așa cum a fost cândva, își pierde semnificația, iar regulile sunt schimbate în mod deliberat și conștient. Conținutul începe să se miște, pare să se miște, iar părțile sale se suprapun uneori și se împletesc unele cu altele.

Evoluția Canvas și WebGL joacă un rol important în acest proces. Design-urile moderne sunt adesea puțin dezordonate, mai puțin intuitive decât cele minimaliste, dar cu siguranță lasă o impresie de durată asupra utilizatorilor.

Ce ne mai așteaptă în web design în 2017? Iată previziunile mele.

Compoziție deschisă

Până de curând, lumea designului era dominată de compoziții „închise”, simetrice și statice. Din 2016 au apărut multe site-uri care s-au îndepărtat de acest stil. Compozițiile deschise cu elemente aranjate liber care rulează undeva în afara ecranului câștigă popularitate - exemple de astfel de lucrări pot fi văzute pe romainpsd.com, durimel.io sau booneselections.com. Distribuția elementelor pe aceste site-uri dă impresia că acestea continuă să trăiască în spatele monitorului.

Asimetrie

2016 a încălcat și regula de simetrie care a dominat industria de ceva timp. Mulți designeri au creat layout-uri asimetrice care sunt departe de a fi perfect echilibrate pe partea stângă și dreaptă. Ca exemple, aș dori să vă arăt excelentul site culture.pl, haoticul dada-data.net și durimel.io menționat anterior.

Diversitate

Designerii au creat compoziții mai dinamice care prezintă mai multe linii diagonale care se intersectează (poigneedemainvirile.com, vanderlanth.io) sau forme mai complexe (residente.com/en, helloheco.com, predictiveworld.watchdogs.com).

Iluzia haosului

În 2016, mulți designeri au început în mod conștient și intenționat să se îndepărteze de designul minimalist. A existat o dorință pentru mai multă libertate și o abordare mai puțin rigidă a designului. În spatele acestui lucru, desigur, se află nevoia de schimbare, dar și sentimentul obișnuit de plictiseală. La un moment dat, toată lumea se plictisește să creeze machete simple cu elemente simple.

Totuși, analizând proiectele din 2016, se observă că haosul pare să fie doar haos. Aspectele se bazează în continuare pe contrastul clasic de forme, culori, texturi, dimensiuni etc. Ceea ce s-a schimbat este aranjarea diferitelor elemente și armonia dependenței dintre ele. În zilele noastre, titlurile, pictogramele sau blocurile de text sunt mai des mutate, în ciuda logicii banale. În ciuda faptului că fac parte din același bloc tematic, ele sunt separate și situate la o distanță decentă unul de celălalt. Nu sunt aliniate la aceeași margine și au suporturi diferite.

Unele figuri geometrice „suspendate în aer” au doar un scop decorativ (melanie-f). Acest lucru este tipic și pentru elementele care se suprapun. Textele sunt parțial suprapuse de fotografii, ca pe e03.epicurrence.com și melville-design.com, sau imaginile sunt suprapuse una peste alta, așa cum se poate vedea pe olivierbernstein.com.

Este, de asemenea, o tehnică distinctivă pentru a rupe armonia minimalistă obișnuită. Titlurile uriașe contrastează puternic cu structurile și culorile delicate și subtile.

Fundaluri și modele bogate

Din ce în ce mai des apar fundaluri și modele pe care sunt mici linii, dungi sau puncte.

Un model deosebit de comun este modelul grilă, care oferă un „cadru” pentru alte elemente de aspect. Aceste elemente se deplasează în paralaxă de-a lungul rețelei și sunt adesea localizate haotic.

Model de grilă

Unul dintre primele site-uri pe care a apărut o astfel de grilă a fost werkstatt.fr, care, însă, nu a folosit animații caracteristice.

Un mod ușor diferit de a utiliza modelul de grilă este afișat pe klimov.agency, brand.uber.com și maisonullens.com. În aceste cazuri, grila are o funcție foarte specifică - de a face logice mișcările elementelor. Acest lucru vă permite să raționalizați soluțiile nestandard și oferă răspunsuri la întrebări precum „de ce marginile ilustrației nu se potrivesc cu marginile butonului”? Acest lucru creează un ritm și, în același timp, justifică încălcările acestuia.

Detalii decorative

Ceea ce s-a schimbat cu adevărat în ultima vreme este abordarea detaliilor. Există o schimbare treptată de la minimalism. Există multe alte elemente care au doar funcții decorative. Forme geometrice „zburătoare” și fragmente corespunzătoare. Pictogramele liniare, subțiri, se desprind ușor de conținutul pe care îl ilustrează. Sublinierea și liniile sunt deplasate. Apar granulații și erori, ca pe bigyouth.fr sau kikk.be.

Butoanele sunt create mai rar ca dreptunghiuri clare cu text înăuntru. Ele apar adesea ca linii moi, offset, cum ar fi cele de pe dahllaw.dk sau yasuhiroyokota.com. O altă opțiune de buton este un hover spectaculos pe Canvas, ca pe hpsoundincolor.com și cavalierchallenge.com.

Concepte bine gândite - animații fluide între secțiuni

Nu este nimic nou despre animațiile de pe site-uri web. Mai mult, nu se poate spune că acestea contrazic abordarea minimalistă. Cu toate acestea, ca și Canvas, acestea reprezintă o parte importantă a posibilităților mai mari în design web. Și noile oportunități sunt mereu tentante pentru că îți permit să faci ceva diferit, proaspăt și original.

Abundența animațiilor elimină împărțirea ascuțită a paginii în secțiuni. Site-ul se schimbă fără probleme pe măsură ce derulați. Conținutul se estompează și se stinge folosind animații soft. Secvențele acestor tranziții devin din ce în ce mai elaborate. Acestea nu sunt doar efecte aleatorii între blocuri de conținut, ci un concept atent în care fiecare element apare la momentul potrivit (Nationalgeographic.com, stylenovels.com). Animațiile fac parte din site-ul de la început, nu doar un detaliu aleatoriu adăugat.

Animațiile interesante decorează machete simple. Ele adaugă valoare nouă și fac pagina unică. Ele devin esența întregului proiect, ca pe Ifly50 sau pe tennentbrown.co.nz. Animațiile creează adesea o structură frumoasă și elegantă pe site-urile web: Cuberto.com, lookbook.wedze.com, skarv-fashion.com sau corentinfardeau.fr.

Tipografie variată

Schimbarea tendințelor poate fi observată și în fonturile utilizate. Până de curând, întregul Internet era dominat de fonturi simple, neo-grotesc, precum Helvetica, Roboto, Lato sau Open Sans. Neogrotescul ceva mai „decorativ” este folosit mai des în titluri, cu o variantă mai simplă aleasă pentru restul textului. Fonturile Serif nu sunt practic folosite niciodată.

În ultimii 2 ani, situația a început să se schimbe. Designerii folosesc cu îndrăzneală diferite tipuri de fonturi. Acum sunt mai dispuși să lucreze cu contraste - combinând fonturile serif și sans serif.

Se întâmplă multe în tipografia care este folosită pe site-uri web. Textele sunt animate, împărțite în litere individuale, iar în texte sunt plasate diverse efecte, imagini și videoclipuri.

Capacitățile tehnologice mai mari și deciziile mai îndrăznețe conduc la creșterea diversității în tipografia web.

Fonturi geometrice

Fonturile geometrice sans-serif au devenit foarte populare, precum clasicele Futura, ITC Avant Garde, Proxima Nova, sau cele disponibile în biblioteca Google - Poppins sau Montserrat. Aceste fonturi sunt mult mai expresive decât serif-ul neo-sans „invizibil”. Un caracter mai „agresiv” și mai expresiv al unui site web poate fi obținut prin utilizarea unei grosimi mai mari, ca pe site-ul destul de vechi hugeinc.com, dar iată exemple mai noi: sequence.co.uk, startuplab.no sau www.protest.eu .

Fonturi serif

Foarte des, fonturile serif sunt folosite nu numai pentru textul corpului, ci și pentru titlurile mari. Cele decorative sunt folosite mai ales des, precum cele de pe duhaihang.com sau jennyjohannesson.com. Alte fonturi populare includ cele legate de Bodoni sau Didot.

Fonturi monospațiu („mașină de scris”)

Utilizarea fonturilor proporționale, care sunt de obicei asociate cu mașinile de scris, este inovatoare. Acum pot fi văzute pe site-uri precum admirhadzic.com, cuberto.com sau designembraced.com.

Combinație de fonturi contrastante

În 2016, era obișnuit să se îndepărteze de combinațiile blânde și armonioase de fonturi pentru un contrast mai pronunțat. Combinațiile expresive au fost îmbunătățite de contrastul ridicat al dimensiunilor textului. Fonturile mari și decorative au fost asociate cu cele geometrice simple, la fel cum titlurile geometrice au fost asociate cu fonturi serif în textul conținutului.

Tipografie uriașă ca parte a imaginii principale

Un lucru foarte mișto și obișnuit a fost utilizarea unor dimensiuni foarte mari de text pe imaginile principale. Acest lucru a creat un contrast foarte puternic între titluri și restul conținutului. Exemple pot fi văzute pe oursroux.com, femmefatale.paris sau monsieurcaillou.com.

Uneori, ca decor, literele sunt folosite la început, precum coretinfardeau.fr sau nurturedigital.com.

Un prim exemplu al celor de mai sus este jennyjohannesson.com, care folosește calitățile decorative ale fontului serif Goku.

Efecte suplimentare aplicabile tipografiei

Se poate observa o integrare puternică între tipografie și imagini, videoclipuri și animații. Secțiunile individuale sunt conectate - tipografia interacționează atât cu fundalul, cât și cu alte elemente. Plasarea aleatorie a tipografiei pe o imagine întunecată este de domeniul trecutului. Astăzi, designerii construiesc relații interesante între toate elementele, împletesc tipografia în fundal, o animă etc.

Litere mari în texte

Când mi-am început călătoria în design web, aveam un vechi obicei de a folosi dimensiunea fontului 10, pe care l-am preluat când lucram în tipărire. Cu toate acestea, mi-am dat repede seama că pe web dimensiunea optimă de citit este 14.

În zilele noastre, se observă că designerii folosesc fonturi mult mai mari, mai ales când vine vorba de fonturi serif.

Vino în partea întunecată

În 2016, designerii au folosit culori diferite. Dar puteți observa o tendință spre alegerea tonurilor închise.

Tendința de a crea site-uri web complet albe devine din ce în ce mai puțin populară și face loc variațiilor, texturilor și modelelor gri. Acum este destul de comun să se creeze site-uri mai întunecate, unde negrul sau o gradație a acestuia umple fundalul și creează o dispoziție ușor întunecată, grotesc.

În ciuda acestui fapt, este dificil de prezis cum va crește această tendință pe parcursul anului. Culorile, totuși, fac parte din identitatea vizuală a mărcilor, așa că este greu de așteptat ca acestea să își schimbe fundamental comunicarea pe baza exclusivității popularității anumitor tendințe.

Rezuma

2017 promite multe perspective interesante, dar există și câteva pericole la orizont.

Personal, mă tem că mulți designeri web pot fi puțin prea încrezători atunci când vine vorba de lucrul cu Canvas. Adăugați la acestea noi tendințe și veți obține o mulțime de site-uri web strălucitoare și obscure pentru un public larg.

De asemenea, sunt puțin îngrijorat de faptul că multe dintre creațiile de astăzi nu vor funcționa corect pe toate browserele și dispozitivele mobile. Am avut impresia că ne-am întors la punctul de plecare. Ne aflăm acum într-o situație similară cu vremurile în care Flash, în ciuda faptului că a condus internetul, a fost acuzat de lipsa de reacție și cerințele ridicate de conexiune la Internet.

Un alt lucru care mă sperie este faptul că noile tendințe spre „deconstrucție” vor fi imposibil de aplicat clienților comerciali, sau pur și simplu nu se vor potrivi cu profilul lor de comunicare. (Site-urile web guvernamentale sau bancare nu pot fi aglomerate).

Mă întreb cât de mult va dura până când noile tendințe vor lua loc pe piața comercială. Este de remarcat faptul că marea majoritate a site-urilor web pe care le-am folosit ca exemple au fost create pentru agenții, designeri și industria creativă. Aceste site-uri își stabilesc adesea propriile reguli și sunt de obicei înaintea curbei în comparație cu alte industrii. Uneori, tendințele necesită mult timp pentru a deveni populare într-o nișă și a pătrunde pe piața comercială. Apoi forma lor este netezită puțin pentru a se potrivi tuturor.

În ciuda tuturor acestor lucruri, cred că 2017 arată foarte promițător când vine vorba de web design. A spune că epoca minimalismului se apropie de sfârșit ar fi prea mult, dar cu siguranță este în curs de schimbări și dezvoltare.

Minimalismul va deveni mai complex și mai detaliat. Site-urile web din acest an vor folosi din ce în ce mai mult Canvas. Vom vedea mult haos, varietate de forme și expresie în proiectele viitoare. Aceasta este o veste bună pentru designerii care s-au săturat de stilurile minimaliste de design Flat, Material sau Metro.

Un bun proprietar de site web lucrează în mod constant pentru a-l îmbunătăți. În această activitate, el trebuie să se bazeze nu numai pe analiza audienței sale, pe datele de analiză web și pe recenziile clienților, ci și pe tendințele din industrie. Pentru că există multe lucruri utile în tendințe care pot îmbunătăți interacțiunea clienților cu site-ul. Dar tendințele trebuie aplicate cu atenție și înțelepciune. Alegeți doar cele care sunt potrivite pentru rezolvarea problemelor actuale ale site-ului și pentru dezvoltarea afacerii.

Prin urmare, în acest articol nu doar am furnizat o listă cu tendințele de design web, dar am făcut și recomandări pentru aplicarea acestor tendințe pe site-ul dvs.

1. Utilizabilitatea va deveni o marfă.

Un exemplu de îmbunătățire a gradului de utilizare a site-ului http://www.telemirspb.ru/

Respectarea principiilor de bază de utilizare ajută site-urile web să atragă mai mulți clienți și să reducă numărul de apeluri de asistență. Din ce în ce mai multe companii oferă audituri de site-uri web, deoarece există o cerere pentru găsirea erorilor pe site. Obiceiul de a face cumpărături și a comanda servicii prin internet crește cererea de site-uri convenabile.

Din păcate, mulți își creează site-uri web și apoi vin la noi cu rușinea creată. Este important să vă gândiți în avans la procesul de interacțiune cu resursa: ce secțiuni vor fi în prima versiune și care vor fi adăugate mai târziu. Este imposibil să planificați totul, dar navigarea preplanificată va economisi timp și bani pentru îmbunătățirile viitoare. De asemenea, alegeți cu atenție motorul pentru site-ul dvs. Nu ar trebui să alegeți un motor de blog (de exemplu, WordPress) dacă intenționați să vindeți ceva pe site sau să creați pagini de produse/servicii.

Dacă lucrezi într-un mediu extrem de competitiv, înțelegi cât de important este să te diferențiezi de concurenții tăi.

De aceea, atunci când plănuiți să creați un site web sau să îmbunătățiți unul existent, trebuie mai întâi să priviți interfața prin ochii clientului și să încercați să preziceți problemele pe care utilizatorul le poate întâmpina.

2. Textele lungi vor dispărea

Să fim sinceri cu noi înșine: nimeni nu citește texte lungi. Excepțiile includ cărțile și articolele. Atunci când un client dorește să comande un serviciu sau produs, este interesat de informații specifice: preț, principalele caracteristici ale conținutului produsului/serviciului, condițiile/termenele de livrare. Informațiile succinte și structurate economisesc timp clientului și îl încurajează să comande. Mai mult, dacă clientul compară mai multe site-uri, atunci cea mai concisă descriere va câștiga cu siguranță.

De asemenea, textele lungi sunt incomod de vizualizat de pe dispozitivele mobile, pe care aproape toată lumea le folosește. Conform statisticilor globale, în octombrie 2016 numărul utilizatorilor de telefonie mobilă a devenit mai mare decât cei de desktop.

Uitați-vă la audiența site-ului dvs., de exemplu, în Yandex.Metrica în raportul Rezumat → Tip de dispozitiv și vedeți ce procent de clienți provin de pe telefoane și tablete. Ține cont de acest public atunci când postezi conținut.

Adăugați animație pe site-ul dvs. cu înțelepciune. Trebuie să fie cât mai precis și rapid posibil. Mărirea unei imagini atunci când dați clic pe ea, indicatorii de progres în așteptarea rezultatelor pe site, o fereastră pop-up care apare la adăugarea unui articol în coș, schimbarea culorii butoanelor și a linkurilor după clic sunt cele mai comune microinteracțiuni care cu siguranță vor ajutați-vă utilizatorii.

6. Utilizarea cinemagraphs sau a imaginilor „în direct”.

Videoclipurile cu ecran lat au fost înlocuite cu cinemagraphs - imagini în care se mișcă un singur element. Cel mai bine este să le plasați pe primul ecran al paginii pentru a atrage atenția utilizatorului și a crea un efect wow.

Dacă alegeți un astfel de gif care să se potrivească cu tema site-ului, va arăta foarte tare. De exemplu, puteți face o fotografie live a produsului principal și o puteți plasa pe pagina de pornire sau pe bannere de promovare.

În Rusia, cinemagrafele sunt utilizate în principal în rețelele sociale, așa că dăm exemple de site-uri străine - un site pentru protecția apei și închirierea de mașini.

7. Evitați fotografiile de stoc „tipice”.

Sperăm că tot felul de oameni mici, fete în căști și fotografii cu familii zâmbitoare vor dispărea de pe site-uri. Exemplu de imagini stoc:

9. Mobile First

Esența acestei abordări este că atunci când proiectați un site web, trebuie să vă gândiți la modul în care va fi afișat pe dispozitivele mobile. Au fost scrise multe articole și cărți pe această temă, de exemplu, vă recomandăm să citiți „Mobile First” de Luke Wrobleski.

După cum am menționat mai sus (vezi punctul 2), traficul mobil este în creștere și există chiar și utilizatori care nu au experiență desktop. De aceea, pentru a nu pierde clienți, vă recomandăm să vă optimizați site-urile pentru dispozitive mobile.

Articolul enumeră doar cele mai elementare tendințe. Să vedem ce ne așteaptă anul acesta. Dacă observați și câteva tendințe și sunteți sigur că se vor dezvolta, scrieți în comentarii, vom discuta cu plăcere. Și dacă te îndoiești că designul site-ului tău web este la zi sau ai citit articolul și ai găsit elemente învechite, fii atent la serviciu

În noaptea de Revelion, cineva spune averi folosind zaț de cafea și își aruncă papucii peste umăr. Iar designerii încearcă să cerceteze viitorul și să identifice tendințele care vor deveni tema principală a anului 2017. Să încercăm și noi. Ne vom baza nu doar pe gust și pe faptul că „a spus directorul artistic”, ci și pe analiză.

1. Videoclipul este un element funcțional

Textele sunt prea dificile, trebuie să te concentrezi. Pozele nu au caracter informativ. Iar video este tipul de conținut pe care utilizatorul modern de internet este gata să-l consume și să-și plesnească buzele. Și când îi spui utilizatorului o poveste - de exemplu, cum funcționează un proces complex de dezvoltare a unui site web - folosește-o. Filmează și arată cum un analist realizează prototipuri și un designer desenează machete. Cufunda utilizatorul în poveste și răspunde la întrebările pe care le-ar putea avea.

Și nu mai împinge videoclipuri peste tot acolo unde clientul cere ceva uluitor în limita bugetului. Video pentru frumusețe - speranța ruptă a utilizatorului. Se uită și speră că îi vor arăta ceva util, îi vor spune o poveste. Dar nu. Prin urmare, ca element decorativ al designului web care nu îndeplinește o funcție utilă, videoclipul rămâne în 2016.

Da: Un videoclip care răspunde la întrebările utilizatorilor și rezolvă problemele site-ului.
Nu: Videoclipul este în fundal pentru că este frumos și toată lumea o face așa.

2. Cinemagrame în loc de videoclipuri

Folosiți cinemagrame. Sunt mai interesante decât imaginile statice, dar nu dau speranțe false utilizatorilor, cum ar fi videoclipurile fără poveste sau scop.

Cu grija! Cinemagramele sunt teribil de lipicioase.

3. Grafica cu fonturi

O altă alternativă la videoclipuri și imagini este grafica cu fonturi. Atât decorează site-ul, cât și îl face mai informativ. Principala preocupare aici este conținutul de calitate. Dar asta este o cu totul altă poveste.

4. Icoanele sunt principalul element decorativ

De ce ai nevoie de imagini, videoclipuri și răsuciri de font, dacă poți adăuga „wow” pictogramelor care vor fi deja pe site? Serios, adaugă niște animație personalizată și numește-o o zi. Vei fi cel mai la modă.

5. Infografice lipicioase

Problema utilizatorilor este că devin mai puțin harnici. Și uituci ca peștii aurii - au mers pe site, apoi telefonul a clipit (oh, o alarmă falsă - doar o sclipire de lumină solară), s-au întors la monitor și nu-și mai amintesc ce făceau aici. Și ei pleacă.

În fiecare an, problema se înrăutățește. Prin urmare, sarcina designerului este să atragă utilizatorul și să-l forțeze să interacționeze cu conținutul, chiar dacă este vorba de statistici plictisitoare. Mai ales (!) dacă acestea sunt statistici plictisitoare.

Animați-l, pictați-l în culori strălucitoare, forțați utilizatorul să interacționeze cu el - faceți totul pentru a trage utilizatorul înăuntru și nu-l lăsați până la sfârșitul paginii.

6. Navigare combinată

O tehnică care câștigă popularitate - care combină derularea orizontală și verticală - va lumina și viața de zi cu zi a utilizatorului, îl va interesa și îl va forța să interacționeze atent cu site-ul.

7. Evitarea meniului de hamburger

În 99,9% din previziunile de web design pentru 2015 și 2016, autorii promit că anul acesta designerii vor abandona cu siguranță meniul de hamburger. Pur si simplu. Ei bine, să susținem tradiția și să mai spunem: în 2017, meniul de hamburgeri nu va fi în tendințe, nu face asta, ugh!

Problema cu pictograma cu trei bare este că nu este intuitivă. Este recunoscut de kalachi experimentați care au interacționat deja cu el și știu ce se ascunde în spatele simbolului. Dar pe internet apar mai mulți nou-veniți: atât mormoloci foarte mici, cât și oameni în vârstă. Și pictograma meniului de hamburger nu le este familiară sau de înțeles. Ei pot afla doar ce ascunde ea și unde naiba este meniul după ce au trecut printr-o experiență dureroasă.

Să fim realiști: este puțin probabil să renunți complet la meniul de hamburgeri. Dar înainte de a-l prinde, căutați o posibilă alternativă pentru fiecare proiect.

studio-spoon.co.jp

8. Încadrați în jurul site-ului

O soluție populară nu este să întindeți site-ul pentru a umple întregul ecran, ci să îl plasați într-un cadru îngrijit. Este frumos și există spațiu liber care poate fi folosit pentru navigare (de ce nu, deoarece meniul de hamburger este pe moarte).

teletype.online

9. Mai multe emoji

Cu cât utilizatorul depune mai puțin efort pentru a reacționa, cu atât va fi mai dispus să facă acest lucru. Și nu au venit cu reacții mai simple decât emoji-urile. Deocamdată, pe site-uri nu poți decât să apreciezi conținut, maximul este să dai un Facebook Emote. Dar este timpul să treceți la emoji, colegi designeri.

10. Design material

Da, el este încă cu noi.

11. Mai întâi mobil

Sunt din ce în ce mai mulți utilizatori care vizualizează site-uri de pe telefoanele mobile, motiv pentru care abordarea Mobile First este mai ușor acceptată de clienți în fiecare an. Nu mai este considerat un experiment ciudat, ci o metodă care se justifică. Așa că pregătește-te pentru o avalanșă de site-uri de același tip, dar atât de convenabile pentru telefoanele mobile.

12. Mai multe micro-interacțiuni

Site-urile web vor absorbi mai multe funcții din aplicațiile mobile. În 2017, vor exista micro-interacțiuni uimitoare care vă vor face să tremure degetele. Ca o inimă pe Twitter - ei bine, este o operă de artă! Vreau să-l apăs pentru totdeauna. Vor fi mai multe din acestea în Mobile First și proiectele clasice.

13. CTA-urile sunt și mai intruzive

Designerul stârnește frumusețea de dragul frumuseții doar pe masă și pe Dribbble. În alte cazuri (în cele pentru care se plătesc bani), marketerii îi respiră greu la ureche, care au nevoie de ceva mai luminos aici și de un buton mai mare acolo. Se pare că în 2016 a existat un punct de cotitură și o regândire a acestor cerințe - așteptați-vă la blocuri CTA mari, suculente, atrăgătoare în 2017. Astfel încât marketerii nu au nimic de adăugat la ele.

strv.com

14. Nostalgia anilor 80

Pe internetul rafinat, designerilor le este dor de pixelii lămpii cu cap de chibrit, de sunetul de opt biți al set-top box-urilor și de zgomotul televizoarelor cu tub. Și compensează dorul lor pentru anii 80 și 90 în designul site-urilor web. Fii în tendințe - adaugă culori acide, interferențe și glitch-uri proiectelor tale.

retrominder.tv

15. Evitați fotografiile de stoc

Imaginile de stoc au pus deja dinții pe margine, serios. Meniul de hamburgeri este mai rău și este mai ușor să le înlocuiți. Așa că să-l filmăm pe al nostru.

Secolul 21 este în curte, kamon. Telefoanele au devenit astfel încât să facă fotografii de înaltă calitate. Prin urmare, nu este o problemă să filmați angajații sau procesul de lucru chiar acum pe telefon. Principalul lucru este timpul și dorința de a face un proiect bun.

16. Verzi

Băieții de la Pantone cred că culoarea anului 2017 este această mică verdeață. Să ascultăm și să-l adăugăm pe lista noastră.

17. O nouă abordare a prototipurilor

Indiferent de design minunat pe care îl desenezi, principalul lucru este să-l prezinți în așa fel încât clientul să se îndrăgostească. Sau cel puțin ai văzut-o așa cum o vezi tu.

Un aspect static abia poate face față acestei sarcini, așa că în 2017 trebuie să vă îmbunătățiți abilitățile de prezentare. Pentru ca imediat, înainte de amenajare, clientul să vadă toate stranele inventate și să nu le imagineze în minte. În caz contrar, își va imagina ceva greșit, creând așteptări pe care dezvoltatorii nu le vor putea justifica.
Acum nu este comme il faut ca un designer să deseneze și să arate pur și simplu o imagine. Trebuie să fiți capabil să gestionați fie unul dintre instrumentele de prototipare pentru a crea un șablon interactiv, fie să vă îmbunătățiți la animație.
Iată arsenalul dumneavoastră pentru anul care vine, colegi. Dar nu te certa cu un client care vrea un videofon. Nu împinge elemente pixeli și emoji-uri acolo unde aveți nevoie de comerț electronic curat și minimalist. Și nu bombardați clienții reticenți de pe Skype cu link-uri către acest articol. Folosiți tendințele cu înțelepciune - sau nu le folosiți deloc. Oricum, peste trei ani vor fi complet actualizate :)

Liniile, culorile, lumina și umbra, spațiul și formele sunt elementele care alcătuiesc un tablou. Fiecare epocă a avut propriile sale tendințe în reprezentarea lumii. Web designerii sunt la fel ca artiștii, doar că ei creează în format digital. Și dacă tendințele în artă nu s-au schimbat atât de des, atunci designul web se transformă de la an la an. Vom încerca să alcătuim un ghid pentru tendințele de design grafic și să anticipăm cum se vor schimba site-urile web în 2017. Puteți citi despre tendințele de design web din 2018.

Deci, 14 se transformă pe drumul către o interfață la modă:

1. Concentrați-vă pe conținut

Ce este mai important: conținutul sau designul paginii. Răspunsul este simplu - designul ar trebui să prezinte conținutul în mod favorabil. Designerii serviciului WebFlow (constructor de site-uri web) propun să pună capăt luptei pentru supremație în 2017, acordând preferință conținutului. Un utilizator vizitează un site web în căutarea unui răspuns la o întrebare, fie că este un produs, un serviciu sau un articol util. Sarcina designerului web este de a prezenta conținutul cât mai convenabil posibil pentru o persoană.

2. Evitarea „hamburgerilor”

Pictograma de meniu mică și convenabilă sub formă de trei dungi, care a fost supranumită „hamburger” pentru asemănarea cu straturile de fast-food, își pierde treptat din popularitate. Este folosit prea des. În 2017, sunt încurajate experimentele cu navigarea și aranjarea neobișnuită a secțiunilor de meniu, de exemplu pe un cadru în jurul site-ului.

3. „Design bazat pe carduri”

Designul web de carduri a cucerit rapid internetul. Avantajele acestei metode de proiectare:

• amplasarea convenabilă a blocurilor pe site;
• prezentarea vizual avantajoasă a conținutului;
• adaptabilitate pentru dispozitivele mobile.

La întrebarea: dacă designul cardului ar trebui sau nu ar trebui să existe în 2017, nu există un răspuns unanim. Va fi folosit pentru că și-a dovedit deja eficacitatea.

Dar designul bloc își pierde treptat poziția de favorit din cauza naturii „aglomerate” a unei astfel de interfețe. Minimalismul și designul plat rămân populare. Elemente de navigare clare și convenabile fără manevre inutile, utilizarea doar a câtorva culori în design sunt tehnici testate în timp.

4. Plasă ruptă

Această tendință încurajează designerii să gândească în afara cutiei. Încercați să utilizați o grilă non-standard pe site - lăsați blocurile să se „suprapună” puțin unele pe altele și lăsați textele să depășească limitele obișnuite.

Originalitatea este mereu la modă. Designerii occidentali au încercat deja machete non-standard și noi abordări ale designului grafic. Cele mai îndrăznețe soluții pot fi implementate folosind modulele Flexbox și CSS Grid.

5. Fonturi neobișnuite atrăgătoare - părtinire tipografică

Fontul mare este unul dintre elementele principale ale designului web de câteva zile. Tendința se va consolida doar în noul an. Tendința sunt inscripțiile scrise de mână și icoanele stilizate ca fiind realizate manual.

O completare excelentă la designul site-ului web ar fi grafica cu fonturi (dacă este cazul).

6. Design receptiv

Versatilitatea site-urilor pentru dispozitive cu ecrane mari și mici nu mai este o nouă tendință. Abordarea „în primul rând pe mobil” este încă relevantă în 2017. Pe lângă capacitatea de adaptare la gadgeturi mobile, în viitorul apropiat site-urile ar trebui să se adapteze unui anumit utilizator în funcție de:

• vârstă;
• aptitudini (competențe).

De exemplu, fonturile, luminozitatea culorilor, navigarea se vor schimba în funcție de cine a vizitat site-ul: un pensionar, un preșcolar, un novice pe internet sau un utilizator încrezător. Acest lucru va deveni posibil datorită dezvoltării metadatelor.

7. Culori

Culorile monotone bogate, nuanțele și semitonurile lor au trecut de la tendințele de anul trecut la anul acesta. Designerii continuă să folosească degrade și să creeze tranziții interesante. Apropo, dacă nu vă puteți decide cu privire la alegerea culorii, aruncați o privire mai atentă la „Greenery” la modă.

Seamănă cu verdeața proaspătă de primăvară și va contribui la adăugarea de accente de culoare site-ului. Experții de la Pantone Color Institute au numit-o culoarea anului 2017.

8. Infografice

Tehnica nu este nouă, dar eficientă. Cu ajutorul infograficelor, orice statistică de pe site este transformată într-o imagine de înțeles vizual, cu conținut interesant.

9. Animații

Paginile statice sunt plictisitoare. Este mult mai interesant pentru utilizator să „plimbă” un site cu pictograme animate. Atrageți atenția prin animație asupra acelor elemente care vă sunt benefice, de exemplu, la butonul „Cumpărați”.

Utilizați microinteracțiuni astfel încât utilizatorul să vadă un răspuns la clicuri, tranziții și confirmări de pe site. Atunci acțiunile mecanice vor deveni interactive și atractive.

10. Fotografii și videoclipuri de fundal

Animația este bună, dar fotografiile și videoclipurile de fundal în format larg pentru designul site-ului web sunt și mai bune. Videoclipul adaugă dinamică unei resurse web și vă permite să cufundați utilizatorul într-o anumită poveste, să priviți „în culise” proceselor interne ale unei companii sau ale unei mărci. Povestirea în web design este încă relevantă. Fotografie - ilustrează, creând o atmosferă.

Dacă te-ai săturat de aceste elemente, folosește cinemagraphs (o simbioză de fotografii și videoclipuri). Într-o astfel de imagine, doar un element se mișcă continuu fără probleme, ca și cum o parte din fotografie prinde viață.

11. Opriți „stoc”!

Fotografiile de stoc se găsesc în fiecare colț al internetului, iar acest lucru face ca un site să-și piardă personalitatea. În 2017, web-ul dă preferință imaginilor unice.

12. Derularea +

Defilarea a câștigat popularitate datorită gadgeturilor mobile, care fac „defilarea” mai convenabilă. Dar mulți oameni sunt enervați de faptul că nu pot ajunge în partea de jos a paginii. Printre tendințele anului 2017 se numără combinația de defilare și navigare pe pagină. Permiteți utilizatorului să aleagă cum să vizualizeze conținutul.

13. Defilare paralaxă

În 2017, tehnica paralaxei (mișcarea la viteze diferite ale fundalului și prim-planului) va câștiga un nou suflu - dezvoltarea unor tehnici mai complexe cu mai multe straturi. Experimentează cu paralaxa, captivează persoana care vizitează site-ul cu elemente interactive. Dar nu exagerați pentru a nu deruta utilizatorul.

14. Panorame 3D

Panoramele la 360° sunt o altă modalitate de a demonstra în mod eficient un produs utilizatorului sau de a „oferi” vizitatorului posibilitatea de a fi prezent virtual într-un loc, de exemplu, într-un birou sau un hotel al companiei.

Acestea sunt principalele tendințe de design web pentru 2017. Dar nu te concentra doar asupra lor. Experimentează, învață de la colegi cu experiență, iar apoi site-ul tău va deveni original și ușor de înțeles pentru toți utilizatorii. Și suntem mereu pregătiți pentru asta!