Cu dispozitivele mobile care preiau controlul ca modalitate principală prin care oamenii experimentează web-ul, designul responsive este mai important ca niciodată. Acesta a afectat modul în care proiectăm pentru toate ecranele, încurajând aspecte mai simple și experiențe mai interactive. Indiferent dacă executați o reproiectare responsive sau porniți de la zero, aceste sfaturi și trucuri vă vor ajuta pe parcurs.
1. Acordați atenție navigației dvs
Adoptarea designului web responsive a avut un impact uriaș asupra navigării pe site. Deoarece proiectați pentru ecrane mai mici, designul dvs. trebuie să funcționeze în aceste limitări. Încercați să vă simplificați opțiunile de navigare și să utilizați pictograme asociate cu text, linkuri în pagină, meniuri pliabile și meniuri derulante pentru a duce oamenii acolo unde trebuie să meargă. Amintiți-vă că opțiunile de navigare prelungesc timpul pentru finalizarea sarcinilor, așa că faceți tot posibilul pentru a face accesul vizibil vizual la paginile principale.
În general, veți avea loc doar pentru patru sau cinci link-uri de bază. Acest lucru afectează nu doar navigarea site-ului dvs., ci și întreaga strategie de conținut/arhitectură de informații. Veți dori să vă asigurați că acele patru sau cinci link-uri reprezintă locurile pe care oamenii vor dori/ar trebui să meargă.
În trecut, paginile lungi de defilare erau considerate o decizie proastă de design, dar mobilul a schimbat asta. Amintiți-vă că paginile cu derulare lungă pot face ca revenirea la navigare să fie dificilă. Așadar, utilizați fie o simplă bară de navigare lipicioasă fixată în partea de jos sau în partea de sus a ecranului, fie un buton înapoi în partea de sus.
2. Butoanele dvs. ar trebui să fie ușor de identificat și de înțeles.
Butoanele dvs. de îndemn la acțiune ar trebui să iasă din pagină, atât ca culoare, cât și ca stil. Mărimea și forma acestora sunt la fel de importante ca și culoarea lor. În general, elementele circulare și dreptunghiulare sunt cele mai recunoscute ca butoane. A deveni prea creativ cu forma butoanelor dvs. poate deruta un utilizator, așa că apelați la formularele clasice.
Mărimea poate face, de asemenea, o diferență uriașă, mai ales pentru cei cu dizabilități. Asigurați-vă că butoanele dvs. sunt foarte ușor de utilizat. Designul materialului oferă următoarele specificații pentru butoane.
De asemenea, veți dori să vă asigurați că butoanele și linkurile text au spațiu generos în jurul lor, pentru a evita clicurile greșite. De asemenea, veți dori să vă asigurați că butoanele dvs. sunt în mod clar obiecte interactive. Umbrele, degradeurile și alte adăugiri stilistice care împrumută dimensiuni pot contribui la asigurarea oamenilor că pot face clic pe butoanele dvs.
3. Începeți-vă designul având în vedere partea de mobil
Dacă organizarea conținutului, navigarea și grafica dvs. au sens pe un smartphone, acestea vor fi clare și pe o tabletă sau pe un dispozitiv mai mare, cum ar fi un desktop. Acesta este unul dintre avantajele designului responsive. Atunci când un design trebuie să funcționeze pe o varietate de dimensiuni de ecran, ajută la reducerea funcționalității conținutului la ceea ce este necesar.
4. Planificați organizarea conținutului pe site înainte de a-l proiecta
Proiectarea unui site web fără un simț puternic al structurilor sale de conținut este un fel de a alege un cadru elegant înainte de a crea efectiv un tablou. Trebuie să aveți o idee despre cum va fi organizat conținutul, astfel încât să puteți vedea imaginea de ansamblu.
5. Conținutul și designul înfloresc atunci când sunt dezvoltate în tandem.
Organizarea conținutului înseamnă mai mult decât copierea și lipirea blocurilor de text pentru a vedea unde se vor potrivi pe o pagină. Alcătuiți o listă cu mesajele pe care vreți să le transmită viitorul site responsive. Aflați cum aceste idei curg de la una la alta. Proiectați în jurul conținutului și bazați-vă navigarea pe organizarea acestuia.
6. Folosiți doar cuvintele de care aveți nevoie
Asigurați-vă că fiecare cuvânt de pe site contribuie la transmiterea mesajului dvs. Desktop-urile permit mai mult text. Acesta nu este întotdeauna un lucru bun. Cu dispozitivele mobile, trebuie să lucrați în limitele ecranelor mai mici.
Dacă scrieți de pe un site desktop, este posibil să aveți nevoie de câteva modificări pentru a-l afișa corect pe mobil. Consolidați textul, utilizați punctele marcatoare și alte instrumente structurale pentru a facilita citirea acestuia.
7. Tipografia contează și mai mult pe ecranele mai mici
Asigurați-vă că scalați dimensiunea fontului, înălțimea liniei și lățimea pentru a se potrivi bine cu diferite dimensiuni de ecran. Folosirea unor fonturi mai mari poate îmbunătăți semnificativ lizibilitatea. Deci, utilizați ceva în intervalul de 16 px pentru textul corpului și ajustați în sus sau în jos, în funcție de designul fontului.
Asigurați-vă că utilizați un font foarte lizibil, în special pentru fragmente vitale de text, cum ar fi etichetele de navigare. Nimeni nu vrea să vadă un font script în meniu. Spațiul este, de asemenea, important pe ecranele mai mici. Asigurați-vă că înălțimea liniei este setată la o valoare adecvată.
Când proiectați având în vedere dispozitivul mobil, amintiți-vă că un font mare poate împinge conținutul important pe care doriți ca cineva să-l citească mai jos pe pagină.
8. Adoptați spațiul negativ
Spațiul negativ ajută la atragerea atenției asupra părților potrivite ale designului dvs. Folosiți spațiul negativ (alias, spațiul alb) pentru a crea pauze în designul dvs. și a evidenția acele zone de conținut mai importante.
9. Creați și testați prototipuri responsive
Veți avea nevoie de un prototip funcțional care să vă ajute să înțelegeți cum va funcționa site-ul. Asigurați-vă că testați prototipul pe dispozitive reale, acest lucru vă va economisi timp și bătăi de cap. De asemenea, asigurați-vă că consultați „ Bune Practici în Prototiparea unui Site Web” pentru mai multe detalii despre ceea ce aveți nevoie pentru a crea prototipuri care să răspundă atât nevoilor utilizatorilor, cât și ale părților interesate.
Designul responsive a schimbat navigarea pe internet în bine
Popularitatea dispozitivelor mobile și a tabletelor a schimbat modul în care proiectăm site-uri web și navigăm prin ele. Spațiile mari de pe desktop-uri au dus la apariția unor elemente grafice și de conținut inutile care au afectat mesajul de bază al unui site. Designul responsive ne permite să eliminăm ceea ce nu avem nevoie, astfel încât toată lumea să poată face ceea ce are nevoie, mai rapid.
