6 tendințe în design web care vor zgudui 2016 cu furie

Trebuie să fi întâlnit articole care spun multe despre web design. Mai ales, tendințele de web design au un impact în 2015, iar cele de rock în 2016. Totuși, spun ele de ce tendințele rock? Cred ca nu".

Nu pretindem că suntem cei mai buni experți în acest domeniu. Cu toate acestea, avem partea noastră de explicații, justificând predicțiile noastre reale legate de tendințele de design web care vor avea loc anul acesta.

1. Uitați de „clicuri”, amintiți-vă doar „gesturile”

Te-ai gândit vreodată cât de minuțioasă poate fi defilarea, mai ales când ai activat derularea infinită? Reviste celebre precum TIME au defilare infinită în secțiunea lor de știri, ceea ce face dificilă derularea în continuare a poveștilor, fără sfârșit practic.

Desigur, este posibil să utilizați track pad-ul, tastele cursorului sau rotița mouse-ului, pentru a ușura sarcina pe desktop. Ce se întâmplă dacă accesezi același site web pe smartphone-ul tău? Singurele lucruri care vă vin în ajutor sunt alternative degetele sau degetele mari. Imaginează-ți precizia necesară pentru a derula sau pentru a face clic.

Privind scenariul, astăzi, nu este surprinzător să vezi lucruri mai ușor de derulat decât de a da clic. A face clic pe o țintă precisă din mobilul tău a devenit de fapt dificil ca niciodată. Ca rezultat, ne așteptăm ca majoritatea site-urilor web să lucreze mai întâi la defilarea lor, în timp ce fă clic pe preluarea a doua prioritate.

Avem toate motivele să ne așteptăm ca această tendință să avanseze fără să ne întoarcem. Site-urile moderne au prea multe lucruri pe care să faceți clic. Cu prea multe elemente sau componente prezente pe fiecare pagină, utilizatorii trebuie să deruleze în jos întreaga pagină pentru a verifica dacă lipsesc sau nu vreun apel la acțiune (CTA).

Să luăm un exemplu pentru a demonstra punctul nostru de vedere. Exemplul prezintă caracteristici vizibile ale paginilor mai înalte, câteva zone pe care se poate face clic și derulare interactivă lină.

Credit imagine: SerioVerify

SerioVerify este probabil unul dintre cele mai bune site-uri web, un exemplu clasic de defilare paralaxă. Site-ul web are derulare paralaxă încorporată într-un mod uimitor, dar simplist, cu clicuri minime și o mare ușurință de defilare. Vinde software-ul platformei cloud pentru optimizarea vânzărilor în call-center și o face frumos.

Credit imagine: JacobsPillow

JacobsPillow este un alt exemplu bun de interfață de utilizare bazată pe gesturi, în care o bară plutitoare Facebook vine din dreapta, de îndată ce ajungeți pe pagina de pornire. Ce e mai mult? Când mutați cursorul pe butonul video, acesta este convertit din „Vizionați videoclipul” în butonul „Redare”.

2. Descoperiți textul treptat în timp ce derulați

S-au dus zilele în care încărcarea obișnuia să dureze destul de mult, din cauza prea multor date de afișat. De fapt, paginile erau vizibile, doar după ce conținutul este încărcat complet. Acum utilizatorii nu trebuie să aștepte mult, deoarece utilizatorii au posibilitatea de a vedea pagina, chiar și cu conținut parțial încărcat.

Credit imagine: Mediu

Medium este un site web, în ​​care utilizatorii pot vedea pagina de postări de blog, doar cu titluri, în timp ce conținutul real al postării de blog se încarcă încet, pe măsură ce utilizatorii derulează. Acest lucru se dovedește benefic, nepermițând utilizatorii să aștepte prea mult înainte de a începe să vadă conținutul. În plus, utilizatorii sunt mereu pe marginea scaunului pentru a verifica ce le este rezervat.

Credit imagine: NavigatingResponsibly

Un alt exemplu demonstrează de ce această tendință are un viitor strălucit în față. NavigatingResponsibly combină fold-ul cu animația, pentru a oferi o pagină de pornire strălucitor, uimitoare. Aici, conținutul este bine organizat între imagini și animații, permițându-l să se descopere atunci când pagina este derulată.

Credit imagine: PlumeWifi

PlumeWifi este un exemplu clasic de defilare cu paralaxă combinată cu efecte animate și dezvăluirea textului treptat cu derularea în jos. Un lucru unic de remarcat aici este că site-ul web menține factorul de simplitate, în ciuda combinării tuturor celor trei efecte pe fiecare pagină. De fapt, pagina de comandă este atât de bună încât detaliile sunt bine menționate, cu fonturi clare, ceea ce duce la checkout cu deduceri.

3. Site-urile web simplifică la cererea utilizatorilor

Astăzi, aveți o grămadă de utilizatori experți, care ar putea părea amatori, dar se comportă în continuare ca profesioniști, trecând lucruri și accesând mai multe file, ca și cum ar fi adaptați la mobil de secole. Oamenii vor ca lucrurile să fie rapide și nu este surprinzător să vezi oameni care se enervează cu viteze mici ale internetului.

Site-urile web au devenit mult mai rapide decât erau înainte cu câțiva ani în urmă. Astăzi, site-urile lente au același impact, ca și site-urile care nu se încarcă deloc. Modelele mai simple sunt cu siguranță o alegere ideală, deoarece nu sunt doar mai ușor de scanat, dar utilizatorii se bucură de un timp de răspuns rapid de la site-uri web, în ​​ceea ce privește încărcarea.

Acesta este motivul pentru care epoca designului skeumorf s-a dovedit a nu fi așa cum se aștepta, pur și simplu din cauza prea multului conținut aglomerat, cu utilizatorii care așteaptă cu nerăbdare, iar site-ul ia al naibii de timp pentru a se încărca. Aplicațiile sunt foarte capabile când vine vorba de design super minimal, spre deosebire de site-uri web. Ele oferă interfețe atât de frumoase, care nu doar performează, ci și arată genial.

Ați văzut deja un design plat făcând un bun început către o abordare simplistă și imediată. Această tendință va avea în mod sigur o creștere, 2016 progresând imediat. Să analizăm această tendință, luând în considerare câteva exemple minunate.

Credit imagine: StinkDigital

StinkDigital este unul dintre cele mai bune site-uri de întâlnit, demonstrând că un design minimal poate fi uimitor de plăcut pentru ochi. Când vizitați pagina de pornire, aveți doar două lucruri de observat, o bară de file de meniu și un stil Pinterest precum carton care afișează postările de pe blog. Este atât de ușor să vă deplasați pe site, încât chiar și un utilizator începător ar putea face acest lucru.

Credit imagine: StudioRotate

StudioRotate este un alt exemplu minunat de site web minimalist, care are doar o bară de meniu pe pagina de pornire, care duce la doar alte două submeniuri sub formă de Despre și urmărire, cu o opțiune de a închide bara de submeniuri.

Credit imagine: YorkshireTea

YorkshireTea este un site foarte bun care afișează simplitate combinată cu fonturi mari și apel la acțiuni bazat pe gesturi. Având la dispoziție prea multe fonturi de dimensiuni mari, videoclipuri și butoane video sub formă de ceainice, ești obligat să nu fii hipnotizat, decât dacă urăști ceaiul.

Credit imagine: NeffAssociates

NeffAssociates este o combinație bună de design îngrijit și curat, combinat cu un efect animat extrem de eficient. Când vizitați pagina de pornire, apare text, care este șters singur și apare text nou. Acest lucru este pentru a le spune utilizatorilor că persoana înrudită știe totul, și tu vrei să știe.

4. Gata cu pixelii

Doar o mână de oameni știu ce este un pixel și, mai important, cum se unesc pixelii de 72 dpi pentru a forma un inch. În cazul în care, dacă aveți un design receptiv, veți putea vedea o mulțime de procente și grile. Cu toate acestea, există încă un domeniu, care necesită o provocare mare de rezolvat - imaginile bitmap.

Peste 90% site-uri web construite pe tot globul de departe; au o rezoluție care nici măcar nu se potrivește cu afișajul modern de astăzi; lipsind și factorul de scalare. În lumea de astăzi a browserelor și a afișajelor moderne, este timpul ca imaginile vectoriale să strălucească, care au câștigat avânt anul trecut.

Material Design de la Google a dat deja un impuls acestei tendințe, cu pictograme bazate pe fonturi. Nu numai că aveți site-uri web cu încărcare rapidă, dar și scalarea imaginilor se ajustează în funcție de cerințe, fără a pierde calitatea. Aceasta este o situație ideală, mai ales pentru designeri pentru a se ocupa de browserele web moderne.

Deși tehnologia este prezentă astăzi, profesioniștii au nevoie de timp pentru a schimba obiceiurile, atunci când vine vorba de construirea unui display de calitate superioară. De îndată ce un desktop obișnuit se transformă într-un afișaj de calitate retină, designerii sunt obligați să rămână la această tendință pentru mult timp.

Credit imagine: Lovefila

Lovefila este un exemplu uimitor al modului în care pixelii perfecti ai imaginii pot face o diferență uriașă. Când deschideți această pagină de pornire, aveți prea multe culori și imagini de înaltă calitate care vă inundă întregul ecran, permițându-vă să rămâneți pe site pentru mult timp, fără a vă lăsa ochii de la ecran.

5. Spune „bună ziua” animațiilor

Animațiile joacă un rol vital în ascunderea stilului învechit al site-ului dvs. în spatele animațiilor flash sau GIF-urilor „În construcție”. Animațiile dau naștere poveștilor, care fac ca întreaga experiență a utilizatorului să fie distractivă și interactivă în același timp.

Cu toate acestea, trebuie să jucați cu precauție, în timp ce vă ocupați de animații. Nu le puneți aproape oriunde. Sculptați cu atenție personalitatea și alte elemente ale poveștii care se învârt în jurul animațiilor. Permiteți animațiilor la scară mare să acționeze ca instrument principal de interacțiune, cum ar fi notificările pop-up sau derularea paralaxă, în timp ce permiteți animațiilor la scară mică să joace un rol secundar, cum ar fi barele de încărcare, efectele de hovering, rotative etc.

Credit imagine: WhiteClaw

WhiteClaw este un exemplu minunat pentru a înțelege acest stil de UI. Aici, aveți efecte animate combinate cu defilarea paralaxă pentru a oferi un efect magnific. Există prea multe efecte animate mici care duc la pagina de pornire lăsând un impact major asupra globului ocular al utilizatorului în timp ce derulează în jos.

6. Modele variate de interfață de utilizare care proliferează înainte

Designul responsive este excelent pentru site-ul dvs., văzut posibil pe fiecare dimensiune de ecran. Cu toate acestea, designul responsive are un dezavantaj ca site-ul dvs. să apară la fel pe parcurs. Alte motive pentru care designul responsive își pierde farmecul sunt temele site-urilor care observă o creștere și creșterea site-urilor bazate pe WordPress.

A avea un aspect similar nu este neapărat rău. Cu toate acestea, modelele de design s-au maturizat, la fel și așteptările utilizatorilor. Cu toate acestea, nu vă puteți aștepta la o mulțime de inovații aplicabile modelelor de UI.

Un checkout va fi checkout; un formular de conectare ar trebui să arate ca un formular de conectare; etc. Nu are rost să reinventezi roata în fiecare loc. Asigurați-vă că modelele de interfață de utilizare utilizate ar trebui să genereze o experiență absolut fluidă pentru utilizatori. Să ne uităm la câteva dintre aceste tendințe care apar în zilele noastre:

• Meniul Hamburger : Când dați clic, se extinde și arată submeniurile prezente în interior. Arată ca un hamburger cu câteva rânduri scurte și prezent în partea de sus în aproape toate site-urile web.
• Formular de înregistrare: Cea mai comună tendință găsită în 99% dintre site-uri web, o poartă de înregistrare sau de conectare pe site. Formularul este însoțit de crearea unui cont, autentificare, butoane de conectare socială, etichete și câmpuri de formular.
• Defilare lungă sau derulare infinită : în timp ce implementați derularea lungă sau derularea infinită, trebuie să fiți conștient de utilizarea spațiului de deasupra și dedesubtul pliului. Plasați toate elementele semnificative deasupra pliului pentru o vizualizare rapidă, în timp ce plasați povestirea sub faldă, păstrând intact elementul surpriză. Împărțirea pliului în două secțiuni clare, va menține lucrurile organizate și va permite o vedere plăcută pentru ochi.
• Aspect bazat pe card : un astfel de aspect a devenit foarte popular odată cu înființarea Pinterest și ulterior implementat pe multe site-uri. Fiecare card reprezintă o bucată semnificativă de informații, ceea ce duce la un concept unificat. Forma lor dreptunghiulară facilitează rearanjarea containerelor de conținut, creând puncte de întrerupere separate.
• Imagini centrale : Vederea este cel mai puternic simț experimentat de oameni. Mai ales, imaginile HD atrag imediat atenția utilizatorului. Odată cu progresele în ceea ce privește compresia datelor și lățimea de bandă, a devenit mai ușor să evitați timpii de încărcare mai lenți, chiar și cu imagini de înaltă calitate. O imagine erou sau o imagine centrală, plasată deasupra pliului, are un impact frumos de lungă durată la prima vedere, urmată de un aspect bazat pe carduri sau de secțiuni creative.

Credit imagine: StockX

StockX este un exemplu minunat al modului în care imaginile centrale pot face magazinul dvs. de comerț electronic excepțional de strălucitor. Puteți vedea alte tendințe în tot magazinul, cu derulare infinită explorând mii de produse, un aspect bazat pe carduri pentru a descrie produsele 3-5 produse în rânduri infinite și multe altele.

2016 are multe pregătite... așa că așteptați și urmăriți!

2014 a fost anul în care utilizarea mobilă a preluat cea de pe desktop. Cu toate acestea, organizațiile lucrează mai întâi pe site-ul lor desktop, înainte de a crea un site web mobil și o aplicație mobilă. 2015 a văzut un strop de profesionalism, site-urile web au devenit minime și la obiect, indiferent de prezente pe desktop sau pe mobil. Cuvintele cheie au devenit zgomot, site-urile mai simple atragând ochii utilizatorilor.

Cu 2016 în curs de desfășurare, multe dintre tendințele care au zguduit 2015, cum ar fi designul plat, designul responsive, defilarea paralaxă, derularea infinită și multe altele, vor continua să se afle chiar și în 2016, cu un vârf de creativitate, simplitate și interactivitate îmbunătățite. În plus, încorporarea de imagini, animații, mișcări și postări pe blog va fi un fenomen comun, susținând UI/UX în favoarea utilizatorilor.

Dacă aveți alte tendințe în minte, nu ezitați să le postați în secțiunea de comentarii!