Obsah

• kroky
• , atď.)

Ak chcete navrhnúť a vytvoriť webovú stránku, bude pre vás oveľa jednoduchšie to urobiť, ak ju plánujete ako prvú. Fáza plánovania umožňuje vývojárovi a zákazníkovi spolupracovať, kým nenájdu formát a rozloženie, ktoré vyhovuje ich potrebám. Proces plánovania ovplyvňuje výber štýlov webových stránok a je nepochybne najdôležitejšou súčasťou webdizajnu (hlavne pre spoločnosti).

kroky

Časť 1 zo 4: Vytvorenie štruktúry

1. 

   Zistite funkčnosť webovej stránky. Ak vytvárate webovú stránku pre seba, pravdepodobne už poznáte odpoveď. Ak vytvárate webovú stránku pre inú osobu, spoločnosť alebo organizáciu, musíte zistiť, čo zákazník od webovej stránky očakáva a jej funkčnosť. Čokoľvek sa tu rozhodnete, bude mať vplyv na konečný produkt.
   • Potrebujem predok obchodu? Potrebujem komentáre používateľov? Budú môcť vytvárať účty? Je stránka zameraná na článok? Obrázky? Všetky tieto a ďalšie otázky pomôžu informovať o dizajne a štruktúre webovej stránky.
   • Môže to byť únavný proces, najmä pre veľké spoločnosti, do ktorého je zapojených niekoľko ľudí.

2. 

   
   
   Vytvorte diagram sitemap. Vyzerá to ako vývojový diagram a ukazuje, ako používatelia prechádzajú zo stránky na stránku. V tejto chvíli nepotrebujete ani stránky, len všeobecný tok konceptov. Na vytvorenie diagramu môžete použiť počítačový program alebo ho môžete nakresliť rukou na papier. Pomocou tohto diagramu súborov Sitemap môžete zobraziť svoje názory na hierarchiu a prepojiteľnosť stránok stránok.

3. 

   
   
   Skúste použiť karty. Populárnou metódou skupinového použitia je použitie stohu kariet na odhalenie ideálneho prístupu každej osoby. Vezmite hromadu kariet (karty pre vedenie účtovníctva) a na každú kartu napíšte základný obsah jednej stránky. Požiadajte svoj tím, aby usporiadal karty spôsobom, ktorý považuje za najužitočnejší. Táto stratégia je vynikajúca pre situácie, keď pri vytváraní webovej stránky spolupracujete s ostatnými.

4. 

   
   
   Použite papier a nástenku alebo tabuľu. Toto je originálna metóda plánovania s nízkymi nákladmi a umožňuje vám odstrániť alebo presunúť obsah a rýchlo reorganizovať všetko. Nakreslite návrh na kusy a papier a spojte s čiarou alebo vytvorte obrys na bielej tabuli. Skvelé pre brainstormingové stretnutia.

5. 

   Použite inventár obsahu. Táto možnosť je zameraná viac na redizajn ako na nové weby. Umiestnite každý kus obsahu alebo stránky do tabuľky. Zaznamenajte si vzájomný účel a pomocou tohto zoznamu určte, čo sa deje a čo zostáva. Pomôže to znížiť tento prebytok a zjednodušiť proces redizajnovania.

Časť 2 zo 4: Vytvorenie wireframe HTML

1. 

   Vytvorte drôtový model, ktorý pomôže spevniť hierarchiu. Drátový model HTML je kostra vašej budúcej stránky a na reprezentáciu obsahu používa iba najzákladnejšie značky a bloky. Odpovedá na otázku „Čo sa deje na každej obrazovke a kde?“ Formátovanie a štýl sa v drôtovom modeli úplne ignorujú.
   • Drátový model umožňuje zobraziť štruktúru a tok obsahu pred výberom štýlu.
   • Drôtové rámce HTML nie sú statické ako súbory PDF alebo obrázky a umožňujú vám rýchlo presunúť bloky obsahu a vytvoriť novú štruktúru.
   • Drátový model je interaktívny, čo je dobré pre vývojárov aj pre zákazníka. Pretože je drôtový model napísaný v jednoduchom HTML, stále ho môžete prehľadávať a získať predstavu o tom, ako funguje pohyb medzi stránkami. Toto nie je možné vyjadriť prostredníctvom koncepčného dokumentu PDF.

2. 

   Vyskúšajte metódu Gray Box. Zoskupte obsah svojej stránky do sivých polí, pričom najdôležitejší obsah je hore. Bloky sú usporiadané do jedného stĺpca, pričom najdôležitejšia časť obsahu je na stránke v hornej časti. Ak je napríklad táto stránka pre spoločnosť informačnou stránkou „O spoločnosti“, podrobnosti môžu ísť na začiatok, nasledovaný zoznamom tímu, kontaktnými informáciami atď.
   • Nezahŕňa hlavičku a pätu. Sivé polia sú jednoducho vizuálne znázornenie obsahu, ktorý sa nachádza na stránke.

3. 

   Vyskúšajte program na vytváranie drôtových modelov. Existuje niekoľko programov, ktoré vám môžu pomôcť s procesom wireframing. Množstvo znalostí o programovaní sa líši od programu k programu. Niektoré z najpopulárnejších sú:
   • Pattern Lab. Táto webová stránka sa špecializuje na „atómový dizajn“. Každá časť obsahu sa považuje za „molekulu“, ktorá vytvára veľkú stránku.
   • Jumpcharts. Toto je webová stránka na plánovanie webových stránok a je to tiež služba wireframing. Vyžaduje si platené predplatné, ale umožňuje vám rýchlo vytvoriť drôtové snímky bez obáv z tohto kódu.
   • Wirefy. Toto je ďalší systém „atómového dizajnu“. Nástroje sú pre vývojárov bezplatné.

4. 

   Naučte sa, ako používať jednoduché značkovanie HTML. Dobrý drôtový model je možné neskôr ľahko previesť na skutočnú webovú stránku. Počas procesu wireframing sa nemusíte báť štýlu. Namiesto toho použite značku, ktorá sa dá ľahko pochopiť a vymeniť s minimálnym úsilím.
   • Menej je viac s drôtovým rámom. Cieľom je jednoducho vybudovať štruktúru. Vzhľad je možné neskôr upraviť pomocou CSS a pokročilých označení.

5. 

   Vytvorte drôtový model pre každú stránku na vašom webe. Môže byť lákavé urobiť iba drôtový model a povedať: „Skvelé, môžem ho použiť na všetky ostatné stránky a je to“. V skutočnosti to vygeneruje všeobecnú a nudnú webovú stránku. Urobte si čas na každú stránku drôtového modelu a čoskoro zistíte, že každá stránka má svoje organizačné potreby.

Časť 3 zo 4: Vytváranie obsahu

1. 

   Pripravte si nejaký obsah skôr, ako začnete s vytváraním svojich webových stránok. Bude oveľa jednoduchšie zistiť, ako stránka vyzerá, ak máte skutočný obsah namiesto iba záložiek. Nepotrebujete veľa obsahu, ale v prípade makiet bude vyzerať oveľa lepšie, ak máte nejaké originálne textové obrázky.
   • Nepotrebujete nevyhnutne telo článku, ale mali by ste mať aspoň titulky.

2. 

   Pamätajte, že dobrý obsah je viac ako len text. Internet je oveľa viac ako jednoduché texty na webových stránkach. Ak chcete vyniknúť vo svojom výklenku, budete potrebovať celý rad rôznych typov obsahu, aby ste upútali pozornosť a prilákali návštevníkov. Nezabúdajte na možný obsah:
   • Snímky.
   • Audio.
   • Video.
   • Streamy (Twitter).
   • Integrácia s Facebookom.
   • RSS.
   • Kanály obsahu.

3. 

   Zaplaťte profesionálnemu fotografovi. Ak na svoje webové stránky pridávate fotografie, vaše prvotné dojmy budú s profesionálnymi fotografiami oveľa lepšie. Jedna dobrá fotografia je omnoho lepšia ako dvadsať zlých fotografií.
   • V porovnaní so skúsenejšími profesionálmi hľadajte absolventov nových fotografií za lacnejšie riešenia.

4. 

   Napíšte kvalitné články. Obsah napísaný na vašej stránke určí prevažnú väčšinu vášho webového prenosu. Aj keď sa nemusíte príliš obávať vytvárania obsahu v tomto procese navrhovania, nebolí to premýšľať o ňom, pretože keď bude stránka online, budete ju potrebovať pravidelne.
   • Okrem obsahu článkov existujú aj písomné položky, ktoré budete potrebovať počas procesu vytvárania stránky. Sú to kontaktné informácie, názvy spoločností alebo čokoľvek iné, čo sa používa na rôznych miestach na webe.

Časť 4 zo 4: Transformácia konceptu na webovú stránku

1. 

   Štylizujte globálne prvky. Toto sú veci, ktoré sa zobrazujú na každej stránke vášho webu, napríklad hlavička, päta a navigačná ponuka. Vytvorte veľmi jednoduchý štýl, aby ste videli, ako budú všetky stránky vyzerať. Toto bude veľmi užitočné pri vstupe do procesu rozloženia.
   • O podrobnosti sa nebojte príliš, ale skúste sa čo najviac priblížiť konečnému vzhľadu záhlavia.

2. 

   Vytvorte základné rozloženie. Začnite premiestňovať objekty drôtového rámu tak, že ich vyberiete zo stĺpca a umiestnite ich na správne miesto. Napríklad môžete presunúť navigačný blok na ľavú stranu stránky a zoznam nadpisov doprava.
   • Pred pokračovaním experimentujte s rozložením na niekoľkých ďalších stránkach. Nechajte ostatných otestovať, či zistia, že navigácia je organická.

3. 

   Vytvorte maketu. Pomocou programu ako Photoshop vytvorte maketu niektorých stránok na svojom webe. Použite rozloženie, ktoré ste definovali ako sprievodcu. V programe na úpravu obrázkov môžete pracovať oveľa rýchlejšie a nechať všetko tak, ako chcete. Umožní vám to použiť obrázky ako referenciu, keď príde čas na kódovanie.
   • Zahrňte skutočný obsah do makety, aby bolo všetko v harmónii.

4. 

   Nahraďte bloky obsahom. Začnite pridaním obsahu a prvkov na stránku. Nerobte si starosti so štýlom: všetko umiestnite na správne miesto. Ak tak urobíte, pomôže vám to vedieť, či vaše zmeny štýlu budú fungovať.

5. 

   Vytvorte sprievodcu štýlmi. Toto je podstatná súčasť udržiavania súdržnej webovej stránky, najmä pre veľké webové stránky. Ak je webová stránka určená pre spoločnosť, ktorá už má vizuálnu identitu, musí byť začlenená do návrhu webovej stránky. V sprievodcovi štýlmi by sa mali zohľadniť tieto skutočnosti:
   • Navigácia.
   • Nadpisy (

     ,

     , atď.)

   • Odseky.
   • Kurzívou.
   • Bold.
   • Odkazy (aktívne, neaktívne, kurzor myši).
   • Použitie obrázkov.
   • Ikony.
   • Tlačidlá.
   • Zoznamy.

6. 

   Použiť tento štýl. Keď sa rozhodnete pre štýl a dizajn svojho webu, je čas začať ho implementovať. CSS je jedným z najjednoduchších spôsobov, ako implementovať štýl na stránke.