Ko drīkst un ko nedrīkst darīt lieliskam tīmekļa dizainam

Ja sekojat, šī rokasgrāmata izrādīsies diezgan vērtīgs tīmekļa dizaina resurss, it īpaši, ja plānojat to izmantot vietņu izstrādes programmatūra nākotnē. No nepieredzējušiem līdz pieredzējušiem, šajā rokasgrāmatā ir kaut kas ikvienam.

Lieliska tīmekļa dizaina process Lai pārliecinātos, ka mēs visi atrodamies vienā lapā, sāksim ar “tīmekļa dizaina” pamata definīciju. Saskaņā ar Wikipedia tīmekļa dizains ir:

"Elektronisko mediju piegādes konceptualizācijas, plānošanas, modelēšanas un izpildes process, izmantojot internetu iezīmēšanas valodas veidā, kas piemērots interpretācijai tīmekļa pārlūkprogrammā un attēlošanai kā grafiskais lietotāja interfeiss" .

Web dizaina procesu var salīdzināt ar pētnieciskā darba rakstīšanas procesu. Konceptualizācijas/plānošanas posmā tiek izveidotas blokshēmas (kontūra), kas ilustrē jūsu vietnes navigācijas struktūru. Modelēšanas posmā tiek izveidoti statiski stiepļu rāmji (aptuvena melnraksts), kas ilustrē katras vietnes sadaļas skeleta izkārtojumu. Pēc tam, kad ir izveidoti stiepļu rāmji, tiek izmantota grafika, krāsas un teksts, lai izveidotu jūsu tīmekļa lapu dizainu, pamatojoties uz stiepļu rāmju izkārtojumu. Izpildes stadijā jūsu dizains tiek pārveidots tīmekļa pārlūkprogrammu atbalstītā formātā, tiek pievienots teksts un saturs, un visbeidzot jūsu vietne tiek publicēta tiešsaistē, lai pasaule to redzētu (galīgais melnraksts).

Visi trīs projektēšanas procesa posmi ir vienlīdz svarīgi. Daudzi tīmekļa dizaineri izlaiž kādu posmu, lai ietaupītu laiku vai tāpēc, ka viņi neuzskata, ka tas ir nepieciešams. Tomēr visi trīs posmi ir nepieciešami, ja jūsu mērķis ir izveidot veiksmīgu dizainu un respektablu vietni. Pat ja tiek izmantoti trīs posmi, tīmekļa dizaineri var pieļaut daudzas kļūdas, kas novedīs pie sliktas kvalitātes, lietotājam nedraudzīgām vietnēm. Ir pienācis laiks iztīrīt skapi no sliktas tīmekļa dizaina prakses un papildināt to ar labām.

1. posms: konceptualizācija un plānošana
Šis posms tiek izlaists biežāk nekā pārējie divi. Lielākajai daļai rakstnieku nepatīk veidot pētniecisko darbu kontūras, un lielākajai daļai tīmekļa dizaineru arī nepatīk veidot blokshēmas. Neesiet slinki. Ja pieliekat pūles un plānojat savu vietni, tīmekļa izstrādes process noritēs raiti un tajā būs mazāk kļūdu.

Ir dažas lietas, kas jums būs nepieciešamas, lai efektīvi konceptualizētu un plānotu savu vietni:

• smadzenes
• pildspalva un papīrs
• (pēc izvēles) blokshēmas programmatūra
• vispārīgu priekšstatu par dažādām jūsu vietnes sadaļām

Lai sāktu, paņemiet pildspalvu un papīru vai palaidiet savu iecienītāko blokshēmas programmatūru. Mēs izmantojam OmniGraffle Professiona operētājsistēmai Mac OS X, kas maksā 150 USD par licenci, taču ir tā vērts, ja regulāri veidojat vietnes. Ja izmantojat datoru, SmartDraw ir lieliska BEZMAKSAS blokshēmas programmatūra, ko varat izmantot. Tomēr pildspalva un papīrs darbojas lieliski.

Blokshēmu izveidei ir daudz metožu. Mēs jums parādīsim visvienkāršāko veidu, kā to izdarīt laika un šī raksta garuma dēļ. Ja vēlaties uzzināt vairāk par blokshēmām, meklējiet blokshēmas Google vai Yahoo.

Skatiet blokshēmu, ko izveidojām, veidojot hromatiskās vietnes. (1) Plūsmas diagrammas augšdaļā ir norādīts mūsu vietnes nosaukums. (2) Pēc tam mēs iekļaujam katru mūsu vietnes galveno sadaļu: Sākums, Par un Pakalpojumi. Šīs sadaļas ir jūsu vietnes galvenā navigācija. Katras sadaļas nosaukums ir pilnībā atkarīgs no jūsu vietnes satura. Centieties izmantot pēc iespējas mazāk sadaļu, lai apmeklētāji netiktu satriekti, pārvietojoties jūsu vietnē.

(3) Pēc tam pievienojiet visas sekundārās lapas (apakšsadaļas), kas tiks uzskaitītas katrā primārajā lapā. Mājām esam iekļāvuši profesionālu tīmekļa dizainu, tīmekļa izstrādi un meklētājprogrammu optimizāciju. Sekundārajai navigācijai ir jābūt aprakstošākai nekā primārajai. Jo dziļāka ir jūsu vietņu navigācijas hierarhija, jo aprakstošākai jābūt katrai iezīmei.

Dos

• Mazāk ir vairāk; samaziniet primāro sadaļu skaitu līdz minimumam. Mēs savā vietnē izmantojam 6 sadaļas, kas ir vairāk nekā pietiekami
• Neatkarīgi no tā, vai izmantojat pildspalvu un papīru vai blokshēmas programmatūru, saglabājiet lietas pēc iespējas tīrāku un sakārtotāku. Lai gan jūs (un ikviens, kas strādā ar jums) esat vienīgie, kas izmantos blokshēmu, tai joprojām ir jābūt jēgpilnai — jūsu galvenajās sadaļās ir jāizmanto plašāki termini, savukārt sekundārajiem un terciārajiem terminiem ir jābūt aprakstošākiem.

Donts
Blokshēmas izveide ir diezgan vienkārša; tomēr ir dažas kļūdas, kuras var viegli pieļaut:

• Primārajā navigācijā neizmantojiet ļoti aprakstošus terminus, ja vien visa vietne nav vērsta uz vienu šauru tēmu. Nemēģiniet vienā lapā apvienot vairākas tēmas. Izveidojiet vispārīgu sadaļu šīm tēmām un no šīs sadaļas izveidojiet apakšsadaļas. Tas padarīs apakšsadaļu (aprakstošo) tīmekļa lapu labāku klasifikāciju meklētājprogrammās (Google, Yahoo, MSN, Ask). Kad esat izveidojis kodolīgu un aprakstošu blokshēmu, esat gatavs pāriet uz otro posmu. tīmekļa dizaina procesā:

2. posms: modelēšana
Modelēšanas stadijā tiek izveidoti statiski “stiepļu rāmja” maketi. Katrs makets ilustrē katras tīmekļa lapas, kas tiks iekļauta jūsu vietnē, izkārtojuma skeletu. Šis posms ir svarīgs, jo tas sniedz priekšstatu par to, kur mūsu dizainā tiks izvietoti dažādi elementi. Daži no šiem elementiem ir:

• logotips
• navigācijas izvēlne
• saturs
• attēli, video

Lai izveidotu šos maketus, varat izmantot pildspalvu un papīru vai vēlamo maketu programmatūru. Agrāk mēs izmantojām Photoshop, bet pēdējā laikā mēs izmantojam OmniGraffle Professional. OmniGraffle nav tik resursietilpīgs kā Photoshop, un tas ļauj mums daudz ātrāk salikt mūsu karkasa maketus.

Turklāt pārbaudiet, vai tuvumā ir izveidota(-as) blokshēma(-as), jo laiku pa laikam uz tām būs jāatsaucas, lai pārliecinātos, ka izsmej visas lapas, kas tiks parādītas jūsu vietnē.

Šeit ir mūsu piemērs tam, kā vajadzētu izskatīties karkasa maketam. Kā redzat, nav iekļautas krāsas vai grafikas. Tieši tādam ir jābūt karkasa maketam — jūsu dizaina skeleta izkārtojumam. Mērķis ir iegūt vispārēju priekšstatu par to, kur tiks izvietots katrs tīmekļa lapas elements.

Mēs parasti sākam no augšējās kreisās puses un virzāmies uz leju uz leju. Nav konkrēta veida, kā vajadzētu izskatīties stiepļu karkasam. Izmantojiet savu iztēli. Tomēr pārliecinieties, ka, veidojot karkasus, neaizmirstiet iekļaut svarīgākos tīmekļa vietnes elementus (logotipu, navigācijas izvēlni, satura izvietojumu, attēlu/video izvietojumu).

Ja dažas no jūsu lapām izmantos vienu un to pašu izkārtojumu, nav nepieciešams izsmiet visas šīs lapas (lai gan jūs noteikti varat). Vienkārši noteikti izveidojiet maketu unikālo izkārtojumu, kāds būs jūsu vietnei. Vēlāk tu pateiksi sev paldies.

Darāmie

• makets visas unikālās lapas
• iekļaujiet svarīgus elementus (logotipu, navigāciju, satura izvietojumu, attēlu/video izvietojumu) - sāciet no augšas un virzieties uz leju - atsaucieties uz 1. posmā izveidoto blokshēmu, lai neaizmirstu izveidot maketu lapas - saglabāt, saglabāt, saglabājiet — tāpat kā jebko citur datorā, saglabājiet maketu(-us) ik pēc 10 minūtēm
• koncentrējieties uz tīriem, lietotājam draudzīgiem izkārtojumiem - marķējiet savus elementus, lai neaizmirstu, kas tie ir, atsaucoties uz tiem 3. posmā, izpildē - izmantojiet citas tīmekļa vietnes kā iedvesmu; nav nekas nepareizs, ja paņemt elementus no citām vietnēm un padarot tos savus (skatiet “nedrīkst”)

Dont's

• neiekļaujiet grafiku vai krāsas (tas ir nākamajam posmam) - nepadariet savus maketus pārāk “aizņemtus”; koncentrējieties uz tīriem, labi organizētiem, lietotājam draudzīgiem izkārtojumiem — neizlaidiet šo posmu; tas ir tikpat svarīgi kā pirmais un pēdējais - ja ņemat elementus no citām vietnēm, pārliecinieties, ka neplaģiātu; pastāv atšķirība starp to, ka tiek iedvesmots no citas vietnes, lai izveidotu noteiktus jūsu dizaina elementus, un to izkārtojuma un krāsu acīmredzama izņemšana.

3. posms: izpilde
Trešajā un pēdējā posmā, izpilde, plānošana no 1. un 2. posma tiek apvienota, lai palīdzētu izveidot dzīvu, interaktīvu vietni.
Trešais posms ir visietilpīgākais, jo jums būs 1) izveidot grafiku, 2) izveidot saturu un, visbeidzot, 3) pārveidot tīmekļa dizainu no attēliem kodā, ko tīmekļa pārlūkprogrammas izmanto, lai prezentētu jūsu vietni pasaulei.

Kad esat sasniedzis trešo posmu, jums vajadzētu būt skaidram priekšstatam par:

• kā jūsu apmeklētāji nokļūs no vienas vietas uz otru (1. posms, blokshēma) - kā tiks izkārtotas jūsu tīmekļa lapas (2. posms, karkasa maketi)

Ja jums nav skaidra priekšstata par šīm divām lietām, atgriezieties pirmajā un otrajā posmā un turpiniet tās attīstīt. Jūs atklāsiet, ka trešais posms ir visvieglākais, ja esat izveidojis skaidru, kodolīgu kaujas plānu savas vietnes izstrādei.

Atbrīvojieties no pildspalvas un papīra
3. posmā jums ir jāizmanto Photoshop vai cita attēlu rediģēšanas programma, jo vietnes izkārtojuma izveidei izmantosit krāsas un grafiku.

Mēs parasti vispirms sākam izveidot “mājas” lapu (rādītāju). Izmantojiet savus stiepļu rāmjus, ko izveidojāt 2. posmā, kā veidni katrai izveidotajai lapai. Tomēr tā vietā, lai izmantotu cietos lodziņus, izmantojiet grafiku, krāsas un tekstu. Katrai lapai ir jāizskatās tieši tā, kā vēlaties, lai tā izskatās internetā, jo šis ir noformēšanas procesa pēdējais posms.

Noteikti iekļaujiet navigācijas fonu (bet patiesībā nepievienojiet attēlam tekstu). Konvertējot, izmantojot CSS (kaskādes stila lapas), navigācijai ir jābūt teksta, nevis attēlu veidā. Meklētājprogrammas nevar pārmeklēt attēlus (jūsu navigācijā izmantotie atslēgvārdi netiks indeksēti meklētājprogrammu rezultātu lapās, tādējādi mazāk cilvēku varēs atrast jūsu vietni).

Kad esat apmierināts ar saviem dizainiem un jūtat, ka tie ir gatavi ievietošanai internetā, ir pienācis laiks tos sadalīt, lai varētu izveidot uz CSS balstītu izkārtojumu. Lai iegūtu papildinformāciju par izkārtojumu konvertēšanu uz CSS vai vietnes atzīmēšanu CSS, apmeklējiet vietni w3schools.com. Apskatot internetu, mēs nevarējām atrast pienācīgu apmācību attēlu pārveidei CSS — tāpēc sagaidiet to no mums tuvāko nedēļu laikā. Dizainu pārveidošana par CSS ir ārkārtīgi svarīga, jo tabulu izkārtojumi ir pagātne.

Šeit ir gandrīz pabeigtas vietnes piemērs izkārtojumam, ko mēs izspēlējām 2. posmā. Tas tika ņemts tieši no mūsu tīmekļa pārlūkprogrammas, un, kā redzat, tagad ir logotips, krāsas, skaista navigācijas sistēma, kājene, un, pats galvenais, tīrs, organizēts izkārtojums.
Pateicoties plānošanai 1. un 2. posmā, mūsu izkārtojums ir labi organizēts un ērti lietojams.

Dos

• atsaucieties uz savām veidnēm, kas tika izveidotas 2. posmā; lai gan ir pareizi novirzīties no sākotnējā izkārtojuma, jums tas nav jādara
• pirms faktiskā dizaina izveides veiciet nelielu izpēti; iegūstiet idejas no citām vietnēm un izveidojiet tās par savām (bez plaģiātu)
• iekļaujiet krāsu un grafiku, lai izveidotu savu tīmekļa lapu galīgo izskatu - izmantojiet CSS (kaskādes stila lapas), lai pārveidotu dizainu no attēliem tīmekļa pārlūkprogrammām saprotamos marķējumos - kodējot lapas ar hipersaitēm, atsaucieties uz blokshēmu no 1. posma; labāk ir izmantot nolaižamo izvēlni, kurā ir iekļautas visas (vai lielākā daļa) jūsu vietnes saišu katrā lapā; tas atvieglos navigāciju, kā arī atvieglos jūsu lapu pārmeklēšanu, kad piestāj meklētājprogrammas zirnekļi; lieliska vieta, kur iegūt CSS nolaižamās izvēlnes, ir vietnē DynamicDrive.com - pabeidziet savu dizainu, strādājot programmā Photoshop vai jebkurā attēla rediģēšanas programmā; var būt sāpīgi veikt izmaiņas dizainā, tiklīdz tas ir pārveidots marķējumā (kodā)

Donts

• neiekļaujiet tekstu navigācijas izvēlnēs, pārveidojot uz CSS; attēla teksta vietā izmantojiet parastu tekstu, ko var lasīt meklētājprogrammu zirnekļi
• konvertējot neizmantojiet tabulas; pat ja jums ir jāiegādājas grāmata par CSS, tas būs tā vērts; galdi ir miruši
• neizlaidiet pirmos divus posmus, lai tikai ietaupītu laiku; jūsu vietne BŪS labāka, ja sāksit no web dizaina procesa sākuma (nevis no beigām)
• neaizmirstiet saspiest attēlus, kad tie tiek izgriezti CSS vajadzībām; nav nekas sliktāks par lēnu tīmekļa vietni lielu attēlu failu dēļ; Photoshop ir opcija “Saglabāt optimizēta tīmeklim” (CS3 — “Saglabāt tīmeklim un ierīcēm”)

Process padara perfektu
Sekojot tīmekļa izstrādes procesam, piemēram, šajā rakstā ilustrētajam, jūs palielināsit iespējas izveidot labi sakārtotu, viegli navigējamu un ļoti lietotājam draudzīgu vietni. Atzīsimies – ja apmeklētāji apmaldās vai apjūk, mēģinot pārlūkot jūsu vietni, viņi var nospiest pogu Atpakaļ un meklēt lietotājam draudzīgāku vietni. Cilvēkiem nepatīk domāt, kad runa ir par orientēšanos vietnēs. Nelieciet viņiem domāt. Jūs domājat, plānojot savu vietni no 1. līdz 3. posmam, un jūs atklāsiet, ka jūsu vietni apmeklēs vairāk cilvēku.