Ce design web este în tendințe acum? Aproape realitate vizuală. Caracteristici de utilizare a derulării lungi

Unele tendințe de design web se schimbă de la an la an, în timp ce altele rămân relevante pentru o lungă perioadă de timp. Iată o listă completă a tendințelor de design anul curent cu descrieri și recomandări de utilizare.

Dacă nu ești înaintea vremurilor, inevitabil vei rămâne în urmă.

Bine ați venit la Ghidul de tendințe în design web 2016!

Pe măsură ce descriem fiecare tendință, vă vom explica de ce funcționează și cum o puteți stăpâni personal. De asemenea, vom oferi peste 40 de exemple de site-uri web ale unor companii precum Intercom, Google, Beoplay, Sennheiser și altele.

Planul nostru de revizuire este următorul:

1. Introducere

2. Microinteracțiuni

4. Design minimalist

5. Hibrid de design plat și material

6. Animații suculente

7. Tipografie

8. Culori luminoase

9. Defilare lungă

10. Grafică HD

11. Ilustrații

12. Concluzii

Să începem fără alte prelungiri, explorând modul în care interacțiunile minuscule pot crea experiențe memorabile pentru vizitatori.

Microinteracțiuni

Esențial pentru designul aplicațiilor mobile este încadrarea microinteracțiunilor în fluxul de acțiuni mai mari. De obicei par atât de nesemnificative încât utilizatorii decid să le execute fără să se gândească deloc.

Activarea/dezactivarea notificărilor, schimbarea culorii unui buton atunci când este apăsat, notificări sonore care indică sosirea unui nou comentariu la fotografia dvs. sau altceva - toate aceste lucruri mici se adaugă la imaginea de ansamblu în ochii utilizatorului și formează impresia de utilizare aplicația.

Beneficiază de un design bun de micro-interacțiune

• Puteți antrena rapid utilizatorii să interacționeze cu produsul dvs.;
• Legătura dintre statut, schimbări și posibilitatea de a atrage atenția asupra anumitor domenii;
• Securitate feedback pe baza rezultatelor acțiunilor finalizate;
• Adăugarea de elemente plăcute care nu vor distrage atenția de la experiența principală de interacțiune cu produsul;
• Întărirea poziției mărcii cu exclusivitatea interfeței;
• Îndeplinirea așteptărilor utilizatorilor (micro-interacțiunile sunt norma pentru multe site-uri web și aplicații). Cu siguranță, vor fi așteptate și în produsul dvs.

1. Formați un obicei în rândul utilizatorilor.

Micro-interacțiunile sunt o componentă cheie pentru crearea de obiceiuri în rândul vizitatorilor. Acest proces constă din trei elemente:

• Un semnal (microinteracțiune) este un declanșator care inițiază o acțiune;
• Acțiuni repetitive - o procedură familiară utilizatorului;
• O recompensă este rezultatul finalizării unei acțiuni.

De exemplu, un dreptunghi roșu și o pictogramă albă (declanșator) pe Facebook indică prezența unui mesaj nou. Utilizatorul efectuează o acțiune de rutină făcând clic pe o pictogramă pentru a discuta cu prietenul său (recompensă). După ceva timp, utilizatorul, văzând astfel de lucruri, realizează automat acțiunile cerute de el. Cu cât recompensa (motivația) este mai mare, cu atât obiceiul devine mai puternic.

2. Design pentru utilizare frecventă.

Deoarece dorim să ne creăm un obicei de a folosi produsul nostru, trebuie să proiectăm elemente care vor fi folosite frecvent. Ceea ce poate părea interesant și drăguț la început poate deveni plictisitor în timp, devenind învechit după sute de repetări ale acțiunii. Încercați să eliminați posibilitatea unui astfel de efect din boboc.

3. Faceți ca declanșatoarele să aibă un design vizual comun cu interfața produsului.

Încercați să creați elemente de microinteracțiune de design similare cu o interfață comună. De exemplu, aceeași culoare, folosind aceleași animații, forme etc. Consistența designului crește recunoașterea și întărește personalitatea mărcii. De exemplu, New York Times folosește propriul logo ca animație de încărcare. De marcă stil recunoscut, care nu poate fi confundat cu nimic altceva.

4. Folosiți animații.

Microinteracțiunile sunt elemente ideale pentru a injecta un pic de plăcere utilizatorilor în designul tău. Animațiile le fac mai vii, mai incitante, iar mișcarea în sine atrage atenția. Acesta din urmă este adesea scopul nostru principal - să interesăm. Doar încercați și comparați rezultatele înainte și după implementarea animațiilor.

5. Evitați interacțiunile nedorite.

O greșeală comună este supraîncărcarea interfeței cu un număr mare de micro-interacțiuni. Mai întâi, dezvoltați un set de ele doar pentru funcțiile de bază și vedeți cum reacționează utilizatorii dvs. Cele mai comune puncte de contact în design sunt:

• Ecrane de încărcare;
• Ilustrații animate care se activează atunci când treceți mouse-ul peste ele.

Răspunsul pozitiv al utilizatorului la animația elementelor de bază este un semnal pentru a adăuga mai multe dintre ele.

6. Folosește umorul în scrisul tău.

Microinteracțiunile precum butoanele de îndemn sau alte anunțuri interactive (pagini de eroare 404, de exemplu) vor fi mai eficiente dacă sunt injectate cu umor. Puteți folosi chiar și o înregistrare a vocii umane în unele locuri.

Carduri

Cu toții cunoaștem eficiența cardurilor cu mult înainte de apariția designului digital ( carti de vizita, cărți de joc etc.). Ideea este că cele mai relevante informații despre un subiect sunt strânse într-un recipient mic.

4. Încărcarea animațiilor luminează așteptarea.

Dacă nu aveți ocazia să eliminați bara de încărcare a paginii sau să reduceți timpul de așteptare, o animație interesantă va ajuta la ușurarea acestui proces în ochii utilizatorului.

În loc să utilizați bare tradiționale de încărcare care afișează progresul de încărcare în procente, încercați să oferiți publicului ceva mai gustos și creativ. Desigur, cea mai bună cale de ieșire din situație este optimizarea site-ului. Utilizarea unei bare de încărcare este o ultimă soluție. Dacă într-adevăr nu puteți face fără ea, atunci este mai bine să decorați procesul de rutină cu animație.

Tipografie

Rezoluții mai mari ale dispozitivului, internet mai rapid și acces la noile biblioteci de fonturi web( Fonturi Google, Adobe Typekit etc.) fac din timpul nostru epoca de aur a tipografiei.

Beneficiile tipografiei de calitate

• Rezoluția crescută a ecranului oferă mai multe oportunități de implementare a ideilor tipografice interesante;
• Capacitatea de a sublinia unicitatea mărcii și de a o face recunoscută datorită fontului utilizat;
• Creșterea influenței conținutului textului;
• Un instrument pentru construirea unei ierarhii vizuale a elementelor, acesta este deosebit de important pentru evidențierea instrumentelor CTA (call to action).

Principii de utilizare

1. Claritatea este primordială.

Nu sacrifica niciodată lizibilitatea pentru un font „mai bun” – stilurile tipografice nu funcționează dacă nu poți citi ceea ce scrii.

2. Font simplu, dar impresionant.

Tipografia simplă este mai ușor de citit și se încarcă mai rapid, ca să nu mai vorbim că este esențială pentru stilurile de design minimalist. Vă rugăm să rețineți următoarele:

Măriți dimensiunea fontului;

Contrastează culoarea fontului cu fundalul înconjurător;

Utilizați font aldine în locurile cheie.

Conceptele de „impresionant” și „florid” nu trebuie confundate. Fonturile simple ajută la transmiterea unui mesaj cu încredere și claritate.

3. Fonturi complexe și simple: Serif vs Sans Serif.

Nu există dovezi convingătoare că unul dintre ei este întotdeauna mai pretențios decât celălalt. E doar o chestiune de stil, nimic mai mult. Fonturile complexe fac textul mai bogat și mai formal, în timp ce cele simple se potrivesc bine cu designul minimalist.

Fonturi populare sans serif:

1. Proxima Nova
2. Futura
3. Avenir
4. Deschide Sans
5. Helvetica Neue
6. Fonturi serif populare:
7. Caslon
8. Garamond
9. Text de marfă
10. Minion
11. FF Meta Serif

5. Suprapunerea fonturilor scrise de mână.

Astfel de fonturi sunt un plus bun pentru cei care doresc să creeze un stil „casnic”. Deoarece lizibilitatea acestui tip de tipografie este extrem de discutabilă, limitați-i utilizarea la titluri mari suprapuse pe imagini.

6. Text care depășește spațiul desemnat.

Unul dintre cele mai bune moduri a acorda atenție textului este suprapunerea acestuia pe alte elemente și depășirea domeniului lor. O parte dintr-un cuvânt sau un cuvânt întreg se poate extinde, de exemplu, dincolo de limitele imaginii, suprapunând zona adiacentă. Acest lucru îmbină ecranul într-un singur întreg și arată impresionant și uneori chiar șocant.

7. Fonturi implicite.

În cele mai multe cazuri, nu ar trebui să utilizați mai mult de două familii de fonturi. Dacă doriți să vă diversificați conținutul, modificați dimensiunile și tipurile de fonturi în cadrul aceleiași familii.

Culori vibrante

Pe tot parcursul anului 2015, am recunoscut o tendință spre introducerea culorilor strălucitoare. În 2016, această direcție a continuat să capete amploare. Popularitatea culorilor strălucitoare va crește doar în viitor. Folosește mai multe palete și nuanțe dacă vrei să ții pasul cu moda.

Beneficiile folosirii culorilor luminoase

• Diferite nuanțe și degrade de culori vă vor ajuta să distingeți mai bine conținutul pe care îl evidențiază;
• Utilizarea stimulării vizuale este utilă în special pentru site-urile mai mici.

1. Duoton.

• Utilizarea culorilor în două tonuri este o tendință în sine și va rămâne populară mult timp, odată cu introducerea culorilor strălucitoare.
• Este clar că duotonul este o combinație gama de culori doua culori. Acestea pot fi nuanțe de aceeași culoare sau tonuri complet opuse.
• În designul web, duotonul este adesea folosit pentru a prezenta mai bine imaginile și fotografiile. Arată interesant și modern.
• Țineți cont de următoarele puncte:
• Folosiți fotografii simple cu o temă puternică, unificată. Imaginile bogate în elemente (cum ar fi peisajele) pot fi dificil de văzut, în special pe ecranele mobile;
• Duotonul contrastant facilitează distingerea detaliilor dintr-o fotografie;
• Separați fotografia dvs. de restul zonei de vizualizare cu chenare colorate sau derulare pe tot ecranul;
• Utilizați imagini clare cu limite vizibile ale obiectelor din ele.

De asemenea, duotonul este adesea folosit ca suprapunere a fotografiilor, așa cum se arată în exemplul de mai jos.

2. Suprapunere.

O altă tendință interesantă pentru utilizarea culorilor strălucitoare este suprapunerea lor în fotografii.

Culoarea suprapusă sporește semnificația imaginii și dorința de a-i examina detaliile. Culoarea poate ajuta la schimbarea interpretării unei fotografii. De exemplu, o suprapunere roșie va face imaginea mai vie și mai enervantă, în timp ce o suprapunere albastră va crea un sentiment de calm în scena pe care o vedeți.

3. Degrade spectaculoase.

Culorile amestecate între ele cu estomparea treptată a tonului - alegere populară mulți designeri moderni. Nu este nevoie să luați mai mult de 2 sau 3 culori pentru a amesteca - acest lucru este inutil.

4. Evidențiați cuvintele cheie și butoanele.

În textele monocrome, utilizați culori strălucitoare pentru a evidenția cuvinte și expresii precum „gratuit”, „azi”, etc. Acest lucru le va oferi o greutate suplimentară, sporind puterea de sugestie.

În același sens, puteți face unele butoane mai mari ca dimensiune decât altele, asigurându-vă că le evidențiați cu un chenar sau fundal colorat. Acest lucru funcționează grozav.

5. Modificarea stării unui element la trecerea cursorului.

După cum am menționat când vorbim despre cărți, culorile sunt un instrument ideal pentru diferențierea elementelor. Schimbarea culorii la trecerea mouse-ului este o modalitate sigură și ușoară de comunicare vizuală care crește gradul de interactivitate a unui site sau aplicație.

6. Utilizare culoarea corectă pentru a evoca emoția dorită.

Culorile diferite evocă emoții diferite. Iată o mică foaie de cheat pentru câteva culori utilizate în mod obișnuit pe site-uri web:

• Roșu – transmite un sentiment de pasiune și precauție în același timp. Această culoare crește intensitatea circulației sanguine;
• Albastru – creează un sentiment de calm și stabilitate, prin urmare este adesea folosit la proiectarea site-urilor diferitelor instituții financiare;
• Verde – stabilește un echilibru bun între culorile calde și reci, transmite o senzație de naturalețe, puritate și prosperitate;
• Mov - asociat istoric cu ceva regal, creând un sentiment de lux și mister;
• Albul este o culoare neutră ideală care, atunci când este asociată cu alte culori, transmite un sentiment de eleganță, sporind efectul acestora din urmă;
• Negrul este o culoare sofisticată și puternică, care este mereu în tendințe pentru utilizare în orice tip de proiect.

Defilare lungă

Site-urile cu derulare lungă sau cu derulare fără sfârșit și-au câștigat rapid locul ca o constantă în designul web.

Caracteristici de utilizare a derulării lungi

• Excelent pentru dispozitive mobile. Ecranele mai mici înseamnă mai multă defilare, iar formatul funcționează bine cu comenzile tactile;
• O formă narativă convenabilă în care conținutul este scufundat în acest fel poate interesa vizitatorii;
• Simplificarea navigației;
• Derularea infinită va adăuga un element de surpriză experienței utilizatorului.

1. Folosiți indicii vizuale.

O pictogramă ca o săgeată care indică direcția de derulare și situată în afara zonei de conținut va părea adecvată și informativă. Vă va anunța cât timp mai este pentru a derula până la sfârșitul paginii și vă va anunța despre aspectul liniar al conținutului.

2. Ecranele sunt ca niște pagini.

Derularea poate fi nu numai lină, ci și pagină cu pagină. Derulați și întregul ecran s-a schimbat. Este la modă și frumos.

Ajustați fiecare ecran din aspectul paginii, astfel încât să umple complet întreaga zonă vizibilă. Creați stiluri personalizate care se potrivesc cu tema generală pentru fiecare bloc de defilare. Uneori este util să duplicați elemente CTA pe fiecare ecran. Această abordare permite utilizatorilor să perceapă site-ul în mod holistic și să înțeleagă rapid spre ce îi conduc creatorii site-ului.

Pentru site-urile mici cu mai multe pagini, puteți utiliza navigarea prin defilare în loc de derularea lungă. Adică, utilizatorul va putea merge la o altă pagină derulând mouse-ul, ocolind necesitatea de a face clic pe elementele de meniu. Puteți anima tranziția între pagini pentru a consolida comunicarea vizuală cu utilizatorul, așa cum se arată în captura de ecran de mai jos.

3. Meniu de navigare lipicios.

Unul dintre cele mai mari riscuri ale derulării lungi este posibilitatea dezorientării utilizatorului. S-ar putea să se piardă pe drum. Cea mai simplă soluție este un meniu de navigare lipicios care va rămâne într-o singură poziție pe ecran în timp ce derulați pagina.

Dacă acest lucru ocupă mult spațiu în opinia dvs., atunci puteți include cel puțin o opțiune de sărituri în meniu, astfel încât o persoană să poată sări rapid la o altă secțiune. Cel puțin, aveți un buton „Înapoi la început”, mai ales dacă aveți un site de defilare infinită.

4. Animații activate prin derulare.

Animațiile fac derularea mai distractivă și atrag utilizatorul în procesul de comunicare cu site-ul. Faceți defilarea mai lină și mai interesantă vizual cu efecte de animație. Acest lucru îl va face pe utilizator să acorde atenție și să pună întrebări precum „Ce se va întâmpla în continuare?” Vă puteți stabili propriile reguli ale jocului construind o secvență de animații în felul pesmeturilor dintr-un basm faimos. O persoană va dori să vă vadă ideea până la capăt dacă este bine implementată.

Defilarea Parallax este o soluție simplă, dar nu singura. Apelați la creativitate pentru a ajuta, nu este necesar să repetați exact secvențele de efecte inventate anterior.

5. Reduceți dezavantajele SEO ale paginilor cu derulare lungă.

Site-urile cu defilare infinită au limitările lor în ceea ce privește promovarea SEO. Dar ele pot fi înmuiate. Neil Patel oferă îndrumări utile cu privire la acest subiect.

Grafică HD

Dispozitivele cu rezoluții mari ale ecranului au fost de mult un standard, iar 2016 este anul designului HD. Videoclipurile captivante, fotografiile puternice și grafica bogată stabilesc direcția pentru conținut vizual de calitate.

Beneficiile utilizării graficelor de calitate

• Utilizatorii dispozitivelor cu ecrane HD se așteaptă la conținut de calitate adecvată;
• Videoclipurile de înaltă calitate pot crește semnificativ timpul petrecut de vizitatori pe un site;
• O abordare creativă oferă designerilor mai mult control asupra stării de spirit a vizitatorilor.

1. Combinați fotografiile de stoc și personalizate.

Desigur, fotografiile unice sunt mai bune, dar nu orice companie își poate permite să angajeze un fotograf. Ca un compromis, puteți combina stoc și fotografii originaleîn așa fel încât să fie unice. Găsiți fotografii de stoc pe tema dorită, adăugați sigla, schimbați culorile dacă este necesar și gata! Dacă căutați material pentru a crea imagini de branding, puteți vizita Unsplash, Pixabay sau Pexels.

2. Pregătiți imagini de înaltă calitate.

Imaginile de fundal pe ecran complet și videoclipurile captează instantaneu atenția utilizatorilor și servesc drept prezentarea perfectă pentru site-urile web minimaliste.

După cum se arată în captura de ecran de mai jos, o imagine cu contrast ridicat atrage cu ușurință atenția asupra conținutului textului suprapus deasupra acesteia. Deoarece majoritatea dispozitivelor nu acceptă raportul de aspect standard de 1:15 pentru camere, va trebui să decupați imaginea în avans pentru a se potrivi cu diferite rezoluții ale ecranului. Imaginea ar trebui să arate la fel de clară și lizibilă pe orice dispozitiv.

3. Grafică SVG sau raster?

Formatele de grafică raster (.jpg, .gif, .png) au o rezoluție specifică în pixeli în mod nativ, în timp ce grafica scalară poate crește sau micșora pentru a se potrivi cu ecranul fără a pierde calitatea.

Utilizați SVG pentru grafică unică, în timp ce pentru fotografii, formatele raster cu un număr strict limitat de pixeli în rezoluție sunt cele mai bune. Este important să cumpărați echipamente fotografice cu rezoluție bună în astfel de scopuri.

4. Fundal video în anteturi.

Pe măsură ce viteza medie a internetului crește, fundalurile video câștigă popularitate. Folosirea acestora poate prelungi timpul petrecut de oameni pe site-ul dvs. Vă rugăm să rețineți următoarele puncte:

Segmente video de 10-30 de secunde ating un echilibru bun între conținut captivant și de mare vitezăîncărcarea paginii;

Sunetul din videoclip este dezactivat în mod implicit - cel mai adesea, utilizatorii nu se așteaptă să audă sunetul imediat după ce merg pe site, acest lucru poate fi enervant pentru mulți. Este mai bine să-l oprești, lăsând butonul de pornire pentru cei care vor să asculte.

Videoclipul atrage utilizatorii din prima secundă de la intrarea pe site, ceea ce servește drept motiv serios pentru utilizare.

Ilustrații

Pentru a crea imagini mai unice decât fotografiile de stoc obișnuite, designerii apelează din ce în ce mai mult la ilustrații. Au devenit o alternativă populară la soluțiile din diferite bănci de fotografii.

Beneficiile utilizării ilustrațiilor

• Apel direct la imaginația utilizatorului, ceea ce îi permite să-și întărească legătura personală cu site-ul;
• Mai mult control asupra conținutului și detaliilor imaginii;
• Acest lucru este de obicei mai puțin costisitor decât rezervarea unei ședințe foto și oferă o mai mare libertate de creație;
• Ilustrațiile exprimă clar concepte complexe prin imagini vizuale familiare.

1. Coordonați ilustrația cu tema generală a aspectului.

Ilustrațiile din designul web au apărut sub formă de pictograme și alte elemente secundare. Dacă doriți să aduceți acest stil în prim plan, atunci trebuie să îl unificați cu tema principală a site-ului în ceea ce privește designul și conținutul.

2. Adăugați efecte creative.

Ilustrațiile oferă designerilor mai multă libertate de a folosi efecte creative, iar acestea două sunt deosebit de populare:

Animații – merg mereu mână în mână cu ilustrațiile;

Straturi - Datorită versatilității lor, ilustrațiile vă permit să simplificați efectele prin introducerea de straturi pentru a adăuga profunzime imaginii.

3. Folosiți ilustrații în instrucțiuni și manuale.

Chiar și site-urile care nu folosesc grafică desenată manual pot include în continuare în instrucțiunile și ghidurile lor. Imaginile vor spune chiar mai mult decât cuvintele; o persoană se va obișnui mai repede. În plus, poziționarea fără stres prin imagini de desene animate va ajuta utilizatorul să uite că învață, făcând procesul mai ușor și mai distractiv.

4. Folosiți un design plat în ilustrații.

Desigur, designul plat a dobândit straturi proprii de-a lungul timpului, dar poate fi folosit și pentru a crea ilustrații. Nu și-a pierdut cele mai multe dintre cele mai semnificative avantaje (ușurința de a crea și de a percepe, viteza de încărcare a unor astfel de elemente grafice) și este încă folosit cu succes în proiectarea ilustrațiilor.

Concluzii

Ați învățat câteva tehnici care sunt populare în mediul de web design actual. Aplicați-le în contextul proiectului dvs. Amintiți-vă, nu ar trebui niciodată să urmați orbește o tendință doar pentru că implementarea ei arată grozav de la sine. Trebuie să folosim toate aceste lucruri în mod înțelept și profitabil, selectiv și semnificativ. Suntem siguri ca printre cele de mai sus vor exista idei care te vor ajuta sa implementezi un proiect eficient din punct de vedere comercial si util pentru utilizatori.

Sub Anul Nou cineva spune averi pe zațul 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 videoclipul este tipul de conținut pe care un utilizator modern de internet este gata să îl consume și să-l bea. Și când îi spui utilizatorului o poveste - de exemplu, cum să construiești proces complex dezvoltarea site-ului - folosiți-l. 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 grijă! 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, adăugați niște animații personalizate și numiți-o pe 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ă.

Problema se înrăutățește în fiecare an. 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. Doar așa. 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ă. Iar pictograma meniului de hamburger nu le este nici familiară, nici 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ă dai like la 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. Evitarea fotografiilor 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ă-i înlocuiți. Așa că hai să-i 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 și va crea 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 abilitățile de 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 :)