Ce trebuie să faceți și ce nu trebuie să faceți pentru un design web excelent

Când este urmat, acest ghid se va dovedi a fi o resursă de design web destul de valoroasă, mai ales dacă intenționați să îl utilizați software de dezvoltare a site-urilor web în viitor. De la cei neexperimentați la cei experimentați, acest ghid are câte ceva pentru toată lumea.

Procesul de Great Web Design Doar pentru a ne asigura că suntem cu toții pe aceeași pagină, să începem cu definiția de bază pentru „design web”. Conform Wikipedia, designul web este:

„un proces de conceptualizare, planificare, modelare și execuție a livrării media electronice prin Internet sub formă de limbaj de marcare potrivit pentru interpretare prin browser web și afișare ca interfață grafică pentru utilizator” .

Procesul de web design poate fi comparat cu procesul de scriere a unei lucrări de cercetare. În etapa de conceptualizare/planificare, sunt create diagrame de flux (conturul) care ilustrează structura de navigare a site-ului dumneavoastră. În etapa de modelare, sunt create wireframes statice (schița brută) care ilustrează aspectul scheletic pentru fiecare secțiune a site-ului dvs. După ce sunt create cadrele de sârmă, grafica, culorile și textul sunt folosite pentru a crea designul paginilor dvs. web pe baza aspectului cadrelor de sârmă. În etapa de execuție, designul dvs. este convertit într-un format suportat de browserele web, textul și conținutul sunt adăugate, iar în cele din urmă, site-ul dvs. este publicat live pe Internet pentru ca lumea să poată vedea (schița finală).

Toate cele trei etape ale procesului de proiectare sunt la fel de importante. Mulți web designeri sar peste o etapă pentru a economisi timp sau pentru că nu cred că este necesar. Cu toate acestea, toate cele trei etape sunt necesare dacă scopul tău este să creezi un design de succes și un site web respectabil. Chiar dacă sunt utilizate cele trei etape, există multe greșeli pe care designerii web le pot face și care vor duce la site-uri web de proastă calitate, care nu sunt ușor de utilizat. Este timpul să curățați cabinetul de practici proaste de design web și să-l reaprovizionați cu cele bune.

Etapa 1: Conceptualizare și planificare
Această etapă este omisă mai des decât celelalte două etape. Majoritatea scriitorilor nu le place să creeze schițe pentru lucrările de cercetare și nici celor mai mulți designeri web nu le place să creeze diagrame de flux. Nu fi leneș. Dacă depuneți efort și vă planificați site-ul web, atunci veți descoperi că procesul de design web se desfășoară fără probleme, cu mai puține greșeli făcute pe parcurs.

Există câteva lucruri de care veți avea nevoie pentru a conceptualiza și planifica eficient site-ul dvs.:

• un creier
• un stilou și hârtie
• software (opțional) pentru diagrame de flux
• o idee generală a diferitelor secțiuni ale site-ului dvs

Pentru a începe, luați-vă pixul și hârtia sau lansați software-ul de diagramă flux preferat. Folosim OmniGraffle Professiona pentru Mac OS X, care costă 150 USD per licență, dar merită din plin dacă creați site-uri web în mod regulat. Dacă sunteți pe un computer, atunci SmartDraw este o piesă GRATUITĂ grozavă de software de diagramă de flux pe care o puteți utiliza. Un pix și hârtie funcționează bine, totuși.

Există multe metode de a crea diagrame de flux. Vă vom arăta cel mai simplu mod de a o face de dragul timpului și al lungimii acestui articol. Dacă doriți să aflați mai multe despre diagrame de flux, căutați diagrame de flux pe Google sau Yahoo.

Vizualizați diagrama de flux pe care am creat-o când conceptualizăm Chromatic Sites. (1) În partea de sus a diagramei de flux listăm numele site-ului nostru web. (2) În continuare, includem fiecare secțiune principală a site-ului nostru web: Acasă, Despre și Servicii. Aceste secțiuni reprezintă navigarea principală pentru site-ul dvs. Cum vor fi numele fiecărei secțiuni depinde în întregime de conținutul site-ului dvs. Încearcă să folosești cât mai puține secțiuni posibil, astfel încât vizitatorii tăi să nu fie copleșiți atunci când navighează prin site-ul tău.

(3) Apoi, adăugați toate paginile secundare (subsecțiunile) care vor fi listate pe fiecare dintre paginile principale. Pentru Home, am inclus Web Design profesional, Dezvoltare Web și Optimizare pentru motoarele de căutare. Navigarea secundară trebuie să fie mai descriptivă decât navigarea primară. Cu cât este mai adâncă ierarhia de navigare a site-urilor dvs. web, cu atât trebuie să fie mai descriptivă fiecare etichetă.

Cei doi

• Mai puțin este mai mult; menține numărul de secțiuni primare la minim. Folosim 6 secțiuni pe site-ul nostru, ceea ce este mai mult decât suficient
• Indiferent dacă utilizați un pix și hârtie sau un software de diagramă, păstrați lucrurile cât mai curate și organizate posibil. Deși tu (și oricine lucrează cu tine) sunteți singurii care vor folosi diagrama de flux, aceasta trebuie să aibă sens - Secțiunile dvs. principale ar trebui să utilizeze termeni mai largi, în timp ce termenii secundari și terțiari ar trebui să fie mai descriptivi

The Donts
Crearea unei diagrame de flux este destul de simplă; cu toate acestea, există câteva greșeli care pot fi făcute cu ușurință:

• Nu utilizați termeni foarte descriptivi în navigarea dvs. principală decât dacă întregul site web se concentrează pe un subiect restrâns - Nu încercați să grupați mai multe subiecte pe aceeași pagină. Creați o secțiune generală pentru aceste subiecte și din acea secțiune creați subsecțiuni. Acest lucru va face ca paginile web subsecțiuni (descriptive) să aibă mai multe șanse să aibă o poziție mai bună în motoarele de căutare (Google, Yahoo, MSN, Ask). După ce ați creat o diagramă concisă și descriptivă, sunteți gata să treceți la a doua etapă. a procesului de proiectare web:

Etapa 2: Modelare
În etapa de modelare, sunt create modele statice „wireframe”. Fiecare machetă ilustrează un schelet simplu al aspectului pentru fiecare dintre paginile web care vor fi incluse pe site-ul dvs. web. Această etapă este importantă pentru că ne oferă o idee despre unde vor fi plasate diferite elemente în designul nostru. Unele dintre aceste elemente sunt:

• siglă
• meniu de navigare
• conţinut
• imagini, videoclipuri

Pentru a crea aceste machete, puteți folosi un pix și hârtie sau software-ul de machetă preferat. În trecut am folosit Photoshop, dar în ultimul timp am folosit OmniGraffle Professional. OmniGraffle nu consumă atât de mult resurse precum Photoshop și ne permite să asamblam machetele noastre wireframe mult mai rapid.

În plus, asigurați-vă că aveți în apropiere diagramele de flux pe care le-ați creat, deoarece va trebui să faceți referire la acestea din când în când pentru a vă asigura că faceți joc de toate paginile care vor apărea pe site-ul dvs. web.

Iată exemplul nostru despre cum ar trebui să arate o machetă wireframe. După cum puteți vedea, nu sunt incluse culori sau elemente grafice. Exact așa ar trebui să fie o machetă wireframe - un aspect scheletic al designului tău. Scopul este de a putea avea o idee generală despre locul unde va fi plasat fiecare dintre elementele paginii web.

De obicei începem din stânga sus și ne coborăm până jos. Nu există un mod specific în care ar trebui să arate un cadru de fir. Foloseste-ti imaginatia. Cu toate acestea, asigurați-vă că atunci când vă creați wireframes-ul nu uitați să includeți cele mai importante elemente ale unui site web (logo, meniu de navigare, plasare conținut, plasare imagini/video).

Dacă unele dintre paginile dvs. vor folosi același aspect, atunci nu este necesar să bateți joc de toate acele pagini (deși cu siguranță puteți). Doar asigurați-vă că modelați orice aspect unic pe care îl va avea site-ul dvs. Îți vei mulțumi mai târziu.

Cei de făcut

• modelați toate paginile unice
• include elemente importante (logo, navigare, plasare de conținut, plasare imagini/video) -începeți de sus și mergeți în jos -faceți referire la diagrama de flux creată în etapa 1 pentru a nu uita să faceți o machetă a paginilor -salvați, salvați, salvați – la fel ca orice lucru de pe computer, salvați machetele la fiecare 10 minute sau cam asa ceva
• concentrați-vă pe layout-uri curate, ușor de utilizat -etichetați-vă elementele astfel încât să nu uitați ce sunt acestea atunci când le referiți în etapa 3, execuție - folosiți alte site-uri web ca inspirație; nu este nimic în neregulă să luați elemente de pe alte site-uri și să le faceți proprii (vezi „donts”)

Cei a nu

• nu include grafica sau culori (asta e pentru etapa urmatoare) -nu iti face machetele prea “ocupate”; concentrați-vă pe aspecte curate, bine organizate, ușor de utilizat - nu săriți peste această etapă; este la fel de important ca primul și ultimul -dacă iei elemente de pe alte site-uri, ai grijă să nu plagiezi; există o diferență între a fi inspirat de un alt site web pentru a crea anumite elemente ale designului tău și a le smulge în mod flagrant aspectul și culorile.

Etapa 3: Execuție
În a treia și ultima etapă, execuție, planificarea din etapele 1 și 2 sunt combinate pentru a ajuta la crearea unui site web interactiv în direct.
A treia etapă este de departe cea mai intensă de timp, deoarece veți fi 1) crearea graficelor 2) crearea conținutului și, în final, 3) convertirea design-urilor web din imagini în cod pe care browserele web îl folosesc pentru a vă prezenta site-ul lumii.

Până când ajungeți la a treia etapă, ar trebui să aveți o idee clară despre:

• cum vor ajunge vizitatorii dvs. dintr-un loc în altul (etapa 1, diagramă) - cum vor fi aranjate paginile dvs. web (etapa 2, machete wireframe)

Dacă nu aveți o idee clară despre aceste două lucruri, reveniți la prima și a doua etapă și continuați să le dezvoltați. Veți descoperi că a treia etapă este cea mai ușoară atunci când ați construit un plan de luptă clar și concis pentru proiectarea site-ului dvs.

Aruncă pixul și hârtia
În etapa 3, trebuie să utilizați Photoshop sau un alt program de editare a imaginilor, deoarece veți folosi culori și elemente grafice pentru a crea aspectul pentru site-ul dvs. web.

De obicei, începem să creăm mai întâi pagina „de pornire” (index). Utilizați wireframes-ul pe care le-ați creat în etapa 2 ca șablon pentru fiecare dintre paginile pe care le creați. Cu toate acestea, în loc să utilizați casete solide, folosiți grafică, culori și text. Fiecare pagină trebuie să arate exact așa cum doriți să arate pe Internet, deoarece aceasta este etapa finală a procesului de proiectare.

Asigurați-vă că includeți fundalul pentru navigare (dar nu adăugați textul imaginii dvs.). Când este convertită folosind CSS (foi de stil în cascadă), navigarea dvs. ar trebui să fie sub formă de text și nu de imagini. Imaginile nu pot fi accesate cu crawlere de către motoarele de căutare (cuvintele cheie utilizate în navigarea dvs. nu vor fi indexate în paginile cu rezultate ale motorului de căutare, ceea ce înseamnă că mai puține persoane vor putea găsi site-ul dvs.).

Când sunteți mulțumit de design-urile dvs. și simțiți că sunt gata pentru a fi puse pe Internet, este timpul să despărțiți desenele astfel încât să puteți crea un aspect bazat pe CSS. Pentru mai multe informații despre convertirea machetelor în CSS sau marcarea site-ului în CSS, vizitați w3schools.com. După ce ne-am uitat pe internet, nu am putut găsi un tutorial decent de imagine în CSS – așa că așteptați-vă unul de la noi în săptămânile următoare. Transformarea desenelor în CSS este extrem de importantă, deoarece layout-urile tabelelor sunt de domeniul trecutului.

Iată un exemplu de site aproape finalizat al aspectului pe care l-am batjocorit în etapa 2. Acesta a fost preluat direct din browserul nostru web și, după cum puteți vedea, există acum un logo, culori, un sistem de navigare frumos, un subsol, și cel mai important, un aspect curat și organizat.
Datorită planificării în etapele 1 și 2, aspectul nostru este bine organizat și ușor de utilizat.

Cei doi

• faceți referire la șabloanele care au fost create în etapa 2; deși este bine să devii de la aspectul original, nu ar trebui să o faci
• faceți câteva cercetări înainte de a vă crea designul propriu-zis; obține idei de pe alte site-uri și creează-le proprii (fără a plagia)
• includeți culori și elemente grafice pentru a crea aspectul final pentru paginile dvs. web - utilizați CSS (foi de stil în cascadă) pentru a vă converti desenele din imagini în markup care pot fi înțelese de browserele web - faceți referire la diagrama dvs. de flux din etapa 1 când codați paginile cu hyperlinkuri; este mai bine să utilizați un meniu drop-down care include toate (sau majoritatea) link-urilor din site-ul dvs. pe fiecare pagină; acest lucru va permite o navigare mai ușoară și, de asemenea, va face paginile dvs. mai ușor de accesat cu crawlere atunci când păianjenii motorului de căutare trec; un loc minunat pentru a obține meniuri derulante CSS este la DynamicDrive.com - finalizați-vă designul în timp ce lucrați în Photoshop sau în orice software de editare a imaginilor pe care îl utilizați; poate fi dificil să faci modificări designului tău odată ce acesta este convertit în marcaj (cod)

The Donts

• nu includeți textul în meniurile de navigare când faceți conversia în CSS; în loc să utilizați text imagine, utilizați text obișnuit care poate fi citit de păianjenii motoarelor de căutare
• nu folosiți tabele la conversie; chiar dacă trebuie să cumpărați o carte pe CSS, va merita; mesele sunt moarte
• nu sari peste primele doua etape doar pentru a economisi timp; site-ul dvs. VA fi mai bun dacă începeți de la începutul procesului de design web (în loc de la sfârșit)
• nu uitați să vă comprimați imaginile când sunt tăiate pentru CSS; nu există nimic mai rău decât un site web cu încărcare lentă din cauza fișierelor de imagine mari; Photoshop are o opțiune „Salvare optimizată pentru web” (CS3 – „Salvare pentru web și dispozitive”)

Procesul face perfect
Urmând un proces de design web precum cel ilustrat în acest articol, creșteți șansele de a crea un site web care este bine organizat, ușor de navigat și foarte ușor de utilizat. Să recunoaștem – dacă vizitatorii se pierd sau devin confuzi în timp ce încearcă să navigheze pe site-ul dvs., ar putea apăsa butonul Înapoi și caută un site web mai ușor de utilizat. Oamenilor nu le place să se gândească atunci când vine vorba de a-și găsi drumul pe site-uri web. Nu-i pune pe gânduri. Gândiți-vă prin planificarea site-ului dvs. de la etapa 1 până la etapa 3 și veți descoperi că mai mulți oameni se vor bucura să vă viziteze site-ul.