Kompletní průvodce účinným návrhem rozhraní ve stylu karty
Architektura ve stylu karet je jednou z největších věcí v oblasti webdesignu a zejména mobilního designu. Od aplikací po responzivní weby se všude objevuje formát karty.
A z dobrého důvodu. Design mobilních karet vypadá dobře, dobře funguje na různých zařízeních a vytváří odlišnou organizaci a způsob doručování obsahu. To je důvod, proč mnoho velkých, známých značek používá formát karty a mnoho menších návrhových a vývojových skupin je následuje.
Prozkoumejte prvky Envato
Co je karta Design?
Styly designu karet pro mobilní a stolní webové stránky jsou definovány v krabičce s obsahem, který vypadá, jako by byl uveden na hrací kartě různých druhů. Krabice ve stylu karet obvykle obsahují jeden jedinečný kousek obsahu nebo informací a obvykle jsou orientovány vertikálně.
Ale stejně jako u jakékoli techniky designu existuje spousta způsobů, jak porušit pravidla. Základním principem této myšlenky je poskytnout záblesk informací způsobem, který je snadno vidět a strávit najednou. Populární weby pro sdílení sociálních médií, jako jsou Twitter a Pinterest, používají tento formát k seskupování obrázků a příspěvků.
Na digitální kartě je příjemné, že s ní lze manipulovat různými způsoby. Mohou vypadat naskládané jednotlivě (jak je tomu často v případě mobilního designu) nebo padat do mřížky pro větší obrazovky. Karty mohou být krátké nebo vysoké a navrženy tak, aby se přizpůsobily obsahu uvnitř.
Design ve stylu karet je také oblíbený u responzivních rámců, protože návrháři mohou přidávat a sbírat sloupce karet tak, aby odpovídaly tvaru a velikosti obrazovky. Zatímco většina návrhářů navrhuje karty s pevnou šířkou a umožňuje, aby výška karty zůstala variabilní.
Jak karty mohou pracovat pro váš projekt
Karty jsou moderní volbou díky své flexibilitě a široké škále použití. (Pomáhá to také tomu, že některé z nejpopulárnějších webů na světě použily v nedávných iteracích designu nějakou formu karty - abychom jmenovali alespoň některé z nich. Google, Microsoft, Facebook, Twitter, Pinterest a Buzzfeed.)
Ale chcete použít koncept karty? Tato technika má několik výhod:
- Usnadňuje stravování obsahu.
- Existuje mnoho stylů designu, které fungují v tomto formátu, od bytu po ozdobu.
- Karty fungují dobře v responzivních rámcích.
- Formát má organizovaný vzhled a poskytuje strukturu pro spoustu informací.
- Funguje dobře pro mnoho různých typů obsahu.
- Designy ve stylu karet jsou prakticky vytvořeny pro sdílení na sociálních médiích.
Navrhněte skvělou kartu
Nejlepší design karty je jednoduchý. Má také bohatý obsah. Pro úspěšný projekt ve stylu karty musí být přítomny oba tyto prvky. Existuje však spousta dalších technik designu, které mohou přidat také funkčnost a estetiku.
Skvělá věc na kartách je, že ve skutečnosti neexistuje čistě sada návrhových pravidel, která musíte dodržovat. Základní principy dobrého designu jsou vše, co musíte pochopit, abyste mohli začít dělat projekt ve stylu karet.
Využijte dostatek prostoru
Prostor je běžným faktorem v projektech designu ve stylu karet. Zejména spousta prázdných míst. Důležité je dát každému jednotlivému prvku elementu, aby ho viděl, četl a porozuměl mu. To platí zejména v bloku, který bude často obsahovat vlastní „mini design“. Přemýšlejte o tom tímto způsobem: Pokud každá karta ve vašem projektu obsahuje obrázek, nadpis, text hlavní kopie, tlačítko výzvy k akci a tlačítko nebo odkaz sdílení, existuje minimálně pět prvků, s nimiž je možné pracovat v prostoru širokém asi 600 pixelů. .
Mít dostatek místa kolem každého prvku poskytuje uživatelům čas na vizuální reset při pohledu z jednoho prvku na další nebo z karty na kartu. Zahrnutí velkého množství výplní mezi prvky také pomůže přenést pozornost a pozornost prostřednictvím karty způsobem, který pracuje s hierarchií obsahu.
Jeden kus informací na kartu
Již jsme zjistili, že karta bude v návrhu obsahovat více prvků, ale každý by se měl zaměřit pouze na jeden kousek informací nebo obsahu. Postupujte podle konceptu jednoho nápadu na blok, aby byl obraz a veškerý podpůrný text sjednoceny.
Tato myšlenka může učinit obsah, který by mohl být dramaticky rozmanitou prací ve stejném prostoru, vypadat úmyslně a organizovaně. Poskytuje uživatelům možnost vybrat a vybrat části vašeho portfolia obsahu, které chtějí konzumovat a sdílet.
Vyberte jasný a ostrý obrázek
Obrázek je králem designového prostoru karty. K přilákání uživatelů na každou jednotlivou kartu potřebujete skvělý obrázek - a musí být skvělý, i když malý. (Pamatujte, že se jedná o přeplněný internetový prostor.)
Pokud nemáte obrázek, vyberte typ uměleckého stylu nebo vytvořte text, který nemůže pomoci, ale vtáhnout uživatele? (Vzpomeňte si na lamanský „útěk“ na konci února, který se díky velkým autorům titulků stal virovým.)
Použijte jednoduchou typografii
Rozhodněte se pro jednoduchá písma v jednoduchých a snadno čitelných barvách - oblíbené jsou černé a šedé odstíny, které zůstávají mimo dosah designu. Střední až kulaté bezpatkové patky jsou oblíbené pro čitelnost a neutrální designový dojem.
Omezte také počet typů písma. Pro většinu karetních projektů stačí jediné písmo. Zvažte použití tučné variace, ale ve většině případů jsou rozdíly ve velikosti vše, co potřebujete, abyste text co nejlépe využili. (Když jste u toho, ujistěte se, že také omezíte počet slov. Jedna myšlenka na kartu.)
Zahrňte neočekávaný detail
Rozhraní ve stylu karty jsou často přímočará, přidání nečekaného detailu mu však dá jen to správné množství vkusu. Zvažte výřez oříznutého nebo rohového výřezu, šikmou hranu nebo 3D efekt, abyste zvýraznili karty.
Stejně potěšující mohou být i jiné techniky, jako jsou barevné překryvy nebo efekty přechodu. Zvažte také přidání efektu pouze k nejvýznamnějším bitům obsahu, aby každá karta nebyla z hlediska vizuální váhy úplně stejná.
Vytvořte otevřenou mřížku
Tento by mohl být nejtěžším konceptem, jak se obejít, v závislosti na tom, jak se váš návrhový projekt spojí. Stejně důležitý jako design každé karty je „vnější“ prostor mezi jednotlivými prvky.
Vytvořte mřížkový rámec, který obsahuje určitý typ kontrastu s každou kartou. Navrhněte rámec tak, aby mezery byly shodné od karty ke kartě a aby mezi jednotlivými prvky bylo dostatek prostoru. To se může ještě více uplatnit, když přemýšlíme o tom, kde by body přerušení mohly spadat do responzivního rámce, zejména u karet s pevnou šířkou.
Zvažte použitelnost
Karta by měla být více než jen konstrukčním prvkem; mělo by to uživateli pomoci provést nějaký typ akce. Od čtení příběhu nebo článku až po registraci e-zpravodaje nebo nákup, rozhraní karty by mělo zajistit snadnou interakci.
Zvažte, jak tyto interakce fungují. Jděte za klik. Mnoho návrhových projektů s kartami bude spotřebováno na mobilních zařízeních. Zvažte interakce, které používají spíše klepání a přejetí než tradiční kliknutí. Zajistěte, aby tlačítka nebo akce byly snadno viditelné a proveditelné, včetně dostatečného prostoru mezi objekty, které se budou snadno dotýkat a bez aktivace nesprávného prvku.
Závěr
Designové projekty ve stylu karet jsou zábavné, trendy a funkční. Použití některých základních principů designu vám pomůže vytvořit balíček karet, který je esteticky příjemný a funkční.
Myšlenka číslo 1, kterou je třeba mít na paměti, je jednoduchost. Vše o designu karty by mělo být snadno čitelné a srozumitelné. Hodně štěstí s vaším projektem!
