9 sfaturi esențiale de web design pentru începători DIY

Principii de bază ale proiectării web & cele mai bune practici pentru a ajuta începătorii de orice nivel să proiecteze vizual un profesionist & site elegant căutând de la sine.


Sfaturi de design web pentru începători

În aceste zile este posibil ca oricine să fie un designer web. Da, este o afirmație îndrăzneață – dar cu o accesibilitate crescută la software-ul de design open-source, cum ar fi șiret, și cu platforme de construire a site-urilor de bricolaj precum Wix și Weebly care inundă piața, linia dintre amator și de bună credință web designer a devenit mult mai subțire și mai periculos ca la întârziere. Lucrul interesant în ceea ce privește creativitatea este că nimeni nu poate decide pentru tine atunci când ești „gata” să îndeplinești un anumit rol. Multe stele rock nu au luat niciodată lecții de muzică; mulți artiști de succes nu au studiat niciodată anatomia umană; iar majoritatea designerilor web de acolo nu au o diplomă oficială. Deci, dacă ați creat site-ul dvs. de afaceri propriu, puteți spune cu încredere că sunteți un „designer web”? Voi trebuie să determinați.

Este posibil ca oricine să fie un designer web cu platforme de construire a site-urilor de bricolaj.

Faceți clic pe Tweet

Dacă sunteți adeptul acestui blog, probabil că ați luat deja decizia de a vă crea singur site-ul. În timp ce s-ar putea să vă simțiți complet copleșiți de cantitatea uimitoare de informații pentru a afla despre dezvoltarea web, puteți fi siguri că proprietarii de afaceri cu chiar foarte puțină experiență de design pot crea cu adevărat site-uri web care arată profesional. Totul începe cu urmarea câtorva elemente fundamentale care, dacă sunt aplicate corect, pot depăși kilometri spre credibilitatea proiectării și experienței utilizatorului site-ului dvs..

Ce este acest ghid (și ce nu este)

Pentru a fi clar, vorbim aici despre elementele de bază ale proiectării web și nu vom intra în subiecte mai avansate precum sisteme de grilă, JavaScript sau cadre CSS. Acest ghid presupune, de asemenea, că utilizați un fel de constructor de site-uri de drag and drop, astfel încât să puteți proiecta un site web fără codare. Indiferent dacă utilizați un șablon existent de la constructorul de site-uri web sau începeți de la zero (o opțiune mai ambițioasă pentru începători), acest ghid vă va ajuta cu principiile și practicile de bază ale designului web pe care ar trebui să le aplicați site-ului dvs. web. Un singur articol despre designul web nu vă va transforma instantaneu într-un expert, așa că considerați acesta primul pas într-o lume mai mare.

SFAT RAPID: O cunoaștere de bază a HTML-ului și CSS va fi beneficii uriașe pentru orice proiectant web în vigoare. Dacă doriți cu adevărat să vă puneți mâna în codare, vă sugerez să consultați W3Schools pentru a afla mai multe despre fundație.

Bazele proiectării web pentru începători

Să coborâm la asta, nu-i așa? Iată câteva dintre cele mai utile tendințe și ghiduri de știut atunci când construiți primul site web:

1. Pune mouse-ul departe, ridică un creion

Este posibil ca site-ul dvs. web să existe deja ca o entitate frumoasă și completă în mintea dvs., motiv pentru care săriți imediat în Photoshop (sau mai rău, un browser și HTML) pentru a-l planifica. Whoa, whoa – răcește-ți jeturile o secundă! Nu puneți căruța înaintea calului. Mai întâi, scoateți un creion și un tampon de hârtie și începeți să vă puneți ideile în ceva ușor tangibil. Aceasta este o fază importantă pentru a cartografia structura site-ului dvs. folosind nimic altceva decât dreptunghiuri, doodle și idei inspirate (adesea numite wireframing). Lucrurile pot fi super dure în acest moment; nimeni nu o va vedea, dar tu.

Exemplu de filă de site webUn cadru web vă ajută să dezvoltați o structură și o structură pentru site-ul dvs. web, îmbunătățind în același timp experiența utilizatorului (UX) și economisind timp.

În această etapă este mult mai ușor să modificați aspectele pe care credeați că ar funcționa inițial, dar acum descoperiți că sunt aglomerate și confuze pe hârtie. Acest lucru vă va economisi multe ore de frustrare, spre deosebire de a face aceeași descoperire odată ce site-ul este codat și într-un browser. În plus, vă ajută în mod semnificativ să construiți o pagină web când aveți o referință la îndemână pentru a consulta, mai degrabă decât să accesați orb.

2. Urmați o Ierarhie

Cert este că majoritatea navigatorilor web tind să scaneze doar pagini web, mai degrabă decât să își ia timpul să citească totul. Trebuie să fii pregătit pentru asta punând în primul rând cel mai important conținut. Aceasta înseamnă că un utilizator ar trebui să poată digera cele mai importante informații de pe o pagină, toate într-un singur ecran, la încărcarea inițială, fără a fi nevoie să faceți zoom sau defilare. Desigur, este mult mai ușor spus decât făcut. Iată câteva sfaturi care să vă ajute să înțelegeți mai bine semnificația acestei teorii de design:

Păstrați conținutul „Deasupra pliantului”

Numim acel ecran inițial de conținut încărcat „pliul” – și tot ceea ce este sub el, care trebuie defilat pentru a fi văzut, este considerat secundar. În general, informațiile dvs. cele mai importante se află „deasupra faldului”. Principalul lucru de realizat în această zonă este de a atrage un utilizator să ia măsuri sau să genereze stimulentul de a derula în continuare.

Utilizarea unei imagini „Erou”

O tendință obișnuită în designul web în zilele noastre este de a completa această zonă „de deasupra” cu ceea ce se numește o imagine sau un „erou”. Acestea sunt imagini de fundal pe ecran complet, cu text suprapus foarte succint și la punct, de obicei asociat cu un buton de apelare la acțiune. În mod rezonabil, întregul scop al paginii web ar putea fi conținut în această zonă de banner, deși servește și ca un primer element excelent pentru conținutul de urmat..

Exemplu de imagine / banner erou

„Foldul” se poate schimba în funcție de dispozitiv

Iată locul în care lucrurile se complică – și de ce nu ar trebui să vă suprapuneți încercând să încadrați totul deasupra acestei linii magice. În funcție de dispozitivul utilizatorului, dimensiunile ecranului pot varia enorm. Un afișaj de 5K care scade pe falcă are o rezoluție verticală de 2880 pixeli, în timp ce un iPhone 5 are mai puțin de jumătate din aceasta. Aceasta înseamnă că utilizatorii de telefonie mobilă nu vor fi capabili să încadreze atât de mult conținut în ecranul lor imobiliar. (Mai multe despre asta mai târziu.)

SFAT RAPID: Regula generală este să vă asigurați că conținutul „de deasupra pliantului” se încadrează în cel mai mic numitor comun al dimensiunilor ecranului. Acest lucru este de obicei acceptat ca 768 pixeli de rezoluție verticală.

3. Tipografia este designul tău

Dacă nu conduci o afacere de fotografie, textul este cel mai important element al oricărui site web, așa că este important să faci această parte corect. Ierarhia paginii dvs. web depinde în mare măsură de tipografia pe care o alegeți: modul în care titlurile, subpozițiile și textul corpului urmează un flux natural și rămân distinctiv unul de celălalt. Pentru o privire cuprinzătoare asupra tipografiei, consultați ghidul nostru de bune practici. Iată câteva momente de transport importante:

  • Asigurați-vă că textul este lizibil (evitați fonturile cu flori!) și destul de mare (de obicei în jur de 16px pentru corp).
  • Nu rămâneți mai mult decât două fonturi– și asigurați-vă că se împerechează bine!
  • Dă paragrafelor tale o cameră pentru a te inspira între ele și stabilește-ți suficient captuseala de sus sau margine pe rubricile dvs. pentru a semnifica pauze clare de conținut.
  • Evitați liniile lungi de text. Este mai ușor pentru ochi ca liniile de paragrafe să fie aproximativ nu mai mult decât 15 cuvinte lungi– și puțin mai puțin decât cel pentru ecrane mobile.
  • Serif fonturile sunt de obicei cele mai bune numai cu tipărire, cu excepția cazului în care sunt utilizate în titluri mari de pe web.

4. Culori & Contrastul sunt cruciale

Am vorbit despre psihologia culorilor, dar conceptul se repetă. Culorile pe care le alegeți pentru site-ul dvs. web joacă un rol enorm în modul în care utilizatorii percep marca dvs., precum și în cât de motivați se pot simți în luarea unei acțiuni (adică: cumpărarea de lucruri) prin intermediul site-ului dvs. web. De ce? Ei bine, fiecare culoare evocă anumite emoții și fie datorită naturii lor inerente, fie prin condiționarea culturală, aceste culori au devenit asociate cu anumite tipuri de afaceri. Dacă o companie de jucării pentru copii sau un consilier financiar ar picta întregul site web în negru, aceasta ar trimite absolut semnale greșite către publicul destinat. Pe flipside, un portocaliu strălucitor sau, respectiv, un albastru plăcut, ar capta tonul și conștientizarea perfectă pentru clienții lor.

Exemplu de culori de design webAlbastrul este o culoare care evocă încredere și încredere, o alegere populară pentru site-urile web legate de finanțe.

Dacă ați stabilit deja culorile mărcii dvs., folosiți-le pe site-ul dvs. web. Totuși, cel mai bine este să o menținem nu mai mult de trei culori pentru site-ul dvs.; cum ar fi fonturile, nu doriți să exagerați aici sau site-ul dvs. ar putea ajunge cu tulburări de personalitate multiple. De asemenea, aveți grijă de prea multe stropi de culoare pe pagina web; ochii noștri sunt atrași de ei ca niște capcane de miere și ar putea întrerupe fluxul natural al conținutului tău. Folosiți culoarea numai atunci când este cel mai necesar, cum ar fi linkuri sau butoane.

Pe marginea subiectului contrast, este esențial ca textul dvs. să se evidențieze din fundal. Folosind griuri deschise, galbeni sau verzi pentru fonturile tale, le va face invizibile aproape sigur pe pagină. Negrul pe un fundal alb este cea mai mare combinație de contrast și este, în general, ceea ce ar trebui să te lipești.

SFAT RAPID: Cel mai bine este să eviți saturație completă cu culori pe web. Roșul pur (valoarea hex. # Ff0000) este oarecum prea perforat pe ochi. În mod similar, negrul pur (# 000000) pentru fonturi tinde să vibreze prea puternic pentru ochi, în timp ce un negru ușor diminuat (# 333333) face o lectură mai ușoară.

De asemenea, doriți ca textul dvs. să se afișeze pe imagini de fundal. Folosirea fotografiilor foarte ocupate poate distrage de la text, astfel încât să evitați această problemă, fie utilizați fotografii mai puțin detaliate, fie folosiți o suprapunere a rgba (51,51,51,0,5) pentru a ajuta la înmuierea imaginii de sub text..

exemplu de suprapunere de imagineUtilizați o suprapunere din spatele textului pentru a-l ajuta să apară din fundal.

Contrastul joacă, de asemenea, un rol în modul în care utilizatorii sunt atrași de anumite elemente cheie ale site-ului dvs. Cele mai importante butoane de apel la acțiune trebuie să atragă ochii prin utilizarea de culori contrastante. Un albastru „Cumpărați acum!” butonul își pierde urgența și valoarea atunci când este înghițit de un site care folosește albastru peste tot – dar un buton roșu din aceeași pagină atrage atenția unui utilizator strigând „Hei! Faceți clic pe mine! “

6. Utilizarea de imagini

Alegerea imaginilor potrivite pentru a fi utilizate pe site-ul dvs. web se reduce parțial la propria dvs. aptitudine artistică, dar există și considerente intelectuale care ar trebui să vă ajute în procesul de selecție. În primul rând, evitați să înfrumusețați site-ul dvs. cu fotografii străine doar pentru că ar putea arăta frumos. În schimb, gândiți-vă la modul în care fiecare imagine pe care o utilizați își servește propriul scop și, mai important, cum acționează conţinut. O fotografie bine aleasă vă poate transmite marca, serviciul, produsul sau publicul dvs. mult mai eficient decât cuvintele. Utilizați fotografii pentru a vă ajuta utilizatorii să înțeleagă ceva, pentru a evoca emoții sau pentru a inspira încredere și încredere; utilizarea lor doar din motive estetice ar trebui să fie secundară.

Înțelegerea tipurilor de fișiere & Comprimare

Există un pas suplimentar care trebuie făcut pentru utilizarea imaginilor pe web. Aceste fotografii fanteziste pe care le obțineți de pe site-uri ca Shutterstock și iStock pot fi destul de masive (5.000+ pixeli orizontali și dimensiuni de peste 10 megabyte), care sunt potrivite pentru imprimare, dar nu sunt improprii pentru site-urile web. Nu toată lumea are Fiber Internet super, așa că trebuie să reduceți dimensiunea imaginilor dvs. pentru a se acomoda pentru timpul de încărcare (ca să nu mai spunem că 40% dintre vizitatori vor pleca dacă site-ul durează mai mult de 3 secunde pentru a se încărca!). De obicei, doriți să păstrați fiecare dintre imaginile dvs. la o maxim de 500 kilobiți ca mărime, deși dimensiunea medie a fișierului dvs. ar trebui probabil să fie în jur 100 kilobiți.

  • JPEG este formatul standard pentru fotografii. Este un format cu pierderi, ceea ce înseamnă că calitatea imaginii sale este redusă la comprimare. Dacă utilizați un JPEG pentru o imagine de fundal cu lățime completă, vă recomand să păstrați rezoluția sa orizontală la nu mai puțin de 1200px. În scopuri generale, evitați să folosiți orice imagine cu mai puțin de 600px rezoluție orizontală, deoarece probabil va apărea neclar pe ecranele moderne.
  • PNG este alegerea preferată pentru grafică sau pentru imaginile care necesită transparenţă. Este un format fără pierderi, care este excelent pentru păstrarea calității imaginii, dar poate crește și dimensiunile fișierelor. În general, veți utiliza grafică PNG pentru ilustrații, pictograme sau imagini mai mici care pot fi stivuite pe deasupra altor elemente din cauza transparenței lor. Rareori vei avea nevoie de un PNG care să fie mai mare de 1000px.
  • SVG (Grafic vectorial scalabil) este un format mai nou care se înlocuiește GIF și chiar PNG în unele cazuri. Frumusețea SVG este că poate fi la fel de mare sau la fel de mic pe ecran, așa cum ai nevoie de el, păstrând în același timp o claritate și o claritate perfectă (și totuși să fie o dimensiune redusă a fișierului). Ar trebui să luați în considerare utilizarea SVG pentru orice logo, pictogramă sau grafică vectorială pe site-ul dvs. web; deoarece afișajele DPI ridicate devin acum obișnuite, claritatea SVG va oferi cea mai mare calitate a imaginii.

Exemple de tip de fișier imagine

6. Mobile-First Design

Am ajuns acum într-un moment în care majoritatea oamenilor consumă conținut online cu telefoanele, mai degrabă decât cu un computer desktop. Drept urmare, există o prioritate mult mai mare în proiectarea web pentru a se adapta în mod specific experienței mobile, ceea ce a dus la filosofia de design „mobil-primul”.

În esență, aceasta înseamnă că, în faza inițială de schițare și planificare pe hârtie, cel mai bine este să vă concentrați mai întâi pe aspectul mobil al site-ului. Numai cel mai important conținut necesar funcționării site-ului dvs. va fi afișat pe ecrane mai mici. Acest lucru te obligă să simplifica aspectul tău și taie toate elementele care distrag atenția de la început. Gândiți-vă la conținutul „de deasupra”, dacă vă asigurați mai întâi că toate informațiile importante se pot încadra pe ecranul inițial al unui telefon, atunci veți ști sigur că acestea se vor potrivi pe ecrane mai mari. După ce ați blocat aspectul esențial pentru mobil, puteți începe să adăugați înfrumusețări sau imagini mai mari pentru ecranele desktop.

Aspectul dvs. mobil presupune un design mai vertical care inspiră derularea, mai degrabă decât peisajul larg al unui desktop. Dacă, să zicem, pagina produsului dvs. afișează listele într-o grilă de 3 pe desktop, atunci de obicei, aspectul dvs. mobil le va afișa ca o singură coloană.

Da, acest lucru înseamnă că, practic, trebuie să creezi mai multe machete pentru fiecare pagină a site-ului tău. Din fericire, orice constructor de site-uri web bun ar trebui să ofere șabloane responsive care ajustează automat aceste machete, astfel încât va trebui doar să le reglați bine..

SFAT RAPID: Asigurați-vă că niciun element singur de pe site-ul dvs., în special dacă este interactiv, nu este mai mic 44px cu 44px in marime. De ce? Aceasta este cea mai mică o țintă poate fi acolo unde degetul o poate atinge cu exactitate.

7. Mențineți lucrurile aliniate

Atunci când elementele par dispuse sporadic pe site-ul dvs., se datorează adesea unei probleme de aliniere. Imaginează-ți pagina web pe o foaie de hârtie grafică. Separați-l în coloane uniforme desenând, de exemplu, șase linii drepte. Acum doriți să vă asigurați că marginile din stânga ale elementelor dvs. sunt distribuite și aliniate numai la aceste șase linii verticale.

8. Păstrează-l simplu

Se spune adesea că cel mai bun design web trece neobservat; este doar un design slab care atrage atenția asupra sa. După cum am menționat anterior, cel mai important aspect al oricărui site web este pur și simplu textul său. Dacă puteți oferi o tipografie remarcabilă, care este o bucurie de a citi, este posibil să nu aveți nevoie să faceți multe altele. Încercarea de a proiecta excesiv site-ul tău va înghesui și va complica lucrurile.

Sunt necesare umbrele cutiei? Tiparele nebune, ornamentate? Zeci de culori? Probabil ca nu.

9. Spatii deschise mari

Conținutul dvs. are nevoie de spațiu pentru a respira. spatiu alb este alegerea predominantă a design-ului pentru site-urile moderne: spații largi și deschise de nimic pentru zonele de conținut între conținut. Este un mod mai plăcut de a digera informațiile și, de asemenea, vă încurajează să eliminați textul și imaginile de prisos pentru a păstra site-ul curat.

Concluzie

Proiectarea web poate fi un domeniu extins de tehnologie de învățat, concepte de practicat, limbi de studiat și artă de masterizat. Doar cu experiență toate aceste componente vor începe să aibă sens, dar sunteți deja bine pe drumul dvs. doar înțelegând elementele fundamentale ale ceea ce face ca un site web să funcționeze bine. Sper că acest ghid îți servește ca punct de lansare și că îți oferă încrederea să iei site-ul tău în propriile mâini și să-l construiești așa cum numai un proprietar de afaceri știe cel mai bine.

Se naște un designer!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map