Basix Greșeli comune în designul web

Cu toții facem greșeli. E natura umană. Cu toate acestea, în industria de web design, multe elemente pot fi puse în aplicare greșit, cu doar câteva tweaks necesare pentru a le face stelare. Acestea variază de la tipografie la umplere, unde o singură cifră poate deteriora drastic designul dvs. web. Din fericire, odată ce ați reușit să identificați cele mai frecvente greșeli, câteva clicuri și câteva butoane de pe tastatură pot salva un design scufundător. Astăzi, vom analiza unele greșeli de design web pe care fiecare designer ar trebui să le vegheze.


Cu toții facem greșeli? unii sunt mai meioși decât alții.

Despre Basix

Noastrele noastre de la Basix sunt despre începerea designului web. Indiferent dacă sunteți nou în designul web sau ați fost proiectați pe web pentru un timp și sunteți interesat de o formare "formală", articolele și tutorialele din această bibliotecă sunt dedicate pentru a vă ajuta să obțineți un pic de experiență sub dumneavoastră astfel încât să puteți lansa mai târziu proiecte mai dificile!


Tipografie

Tipografia este una dintre cele mai importante caracteristici ale unui design. În majoritatea desenelor, textul domină majoritatea paginii, astfel încât tipografia curată și bine adaptată poate fi cheia pentru deblocarea potențialului temei. Există numeroase greșeli pe care noii sau designerii care le pot face acest lucru, care pot degrada atracția pe care ar putea-o face în cazul unei tipografii a unei pagini.

Sans Serif vs Serif

De dragul acestui articol, presupun că cititorul știe ce este un font serif. Există o anumită eleganță în fonturile serif folosite pe o pagină web și o simțire mai modernă atunci când un designer folosește o gamă largă de fonturi sans-serif. Cu toate acestea, aceste două efecte nu se amestecă pentru a deveni simbolul unei bune tipografii atunci când este utilizat concomitent. De fapt, amestecarea celor două în condiții normale poate crea rezultate hibride care, pentru a fi sincer, nu arătau bine.

Asta nu înseamnă că se amestecă fonturile serif și sans-serif împreună nu lucrări. De fapt, în unele cazuri, funcționează destul de bine, mai ales când tipurile de fonturi sunt folosite pe diferite niveluri ale ierarhiei. De exemplu, A List Apart folosește un font serif pentru un titlu, în timp ce utilizează un font sans-serif pentru conținutul principal al corpului.

Număr de fonturi

O altă greșeală masivă pe care o iau anumiți designeri este folosirea mai multor familii de fonturi decât a unui cuplu select. Utilizarea mai multor fonturi poate duce la un design deconectat care perturbă lizibilitatea conținutului dvs. În locul conținutului cu mai multe fonturi, încercarea de a utiliza o singură familie de fonturi pentru fiecare nivel al ierarhiei vizuale a designului creează, în general, o schemă de fonturi mai frumoasă, care arată mult mai unitară decât o grămadă de stiluri aleatorii aici și acolo.

De asemenea, prea multe variații în dimensiunea fontului și spațierea liniei / literelor pot crea o experiență de lectură deconectată și o experiență de ansamblu a utilizatorilor finali rău. Păstrați-l constant și familiar.

Lipsa contrastului

O problemă majoră care se poate prezenta este lipsa de contrast între tipografie și fundal. Acest lucru poate aduce probleme de citire reală, întrucât unii utilizatori vor găsi dificilă distincția între cele două seturi de culori. Luați exemplul înainte, de exemplu. Care dintre ele este mai ușor de citit, stânga sau dreapta? Dreapta, stânga!

Nu există o teorie complexă în spatele contrastului. Nu ați pune scrisul negru pe un fundal negru pentru că nu puteți determina ce scrie și care este fundalul. Singura sugestie este sa obtineti culoarea textului cat mai aproape de extrema opusa fata de fundal, fara a distruge alte calitati estetice, pentru a evita frustrarea la sfarsitul utilizarii finale. Tema Ellipsis prezintă un contrast bun în zona antetului superior. Ar fi acolo un roz sau violet deschis?


Plăcuță, margini și spațiere

Nu mai luptăm pe monitoarele mici (ne gândim în principal la navigarea pe desktop, nu la smartphone-uri). În schimb, trăim pe ecrane de 21 "+ și căutăm rezoluții mai înalte decât HD, oferind designerilor mult mai mult spațiu pentru a lucra. De aceea, nu ar trebui să vă simțiți deloc zdrobiți și să dedicați mai mult spațiu plăcuțelor și marginilor pentru a spori estetica designul dvs. De exemplu, designul Apple folosește o mulțime de spații albe, concentrând toate culorile și acțiunile asupra conținutului pe care îi îngrijorează.Asta nu înseamnă că ar trebui să aveți o mulțime de alb spațiu, dar desenele dvs. ar putea beneficia de a fi mutate în afară mai multă vizibilitate, astfel încât acestea să fie ușor de distins unul de celălalt.

Este important să păstrați distanțele coerente și egale pe tot parcursul designului cât mai bine posibil atât în ​​interiorul plăcuțelor interioare cât și în marginea exterioară. Pentru un exemplu, consultați diagrama de mai jos. Cea de-a doua jumătate arată mult mai bine, deoarece toate marjele sunt aceleași spațiu de 18px. Totul este aliniat la același aspect al rețelei. Este clar și fiecare zonă se deosebește de alta, dar nu pierde neapărat nici un spațiu.

Grid Systems

De asemenea, grila este o caracteristică importantă a celor mai de succes designeri web. Folosind o grila pastreaza totul in ordine si curata desenele cu jgheaburi consistente de folosit. Grid-based design-ul face totul mult mai bine organizat. Această secțiune nu este în acest articol deoarece este o greșeală să nu folosiți una, considerând-o ca o soluție dacă simțiți că desenele dvs. nu reușesc într-o zonă în care contribuie.


Menținerea valorilor antice

Industria de web design este una rapidă, cu noi evoluții care apar în mod constant. Unul dintre cele mai grave lucruri care vă pot deteriora design-ul este de a continua să se dezvolte și să se proiecteze în felul în care au fost mulți ani în urmă. În 2003, Microsoft Frontpage a avut un instrument pentru "tabelele de layout", dar niciun dezvoltator bun nu ar fi îndrăznit vreodată să deschidă un tag de tabel în numele layout-ului. De asemenea, uimitorul GIF-uri animate și muzica de fundal de yester-decadă sunt un masiv nu-nu. Oh, și nu te gândești la utilizarea cadrelor ca parte a designului tău web. Toate acestea prezintă utilitatea și alte aspecte și nu mai este cum facem lucrurile.

Speider Schneider are un articol extraordinar despre "Epoca de piatră a designului web", aici, la Tuts +. Asigurați-vă că ați verificat-o pentru un tutorial pe ce site-ul dvs. Web nu ar trebui arată ca.


Tehnicile mai vechi, cum ar fi utilizarea tablelor sau a iFrame-urilor, ar putea părea tentante, dar există adesea o modalitate mai grațioasă de a face lucrurile dacă te uiți în jur la abordări mai moderne.

Proporție și dimensiune

Proiectele tale ar trebui să rămână întotdeauna la un fel de ierarhie care să contribuie la mărimea și proporția. În termeni simpli, cele mai importante elemente ale dvs. ar trebui să fie cele mai mari și să le diminueze dimensiunea pe măsură ce continuați. Asta nu înseamnă că elementul cel mai puțin important trebuie să fie de 4 pixeli înălțime, dar ar trebui să fie foaia dvs. de parcurs spre scara elementelor de pe o pagină. Acestea ar trebui să fie în continuare proporționale cu precizia de intrare a dispozitivului pe care îl proiectați și suficient de ușor să îl vedeți. Dacă sunt acolo, vor fi acolo pentru un motiv.

Toate acestea rezultă dintr-o perspectivă a utilizabilității care sugerează că toate elementele ar trebui să fie ușor accesibile și nu necesită nici o justificare: nu faceți ca utilizatorul să facă ceva în plus decât să se uite la ceva. Nicio încercare, nici zoom, nici o încercare excesivă de a face clic pe ceva mai tânăr decât o lamă de iarbă.

Probabil că ați auzit și despre proporția divină sau "Raportul de Aur". Deși nu toate modelele trebuie să adere la acest principiu, cele mai multe modele standard ar trebui să încerce, cu orice preț. Raportul de la 1 la 1,62 (într-o formă rotunjită) este cunoscut sub numele de Raportul de Aur și nu este folosit doar în designul web, deși merită un credit pentru utilizarea acestuia.

Raportul de Aur prezintă echilibrul într-un design web, deoarece noi, oamenii, suntem obișnuiți cu el; raportul dintre antebraț și mâna este de la 1 la 1,62, așa cum este zâmbetul uman. Găsirea unei persoane atractivă se poate baza și pe raportul de aur, motiv pentru care simțim că raportul de aur este "natural". Păstrarea tot ceea ce este echilibrat poate face ca designul web să se simtă și să aibă mai mult noroc, deoarece este mai natural pentru utilizator.

Puteți citi mai multe despre Raportul de Aur și despre modul în care matematica afectează designul web aici.


Uitând de ce faci asta

Uitând scopul principal al designului dvs. este întotdeauna rău. Dacă proiectați-vă pentru comerțul electronic și aveți această idee strălucită pentru un cursor care nu se încadrează în proiectul curent, nu-l integrați doar de dragul acestuia. De asemenea, dacă aveți obiceiul de a utiliza acest meniu drop-down minunat ați petrecut nenumărate ore de lucru pe, dar aceasta doar degradează utilizabilitatea site-ului respectiv, nu-l utilizați. Nu vă distrați de nimic altceva, în afară de ceea ce vă va folosi în final designul. Întoarceți-vă la intervale regulate și luați în considerare dacă obiectivul se potrivește cu designul actual și, dacă nu, manipulați-l pentru a face acest lucru.


Pentru ThemeForest Inclined

Desigur, există o șansă mai mare ca tu să fii un autor ThemeForest dacă citești acest articol. Prin urmare, am câteva sfaturi pentru a vă împărtăși, bazându-vă pe factorii de respingere obișnuiți pe care echipa de examinare trebuie să le suporte în mod regulat.

  • Inaltimea liniei - wiki sugerează că o mulțime de șabloane de design prezentate nu au o cantitate bună de înălțime a liniei și / sau spațiere. Având o înălțime liniară de linii de aproximativ 1,3-1,6m, contribuie la o mai bună utilizare a designului, dar și la aspectul mai curat. Utilizarea valorii "em" pentru măsurarea înălțimii liniei ajută de asemenea să o păstrați proporțional cu textul.
  • Ierarhia vizuală - după cum sa menționat anterior, având o ierarhie vizuală puternică și distinctă, poate fi de asemenea avantajoasă, deoarece ajută utilizatorul să determine ceea ce ar trebui să citească mai întâi și apoi să-i lase să-și facă drumul în jos pe ierarhia menționată. Acest lucru poate fi util în special pe site-urile care doresc să vândă ceva, deoarece ajută la atragerea atenției cititorului către un element specific pe pagină, cum ar fi lucrurile uimitoare pe care un produs le poate face sau dacă este capturat cu atenție, păstrând în același timp lucrurile mai puțin atractive - cum ar fi prețul - ușor mai ascuns.
  • Compatibilitatea browserului - Unul dintre cele mai grave lucruri pe care le puteți face este să înstrăinați o parte din publicul potențial al site-ului dvs., făcând un site web să nu funcționeze pe browserul ales de acesta. Sunt șanse, utilizatorul va părăsi site-ul în loc să-și petreacă timpul frustrat în timp ce încearcă să progreseze prin design. Asigurați-vă că cel puțin toate browserele majore sunt acoperite este întotdeauna recomandabilă și trebuie să se asigure o testare adecvată. Dacă nu aveți un Mac, trageți-vă la un magazin Apple și încercați site-ul dvs. acolo dacă contribuie la proiectarea finală arătând mai bine.

Sper că ai ceva gând să vezi ce nu ar trebui să faci. Acum, reveniți la pagina de pornire și descoperiți ce faceți voi ar trebui să faceti!