Cele mai bune practici și sfaturi pentru design web receptiv

Pe măsură ce Google continuă să acorde prioritate site-urilor adaptate pentru dispozitive mobile, a avea un site web receptiv pentru afacerea dvs. devine din ce în ce mai important. Când site-ul dvs. este receptiv, va arăta grozav pe toate dispozitivele (mobil, tabletă, desktop etc.)

Deși poate părea descurajant să revizuiți site-ul dvs. existent, designul site-ului web receptiv nu trebuie să fie dificil. Mai jos sunt câteva sfaturi utile și cele mai bune practici care vă vor ajuta să produceți un produs de site web excelent și utilizabil cu ușurință și cu puțină agitație.

Definiți-vă stilul

Crearea unei palete de culori

Indiferent dacă lucrați cu o paletă de culori de marcă predefinită sau o creați proprie, nu uitați să includeți suficiente culori contrastante pentru a putea stabili o ierarhie vizuală bine definită. Adăugarea diferitelor nuanțe de culori neutre vă va oferi multă flexibilitate în design-ul dvs.

Gândește-te mai întâi la mobil

Gândiți-vă mai întâi la cum vor arăta elementele dvs. web pe dispozitivele mobile mici, apoi aplicați-le la dimensiuni mai mari ale ferestrelor de vizualizare. De exemplu, butoanele dvs. sunt suficient de mari pentru o apăsare cu degetul și sunt distanțate suficient de departe de alte elemente pe care se poate face clic?

Creați-vă ghidul de stil după machetele inițiale, nu înainte

Unora le place să creeze un ghid de stil și să-și definească stilurile elementelor web înainte de a începe un prototip sau o machetă de înaltă fidelitate. Cu toate acestea, odată ce elementele sunt poziționate pe pagină și sunt vizualizate unul față de celălalt, designul general al paginii se poate pierde. Creați câteva machete pentru a începe, stabiliți-vă stilurile și apoi complectați paginile rămase, dacă este necesar.

Consecvent nu trebuie să însemne plictisitor

Euristica de utilizare este importantă, dar la fel este și ieșirea în evidență față de miliardele de alte site-uri web de pe web. Nu-ți fie teamă să încerci ceva diferit, să fii mai memorabil și să ajuți brandul site-ului tău să iasă în evidență din mulțime. Site-ul dvs. poate fi creativ și, de asemenea, foarte utilizabil. Un mare designer de UI sau un director de artă digitală ar trebui să poată echilibra aceste două elemente.

Unele elemente pe care poate doriți să le stilați și să le standardizați includ:

• Niveluri de titlu: H1, H2, H3...
• Imagini principale sau eroe
• Navigare primară
• Navigație secundară
• Copie a corpului
• Liste numerotate și marcate
• Anunțuri sau insigne
• Tratament pentru imagini de conținut
• Stilul trage-citate
• Widgeturi (rotatoare, încorporare sociale, calendare etc.)
• Butoane mari de îndemn
• Butoane secundare sau link-uri text
• Elemente de formă
• Note de subsol și tip șoareci legal
• Distribuție socială

Tip

Copiere blocuri

Joacă-te cu spațierea literelor (urmărire), marjele și spațierea între linii (întreprindere) pentru a-ți redefini ierarhia. Cu cât distanța este mai strânsă, cu atât textul va apărea mai greu și mai claustrofob.

Rețineți că blocurile lungi de text care rulează din partea stângă la dreapta ecranului desktopului pot fi foarte dure pentru ochi. Folosiți un bloc de copiere mai îngust atunci când este posibil. Cu toate acestea, prea multă distanță poate crea o senzație de aridă, împrăștiată.

Nu-ți fie frică să-l rupi

Dacă aveți o pagină web care este foarte bogată în conținut, împărțiți puțin conținutul cu citate, înștiințări, imagini, liste cu stiluri, tabele etc. Puteți, de asemenea, să încorporați acordeoane, drop-down-uri și carusele pentru a menține pagina interesantă și informativă. .

Da, oamenii derulează în jos

Nu cădeți în capcana vechii școli de a crede că totul de pe pagina dvs. web trebuie să apară deasupra pliului digital. Păstrați conținutul cel mai important sau convingător în partea de sus a paginii pentru a conduce un utilizator mai jos. Acesta poate fi un titlu creativ, dar descriptiv, o propoziție convingătoare sau o imagine puternică.

LEGATE DE

Principalele tendințe de design din 2020

Tip de mărire

În general, rămâneți la o dimensiune a fontului de 14 -18 pixeli pentru un site web receptiv. În general, utilizați fonturi simple sans sau serif pentru acele blocuri mai mari de copie și păstrați-le pe un fundal deschis, cu o culoare de caractere moderat contrastantă. Titlul principal poate fi mai mare, dar rețineți că poate fi necesar să fie stilat puțin mai mic după ce este întâlnit un punct de întrerupere de dimensiunea mobilă.

Tip Culoare

Trucul cu culoarea tipului este că ar trebui să aibă suficient contrast față de fundal încât să îl poți vedea cu ușurință, dar ceea ce mulți designeri nu știu este că uneori tipul poate avea prea mult contrast și este dur pentru ochi, făcându-l să pară vibrând când este privit. Încercați să utilizați textul mai deschis pe un fundal mai închis cu moderație și numai pentru blocuri de text mai mici.

Tip Greutate

Stilurile de fonturi cu greutate mai mare pot fi dificil de citit la dimensiuni mai mici și pot face ca pagina să pară întunecată și grea la dimensiuni mai mari. Stilurile de fonturi subțiri și ușoare arată grozav pe ecranele de tip retină și retină, dar pot arăta slab pe multe ecrane cu rezoluție standard.

Navigare

Hamburgeri!

Naviconul este icoana care arată și ca un mic sandviș sau hamburger cu trei linii de stivuire. Dacă simțiți că demografia generală a utilizatorilor dvs. nu este atât de priceput cu tehnologiile online, includeți întotdeauna cuvântul „meniu” deasupra sau lângă Navicon . Studiile efectuate de utilizatori până în prezent arată că un utilizator este mai predispus să navigheze pe site-ul dvs. dacă includeți cuvântul Meniu sau Navigare lângă sau deasupra Navicon.

Includeți un buton „Înapoi la început” în partea de jos a paginii cu derulare lungă

Cercetările ne spun că mulți utilizatori de dispozitive mobile nu știu cum să sară cu ușurință în partea de sus a unei pagini web în browserul lor web mobil. Pentru a rezolva acest lucru, furnizați un buton „înapoi în sus” în partea de jos a paginii dvs. web. Acest lucru va permite unui utilizator acces ușor la navigarea site-ului dacă nu este oglindită în subsol.

O altă opțiune este să creați o navigație lipicioasă. Aceasta este o bară de navigare a site-ului de sus, care rămâne întotdeauna în partea de sus a ecranului, indiferent cât de departe derulați pagina. Dacă alegeți să mergeți pe această rută, asigurați-vă că vă veți face navigarea lipicioasă la o înălțime de cel mult 100 de pixeli sau este posibil să rămâneți fără spațiu pentru conținutul paginii dvs. pe dimensiuni mai mici.

Glosar de design:

Strigă
o scurtă bucată de text plasată într-un tratament mai puternic decât restul paginii și menită să atragă atenția.

Copiere bloc
un paragraf grupat sau o serie de paragrafe de text.

Pliul (digital).
utilizat în designul site- ului web (împreună cu „ mai sus de defilare”) pentru a se referi la porțiunea paginii web care este vizibilă fără defilare. Deoarece dimensiunile ecranului variază drastic, nu există o definiție stabilită pentru numărul de pixeli care definesc pliul .

Serif
o ușoară proiecție care termină o linie de litere în anumite fonturi.

Sans Serif
un sans – serif , sans serif , gothic, san serif sau pur și simplu sans tipare este unul care nu are micile caracteristici de proiectare numite „ serif ” la sfârșitul liniilor. Termenul provine din cuvântul francez sans , care înseamnă „fără” și „ serif ” din cuvântul olandez schreef care înseamnă „linie”.

Tip (tipografic) Greutate
întuneric relativ al caracterelor unui font tip rezultat din grosimea relativă a liniilor, exprimată în lumină, bold, extra bold etc.

Utilizator
o persoană care folosește sau operează ceva, în special un computer, un dispozitiv sau alte mașini.

Vizualizarea
o zonă încadrată pe un ecran de afișare pentru vizualizarea informațiilor.

Spatiu alb
în aspectul paginii, ilustrație și sculptură, spațiul alb este adesea denumit spațiu negativ. Este porțiunea unei pagini rămasă nemarcată: margini, jgheaburi și spațiu dintre coloane, linii de tip, grafice, figuri sau obiecte desenate sau reprezentate.