A nagyszerű webdesign mit és mit tegyünk

Ha követi, ez az útmutató igen értékes webtervezési forrásnak bizonyul, különösen, ha használni kívánja weboldal fejlesztő szoftver a jövőben. A tapasztalatlanoktól a tapasztaltakig ez az útmutató mindenki számára tartogat valamit.

A nagyszerű webdizájn folyamata Csak hogy megbizonyosodjunk arról, hogy mindannyian ugyanazon az oldalon vagyunk, kezdjük a „webdesign” alapvető meghatározásával. A Wikipédia szerint a webdesign:

„az internetes elektronikus médiaszolgáltatás koncepcióalkotási, tervezési, modellezési és végrehajtási folyamata jelölőnyelv formájában, amely alkalmas webböngésző által értelmezhető és grafikus felhasználói felületként való megjelenítésre” .

A webdizájn folyamata egy kutatási dolgozat megírásához hasonlítható. A koncepcióalkotás/tervezés szakaszában folyamatábrák (a vázlat) készülnek, amelyek szemléltetik webhelye navigációs szerkezetét. A modellezési szakaszban statikus drótvázak jönnek létre (a durva vázlat), amelyek szemléltetik a webhely egyes szakaszainak vázszerkezetét. A drótkeretek elkészítése után a grafikák, színek és szövegek segítségével megalkotják weboldalait a drótkeretek elrendezése alapján. A végrehajtási szakaszban a tervét a webböngészők által támogatott formátumba konvertálják, szöveget és tartalmat adnak hozzá, végül pedig a webhelyet élőben közzéteszik az interneten, hogy a világ lássa (végső tervezet).

A tervezési folyamat mindhárom szakasza egyformán fontos. Sok webdizájner kihagy egy szakaszt, hogy időt takarítson meg, vagy mert úgy gondolja, hogy ez nem szükséges. Mindazonáltal mindhárom szakaszra szükség van, ha egy sikeres design és tekintélyes weboldal létrehozása a cél. Még ha a három szakaszt használjuk is, a webdesignerek sok olyan hibát követhetnek el, amelyek rossz minőségű, nem felhasználóbarát webhelyekhez vezetnek. Ideje kitisztítani a szekrényt a rossz webtervezési gyakorlatoktól, és feltölteni a jóval.

1. szakasz: Koncepció és tervezés
Ez a szakasz gyakrabban kerül kihagyásra, mint a másik két szakasz. A legtöbb író nem szeret vázlatokat készíteni a kutatási dolgozatokhoz, és a legtöbb webtervező sem szereti a folyamatábrák készítését. Ne légy lusta. Ha erőfeszítéseket tesz, és megtervezi webhelyét, akkor azt fogja találni, hogy a webtervezési folyamat zökkenőmentesen megy, és kevesebb hibát követ el az út során.

Van néhány dolog, amire szüksége lesz a webhely hatékony koncepciózásához és megtervezéséhez:

• egy agy
• toll és papír
• (opcionális) folyamatábra szoftver
• általános elképzelést a webhelye különböző szakaszairól

Kezdésként ragadja meg a tollat ​​és a papírt, vagy indítsa el kedvenc folyamatábra szoftverét. Az OmniGraffle Professionát Mac OS X-hez használjuk, ami licencenként 150 dollárba kerül, de megéri, ha rendszeresen készít webhelyeket. Ha számítógépet használ, akkor a SmartDraw egy nagyszerű INGYENES folyamatábra szoftver, amelyet használhat. A toll és a papír azonban jól működik.

Számos módszer létezik a folyamatábrák létrehozására. Megmutatjuk ennek legalapvetőbb módját az idő és a cikk terjedelme kedvéért. Ha többet szeretne megtudni a folyamatábrákról, keressen folyamatábrákat a Google vagy a Yahoo webhelyén.

Tekintse meg a folyamatábrát, amelyet a kromatikus webhelyek koncepciójának kialakítása során hoztunk létre. (1) A folyamatábra tetején feltüntetjük webhelyünk nevét. (2) Ezt követően a webhelyünk minden elsődleges részét tartalmazza: Kezdőlap, Névjegy és Szolgáltatások. Ezek a szakaszok a webhely fő navigációs elemei. Az, hogy mi lesz az egyes szakaszok neve, teljes mértékben a webhely tartalmától függ. Próbáljon meg a lehető legkevesebb részt használni, hogy a látogatók ne legyenek túlterhelve, amikor a webhelyen navigálnak.

(3) Ezután adja hozzá az összes másodlagos oldalt (alszakaszt), amelyek az egyes elsődleges oldalakon szerepelnek. A Home esetében a professzionális webtervezést, webfejlesztést és keresőoptimalizálást is beépítettük. A másodlagos navigációnak leíróbbnak kell lennie, mint az elsődleges navigációnak. Minél mélyebbre kerül a webhelyek navigációs hierarchiája, annál leíróbbnak kell lennie az egyes címkéknek.

A Dos

• A kevesebb több; az elsődleges szekciók számát minimálisra csökkenteni. Honlapunkon 6 részt használunk, ami több mint elég
• Függetlenül attól, hogy tollat ​​és papírt vagy folyamatábra-szoftvert használ, tartsa a dolgokat a lehető legtisztábban és rendszerezettebben. Bár Ön (és bárki, aki Önnel dolgozik) az egyetlen, aki használja a folyamatábrát, ennek továbbra is értelmesnek kell lennie – Az elsődleges szakaszoknak tágabb kifejezéseket kell használniuk, míg a másodlagos és harmadlagos kifejezéseknek inkább leíró jellegűeknek kell lenniük.

A Donts
A folyamatábra elkészítése nagyon egyszerű; azonban van néhány könnyen elkövethető hiba:

• Ne használjon túlságosan leíró kifejezéseket az elsődleges navigáció során, hacsak az egész webhely nem egy szűk témára összpontosít – Ne próbáljon meg több témát egy oldalra összegyűjteni. Hozzon létre egy általános szakaszt ezekhez a témákhoz, és ebből a szakaszból hozzon létre alfejezeteket. Ezáltal az alszekciós (leíró) weboldalak nagyobb valószínűséggel kapnak jobb helyezést a keresőkben (Google, Yahoo, MSN, Ask). Miután elkészített egy tömör és leíró folyamatábrát, készen áll a második lépésre. a webdesign folyamatában:

2. szakasz: Modellezés
A modellezési szakaszban statikus „drótváz” makettek jönnek létre. Mindegyik makett egy csupasz csontvázat szemléltet a webhelyén felkerülő egyes weboldalak elrendezéséről. Ez a szakasz azért fontos, mert így képet kapunk arról, hogy a különböző elemek hol lesznek elhelyezve a tervezésben. Néhány ilyen elem:

• logo
• navigációs menü
• tartalom
• képek, videók

Ezeknek a maketteknek a létrehozásához használhat tollat ​​és papírt vagy a kívánt makett szoftvert. Korábban Photoshopot használtunk, mostanában viszont az OmniGraffle Professionalt. Az OmniGraffle nem olyan erőforrás-igényes, mint a Photoshop, és sokkal gyorsabban összeállíthatjuk drótvázas makettjeinket.

Ezenkívül győződjön meg arról, hogy az Ön által létrehozott folyamatábra(ok) a közelben vannak, mert időnként hivatkoznia kell rájuk, hogy megbizonyosodjon arról, hogy a webhelyén megjelenő összes oldalt megcsúfolja.

Íme a példa arra, hogyan kell kinéznie egy drótvázas makettnek. Mint látható, nincsenek színek vagy grafikák. Pontosan ilyennek kell lennie egy drótvázas makettnek – a terv vázas elrendezése. A cél az, hogy általános elképzelésünk legyen arról, hogy a weboldal egyes elemei hol lesznek elhelyezve.

Általában a bal felső sarokban kezdjük, és lefelé haladunk. A drótváznak nincs konkrét módja. Használd a képzeleted. Ügyeljen azonban arra, hogy a drótvázak elkészítésekor ne felejtse el feltüntetni a weboldal legfontosabb elemeit (logó, navigációs menü, tartalomelhelyezés, képek/videó elhelyezése).

Ha néhány oldala ugyanazt az elrendezést fogja használni, akkor nem szükséges az összes oldalt kinevelni (bár biztosan megteheti). Csak ügyeljen arra, hogy a webhely minden egyedi elrendezését modellezzen. Később meghálálod magadnak.

A Do-k

• makett minden egyedi oldalt
• tartalmazzon fontos elemeket (logó, navigáció, tartalomelhelyezés, képek/videó elhelyezése) - kezdje felülről, és haladjon lefelé - hivatkozzon az 1. szakaszban létrehozott folyamatábrára, hogy ne felejtse el maketálni az oldalakat - Mentés, mentés, mentés – mint bármi más a számítógépen, mentse el a makett(eke)t körülbelül 10 percenként
• összpontosítson a tiszta, felhasználóbarát elrendezésekre - címkézze fel az elemeket, hogy ne felejtse el, mik azok, amikor hivatkozik rájuk a 3. szakaszban, a végrehajtás - használjon más webhelyeket inspirációként; nincs semmi baj azzal, ha más webhelyekről vesz át elemeket, és saját maga készíti azokat (lásd: „Nem)

A Dont's

• ne tartalmazzon grafikát vagy színeket (ez a következő szakaszra vonatkozik) - ne legyen túl „elfoglalva” a makettjei; összpontosítson a tiszta, jól szervezett, felhasználóbarát elrendezésekre – ne hagyja ki ezt a szakaszt; ugyanolyan fontos, mint az első és az utolsó – ha más webhelyekről vesz át elemeket, ügyeljen arra, hogy ne plagizáljon; különbség van aközött, hogy egy másik webhely ihlette meg a design bizonyos elemeinek létrehozását, és aközött, hogy kirívóan letépi az elrendezést és a színeket

3. szakasz: Végrehajtás
A harmadik és egyben utolsó szakaszban, a végrehajtásban, az 1. és 2. szakasz tervezését kombinálják, hogy segítsenek egy élő, interaktív weboldal létrehozásában.
A harmadik szakasz messze a legidőigényesebb, mivel Ön 1) elkészíti a grafikát, 2) létrehozza a tartalmat, végül 3) a webterveket képekből kódká alakítja, amelyet a webböngészők arra használnak, hogy bemutassák webhelyét a világnak.

Mire eléri a harmadik szakaszt, világos elképzelése van a következőkről:

• hogyan jutnak el látogatói egyik helyről a másikra (1. szakasz, folyamatábra) – hogyan lesznek elhelyezve weboldalai (2. szakasz, drótvázas makettek)

Ha nincs világos elképzelése erről a két dologról, térjen vissza az első és a második szakaszhoz, és folytassa ezek fejlesztését. Látni fogja, hogy a harmadik szakasz a legegyszerűbb, ha világos, tömör csatatervet készített webhelye megtervezéséhez.

Dobja el a tollat ​​és a papírt
A 3. szakaszban Photoshopot vagy más képszerkesztő programot kell használnia, mivel színeket és grafikákat fog használni a webhely elrendezésének létrehozásához.

Általában először a „kezdőoldal” (index) létrehozását kezdjük. Használja a 2. szakaszban létrehozott drótvázait sablonként minden létrehozott oldalhoz. A tömör dobozok használata helyett azonban használjon grafikát, színeket és szöveget. Minden oldalnak pontosan úgy kell kinéznie, ahogyan szeretné, hogy az interneten megjelenjenek, mivel ez a tervezési folyamat utolsó szakasza.

Ügyeljen arra, hogy tartalmazza a navigáció hátterét (de valójában ne adja hozzá a szöveget a képhez). Ha CSS-sel (lépcsőzetes stíluslapokkal) konvertál, a navigációnak szöveges és nem képek formájában kell lennie. A képeket a keresőmotorok nem tudják feltérképezni (a navigáció során használt kulcsszavak nem lesznek indexelve a keresőmotorok eredményoldalain, ami azt jelenti, hogy kevesebben találják meg webhelyét).

Ha elégedett a terveivel, és úgy érzi, hogy készen áll az internetre való felhelyezésre, ideje szétszedni a terveket, hogy létrehozhasson egy CSS-alapú elrendezést. Az elrendezések CSS-re konvertálásával vagy a webhely CSS-ben való megjelölésével kapcsolatos további információkért látogasson el a w3schools.com oldalra. Miután körülnéztünk az interneten, nem találtunk megfelelő kép-CSS oktatóprogramot – ezért várjon tőlünk egyet a következő hetekben. A tervek CSS-vé konvertálása rendkívül fontos, mivel a táblázatelrendezések a múlté.

Íme egy példa egy majdnem elkészült webhelyre a 2. szakaszban kijátszott elrendezéssel. Ezt közvetlenül a webböngészőnkből vettük, és amint látja, most már van egy logó, színek, szép navigációs rendszer, lábléc, és ami a legfontosabb, tiszta, rendezett elrendezés.
Az 1. és 2. ütemben történő tervezésnek köszönhetően az elrendezésünk jól szervezett és könnyen használható.

A Dos

• hivatkozzon a 2. szakaszban létrehozott sablonokra; bár rendben van, ha eltér az eredeti elrendezéstől, erre nincs szüksége
• végezzen némi kutatást, mielőtt elkészíti a tényleges tervet; ötleteket szerezhet más webhelyekről, és saját maga készítheti azokat (plagizálás nélkül)
• tartalmazzon színeket és grafikákat weboldalai végső megjelenésének kialakításához - használja a CSS-t (lépcsőzetes stíluslapok), hogy a terveket képekből a webböngészők számára érthető jelölésekké alakítsa át - hivatkozzon az 1. szakasz folyamatábrájára, amikor az oldalait hiperhivatkozásokkal kódolja; jobb, ha olyan legördülő menüt használ, amely minden oldalon tartalmazza a webhelyén található linkek összességét (vagy a legtöbbet); ez megkönnyíti a navigációt, és megkönnyíti az oldalak feltérképezését, amikor a keresőmotor pókok megállnak mellette; nagyszerű hely a CSS legördülő menük eléréséhez a DynamicDrive.com webhelyen – véglegesítse a tervezést, miközben a Photoshopban vagy bármilyen képszerkesztő szoftverben dolgozik; fájdalmas lehet változtatni a tervén, miután azt jelöléssé (kód) alakították át.

A Donts

• ne foglalja bele a szöveget a navigációs menükbe, amikor CSS-re konvertál; képszöveg helyett használjon normál szöveget, amelyet a keresőmotorok pókok is tudnak olvasni
• ne használjon táblázatokat konvertáláskor; még ha meg is kell vásárolnia egy könyvet a CSS-ről, megéri; az asztalok halottak
• ne hagyja ki az első két szakaszt, csak hogy időt takarítson meg; webhelye jobb lesz, ha a webtervezési folyamat elejétől kezdi (nem a végén)
• ne felejtse el tömöríteni a képeket, amikor szétvágja őket CSS-hez; nincs rosszabb, mint egy lassan betöltő webhely a nagy képfájlok miatt; A Photoshop rendelkezik egy „Webre optimalizált mentés” opcióval (CS3 – „Save for Web and Devices”).

A folyamat tökéletesít
Az ebben a cikkben bemutatotthoz hasonló webtervezési folyamat követésével növelheti annak esélyét, hogy jól szervezett, könnyen navigálható és nagyon felhasználóbarát webhelyet hozzon létre. Nézzünk szembe a tényekkel – ha a látogatók eltévednek vagy összezavarodnak, miközben megpróbálnak böngészni a webhelyén, előfordulhat, hogy megnyomják a Vissza gombot, és egy felhasználóbarátabb webhelyet keresnek. Az emberek nem szeretnek gondolkodni, amikor a webhelyeken való eligazodásról van szó. Ne kényszerítsd őket gondolkodásra. Ha megtervezi webhelyét az 1. szakasztól a 3. szakaszig, akkor azt fogja látni, hogy több ember fogja élvezni a webhely látogatását.