Tendințe în design web. Tipografie mare și originală. Textele lungi vor dispărea

Dedicat designului web și tendințelor digitale în 2018. Olga este membră a juriului Awwwards și revizuiește în fiecare zi sute de site-uri noi dezvoltate de agenții și designeri din întreaga lume. Acest lucru îi permite să țină pasul cu cele mai recente evoluții și tendințe în dezvoltarea și designul web.

Articolul descrie mesajele principale ale prelegerii și puteți citi versiunea completă la link.

Defilare interactivă

Cursorul nostru este indicat de o săgeată. Fie se transformă într-un deget pentru clic și pot apărea hover. Acum cursorul poate fi un element. Tranziția către pagină este evidențiată sub ea. Elementele de dedesubt se pot schimba sau interacționa cu cursorul.

Site-ul web Volcan este un exemplu preferat. Cursorul diamant devine un indiciu a ceea ce vă așteaptă când faceți clic. Există un element interactiv. Ca urmare, cursorul nu este necesar;

Un exemplu de defilare interactivă pe site-ul web Vulcan

O nouă temă pentru bătăliile dintre designerii UI/UX - cât de convenabil este? Dar dacă te gândești la toate cu înțelepciune, poate funcționa bine.

Măști SVG

Cu ajutorul lor puteți face tranziții de spațiu. Nu sunt greu de dezvoltat, dar le oferă designerilor mână liberă. Site-ul web al lui Rich Brown folosește o cruce ca tranziție. Dar poate fi orice formă.

Dacă utilizați Photoshop, puteți face acest lucru decupând pur și simplu o gaură în strat cu o mască. Sau prin suprapunerea a 6 pătrate. Pentru clientul nostru, am făcut o tranziție de la ecran la ecran folosind acest lucru. Deschiderea unei imagini dintr-un formular este, de asemenea, o mască SVG. Dar dacă te uiți la aspect, arată ca o imagine statică.

Pânză

Acest lucru este deja dificil. Cu siguranță aveți nevoie de cineva care să înțeleagă aspectele matematice ale procesului. Unele lucruri pot fi împrumutate de la biblioteci. Dar SVG nu are sincronizare cu cursorul. Și iată-l.

Site-ul Climachill de la Adidas, de exemplu.

Morphing-ul cu o literă este Canvas. Debordarea de degrade este Canvas. Și acest lucru a fost popular de câțiva ani, dar nu va deveni învechit în curând. Pentru că cântărește puțin și este o grafică 2D, care este greu de replicat. Potrivit pentru cei care doresc mult „wow” pe site-ul lor.

3D+WEBGL

Direcția se va dezvolta. Când faci chiar și un videoclip mic, dar de înaltă calitate, timp de 1 minut, înseamnă un minim de 10 persoane în echipă. Când este în 3D - este 1 designer. Și webgl este dezvoltator +1. 3D poate fi clasic, ca pe site-ul Globekit. Arată fantastic, unic. Deși este format din 6 diapozitive în total.

Dar din nou: trebuie să fii atent la aplicare. Un astfel de efect este suficient pentru a face site-ul luminos, dar nu strălucitor.

VR

În martie 2017, a apărut primul site web în VR. Sunt mai mulți. Recent am realizat prima pistă VR pe un stadion de fotbal. Un bărbat își pune o mască și i se pare că se află pe o pistă de curse.

Dispozitiv pentru curse virtuale de la Audi.

Ne-am certat recent dacă VR-ul va prinde bine. Da, are viitor pentru că a devenit mai ușor de făcut. Vom face un portofoliu în VR, astfel încât să îl răsfoiți întorcând capul, iar când vă fixați privirea, treceți la treabă.

AR

Este grozav că acum te poți descurca fără o aplicație. Te duci la un link în browser și trebuie să ai un marker care să citească unele lucruri. Arată acest marker și termină de desenat ceea ce vrei. Adică mai întâi faci un design în 3D, îi arăți și el completează realitatea augmentată. Îl poți personaliza singur.

PWA este o funcționalitate de browser care este similară cu o aplicație. Este adăugat ca o pictogramă și arată ca o aplicație. De fapt, se deschide în browser și vă permite să trimiteți notificări utilizatorului, să le înregistrați printr-un formular și să primiți conținut offline.

Un cadru

Aceasta este o bibliotecă gata făcută în care puteți găsi toate lucrurile pentru AR și VR. Puteți vedea cum funcționează, urmăriți-le în acțiune.

Prin urmare, sfătuiesc toți designerii web să-și termine studiile în 3D. Acest lucru va face site-ul dvs. mult mai vibrant.

Google

Fii cu ochii pe ei. Ei nu stau pe loc. Există experimente pe Google. Eliberați-vă câteva ore pentru a explora toată frumusețea. Google desfășoară numeroase experimente, în care implică dezvoltatori și agenții. Ultima este utilizarea datelor mari.

Și recent Awwwards a început să colaboreze cu Google. Aceasta înseamnă că acum accentul va fi pus pe site-urile mobile. Tehnologia va începe să fie optimizată pentru a o face mai ușoară. Google devine din ce în ce mai interesat de web-ul mobil.

WebVj

Un truc foarte nou. Pagina este construită pe baza datelor. Există un japonez, Masatatsu Nakamura, care este deosebit de serios în această privință. Grafica sa este realizată în întregime de un programator, nu de designeri. Face multe pentru Google Experiments.

Exemplu de grafică Masatatsu Nakamura realizată folosind WebVJ

Trendosiki

Cea mai pusă întrebare este „Ce culoare/font/model va fi la modă anul viitor?” Eu numesc asta „tendințe”.

Acum este imposibil să determinați un set de fonturi sau culori în tendințe. Se pare că culorile pastelate încep să capete tendință. Dar apoi te uiți la aceste locuri luminoase, explozive și realizezi că nu.

V-aș sfătui să redați prezentarea componentei folosind modele în orice caz. Acest lucru va face conținutul să pară mai scump și mai interesant. Un model obișnuit translucid și ușor va da deja statut site-ului dvs. Linii oblice, elemente rupte - acest lucru nu este atât de dificil și nu necesită implicarea unui dezvoltator.

Articolul este împărțit în două domenii principale: grafică în design și dezvoltare web în sine, iar fiecare secțiune are propriile componente.

TENDINȚE DE WEB DESIGN

Așadar, vom începe cu tendințele de design web din 2017 și ce ne așteaptă în 2018. Ce schimbări au avut loc în grafică, utilizarea fonturilor, animației și videoclipurilor și așa mai departe.

Design grafic

Tendința care este considerată la modă este Flat Design. Grafica vectorială este utilizată cu adăugarea de grafice raster pentru a sublinia exemple de astfel de site-uri. Minimalism și design responsive, simplu și ușor de înțeles pentru utilizatorii site-ului.

Imagini vectoriale

Utilizarea vectorilor pe site-uri web este în creștere; acestea sunt ușoare, ceea ce înseamnă că încărcarea este mai rapidă. Deoarece vectorul poate fi întins și comprimat după cum doriți, grafica dvs. va arăta întotdeauna grozav pe ecranul oricărui dispozitiv la orice rezoluție. Pentru imagini vectoriale, utilizați formatul SVG (Scalable Vector Graphics). Majoritatea editoarelor vectoriale vă permit să salvați în acest format și nu este nevoie de un software specific.

Incolor - butoni fantomă

Trecerea către minimalism a influențat și designul butoanelor. Utilizarea acestui tip de butoane în designul site-urilor este în creștere. Astfel de butoane nu supraîncărcă site-ul și arată original. Site-ul nostru web folosește, de asemenea, astfel de butoane în partea de jos a blocului de articole.

Click pe imagine pentru a o mari

Grafică 3D elegantă

Grafica 3D ia amploare si in noul an. Compozițiile 3D merg bine cu designul plat și îl completează, oferindu-i mai multă profunzime și subliniind modernitatea.

Click pe imagine pentru a o mari

Animație, video și obiecte interactive

Site-urile web au început să folosească fotografii și fundaluri live, acest lucru atrage cu siguranță atenția și oferă site-ului o anumită dinamică. S-a înregistrat, de asemenea, o creștere a utilizării videoclipurilor și a tot felul de animații pentru interacțiunea utilizatorului.

Ochiuri complexe

La sfârșitul anului 2016, a apărut o tendință pentru site-urile web care utilizează grile dinamice, complexe, cu un design de ultimă oră.

Geometrie sub diferite forme

Utilizarea diferitelor tipuri de forme geometrice pentru text, blocuri evidențiate informaționale și fundaluri. Dreptunghiurile și pătratele sunt excelente pentru a evidenția lucruri importante.

Click pe imagine pentru a o mari

Culori la modă

Iată cui îi place ce și ce, prin definiție, este potrivit pentru fiecare proiect. Singurul lucru care se poate spune este că culorile devin din ce în ce mai vibrante. În combinație și contrast bun, este mai convenabil pentru utilizator să navigheze pe site și să perceapă informații.

Adaptare necondiționată

Acum nu este nevoie să spunem că site-urile web ar trebui să fie prietenoase cu dispozitivele mobile. Adaptarea este un factor absolut al unui site web modern. Este foarte important să te gândești la design în versiunea mobilă, astfel încât toate elementele importante să fie la îndemână pentru utilizator, iar acesta să înțeleagă intuitiv navigarea pe site.

Litigiile nu scad cu privire la care este cel mai bun mod de a pune o pictogramă sau o inscripție. Rezultatele testelor pe 240.000 de utilizatori de dispozitive mobile.

Alternative pentru meniul mobil

Dacă nu există multe secțiuni pe site, atunci este mai bine să utilizați filele ca meniu sau să adăugați un buton la ele la sfârșit într-un meniu suplimentar derulant.

Meniu dinamic flexibil

Soluția constă într-un meniu care se ajustează la lățimea ecranului, afișând cât mai multe file posibil și ascunzând ceea ce nu este inclus sub „Mai multe”.

TENDINȚE DE DEZVOLTARE WEB

Design atent

Dezvoltarea unui design de site ar trebui să implice nu doar un designer grafic, ci și specialiști în promovare și marketeri. Amplasarea fiecărui element are propriul scop, pentru o ședere confortabilă a utilizatorului.

Mai puțin text este mai bine!

Partea de text a site-ului trebuie să fie concisă, pe cât posibil, și să dezvăluie subiectul propus. Dacă este posibil, completați-l cu detalii tehnice, precum prețuri, caracteristici etc.

Evaluare CMS

Puteți vedea întotdeauna cea mai recentă evaluare. Indiferent de opțiunea pe care o alegeți, rețineți că, conform declarațiilor oficiale de la motoarele de căutare, nu există nicio diferență fundamentală în ceea ce privește site-ul dvs. Orice motor sau cadru va trebui modificat pentru cea mai bună funcționalitate a proiectului dumneavoastră.

• Traducere

Lumea designului web este vibrantă și diversă. Schimbări mari nu au loc aici în fiecare an. Acest lucru este confirmat de creșterea rapidă a tehnologiei, care în ultimii ani a demonstrat că tendințele importante în designul web în viitorul apropiat se vor concentra pe îmbunătățirea design-urilor existente.

Designul plat va deveni mai texturat, „experiențele cinematografice” vor deveni mai comune, iar utilizarea bibliotecilor JavaScript va permite mai multă experimentare. Credem că popularitatea tot mai mare a WebGL și a realității virtuale va transforma site-urile web pe care le cunoaștem în ceva nou, cu funcții interactive interesante.

În acest articol, ne vom uita la cele 11 cele mai mari tendințe de design web așteptate din acest an. Așa că fii confortabil și începe să citești!

1. WebGL (Biblioteca grafică web)

Printre cele mai recente realizări se numără tehnologia notabilă WebGL (Web Graphics Library). O mulțime de site-uri uimitoare care au apărut recent îl folosesc.

Mai simplu spus, WebGL este o modalitate de a reda grafică interactivă 3D și 2D în browsere cu accelerare hardware, fără niciun plugin.

1.1 Aplicație interactivă WebGL 3D

Experimentează curiozitatea (NASA)

WebGL a fost unul dintre subiectele centrale ale conferinței SIGGRAPH 2015. Puteți urmări o prezentare despre grafica 3D și WebGL pe acest canal YouTube.

În acest videoclip de o oră și jumătate, veți afla despre aplicația web Experience Curiosity a NASA, care a fost creată pentru a marca cea de-a treia aniversare a aterizării roverului Curiosity pe Marte. Aplicația permite utilizatorilor să „călărească” roverul 3D al NASA pe suprafața lui Marte și să „controleze” un braț robotic.

Pentru a crea această resursă, am folosit Blend4Web (un cadru pentru crearea de aplicații 3D bazate pe browser) și Blender (un pachet pentru modelare și animație 3D).

Site-ul web Beloola folosește three.js (o bibliotecă JavaScript)

Proiectul „The Boat” de la SBS TV (Australia)

Postul de televiziune australian SSB TV a reelaborat povestea scriitorului Nam Le „The Boat” despre evadarea din Vietnam și a transformat-o într-o poveste video interactivă folosind WebGL. Aplicația constă din mai multe părți cu animație excelentă și ilustrații colorate manual. Acesta folosește și three.js, la fel ca exemplul anterior.

Pentru căRecolectare

Din punct de vedere tehnic, este o animație bidimensională continuă care se realizează în spațiu pseudo 3D. Arată foarte impresionant!

2. VR (Realitate Virtuală)

Realitatea virtuală (VR) este o tehnologie similară care are potențialul de a zgudui lumea gadgeturilor în 2016. Poate că foarte curând lucrurile vor deveni mult mai interesante.

Website timeshift165

Etichete:

• webgl
• web design
• javascript

Adaugă etichete

Inițial, a fost planificat să postăm o traducere a unui articol în limba engleză despre tendințele de design web în 2017, dar după ce am studiat diverse surse, am decis să schimbăm ușor conceptul acestui articol. Chestia este că în ultima lună au fost publicate pe internet destul de multe materiale tematice despre cele moderne, iar opiniile, după cum se spune, diferă. Pe de o parte, acest lucru este logic, deoarece Diferiți autori au propriile lor ipoteze despre ceea ce va fi relevant pentru site-uri web în acest an. Pe de altă parte, aceste previziuni sunt foarte subiective.

În general, am adunat toate opțiunile și am compilat ceva de genul un rezumat al tendințelor de design web 2017. Să începem cu cele mai populare tendințe, care sunt observate de mulți experți, și să trecem treptat la idei mai „unice”. Apropo, dacă aveți completări și păreri pe această temă, nu ezitați să le împărtășiți în comentarii. În plus, vă recomandăm să citiți despre - de asemenea, o postare utilă.

1. Design „abstract” non-standard

O grilă de site este considerată a fi un concept de bază bine stabilit care ajută la organizarea corectă a spațiului unei pagini web. În același timp, ea a împins designeri deosebit de creativi în anumite limite. Cu toate acestea, întotdeauna au existat temerari care creează soluții originale care nu sunt controlate de niciun fel de granițe rigide. Astfel de lucrări, de regulă, se găsesc în subiecte de imagine și creative, dar în 2017 această tendință de design de site web se va răspândi la proiecte corporative stricte.

Aranjamentul non-standard al elementelor oferă posibilități mai interesante: vă permite să utilizați întregul spațiu al paginii, să adăugați stratificarea obiectelor și un sentiment de profunzime aspectului. Puteți crea un design care va impresiona utilizatorii chiar și fără un videoclip sau o animație colorată pe ecran complet. Cu sute de mii de machete clasice pe web, desenele abstracte, unice, aproape întotdeauna vor ieși în evidență și vor atrage atenția vizitatorilor site-ului (cum ar fi factorul WOW). Și trebuie să folosești asta!

2. Noi opțiuni de navigare

Pentru un proiect non-standard - un meniu avansat. Astăzi nu trebuie să plasați unul orizontal în antet. Datorită popularității tot mai mari a layout-urilor adaptive, mulți utilizatori s-au obișnuit deja cu pictograma meniului Hamburger (constă din trei dungi orizontale), care apare din ce în ce mai mult pe versiunile obișnuite ale site-urilor. Limita dintre designul mobil și cel desktop se estompează treptat. Anul acesta vom vedea o mulțime de experimente cu plasarea și forma meniurilor - aceasta ar putea deveni una dintre principalele tendințe de web design din 2017.

Astfel de soluții vă permit să utilizați spațiul paginii într-un mod diferit. Pe lângă derularea intuitivă în jos și în lateral, precum și un bloc de navigare vertical fix, vor fi populare diverse elemente de alunecare ascunse. Cu ajutorul lor, puteți plasa toate elementele necesare din submeniu pe un singur ecran. Într-un fel, acest lucru face navigarea pe site mai detaliată și mai utilă pentru utilizatori. Este important doar ca aceștia să poată înțelege soluția dvs. non-standard. Asigurați-vă că îi testați eficacitatea în practică.

3. Carduri în design

Cardurile sunt departe de a fi o nouă tendință în designul site-urilor web, dar în 2017 va continua să fie relevantă. Această soluție prezintă în mod eficient informații pe diferite platforme: de la aplicații mobile până la vizionare pe ecrane TV mari. Acest format de organizare a datelor va face cât mai convenabil pentru utilizatori să concentreze toate informațiile pe obiecte.

Această abordare este folosită de multe proiecte populare din rețea: Facebook, Pinterest, Netflix. Ultima opțiune este în general un exemplu excelent de implementare cu succes a cardurilor într-un design care combină minimalismul, capacitățile de navigare și eficiența.

4. Împărțiți machetele cu ecranul împărțit în 2 părți

Anul acesta vom vedea mai multe aspecte cu afișare bifurcată a informațiilor pe ecran. Această tendință de web design va fi deosebit de activă în 2017 pe paginile de start și. Vizual, implementarea arată grozav în modelele minimaliste cu fundaluri sau imagini contrastante.

Designerul va putea folosi diverse tehnici de design vizual în blocuri adiacente în cadrul unui proiect web. Iar rezultatul va părea natural. Apropo, aspectele împărțite funcționează bine pentru Call to Action în paginile de destinație. Mai multe detalii despre metoda.

5. Tipografie mare și originală

Îmi amintesc că în 2009, am publicat unde utilizarea de fonturi uriașe era una dintre tendințele promițătoare de design de site-uri web. Același lucru se va întâmpla probabil în 2017 (cel puțin majoritatea designerilor îl menționează). Motivul principal este, desigur, atragerea atenției: cineva trebuie să evidențieze anumite obiecte de pe pagină, cineva dorește să explice cum să folosească corect navigarea etc. Oricum, tipografia devine din ce în ce mai groasă și mai mare. Când implementați, puteți găsi postări de blog despre și utile.

În același timp, multe site-uri scapă de fonturile standard ale sistemului, ceea ce le permite să își diversifice în mod semnificativ aspectul. Odată cu creșterea numărului de servicii gratuite de fonturi web originale (Google Fonts, Typekit), popularitatea acestora va crește și mai mult. Se pare că în 2017 vom vedea și experimente în domeniul tipografiei site-urilor. Principalul lucru în această chestiune este să nu exagerați - amintiți-vă că textul ar trebui să fie bine lizibil. Apropo, dacă lucrați cu WordPress, atunci articolul Cum să conectați un font în WordPress (inclusiv Fonturi Google) vă poate fi util.

6. Degrade și culori strălucitoare

O altă tendință de web design pentru 2017 este utilizarea paletelor de culori strălucitoare pentru degrade (și multe altele). Începutul erei designului plat a adus caracteristici interesante în lumea online, dar trebuie să lucrați în acest stil cu mare atenție, deoarece... poate contribui la depersonalizarea site-ului. Pentru a rezolva problema, unii experți au început să experimenteze cu culori strălucitoare și soluții de gradient. Anul acesta, trendul va continua să se dezvolte, și nu doar pe Web (cu siguranță toată lumea a observat deja actualizarea recentă a Instagram).

Această tendință poate fi folosită nu numai pentru fundal. O tehnică populară este de a crea o tranziție între două culori și de a le suprapune pe imagine. Acest lucru vă permite să faceți fotografia mai interesantă și, în general, efectul pare neobișnuit. Culorile strălucitoare adaugă profunzime, dinamism și energie plăcută designului. Ei pot evidenția bine o pagină și elementele de pe ea.

7. Animație și micro-interacțiuni

Animația de pe un site web în sine nu este nouă, dar designerii învață în fiecare an să o implementeze mai frumos și mai eficient. Efectele vizuale minore pentru imagini/obiecte/conținut nu numai că vă pot aduce proiectul la viață, ci și pot adăuga un instrument suplimentar pentru feedback-ul utilizatorilor. În interfețele moderne UI/UX, diverse micro-interacțiuni transformă procesele de rutină în modalități mai distractive de a obține informații + permit utilizatorului să vadă și să înțeleagă cum funcționează acest sau acel element de pagină (meniu, navigare, butoane).

8. Efectul de paralaxă

O altă tendință familiară de design de site-uri web în 2017 ar trebui să se deschidă dintr-o latură nouă. Paralaxul în sine este implementat datorită vitezelor diferite de mișcare a fundalului și a primului plan la defilare, ceea ce creează impresia de profunzime și dinamism al imaginii. Anul acesta ne putem aștepta la o muncă mult mai complexă folosind mai multe straturi, direcții diferite de mișcare și utilizarea efectelor. Utilizați această tehnică cu atenție pentru a nu distrage atenția utilizatorilor de la conținutul paginii web. Mai jos veți găsi imagini cu link-uri către site-uri sursă.

9. Aproape realitate virtuală

VR este unul dintre cele mai relevante subiecte astăzi, în ciuda faptului că situația reală în acest domeniu este mai puțin optimistă decât multe previziuni. Desigur, această caracteristică nu a putut decât să influențeze designerii. În unele machete puteți găsi diverse tehnici care ar crea un „efect de prezență” pentru utilizator: videoclipuri și panorame la 360 de grade, inserții video „ca un film”, jocuri etc.

10. Design tactil, natural

Această tendință combină două direcții simultan - culori naturale și design tactil. Entuziasmul excesiv pentru soluțiile plate Flat a transformat multe proiecte web în layout-uri Bootstrap monotone, fără chip. Acum unii designeri încearcă să se îndrepte către soluții mai naturale, de exemplu, postează fotografii și modele 3D realiste, astfel încât utilizatorul să aibă senzația că poate atinge și atinge obiecte de pe site. De asemenea, folosesc materiale naturale ca texturi, ilustrații și fundal + nuanțe naturale (verzi, maro, gri, metalice neutre).

11. Alte tendințe de web design 2017

În procesul de studiu a principalelor tendințe de design de site-uri web din 2017, am întâlnit opinii diferite. V-ați familiarizat deja cu cele mai semnificative opțiuni, iar acum vom vorbi pe scurt despre câteva ipoteze care s-au dovedit a fi mai puțin populare. Unele dintre ele, apropo, au fost utilizate activ mai devreme, dar în acest an tendința va continua.

Puteți face fundalul și mai impresionant adăugând animație sau videoclip. Datorită YouTube și proiectelor similare, conținutul video este acum foarte popular, puteți folosi această funcție pe site-ul dvs. Dacă adăugați sunet, nu îl activați în mod implicit, utilizatorul trebuie să dorească să o facă singur.

Forme geometrice

Dacă te uiți cu atenție la capturile de ecran ale proiectelor web de mai sus, vei observa utilizarea diferitelor forme geometrice în multe dintre ele. Acestea sunt adesea forme pătrate/dreptunghiulare, dar se găsesc și curbe, triunghiuri și cercuri. Astfel de blocuri pot conține conținut sau pot fi folosite pentru a evidenția fundalul.

Ilustrații unice

Nu am găsit multe lucrări originale în selecție, dar această tendință de web design va fi încă relevantă în 2017. În primul rând, ilustrațiile adaugă o notă personală proiectului dvs. (ceea ce este un mare plus în era machetelor plate). În al doilea rând, metoda funcționează bine cu tipografia personalizată, permițându-vă să creați și mai multe machete unice. Aceasta poate include, de asemenea, tendința de a folosi fotografii reale în design/conținut în loc de imagini din fotografii de stoc - originalitatea este întotdeauna la cerere.

Total

Am trecut în revistă primele 10 tendințe în design web pentru 2017, care vor fi acum utilizate cel mai activ de către designeri în munca lor. De fapt, nu au existat atât de multe tehnici originale, o parte semnificativă a tendințelor se repetă din anii precedenți: cartonașe, fundaluri strălucitoare, paralaxe, tipografie mare etc. În ceea ce privește fonturile și navigarea, probabil vom vedea opțiuni originale anul acesta. În afară de punctul cu realitatea virtuală, putem spune că tendința generală de simplificare a aspectului proiectelor online continuă doar să caute cele mai eficiente și interesante modalități de implementare.

Designul web ca mediu digital este mult mai susceptibil la schimbările tehnologice decât predecesorii săi tradiționali de tipărire. Ceea ce este uimitor este modul în care designerii continuă să abordeze un număr tot mai mare de provocări tehnice și creează în continuare site-uri care sunt ușor de utilizat, clare și inovatoare, compatibile cu identitatea corporativă, adaptabile la fiecare dispozitiv imaginabil și pur și simplu frumos.

În 2017, s-au înregistrat multe progrese, inclusiv utilizarea sporită a dispozitivelor mobile, depășind în cele din urmă computerele desktop în ceea ce privește descărcările și vizionarea conținutului. Aceasta înseamnă că în 2018 vom folosi funcționalitatea mobilă ca niciodată, iar dispozitivele desktop vor trebui să evolueze pentru a rămâne relevante. Având în vedere toate acestea, să aruncăm o privire la tendințele notabile de design web care sunt pe cale să devină omniprezente.

Utilizarea umbrelor nu este nouă, așa că de ce am menționat-o? În ciuda faptului că această tehnică a fost de mult timp tradițională în design, astăzi, datorită progresului browserelor, vedem variații interesante care anterior nu existau. Grilele și Dispozițiile Parallax vă permit să vă jucați cu umbre într-o gamă și mai largă, creând iluzia unei lumi care există în spatele ecranului. Aceasta este o reacție directă la (Flat Design), o tendință care a fost populară în ultimii ani.

Umbrele creează un efect surprinzător de versatil, nu doar ridicând estetica paginii la un nivel superior, dar contribuind și la fluiditatea experienței utilizatorului (UX) prin utilizarea accentelor. De exemplu, folosirea umbrelor moi și subtile în starea Hover pentru a indica o legătură nu este o idee nouă, dar asocierea lor cu gradiente de culori vibrante (mai multe despre asta mai jos), ca în exemplele de mai sus, îmbunătățește efectul 3D al umbrelor.

2018 este cu siguranță anul culorilor super strălucitoare. În timp ce în trecut multe mărci și designeri s-au ținut de culorile „sigure pentru web”, astăzi mulți devin mai îndrăzneți în abordarea lor și în colorarea titlurilor în nuanțe strălucitoare super-saturate, precum și combinând litere cu linii și unghiuri înclinate (în loc de simplu orizontal). forme). Acest lucru se datorează parțial monitoarelor și ecranelor dispozitivelor mai avansate din punct de vedere tehnologic, care sunt capabile să producă culori mai bogate. Culorile îndrăznețe și chiar contradictorii pot fi utile pentru noile mărci care speră să atragă instantaneu atenția vizitatorilor, dar sunt ideale și pentru companiile care doresc să se deosebească de tot ceea ce este „sigur pentru web” și tradițional.

Ilustrațiile sunt o metodă minunat de versatilă de a crea imagini jucăușe, distractive și prietenoase, care adaugă un element de distracție site-ului tău. Artiștii cu experiență vin cu ilustrații care sunt pline de semnificație personală și țin cont de specificul mesajului mărcii, iar acest lucru este exact pentru care se străduiește toată lumea pe piețele extrem de competitive de astăzi.

Această tendință este ideală pentru afacerile asociate cu distracția și energia, dar ajută și companiile „serioase” să se apropie de clienții lor.

Dacă doriți să încercați să creați o pagină de destinație în acest stil, dar nu aveți încă un designer puternic, puteți utiliza șabloane sau secțiuni gata făcute în:

De asemenea, puteți comanda oricând o pagină de destinație personalizată de la designerii noștri. Vezi exemple de lucrări finalizate .

Particle Backgrounds sunt o soluție excelentă pentru site-urile care se confruntă cu probleme de încărcare lentă din cauza videoclipurilor încorporate. Animația în cauză este un javascript ușor, cu încărcare rapidă, care creează mișcare naturală în fundal.

Se spune că o imagine spune mai mult decât o mie de cuvinte și, fără îndoială, acest lucru este adevărat. În plus, fundalurile cu părți în mișcare sunt atrăgătoare, permițând mărcilor să facă o impresie memorabilă în câteva secunde. Graficele în mișcare devin din ce în ce mai populare pe rețelele de socializare, deoarece generează clienți potențiali interesați către paginile de destinație.

5.Mobil mai întâi

După cum am menționat deja, lumea mobilă începe să domine lumea desktop-ului. Aproape fiecare dintre noi intră în magazine și plasează comenzi pe smartphone-ul nostru. Acesta a fost cândva un proces greoi pe care utilizatorii au întârziat să îl adopte. Designerii au fost preocupați de întrebarea: cum să vă asigurați că există meniuri, submeniuri și sub-submeniuri normale pe un ecran mic?

Dar acum designul mobil a devenit mai matur. A apărut un meniu pop-up și a devenit posibil să faceți meniul mic. Poate că ai trebuit să renunți la fotografiile mari și frumoase de pe mobil, dar pictogramele au devenit mult mai eficiente din punct de vedere al spațiului, plus că sunt atât de comune acum încât utilizatorii înțeleg semnificația aproape a fiecăreia dintre ele. Problemele de UX sunt mai ușor de identificat și rezolvat prin micro-interacțiuni și obțineți feedback imediat cu privire la comportamentul utilizatorilor dvs.

6. Fonturi aldine mari

Am adăugat toate fonturile din colecția Google Fonts într-o galerie vizuală și tot ce trebuie să faceți este să selectați fontul potrivit, să faceți clic pe butonul de conectare și să îl utilizați pentru texte noi sau existente pe pagina de destinație.

Una dintre cele mai notabile inovații ale anului 2017 a fost apariția layout-urilor „fragmentate” asimetrice și netradiționale (Layouts), iar această tendință va rămâne relevantă și în 2018. Atractivitatea layout-urilor asimetrice constă în unicitatea, specificitatea și oarecum experimentalitatea lor.

În timp ce corporațiile bogate în conținut încă se îndreaptă către structurile tradiționale de grilă, vă puteți aștepta ca layout-urile neobișnuite să devină mai comune, pe măsură ce companiile se străduiesc din ce în ce mai mult să ofere o experiență unică care să le deosebească de restul peisajului. Companiile tradiționale în general nu vor fi interesate de această estetică, dar mărcile mari dispuse să-și asume riscuri se vor aștepta ca designerii lor să gândească în afara cutiei.

8. Animație integrată

Pe măsură ce tehnologia browserului avansează, tot mai multe site-uri se îndepărtează de imaginile statice și găsesc noi modalități de a implica utilizatorii, cum ar fi animația. Spre deosebire de animația părților individuale ale fundalului menționată mai devreme, fragmentele de animație mai mici atrag spectatorii pe parcursul întregii experiențe a paginii. De exemplu, puteți anima graficele disponibile în timp ce pagina se încarcă sau puteți crea un design interesant pentru starea evidențiată a unui link. Elementele animate pot fi, de asemenea, încorporate în derulare, navigare sau chiar să devină punctul focal al întregului site.

Animația este o modalitate excelentă de a include utilizatorii în povestea unui site, permițându-le să se vadă pe ei înșiși (și viitorul lor potențial ca clienți) în personajele descrise. Chiar dacă sunteți interesat de animație doar ca un mediu vizual abstract și distractiv, aceasta poate face din aceasta o experiență semnificativă pentru vizitatorii dvs.

Acum degradeurile sunt mari, invadatoare și strălucitoare. Cel mai popular dintre cele mai recente încarnări este filtrul de gradient pentru fotografii - o modalitate excelentă de a face o imagine plictisitoare mai intrigantă. Un fundal degradat simplu poate fi, de asemenea, soluția perfectă pentru a merge cu tendința dacă nu aveți alte imagini.

Tendințe 2018

Culori strălucitoare, degrade îndrăzneți și animație... Anul viitor promite să fie unul dintre cele mai interesante și memorabile din istoria web designului. Abia aștept să văd cum vor aduce designerii acest lucru la viață și cum vor depăși granițele. La urma urmei, despre Rămâneți deschis la tendințe este ceva ce trebuie să faceți dacă doriți să oferiți utilizatorilor dvs. un UX excelent.