Jak vytvořit design webových stránek?

Každý vlastník webových stránek sní o jedinečném designu svého zdroje. Každý ví, že člověka vítají jeho šaty. Totéž platí pro web, protože návštěvník v první řadě věnuje pozornost návrhu projektu a poté obsahu. Pokud je design příliš jasný nebo naopak nudný, uživatel brzy zdroj opustí. Nepřeplňujte web zbytečnými prvky, protože webové zdroje s minimalistickým designem často vypadají mnohem zajímavěji. Jak vytvořit design webových stránek?

Ve skutečnosti lze celý proces návrhu rozdělit do tří fází: vytvoření náčrtu, vytvoření rozvržení v grafickém editoru, rozložení návrhu. Návrhovou skicu lze nakreslit v jednoduchém editoru fotografií nebo obyčejnou tužkou na list papíru. Pokud jde o rozložení, většina návrhářů používá Photoshop jako nejsilnější existující grafický editor. Pro návrh rozvržení budete potřebovat znalost hypertextového značkovacího jazyka a CSS. Před vytvořením vlastního návrhu si položte pár jednoduchých otázek: Umím HTML a CSS a mohu také pracovat s grafickým editorem?

Pokud odpovíte ne, proces návrhu se nepřesáhne za první fázi. Není těžké nakreslit skicu, ale ne každý uživatel může vytvořit rozvržení a vytvořit hotový návrh. V důsledku toho se doporučuje nejprve se naučit základy HTML | CSS a také se podívat na několik výukových videí o Photoshopu, abyste věděli, kde se který nástroj nachází, jak použít filtry a mnoho dalšího.

Než začnete skicovat, vytvořte si v hlavě obraz budoucího designu. Upozorňujeme, že jakýkoli design se skládá z následujících částí:

  • „Záhlaví“ webu - horní část jakéhokoli designu, který obvykle obsahuje logo, název webu a několik tlačítek (kontakty, o autorovi). Záhlaví může mít různé výšky, ale obvykle tento parametr nepřesahuje 300 pixelů. Vyhledávací formuláře a bannerové reklamy se často nacházejí v horní části stránky.

  • "Postranní panel" - postranní nabídka webu. Postranní panel obsahuje sekundární informace a další prvky: blok s novými články, vyhledávací formulář, různé ankety a kalendáře, odkazy, reklamy a prvky navigace ke zdrojům. Při návrhu webu lze použít několik postranních panelů, ale existují návrhy bez postranních panelů.
  • „Suterén“ - spodní část lokality. Obvykle obsahuje odkaz na hlavní zdroj a autorská práva ve stylu „(c) 2014 Nejlepší stránka“. V posledních letech se ale koncept designu „suterénu“ změnil s příchodem mobilních zařízení. V „suterénu“ se začaly usazovat prvky, které jsou obvykle umístěny v bočních panelech.

  • „Hlavní část“ - blok, ve kterém je umístěn hlavní obsah. Většina návrhářů umisťuje hlavní část webu do středu, aby bylo snazší číst materiál.

Takže teď víte, z jakých bloků se web skládá. Je na čase začít řešit otázku, jak si vytvořit design webových stránek sami. Otevřete nejjednodušší editor fotografií (stačí Malování) a vytvořte novou šablonu s rozlišením 1280x1024. Okamžitě je třeba připomenout, že při vytváření webů se nepoužívají metrická měření. Všechny bloky jsou „měřeny“ v pixelech.

Například jste se rozhodli skicovat s jedním postranním panelem. V grafickém editoru označte okraje zápatí, záhlaví webu a postranního panelu.

Máte nápad vytvořit nějaké postranní sloupce a umístit obsah do středu? Skvělé, ale při značení zvažte šířku postranních panelů a prostor pro hlavní obsah. Boční sloupce by neměly být příliš široké (ne více než 300 pixelů) a pro hlavní obsah by mělo být ponecháno nejméně 500 pixelů, jinak bude čtení textu nepohodlné.

Nyní, když jsou hlavní značky rozprostřeny, je čas přidat do skici návrhu některé prvky. Přidejte autorská práva do zápatí, vyhledávacího pole, názvu atd. Designový náčrtek získá zajímavější vzhled a nebude sbírkou geometrických tvarů.

Pokud jste se naučili pracovat ve Photoshopu, pak je čas transformovat skicu na rozvržení. Předtím se ale rozhodněte o barvách webu. Pro zpravodajské weby jsou vhodnější bílé pozadí, černé barvy textu a modré odkazy. Pokud je design vytvořen pro dámský nebo cestovní web, použijte jasnější barvy. Současně byste neměli z návrhu vytvářet vánoční stromek, protože množství květin narušuje vnímání hlavního obsahu.

Začněte plnit každý blok rozvržení grafikou. Experimentujte s barvami a pozadím, vytvořte si vlastní prvky a tlačítka. Na internetu je však obrovské množství různých pozadí, tlačítek pro vytváření designu.

Když je rozložení konečně připraveno, rozřízněte ho na bloky a vytvořte z něj návrh. Každou vrstvu zároveň podepište, aby se snáze vysázelo.

S příchodem mobilních zařízení se popularita responzivních „gumových“ návrhů zvýšila. Každý uživatel může vytvořit motiv pro svůj web, ale pouze skutečný designér jej může přizpůsobit pro všechna zařízení. Na začátku své designérské kariéry zkuste začít jednoduchou šablonou.

Pamatujte na tři jednoduchá pravidla „skvělého designu“:

  • text musí být dobře čitelný i při vypnutých obrázcích v prohlížeči;
  • zkuste nepoužívat barvy „s volnýma očima“;
  • Vytvořte uživatelsky přívětivou navigaci na webu.

Po vytvoření návrhu a jeho přenosu na web jej určitě vyzkoušejte v různých prohlížečích. Pozvěte na testování přátele a známé, protože kritika někoho jiného má na člověka pozitivní vliv. Pamatujte na základní pravidlo: design stránek by se měl líbit nejen vám, ale i ostatním uživatelům. Proto vždy poslouchejte názory návštěvníků vašeho projektu.

.