Meniul
AcasăCuvânt

Culori la modă în design web. Întoarcerea la rădăcinile minimalismului. Evitarea fotografiilor de stoc „tipice”.

În era dezvoltării tehnologiilor IT, pur și simplu nu poți sta deoparte și urmări ce se întâmplă. Trebuie să se întâmple asta. Pentru a nu fi un străin, trebuie să atrageți cunoștințe din toate sursele posibile și imposibile și ține-te la curent cu toate evenimentele. 2016 se apropie de sfârșit, ceea ce înseamnă că 2017 este deja la colț și va aduce ceva nou în domeniul dezvoltării web. Și ce mai exact, veți citi în acest articol!

Nu fi un străin, ține pasul cu vremurile.

roboții

Paginile web simple nu mai sunt atât de populare, devin din ce în ce mai interactive, mai mult, după un timp viața noastră online va fi atât de simplificată de diverse prompturi interactive încât nu va trebui să ne încordăm deloc creierul. Boții sunt acum folosiți pe scară largă și acesta este doar începutul. Toată lumea cunoaște aplicația Slack pentru comunicare corporativă și acolo poți găsi și un bot care te întâmpină, îți cere numele și îl introduce imediat în profilul tău. Boții apar în multe alte instrumente și aplicații, deschizând era asistenților online.

Motion UI

Animațiile, videoclipurile, GIF-urile au devenit de mult viața noastră de zi cu zi, totul este atât de plin de viață și de atractiv, de ce altceva are nevoie utilizatorul? Sunt utilizate pe scară largă pentru a crea rapid tranziții și animații CSS pentru a asigura ușurința în utilizare. Cea mai recentă versiune a Motion UI este echipată cu un sistem batch de animație, șabloane CSS flexibile cu capabilități avansate pentru tranziție completă și poate funcționa cu tot felul de biblioteci de animație JavaScript. Suntem mai mult decât încrezători că mobilitatea va înlocui complet utilizarea imaginilor statice.

Adaptabilitate

Mobilul în primul rând este sloganul timpului nostru, în fiecare zi fiecare persoană, măcar o dată (ca să nu mai vorbim de acei dependenți care chiar trăiesc în mâinile lor cu un telefon) caută informații pe internet, trimite mesaje sau efectuează apeluri, așa că utilizarea lor ar trebui să fie cât mai convenabil. Dacă sunteți proprietarul unui site web și încă nu ați auzit despre receptivitate, este timpul să vă luați din picioare și să o implementați , pentru a oferi clientului dumneavoastră potențial confort în utilizarea site-ului dumneavoastră. După cum probabil ați observat deja, acesta este un adevărat must-have în lumea designului și dezvoltării web; în plus, vă va ajuta să economisiți în dezvoltarea de aplicații mobile.

Site cu o singură pagină

Te confundă site-urile cu o grămadă de pagini, unde există atât de multe din toate și totul este atât de de neînțeles? Nu vă faceți griji, era site-urilor web cu o singură pagină este chiar după colț. Acest tip de site este foarte popular în rândul companiilor mari, sunt mai comod de utilizat și este mai ușor să găsești informațiile necesare unui utilizator care a vizitat site-ul într-un anumit scop.

Javascript este în creștere acum

Javascript este viitorul, în ciuda zvonurilor că are deficiențe și slăbiciuni. Nimeni nu contestă faptul că sunt într-adevăr prezenți, dar ce este ideal în această lume? Chiar și Mac OS folosește JS în hardware-ul său. Mai mult, bibliotecile sale front-end, cum ar fi Angular, Node, React câștigă rapid popularitate, precum și alte biblioteci mai mici.

Nu este surprinzător faptul că Javascript a devenit o parte integrantă a stivei standard de dezvoltare web, împreună cu HTML și CSS. Și acest fapt vorbește de la sine.

Efect de paralaxă

Acest efect este cel mai des folosit, dar nu mulți oameni știu exact cum se numește. Pentru a clarifica: acesta este cel mai bun mod de a adăuga straturi 3D pe site-ul dvs. web , poate fi folosit și pentru a adăuga un efect 3D uimitor.

Tendințe care vor schimba lumea

În acest articol, am adunat toate tendințele promițătoare de dezvoltare web care vor schimba imediat lumea. Dar nu știm încă ce tendințe ne rezervă 2017. Fii la curent cu tehnologiile moderne și poate într-o zi vei fi atât de inspirat de ceea ce se întâmplă, încât vei veni și tu cu ceva revoluționar?

Un bun proprietar de site 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 numai că am oferit o listă cu tendințele de design web, dar am făcut și recomandări pentru aplicarea acestor tendințe pe site-ul dvs.

1. Utilizabilitatea va deveni o marfă.

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

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

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

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

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

2. Textele lungi vor dispărea

Să fim sinceri cu noi înșine: nimeni nu citește texte lungi. Excepțiile includ cărțile și articolele. Atunci când un client dorește să comande un serviciu sau produs, este interesat de informații specifice: preț, principalele caracteristici ale conținutului produsului/serviciului, condițiile 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 am menționat mai sus (vezi punctul 2), traficul mobil este în creștere și există chiar și utilizatori care nu au experiență desktop. De aceea, pentru a nu pierde clienți, vă recomandăm să vă optimizați site-urile pentru dispozitive mobile.

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

” de John Moore Williams, șeful Strategiei de conținut la Webflow.

Sfârșitul anului în curs este aproape și fiecare web designer și-a pus cel puțin o dată o întrebare importantă: ce va defini web design-ul în viitorul 2017? Am decis să găsesc răspunsul la această întrebare și i-am întrebat pe designerii WebFlow ce tendințe credeau că vor domina în următoarele 365 de zile. Am dat și propriile mele comentarii la gândurile lor.

În primul rând, să obținem opinia liderului designerului Webflow, Sergie Magdalin.

1. Design bazat pe conținut

„Dispunerea elementelor de proiectare într-o structură dată ar trebui să fie astfel încât cititorul să poată înțelege cu ușurință ideea principală fără a-și reduce viteza normală de citire” -Hermann Zapf

În ultimii câțiva ani s-a înregistrat o schimbare dramatică în gândirea despre rolul designului în afaceri. Anterior, designul era văzut ca pasul final în procesul de creare a unui obiect: designerul-magicul vine la sfârșit și stropește praful magic pe produsul nostru pentru a-l face mai bun decât concurența.

A fost foarte interesant să urmărim metamorfozele care au loc cu prioritățile de dezvoltare.

Iar cel mai frumos lucru la aceste metamorfoze a fost trecerea la un model în care conținutul stă din nou în fruntea mesei. Designerii din întreaga lume și-au dat seama că utilizatorii vizitează site-urile web în primul rând pentru conținut, fie că este vorba de tweet-uri scurte, articole specializate de lungă durată sau cele mai recente meme-uri de pe Internet. Rolul suprem al designului este de a prezenta conținutul în modul cel mai atractiv și de înțeles și de a obține cele mai bune rezultate din acesta.

Acesta este unul dintre motivele trecerii de la designul „skeuomorf” (unde elementele sunt descrise cât mai asemănătoare cu omologii lor din lumea reală) la un design plat, minimalist. Din aceste considerente, Google a creat Material Design.

Desigur, după cum afirmă a treia lege a lui Newton, pentru fiecare acțiune există o reacție la fel de puternică. Mulți designeri cred că moda pentru designul plat a „ucis” chiar spiritul designului. Ne așteptăm ca această dezbatere să continue și în anul care vine, dar accentul va rămâne pe conținut - baza oricărei lucrări de proiectare.

2. Interacțiune de înaltă calitate între designeri și dezvoltatori și designeri între ei

Importanța designului în modelarea afacerilor este în creștere, așa că se pune tot mai mult accent pe designeri care lucrează împreună cu colegii lor designeri și colegii lor dezvoltatori.

Această preocupare pentru interacțiunea cu designerii a apărut în parte din cauza volumului masiv de aplicații mobile și web care sunt dezvoltate astăzi. Pe lângă faptul că astfel de corporații gigantice precum Google, Facebook, Twitter și LinkedIn necesită o echipă de design herculean din părți complet diferite, designerii trebuie să fie mereu pe aceeași pagină unii cu alții. Aceasta înseamnă că este necesară o mai bună comunicare despre proiect și despre cum să lucrăm împreună cel mai eficient.

Pentru a face această sarcină mai ușoară, au fost create multe instrumente, de la șabloane și panouri colaborative din Team Webflow la Figma, un editor de interfață grafică care arată schimbările în timp real. Sunt sigur că în 2017 aceste platforme vor fi îmbunătățite și completate.

Când vine vorba de colaborarea dintre designeri și dezvoltatori, se acordă multă atenție procesului extrem de important de predare a muncii. De exemplu, în loc să trimită imagini statice grele și voluminoase, designerii pot acum să partajeze machete redate live datorită instrumentelor precum InVision, Marvel, UXPin.

Carson Miller a analizat acest lucru în articolul său recent „The Future of Front-End Design” de pe TechCrunch:

„Mai devreme sau mai târziu, instrumentele pentru crearea de design și modele de design vor înlocui complet dezvoltarea front-end. Puteți crea cu ușurință o bază de înaltă calitate pentru oricare dintre cadrele dvs. fără a fi nevoie să scrieți codul manual.”

3. Proces simplificat de la designer la dezvoltator

Instrumentele de proiectare și prototipare menționate mai sus vă permit să vizualizați diferitele etape ale colaborării prin vizualizări care variază de la fișiere animate Keynote până la site-uri web complet funcționale. Această metodă de partajare a materialului de lucru reduce timpul de răspuns în cadrul proiectului, crescând astfel calitatea designului, crescând viteza echipei de dezvoltare și reducând posibilitatea dezamăgirii cu rezultatul. De asemenea, îmbunătățește interacțiunea cu clienții. De exemplu, pentru mulți utilizatori WebFlow, întâlnirile cu clienții s-au transformat în întâlniri de lucru cu drepturi depline, unde designerii pot implementa rapid idei și toată lumea își poate testa ideile aproape imediat.

Tendințele de design web în anul viitor, potrivit designerului de produse Gadzhi Kharkharov:

4. Titlu mare, tare

Pe măsură ce lumea designului web începe să se concentreze asupra conținutului, este din ce în ce mai obișnuit să vedeți titluri inspiraționale pe site-uri web cu fonturi la fel de mari și îndrăznețe ca și conținutul lor.

Partenerii Heco #MadeInWebflow

După cum puteți vedea din exemple, „mare” și „aldine” nu se referă doar la descrierea fontului. Mai degrabă, este vorba despre dedicarea unei părți semnificative a ecranului de pornire unei declarații simple, dar puternice și autonome despre produs sau serviciu. Un astfel de titlu ar trebui să conțină esența și să fie de înțeles pentru orice vizitator, evitând pompozitatea inutilă (bine, expresia „Proiectează imposibilul” poate suna prea tare).

În mediul aglomerat de astăzi, supraîncărcat de informații, declarații scurte și puternice ca acestea funcționează bine pentru orice marcă.

5. Markup complex care provine din elementele de bază ale designului grafic

Dacă vrem să anticipăm dezvoltarea designului web (cel puțin latura sa vizuală), trebuie să ne uităm la istoria designului grafic.

În ultimii câțiva ani, aspectul paginii web a fost limitat la CSS, dar noi module precum Flexbox și CSS Grid (care apar în martie 2017) vă vor permite să vă realizați cele mai nebunești idei de aspect web.

Sarcina noastră principală acum este să înțelegem cum ar trebui să funcționeze noul aspect al grilei blocurilor în cadrul designului responsive.

Iată câteva exemple de la ce să vă așteptați (presupunând că aveți un browser care acceptă CSS Grid, cum ar fi Firefox Nightly, Safari Technical Preview sau Chrome Canary):

Laborator de amenajare experimentală Jen Simmons

Acordați atenție stilului blocului principal - o referire clară la istoria designului grafic.

Grilă după exemplu

Puteți vedea mai multe exemple pe site.

6. Mai multe SVG-uri

SVG (grafică vectorială scalabilă) are mai multe beneficii pentru designeri și dezvoltatori web decât formatele de imagine tradiționale, cum ar fi JPG, PNG sau GIF.

Principalele avantaje ale SVG sunt descrise chiar în numele formatului - scalabilitate și vector. Spre deosebire de formatele bazate pe raster și pixeli, imaginile SVG sunt formate din vectori - descrieri matematice ale formei unui obiect. Aceasta înseamnă că SVG este independent de rezoluție, iar imaginile în acest format vor arăta grozav pe orice ecran și dispozitiv. Nu este nevoie să vă faceți griji că imaginile sunt neclare pe retină.

Dar asta nu este tot. SVG este, de asemenea, renumit pentru că nu necesită trimiterea solicitărilor HTTP. Dacă ați verificat vreodată viteza de încărcare a site-ului dvs. web, este posibil să fi observat că aceste solicitări HTTP pot încetini cu adevărat site-ul dvs. Nu există o astfel de problemă cu SVG.

7. Instrumente pentru proiectarea receptivă bazată pe reguli

Designul responsive a schimbat complet modul în care privim aplicațiile web și le creăm.

Dar, în mod ciudat, principiul de funcționare al programelor de proiectare nu s-a schimbat deloc. Cele mai multe dintre aceste instrumente funcționează astfel: trebuie să creați o pagină similară din nou și din nou pentru diferite dispozitive și rezoluții. Într-o industrie care cere generare rapidă de idei, dezvoltare rapidă și lansare rapidă, această pierdere de timp este pur și simplu inacceptabilă.

Un nou val de instrumente de proiectare (cum ar fi Figma) este de așteptat să se bazeze pe „reguli” care ajustează aspectul site-urilor pe diferite ecrane și dispozitive, reducând astfel numărul de pași repeți de proiectare. Astfel de instrumente se bazează pe relațiile spațiale ale elementelor și, pe măsură ce schimbăm dimensiunea ecranului sau dispozitivul, ele se străduiesc să mențină aceste relații prin modificarea dimensiunilor elementelor și a umpluturii dintre ele.

Apropo, astăzi există instrumente similare pentru aspectul site-ului web nu numai pentru designeri, ci și pentru utilizatorii obișnuiți. De exemplu, TruVisibility.com - platforma adaptează designul creat după anumite reguli, conform cărora aspectul și dimensiunile elementelor sunt ajustate la dimensiunea ecranului. Tot ce rămâne este să faceți câteva ajustări pentru a vă asigura că pagina web arată așa cum ar trebui pe dispozitive. Utilizatorul nu trebuie să recreeze versiunea pentru dispozitive mobile, iar acest lucru îi economisește în mod semnificativ timpul.

Tendințele de design pentru 2017 conform lui Ryan Morrison, designer grafic senior.

8. Mai multe culori luminoase

Când era minimalismului și brutalismului a început în designul web în 2016, designerii au încercat să adauge mai multă personalitate muncii lor fără a depăși stilurile la modă. Și există cel puțin câteva cazuri în care culorile strălucitoare și îndrăznețe au fost folosite cu mare succes.

Aruncă o privire la noul site Asana cu o pată de culoare:

Noua pictogramă a aplicației Instagram a primit multe critici, dar această reproiectare a reîmprospătat cu siguranță marca:

Tot ceea ce Stripe nu necesită o vizualizare separată:

După cum puteți vedea, nu sunt doar culori strălucitoare și îndrăznețe. Degradeurile revin și ele în stil, amestecând și estompând culorile în nuanțe care amintesc de cerul de la amiază sau de un apus de soare strălucitor. Este o renaștere a naturalismului, cu culori vibrante și degrade îndrăzneți și, personal, aștept cu nerăbdare să văd mai multe din acest tip de lucrări în 2017.

Deși, poate merită să reduceți puțin luminozitatea? Te urmărim, Asana.

9. Mai mult accent pe animație

Elementele animate au jucat de mult un rol cheie în interfața web, iar această tendință va continua și în 2017. De fapt, atâta timp cât designerii au acces la instrumente pentru a dezvolta animații convingătoare, vom vedea că aceste efecte devin mai vizibile și mai sofisticate.

Acest subiect este deosebit de important deoarece crearea animației devine din ce în ce mai ușoară în fiecare zi. La Conferința Design & Content din 2016, guru al animației Val Head a subliniat că atunci când proiectează elemente animate, designerii ar trebui să țină cont de obiectivele și nevoile mărcii pentru a obține efectul pe care creatorii de conținut se așteaptă. Dacă acest sfat este luat în considerare, animația va îndeplini sarcini care sunt semnificative pentru brand și nu doar să îi provoace o migrenă utilizatorului.

10. Marcaje neobișnuite

2016, ca și anii precedenți, este renumit pentru discuțiile nesfârșite conform cărora designul web fie moare, fie își pierde spiritul.

Cei care încearcă să convingă pe toată lumea că designul web a murit, exagerează în mod clar. Mulți continuă să caute modalități de a prezenta conținutul utilizatorilor în moduri noi. Una dintre cele mai tentante moduri este de a sparge sistemul și de a ignora aspectul obișnuit al grilei dictat de regulile designului responsive.

Metoda de marcare „ruptă” implică elemente care trec dincolo de grila aliniată meticulos. Astfel de tehnici pot părea uneori chiar neplăcute pentru ochi. De exemplu:

Texte și imagini care se ciocnesc unele de altele:

Texte și imagini împrăștiate (aparent) aleatoriu pe pagină:

Aceasta a fost prima parte a traducerii articolului „18 tendințe de design web în 2017”. Sunteți de acord cu opiniile experților Webflow? Ce fel de web design crezi că va fi la modă în anul viitor?

Având în vedere dezvoltarea activă a tehnologiei, comunicarea noastră cu computerul devine din ce în ce mai firească și apare posibilitatea comunicării interactive folosind vocea. Prin urmare, viitorul aparține asistenților vocali, dar aceasta este următoarea generație de aplicații.

Un buton de apel la acțiune ar trebui să fie un element cheie pe orice pagină. În zilele noastre se folosesc adesea culori prea strălucitoare și iritante. Dar pentru a sublinia butonul CTA în 2017, animația simplă va fi din ce în ce mai folosită; nu este atât de enervant, dar își îndeplinește perfect funcția de a atrage atenția.

Amintiți-vă că principalul lucru este să nu exagerați! Folosiți mișcări fluide în animație după câteva secunde; acestea atrag atenția fără a fi prea enervante. Vă recomandăm să adăugați un buton de îndemn la acțiune în antetul site-ului pentru un efect mai bun. Și nu numai pe site, adaugă astfel de butoane și în mailingurile tale!

Fotografiile mari, și mai ales videoclipurile, atrag întotdeauna atenția. Mai mult, intriga video în sine poate interesa cu adevărat vizitatorul.

Dacă acesta este un videoclip de fundal, atunci aveți două într-unul - este atât o fotografie, cât și un videoclip. Deoarece videoclipurile sunt încă folosite relativ rar ca fundal, ele trezesc imediat interesul.

Încercați să creați videoclipuri PERSUASIVE. Oamenii adevărați din videoclipul tău ar trebui să creeze un sentiment de autenticitate, sinceritate și autenticitate. Asigurați-vă că utilizați o varietate de tactici: recenzii ale clienților, răspunsuri motivate la potențialele obiecții și demonstrații ale produselor.

Cu ajutorul unor astfel de videoclipuri, vei putea depăși orice îndoieli ale clienților tăi mult mai rapid și vei încheia afacerea.

Tendința #4 pentru designul site-urilor web în 2017 – derularea ca tip principal de navigare

În 201, defilarea devenise deja larg răspândită. El a făcut informațiile mai semnificative. Acum utilizatorii vor fi bucuroși să parcurgă texte lungi, în loc să urmeze link-uri și să aștepte ca paginile să se reîncarce.

Informațiile importante din antetul site-ului, cum ar fi meniul principal de navigare, numărul de telefon sau butonul de apel invers, sunt fixe și întotdeauna disponibile fără acțiuni suplimentare.

Derularea vă ajută să spuneți fără probleme o poveste interesantă, să afișați o mulțime de fotografii și, prin urmare, să depășiți îndoielile utilizatorilor și să încurajeze conversia.

O pagină de destinație bine concepută îi duce pe clienți într-o călătorie atent concepută care duce la conversie, fără a-i obliga să se gândească de două ori la alegerea unei căi.

Oferiți produse similare și similare, precum și promoții profitabile în timpul procesului de finalizare a comenzii pentru a crește media cecului. Produsele conexe din comerțul electronic reprezintă 10 până la 30% din venituri. Amintiți-vă că a vinde unui nou client este de zece ori mai dificil decât a vinde cuiva care este deja gata să plătească.

Cu ajutorul unei ferestre pop-up, puteți reține clientul atunci când este pe cale să părăsească site-ul. Dar simțul proporției este foarte important aici, deoarece mulți utilizatori au început să-i urască.

Dar dacă deveniți creativ cu aceste notificări și nu cereți nimic în schimb, cum ar fi oferirea de transport gratuit, notarea unui cod de cupon sau descărcarea unei perioade de încercare gratuită, abordarea devine mai puțin iritante.

Ce aduce 2017 nou pe web? Care sunt principalele direcții și tendințe în design web la care ar trebui să ne așteptăm? Acum vom afla totul – în formatul unei recenzii succinte a celor mai izbitoare tendințe, folosind exemple de site-uri TRENDY.

Designul web este actualizat constant cu idei îndrăznețe, iar popularitatea a tot ceea ce este practic stimulează deja dezvoltarea tendințelor. La meniurile care glisează prin butonul hamburger și navigarea care se ascunde automat la derulare, se adaugă moda ecranelor divizate, împărțind paginile principale și celelalte în jumătate.

Citeste si: 8 tendințe web pentru 2019: layout-uri moderne

În ceea ce privește atractivitatea estetică, stilul plat a dominat WEB-ul timp de 3 ani la rând. Apoi Google a introdus designul de materiale, care ne-a scos puțin din abstracția vizuală. În 2017, designul web va face încă un pas înapoi spre realism. Fie că este vorba de forme, de alegerea culorii sau de funcționalitate – 2017 va fi anul hibrizilor în care realitățile lumii fizice și ale tehnologiei se intersectează. Drept urmare, vă puteți aștepta la o experiență mai bună de navigare pe web.

Iată nouă tendințe de design web care pot reduce decalajul.

1. Navigare pop-out

Astăzi, când publicul mobil deja se bucură de navigarea pe internet, importanța spațiului pe ecran este mai mare ca niciodată. Ascunzând funcționalitatea și navigarea până „până când este nevoie”, designerii web și agenții de marketing moderni se străduiesc să elibereze spațiu pe site-ul web pentru vânzarea imaginilor.

Meniurile pop-out, create special pentru smartphone-uri, îmbunătățesc UX pe ecrane mari. Destul de ciudat, meniul ascuns face o treabă mai bună de a sublinia ceea ce este important, încurajându-vă să vă concentrați pe un anumit obiectiv la un moment dat. Când deschideți meniul, acesta devine centrul atenției pe pagină și este, de asemenea, utilizat în mod activ în procesul de explorare a site-ului.

Avantaje:

  • Economisirea spațiului pe ecran
  • Concentrând atenția utilizatorilor asupra meniului, îmbunătățește navigarea pe site
  • Ascunderea elementelor de navigare vă ajută să vă concentrați asupra altor lucruri (cum ar fi obiectivele de conversie)
  • Aspect îmbunătățit al primului ecran
  • Structură de design mai flexibilă

Citeste si: Cele mai bune 20 de exemple de design de pagină de pornire a site-ului web

Cele mai bune practici:

Design de culoare pentru a se potrivi cu paginile site-ului. Efectul maxim atunci când simplificați o pagină web în acest mod este obținut cu un fundal cu o singură culoare sau cu o structură de meniu glisant într-o singură culoare.
Nu distrageți atenția utilizatorului asupra navigării - este mai bine să lăsați caracteristicile și decorațiunile pentru paginile în sine. Desigur, un design modern frumos și un meniu elegant nu vor strica:

Tipografie simplă mare. Tipografia elegantă și curată adaugă varietate modelului de mai sus de design web „practic”. Fonturile mari/aldine, ușor de citit, îmbunătățesc eficiența navigării și umple spațiul.

Designerii urmează adesea această tendință folosind litere mari.

Pictograme hamburgeri cu o cruce pentru a deschide/închide meniul. Deoarece standardul permite, ar fi mai corect să le combinați într-o singură pictogramă pentru o mai mare claritate și vizibilitate.

Schimbați/suprapuneți conținutul la deschidere. Un meniu pop-up este rareori creat pentru a ocupa întregul ecran. În mod obișnuit, lăsând vizibil o parte din conținutul paginii, ceea ce facilitează revenirea la acesta pe un ecran mic. Pe desktop arată ca o „imitație mobilă” la modă.

2. Contrar paradigmelor de navigare – alternative

În zilele întunecate ale web-ului, existau două tipuri de navigare: meniul de sus și bara laterală. Cu design responsive a apărut meniul hamburger, care acum este criticat pe scară largă pentru că face mai dificilă implicarea utilizatorului/dificil de descoperit/mai puțin eficient.

Avantajele navigației non-standard:

  • Design unic
  • Inovațiile atrag
  • Experiență îmbunătățită a utilizatorului (UX)
  • Pentru designeri - noi posibilități de proiectare a site-urilor web

Cele mai bune practici:

Citeste si: 11 site-uri web creative ale studiourilor interne de web design

Diverse experimente cu navigarea pe site. Cu o atitudine atât de ambiguă față de „burgeri”, în 2017 ar trebui să ne așteptăm la apariția unor inovații interesante în navigație.

Meniul unic al Hillsiderancho.com combină navigarea de sus, stânga, dreapta și derulare

Niciun meniu de navigare. Utilizatorul modern se confruntă cu mult conținut și nu trebuie să i se spună ce să facă în continuare. Sul! Natura organică a acestui comportament a fost deja remarcată în tendințele web anterioare (orizontală, defilare infinită, control de la tastatură, gesturi...). Unii designeri elimină cu totul meniurile, invitând vizitatorul să folosească/obțină o experiență „avansată” de cercetare a site-ului. Adaptarea site-urilor pentru dispozitive mobile și tablete schimbă, de asemenea, UX/interfețele în sine și deschide perspective pentru derularea orizontală.

Site-ul nu are meniu de navigare - vi se cere să derulați pentru a găsi conținut, puteți derula cu cursorul

Citeste si: Cele mai neobișnuite și originale site-uri

Meniu pop-up. Eram atât de pasionați de Drop-Down încât nici nu ne-am gândit la o alternativă simplă la navigarea Pop-UP. În exemplul de mai jos, meniul apare în centrul ecranului. În general, paginile web au suficient spațiu pentru a crea o navigare accesibilă și proeminentă, fără liste derulante.

Navigarea pop over este utilizată atunci când trecerea cursorului peste una dintre cele 6 secțiuni schimbă fundalul întregului meniu pe ecran

3. Carduri - inspirație din electronicele portabile

Așa cum utilizatorii de telefonie mobilă au schimbat designul site-urilor web moderne, dispozitivele portabile încep să le influențeze designul. Cu zeci de milioane de articole purtabile vândute din 2015, utilizatorii au învățat să prețuiască excelența rațională și în alte domenii. Economisind spațiu pe ecran, dispozitivele electronice portabile îi vor învăța pe designeri web să simplifice lucrurile vizual, iar agenții de marketing vor învăța să specifice și să oficializeze în continuare sarcinile site-ului. Principalele reguli ale designului web bazat pe principiul containerelor: elegant, concis și fără prea mult efort - ideologia „mai puțin este mai mult” nu se limitează la dimensiunile ecranului.

Avantaje:

  • Design UX optimizat
  • Mai puține ambiguități și distrageri
  • Minimalismul accelerează încărcarea site-ului

Cele mai bune practici:

Dale, principiul containerelor și blocurilor în structura paginilor web. Tendința se menține de mai bine de un an (2014 - 2016...) și probabil 2017 va continua această tendință. Modelele de gadgeturi populare și noi în prezent (ochelari inteligenți, ceasuri, brățări, agrafe de haine, senzori încorporați în haine...) sunt realizate într-un stil laconic și informează la fel de discret utilizatorul. După cum era de așteptat, tehnologia purtabilă va da o nouă viață interfețelor ușor de citit. Modelul de container al interfeței de utilizare a cardului este conceput pentru a fi autonom și se adaptează bine pentru ecrane mai mari.

Pictograme SVG mari. Pictograma are nevoie de scalabilitate, simplitate - astfel încât să arate pe dispozitivele HD și să fie observată printr-o privire rapidă.

Paletă de culori strictă. Schemele de culori la modă revin acum la elemente de bază. Designul site-ului web în două culori (duoton) sau designul alb-negru cu adăugarea unei singure culori devin din ce în ce mai popular.

Spațiu alb suficient. Pentru a asigura coerența în diferite formate, „aer” este adăugat în paginile site-ului. Acest lucru se numește minimalism extrem. Pe lângă estetică: o atmosferă sofisticat-casual, economisirea de spațiu pe pagini, oportunități de a atrage atenția etc.


4. Material Design Lite (MDL)

Citeste si: Cele mai bune modele de magazine online în stiluri Flat și Material

Material Design Lightweight (MDL) de la Google oferă o bibliotecă de șabloane, seturi de elemente (carduri, formulare, pictograme, butoane...) și este o interpretare a unui catalog de componente Polymer gata făcute.

Cu tutoriale despre șabloane preexistente și componente open-source, MDL face designul de materiale deschis pentru implementare pe orice site sau aplicație. Straturile pseudo-3D, umbrele, animațiile sunt elemente de interfață ale designului web clasic, care aduc uzul mai aproape de simularea lumii reale.

Avantaje:

  • MDL diferă în bine de designul site-urilor web tradiționale, păstrând în același timp beneficiile originale ale designului web clasic
  • Ușor de înțeles datorită interfeței clare și realiste
  • Disponibilitate pe mai multe platforme pentru toate dispozitivele (fără legarea la JS)

Cele mai bune practici:

Mecanica lumii materiale. Tratați elementele stilistice ale MDL ca și cum ar fi obiecte fizice reale, și anume:

  • Umbrele ar trebui să arate ca și cum ar fi aruncate de o sursă de lumină naturală
  • Alegeți dimensiunea și grosimea elementelor ca pentru obiectele reale - în conformitate cu legile fizice
  • Mișcare – răspuns la interacțiunea utilizatorului

Personalizare. Profitați de biblioteca de componente MDL selectând ceea ce aveți nevoie în combinația potrivită.

Paletă de culori plată. Materialul în stil MDL este cel mai potrivit pentru culorile plate - combinații luminoase și îndrăznețe ale acestora. De obicei, sunt alese o culoare principală și o culoare de accent. Se potrivește, de asemenea, cu estetica minimalistă susținută de cele două tendințe anterioare.

Citeste si: Culori în web design: tendințe de culoare (culori strălucitoare)

5. Culori vintage

Tonurile de gri au dominat web-ul în ultimii doi ani: fundaluri gri deschis în loc de alb, text gri ardezie în loc de negru și umbre subtile de gri care creează profunzime într-un stil de design material. În 2017, nuanțele vintage superbe revin în sfârșit.

Magazinul online de încălțăminte folosește culori dezactivate precum sepia. Designul de culoare, imitând vintage cu fotografii vechi, subliniază calitatea înaltă a produsului (în cele mai bune tradiții ale brandului de familie)