Dacă doriți să proiectați și să creați pagini web, acest proces va fi mult mai ușor dacă intenționați. În faza de planificare, proiectantul și clientul pot lucra împreună pentru a găsi un format și un aspect care să se potrivească nevoilor lor. Procesul de planificare afectează stilul sau stilul site-ului, ați putea spune că acesta este cel mai important aspect în designul web, mai ales dacă este în scopuri comerciale.
Etapa
Partea 1 din 4: Crearea structurii de bază
Pasul 1. Determinați funcția site-ului web
Dacă creați un site personal, probabil că știți deja răspunsul. Cu toate acestea, dacă creați un site pentru o altă organizație, companie sau persoană, trebuie să aflați ce doresc și funcționalitatea site-ului. Tot ceea ce specificați aici va intra în vigoare la terminarea paginii web.
- Site-ul necesită Storefront? Ar trebui făcute comentariile utilizatorilor? Va trebui utilizatorul să-și creeze un cont mai târziu? Este articolul de pe site-ul web orientat? Sau orientată spre imagine? Toate aceste și alte întrebări vă vor ajuta în proiectarea și proiectarea site-ului.
- Acest proces de planificare poate fi atras într-un desen, mai ales dacă este pentru o companie mare și mulți oameni sunt implicați în crearea acestui proiect.
Pasul 2. Creați o diagramă a hărții site-ului (harta site-ului)
O diagramă de sitemap este similară cu o diagramă de flux, care arată modul în care utilizatorii se deplasează de la o pagină la alta. Nu aveți nevoie de o pagină web în această etapă, ci doar de un flux general de concepte. Puteți utiliza un program de computer pentru a crea diagrame sau pentru a vă schița propria pe hârtie. Utilizați această diagramă pentru a demonstra conceptele de aranjament ierarhic și conectivitate la pagina web.
Pasul 3. Încercați metoda de elaborare a cardului
O metodă populară de dezvoltare web de grup este utilizarea unui număr de carduri pentru a afla așteptările tuturor. Luați un număr de cărți de notă și scrieți conținutul de bază al unei pagini web pe fiecare în parte. Aranjați aceste cărți împreună cu echipa dvs. pentru a găsi cel mai bun concept. Această metodă este potrivită pentru utilizare atunci când colaborați cu alții la crearea paginilor web.
Pasul 4. Folosiți hârtie și un panou publicitar sau o tablă albă
Aceasta este o metodă originală de planificare cu un buget redus, puteți șterge sau schimba rapid conținutul și schimba fluxul. Desenați-vă designul web pe hârtie, apoi conectați hârtia cu fir sau trageți linii pe tablă. Această metodă este foarte potrivită pentru utilizare în sesiunile de brainstorming.
Pasul 5. Creați un inventar de conținut
De fapt, tinde să fie mai potrivit să se utilizeze în reproiectarea paginilor web decât în noile modele web. Introduceți fiecare conținut sau pagină web terminată într-o foaie de calcul. Notați scopul fiecărui conținut sau pagină, utilizând această listă pentru a determina ce să eliminați și ce să păstrați. Puteți simplifica structura web și simplifica procesul de reproiectare ulterior.
Partea 2 din 4: Crearea unui contur HTML de bază
Pasul 1. Creați un wireframe pentru a stabili ierarhia paginilor web
Șablonul HTML de bază este planul site-ului pe care îl veți construi, folosind doar cele mai elementare etichete și eșantion (blocuri / șabloane) de conținut. Acest cadru răspunde la întrebarea „Ce este vizibil pe web și unde?” Formatarea și stilarea nu sunt necesare în crearea acestui schiță.
- Puteți vedea structura și diagrama de flux a conținutului cu o schiță de bază înainte de a alege o setare de stil.
- Șabloanele HTML de bază nu sunt statice, cum ar fi fișierele PDF sau imaginile, puteți glisa rapid prin conținutul eșantion pentru a crea structuri noi.
- Cadrul de bază este interactiv, care avantajează atât dezvoltatorii web, cât și clienții. Deoarece acest cadru de bază este scris cu cod HTML simplu, îl puteți naviga și știu cum funcționează comutarea paginilor web. Acest lucru nu se poate face cu PDF.
Pasul 2. Încercați metoda Grey Box
Blocați sau evidențiați conținutul paginii dvs. web în Gray Box, cel mai important conținut este în partea de sus. Sortați conținutul într-o singură coloană. De exemplu, dacă pagina este „Despre companie”, atunci informații detaliate despre companie sunt în partea de sus, urmată de o listă de personal, apoi informații de contact etc.
Aceasta nu include anteturile și subsolurile. Grey Box este o reprezentare vizuală a conținutului care va apărea pe web
Pasul 3. Încercați un program de bază de creare a schițelor
Există diverse programe pe care le puteți utiliza în procesul de creare a unui cadru web de bază. Cantitatea de cod de programare web (limba) pe care trebuie să o stăpânești este diferită pentru fiecare program. Unele dintre programele care sunt destul de populare includ:
- Model de laborator. Acest site este dedicat „designului atomic”, fiecare conținut este considerat o „moleculă” care compune o pagină web mai mare.
- Diagrame. Această pagină web oferă servicii de planificare și încadrare bazate pe web. Aceste site-uri sunt plătite și necesită un abonament, dar puteți crea cadre web rapid fără a fi nevoie să stăpâniți o mulțime de coduri de programare web.
- Wirefy. Wirefy este un alt site care oferă „design atomic”. Dezvoltatorii web pot obține instrumentul gratuit.
Pasul 4. Utilizați marcaje HTML simple
Un șablon de bază bun se va converti cu ușurință la site-ul original. Nu vă gândiți prea mult la stilul web în timpul procesului de creare a acestui șablon. Utilizați marcaj care poate fi ușor de înțeles și schimbat.
Un cadru de bază simplu este mult mai bun. Scopul creării unui markup este de a construi o structură. Aspectul vizual poate fi ajustat ulterior cu CSS și markup avansat
Pasul 5. Creați o schiță de bază pentru fiecare pagină web
S-ar putea să fiți tentați să comparați fiecare pagină web cu un contur de bază. De fapt, acest lucru va face site-ul dvs. simplu și plictisitor. Creați un contur diferit pentru fiecare pagină, veți înțelege că fiecare pagină are nevoie de propriul design.
Partea 3 din 4: Crearea de conținut
Pasul 1. Pregătiți conținutul înainte de a crea o pagină web
Veți găsi mult mai ușor să vă previzualizați vizualizarea web dacă aveți deja conținut real în loc să utilizați mostre sau substituenți. Nu trebuie să aveți prea mult conținut, dar macheta dvs. va arăta mult mai bine dacă utilizați o copie a imaginii originale.
Nu trebuie să aveți tot materialul articolului, dar cel puțin ar trebui să aibă un titlu real
Pasul 2. Amintiți-vă că conținutul excelent nu este doar text
Internetul este mult mai complex decât o simplă pagină web de text. Aveți nevoie de o varietate de conținut diferit pentru a crea un site web excelent pentru a atrage și a invita vizitatori. De exemplu:
- Imagine.
- Voce.
- Videoclipuri.
- Transmisie web sau flux web (Twitter)
- Integrare Facebook
- RSS
- Feed web
Pasul 3. Solicitați ajutor unui fotograf profesionist
Dacă doriți să includeți fotografii pe site-ul dvs., prima impresie pe care o veți obține de pe site-ul dvs. web va fi mult mai bună dacă este plină de fotografie profesională. O fotografie bună valorează mai mult de douăzeci de fotografii de calitate scăzută.
Căutați un proaspăt absolvent al artei fotografiei ca soluție mai ieftină decât un fotograf profesionist care se ocupă de mult timp
Pasul 4. Scrie articole de calitate
Conținutul scris de pe pagina web va determina cantitatea de trafic web. Deși nu trebuie să vă faceți griji prea mult cu privire la crearea de conținut în acest proces de proiectare, nu este rău să începeți să vă gândiți la asta, deoarece veți avea nevoie și de conținut în mod regulat, odată ce site-ul dvs. este în funcțiune.
În plus față de conținutul articolului, există material scris pe care trebuie să îl aveți și în procesul de compilare a unei pagini web. De exemplu, informații de contact, numele companiei sau orice altceva care va fi folosit de mai multe ori pe site
Partea 4 din 4: Transformarea conceptelor în site-uri web
Pasul 1. Aranjați elementele de bază
Acest aranjament de elemente se aplică fiecărei pagini de pe site-ul dvs., cum ar fi anteturi, note de subsol și meniuri de navigare. Configurați-l într-un stil foarte simplu, astfel încât să puteți verifica cum arată toate paginile. Acest lucru este util mai ales pe măsură ce progresați în procesul de layout web.
Nu vă faceți griji prea multe despre detalii, încercați să previzualizați (previzualizați) cum arată antetul
Pasul 2. Creați un aspect simplu
Începeți prin deplasarea poziției ceasului din coloana conturului de bază în locația reală a paginii. De exemplu, este posibil să doriți să mutați exemplul de meniu de navigare la stânga paginii și lista titlurilor la dreapta.
Continuați să experimentați aspectele web pentru mai multe pagini, înainte de a trece la pasul următor. Permiteți altora să arunce o privire asupra acestuia pentru a vedea dacă aspectul pe care îl creați se simte viu
Pasul 3. Creați o machetă
Utilizați un program precum Photoshop pentru a crea machete sau exemple de pagini ale site-ului dvs. web. Utilizați aspectul pe care l-ați compilat ca ghid. Puteți face mașini mai rapide și puteți obține rezultatele dorite cu un program de procesare a imaginilor. Rezultatele acestor imagini pot fi folosite ulterior ca referință în procesul de scriere a codului de programare web.
Puneți conținutul real în machetă pentru a face să arate bine
Pasul 4. Înlocuiți conceptul de probă cu conținutul original
Adăugați conținut și elemente la paginile web. Nu transpirați setările stilului web deocamdată, doar stivați totul în locația corectă. Acest lucru vă va ajuta să examinați modificările stilului web pe care le faceți mai târziu.
Pasul 5. Creați un ghid de stil web
Este foarte important să mențineți un amestec de stiluri, în special pentru site-urile mari. Dacă site-ul este destinat scopurilor de afaceri și are deja propriul brand sau stil, acesta ar trebui să fie integrat în proiectarea site-ului. Lucruri de luat în considerare atunci când creați un ghid de stil pentru pagina web:
- Navigare
- Notă de cap
- Paragraf
- Caracter italic
- Personaj îndrăzneț
- Link-uri (active, inactive, plutesc)
- Utilizarea imaginii
- Pictogramă
- Buton
- listă
Pasul 6. Aplicați stilul web
Odată ce găsiți stilul și designul potrivit, implementați-l. CSS este unul dintre cele mai simple moduri de a implementa stiluri pe o pagină web sau pe site. Consultați instrucțiunile următoare pentru a înțelege mai bine detaliile utilizării CSS.
