Tendințele în design web vin și pleacă. Unii zăbovesc pentru o perioadă ceva mai lungă de timp, alții se transformă în ceva nou, iar alții dispar pentru totdeauna.
Ce ne rezervă anul viitor? Echipa awwwards.com a încercat să identifice principalele tendințe...
Vă avertizez imediat că nu trebuie să vă așteptați la niciun fel de revoluție. Tendințele majore care au dat tonul în 2015 vor continua să domine.
Evoluția designului responsive
Cu doar câțiva ani în urmă, crearea unui site web responsive era esențială pentru a funcționa pe desktop-uri, tablete și smartphone-uri. În timp ce fiecare platformă are propriile provocări unice, tabletele și smartphone-urile au sisteme de interacțiune foarte familiare, iar principala provocare este asigurarea faptului că conținutul este de dimensiune suficientă și ușor de navigat.
Designul plat va cuceri fiecare pixel
Dar la smartwatch-uri, de exemplu, chiar și sistemul de navigație trebuie regândit cu atenție pentru a ține cont de modul în care folosim dispozitivul. În timp ce unii susțin că există probleme cu designul plat în domeniul interfețelor cu utilizatorul, consensul general este că este o tehnică benefică pentru design web.
Recent, am observat o creștere a popularității designului responsive. Și acesta nu a fost doar un capriciu al designerilor - circumstanțele s-au dezvoltat, totul trebuie făcut pentru a se asigura că site-ul este afișat optim pe dispozitive mobile.
Alte tendințe decurg lin din aceasta, cea principală și cea mai importantă. Să le aruncăm o privire mai atentă.
Totul este despre modul în care consumăm conținut online și tehnologia din spatele difuzării paginilor web. Designul plat are principii minimaliste, care, la rândul lor, au ca rezultat site-uri web slabe și necomplicate, rapide și concentrate pe conținut. Nu este doar atrăgător din punct de vedere estetic, ci și foarte practic, permițând vizitatorilor să interacționeze cu ușurință cu conținutul și, de asemenea, să se bucure de el fără distragerea atenției.
Nu doar textul va deveni mai mare pe Internet: și imaginile! Anterior, au existat restricții importante în ceea ce privește dimensiunile imaginilor din cauza limitate lățime de bandă, dar zilele astea este din ce in ce mai putin. Drept urmare, imaginile mari au preluat web-ul.
Distribuție de șabloane de UI
Unul dintre efecte secundare designul adaptiv este că toate site-urile devin oarecum asemănătoare între ele. Dar nu doar designul receptiv este de vină. Construcția de site-uri WordPress și piața în creștere rapidă a șabloanelor gata făcute au avut și ele o mână în acest sens.
Dar asta nu este neapărat un lucru rău. Fie doar pentru că am schimbat modul în care folosim Internetul, ceea ce a condus la popularitatea modelelor comune de proiectare a interfeței cu utilizatorul. Nu există niciun motiv real pentru a reinventa roata. Șabloanele de interfață ar trebui să le ofere utilizatorilor experienta buna, fii simplu și de înțeles.
Vor apărea tehnici fascinante pentru scalarea flexibilă, desenarea culorilor dominante pentru fundal și optimizarea imaginilor din ce în ce mai mult. Filtrele de suprapunere neclare și colorate vor permite textului să „plutească deasupra” fără a compromite utilizarea.
Efecte de defilare și paralaxă
Utilizarea derulării în loc de a face clic ca metodă de navigare de succes. În primul rând, necesită mai puțin timp de încărcare a paginii și, cel mai important, facilitează crearea de tranziții fluide de la un punct la altul fără actualizări disonante. Informațiile curg mereu.
Iată câteva modele cu care ar trebui să fii familiarizat:
- meniu de hamburger. Deși mulți oameni critică acest șablon, utilizarea sa pe scară largă face ca funcția să fie ușor de recunoscut pentru utilizatori.
- înregistrarea contului Acum se realizează în două moduri: fie folosind butonul de înregistrare, fie prin rețelele sociale. Aceste două opțiuni sunt convenabile și ușor de înțeles pentru utilizatori și îi salvează de acțiunile inutile și confuze.
Ați auzit conversațiile din grafica web?
Suntem oameni foarte vizuali, avem tendința de a absorbi mai bine informația atunci când o vedem grafic, ceea ce a dus la popularitatea infograficelor. Creăm infografice ca o modalitate simplă de a transmite cantități mari de informații cu rate ridicate de retenție. La fel ca infograficele, site-urile web transmit cantități mari de informații, dar includ elemente care permit utilizatorului să interacționeze cu informațiile. Sunt mai atrăgătoare din punct de vedere vizual decât infograficele și sporesc semnificativ atenția utilizatorilor.
- defilare nesfârșită. Cazarea tuturor elemente importanteîn vârf este momentan irelevant. În plus, aproape toată lumea este obișnuită să defileze datorită dispozitivelor mobile. Tehnica funcționează mai ales bine pentru site-urile care doresc să atragă utilizatorii prin povești și puteți simula un site cu mai multe pagini împărțind pagina în zone.
Vă puteți aștepta ca acest lucru să devină popular și să devină o componentă de bază a designului web modern. Tendințele web vin și pleacă, dar ingeniozitatea creativă a designerilor este cea care determină schimbări în modelele de design web. Designerii sunt responsabili pentru transformarea ideilor în tendințe și a tendințelor în modele.
Tendințele de design enumerate aici devin rapid obișnuite în designul web și vor câștiga și mai multă recunoaștere în anul viitor. Dar calm, nu vom stinge apartamentul. Să ne uităm doar la schimbările bune care s-au petrecut de anul trecut și despre care putem prevedea că vor fi introduse anul acesta. Microinteracțiunile sunt animații subtile care interacționează într-un fel cu utilizatorul.
- design card. Apărut pentru prima dată pe Pinterest, șablonul de card s-a răspândit instantaneu pe internet. Acest lucru se datorează faptului că hărțile vă permit să scanați rapid informațiile și să găsiți ceea ce aveți nevoie. Fiecare card reprezintă un singur concept. Acest design face mult mai ușoară organizarea conținutului pentru afișare optimă pe diferite dispozitive.
Pentru a fi mai clar, microinterpretarea funcționează ca feedback din acțiunea sau sarcina pe care tocmai ați făcut-o. De exemplu: acțiunea unui buton atunci când este apăsat, care interacționează cu diferite mișcări. Observa ce se intampla cand...
Bine ați revenit la gradient
Aceste interacțiuni mici vă fac navigarea și experiența mai plăcută și mai naturală. Da, gradientul a revenit. Era designului plat se termină, iar gradientul revine. În funcție de modul în care este aplicat gradientul, îți atrage atenția. Este adesea subtil pentru ochi. Merită să investești în această tendință.
- imagini de fundal mari. Imaginile HD sunt una dintre cele mai rapide moduri de a atrage atenția unui utilizator. Datorită progreselor în lățimea de bandă și compresia datelor, utilizatorii nu vor avea de suferit din cauza timpilor de încărcare lenți.
Acesta este ceva care a fost adoptat de marile branduri unde minimalismul este dus la un nou nivel. Aceasta face parte din el: nume mari și de rezervă și pictograme mai simple și mai universale. Dar nu uitați: creați design minimalist, dar gândiți-vă întotdeauna la experiența utilizatorului. Elemente de reducere nu este întotdeauna cea mai buna solutie, totul depinde de revendicările reale pentru fiecare proiect.
Inovații în defilare și Parallax
Gif a fost foarte din anii 90 și considerat neplăcut pentru o lungă perioadă de timp. A fost o febră zilele astea, mai ales în rețelele sociale, oferindu-ne o nouă modalitate de a exprima emoțiile. După cum se spune: „o imagine valorează cât o mie de cuvinte”. Această caracteristică este o reimaginare a navigației. Adică, o tehnică foarte bine acceptată și utilizată în dispozitivele mobile, care are un potențial mare de a atrage utilizatorii, deoarece ajută la absorbția rapidă a mai multor conținut fără nicio întrerupere.
După cum puteți vedea, toate tendințele pe care le-am putut observa în ultimul an rămân relevante.
Animație bogată
Animația este folosită din ce în ce mai mult și face experiența utilizatorului mai interactivă și mai interesantă.
Paralaxul este o tehnică care permite prim-planului și fundalului să se miște cu viteze diferite, creând iluzia de adâncime și imersiune. Dacă este aplicat corect, va avea un aspect frumos, dinamic și clar. Și vă permite să spuneți o poveste utilizatorului folosind doar grafică.
Contrazice toate metodele de proiectare care caută să înfățișeze realitatea pe ecran; umbrele, degradeurile, reliefurile, texturile realiste sunt lăsate în urmă. Și prețuiește simplitatea, aspectul clar, estetica clasică și expresia „mai puțin este mai mult”. De ce funcționează acest concept?
Cu toate acestea, nu îl puteți aplica oriunde doriți. Animația ar trebui să servească unui scop și nu doar decor.
Animația poate fi considerată din punctul de vedere a două grupuri:
Animații la scară largă. Ele sunt folosite ca instrument de interacțiune principal, au un impact mare asupra utilizatorilor și includ efecte precum derularea paralaxă și notificările toast.
Principiile designului plat sunt o ierarhie de informații și elemente care fac experiența utilizatorului mai ușor de înțeles. Interfața este planificată pentru funcționalitate, nu doar pentru un site web drăguț, astfel încât site-urile care folosesc această estetică primesc feedback pozitiv, deoarece sunt ușor de utilizat.
Imaginile simple transmit mesaje mai rapid și mai eficient decât ilustrațiile detaliate. Pictogramele și butoanele cu culori solide atrag mai multă atenție și își transmit mai ușor sensul, fără a necesita explicații suplimentare. Folosiți elemente cu forme simple, cum ar fi dreptunghiuri și cercuri și aldine pentru butoane.
Mici animații. Acestea includ contoare, instrumente de hover și bare de încărcare și nu necesită nicio manipulare de către utilizator.
Vom descrie cele 7 cele mai populare metode de animație:
- se încarcă animația. Este folosit pentru a îmbunătăți timpul de așteptare pentru încărcarea unei pagini. De obicei popular pe paginile cu design plat. stil minimalist, precum și pe site-uri web cu o singură pagină.
Este important să știți cum să alegeți o paletă de culori care să nu părăsească aspectul sau să creeze contrast în timp ce evidențiază elemente de acțiune precum butoanele de cumpărare. În această estetică, tipografia este foarte importantă; ar trebui să fie îndrăzneți pentru a ieși în evidență, dar în același timp simple, curate și eficiente, coordonându-se cu restul aspectului. tastare sans serif - alegere buna, dar fonturile serif pot fi o opțiune dacă sunt bine folosite.
În comerțul electronic, imaginile de înaltă calitate sunt un mare diferențiere și sunt extrem de importante; atragerea atenției utilizatorului și contribuind la creșterea conversiei. Simplitatea estetică a designului plat permite imaginilor și butoanelor de acțiune să devină proeminente, mai degrabă decât să distragă atenția consumatorului.
Păstrați lucrurile așa simple și nu folosiți sunet suplimentar (chiar dacă acest lucru este la modă în ultima vreme). Vă rugăm să rețineți că aceste piese trebuie să se potrivească paleta de culoriși stilul general al site-ului dvs.
- navigare și meniu(NU derulează).
Deși premisa este „mai puțin”, este necesar să știi să folosești corect toate aceste elemente, așa că se recomandă ajutorul profesioniștilor deoarece este important ca aspectul să atragă consumatorul și să creeze o experiență grozavă de cumpărături. În plus, este extrem de important să vă cunoașteți publicul țintă, astfel încât site-ul să vă satisfacă nevoile.
Privind tendințele și evoluția industriei în sine, putem determina ce caracteristici vor fi prezente pe Internet de acum înainte. Crearea de conținut pentru internet este un domeniu complex, profesioniștii care lucrează în el trebuie să se actualizeze în mod constant. Tehnologia avansează, iar inovațiile majore și schimbările comportamentale pot însemna noi moduri de a crea și de a publica online.
Meniurile ascunse devin din ce în ce mai populare, mai ales în cazurile în care pot fi folosite pentru a economisi spațiu pe ecran.
- animații de tip hover folosit pe scară largă pentru a crea feedback când treceți mouse-ul peste un obiect.
- galerii și prezentări de diapozitive sunt într-un mod eficient pentru a afișa mai multe imagini fără a-i copleși pe utilizatori.
Cele mai multe tendințe pentru viitor apar din nevoile prezentului. Vedem că utilizarea smartphone-urilor pentru a depăși utilizarea computerelor desktop convenționale, popularizarea dispozitivelor smart wearable, realitatea virtuală, promovarea marketingului de conținut, toate aceste cazuri creează noi nevoi.
Mai jos sunt noi direcții care se așteaptă să se dezvolte pe Internet în viitor. Tipografia online este altceva. La fel ca orice tipografie vizuală web va trebui să se adapteze noilor dispozitive utilizate, tendința este că fonturile create pentru web capătă mai multă putere și fani, deoarece se pot adapta la diferite dimensiuni și rezoluții de ecran, precum și la imagini și vectori .
- animație în mișcare.
Ochii noștri sunt atrași în mod natural de mișcare, ceea ce îl face un instrument ideal pentru a atrage atenția utilizatorului. Mișcarea poate ajuta, de asemenea, la ierarhia vizuală și poate adăuga interes și intrigi.
Spre deosebire de modul în care privim materialele tipărite, tipografia online trebuie să-și urmeze propriile reguli, să urmeze o cale diferită pentru a o folosi mai bine pe ecran, în același mod în care se face deja pe hârtie. Conceptul de design responsive, adaptarea paginii la smartphone-uri și tablete ar trebui să capete mai multă importanță. Odată cu apariția ceasurilor inteligente IoT și a altor tipuri de ecrane și dispozitive, designul va trebui să se adapteze nu numai la dimensiunea ecranului, ci și la contextul de utilizare.
Site-urile trebuie să se adapteze la diferite dimensiuni și contexte de utilizare. Același produs va fi util pe o aplicație mobilă, sau pe un ceas sau într-o mașină, iar fiecare experiență va fi vizualizată diferit. Este deja o tendință în lumea designului de interfețe și ar trebui să câștige amploare, deoarece beneficiază ambele părți, designerii care creează și utilizatorii care accesează conținutul. Designul plat este simplu, adaptabil, ușor și face un site web mai ușor de operat, fiind în același timp simplu, fără a distra atenția cititorului și plăcut vizual.
- defilare. Derularea lină se bazează pe animație și oferă un control suplimentar utilizatorului, care poate determina ritmul în care se desfășoară conținutul site-ului.
- animație de fundal (video). Un fundal animat simplu poate fi adăugat la designul unui site web, dar ar trebui să fie folosit cu moderație, altfel poate distrage atenția utilizatorului.
Site cu toate imaginile în fundal. Odată cu dezvoltarea internetului și creșterea vitezei de conectare, ne putem aștepta la site-uri care utilizează imagini mari, de calitate premium. Acest stil va fi foarte asemănător cu ceea ce vedem deja în reviste și materiale tipărite, care nu au restricții care să limiteze resursele vizuale, aceste restricții dispărând și vom putea vedea întregul potențial al machetelor din ce în ce mai frumoase și captivante.
Utilizatorii de astăzi sunt mai familiarizați cu tehnicile de navigare, de exemplu, pe computer, mulți folosesc derularea mouse-ului sau un trackpad pentru a naviga prin pagini, ceea ce vă permite să creați site-uri în care conținutul este concentrat și afișat dinamic, cum ar fi efectele Parallax.
Microinteracțiunile sunt în jurul nostru tot timpul, începând cu oprirea alarmei de pe smartphone-ul nostru dimineața.
Fiecare dintre ele se face fără să se gândească mai bine. Probabil că ți-ai început ziua cu o micro-interacțiune. Opriți ceasul deșteptător de pe dvs telefon mobil, aveți de-a face cu interfața cu utilizatorul doar pentru un moment. Și tot mai multe dintre ele sunt implementate în programele și dispozitivele pe care le folosim.
Micro-interacțiunile ar trebui să apară în mod natural și aproape neobservate de utilizator. Ele sunt o parte importantă a aproape oricărui design digital. Este aproape imposibil pentru tine să creezi un site web sau o aplicație mobilă care să nu includă un element cu care utilizatorul trebuie să interacționeze.
Design material: o alternativă bogată la designul plat
Scopul Material Design este de a crea un design curat, modernist, care se concentrează pe UX.
Cu aspectul său minimalist, designul materialului are multe în comun cu o altă tendință în creștere - designul plat. Dar folosește adâncime și umbră, ceea ce îl face mai interesant și mai bogat.
Până acum am văzut că majoritatea proiectelor „tangibile” se limitează la proiectarea aplicației. Anul viitor, designul materialelor va fi folosit peste tot pe site-uri web.
Design receptiv
Designul web responsive a devenit incredibil de popular în ultimii ani, datorită creșterii utilizării web-ului mobil.
Este sigur să spunem că designul responsive nu va merge nicăieri prea curând, deoarece reprezintă o modalitate relativ simplă și ieftină pentru companii de a construi un site web mobil complet funcțional.
Designul web responsive funcționează bine cu design-uri de card și plate.
Designul plat este aici pentru a rămâne
Designul plat a fost popular în ultima vreme și se potrivește perfect cu alte tendințe precum minimalismul, designul web receptiv și material.
Privind în perspectivă, este probabil să vedem următoarele tendințe în designul plat în 2016. Următoarele vin în prim-plan:
Umbre lungi. Ele aduc mai multă profunzime modelelor plate.
Scheme de culori vibrante. Șabloanele populare i-au determinat pe mulți designeri să înceapă să folosească mai multe culori strălucitoareîn proiectele tale.
Tipografie simplă. Fonturile simple ajută la menținerea textului lizibil și lizibil într-un design plat.
Butoane fantomă. Ele rămân funcționale fără a perturba deloc stilul general.
Minimalism vă permite să creați o interfață concisă și să scăpați de toate lucrurile inutile.
În loc de rezultate
După cum vedem, anul care vine nu ne va aduce practic nimic nou. Aceleași tendințe pe care le-am observat pentru mai mulți ultimii ani, rămân relevante. S-ar putea să vedem câteva forme noi - dar principalele tendințe rămân aceleași.
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/
Urmând principii de bază Utilizabilitatea 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 de prevăzut totul, dar navigarea pre-planificată va economisi timp și bani pentru îmbunătățiri în viitor. 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 de livrare/timpul de îndeplinire. 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.
Priviți audiența site-ului dvs., de exemplu, în Yandex.Metrica în raportul Sumar → 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. Ar trebui să fie cât mai precis și rapid posibil. Mărirea unei imagini 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 sa menționat mai sus (a se vedea 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. Iar 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 serviciul de redesign.
Ți-a plăcut articolul?
Da 178 Nu 16
Mulțumim, am făcut tot posibilul!
Și prietenilor tăi le va plăcea. Distribuie: