Tento wikiHow vás naučí, jak navrhnout web, který vypadá profesionálně a funguje dobře. Zatímco většina designu vašich webových stránek je nakonec na vás, při vytváření webových stránek je třeba udělat několik zásadních věcí a vyvarovat se jim.
Kroky
Část 1 ze 2: Jak navrhnout svůj web
Krok 1. Určete, zda chcete použít tvůrce webových stránek
Webové stránky vytvořené od nuly vyžadují poměrně podrobné porozumění kódování HTML, ale webové stránky můžete snadno vytvořit pomocí bezplatné hostitelské služby jako Weebly, Wix, WordPress nebo Google Sites. Tvůrci webových stránek bývají pro první designéry mnohem jednodušší než HTML.
- Pokud se rozhodnete kódovat svůj vlastní web, budete se muset naučit kódování HTML i CSS.
- Pokud investování času a energie do vytvoření vašich webových stránek nevypadá lákavě, můžete si také najmout webdesignéra, který vám váš web vytvoří. Nezávislí návrháři mohou stát kdekoli mezi 30 USD za hodinu a více než 100 USD za hodinu.
Krok 2. Mapujte svůj web
Ještě než otevřete tvůrce webových stránek, měli byste přibližně vědět, kolik stránek má váš web mít, jaký by měl být obsah na každé z těchto stránek a obecné rozložení důležitých stránek, jako je domovská stránka a „O aplikaci“strana.
Stránky vašich webových stránek lze snadněji zobrazit, pokud nakreslíte hrubé obrázky každé z nich, než jen určujete, jaký obsah by se měl zobrazovat
Krok 3. Použijte intuitivní design
I když je třeba něco říci o nových nápadech, základní design vašeho webu by se měl řídit zavedenými pokyny, jako jsou následující:
- Možnosti navigace (např. Karty pro různé stránky) by měly být v horní části stránky.
- Pokud používáte ikonu nabídky (☰), měla by být v levém horním rohu stránky.
- Pokud používáte vyhledávací panel, měl by být v pravé horní části stránky.
- Užitečné odkazy (např. Odkazy na stránku „O aplikaci“nebo na stránku „Kontaktujte nás“) by měly být umístěny na konci každé stránky.
Krok 4. Buďte důslední
Bez ohledu na to, jaké písmo textu, paletu barev, motiv obrázku a možnosti návrhu zvolíte, použijte na celém svém webu stejné rozhodnutí. Když bylo pro domovskou stránku použito úplně jiné, může být neuvěřitelně nepříjemné vidět jedno písmo nebo barevné schéma použité na stránce „O“.
- Pokud například na domovské stránce svého webu používáte výhradně chladné barvy, neimplementujte na další stránce jasné a hlasité barvy.
- Mějte na paměti, že používání hlasitých nebo střetávajících se barev, zvláště když se barvy zobrazují dynamickým (např. Pohyblivým) způsobem, může u malého počtu uživatelů webu vyvolat epilepsii. Pokud se rozhodnete takové barvy na svém webu používat, nezapomeňte před jakékoli relevantní stránky přidat varování před epilepsií.
Krok 5. Přidejte možnosti navigace
Umístění přímých odkazů na důležité stránky vašeho webu v horní části domovské stránky pomůže nasměrovat první návštěvníky na důležitý obsah. Většina tvůrců stránek tyto odkazy přidává ve výchozím nastavení.
Je důležité zajistit, aby každá stránka na vašem webu byla přístupná kliknutím na možnosti na vašem webu, nikoli pouze prostřednictvím adresy stránky
Krok 6. Použijte barvy, které se navzájem doplňují
Jako každý jiný design, design webových stránek sází na vizuálně příjemné kombinace barev; z tohoto důvodu je klíčové vybrat barvy motivů, které jdou dohromady.
Černá, bílá a šedá je dobrá kombinace, pokud nevíte, kde začít
Krok 7. Zvažte použití minimalistického designu
Minimalismus podporuje barvy chladných tónů, jednoduchou grafiku, stránky s černobílým textem a co nejmenší zdobení. Protože minimalismus vyžaduje jen málo efektních prvků, je to snadný způsob, jak zajistit, aby váš web vypadal profesionálně a atraktivně, aniž by vyžadoval mnoho práce.
- Mnoho tvůrců webových stránek bude mít „minimalistické“téma, které si můžete vybrat při nastavování svého webu.
- Alternativou k minimalismu je „brutalismus“, který používá drsnější linie, jasné barvy, tučný text a minimální obraznost. Brutalismus má méně následovníků než minimalismus, ale v závislosti na obsahu vašeho webu může lépe vyhovovat vašim požadavkům na design.
Krok 8. Proveďte jedinečná rozhodnutí
Přímé linie a webové prvky uzamčené v mřížce jsou bezpečné sázky, ale provedení několika jedinečných stylistických rozhodnutí vašemu webu propůjčí osobnost a pomůže vyniknout.
- Nebojte se podpořit trendy tím, že umístíte prvky webových stránek asymetricky nebo pomocí překrývajících se prvků vytvoříte vrstvený vzhled.
- Zatímco elegantní, ostré rohy a hranaté prvky (známé také jako prezentace „na kartě“) jsou méně příznivé než zaoblené, měkké prvky.
Část 2 ze 2: Jak maximalizovat výkon webových stránek
Krok 1. Využijte možnosti optimalizace pro mobilní zařízení
Mobilní prohlížeče představují větší webový provoz než prohlížeče pro stolní počítače, což znamená, že množství pozornosti, kterou věnujete mobilní verzi svých webových stránek, by se mělo minimálně rovnat vývoji webových stránek pro stolní počítače. Většina služeb pro tvůrce webových stránek automaticky vytváří mobilní verzi vašeho webu, ale pro svůj mobilní web byste měli mít na paměti následující informace:
- Zajistěte, aby byla tlačítka (např. Odkazy na stránky) velká a snadno na ně klepala.
- Vyhněte se implementaci funkcí, které nelze zobrazit na mobilních zařízeních (např. Flash, Java atd.).
- Zvažte možnost vytvoření mobilní aplikace pro svůj web.
Krok 2. Nepoužívejte příliš mnoho fotografií na stránku
Jak stolní, tak mobilní prohlížeče mohou mít potíže s načítáním stránek, které zobrazují velké množství fotografií nebo videí. I když jsou obrázky ve webovém designu důležité, použití více než několika na stránku může způsobit zbytečně dlouhé načítání, což zabrání lidem v návštěvě dotyčných stránek.
Obecně lze říci, že chcete, aby se stránky vašeho webu načítaly za méně než čtyři sekundy
Krok 3. Přidejte stránku „Kontakt“
Všimnete si, že prakticky všechny zavedené webové stránky mají stránku „Kontaktujte nás“, která obsahuje kontaktní informace (např. Telefonní číslo a e -mailovou adresu); některé weby mají na této stránce dokonce vestavěný formulář otázek. Přidání stránky „Kontakt“přinese divákům webových stránek přímou komunikaci s vámi, a tím přidá řešení potenciálních frustrací.
Krok 4. Vytvořte vlastní stránku 404
Když někdo navštíví konkrétní stránku na vašem webu, která buď nebyla nastavena, nebo neexistuje, zobrazí se webová stránka „Chyba 404“. Většina prohlížečů má výchozí stránku 404, ale můžete si ji přizpůsobit z nastavení tvůrce vašeho webu; pokud ano, ujistěte se, že uvedete následující podrobnosti:
- Odlehčená chybová zpráva (např. „Gratulujeme - našli jste naši chybovou stránku!“)
- Odkaz zpět na domovskou stránku webu
- Seznam běžně zobrazovaných odkazů
- Obrázek nebo logo pro váš web
Krok 5. Pokud je to možné, použijte vyhledávací lištu
Pokud vaše metoda vytváření webových stránek podporuje přidání vyhledávacího panelu na váš web, důrazně doporučujeme, abyste tak učinili. Tím zajistíte, že uživatelé budou moci rychle přejít na konkrétní stránku nebo položku, aniž by museli klikat na vaše možnosti navigace.
Vyhledávací lišty jsou také užitečné, když vaše publikum chce hledat obecný výraz bez použití pokusů a omylů
Krok 6. Investujte nejvíce času do své domovské stránky
Když někdo přijde na domovskou stránku vašeho webu, měl by okamžitě získat podstatu tématu vašeho webu; kromě toho by se měly rychle načíst všechny prvky domovské stránky, včetně možností navigace a jakýchkoli obrázků. Vaše domovská stránka by měla mít následující aspekty:
- Výzva k akci (např. Tlačítko ke kliknutí nebo formulář k vyplnění)
- Navigační panel nástrojů nebo nabídka
- Příjemná grafika (např. Jedna pevná fotografie, video nebo malá skupina fotografií s doprovodným textem)
- Klíčová slova týkající se služby, tématu nebo zaměření vašeho webu
Krok 7. Otestujte svůj web ve více prohlížečích na více platformách
To je neuvěřitelně důležité, protože různé prohlížeče mohou s aspekty vašich webových stránek zacházet odlišně. Než začnete propagovat svůj web, zkuste jej navštívit a používat v následujících prohlížečích na platformách Windows, Mac, iPhone a Android:
- Google Chrome
- Firefox
- Safari (pouze iPhone a Mac)
- Microsoft Edge a Internet Explorer (pouze Windows)
- Vestavěný prohlížeč na několika různých telefonech s Androidem (např. Samsung Galaxy, Google Nexus atd.)
Krok 8. Pokračujte v aktualizaci svých webových stránek, jak stárnou
Trendy v designu, odkazy, fotografie, koncepty a klíčová slova se postupem času mění, takže budete muset i nadále provádět změny na svém webu, abyste zůstali aktuální. To bude vyžadovat, abyste alespoň jednou za tři měsíce (nejlépe častěji) zkontrolovali výkon svých webových stránek společně s jinými podobnými webovými stránkami.
Základní nápověda HTML
Ukázka webové stránky s HTML
Podporujte wikiHow a odemkněte všechny vzorky.
Cheatový list HTML
Podporujte wikiHow a odemkněte všechny vzorky.
Ukázka jednoduché webové stránky
Podporujte wikiHow a odemkněte všechny vzorky.
Tipy
- Dostupnost webových stránek je dalším důležitým aspektem vývoje webových stránek. To zahrnuje například titulky pro sluchově postižené publikum, zvukové popisy pro nevidomé návštěvníky a upozornění na fotosenzitivitu, pokud váš web používá potenciálně záchvaty vyvolávající efekty.
- Většina tvůrců webových stránek má sadu šablon, které můžete použít k upevnění rozvržení a designu vašeho webu před přidáním preferovaných prvků.
Varování
- Většina tvůrců stránek je zdarma; pokud však chcete použít svou vlastní doménu (např. „www.yourname.com“namísto „www.yourname.wordpress.com“), budete muset zaplatit měsíční nebo roční poplatek.
- Vyhněte se plagiátorství a dodržujte všechny zákony o autorských právech: nepřidávejte nahodilé obrázky z webu ani strukturální prvky bez svolení.
