Proiectați un site web

Proiectarea unui site web excelent poate părea o sarcină dificilă, dar atâta timp cât păstrați principiile de bază în minte, procesul va fi interesant și distractiv. Este vorba despre mai mult decât un aspect bun! Vă vom arăta elementele de bază și câteva îndrumări generale care vă vor ajuta să creați site-uri pe care oamenii le vor vizita mereu.

conținut

Pași
Metoda 1cele 3 reguli de bază
Metoda 2orientări
Sfaturi
Avertismente

pași

Metoda 1
Cele 3 reguli de bază

Regula nr. 1: Ascultă-ți clientul. Poate proiectați "cel mai bun site web din istoria universului și dincolo de el," cu negru bogat, cu caractere rafinate și culori artistice luminoase pentru un loc care strigă "explorați-mă acum!" Din păcate, clientul dvs. dorea o bară de meniu portocalie cu litere roz și portocaliu strălucitoare. Sunteți concediat, iar cel mai bun site-ul dvs. vreodată - al cărui client are drepturile - este undeva pe discul de rezervă, fără ca cineva să vadă vreodată din nou.

Studiați identitatea corporativă a clientului dvs. Lăsați clientul să vă arate câteva site-uri web pe care le iubesc. Acest lucru nu numai că vă va oferi o idee despre ceea ce le place, ci vă va oferi și câteva idei de design despre care s-ar putea să nu vă gândiți.
Dacă ați crezut că glumeam despre site-ul portocaliu și roz, gândiți-vă la acest site minunat și rafinat:

Imagine cu denumirea Website-dunkin donuts.jpg

Regula 2: Cunoașteți publicul și ceea ce căutați și ajustați în mod corespunzător designul. Motivul pentru care oamenii au site-uri web este pentru că vor alte persoane să le vadă. Poate fi informativă sau comercială sau pentru a distra un anumit grup țintă. Treaba ta ca designer este să știi cine crezi și să-i ții pe pagină când ajung acolo.

S-ar putea să vă gândiți: "Dacă arată bine, vor rămâne." Dar acest lucru nu trebuie să fie neapărat cazul. Luați proprietăți imobiliare, de exemplu. Aici este un site cu un design luminos și distractiv. Ea are o mulțime de spațiu alb care oferă un aspect deschis, culori strălucitoare și un format modern lat cu legături într-un loc proeminent:

Imagine cu denumirea Santa Monica real estate 1.jpg

Acum, vizualizați această abordare a vânzării de bunuri imobiliare în aceeași zonă: aglomerate și foarte ocupate, culori plictisitoare și acoperite în publicitate.

Imagine cu denumirea Santa monica trulia.jpg

Ghici ce funcționează mai bine pentru oamenii care caută o casă? Corect, cel adevărat case pe el! Când oamenii o caută "case de vânzare în Santa Monica," nu le pasă cum arată un site. Nu vor să citească despre broker sau să vadă imagini frumoase ale orașului. Vor să vadă case.

Regula 3: Ascultă-te. Înțelegi ce dorește clientul și știi care este piața pe care o cauți. Acum este timpul să vă acordați atenție, designerului!

Creați un șablon în software-ul grafic ales de dvs. Creați elementele paginii dvs. pe diferite straturi (astfel încât să puteți modifica mai târziu lucrurile fără a distruge întregul șablon). Aceste elemente pot fi:

antet. Acesta este un element care este același pe fiecare pagină a site-ului dvs. Antetul cuprinde titlul și sigla site-ului, precum și linkurile către celelalte părți ale site-ului (de exemplu, Despre, Contact etc.). Din punct de vedere vizual și practic toate acestea se vor lega împreună. Este o bună practică să conectați primul buton de pe o bară de meniu înapoi la pagina de pornire.

De exemplu, să ne uităm la Apple:

Imagine intitulată Apple home landing page.jpg

Ca și în majoritatea lucrurilor Apple, pagina lor de pornire are un design foarte elegant și necomplicat. Fiți atenți la meniurile din partea de sus, cu subiecte logice pentru fiecare buton, plus un câmp de căutare - întotdeauna o idee bună dacă site-ul dvs. îl acceptă. Acum, să aruncăm o privire asupra unei pagini de destinație pentru unul dintre butoane, iPad, pentru a vedea câteva elemente:

Imagine intitulată Ipad landing page.jpg

Bara de meniuri se modifică numai prin întunecarea butonului iPad.

Subiectul paginii de destinație este afișat în litere negre mari.

Apare un nou submeniu pentru a afla mai multe despre produs. Dacă faceți clic pe unul dintre aceste butoane, veți vedea că fiecare pagină oferă un conținut nou în funcție de subiect, dar va fi identic în aspect și design.

Adesea, fiecare subiect principal din bara de meniu va avea diferite subcapitole pe care trebuie să le completați. În loc să creați o a doua bara de meniu, puteți utiliza meniuri pop-up cum ar fi acest exemplu de Friend`s Musician:

bara laterală. Acest lucru se va vedea pe multe pagini ale site-ului dvs., dar nu neapărat pe toată lumea - contextul determină. Cu toate acestea, este un element foarte important și trebuie să fie atent proiectat pentru a fi intuitiv și nu prea aglomerat. Spre deosebire de bara de meniu, conținutul unei bare laterale poate fi foarte dinamic. Vizualizați aceste două bare laterale de la comerciantul imobiliar Trulia Primul este pentru cumpărători:

Și al doilea este pentru chiriasi. Observați focalizarea complet diferită pentru informații foarte asemănătoare și este afișată exact în același loc pe bara laterală:

corp. Aici se întâmplă toate lucrurile și este cea mai variabilă parte a designului dvs. De exemplu, dacă proiectați un site de comerț electronic, o pagină poate avea o revizuire a produsului în organism, în timp ce următoarele 20 de articole au elemente de vânzare. Treaba voastră este de a lega cele două împreună, astfel încât acestea să nu fie incoerente din punct de vedere vizual. Utilizați aceleași culori, fonturi și elemente de interfață pentru a aduce totul împreună.

subsol. Acesta este un lucru pe care fiecare site nu are nevoie. Acesta este adesea folosit pentru lucruri care pot face o interfață strânsă în continuare murdar, sau pentru a oferi acces la părți mai puțin importante ale site-ului. Iată un exemplu de Groupon:

Metoda 2
orientări

Proiectați o interfață de utilizator bună. Poziționați diferitele elemente ale site-ului, cum ar fi titlul, barele laterale, logo-urile, imaginile și textul pe fiecare pagină, în același loc pentru a vă face site-ul navigabil și intuitiv.

Păstrați același antet în partea de sus a fiecărei pagini. Indiferent dacă conținutul site-ului permite sau nu mai multe elemente repetate, asigurați-vă că partea de sus a fiecărei pagini este aceeași.
Utilizați logica în design. Elementele de pe o singură pagină trebuie să fie ordonate logic în funcție de importanță sau subiectul - diferite pagini de pe site trebuie, de asemenea, să fie.

Creați un stil consistent. În cazul în care aspectul ar trebui să ofere site-ul dvs. consistență structurală, stilul ar trebui să le dea armonie tematice.

Țineți-l la două sau trei culori principale și asigurați-vă că se potrivesc bine împreună.

Evitați utilizarea prea multor fonturi sau dimensiuni - dacă doriți să alterneți câteva, folosiți-le pe fiecare pagină în același mod.

Utilizați coli de stil cascadă (CSS) pentru a menține un stil uniform și pentru a facilita modificarea elementelor de pe un întreg site web, fără a trebui să accesați fiecare pagină separat.

Maximizați lizibilitatea. Pentru a face textul mai ușor de citit, îl puteți împărți în părți mai mici.

Folosiți subtitrări și distanțe adecvate pentru a separa fiecare piesă.

Utilizați litere aldine sau dimensiuni diferite pentru a arăta ierarhia și importanța subiectelor.

Urmăriți modul în care tratați textul. Nu faceți fontul prea mic și măriți distanța între linii pentru a face mai multe piese de text mai ușor de citit. Piesele mari de text sunt mai greu de citit - le împărțim în paragrafe mai mici.

Asigurați-vă că site-ul dvs. este universal lizibil. Utilizați cod HTML standard și evitați etichetele, funcțiile și pluginurile care sunt disponibile numai pentru o marcă sau o versiune a unui browser.

Deși majoritatea browserelor și computerelor moderne pot gestiona imagini complexe, totul va arăta mai bine dacă faceți imaginile mai mici și optimizați pentru web. Cântăriți importanța calității împotriva importanței vitezei.

Testați-vă site-ul. Faceți asta fiecare link funcționează cum v-ați aștepta și că imaginile apar corect.

Este posibil să doriți să organizați anumite teste de utilizatori prin faptul că membrii grupului dvs. țintă testează claritatea și ușurința utilizării designului dvs. și oferă feedback pe site-ul dvs. Web.

Publicați-vă site-ul web. Cumpărați un nume de domeniu dacă nu ați făcut-o deja. Verificați periodic dacă link-urile încă funcționează și puteți asculta sugestii pe care vizitatorii le trimit prin e-mail.

sfaturi

Deși aveți libertatea de a proiecta aspectul pe baza propriei viziuni personale sau a lucrurilor pe care le-ați văzut pe alte site-uri, ar putea fi mai ușor să achiziționați un design gata.
Nu bombardați vizitatorul cu poze drăguțe și speciale. Flash animația, culorile luminoase, fundalul modelelor și muzica care este redată automat la încărcarea unei pagini au fost experimente amuzante în anii `90, dar acum ei vor îndepărta utilizatorii. Păstrați-o simplă pentru fundaluri simple care contrastează cu culoarea textului pentru o lizibilitate maximă.
Puteți folosi întotdeauna CSS pentru a optimiza distanța dintre paragrafe.
Pentru vizitatorii cu insuficiență auditivă sau vizuală, puteți să subtitrați videoclipuri, să transcrieți audio și să adăugați un mesaj despre accesibilitate. Deși tabelele pot fi o modalitate eficientă de a organiza informații, vizitatorii cu deficiențe de vedere folosind software-ul de citire a ecranului pot să nu audă materialul în ordinea corectă.
Permiteți vizitatorilor dvs. să economisească cerneală: utilizați o foaie de stil separată pentru paginile imprimate.

Dezactivați imaginile de fundal când setați parametrii de imprimare.
Utilizați textul negru pe un fundal alb.
Eliminați bara de meniu și imaginile inutile.

avertismente

Evitați plagiatul și respectați toate legile privind drepturile de autor. Nu adăugați imagini aleatorii pe care le găsiți online sau chiar elemente structurale, fără aprobare. Tot ceea ce folosiți pe site-ul dvs. trebuie să fie legal și etic.

Distribuiți pe rețelele sociale:

înrudit