Ovo je posljednji članak u dvodijelnoj seriji o planiranju web stranice.
Istražujemo pristup web dizajnu koji započinje idejama velike slike i završava dizajnom. Ako ste ga propustili, možda biste trebali pročitati prvi članak prije nego što nastavite.
Što je na stranicama?
Približavamo se dizajnu, ali još nismo došli do tog koraka. Prvo morate pogledati svoju kartu web stranice (engl. sitemap) i grupirati zajedno stranice koje će vjerojatno dijeliti isti izgled.
Primjerice, početna stranica (Home page) može uključivati veliku početnu sliku koja je razlikuje od ostalih stranica. Stranice s projektima ili proizvodima ili uslugama i ostale standardne stranice mogu imati slične, ali različite izglede. Studije slučaja mogle bi se prikazati u posebnom formatu.
Budući da će svaka vrsta stranice imati drugačiji izgled na konačnoj stranici, za svaku će biti potreban poseban predložak. U ovom slučaju predložak = vrsta ili tip stranice.
Vrlo jednostavna stranica može imati samo 2 predloška: početnu stranicu i temeljni sadržaj. Veće web mjesto s više web stranica može imati 10 ili više različitih izgleda web stranice.
Neke od čestih primjera:
- Početna stranica (Home)
- Temeljni sadržaj
- Kategorija proizvoda
- Detalji o proizvodu
- Košarica za kupovinu
- Provjera (Checkout)
- Pristup tvrtki
- Biografija djelatnika
- Napredno pretraživanje
- Rezultati pretraživanja
- Kontaktirajte nas
Web stranice – što su “wireframesi”?
Predlošci moraju biti dizajnirani pojedinačno, tako što će svaki proći kroz svoj mali proces planiranja. Ovdje na scenu stupaju okviri engl. wireframesi.
Što su oni zapravo? Ako imate nekakav izgled bez dizajna. Nema slika, boja ili fontova. Ako imate nekakav tekst, to je obično samo tekst koji zauzima mjesto i čita se kao besmislica.
Zamislite to ovako: wireframes je za web stranicu ono što je tlocrt za kuću.
Pri planiranju ovog izgleda/okvira važno je uzeti u obzir sve elemente iskustva vaših korisnika – od konceptualnog do konkretnog.
Prvo, razmislite o širini web stranice. (Hoće li stranice stati na 8% ekrana koji su široki samo 800 piksela?) Zatim razmislite koliko će se teksta pojaviti u svakom odjeljku. (Korisnici obično čitaju samo 20% riječi na stranici, a taj se postotak smanjuje kako stranice postaju duže.)
Na kraju, razmislite o svemu što će se pojaviti na stranici: navigaciji, slikama, tekstu, pozivu na akciju, logotipu/brendu itd. Koji bi elementi trebali biti najistaknutiji ili najbliže vrhu? Planirajte u skladu s tim.
Nakon što ste sve ovo dobro odvagnuli, možete početi odlučivati gdje će što ići. Na papiru ili u Photoshopu skicirajte osnovni izgled: dodajte okvire, tekst paragrafa ili slike za sve elemente.
Primjerice skica u Photoshopu bi trebalo izgledati kao na slici.
Težite izgledu koji će jasno komunicirati i biti pregledan i jednostavan za korištenje web posjetiteljima. Ovo je dobra prilika za poboljšanje upotrebljivosti testiranjem poziva na akciju.
Imajte na umu da će neke stranice uspjeti samo ako uspješno prođu indeksiranje i privlačenje tražilice uz potporu administratora stranice. Ako je to slučaj s vašim projektom, imajte na umu prilagođenost tražilicama – SEO optimizacija i jednostavnost ažuriranja (upravljanje sadržajem) dok razvijate svoje okvire – wireframese. Za bolje rezultate pitajte SEO konzultanta ili stručnjaka!
Nakon što ste skicirali osnovni izgled za svaku vrstu stranice – imajući na umu posjetitelje, funkcije, sadržaj i druge zahtjeve – dobili ste svoje okvire.
Možete li mi pokazati kako će to izgledati?!
Primijetite kako kasno u procesu počinjemo dizajnirati.
Postoji mnogo načina za uspješnu primjenu kreativnog dizajna na wireframes. Naravno, osobne preferencije dionika bit će faktor. Ali koliko god je to moguće, pokušajte voditi proces prema potrebama web posjetitelja i stilu vašeg brenda.
Provjerite jesu li svi elementi na svake web stranice uravnoteženo istaknuti. Ovo pomaže web posjetiteljima da na prvi pogled shvate vašu poruku, tj. ponudu. Stvorite jasan i jednostavan put koji će posjetitelji slijediti do konačne kupnje proizvoda ili usluge. Na kraju, kvalitetan UX dizajn bi trebao potaknuti korisnike na akciju.
Tehnički, sami dizajn dolazi nakon procesa planiranja, ali važno je osigurati da su ove dvije faze dobro povezane. Uz toliko priprema, čini se da bi ova faza trebala biti lako i brzo apsorbirana. Ali mnogi projekti zapravo usporavaju tijekom dizajniranja.
Zašto je to tako? Pa, većinom za web stranice upravljaju nekakvi timovi, i obično postoji mnogo dionika. Ako se novi ljudi kasno uključe u proces (a to često čine), vjerojatno neće razumijeti sve čimbenike koji su doveli do dizajna.
Kako bi olakšali ovaj korak, najbolje je uključiti donositelje odluka od samog početka, na način da svaka osoba koja će pomoći u kreiranju konačnog dizajna treba biti dio cjelokupnog procesa planiranja.
Rano definirajte donositelje odluka i nastojte da usko surađuju s vama. Vjerujte mi. To bi vam moglo uštedjeti tjedne vremena i energije.
Dakle, to je jedan pametan način za planiranje web stranice. Siguran sam da postoje i drugi. Baš kao što svaka web stranica treba biti fleksibilna, svaki proces treba biti prilagodljiv jedinstvenim potrebama projekta.
Najvažnija stvar je osigurati da imate plan. Dodavanje novih zahtjeva u kasnoj fazi procesa može biti skupo, dugotrajno i frustrirajuće.
Stolari imaju odličnu izreku: Mjeri dvaput. Reži jednom!
