Što treba i što ne smijete učiniti u izvrsnom web dizajnu

Ako ga slijedite, ovaj će se vodič pokazati vrlo vrijednim resursom za web dizajn, osobito ako planirate koristiti softver za razvoj web stranice u budućnosti. Od neiskusnih do iskusnih, ovaj vodič ima za svakoga ponešto.

Proces izvrsnog web dizajna Kako bismo bili sigurni da smo svi na istoj stranici, započnimo s osnovnom definicijom za "web dizajn". Prema Wikipediji, web dizajn je:

“proces konceptualizacije, planiranja, modeliranja i izvođenja isporuke elektroničkih medija putem Interneta u obliku Markup jezika prikladnog za interpretaciju putem web preglednika i prikaz kao grafičko korisničko sučelje” .

Proces web dizajna može se usporediti s procesom pisanja znanstvenog rada. U fazi konceptualizacije/planiranja izrađuju se dijagrami toka (konture) koji ilustriraju navigacijsku strukturu vaše web stranice. U fazi modeliranja stvaraju se statični okviri (grubi nacrt) koji ilustriraju skeletni izgled za svaki odjeljak vaše web stranice. Nakon izrade žičanih okvira, grafika, boje i tekst koriste se za izradu dizajna vaših web stranica na temelju izgleda žičanih okvira. U fazi izvođenja, vaš dizajn se pretvara u format koji podržavaju web preglednici, dodaju se tekst i sadržaj i na kraju se vaša web stranica objavljuje uživo na Internetu kako bi je svijet vidio (konačni nacrt).

Sve tri faze procesa projektiranja jednako su važne. Mnogi web dizajneri preskaču fazu kako bi uštedjeli vrijeme ili jer misle da to nije potrebno. Međutim, sve tri faze su neophodne ako je vaš cilj stvoriti uspješan dizajn i respektabilnu web stranicu. Čak i ako se koriste ove tri faze, postoje mnoge pogreške koje web dizajneri mogu napraviti, a koje će dovesti do web stranica loše kvalitete, neprikladnih za korištenje. Vrijeme je da očistite ormarić loših praksi web dizajna i obnovite ga dobrima.

Faza 1: Konceptualizacija i planiranje
Ova faza se preskače češće od druge dvije faze. Većina pisaca ne voli stvarati nacrte za istraživačke radove, a većina web dizajnera također ne voli stvarati dijagrame toka. Ne budi lijen. Ako se potrudite i isplanirate svoju web stranicu, vidjet ćete da će proces web dizajna teći glatko s manje grešaka napravljenih usput.

Postoji nekoliko stvari koje će vam trebati kako biste učinkovito konceptualizirali i planirali svoju web stranicu:

• mozak
• olovka i papir
• (opcijski) softver za dijagram toka
• opću ideju o različitim dijelovima vaše web stranice

Za početak uzmite olovku i papir ili pokrenite svoj omiljeni softver za dijagrame toka. Koristimo OmniGraffle Professiona za Mac OS X koji košta 150 USD po licenci, ali se isplati ako redovito izrađujete web stranice. Ako ste na osobnom računalu, onda je SmartDraw sjajan BESPLATAN dio softvera za dijagram toka koji možete koristiti. Ipak, olovka i papir dobro funkcioniraju.

Postoje mnoge metode za izradu dijagrama toka. Pokazat ćemo vam najosnovniji način da to učinite radi vremena i duljine ovog članka. Ako želite saznati više o dijagramima toka, potražite dijagrame toka na Googleu ili Yahoou.

Pogledajte dijagram toka koji smo izradili prilikom konceptualizacije kromatskih stranica. (1) Na vrhu dijagrama toka navodimo naziv naše web stranice. (2) Zatim uključujemo svaki primarni odjeljak naše web stranice: Početna, O i Usluge. Ovi odjeljci su glavna navigacija za vašu web stranicu. Kako će se zvati svaki odjeljak u potpunosti ovisi o sadržaju vaše web stranice. Pokušajte koristiti što je moguće manje odjeljaka kako vaši posjetitelji ne bi bili preopterećeni prilikom navigacije kroz vašu web stranicu.

(3) Zatim dodajte sve sekundarne stranice (pododjeljke) koje će biti navedene na svakoj od primarnih stranica. Za Home smo uključili profesionalni web dizajn, web razvoj i optimizaciju za tražilice. Sekundarna navigacija mora biti više opisna od primarne navigacije. Što je dublja navigacijska hijerarhija vaših web stranica, to bi svaka oznaka trebala biti opisnija.

Dos

• Manje je više; svesti broj primarnih odjeljaka na minimum. Na našoj web stranici koristimo 6 odjeljaka što je više nego dovoljno
• Bez obzira koristite li olovku i papir ili softver za dijagram toka, neka stvari budu što čistije i organiziranije. Iako ste vi (i svi koji rade s vama) jedini koji ćete koristiti dijagram toka, on i dalje mora imati smisla - Vaši primarni odjeljci trebali bi koristiti šire pojmove, dok bi sekundarni i tercijarni pojmovi trebali biti više opisni

Donti
Stvaranje dijagrama toka prilično je jednostavno; međutim, postoji nekoliko pogrešaka koje se lako mogu napraviti:

• Nemojte koristiti vrlo opisne pojmove u svojoj primarnoj navigaciji osim ako se cijela vaša web stranica ne fokusira na jednu usku temu - Ne pokušavajte grupirati više tema na istoj stranici. Napravite opći odjeljak za ove teme i iz tog odjeljka stvorite pododjeljke. Ovo će povećati vjerojatnost da će web-stranice pododjeljka (opisne) imati bolje rangiranje u tražilicama (Google, Yahoo, MSN, Ask). Nakon što ste izradili koncizan i opisni dijagram toka, spremni ste prijeći na drugu fazu procesa web dizajna:

Faza 2: Modeliranje
U fazi modeliranja stvaraju se statične "žičane" makete. Svaki mockup ilustrira goli kostur izgleda za svaku od web stranica koje će biti uključene u vaše web mjesto. Ova faza je važna jer nam daje ideju o tome gdje će se različiti elementi postaviti u našem dizajnu. Neki od tih elemenata su:

• logo
• navigacijski izbornik
• sadržaj
• slike, videa

Za izradu ovih maketa možete koristiti olovku i papir ili željeni softver za makete. U prošlosti smo koristili Photoshop, ali u posljednje vrijeme koristimo OmniGraffle Professional. OmniGraffle ne zahtijeva toliko resursa kao Photoshop i omogućuje nam mnogo brže sastavljanje maketa okvira.

Osim toga, provjerite imate li u blizini dijagram(e) toka koji ste izradili jer ćete se morati pozvati na njih s vremena na vrijeme kako biste bili sigurni da ismijavate sve stranice koje će se pojaviti na vašoj web stranici.

Evo našeg primjera kako bi maketa okvira trebala izgledati. Kao što vidite, nema uključenih boja ili grafike. Upravo takav bi trebao biti mockup žičanog okvira – skeletni izgled vašeg dizajna. Svrha je imati opću ideju o tome gdje će svaki od elemenata web stranice biti postavljen.

Obično počinjemo od gornjeg lijevog kuta i idemo prema dolje. Ne postoji određeni način na koji bi žičani okvir trebao izgledati. Koristi svoju maštu. Međutim, pobrinite se da prilikom izrade okvira ne zaboravite uključiti najvažnije elemente web stranice (logotip, navigacijski izbornik, položaj sadržaja, položaj slika/videozapisa).

Ako će neke vaše stranice koristiti isti izgled, tada nije potrebno ismijavati sve te stranice (iako to svakako možete). Samo budite sigurni da napravite model bilo kojeg jedinstvenog izgleda koji će vaša web stranica imati. Kasnije ćeš biti zahvalan.

Doovi

• mockup svih jedinstvenih stranica
• uključite važne elemente (logotip, navigacija, položaj sadržaja, položaj slika/videozapisa) -počnite od vrha i krenite prema dolje -pozovite se na dijagram toka stvoren u fazi 1 kako ne biste zaboravili izraditi maketu bilo koje stranice -spremite, spremite, spremiti – kao i sa bilo čim na računalu, spremite svoje modele svakih 10-ak minuta
• usredotočite se na jasne izglede jednostavne za korištenje -označite svoje elemente tako da ne zaboravite što jesu kada ih referencirate u fazi 3, izvođenje -koristite druge web stranice kao inspiraciju; nema ničeg lošeg u preuzimanju elemenata s drugih stranica i stvaranju vlastitih (pogledajte “ne treba”)

The Dont's

• nemojte uključivati ​​grafiku ili boje (to je za sljedeću fazu) -nemojte učiniti svoje modele previše "zauzetima"; usredotočite se na čiste, dobro organizirane izglede prilagođene korisniku - nemojte preskočiti ovu fazu; jednako je važno kao i prvo i posljednje - ako preuzimate elemente s drugih web stranica, pazite da ne plagirate; postoji razlika između toga da vas nadahne druga web stranica za stvaranje određenih elemenata vašeg dizajna i otvorenog pljačkanja njihovog izgleda i boja

Faza 3: Izvršenje
U trećoj i posljednjoj fazi, izvršenju, planiranje iz faza 1 i 2 kombinira se kako bi se pomoglo u stvaranju žive, interaktivne web stranice.
Treća faza je vremenski daleko najintenzivnija budući da ćete 1) stvarati grafiku 2) stvarati sadržaj i konačno, 3) pretvarati web dizajn iz slika u kod koji web preglednici koriste za predstavljanje vaše web stranice svijetu.

Dok dođete do treće faze, trebali biste imati jasnu ideju o:

• kako će vaši posjetitelji doći s jednog mjesta na drugo (faza 1, dijagram toka) -kako će vaše web stranice biti postavljene (faza 2, wireframe mockupovi)

Ako nemate jasnu predodžbu o ove dvije stvari, vratite se na prvu i drugu fazu i nastavite ih razvijati. Uvidjet ćete da je treća faza najlakša kada ste izradili jasan, koncizan borbeni plan za dizajn vaše web stranice.

Odbacite olovku i papir
U fazi 3 trebate koristiti Photoshop ili neki drugi program za uređivanje slika budući da ćete koristiti boje i grafiku za izradu izgleda za svoju web stranicu.

Obično prvo počinjemo stvarati "početnu" stranicu (indeks). Koristite svoje žičane okvire koje ste izradili u fazi 2 kao predložak za svaku od stranica koje izradite. Međutim, umjesto korištenja čvrstih okvira, umjesto toga upotrijebite grafiku, boje i tekst. Svaka stranica mora izgledati točno onako kako želite da izgleda na Internetu jer je ovo završna faza procesa dizajna.

Obavezno uključite pozadinu za svoju navigaciju (ali zapravo nemojte dodavati tekst svojoj slici). Kada se pretvara pomoću CSS-a (kaskadne tablice stilova), vaša navigacija bi trebala biti u obliku teksta, a ne slika. Tražilice ne mogu indeksirati slike (ključne riječi koje se koriste u vašoj navigaciji neće biti indeksirane na stranicama s rezultatima tražilice, što znači da će manje ljudi moći pronaći vašu web stranicu).

Kada ste zadovoljni svojim dizajnom i osjećate da je spreman za stavljanje na Internet, vrijeme je da rastavite dizajne kako biste mogli stvoriti izgled temeljen na CSS-u. Za više informacija o pretvaranju vaših izgleda u CSS ili označavanju vaše web stranice u CSS-u, posjetite w3schools.com. Nakon što smo pretražili internet, nismo mogli pronaći pristojan vodič za pretvaranje slike u CSS – stoga ga očekujte od nas sljedećih tjedana. Pretvaranje vaših dizajna u CSS iznimno je važno budući da su rasporedi tablica stvar prošlosti.

Ovdje je primjer skoro dovršenog web-mjesta izgleda kojeg smo ismijavali u fazi 2. Ovo je preuzeto izravno iz našeg web-preglednika i kao što vidite, sada postoji logo, boje, lijep navigacijski sustav, podnožje, i što je najvažnije, čist, organiziran izgled.
Zahvaljujući planiranju u fazama 1 i 2, naš je izgled dobro organiziran i jednostavan za korištenje.

Dos

• referencirajte svoje predloške koji su stvoreni u fazi 2; iako je u redu odstupiti od svog izvornog izgleda, ne biste trebali
• istražite prije nego što izradite svoj stvarni dizajn; preuzmite ideje s drugih stranica i izradite ih vlastite (bez plagiranja)
• uključite boju i grafiku za stvaranje konačnog izgleda vaših web stranica - koristite CSS (kaskadne tablice stilova) za pretvaranje vaših dizajna iz slika u oznake razumljive web preglednicima - referencirajte svoj dijagram toka od faze 1 kada kodirate svoje stranice hipervezama; bolje je koristiti padajući izbornik koji uključuje sve (ili većinu) veza na vašoj web stranici na svakoj stranici; ovo će omogućiti lakšu navigaciju i također učiniti vaše stranice lakšim za indeksiranje kada pauci tražilice svrate; sjajno mjesto za dobivanje CSS padajućih izbornika je na DynamicDrive.com - finalizirajte svoj dizajn dok radite u Photoshopu ili bilo kojem drugom softveru za uređivanje slika koji koristite; može biti teško mijenjati vaš dizajn nakon što se pretvori u oznaku (kod)

Donti

• nemojte uključivati ​​tekst u svoje navigacijske izbornike kada pretvarate u CSS; umjesto slikovnog teksta, koristite obični tekst koji mogu čitati pauci tražilice
• nemojte koristiti tablice pri pretvorbi; čak i ako trebate kupiti knjigu o CSS-u, isplatit će se; stolovi su mrtvi
• nemojte preskočiti prve dvije faze samo da uštedite vrijeme; vaša će web stranica biti bolja ako krenete od početka procesa web dizajna (umjesto na kraju)
• ne zaboravite komprimirati svoje slike kada su izrezane za CSS; nema ništa gore od web stranice koja se sporo učitava zbog velikih slikovnih datoteka; Photoshop ima opciju "Spremi optimizirano za web" (CS3 - "Spremi za web i uređaje")

Proces čini savršenim
Slijedeći proces web dizajna kao što je onaj ilustriran u ovom članku, povećavate šanse za stvaranje web stranice koja je dobro organizirana, kojom se lako kreće i koja je vrlo jednostavna za korištenje. Suočimo se s tim – ako se posjetitelji izgube ili zbune dok pokušavaju surfati vašom web stranicom, mogli bi pritisnuti gumb Natrag i potražiti web stranicu koja je prilagođenija korisniku. Ljudi ne vole razmišljati kada se radi o snalaženju na web stranicama. Ne tjeraj ih na razmišljanje. Razmišljate planirajući svoju web stranicu od faze 1 do faze 3 i vidjet ćete da će više ljudi uživati ​​posjećujući vašu web stranicu.