Stuhy a značky ve webovém designu
Trendy se mohou rozvíjet tak tiše a jemně, že je málokdy všimneme.
A když prozkoumáte stovky webových stránek, často vidíte vzory, které by jinak chyběly. Jedním takovým vzorem je časté používání štítků a stuh.
Tyto malé rozkvěty jsou stále oblíbenější. Tento článek se zabývá dvěma prvky, protože jsou používány společně tak často.
Zatímco pásky jsou samozřejmé, značkami mám na mysli falešné štítky, které visí z horní části obrazovky jako značka na tričku.
Webové stránky, které používají tyto prvky, jsou opravdu kvalitní. Spojení této nádherné vitríny se ukázalo být mimořádně snadné. Jen málo trendů je takový: jeden obvykle musí projít mnoha špatnými příklady najít ty chutné.
Proč používat tyto pásky a štítky?
Značky jsou užitečné, protože kreslí pozornost uživatele tím, že vytvoří iluzi hloubky. Odešou svůj obsah uživateli. Značky jsou také často stylizovány punčem, ať už prostřednictvím 3-D efektů nebo tučných kontrastních barev.
Tyto faktory činí značku za hlavní místo pro důležité informace: loga, navigace, výzvy k akci. Vidíme to v přehlídce níže. Samozřejmě, jako vždy, zhodnoťte své potřeby před implementací tohoto prvku na svých webových stránkách.
Páska sdílí stejné kvality, což je důvod, proč ji najdeme a značku společně tak často: upoutává pozornost a je skvělým místem pro důležité informace. Tvar pásky ji však odlišuje od štítku; dvě šipky na svých koncích se zdají odkazovat na obsah uvnitř, jemně nasměrovávající pozornost uživatele.
Rodina stylů
Dalším důvodem, proč se tyto dva prvky často nacházejí společně na webových stránkách, je, že jsou to jak digitální reprezentace tkaniny. Není tedy překvapením, že mnoho z níže uvedených webových stránek má jiné textilní prvky, včetně jemných šití, textur a dalších organických prvků.
Stuhy
Letní student
Páska pěkně rámuje jméno Letní student tady. Stránka je také rozložena jako jeden sloupec; vyztužený titul povzbuzuje uživatele, aby začal svou cestu nahoru a odtud odtékat.
Ribot
Ribot 'S stuha je poměrně jemná. Rozkvétá oživuje stránku a soustředí se na fokus ve dvou slovních slovech. Dokonalý způsob, jak nastavit očekávání, protože název společnosti nám neříká, co dělá.
Alex Pierce
Text je tak nesmírný na domovské stránce Alex Pierce By bylo zapotřebí poměrně odvážného prvku k vyvážení. V tomto případě pásku dělá dobrou práci, jak vypnout záhlaví. Také mám rád, jak se složená vrstva ve středu pásky soustředí na jméno designéra.
Rockaholic!
Na poněkud neobvyklé Rockaholic! , páska směřuje pozornost uživatele dolů, hraje se pěkně do vertikálního posouvání webu a pomáhá uživateli nahlédnout do obsahu.
Paris Jones
Nádherná červená stuha dává název kapely Paris Jones vydejte se sem. Přestože textová úprava je poněkud jemná, odvážný vzor zajišťuje, že si ji všimnete.
Blog en Bois
Na Blog en Bois , je efekt šípu pásky obzvláště silný, především kvůli kontrastní tmě za žlutou barvou. Zjistil jsem, že jsem se znovu a znovu vrátil k logu. Je to určitě silný způsob, jak vylepšit značku v mysli uživatele.
HTML5 Boilerplate
Oblíbená webová stránka HTML5 Boilerplate používá pásky k tomu, abychom upoutali pozornost na nejdůležitější položky akce na stránce. Mám rád, že pásky dělají svou práci, aniž by museli říkat "Stáhnout zde". Kombinace stuh a štítků nám říká, že je to místo, kam si můžete stáhnout zdroje.
Cantilver Fish & Chips
Účel pásky není tak jasný Cantilver Fish & Chips . Podrobnosti o tom, že jsou "otevřené 7 dní v týdnu", se zdají poměrně nepatrné, ale pravděpodobně je pro tuto restauraci důležitým rozdílem.
Wells Riley
Wells Riley je dokonalým příkladem stuh v estetickém stylu. Stuhy vypadají skvěle a stávají se centrem stránky.
Dhiraj Singh Karki
Vždycky miluju návrhy, které se odchylují od konvence. Portfolio UI návrháře Dhiraj Singh Karki je to taková webová stránka. Tady se páska používá spíše chytře a nebalí téměř stejný vizuální punč jako na jiných webových stránkách. Směruje se přímo do stránky a přitom má dostatek stylu, aby design vypadal příliš jednoduchým způsobem.
Chipmunk
Chipmunk je skvělým příkladem toho, jak dobře může páska pracovat s organickými prvky. Páska kolem primární navigace dokonale zapadá do bohatých obrázků níže. To také udržuje navigaci ztratit mezi mocnými umělecká díla.
Ryan M. Stryker
Opět vidíme sílu pásky, abychom upoutali pozornost. Jeho centrální poloha a výrazný kontrast zaručují, že vám to nenecháte ujít Ryan M. Stryker Jménem.
Tagy
Ennea
Vzhledem k tomu Ennea je značka oblečení, není překvapením, že značka obsahuje logo a značku. Někdy funguje nejjednodušší přístup.
Philip Meissner Design
Značka obsahuje hlavní navigaci zapnuta Philip Meissner Design . Obvykle bych se odvrátil od této neobvyklé konfigurace odkazů, ale uspořádání a barvy zde zajišťují snadné nalezení odkazů.
Tinkering Monkey
Co by mohlo být důležitější na webových stránkách elektronického obchodování, které by vedly uživatele ke kontrole? Tinkering Monkey má poměrně hezký štítek, který pomáhá uživatelům dokončit nákup.
Parkbud
Se všemi inteligentními telefonními aplikacemi tam, kde jsou dobré, potřebují sdělit své klíčové diferenciace. Parkbud je zdarma a odvážný červený štítek zajistí, že ho znáte. Značka je dobře zastrčená, ale vždy viditelná z okraje oka, připomínající vám, že tato chutná aplikace je zdarma.
Lense
Lense je dokonalým příkladem značek kombinovaných s textilními strukturami. Nejdříve si všimněte texturovaného denimového pozadí; Také, vytesané hranice pod hlavní navigací se cítí velmi textilně orientované.
Coreymade
Zatímco malý detail, opravdu se mi líbí způsob, jakým písmo skriptu dělá značku Coreymade se cítí více jako značka na košili než normální logo webu. A pseudo-3D efekt činí tag opravdu pop pro diváka.
Netastica
Značka na Netastica je hlavně tam vypadat hezky, i když stále obsahuje důležité informace a odkazuje návštěvníky na domovskou stránku.
Ryan Havoc Taylor
Značka je na takovém viditelném místě Ryan Havoc Taylor Že nepotřebuje mnoho kontrastu, aby vyniklo. Funguje dobře s tokem webových stránek a vykonává svou roli bez námahy.
Stuhy a štítky
V závěrečné části této prezentace se podíváme na webové stránky, které využívají oba pásky a značky.
ClearSpan Media
Pásky a štítky jde velmi dobře, jak ukazuje ClearSpan Media . Zde najdete také textilie se vzory, stehy a jemné barevné variace. Dvě značky nahoru a dolní páska dolů fungují jako určitý okruh zájmu pro uživatele.
Krichevtsova Alexandra
Zatímco Krichevtsova Alexandra Webové stránky jsou spíše barebones v obsahu, značka a stuha dodat další život klíčových prvků. Můžete se těšit na tuto webovou stránku, aniž byste věděli, co člověk dělá.
Wes Bos
Většina webů této kolekce má poměrně velké stuhy. Ne tak Wes Bos . Jeho jsou mnohem menší, což je dobrá připomínka, že nemusí ovládat design, aby vykonával svou funkci.
Závěr
Vzhledem k kvalitě webových stránek v této sbírce se žádný z těchto návrhářů nevytvořil něco "trendového". Spíše se setkali s potřebami a z těchto potřeb se objevil efektivní vizuální prostředek pro zaměření pozornosti, komunikaci důležitých informací a upozornění na důležitá opatření.
Pokud byste chtěli nějaké pěkné stuhy založené na CSS pro vlastní webové stránky, webové stránky 3-D generátor pásky je užitečný nástroj pro práci.