Pokud chcete navrhovat a vytvářet webové stránky, bude tento proces mnohem jednodušší, pokud plánujete dopředu. Ve fázi plánování mohou designér a klient spolupracovat při hledání formátu a rozvržení, které vyhovuje jejich potřebám. Proces plánování ovlivňuje styl nebo styl webu, dalo by se říci, že toto je nejdůležitější aspekt webového designu, zejména pokud je určen pro obchodní účely.
Krok
Část 1 ze 4: Vytvoření základní struktury
Krok 1. Určete funkci webové stránky
Pokud vytváříte osobní web, pravděpodobně již znáte odpověď. Pokud však vytváříte web pro jinou organizaci, společnost nebo osobu, musíte zjistit, co chtějí a funkčnost webu. Vše, co zde zadáte, se projeví po dokončení webové stránky.
- Vyžaduje web Storefront? Měly by být prováděny komentáře uživatelů? Bude si uživatel muset vytvořit účet později? Je článek na webu orientovaný? Nebo orientovaný na obrázek? Všechny tyto a další otázky vám pomohou při navrhování a navrhování webu.
- Tento plánovací proces lze načrtnout do výkresu, zvláště pokud je pro velkou společnost a na tvorbě tohoto projektu se podílí mnoho lidí.
Krok 2. Vytvořte diagram mapy webu (mapa webu)
Diagram mapy webu je podobný vývojovému diagramu, který ukazuje, jak se uživatelé přesouvají z jedné stránky na druhou. V této fázi nepotřebujete webovou stránku, pouze obecný tok konceptů. Pomocí počítačového programu můžete vytvářet diagramy nebo si nakreslit vlastní na papír. Tento diagram použijte k demonstraci konceptů hierarchického uspořádání a konektivity webových stránek.
Krok 3. Vyzkoušejte metodu kreslení karty
Jednou z populárních metod vývoje skupinového webu je použít řadu karet ke zjištění očekávání všech. Vezměte si několik karet s poznámkami a na každou z nich si zapište základní obsah webové stránky. Uspořádejte tyto karty společně se svým týmem, abyste našli nejlepší koncept. Tuto metodu je vhodné použít při spolupráci s ostatními na vytváření webových stránek.
Krok 4. Použijte papír a nástěnku nebo tabuli
Toto je originální metoda plánování s malým rozpočtem, můžete rychle odstranit nebo přesunout obsah a změnit tok. Nakreslete svůj webový design na papír a poté papíry spojte nití nebo na tabuli nakreslete čáry. Tato metoda je velmi vhodná pro použití při brainstormingu.
Krok 5. Vytvořte inventář obsahu
Ve skutečnosti to bývá vhodnější použít při přepracování webů než v nových návrzích webů. Vložte každý hotový kus obsahu nebo webové stránky do tabulky. Poznamenejte si účel každého obsahu nebo stránky, pomocí tohoto seznamu určete, co chcete odebrat a co si ponechat. Strukturu webu můžete zjednodušit a proces redesignu zjednodušit později.
Část 2 ze 4: Vytvoření základního obrysu HTML
Krok 1. Vytvořte drátový model pro vytvoření hierarchie webových stránek
Základní šablona HTML je plán webu, který vytvoříte, pouze pomocí nejzákladnějších značek a ukázkového (bloků/šablon) obsahu. Tento rámec odpovídá na otázku „Co a kde je na webu vidět?“Při vytváření této osnovy není vyžadováno formátování a styl.
- Než si vyberete nastavení stylu, můžete si zobrazit strukturu a vývojový diagram obsahu se základním obrysem.
- Základní šablony HTML nejsou statické jako soubory PDF nebo obrázky, můžete rychle procházet ukázkovým obsahem a vytvářet nové struktury.
- Základní rámec je interaktivní, což je výhodné jak pro webové vývojáře, tak pro klienty. Vzhledem k tomu, že tento základní rámec je napsán pomocí jednoduchého kódu HTML, můžete se v něm stále pohybovat a vědět, jak přepínání webových stránek funguje. To nelze provést s PDF.
Krok 2. Vyzkoušejte metodu Gray Box
Blokujte nebo zvýrazněte obsah své webové stránky v Gray Boxu, nejdůležitější obsah je nahoře. Seřaďte obsah do jednoho sloupce. Pokud je například stránka „O společnosti“, pak jsou v horní části uvedeny podrobné informace o společnosti, následuje seznam zaměstnanců, poté kontaktní informace atd.
To nezahrnuje záhlaví a zápatí. Gray Box je vizuální reprezentací obsahu, který se objeví na webu
Krok 3. Vyzkoušejte základní program pro tvorbu obrysů
Existují různé programy, které můžete použít při vytváření základního webového rámce. Množství kódu (jazyka) webového programování, které musíte zvládnout, se pro každý program liší. Mezi velmi populární programy patří:
- Laboratoř vzorů. Tento web je věnován „atomovému designu“, každý obsah je považován za „molekulu“, která tvoří větší webovou stránku.
- Jumpcharts. Tato webová stránka poskytuje služby webového plánování a rámování. Tyto weby jsou placené a vyžadují předplatné, ale webové rámce můžete stavět rychle, aniž byste museli zvládat spoustu kódu pro webové programování.
- Wirefy. Wirefy je další web, který nabízí „atomový design“. Weboví vývojáři mohou tento nástroj získat zdarma.
Krok 4. Použijte jednoduché značení HTML
Dobrá základní šablona se snadno převede na původní web. Během vytváření této šablony nad webovým stylem příliš nepřemýšlejte. Používejte značky, které lze snadno pochopit a změnit.
Jednoduchý základní rámec je mnohem lepší. Účelem vytvoření značky je vybudovat strukturu. Vizuální vzhled lze později upravit pomocí CSS a pokročilého značení
Krok 5. Vytvořte základní obrys pro každou webovou stránku
Můžete být v pokušení srovnat každou webovou stránku s jedním základním obrysem. Ve skutečnosti to bude váš web pouze prostý a nudný. Vytvořte pro každou stránku jiný obrys, pochopíte, že každá stránka potřebuje svůj vlastní design.
Část 3 ze 4: Vytváření obsahu
Krok 1. Před vytvořením webové stránky připravte obsah
Mnohem jednodušší bude zobrazit náhled webového zobrazení, pokud již máte skutečný obsah místo použití ukázek nebo zástupných symbolů. Nemusíte mít příliš mnoho obsahu, ale vaše maketa bude vypadat mnohem lépe, pokud použijete kopii původního obrázku.
Nemusíte mít veškerý materiál článku, ale alespoň by měl mít skutečný nadpis
Krok 2. Pamatujte, že skvělý obsah není jen text
Internet je mnohem složitější než jednoduchá webová stránka s textem. Abyste vytvořili skvělý web, který přiláká a pozve návštěvníky, potřebujete celou řadu různého obsahu. Například:
- Obrázek.
- Hlas.
- Videa.
- Webový přenos nebo webový proud (Twitter)
- Integrace Facebooku
- RSS
- Webový kanál
Krok 3. Požádejte o pomoc profesionálního fotografa
Pokud chcete na své stránky zahrnout fotografie, první dojem, který ze svého webu získáte, bude mnohem lepší, pokud bude naplněn profesionální fotografií. Jedna dobrá fotka má hodnotu více než dvacet fotografií nízké kvality.
Hledejte čerstvého absolventa umění fotografie jako levnější řešení než profesionální fotograf, který se v oboru pohybuje již delší dobu
Krok 4. Pište kvalitní články
Písemný obsah na webové stránce určí výši vašeho webového provozu. I když si s tvorbou obsahu v tomto procesu návrhu nemusíte příliš lámat hlavu, není na škodu o tom začít přemýšlet, protože obsah budete také potřebovat pravidelně, jakmile bude váš web v provozu.
Kromě obsahu článku existuje i písemný materiál, který musíte také mít při sestavování webové stránky. Například kontaktní informace, název společnosti nebo cokoli jiného, co bude na webu použito vícekrát
Část 4 ze 4: Proměna konceptů na webové stránky
Krok 1. Uspořádejte základní prvky
Toto uspořádání prvků platí pro každou stránku vašeho webu, jako jsou záhlaví, poznámky pod čarou a navigační nabídky. Nastavte jej ve velmi jednoduchém stylu, abyste mohli zkontrolovat, jak všechny stránky vypadají. To je užitečné zejména při postupu do procesu webového rozložení.
Nedělejte si příliš starosti s detaily, zkuste si zobrazit náhled (náhled), jak záhlaví vypadá
Krok 2. Vytvořte jednoduché rozložení
Začněte posunutím polohy hodin ze sloupce základního obrysu na skutečné umístění na stránce. Můžete například chtít přesunout ukázkovou navigační nabídku nalevo od stránky a seznam nadpisů doprava.
Než přejdete k dalšímu kroku, experimentujte s rozvržením webu pro více stránek. Nechte ostatní, aby se na to podívali, aby zjistili, zda se rozvržení, které vytvoříte, cítí živé
Krok 3. Vytvořte maketu
Pomocí programu, jako je Photoshop, vytvořte makety nebo ukázkové stránky svého webu. Jako vodítko použijte rozvržení, které jste zkompilovali. Pomocí programu pro zpracování obrázků můžete rychleji vytvářet makety a dosáhnout požadovaných výsledků. Výsledky těchto obrázků lze později použít jako referenci při psaní kódu webového programování.
Vložte skutečný obsah do makety, aby vypadal dobře
Krok 4. Nahraďte koncept ukázky původním obsahem
Přidejte obsah a prvky na webové stránky. Zatím nepotýkejte nastavení webového stylu, prostě vše naskládejte na správné místo. To vám pomůže zkontrolovat změny webového stylu, které provedete později.
Krok 5. Vytvořte průvodce webovým stylem
Zvláště u velkých webů je velmi důležité udržovat kombinaci stylů. Pokud je web určen pro obchodní účely a již má svou vlastní značku nebo styl, měl by být integrován do designu webu. Věci, které je třeba vzít v úvahu při vytváření průvodce stylem webové stránky:
- Navigace
- Hlavní poznámka
- Odstavec
- Kurzíva
- Odvážná postava
- Odkazy (aktivní, neaktivní, vznášet se)
- Využití obrázku
- Ikona
- Knoflík
- seznam
Krok 6. Použijte webový styl
Jakmile najdete správný styl a design, implementujte jej. CSS je jedním z nejjednodušších způsobů implementace stylů na webovou stránku nebo na web. Viz následující pokyny, abyste lépe porozuměli podrobnostem používání CSS.
