Přehled konzistentních návrhů na webu
Vizuální jazyk stránek ohromí návštěvníka daleko za jejich první pohled.
Ve skutečnosti při sledování nejlepších webových stránek zjistíte, že malé detaily mluví s vámi podvědomě a že konzistence zlepšuje vaše zkušenosti s webovými stránkami a v důsledku toho se budete pravděpodobněji vrátit.
V tomto článku budeme zkoumat, co dělá design konzistentní , a předvedeme některé nejkonzistentnější návrhy webových stránek tam.
Na konci článku prosím uveďte soulad s těmito webovými stránkami a neváhejte přidávat odkazy na další osoby, které se řídí tímto principem.
Co tím myslíme soudržností v designu? Podle této definice , konzistence může být definována jako: "harmonická jednotnost nebo dohoda mezi věcmi nebo částmi."
Váš cíl jako návrhář je vytvořit objednávku, aby uživatelé mohli snadno najít informace, které hledají. Konzistence vám může pomoci dosáhnout tohoto cíle.
Kontrolní seznam podrobností
Za prvé, definujeme kritéria, kterými určíme, zda webové stránky, které zde přezkoumáme, jsou konzistentní. Stanovení kriterií pro sebe samo o sobě by bylo prospěšné i pro vaše každodenní návrhové práce. Jak se mi líbí, dobrý design je nejprve vytvořen s dobrým pozorováním . Zde jsou naše kritéria:
Typografická konzistence:
- Existuje konzistentní vertikální rytmus?
- Je typografické zarovnání konzistentní?
- Jsou volby typu písma konzistentní?
- Je typografická navigace předvídatelná mezi jednotlivými stránkami?
Grafická konzistence:
- Snímky webových stránek vyjadřují konzistentní náladu?
- Docházejí barvy v obrázcích?
- Jsou textury obrázků konzistentní?
- Jsou velikost obrázků v souladu s celkovou strukturou webové stránky a navzájem?
Konzistence barev:
- Používají se barvy konzistentně mezi stránkami?
Ikona a konzistence tlačítka:
- Jsou ikony webové stránky stejné rodiny?
- Do ikon odpovídají velikost?
Webová stránka nemusí splňovat tato kritéria k bodu, ale seznam je dobrým výchozím bodem, který pomáhá vytvářet vaše vlastní návrhy konzistentní a harmonické.
Dobře, máme nyní pěkný malý seznam, na který si můžete zahrát. Podívejme se na naše webové stránky, učíme se od nich a inspirováme se!
52 týdnů UX
Co jsou některé z nejdůležitějších stránek tohoto webu:
- Bílý prostor v záhlaví je rovnoměrně rozdělen.
- Typografie je důsledně zarovnávána, spláchnou se vlevo a roztřepí se doprava.
- Trvalá paginovaná navigace nahoře je jak chytrá, tak známá.
- Obrázky pro příspěvky jsou vždy černé a bílé.
Nyní, protože tento článek je o detailech, chci upozornit na dvě drobné problémy s touto webovou stránkou, a to jak v zápatí: Nejprve si všimněte, jak tlačítko pro vyhledávání "Go" má odraz, zatímco ostatní prvky na webové stránce nejsou (srovnejte například tlačítko RSS v horní části stránky).
Za druhé, všimněte si, že mezery mezi nadpisy a textem jsou ve spodní části mnohem přísnější než ve zbytku webové stránky.
Stuhy červené
- Za prvé, nejvýznamnějším prvkem webové stránky: červená! Krásně a důsledně používané od loga k hlavičkám k odkazům na tlačítka.
- Dále je struktura grafiky tlačítek stejná jako u loga.
- Také si všimněte, že tlačítka jsou vizuálně stejná rodina, dokonce i sociální ikony ve spodní části.
- Typ displeje je opět pěkná deska, která se používá konzistentně od loga k hlavičkám k tlačítkům.
- Konečně jsou textové prvky v celém webu souvisle sladěny, vybledlé vlevo a odříznuté vpravo.
Yaron Schoen
- První věc, která zachycuje oko, je to, jak se hloubka přehrává v záhlaví. Dokonce i čtyři grafické prvky pod vyskočí ze svých kontejnerů a hrají s hloubkou stejným způsobem.
- Typografie je dokonale zarovnána v mřížce.
- Typ písma je dobře vybrán a proveden. Domovská stránka a další stránky vykazují také kontinuitu.
- Barvy jsou také velmi konzistentní, hraje se pěkně s tmavě modrou až modravou zelenou, až po záhlaví až po zápatí.
Fuzzco
- Podívejte se na texturu v horní navigaci; používá se také pro snímky v dolní části.
- Zkontrolujte typ v záhlaví mezi stránkami. pěkně hotovo s vlastním Flashem, což mu dává kreativní pocit.
- Štítek je konzistentní na domovské stránce, ale trochu se rozkládá na interních stránkách.
- Barvy v horní navigaci odpovídají zápatí, harmonizují a upravují obsah.
Stylboost
- Velikost určitě dělá tuto webovou stránku konzistentní: velká . Velké knoflíky, velké obrázky (všechny konzistentní ve velikosti), velký typ, velký bílý prostor.
- Barva je omezena na minimum a používá se dobře. Světlá modrá udržuje harmonii a sekundární šedé hry s hloubkou a hierarchií.
- Všechna tlačítka jsou velká a jednotná. Jsou také mírně zaoblené, což odpovídá vyhledávacímu pole.
- Struktura mřížky je jednoduchá a řekne vám, co bude příštím. Dokonce i zápatí je v poměru, což se zdá být blízké zlatému poměru.
Delicious Monster
Tato webová stránka není nová, ale je krásná, jak zůstala v průběhu let konzistentní a nezestárla trochu. Pozornost na detail pomohla.
- Všimněte si textury. Webová stránka je rámována dřevěnou poličkou, která se propojuje s tématem softwaru, který společnost nabízí.
- Grafické prvky, jako je tráva a rostliny, udržují harmonii.
- Každá sekce má zaoblené rohy, dokonce i tlačítka pro prezentaci.
- Zelenka-žlutá dominuje stránce a vyzývá vás, abyste vstoupili do tohoto nápaditého a nezapomenutelného světa.
Richard Meier & Partners Architects.
Byla navržena Massimo Vignelli , který je známý tím, že zvládl síť a vyráběl moderní, konzistentní a logické návrhy.
- Všimněte si zarovnání grafických prvků. Typ levého splachu v nabídce se vyrovnává s níže uvedenými obrázky.
- Horizontální pravidlo pod sub-navigací je trvalé a pomáhá uživatelům orientovat se na webových stránkách.
- Prostor mezi navigací a obsahem těla je konzistentní a dává oči jasnou cestu.
- A typografie je jednoduchá, spláchnou se vlevo a bezprostředně, a neustále padá do mřížky.
Tým za sebou Informační architekti také zvládl jednoduchost, design mřížky a konzistenci.
- Všimněte si, jak je navigace v horní části zarovnána s obsahem těla níže.
- Paleta barev je jednoduchá a konzistentní: červená, bílá a černá.
- Textové prvky jsou rovnoměrně zarovnány. Všimněte si, jak je prostor mezi horizontálními pravidly konzistentní po stránce.
Wilson Miner
- Data a meta obsah jsou zarovnány v prvním sloupci, následovaný obsahem těla.
- Všimněte si, jak navigace v horní části spadá do mřížky, zarovnávání s níže uvedeným obsahem.
- Typografie je jednoduchá bílá a černá: bílá pro názvy částí, černá pro kopie těla.
Tapboty
- První věc, která zachycuje mé oko, je vynikající využití bílého prostoru, zejména rovnoměrné rozestupy mezi logem a navigací, jak nad, tak i pod ním.
- Zdá se, že všechny ikony pocházejí ze stejné rodiny a vytvářejí harmonii.
- Použití hloubky, od horní grafiky k ilustraci zápatí, je také konzistentní.
- Barvy se shodují na stránce: černá nahoře odpovídá zápatí; červené tlačítko v horní části odpovídá tlačítku vyhledávání níže; a šedá navigace odpovídá šedé liště v zápatí.
Obalování nahoru
Konzistentní konstrukce vyžaduje mnoho nástrojů a může být obtížné dosáhnout.
Jeden tip, který mohu nabídnout, je začít s pěknou mřížkou a pak na něj postavit drátěný rám. Získáte tak pohled z ptačí perspektivy na grafické prvky a vzájemné vztahy mezi nimi.
Výše uvedené příklady by vám měly dát k zamyšlení, pokud jde o provedení vašeho návrhu. Konzistence se skládá z mnoha částí, které jsou v tomto procesu základními složkami.
Napsal výhradně webdesigner Depot Noam Almosnino, webdesigner v Brooklynu v New Yorku. Sledujte Noam na Twitteru , nebo navštivte jeho webové stránky hellonoam.com .
Znáte další konzistentní webové stránky, které se s námi podělíte? Prosím, vložte je do komentářů!