Cele 8 porunci ale unui proces de design web (pentru începători și fără cod)
Publicat: 2021-11-01
Aflați cum puteți crea un site web de succes urmând un proces structurat de proiectare a site-ului web.
Ipoteza noastră este că ați găsit deja un nume de domeniu și un furnizor de găzduire.
Dacă nu v-ați ales încă gazda, vă recomandăm cu adevărat partenerului nostru Cloudways .
În exemplul de mai jos sunt prezentați pașii pentru cazul în care vă creați un site web pentru dvs. Dacă site-ul web este pentru un client, pot apărea noi pași în ceea ce privește planificarea proiectului, stabilirea termenelor limită, contractul și multe altele. Dar, în esență, va trebui să respectați pașii prezentați mai jos.
Acum, iată pașii:
- Identificarea domeniului de aplicare : ce nevoi trebuie să îndeplinească site-ul? Cu cine vorbește site-ul? Care sunt scopurile și motivele sale? Ce afaceri au același domeniu de aplicare și public țintă ca și dvs.?
- Definirea sitemap-ului site-ului : care sunt paginile web și caracteristicile care ajută afacerea și publicul să își atingă obiectivele?
- Creare continut : pregatirea copiei pentru paginile site-ului;
- Crearea mărcii vizuale : pregătirea paletei de culori, fonturilor și graficelor pentru a fi utilizate în designul site-ului dvs., care va sfârși prin a vă modela identitatea vizuală;
- Wireframing: schițarea aspectului paginilor web;
- Design site web : crearea site-ului web propriu-zis, fiți conștienți de limitările instrumentelor pe care le utilizați;
- Testare : asigurați-vă că totul funcționează, de la linkuri la formulare și butoane. Testați site-ul pe diverse browsere și dispozitive pentru a vă asigura că funcționează corect;
- Lansare: faceți puțin zgomot înainte de a intra în direct cu o strategie de comunicare atent planificată.
Să le luăm unul câte unul.
Etapele unui proces de proiectare a unui site web
1. Identificarea domeniului de aplicare
În această etapă, tu și echipa ta va trebui să descoperiți răspunsurile la unele dintre întrebările de mai jos:
- Pentru cine este site-ul?
Un site atrăgător ar putea avea avantajele sale, dar, dacă vrei ca vizitatorii site-ului tău să-și angajeze banii sau timpul, înseamnă că trebuie să sapi mai mult, pentru a-i convinge că angajamentul merită. Pentru a fi convingător, va trebui să-ți înțelegi publicul țintă, să-i înțelegi nevoile, motivatorii interni și externi.
Această săpătură înseamnă, de asemenea, că trebuie să creați un produs care să fie util și care să rezolve nevoia cuiva.
De exemplu, să presupunem că am un hobby de a face aranjamente florale din hârtie și vreau să o duc mai departe și să o transform într-o afacere. Face cineva flori de hârtie? Unde pot găsi aceste persoane?
Ei bine, aș putea crede că organizatorii de nunți și viitoarele mirese ar putea dori o astfel de opțiune.
Dar trebuie să merg și mai departe. Ar vrea fiecare mireasă florile mele de hârtie sau doar un tip de mireasă?
Aceasta înseamnă că va trebui să parcurgeți câteva cercetări și să vă verificați concurenții. Există și alți comercianți de flori de hârtie? De asemenea, concurezi cu florile vechi bune. Care ar fi atunci valoarea ta adăugată sau propunerea ta de valoare unică?
- Ce s-ar aștepta vizitatorii site-ului dvs. să găsească pe site-ul dvs.?
Revenind la exemplul nostru, probabil că vizitatorii dvs. ar dori să vadă o varietate de produse, culori, informații despre transport (ar putea avea nevoie de îngrijire suplimentară, deoarece florile de hârtie sunt fragile), etc. Ce zici de unele mențiuni că hârtia este reciclată ? Poate că clienții tăi sunt foarte conștienți de impactul lor asupra mediului și le pasă de astfel de detalii
Poate cineva să închirieze și florile?
Acum, ce se întâmplă dacă includeți câteva mărturii? Poate ai conceput niște aranjamente florale din hârtie pentru nunțile prietenilor tăi.
Vezi unde ajung? Trebuie să vă faceți cercetări înainte de a sări în designul site-ului web.
- Cum arată conversiile?
Vorbim despre înregistrarea la curs, achiziția unui produs, abonamentul la un newsletter?
În cazul zilei de luni, puteți afla cu ușurință conversiile lor de pe pagina de pornire. 
Conversia principală este evidentă din apelul la acțiune „Începeți”, care este poziționat chiar deasupra pliului, în centru.
O altă micro-conversie este o înregistrare la conferință, pe care o puteți observa din mesajul din colțul din stânga sus.
O altă micro-conversie este cea „Vânzări de contact”.
Dar site-ul dvs., există o conversie principală? Sunt unele secundare?
- Cum arată călătoria clientului?
O hartă a călătoriei clienților este o reprezentare vizuală a drumului pe care un vizitator o parcurge prin site-ul dvs. web de la intrare, până când ating obiectivul dorit și pleacă.
O hartă a călătoriei clienților ar trebui să includă informații precum paginile care sunt vizitate și în ce ordine, pașii necesari pentru ca vizitatorul site-ului web să-și atingă obiectivele, punctele de interacțiune dintre compania dvs. și vizitatorii site-ului (formulare, chat, etc), potenţiale puncte de frecare.
Călătoria clientului nu este fixă. Începi cu o presupunere, apoi te adaptezi pe parcurs. Puteți utiliza instrumente precum Google Analytics pentru a analiza comportamentul site-ului web și pentru a face optimizări pe baza unor informații reale.
2. Definirea sitemap-ului site-ului 
Sursă
Acum că călătoria clientului este clară, este timpul să creați harta site-ului. Harta site-ului web este utilizată pentru a stabili arhitectura informațională a site-ului web și explică relațiile dintre diferitele pagini.
Puteți crea sitemap-uri în instrumente, de la Excel la Figma.
3. Crearea de conținut 
Acum că structura site-ului web este stabilită, este timpul să creați conținut pentru paginile individuale.
Iată câteva dintre cele mai bune practici atunci când vine vorba de copywriting:
- Utilizați cuvinte și concepte familiare utilizatorilor dvs. ideali;
- Nu merge cu puf și jargon;
- Încercați să comunicați așa cum ați face într-o întâlnire normală față în față. Astfel vei induce un sentiment de familiaritate;
- Scrieți la timpul prezent și evitați vocea pasivă;
- Verificați întotdeauna lizibilitatea dvs. Pentru aceasta, puteți utiliza instrumente precum Readable .
- Testează-ți titlurile cu prieteni, străini, colegi. După cum spune David Ogilvy:
„În medie, de 5 ori mai mulți oameni citesc titlul decât citesc corpul. Când ți-ai scris titlul, ai cheltuit optzeci de cenți din dolarul tău.”
Aceasta înseamnă că titlurile sunt vitale pe un site web.
Încercați să vă optimizați conținutul în jurul anumitor cuvinte cheie relevante pentru publicul dvs. (SEO). Puteți folosi instrumente precum Google trends (gratuit), Ubersuggest (gratuit) sau Ahrefs (plătit).
- Folosiți cadrul de copywriting AIDA.
A – Atenție : creați conținut care să atragă atenția, care să stimuleze curiozitatea și care să vă convingă publicul că trebuie să afle mai multe despre marca dvs.
I – Interes : oferiți-le vizitatorilor un motiv pentru a rămâne implicați. Cheia aici este să faci problema personală, astfel încât să vorbești doar cu prospectul și cu nimeni altcineva.
D – Dorință : aici le arăți vizitatorilor paginii de pornire cum ofertele tale oferă o soluție la problema/durerea lor. Aici puteți începe să explicați caracteristicile produsului dvs., cu accent pe modul în care aceste caracteristici le pot îmbunătăți viața.
A – Acțiune : acum este timpul să convingeți potențialii să acționeze: cumpărați, abonați-vă, descărcați un freebie, începeți o încercare etc.
4. Crearea brandului vizual
Acest pas nu trebuie să fie întotdeauna al 4-lea pas. Puteți începe chiar mai devreme în procesul cu aceasta.
Identitatea vizuală se referă la modul în care modelezi percepția în jurul mărcii tale.
Acesta este un întreg proces în sine.
Aici va trebui să:
- Definiți cum ar trebui să arate grafica dvs. Veți folosi forme, grafică 3D, ilustrații?
Sursă
- Definiți tipografia site -ului dvs.;
Sursă
- Alegeți o paletă de culori . Din paleta de culori, puteți evolua către un ghid de stil, unde puteți stabili culorile link-urilor, titlurilor, butoanelor, fundalurilor etc. pentru aceasta puteți folosi instrumente precum roata de culori Adobe .
Sursă
- Creați imagini care spun povestea mărcii dvs.;
Sursa: https://convertsquad.com/blog/
- Proiectează-ți logo-ul
Sursă
- Pregătiți activele fizice (ambalarea produsului etc.).
Sursă
Majoritatea elementelor de mai sus pot fi folosite pentru a crea un moodboard. Când strângeți fonturile, grafica, culorile într-o placă de dispoziție, veți putea înțelege mai bine viziunea generală a stării de spirit a site-ului. Care va fi tonul și vocea ta generală: deschisă sau întunecată? Formal sau jucăuș? 
Sursă
5. Wireframing 
Sursă
Wireframes-urile sunt schițe ale unei pagini web sau ale unei aplicații. Puteți să le desenați manual, să le creați în Google Docs, Sketch sau Figma , în funcție de complexitatea site-ului dvs. Un wireframe este folosit pentru a dispune conținutul și funcționalitatea unei pagini. Ar trebui să-i spună unui designer unde ar trebui să plaseze un videoclip, imagini, titluri, blocuri de conținut, butoane etc. Este bine să folosești wireframes înainte de a sari în design pentru că îți permit să fii mai flexibil. Este mai ușor să modificați structura unui wireframe decât cea a unui site web gata proiectat.
6. Design site 
Sursă
Acum vorbim de afaceri!
Avem conținutul nostru, wireframes, elemente vizuale, acum este timpul să ne punem la treabă.
După cum se menționează în titlu, nu trebuie să fii un designer web sau un expert de cod pentru a crea un site web. Există o mulțime de instrumente care vă ajută să proiectați un site web fără cod. Se numesc Page Builders.
Cele mai multe dintre ele vă permit să personalizați fiecare centimetru din designul dvs. și să îl faceți receptiv.
În WordPress, puteți merge cu propriul nostru constructor Colibri, sau Elementor, de exemplu. În afara WordPress, Wix și Squarespace sunt foarte populare. Aceste instrumente vă pot oferi șabloane, pe care le puteți îmbogăți prin adăugarea propriilor secțiuni, imagini și conținut.
Acum, dacă designul dvs. necesită anumite animații, efecte, s-ar putea să fie necesar să adăugați ceva cod.
7. Testare
Ok, să presupunem că conținutul și elementele vizuale sunt disponibile. Slujba ta nu este încă gata. Este timpul să vă asigurați că totul funcționează: nu aveți niciun link care să ducă la nicăieri (aka link-uri sparte sau 404), că toate butoanele și formularele funcționează, că site-ul web arată bine pe majoritatea browserelor și dispozitivelor.
Acum, înainte de lansare, ați putea testa puțin modul în care site-ul dvs. este perceput de oamenii externi. În acest fel, poți evita să fii prins în propriile părtiniri. Pentru aceasta, puteți face o simplă cercetare a utilizatorului: testul de 5 secunde . Aceasta este o metodă care vă ajută să măsurați care este prima impresie pe care o au utilizatorii în primele cinci secunde de la vizualizarea unei pagini de pornire, de exemplu
8. Lansare
Acum, când lansați, apăsați pe publish și ați terminat. Nu, trebuie să creezi ceva nou-născut, să lansezi niște campanii de PR, să faci un strigăt pe rețelele sociale pentru a-i anunța pe oameni că ești afară!
Și asta e o înfășurare, oameni buni. Acum aveți pașii potriviți pentru un proces de design web.
Construire site fericită!
Dacă v-a plăcut acest articol și doriți să aflați mai multe despre cum să proiectați un site web WordPress , asigurați-vă că vă abonați la canalul de Youtube al Colibri și urmăriți-ne pe Twitter și Facebook!