Sledovanie obsahu videa Čo potrebujete vedieť
vizuálny smer obsahu je menej diskutovaný, ale zásadný aspekt vysoko konvertujúceho dizajnu webu. Každý návštevník "nasáva" novú stránku na začiatočnom zaťažení - či už to vedome alebo nie.
Estetika zohráva úlohu, ale je to viac o celkový pocit dizajnu. Tento pocit môže byť ovplyvnený medzerou, typografiou, symetriou, ale väčšinou vzťahy medzi prvkami stránky.
Dizajnéri chcú návštevníkov zostať na stránke a držte krokovanie tým, že zachytia ich pozornosť a udržiavajú ich záujem o miesto. Princípy návrhu by sa mali vždy zamerať na funkciu pred formulárom. To znamená, že návrh by mal dopĺňajú obsah, nezasadzujte ho ako nápad.
V tomto príspevku by som vám rád ukázal niekoľko tipov, ako môžete zlepšiť rozloženie a tok vizuálneho obsahu na vašich stránkach.
Zamerajte sa na zloženie
Vytvára sa každý kus webovej stránky na celkovom usporiadaní. Toto celkové usporiadanie vytvára kompozíciu, ktorá sa riadi pravidlami teórie Gestalt, ktorá to uvádza celok je vždy väčší ako súčet častí.
Jednotlivé oblasti stránky sa spoja tvoria celok. Dizajnové prvky musia stavať gravitačná ťah na obsah; všetko na stránke by malo prirodzene vedú návštevníkov ďalej, až kým nedosiahnu spodnú časť stránky.
To je dôvod, prečo sú vzťahy medzi rôznymi časťami obsahu (vizuálne, textové, tlačidlá atď.) Veľmi dôležité pre dizajn.
Váš cieľ by mal byť povzbudzovanie ľudí na prehliadanie webu z vlastného sklonu. Je to jednoduchšie povedané, ako urobiť, ale môžete sa naučiť veľa štúdium skutočných príkladov.
Domovská stránka pre Monkop je skvelým príkladom vizuálnej hierarchie text aj vizuálne. Medzi prvkami sa používa dostatok priestoru a typografia dopĺňa značkové vektorové ilustrácie.
Počas posúvania sa zistíte priame horizontálne bloky stránok rozdelené farbami, hranicami a grafikou. Tieto sú postavené s dizajnové vzory mať na mysli ponúka konzistenciu na celej stránke.
Smerom k dolnej časti nájdete a rozdelenie v dvoch stĺpcoch s obrázkami na jednej strane a textom na druhej strane. Obrázky tiež swap strany v tvare pravá-ľavá-pravá-ľavica. To upriamuje pozornosť a rozdeľuje monotónnosť počas bežnej stránky udržiavanie prirodzeného prietoku v obsahu.
podobný estetický dizajn možno nájsť na webovej stránke Picjumbo, vstupnej stránky pre doplnok fotografií pre používateľov aplikácií Photoshop a Sketch.
Domovská stránka umiestňuje zameranie na logo a ukážku videa. Pri posúvaní si všimnete vlastné animácie, ktoré sa pohybujú po celej stránke. Táto animácia naozaj zachytáva pozornosť, a dostane diváka záujem o rolovanie.
Celkovo sa cíti stránka otvorené a ľahko prehľadávať. Obsah je rozdelená na horizontálne bloky s ostrým typografiou a čistými ikonami.
Zvážte spôsob rôznych prvkov stránky rovnováhu, priestor medzi prvkami, kontrast medzi farbami a rôzne tvary. Všetky tieto veci zohrávajú úlohu v celkovom zložení. Každé miesto prirodzene priťahuje určitú váhu na obsah.
Neexistuje absolútna odpoveď, pretože je pre každú stránku iná. Napríklad, niektoré navigačné odkazy vyzerajú lepšie, keď sú veľké a veľké. Ostatné sa hodia lepšie, keď sú malé s veľkými písmenami.
Navrhujem, aby ste študovali iné webové stránky vo vašej nika. Skutočne analyzujte, ako sa dajú dohromady. Dokonca sa pokúste obnoviť rozloženie, aby ste zistili, ktoré prvky nakoniec vytvoria dizajn "spojte sa".
Typové záležitosti
Spôsob, akým navrhujete svoju typografiu vplyv smeru obsahu na vašich stránkach. Toto súvisí s typovou hierarchiou a štýly dizajnu rôznych prvkov stránky ako sú odseky, hlavičky, zoznamy s odrážkami, úvodzovky a špeciálne prvky rozloženia, ako sú stĺpce alebo tabuľky.
vizuálne môže tiež ovplyvniť rozloženie, takže je dobré navrhnúť obsah s prirodzeným postupom. Píšte obsah takým spôsobom tečie nadol, a udržiava ľudí čítanie prostredníctvom každého odseku.
Najväčší nástroj, ktorý máte k dispozícii, je vaše oko pre dizajn. Naučte sa rozpoznať rozdiely v typografických prvkoch a ako súvisia s inými prvkami stránky. Vytvorte vzťahy medzi sekciami stránok, aby ste rozlíšili oblasti obsahu.
Niektoré veci, ktoré by ste mohli zvážiť:
- Veľkosť textu
- Rodina písma
- Farebný kontrast
- Vzťahy sekcie stránky
- Výška a okraj okien
- Rozpísanie písmen a horné / malé písmená
Pozrite sa napríklad na domovskú stránku kampane Monitorovanie kampane. V horných navigačných odkazoch sa používajú všetky čiapky s malými písmenami. Ďalšie hlavičky na stránke postupujte podľa toho istého dizajnu všetkých uzáverov ktorý vytvára pocit jednotnosti.
Ďalšie väčšie hlavičky na stránke sú oveľa výraznejšie, a oni naozaj skočia zo stránky. Pri pohľade na typický dizajn záhlavia by malo byť jednoduché povedať rozdiel medzi záhlavím a jeho spárovanou kópiou tela.
Štýly typografického dizajnu na kampani Monitor sú vynikajúce a oni prirodzene sa mieša do rozloženia. Trvalo tréning na dosiahnutie takého výsledku, ale čím viac sa pokúsite, tým ľahšie to bude.
Ak sa chcete dozvedieť niečo viac, odporúčam vám tieto odkazy:
- Princípy návrhu: Vizuálna váha a smer
- Práca s vizuálnou hmotnosťou v dizajnoch
- 19 Faktory ovplyvňujúce kompozičný zostatok
Vedúci obsah
Pochop to rôznych typov webových stránok mať rôzne metódy na usmerňovanie návštevníkov prostredníctvom stránky. Napríklad vstupné stránky chcú sprevádzať návštevníkov tidbits of information, malé ikony, screenshoty, a Ohlasy.
Iné stránky, ako sú napríklad blogy, zvyčajne neprivádzajú ľudí na domovskú stránku naraz. Väčšina ľudí pozemok na stránke článku, takže rozloženie príspevkov blogu je určené zvýraznite nadpis, a kresliť ľudí ďalej do obsahu. To je miesto, kde kvalitné copywriting vstupuje do hry, pretože chcete, aby čitatelia visí každé slovo.
Sociálne siete a webové aplikácie potrebujú kvalitné používateľské skúsenosti, takže je to trochu iná téma, ale zvážte, ako je navrhnutý kanál Facebooku podporovať rolovanie a interakciu používateľa.
Metódy návrhu, ktoré používate na to, aby ľudia prehliadali stránky, budú zmeniť sa časom. Ale vo všeobecnosti je vaším cieľom návštevníkov s vizuálnym smerom obsahu.
Poďme sa pozrieť na vstupnej stránky a a dizajn blogu aby zistili rozdiely.
Cactus je statický generátor lokality pre OS X. Ich domovskú stránku nasleduje úzko štýl návrhu spoločnosti Apple - veľa medzery a tenké písmo sans serif.
Obsah je usporiadaný do stĺpcov, blokov a kusov textu s jednoduchou grafikou. Tá istá estetika je bežné s produktmi spoločnosti Apple, takže používatelia Macu budú mať tento štýl dizajnu.
Informácie o produkte - vrátane funkcií a nastavenia - sú uvedené priamo na domovskej stránke. Samotná stránka podporuje rolovanie prostredníctvom jedinečného obsahu, základných ikon a striedavého stĺpcového vzoru blokov obsahu vľavo / vpravo.
Cieľom je poskytnúť informácie existujúcich používateľov, a predávať nových používateľov myšlienka Cactus.
Teraz porovnajte tento dizajn s domovskou stránkou pre web Next Next. Obsah je oveľa sporadickejšie na domovskej stránke blogu, pretože tam je veľa rôznych príspevkových tém.
Obdĺžniky vytvárajú mriežkový systém, ktorý zapuzdruje viacerých príspevkov do jedného rozloženia. Cieľom je získať používateľov čítanie obsahu na strane. Nezáleží na tom, či návštevníci sťahujú čokoľvek, ale je jedno, či sú držte sa okolo a čítajte niečo.
Spôsob, akým ľudia čítajú, je skvelé fotografie a chytľavé titulky. TNW robí skvelú prácu, a ich rozloženie je postavený tak, aby ľudia prehliadali s príslušnými miniatúrami príspevkov v bočnom paneli a oblasti s post-obsahom.
Sprievodca návštevníkmi konkrétnej akcie je na každej stránke iný. Ale môžete sa veľa naučiť tým, že študujete, čo robia iné úspešné stránky a učiť sa ako kopírovať.
Dôverujte svojim očkám
Vlastné dizajnérske vlastnosti môžu byť vysvetlené analyticky, ale implementácia sa mení pre každú lokalitu. Hrdina s odkazom "Scroll ďalej" nevykoná to isté na všetkých webových stránkach.
Naučiť sa dizajn je veľmi a vizuálny proces. Vaše oko pre dizajn je najdôležitejším aspektom. Musíte vidieť veci správne identifikovať to vizuálna hierarchia. Ak ho môžete vidieť na iných webových stránkach, budete ho môcť replikovať na svojich stránkach.
Najlepšia rada, ktorú mám, je Len dôveruj svoje oči. Vytvorte si zoznam obľúbených webových stránok a strávte 5 minút prehliadaním každého z nich. Zapíšte svoje obľúbené prvky na stránku a ako ovplyvňujú dizajn. Pomôže vám to internalizovať tieto koncepty z perspektívy UI / UX, namiesto perspektívy používateľa.
Nebojte sa vyskúšať veci! Nikto nemal dobrý dizajn proste čítaním článkov o dizajne. Áno, pomáhajú - môžu veľa pomôcť. Ale ty potrebovať na vytvorte veci od začiatku, aby ste sa dozvedeli čo práce a čo nie je.
Trénujte svoje oko štúdiom rozloženia webových stránok, ktoré sa vám páčia, a znovu ich vytvorte. V priebehu času vytvoríte vo svojej mysli vzorovú knižnicu, ktorá zjednodušuje navrhovanie nových stránok.
Zbaliť
Dúfajme, že tieto tipy vám začnú a poskytnú vám základný plán. Nie je ľahké stať sa web dizajnérom, ale svet potrebuje talent a nikdy nebolo ľahšie sa naučiť tieto základné pojmy.
študovať najlepšie príklady webových stránok s prvkami stránky, ktoré máte radi. Vlak vaše oko rozpoznať vzťahy a budete rýchlo vypracovať potrebné zručnosti replikovať tieto vzťahy vo svojej vlastnej práci.
