Autor:
John Pratt
Datum Vytvoření:
11 Lang L: none (month-010) 2021
Datum Aktualizace:
7 Smět 2024
Obsah
Pokud chcete navrhnout a vytvořit webovou stránku, bude pro vás mnohem snazší to udělat, pokud ji plánujete jako první. Fáze plánování umožňuje vývojáři a zákazníkům spolupracovat, dokud nenajdou formát a rozvržení, které odpovídá jejich potřebám. Proces plánování ovlivňuje výběr stylu webových stránek a je nepochybně nejdůležitější součástí webdesignu (hlavně pro firmy).
Kroky
Část 1 ze 4: Vytvoření struktury
Určete funkčnost webu. Pokud děláte web pro sebe, pravděpodobně už znáte odpověď. Pokud vytváříte web pro jinou osobu, společnost nebo organizaci, budete muset zjistit, co zákazník od webu očekává a jeho funkčnost. Ať už se rozhodnete zde, bude mít dopad na konečný produkt.
- Potřebuji přední obchod? Potřebuji komentáře uživatelů? Budou moci vytvářet účty? Je web zaměřen na článek? Obrazy? Všechny tyto a další otázky pomohou informovat o designu a struktuře webu.
- To může být únavný proces, zejména pro velké společnosti, do projektu je zapojeno několik lidí.
Vytvořte diagram sitemap. Vypadá to jako vývojový diagram a ukazuje, jak uživatelé přecházejí ze stránky na stránku. V tuto chvíli nepotřebujete ani stránky, pouze obecný tok konceptů. K vytvoření diagramu můžete použít počítačový program, nebo ho můžete nakreslit ručně na papír. Tento diagram sitemap použijte k zobrazení vašich názorů na hierarchii a propojitelnost stránek webu.
Zkuste použít karty. Populární metoda pro skupinové použití je použít hromadu karet k odhalení ideálního přístupu každého člověka. Vezměte hromadu karet (ty pro účetnictví) a na každou kartu napište základní obsah jedné stránky. Požádejte svůj tým, aby uspořádal karty způsobem, který bude pro ně nejužitečnější. Tato strategie je skvělá pro situace, kdy při vytváření webu spolupracujete s ostatními.
Použijte papír a nástěnku nebo tabuli. Jedná se o originální metodu plánování s nízkými náklady a umožňuje vám odstranit nebo přesunout obsah a rychle vše reorganizovat. Nakreslete návrh na kousky a papír a spojte se s čarou nebo vytvořte obrys na bílé tabuli. Skvělé pro brainstormingové sezení.
Použijte inventář obsahu. Tato možnost je více zaměřena na přepracování než na nové weby. Umístěte každý obsah nebo stránky do tabulky. Berte na vědomí vzájemný účel a pomocí tohoto seznamu určete, co se děje a co zůstává. To pomůže snížit přebytek a zjednodušit proces redesign.
Část 2 ze 4: Vytvoření drátového modelu HTML
Vytvořte drátový model, který pomůže posílit hierarchii. Drátový model HTML je kostra vašeho budoucího webu, která k reprezentaci obsahu používá pouze nejzákladnější značky a bloky. Odpoví na otázku „Co se děje na každé obrazovce a kde?“ Formátování a styl jsou v drátovém modelu zcela ignorovány.
- Drátový model umožňuje zobrazit strukturu a tok obsahu před výběrem stylu.
- Drátové rámce HTML nejsou statické jako soubory PDF nebo obrázky a umožňují vám rychle přesunout bloky obsahu a vytvořit novou strukturu.
- Drátový model je interaktivní, což je dobré jak pro vývojáře, tak pro zákazníka. Protože je drátový model psán v jednoduchém HTML, můžete jej stále procházet a získat představu o tom, jak funguje pohyb mezi stránkami. To je něco, co nelze vyjádřit prostřednictvím konceptuálního PDF.
Vyzkoušejte metodu Gray Box. Seskupte obsah své stránky do šedých polí, přičemž nejdůležitější obsah je nahoře. Bloky jsou uspořádány do jednoho sloupce, přičemž nejdůležitější část obsahu je na stránce nahoře. Pokud je například stránka „O společnosti“ pro společnost, podrobnosti mohou jít nahoru, následovat seznam týmu, kontaktní informace atd.
- To nezahrnuje záhlaví a zápatí. Šedé rámečky jsou jednoduše vizuální reprezentací obsahu, který bude na stránce nalezen.
Vyzkoušejte program vytváření drátových modelů. Existuje několik programů, které vám mohou pomoci s procesem wireframing. Množství znalosti programování se liší od programu k programu. Některé z nejpopulárnějších jsou:
- Pattern Lab. Tento web se specializuje na „atomový design“. Každá část obsahu je považována za „molekulu“, která vytváří velkou stránku.
- Jumpcharts. Toto je webová stránka pro plánování webových stránek a je to také služba wireframing. Vyžaduje placené předplatné, ale umožňuje vám rychle vytvořit drátové snímky, aniž byste se příliš obávali kódu.
- Wirefy. Toto je další systém "atomového designu". Nástroje jsou pro vývojáře zdarma.
Naučte se, jak používat jednoduché značkování HTML. Dobrý drátový model lze později snadno převést na skutečný web. Během procesu wireframing se nemusíte starat o styl. Místo toho použijte značku, kterou lze snadno pochopit a vyměnit s minimálním úsilím.
- S drátovým rámem je méně. Cílem je jednoduše vybudovat strukturu. Vzhled lze později upravit pomocí CSS a pokročilých značek.
Vytvořte drátový model pro každou stránku na vašem webu. Může být lákavé, kdybyste vytvořili drátový model a řekli: „Skvěle, mohu ho použít na všechny ostatní stránky a to je vše“. Ve skutečnosti to vygeneruje obecný a nudný web. Udělejte si čas na každou stránku drátového modelu a brzy zjistíte, že každá stránka má své organizační potřeby.
Část 3 ze 4: Vytváření obsahu
Než začnete stavět svůj web, připravte si nějaký obsah. Bude mnohem snazší zjistit, jak web vypadá, pokud máte skutečný obsah, nikoli pouze záložky. Nepotřebujete mnoho obsahu, ale pokud máte nějaké původní textové obrázky, bude to vypadat mnohem lépe v maketách.
- Nemusíte nutně potřebovat tělo článku, ale měli byste mít alespoň titulky.
Pamatujte, že dobrý obsah je víc než jen text. Internet je na webových stránkách mnohem víc než jen jednoduché texty. Chcete-li vyniknout ve svém výklenku, budete potřebovat celou řadu různých typů obsahu, aby upoutali pozornost a přilákali návštěvníky. Nezapomeňte na nějaký možný obsah:
- Snímky.
- Zvuk.
- Video.
- Streams (Twitter).
- Integrace s Facebookem.
- RSS.
- Zdroje obsahu.
Plaťte profesionálního fotografa. Pokud na svůj web přidáváte fotografie, vaše počáteční dojmy budou mnohem lepší u profesionálních fotografií. Jedna dobrá fotka je mnohem lepší než dvacet špatných fotografií.
- Podívejte se na nejnovější absolventy fotografie pro levnější řešení ve srovnání se zkušenějšími profesionály.
Napište kvalitní články. Obsah napsaný na vaší stránce bude určovat drtivou většinu vašeho webového provozu. I když se nemusíte příliš starat o vytváření obsahu v tomto procesu navrhování, není na škodu myslet na to, protože budete potřebovat obsah pravidelně, jakmile bude web online.
- Kromě obsahu článků existují i písemné položky, které budete potřebovat během procesu vytváření webu. Jedná se o kontaktní informace, názvy společností nebo cokoli jiného, co se používá na různých místech webu.
Část 4 ze 4: Transformace konceptu do webové stránky
Stylizovat globální prvky. To jsou věci, které jsou vidět na každé stránce vašeho webu, například záhlaví, zápatí a navigační nabídka. Vytvořte velmi základní styl, abyste viděli, jak budou všechny stránky vypadat. To bude velmi užitečné při zadávání procesu rozvržení.
- Nedělejte si starosti s podrobnostmi, ale zkuste se co nejvíce přiblížit konečnému vzhledu záhlaví.
Vytvořte základní rozvržení. Začněte přesouvat objekty drátového modelu tak, že je vyjmete ze sloupce a umístíte je na správné místo. Například můžete přesunout navigační blok na levou stranu stránky a seznam nadpisů napravo.
- Než budete pokračovat, experimentujte s rozvržením s několika dalšími stránkami. Nechte ostatní vyzkoušet, zda mají navigaci organickou.
Vytvořte maketu. Pomocí programu, jako je Photoshop, vytvořte maketu některých stránek na svém webu. Použijte rozvržení, které jste definovali jako průvodce. V programu pro úpravy obrázků můžete pracovat mnohem rychleji a nechat vše tak, jak chcete. To vám umožní použít obrázky jako referenční, když přijde čas na kódování.
- Zahrňte skutečný obsah do makety tak, aby bylo vše v harmonii.
Nahraďte bloky obsahem. Začněte přidáním obsahu a prvků na stránku. Nedělejte si starosti s stylem: jen dejte vše na správné místo. Pokud tak učiníte, pomůže vám to vědět, zda vaše změny stylu budou fungovat.
Vytvořte průvodce stylem. To je nezbytná součást udržování soudržného webu, zejména pro velké weby. Pokud je web určen pro společnost, která již má vizuální identitu, musí být začleněna do designu webových stránek. V příručce stylů je třeba vzít v úvahu:
Použijte tento styl. Jakmile se rozhodnete pro styl a design svého webu, je čas začít jej implementovat. CSS je jedním z nejjednodušších způsobů implementace stylu na stránce.
