3 Trendy základního návrhu, prosinec 2017
Všechny tři důležité měsíční vývojové trendy souvisí s typografií. A trendy ukazují některé hezké způsoby, jak používat krásný typ pro vytváření interakcí s uživatelem a udělat skvělý první dojem.
Jedním společným tématem mezi těmito návrhy je, že všechny typografické styly jsou vysoce čitelné. Pokud plánujete pracovat s více trendovým nebo funky textovým prvkem, zvolte typ písma, který uživatelům nebude chybět čtení. Moderní technika je trikem s těmito návrhy, nikoli samotným písmem.
Zde je to, co je v tomto měsíci trendem:
1. Stačí napsat nad rolovacím kolečkem
Zatímco skvělý obrázek může pomoci uživatelům přitáhnout design, někdy jsou správné slova a prostor lístek.
Klíčem k tomu, abyste co nejvíce využili tento návrhový trend, je upřesnit vaši zprávu. Slova musí být jednoduchá, říkat něco smysluplného a vytvořit hodnotu pro uživatele.
Tak jak to děláš?
- Začněte klíčovou frází. Může to být vaše poslání nebo hodnotová nabídka pro uživatele. Řekněte uživatelům, co přinášíte ke stolu a proč jsou pro ně důležité vaše webové stránky.
- Vyberte jednoduchý typ písma, který má stejnou náladu jako zprávy pro delší bloky kopií.
- Pokud je textový blok krátký, například s Typy typů , zvážit možnost typového typu pro kreslení uživatelů.
- Využijte co nejvíce místa. Všimněte si, že v každém z níže uvedených příkladů má text dostatek prostoru pro dýchání, což usnadňuje čtení na první pohled. Prostor může také pomoci vytahovat oko do textu a vyvážit textové prvky, pokud nechcete, aby se na obrazovce stočily, například Design Ups .
- Pomocí barvy můžete přidat vizuální zájem. Jasné, trendové odstíny mohou pomoci uživatelům přitáhnout do designu. Barva může také pomoci nastavit náladu, která koreluje se zprávami.
Při práci s konstrukcí těžkého typu nepoužívejte ho. Někdy nebudete mít dostatek textu pro vyplnění celé obrazovky. Méně + více a Typ typu použijte zablokování barvy pro vytvoření více panelů, které jsou perfektně dimenzovány pro obsah textu.
2. Text v bílých rámečcích
S tolika odvážnými vizuálními prvky v projektech designu webových stránek - a tolik reagujících bodů na vyřešení bílé krabice se znovu objevuje jako kontejnerový prvek pro text. Bílé krabice s tmavým textem uvnitř mohou zajistit čitelnost, pokud jde o zasílání zpráv na horní části fotografií, videa nebo ilustrací, kde dochází k rozdílu barev.
A zatímco tento trend může trochu znít, dobře ... nedbalý nebo líný, ve skutečnosti vypadá skvěle, když je dobře.
Nemůžete jen klepnout na krabici kdekoli na obrázku a doufat, že to bude nejlepší. Bílé krabice je třeba umístit strategicky tak, aby nezahrnovaly důležité části obrazu a aby se uživatelé při pohybu při návrhu dívali na ně.
Bílé krabice musí být dostatečně velké, aby obsahovaly dostatečné množství textu a měl by mít plán na tento prvek na menších obrazovkách, například umožnění, aby vše v textovém poli kleslo pod hlavní obrázek. Nepokoušejte se položit textové pole na obrázek na menších obrazovkách, protože skončíte s textovým rámečkem, který je příliš malý na to, aby mohl číst, nebo bude box pokrývat většinu obrazu samotného.
Pokud máte potíže pro léčbu bílé krabice, bavte se. Každý z níže uvedených příkladů používá bílé krabice zcela odlišnými způsoby.
Do vesmíru střílí bílý rámeček do spodního rohu obrázku, takže je většina obrazu viditelná. Bílá krabička krvácí do bílého prostoru pod ním, takže téměř vypadá, že vypadá z panelu níže. Tato technika pomáhá spojit hlavní posuvník s obsahem níže (a může dokonce povzbudit rolování).
Jak to používá kruhové bubliny tak, aby bílé textové rámečky lépe odpovídaly tónu pozadí obrázku. Tento jemný posun ve tvaru, takže krabice vypadají více tekuté, pomáhá spojit prvky tak, aby boxy a pozadí měly konzistentní pocit. Nechcete, aby se bílé rámečky pro text cítily jako náhodně umístěné na pozadí. (To nefunguje a nepomůže vytvořit soudržný pocit pro uživatele.)
Macaulay Sinclair má více textu než ostatní příklady pomocí jedné části mřížky obrazového panelu pro přidržení textového prvku. Tady obrázek za bílým rámečkem nemá žádnou informační hodnotu. Má barevnou a pohybovou schématu, která vypadá podobně jako ostatní obrázky a většinou slouží k vytvoření soudržnosti mezi textovým prvkem a zbytkem návrhu.
3. Typografické výřezy
Nikdo nikdy neřekl, že text musí být řada plných dopisů. Více návrhářů se rozhodlo pro typografické výřezy, které obsahují barevný blok nad obrazem, takže obraz přichází přes jasné písmo.
Tato technika může pracovat s statickými nebo pohyblivými obrazy a s celoplošnými překryvy, takže jen malé množství informací přichází přes písmena (skoro pro vytvoření textury) nebo s větším stylem blokování přes obraz s větším počtem obrázků na pozadí viditelné.
Trik na tuto práci je správný typ písma. Písmena musí mít dostatečně tlusté tahy, aby viděly obraz nebo texturu na pozadí. Nemůžete to udělat s tenkým nebo kondenzovaným písmem s jakýmkoli trvalým úspěchem.
Tato technika také funguje nejlépe, pokud je počet slov a písmen značně omezen. Dodržujte jedno až tři slova s 10 nebo méně písmen nebo použijte velmi běžné slova, která uživatelé na první pohled vědí.
Danbury používá jako výkres jasný textový výřez, který povzbuzuje uživatele, aby se zapojili do videohovoru k akci. Celá oranžová krabička je jen obrovské tlačítko.
Fusion Winery používá v nápisu pozadí video vinice. Co je v tomto designu skvělé, je efekt třívrstvé vrstvy: Video pozadí pod bílým výřezem textu pod obrázkem produktu.
Kaneko použije neidentifikovatelný obrázek jako výplň písmen. Pokud se rozhodnete pro tento styl, udržujte toto pozadí jednoduché, jak tomu bylo u tohoto designu. Je tu jen dotek barvy a textura, která přitahuje oko k textu na ostré plátno.
Závěr
Sbírka poskytuje inspiraci pro projekty, které nemusí mít skvělý obrázek nebo video, takže můžete stále najít způsob, jak vytvořit něco, na které budou uživatelé reagovat. Nebojte se používat text jako vizuální a informační prvek v tomto designu.
Jaké trendy teď milujete (nebo nenávidíte)? Ráda bych viděla některé webové stránky, které vás fascinují. Pusť mi odkaz na Twitteru ; Ráda bych vás slyšela.