Směr vizuálního obsahu Co potřebujete vědět

vizuální směr obsahu je méně široce diskutovaný, ale zásadní aspekt vysoce konvertujícího webového designu. Každý návštěvník "nasaje" nové stránky na první stránce zatížení - ať už to dělají vědomě nebo ne.

Estetika hraje roli, ale je to spíše o tom celkový dojem z designu. Tento pocit může být ovlivněn mezerami, typografií, symetrií, ale většinou vztahy mezi prvky stránky.

Návrháři chtějí návštěvníky zůstat na stránce a pokračujte v rolování tím, že zachytí jejich pozornost a jejich zájem o stránky. Zásady designu by se měly vždy zaměřit na funkci před formulářem. To znamená, že návrh by měl doplňovat obsah, není to strhnout jako dodatečně.

V tomto příspěvku bych vám rád ukázal několik tipů, jak můžete zlepšit své rozvržení a toky vizuálního obsahu na vašich stránkách.

Zaměřte se na kompozici

Každý jednotlivý kus webové stránky staví na celkovém uspořádání. Toto celkové uspořádání vytváří kompozici, která se řídí pravidly Gestaltovy teorie, která uvádí, že celek je vždy větší než součet částí.

Jednotlivé oblasti stránky se spojí tvoří celek. Konstrukční prvky musí stavět gravitační tah o obsahu; vše na stránce by mělo přirozeně navštěvují návštěvníky dolů, dokud nedosáhnou dolní části stránky.

To je důvod, proč vztahy mezi různými částmi obsahu (vizuály, text, tlačítka, atd.) Záleží na designu.

Váš cíl by měl být povzbuzování lidí procházet stránky z vlastního sklonu. Je to jednodušší, než udělat, ale můžete se hodně naučit zkoumá reálné příklady.

Domovská stránka Monkopu je skvělým příkladem vizuální hierarchie vizuální i textové. Mezi prvky se používá dostatek prostoru a typografie doplňuje značkové vektorové ilustrace.

Jak budete rolovat, všimnete si rovné vodorovné bloky stránek rozděleny barvami, hranicemi a grafikou. Jsou postaveny designové vzory na mysli nabídnout konzistenci na stránce.

Směrem ke dnu najdete a dvou sloupců s obrázky na jedné straně, text na straně druhé. Obrázky také stran ve vzoru vpravo-vlevo-vpravo-vlevo. To přitahuje pozornost a rozděluje monotónnost typické stránky udržení přirozeného toku v obsahu.

A podobné estetické provedení lze nalézt na webových stránkách Picjumbo, vstupní stránky pro foto addon pro uživatele Photoshopu a Sketch.

Domovská stránka umístí zaměření na logo a náhled videa. Při posouvání si všimnete vlastních animací, které se pohybují po stránce. Tato animace opravdu zaujme pozornost, a dostane diváka zájem o rolování.

Celkově se stránka cítí otevřeno a snadno procházet. Obsah je horizontální bloky s ostrými typografie a čisté ikony.

Zvažte způsob, jakým různé prvky stránky rovnováhu, prostor mezi prvky, kontrast mezi barvami a různé tvary. Všechny tyto věci hrají roli v celkové kompozici. Každá stránka přirozeně kreslí určitou váhu na obsah.

Neexistuje absolutní odpověď, protože je to odlišné pro každou stránku. Například, Některé navigační odkazy vypadají lépe, když jsou velké a příliš velké. Ostatní se hodí lépe, když jsou malá s velkými písmeny.

Doporučuji vám studovat další webové stránky ve vašem výklenku. Opravdu analyzovat, jak jsou dohromady. Dokonce zkuste přestavět rozvržení, abyste viděli, které prvky konečně způsobují, že se design „spojí“.

Typ Návrhové záležitosti

Způsob, jakým navrhujete svou typografii ovlivnit směr obsahu na vašich stránkách. To souvisí s typovou hierarchií a návrhové styly různých prvků stránky jako odstavce, záhlaví, seznamy s odrážkami, citace a speciální prvky rozložení, jako jsou sloupce nebo tabulky.

Vizuály může ovlivnit rozložení příliš, takže je to dobrý nápad navrhnout obsah s přirozeným vývojem. Zapisujte obsah způsobem, který proudí dolů po stránce, a udržuje lidi čtení prostřednictvím každého odstavce.

Největší nástroj, který máte k dispozici, je vaše oko pro design. Naučte se rozpoznávat rozdíly v typografických prvcích a jak se vztahují k jiným prvkům stránky. Vytvářejte vztahy mezi sekcemi stránek, abyste rozlišili oblasti obsahu.

Některé věci, které byste mohli zvážit:

• Velikost textu
• Rodina písma
• Barevný kontrast
• Vztahy sekce stránky
• Okrajové a řádkové okraje
• Mezery mezi písmeny a velká / malá písmena

Podívejte se například na domovskou stránku Sledování kampaně. Horní navigační odkazy používají všechny čepice s malým písmem. Další záhlaví na stránce následovat stejný design všech čepic který vytváří pocit jednotnosti.

Další větší záhlaví na webu jsou mnohem výraznější, a opravdu skočí ze stránky. Při pohledu na typický design hlavičky by mělo být snadné Řekni mi rozdíl mezi hlavičkou a kopií spárovaného těla.

Styly typografického designu na monitoru kampaně jsou vynikající a ty přirozeně vmíchat do dispozice. K dosažení takového výsledku je zapotřebí praxe, ale čím více se budete snažit, tím snadnější bude.

Chcete-li se dozvědět více, doporučuji následující odkazy:

• Principy návrhu: Vizuální hmotnost a směr
• Práce s vizuální váhou ve vašich designech
• 19 Faktory ovlivňující kompoziční bilance

Vedoucí obsah

Rozumět tomu různých typů internetových stránek mít různých metod pro navádění návštěvníků prostřednictvím stránek. Například vstupní stránky chtějí navštěvovat návštěvníky informace, malé ikony, screenshoty, a osvědčení.

Ostatní stránky, jako jsou blogy, obvykle nepřinesou lidi na domovskou stránku najednou. Většina lidí na stránce článku, Rozvržení blogu je tedy zamýšleno zvýrazněte titulek, a kreslit lidi dále do obsahu. To je místo, kde kvalitní copywriting přichází do hry, protože chcete, aby čtenáři visí z každého slova.

Sociální sítě a webové aplikace potřebují kvality, takže je to poněkud jiné téma, ale zvažte, jak je Facebook krmivo navrženo podporují rolování a interakci s uživatelem.

Metody návrhu, které používáte, aby lidé procházeli webem, budou časem měnit. Ale obecně je vaším cílem průvodce vizuálním směrem.

Podívejme se na vstupní stránka a blog design odhalit rozdíly.

Cactus je statický generátor stránek pro OS X. Jejich domovská stránka pozorně sleduje designový styl Apple - dostatek mezer a tenkých bezpatkových fontů.

Obsah je uspořádán do sloupců, bloků a kousků textu s jednoduchou grafikou. Tyto stejné estetiky jsou s produkty Apple, uživatelé Mac budou mít tento designový styl.

Informace o produktu - včetně funkcí a nastavení - jsou uvedeny přímo na domovské stránce. Samotná stránka podporuje rolování prostřednictvím jedinečného obsahu, základních ikon a střídavého sloupcového vzoru bloků obsahu vlevo / vpravo.

Cílem je poskytnout informace existujících uživatelů, a prodávat nových uživatelů myšlenku kaktusu.

Nyní porovnejte tento návrh s domovskou stránkou webu Další web. Obsah je mnohem sporadičtější na domovské stránce blogu, protože existuje mnoho různých příspěvkových témat.

Obdélníky vytvářejí mřížkový systém, který zapouzdřuje více příspěvků do jednoho rozložení. Cílem je zde čtením obsahu Na stránce. Nezáleží na tom, jestli si návštěvníci něco stáhnou, ale na tom záleží držet se kolem číst něco.

Způsob, jak dostat lidi ke čtení, je skvělé fotky a chytlavé titulky. TNW to odvede skvěle a jejich uspořádání je postaven tak, aby lidé procházeli s příslušnými miniaturami příspěvků v postranním panelu a oblasti s obsahem.

Navádění návštěvníků na konkrétní akci je na každém místě jiné. Ale můžete se hodně naučit studiem toho, co dělají jiná úspěšná místa, a naučit se kopírovat.

Věřte svým očím

Jednotlivé konstrukční vlastnosti lze vysvětlit analyticky, ale implementace se mění pro každou stránku. Obrázek hrdiny s odkazem "Posunout dále" nefunguje stejně na všech webových stránkách.

Učit se design je velmi a vizuální proces. Váš pohled na design je nejdůležitější aspekt. Musíš vidět věci správně identifikovat vizuální hierarchie. Pokud ho můžete vidět na jiných webových stránkách, budete jej moci replikovat na svých vlastních stránkách.

Nejlepší radu, kterou mám, je věř svým očím. Vytvořte seznam svých oblíbených webových stránek a prohlédněte si každou z nich 5 minut. Zapište si na stránce své oblíbené prvky a způsob, jakým ovlivňují design. To vám pomůže internalizace těchto konceptů z pohledu UI / UX, spíše než z pohledu uživatele.

Také se nebojte vyzkoušet věci! Nikdo neměl dobrý design prostě čtením článků o designu. Ano, pomáhají - ve skutečnosti mohou hodně pomoci. Ale vy potřeba na vytvářet věci od nuly, abyste se dozvěděli co funguje a co ne.

Trénujte své oko studiem rozložení webových stránek, které se vám líbí, a jejich opětovným vytvořením. Postupem času si ve své mysli vytvoříte knihovnu vzorů, díky níž je navrhování nových stránek mnohem snazší.

Balení

Doufejme, že vám tyto tipy začnou a poskytnou vám základní plán. Není snadné se stát web designer, ale svět potřebuje talent, a to nikdy nebylo snazší učit se tyto základní pojmy.

Studie nejlepší příklady webových stránek s prvky stránky se vám líbí. Vlak vaše oko rozpoznat vztahy, a budete rychle rozvíjet potřebné dovednosti replikovat tyto vztahy ve vaší vlastní práci.