Vytvoření čistého rozvržení webových stránek ve Photoshopu - Navrhování rozvržení webových stránek je víc než jen uspořádání barevných obrázků a vyplnění nějakého textu do textových rámečků. Je to přístup, který hovoří o objemech vašeho klienta. Barvy a grafika webu definují povahu podnikání, zatímco kvalita designu a snadný navigační tok webu by měl uživatele spojit s organizací a proměnit ho v potenciálního zákazníka.
Navrhování dobře vypadajícího a snadno přístupného rozložení webové stránky je povinné pro každého rádoby webového designéra. Tento tutoriál je určen k tomu, aby vás provedl procesem vytváření jednoduchého a čistého rozložení webové stránky od začátku. Během procesu se dozvíte důležité body, které vám pomohou dále získat více znalostí o návrhu webových stránek. 
Než navrhnete rozvržení webové stránky, poznamenejte si své požadavky
Než začnete navrhovat rozvržení webu, měli byste vědět, jak bude váš web vypadat a jaká jsou témata, která byste měli na webu zahrnout. Je nezbytné vytvořit seznam prvků rozložení webových stránek, které váš klient potřebuje na svém webu. Kromě toho je dobrým návrhářem připraveno posmívat se celé webové stránce, než začne pracovat na konečné šabloně.
Různé designérské společnosti přizpůsobují různé úrovně předprojektových strategií, které mohou obsahovat drátové rámování, prototypování, maketa, beta verze a mnoho dalšího. V tomto tutoriálu vytvoříme modelovou verzi před zahájením původního návrhu šablony. Používám šedé odstíny, které umožňují identifikaci makety bloku
Plátno
Před lety existovalo jen velmi málo operačních systémů a omezených zařízení pro přístup na webové stránky, rozměry stránky byly pevně stanoveny na jednu nebo dvě velikosti. Dnešní scénář je úplně jiný. Koncoví uživatelé přistupují k webům na počítačích různých velikostí, mobilních telefonech, iPadech a tabletech. V této rozmanité situaci nemáte šanci opravit svou webovou stránku na určitou velikost. Na každé zařízení se však vztahují určité průmyslové velikosti. Pomalu najdete svou oblíbenou velikost, nebo vám váš klient může doporučit web, aby napodobil velikosti.
V tomto případě pracujeme na následujících rozměrech. S výškou si nedělejte starosti, protože se v průběhu času mění. Čím více obsahu přidáváte na svůj web, tím vyšší bude výška.
Nezapomeňte, že je běžné posouvat stránku svisle dolů, takže pokud se nechcete, aby se uživatel na vaší domovské stránce posouval jako Google, nemusíte se do určité výšky opravit. Je však nutné posouvat se vodorovně. Omezte svou šířku podle průmyslových standardů a nebuďte kreativní s horizontálním posouváním.
Pro web je rozlišení omezeno na 72. Na iPadech a v poslední době existuje několik obrázků a stránek s vyšším rozlišením. Ale je to vzácně a je lepší držet se 72 s ohledem na rychlost internetu po celém světě.
Vyberte soubory pomocí příkazu Ctrl + A a nakreslete průvodce rovnoměrně v celé šabloně. Webové stránky by měly být přehledně uspořádány tak, aby všechny prvky byly uspořádány vzájemně soudržně. Pokyny k rozvržení webových stránek vám pomohou snadno je získat.
Připravte si maketu
Umístění maketa souboru do původní šablony vám pomůže ušetřit dostatek času. Navrhování vašich webových stránek je tak snadné, že nakonec dokončíte rámec během několika minut. Maketa vám však pomůže pouze navrhnout rámy. Vyplnění prvků návrhu podrobnostmi, uspořádáním typu a zarovnání bude trvat déle než nakreslení rozložení webové stránky.
Barevné schéma a další možnosti
Další věc, kterou po přípravě vaší struktury připravíte, je vybrat barevné schéma. Je však lepší připravit barvy dříve, než začnete pracovat na návrhu.
Celá věc se scvrkává na zprávu, že připravte zbraně před zahájením návrhu. Než začnete pracovat, mělo by být připraveno vše včetně ikon, obrázků a barev. Organizace a plánování vaší práce ušetří více času a zaměří se na design bez překážek mezi tím.
Výběr barev může být návrhářskou volbou, pokud je společnost nová a dosud nemá firemní identitu. V některých případech klienti podají představu o tom, jaké odstíny chtějí mít logo nebo pozadí. Ve věcech existujících společností, kde budete možná muset přepracovat celý web, možná budete muset vybrat stejné barvy podle potřeb klienta.
Existuje mnoho webových stránek, které vám mohou pomoci vybrat miliony barevných schémat z archivů. Vyzkoušejte následující webové stránky a užijte si širokou škálu barevných kombinací.
Color.adobe.com
Colourlovers.com
Zde jsem vybral několik odstínů modré, které se použijí pro web. Celý web bude naplánován v následujícím barevném schématu. Nezapomeňte si vybrat tři nebo čtyři různé barevné kombinace, protože nevíme, který barevný klient bude dávat přednost. Jakmile klient dokončí barevné schéma, uložte hodnoty odstínu a ujistěte se, že barvy hrají zásadní roli ve všech vertikálech organizace. Zejména v firemní identitě.
Proces navrhování
Existuje mnoho způsobů, jak pokračovat ve svých designérech. Neexistují žádná tvrdá a rychlá pravidla pro rozložení webových stránek, která by definovala nebo sledovala proces navrhování, je to většinou proces, který si návrhář vybere podle svého pohodlí.
Někteří návrháři chtějí postavit celé bloky a rámy a začít pracovat na detailech ve druhé fázi, následované typem a nakonec zarovnání a úpravy. Někteří chtěli dokončit jednu část stránky najednou a přenést ji na další část. Sledujeme druhý styl.
Web dokončíme v následujících krocích
- Záhlaví zápatí
- Co děláme
- Služby
- Formulář
- Zprávy
- Zápatí
Záhlaví zápatí
Pravidlo pro definování rozměrů záhlaví nebo banneru je ponecháno na vaší kreativitě. Podle nejnovějších trendů se webové stránky zobrazují s velkým obrázkem, který pokrývá celou obrazovku vašeho počítače. Styl je označován jako Hero image, který se v poslední době stal docela populární.
V tomto případě jsme začali s hlavičkou výšky 120 pixelů a výškou 550 pixelů. Šířka by se měla shodovat s velikostí dokumentu.
Vzory plné barvy mají plochý vzhled, který u větších rámečků nebo obrázků nefunguje dobře. Abychom se vyhnuli plochému vzhledu, na horní část proužku jsem použil vrstvu překrytí. Dává proužku hloubku, která se pomalu mění z jednoho stínu na druhý.
Dále jsme začali importovat logo a umístit jej do levého horního rohu záhlaví a dalšího většího loga do středu proužku. V pravém horním rohu můžete také pozorovat vektorové tvary rozložení webové stránky, které se používají ke sdílení odkazů na sociální média.
V této fázi jsem dokončil přidání typu v části Header & Banner. Do textu je přidán název společnosti, zpráva značky s odkazy a službami. Můžete také sledovat transparentní tlačítko na banneru.
Prostý text nebo příliš mnoho textu bez zvláštních funkcí zkazí vzhled a dojem vaší webové stránky; na stránce se brzy objeví uživatel, který jej může rychle opustit. Podívejte se na vektorový tvar, který jsem přidal do odkazů na služby v pravé horní části banneru. Styl je jednoduchý, přesto vyplňuje mezeru a vyhýbá se světskému vzhledu.
Vyberte obrázek vhodný pro danou firmu. Na webu jsou k dispozici miliony sériových obrázků a netrvá dlouho, než najdeme obrázek, který odpovídá vašemu požadavku.
V mém případě jsem našel vysoce kvalitní obraz, který si myslím, že s mým webem půjde dobře. Nemám obchodní téma pro web, takže si mohu vybrat libovolný obrázek, který vypadá dobře na banneru.
Zkuste stáhnout některé obrázky ve vysokém rozlišení z níže uvedených bezplatných stránek s obrázky
www.pixabay.com
Míchání je umění, které byste měli ovládat, abyste vytvořili krásné transparenty. Zde jsem smíchal tři vrstvy, abych dosáhl efektu znázorněného na obrázku výše. Zde je to, co jsem udělal
- Umístěte vrstvu obrazu na horní část modrého pruhu
- Umístěte překryvnou vrstvu přechodu nad obrázek
- Změňte neprůhlednost obrázku o 40 procent a změňte režim prolnutí na rozdíl.
- Podívejte se na paletu vrstev na obrázku výše a zjistěte, jak jsou vrstvy na sobě naskládány.
Takto bude váš záhlaví a banner vypadat, když jsme na něm právě dokončili práci. Pracujeme na jedné části najednou a je čas přejít na další úroveň.
Pokud jde o psaní, v zásadním souladu; mít představu o tom, jak by měl váš web vypadat, a text by měl být zarovnán dříve, než jej začnete. Na této úrovni jsem použil dva různé textové rámečky, oba zarovnány doleva.
Dalším krokem je návrh části služeb na webové stránce. Navrhl jsem kovovou hvězdu v šedých odstínech, abych předvedl různé služby společnosti. Záměrem použití symbolu hvězdy je 5hvězdičkový servis.
Pokud jde o zarovnání textu, průvodci jsou vaši nejlepší přátelé. Soudržnost v rámci typu a objektů lze dosáhnout dobrým využitím bílého prostoru a stejnými mezerami mezi prvky návrhu. Použil jsem mnoho pokynů pro rozložení webových stránek, abych viděl, že všechny objekty v rámci by měly udržovat správné mezery a vzdálenosti, které vyprodukují spravedlivé množství bílého prostoru.
Dalším krokem našeho návrhu je vytvoření pole formuláře. V tomto případě pracuji opačně než metoda, kterou jsme použili při navrhování banneru. Umístíme obrazovou vrstvu pod pevně zbarvenou vrstvu a aplikujeme gradientní vrstvu na horní část těchto dvou vrstev, abychom dosáhli lepšího vzhledu. Při vkládání větších obrázků je vždy nezbytné hrát v režimech prolnutí.
Výběr obrázků pro tento web nemá žádné konkrétní téma s tím spojené. Myslím, že tento obrázek pomůže webu vypadat lépe.
Umístěte obrázek pod barevnou vrstvu pozadí. Chcete-li obraz přesně upravit na velikost barevné vrstvy, použijte možnosti maskování vrstvy.
Podívejte se na paletu vrstev na obrázku výše. Plně modrá barva je nahoře na obrázku, režim prolnutí je převeden na překrytí a krytí je sníženo na 65 procent.
Použil jsem gradientní mapu na horní části obou vrstev. Režim prolnutí se změní na odstín a krytí zůstává stejné.
Formulář je připraven, což nás přivede na konec čtvrté úrovně designu našeho webu.
Naše další úroveň se skládá ze dvou jednoduchých textových rámečků. Připomíná to úroveň dvě webové stránky a já jsem použil zarovnání dvou polí podobných hornímu. Zachování koherence v zarovnání je dobrý způsob využití bílého prostoru.
Když jsme dorazili na poslední část stránky, je čas se znovu podívat na rozměry zápatí. Návrhář musí plánovat výšku zápatí na základě odkazů, které by tam měl použít. V tomto případě jsem dal zápatí výšku 170 pixelů. Šířka zůstává stejná jako webová stránka.
Umístěte odkazy a obrázky podle vašich požadavků.
Tím jsme uzavřeli konstrukční část našeho webu. Barevné kombinace, které jsme použili, jsou minimální, v našem designu využíváme spoustu prázdných míst a přidáváme jednoduchý text s minimem písem. Záměrem je navrhnout čistou webovou stránku, která, jak doufáme, je splněna.
Podívejte se znovu na design celé stránky níže
