Kaj je treba in česa pri odličnem spletnem oblikovanju

Ko boste sledili, se bo ta vodnik izkazal za zelo dragocen vir spletnega oblikovanja, še posebej, če nameravate uporabiti programska oprema za razvoj spletnih strani v prihodnosti. Od neizkušenih do izkušenih, ta vodnik ima nekaj za vsakogar.

Proces odličnega spletnega oblikovanja Da se prepričamo, da smo vsi na isti strani, začnimo z osnovno definicijo za "spletno oblikovanje". Glede na Wikipedijo je spletno oblikovanje:

»proces konceptualizacije, načrtovanja, modeliranja in izvajanja dostave elektronskih medijev prek interneta v obliki označevalnega jezika, primernega za interpretacijo s spletnim brskalnikom in prikaz kot grafični uporabniški vmesnik« .

Proces spletnega oblikovanja lahko primerjamo s procesom pisanja raziskovalne naloge. V fazi konceptualizacije/načrtovanja se ustvarijo diagrami poteka (oris), ki ponazarjajo navigacijsko strukturo vašega spletnega mesta. V fazi modeliranja se ustvarijo statični žični okvirji (grobi osnutek), ki ponazarjajo skeletno postavitev za vsak del vašega spletnega mesta. Ko so žični okvirji ustvarjeni, se grafika, barve in besedilo uporabijo za ustvarjanje oblikovanja vaših spletnih strani na podlagi postavitve žičnih okvirjev. V fazi izvedbe se vaš dizajn pretvori v obliko, ki jo podpirajo spletni brskalniki, doda se besedilo in vsebina, na koncu pa se vaše spletno mesto objavi v živo na internetu, da ga lahko vidi ves svet (končni osnutek).

Vse tri faze procesa oblikovanja so enako pomembne. Mnogi spletni oblikovalci preskočijo stopnjo, da bi prihranili čas ali ker menijo, da to ni potrebno. Vendar pa so vse tri faze potrebne, če je vaš cilj ustvariti uspešen dizajn in ugledno spletno stran. Tudi če se uporabijo tri stopnje, lahko spletni oblikovalci naredijo veliko napak, ki vodijo do slabe kakovosti in uporabniku neprijaznih spletnih mest. Čas je, da očistite omarico slabih praks spletnega oblikovanja in jo obnovite z dobrimi.

Faza 1: Konceptualizacija in načrtovanje
Ta stopnja se preskoči pogosteje kot drugi dve stopnji. Večina piscev ne uživa v ustvarjanju orisov za raziskovalne članke in večina spletnih oblikovalcev tudi ne mara ustvarjati diagramov poteka. Ne bodi len. Če se potrudite in načrtujete svoje spletno mesto, boste ugotovili, da bo proces spletnega oblikovanja potekal gladko z manj napakami.

Za učinkovito konceptualizacijo in načrtovanje spletnega mesta boste potrebovali nekaj stvari:

• možgani
• pero in papir
• (izbirno) programsko opremo za diagram poteka
• splošno predstavo o različnih delih vašega spletnega mesta

Za začetek vzemite pero in papir ali zaženite svojo najljubšo programsko opremo za diagram poteka. Uporabljamo OmniGraffle Professiona za Mac OS X, ki stane 150 USD na licenco, vendar se splača, če redno ustvarjate spletna mesta. Če uporabljate osebni računalnik, je SmartDraw odlična BREZPLAČNA programska oprema za diagram poteka, ki jo lahko uporabite. Vendar pero in papir dobro delujeta.

Obstaja veliko metod za ustvarjanje diagramov poteka. Zaradi časa in dolžine tega članka vam bomo pokazali najosnovnejši način za to. Če želite izvedeti več o diagramih poteka, poiščite diagrame poteka na Googlu ali Yahooju.

Oglejte si diagram poteka, ki smo ga ustvarili pri konceptualizaciji kromatičnih mest. (1) Na vrhu diagrama poteka je navedeno ime našega spletnega mesta. (2) Nato vključimo vsak primarni razdelek našega spletnega mesta: Domov, O in Storitve. Ti razdelki so glavna navigacija za vaše spletno mesto. Kakšna bodo imena posameznih razdelkov, je v celoti odvisno od vsebine vašega spletnega mesta. Poskusite uporabiti čim manj razdelkov, da vaši obiskovalci ne bodo preobremenjeni pri navigaciji po vašem spletnem mestu.

(3) Nato dodajte vse sekundarne strani (pododdelke), ki bodo navedene na vsaki od primarnih strani. Za dom smo vključili profesionalno spletno oblikovanje, spletni razvoj in optimizacijo iskalnikov. Sekundarna navigacija mora biti bolj opisna kot primarna navigacija. Čim globlja je navigacijska hierarhija vaših spletnih mest, bolj opisna mora biti vsaka oznaka.

Dos

• Manj je več; naj bo število primarnih odsekov čim manjše. Na naši spletni strani uporabljamo 6 razdelkov, kar je več kot dovolj
• Ne glede na to, ali uporabljate pisalo in papir ali programsko opremo za diagram poteka, naj bodo stvari čim bolj čiste in organizirane. Čeprav ste vi (in vsi, ki delajo z vami) edini, ki boste uporabljali diagram poteka, mora biti še vedno smiseln – vaši primarni razdelki bi morali uporabljati širše izraze, medtem ko bi morali biti sekundarni in terciarni izrazi bolj opisni

Donts
Ustvarjanje diagrama poteka je precej enostavno; vendar obstaja nekaj napak, ki jih je mogoče enostavno narediti:

• Ne uporabljajte zelo opisnih izrazov v svoji primarni navigaciji, razen če je vaše celotno spletno mesto osredotočeno na eno ozko temo - Ne poskušajte združiti več tem na isto stran. Ustvarite splošni razdelek za te teme in iz tega razdelka ustvarite pododdelke. To bo povečalo verjetnost, da bodo imele podrazdelke (opisne) spletne strani boljše uvrstitve v iskalnikih (Google, Yahoo, MSN, Ask). Ko ustvarite jedrnat in opisen diagram poteka, ste pripravljeni na drugo stopnjo. procesa spletnega oblikovanja:

2. stopnja: Modeliranje
V fazi modeliranja se ustvarijo statične "žične" makete. Vsaka maketa ponazarja golo okostje postavitve za vsako od spletnih strani, ki bodo vključene v vaše spletno mesto. Ta stopnja je pomembna, ker nam daje predstavo o tem, kam bodo v našem dizajnu postavljeni različni elementi. Nekateri od teh elementov so:

• logo
• navigacijski meni
• vsebina
• slike, videi

Za ustvarjanje teh maket lahko uporabite pisalo in papir ali svojo najljubšo programsko opremo za makete. V preteklosti smo uporabljali Photoshop, v zadnjem času pa OmniGraffle Professional. OmniGraffle ne zahteva tako veliko virov kot Photoshop in nam omogoča veliko hitrejše sestavljanje maket žičnih okvirjev.

Poleg tega se prepričajte, da imate v bližini diagrame poteka, ki ste jih ustvarili, saj se boste morali občasno sklicevati nanje, da se prepričate, da posnemate vse strani, ki se bodo pojavile na vašem spletnem mestu.

Tukaj je naš primer, kako naj bi izgledal model žične konstrukcije. Kot lahko vidite, ni vključenih barv ali grafike. Točno takšen mora biti model žične konstrukcije – skeletna postavitev vašega dizajna. Namen je imeti splošno predstavo o tem, kje bo vsak element spletne strani postavljen.

Običajno začnemo od zgoraj levo in se spuščamo navzdol. Ni posebnega načina, kako bi moral izgledati žični okvir. Uporabite svojo domišljijo. Vendar pa se prepričajte, da pri ustvarjanju svojih žičnih okvirjev ne pozabite vključiti najpomembnejših elementov spletnega mesta (logotip, navigacijski meni, postavitev vsebine, postavitev slik/videoposnetkov).

Če bodo nekatere vaše strani uporabljale isto postavitev, potem ni nujno, da se posmehujete vsem tem stranem (čeprav lahko). Prepričajte se le, da naredite maketo kakršne koli edinstvene postavitve, ki jo bo imelo vaše spletno mesto. Kasneje si boš hvaležen.

Do

• maketa vseh edinstvenih strani
• vključite pomembne elemente (logotip, navigacija, postavitev vsebine, postavitev slik/videoposnetkov) -začnite od vrha in nadaljujte navzdol -sklicujte se na diagram poteka, ustvarjen v 1. stopnji, da ne boste pozabili narediti makete katere koli strani -shranite, shranite, shranite – tako kot kar koli v računalniku, shranite svoje makete vsakih 10 minut
• osredotočite se na čiste, uporabniku prijazne postavitve - označite svoje elemente, da ne boste pozabili, kaj so, ko se nanje sklicujete v fazi 3, izvedba - uporabite druga spletna mesta kot navdih; nič ni narobe, če vzamete elemente iz drugih spletnih mest in jih naredite za svoje (glejte »ničesar«)

The Dont's

• ne vključujte grafike ali barv (to je za naslednjo stopnjo) - ne naredite svojih modelov preveč "zasedenih"; osredotočite se na čiste, dobro organizirane, uporabniku prijazne postavitve - ne preskočite te stopnje; je enako pomembna kot prva in zadnja - če jemljete elemente iz drugih spletnih strani, pazite, da ne plagiate; obstaja razlika med tem, da vas navdihne drugo spletno mesto, da ustvarite določene elemente vašega dizajna, in med nesramnim iztrganjem njihove postavitve in barv

Faza 3: Izvedba
V tretji in zadnji fazi, izvedbi, se načrtovanje iz stopenj 1 in 2 združita v pomoč pri ustvarjanju interaktivnega spletnega mesta v živo.
Tretja faza je časovno daleč najbolj intenzivna, saj boste 1) ustvarili grafiko, 2) ustvarili vsebino in končno, 3) pretvorili spletne dizajne iz slik v kodo, ki jo spletni brskalniki uporabljajo za predstavitev vašega spletnega mesta svetu.

Ko dosežete tretjo stopnjo, bi morali imeti jasno predstavo o:

• kako bodo obiskovalci prišli z enega mesta na drugega (1. stopnja, diagram poteka) - kako bodo postavljene vaše spletne strani (2. stopnja, makete žičnih okvirjev)

Če nimate jasne predstave o teh dveh stvareh, se vrnite na prvo in drugo stopnjo in ju še naprej razvijajte. Ugotovili boste, da je tretja stopnja najlažja, ko boste sestavili jasen in jedrnat bojni načrt za oblikovanje vaše spletne strani.

Opustite pero in papir
V 3. stopnji morate uporabljati Photoshop ali drug program za urejanje slik, saj boste uporabili barve in grafiko za ustvarjanje postavitve vašega spletnega mesta.

Običajno najprej začnemo ustvarjati »domačo« stran (indeks). Uporabite svoje žične okvire, ki ste jih ustvarili v 2. stopnji, kot predlogo za vsako od strani, ki jih ustvarite. Vendar pa namesto polnih polj raje uporabite grafiko, barve in besedilo. Vsaka stran mora izgledati natanko tako, kot želite, da je videti na internetu, saj je to zadnja faza procesa oblikovanja.

Ne pozabite vključiti ozadja za vašo navigacijo (vendar dejansko ne dodajajte besedila svoji sliki). Pri pretvorbi s CSS (kaskadno slogovno listo) mora biti vaša navigacija v obliki besedila in ne slik. Iskalniki ne morejo preiskati slik (ključne besede, uporabljene v vaši navigaciji, ne bodo indeksirane na straneh z rezultati iskalnika, kar pomeni, da bo vaše spletno mesto lahko našlo manj ljudi).

Ko ste zadovoljni s svojimi dizajni in menite, da so pripravljeni za objavo na internetu, je čas, da dizajne razdelite, da lahko ustvarite postavitev, ki temelji na CSS. Za več informacij o pretvorbi vaših postavitev v CSS ali označevanju vašega spletnega mesta v CSS obiščite w3schools.com. Ko smo brskali po internetu, nismo mogli najti primerne vadnice za pretvorbo slike v CSS – zato jo pričakujte od nas v naslednjih tednih. Pretvorba vaših načrtov v CSS je izjemno pomembna, saj so postavitve tabel stvar preteklosti.

Tukaj je primer skoraj dokončane spletne strani postavitve, ki smo jo posneli v 2. stopnji. To smo vzeli neposredno iz našega spletnega brskalnika in kot lahko vidite, so zdaj logotip, barve, lep navigacijski sistem, noga, in kar je najpomembnejše, čista, organizirana postavitev.
Zahvaljujoč načrtovanju v 1. in 2. stopnji je naša postavitev dobro organizirana in enostavna za uporabo.

Dos

• navedite svoje predloge, ki so bile ustvarjene v 2. stopnji; čeprav je v redu, da odstopate od prvotne postavitve, vam tega ni treba
• naredite nekaj raziskav, preden ustvarite svoj dejanski dizajn; pridobite ideje z drugih spletnih mest in jih naredite svoje (brez plagiatorstva)
• vključite barvo in grafiko, da ustvarite končni videz vaših spletnih strani -uporabite CSS (kaskadne slogovne liste) za pretvorbo vaših zasnov iz slik v oznake, ki jih spletni brskalniki razumejo -sklicujte se na diagram poteka od stopnje 1, ko svoje strani kodirate s hiperpovezavami; bolje je uporabiti spustni meni, ki vključuje vse (ali večino) povezav na vaši spletni strani na vsaki strani; to bo omogočilo lažjo navigacijo in olajšalo iskanje po vaših straneh, ko se pajki iskalnikov ustavijo pri vas; odlično mesto za pridobivanje spustnih menijev CSS je na DynamicDrive.com - dokončajte svoj dizajn med delom v Photoshopu ali kateri koli programski opremi za urejanje slik, ki jo uporabljate; ko je pretvorjen v oznako (kodo), je lahko težko spreminjati vaš dizajn

Donts

• pri pretvorbi v CSS ne vključite besedila v svoje navigacijske menije; namesto slikovnega besedila uporabite običajno besedilo, ki ga lahko berejo pajki iskalnikov
• pri pretvarjanju ne uporabljajte tabel; tudi če boste morali kupiti knjigo o CSS, se bo splačalo; mize so mrtve
• ne preskočite prvih dveh stopenj samo zato, da prihranite čas; vaša spletna stran BO boljša, če začnete od začetka procesa spletnega oblikovanja (namesto na koncu)
• ne pozabite stisniti svojih slik, ko jih razrežete za CSS; ni hujšega kot počasno nalaganje spletne strani zaradi velikih slikovnih datotek; Photoshop ima možnost »Shrani optimizirano za splet« (CS3 – »Shrani za splet in naprave«)

Proces naredi popolnega
Če sledite postopku spletnega oblikovanja, kot je prikazan v tem članku, povečate možnosti za ustvarjanje spletnega mesta, ki je dobro organizirano, po katerem je enostavno krmariti in zelo uporabniku prijazno. Priznajmo si – če se obiskovalci med brskanjem po vašem spletnem mestu izgubijo ali zmedejo, lahko pritisnejo gumb za nazaj in poiščejo uporabniku prijaznejše spletno mesto. Ljudje ne marajo razmišljati, ko gre za iskanje poti po spletnih mestih. Ne daj jim misliti. Razmišljate tako, da svoje spletno mesto načrtujete od 1. do 3. stopnje in ugotovili boste, da bo več ljudi z veseljem obiskovalo vaše spletno mesto.