Cum de a planifica un site

Dacă doriți să creați și să creați un site web, veți găsi mult mai ușor acest lucru dacă îl planificați mai întâi. Faza de planificare permite dezvoltatorului și clientului să colaboreze până când găsesc un format și un aspect care să răspundă nevoilor acestora. Procesul de planificare influențează alegerile stilului site-ului web și este, fără îndoială, cea mai importantă parte a designului web, în special pentru companii.

conținut

Pași
Partea 1crearea structurii
Partea 2crearea unui wireframe html
Partea 3crearea conținutului
Partea 4transformarea conceptului într-un sit

pași

Partea 1
Crearea structurii

Imagine intitulată Planificarea unui site web Pasul 1

Determinați funcționalitatea site-ului. Dacă faceți un site pentru dvs., probabil că deja știți răspunsul la acest lucru. Dacă faceți un site web pentru o altă persoană, companie sau organizație, va trebui să aflați ce așteaptă clientul de pe site și funcționalitatea acestuia. Orice ați decide aici va influența produsul final.

Am nevoie de o vitrină? Aveți nevoie de comentarii de la utilizatori? Pot crea conturi? Site-ul este orientat spre articol? O poza? Toate aceste și alte întrebări vă vor ajuta să informați designul și structura site-ului.
Acest lucru poate fi un proces obositor, mai ales pentru marile companii cu implicarea mai multor persoane în proiect.

Imagine intitulată Planificarea unui site Web Pasul 2

Creați o diagramă a hărții site-ului. Seamănă cu o diagramă de flux și vă arată cum navighează utilizatorii de la o pagină la alta. În acest moment nu aveți nevoie de pagini, ci doar un flux general de concepte. Aveți posibilitatea să utilizați un program de calculator pentru a crea diagrama sau puteți desena manual cu o hârtie. Utilizați această diagramă a hărții site-ului pentru a vă prezenta perspectiva asupra ierarhiei și a conectivității paginilor site-ului dvs.

Imagine intitulată Planificarea unui site web Pasul 3

Încearcă să folosești cărți. O metodă populară pentru utilizarea în grup este de a folosi o mulțime de cărți pentru a înțelege abordarea ideală a fiecărei persoane. Luați un teanc de jetoane (de la cele pentru semnare) și scrieți conținutul de bază al unei singure pagini pe fiecare cip. Cereți echipei dvs. să organizeze chipsurile în modul pe care îl consideră cel mai util. Această strategie este minunată pentru situațiile în care colaborați cu alții la crearea unui site web.

Imagine intitulată Planificarea unui site Pasul 4

Utilizați hârtie și un buletin de bord sau o tablă albă. Aceasta este metoda originală de planificare low-cost și vă permite să ștergeți sau să mutați conținutul și să rearanjați rapid totul. Desenați desenul pe bucăți și hârtie și conectați-vă cu o linie sau conturați tabla. Excelent pentru sesiuni de brainstorming.

Imaginea intitulată Planificați un site web Pasul 5

Utilizați un inventar de conținut. Această opțiune este mai bine orientată spre reproiectări decât la site-urile noi. Plasați fiecare parte a conținutului sau paginile existente într-o foaie de calcul. Luați notă de scopul fiecăruia și folosiți această listă pentru a determina ce se întâmplă și ce rămâne. Acest lucru va ajuta la reducerea excesului și la simplificarea procesului de reproiectare.

Partea 2
Crearea unui Wireframe HTML

Imaginea intitulată Planificați un site Step 6

Creați o rețea wireframe pentru a consolida ierarhia. O schemă HTML este un schelet al viitorului dvs. site web, folosind doar cele mai elementare etichete și blocuri pentru a reprezenta conținutul. El răspunde la întrebarea: "Ce se întâmplă pe fiecare ecran și unde?". Formatarea și stilul sunt complet ignorate într-o rețea.

Siră-cadru vă permite să vedeți structura și fluxul de conținut înainte de a face alegeri stil.
Fonturile HTML nu sunt statice, cum ar fi PDF-urile sau imaginile, și vă permit să mutați rapid blocurile de conținut pentru a crea o nouă structură.
O rețea wireframe este interactivă, care este bună atât pentru dezvoltator, cât și pentru client. Deoarece schema wireframe este scrisă în HTML simplu, puteți naviga prin ea și puteți obține o idee despre cum funcționează mișcarea între pagini. Acesta este un lucru care nu poate fi exprimat printr-un PDF conceptual.

Imagine intitulată Planificarea unui site Pasul 7

Încercați metoda Grey Box. Grupează conținutul paginii tale în cutii de culoare gri, conținutul cel mai important din partea de sus. Blocurile sunt aranjate într-o singură coloană, cea mai importantă parte a conținutului din pagina de sus. De exemplu, în cazul în care pagina este compania "Despre", detaliile se pot topi, urmate de o listă a echipei, urmată de informațiile de contact etc.

Aceasta nu include antetul și subsolul. Cutiile gri sunt pur și simplu o reprezentare vizuală a conținutului care va fi găsit pe pagină.

Imaginea intitulată Planificați un site web Pasul 8

Încercați un program de creație wireframe. Există mai multe programe care vă pot ajuta în procesul de modelare a firului. Cantitatea de cunoștințe de programare variază de la program la program. Unele dintre cele mai populare sunt:

Pattern Lab. Acest site este specializat în "designul atomic", în care fiecare bucată de conținut este considerată o "moleculă" care creează o pagină mare.
Jumpcharts. Acesta este un site de planificare site-ul și este, de asemenea, un serviciu de wireframing. Aceasta necesită un abonament plătit, dar vă permite să creați rapid fire fără a vă îngrijora prea mult de cod.
Wirefy. Acesta este un alt sistem de "design atomic". Instrumentele sunt gratuite pentru dezvoltatori.

Imagine intitulată Planificarea unui site Pasul 9

Aflați cum să utilizați marcajul HTML simplu. O schemă bună poate fi ușor convertită într-un loc real după aceea. Nu vă faceți griji cu privire la stil în timpul procesului de sincronizare. În schimb, utilizați un marcaj care poate fi ușor înțeles și înlocuit cu un efort foarte mic.

Mai puțin este mai mult cu scheletul. Scopul este pur și simplu de a construi structura. Aspectul poate fi apoi ajustat cu CSS și marcare avansată.

Imaginea intitulată Planificați un site web Pasul 10

Creați o rețea wireframe pentru fiecare pagină de pe site-ul dvs. Poate că este tentant să faci doar o singură schemă și să spui: "Răcoros, o pot aplica tuturor celorlalte pagini și asta e". De fapt, acest lucru va genera un site generic și enervant. Luați timp pentru fiecare pagină în sincronizare și în curând veți descoperi că fiecare pagină are nevoile organizaționale.

Partea 3
Crearea conținutului

Imaginea intitulată Planificați un site Pasul 11

Aveți un conținut pregătit înainte de a începe să vă construiți site-ul. Va fi mult mai ușor să vedeți cum arată site-ul dvs. dacă aveți conținut real în loc de marcaje. Nu aveți nevoie de multă mulțumire, dar veți avea mult mai plăcut în mockups dacă aveți niște imagini originale.

Nu aveți nevoie neapărat de corpul unui articol, dar ar trebui să aveți cel puțin titlurile.

Imagine intitulată Planificați un site Web Step 12

Amintiți-vă că un conținut bun este mai mult decât text. Internetul este mult mai mult decât texte simple pe site-uri web. În scopul de a sta în nișă dvs., veți avea nevoie de o varietate de tipuri diferite de conținut pentru a păstra și a atrage vizitatori. Un conținut posibil de reținut:

imagini
Vezi profilul
video
Fluxuri (Twitter)
Integrarea cu Facebook
RSS Feed
Conținut feeduri

Imaginea intitulată Planificați un site Pasul 13

Plătiți un fotograf profesionist. Dacă includeți fotografii pe site-ul dvs., afișările dvs. inițiale vor fi mult mai bune cu fotografiile profesionale. O singură fotografie bună este mult mai bună decât douăzeci de fotografii proaste.

Căutați absolvenți recenți în fotografie pentru soluții mai ieftine, comparativ cu mai mulți profesioniști cu experiență.

Imaginea intitulată Planificați un site Web 14

Scrie articole de calitate. Conținutul scris pe pagina dvs. va determina marea majoritate a traficului web. În timp ce nu trebuie să vă faceți griji prea mult despre crearea conținutului în acest proces de proiectare, nu vă faceți rău să vă gândiți la acest lucru, deoarece veți avea nevoie de conținut regulat odată ce site-ul dvs. este online.

În plus față de articolele de conținut, aveți, de asemenea, elementele scrise pe care le veți avea nevoie în timpul procesului de construire a site-ului web. Acestea sunt informațiile de contact, numele companiilor sau orice altceva care este utilizat în diverse locuri de pe site.

Partea 4
Transformarea conceptului într-un sit

Imagine intitulată Planificați un site Pasul 15

Stilate elementele globale. Acestea sunt lucrurile care se văd pe fiecare pagină a site-ului dvs., cum ar fi meniul antet, subsolul și meniul de navigare. Creați un stil de bază, astfel încât să puteți vedea cum vor arăta toate paginile. Acest lucru va fi foarte util pe măsură ce intri în procesul de planificare.

Nu vă faceți griji prea multe despre detalii, dar încercați să obțineți cât mai aproape de aspectul final al antetului.

Imagine intitulată Planificarea unui site 16

Creați un aspect de bază. Începeți să mutați obiectele din cadrul dvs. prin tragerea acestora dintr-o coloană și așezându-le în locul potrivit. De exemplu, puteți muta blocul de navigare în partea stângă a paginii și o listă de titluri la dreapta.

Continuați să experimentați cu machete cu mai multe pagini înainte de a continua. Permiteți altor persoane să testeze dacă vor găsi navigație organică.

Imaginea intitulată Planificați un site Pasul 17

Creați un mockup. Folosind un program precum Photoshop, creați un mockup de câteva pagini de pe site-ul dvs. Utilizați aspectul pe care l-ați definit ca o filă. Puteți lucra mult mai repede într-un program de editare a imaginilor și lăsați-le tot așa cum doriți. Acest lucru vă va permite să utilizați imaginile ca referință atunci când este momentul să codificați.

Includeți conținut real în mockup pentru a vă asigura că totul este în armonie.

Imagine intitulată Planificarea unui site 18

Înlocuiți blocurile cu conținut. Începeți prin adăugarea conținutului și a elementelor pe pagină. Nu vă faceți griji despre stil încă, puneți totul în locul potrivit. Acest lucru vă va ajuta să știți dacă modificările de stil vor funcționa.

Imagine intitulată Planificați un site Pasul 19

Creați un ghid de stil. Acesta este elementul esențial pentru menținerea unui site web coerent, în special pentru site-uri mari. Dacă site-ul este pentru o companie care are deja o identitate vizuală, trebuie să fie încorporată în design-ul site-ului. Lucrurile care trebuie luate în considerare în ghidul de stil sunt:

Despre mine
Headers (
,
, etc)
alineatele
cursiv
îndrăzneț
Link-uri (active, inactive, mouseover)
Utilizarea imaginilor
icoane
butoane
liste

Imaginea intitulată Planificați un site web Pas 20

Aplicați acest stil. Odată ce ați decis un stil și un design pentru site-ul web, este timpul să începeți să îl implementați. CSS este una dintre cele mai simple modalități de a implementa stilul pe o pagină sau pe un site complet.