10 Příkazů Web Design pro každý projekt
Máte knihu pravidel, pokud jde o návrh webových stránek? Existují některá pravidla, která se vztahují téměř na každý projekt webového designu - řekněme jim „příkazy webového designu“.
Bez ohledu na to, jak velký nebo malý je web, tato pravidla jsou základem dobrého designu. Pokud budete postupovat společně s těmito základními pokyny a učiníte je součástí vašeho myšlení pro každý projekt, který zahájíte, vyhnete se mnoha nástrahám, do kterých mohou návrháři narazit!
1. Budeš důsledný
Usnadněte uživatelům návrh, aby s nimi mohl komunikovat Konzistentní design je snadno použitelný a pochopitelný design. Interakce a akce uživatelů, stejně jako vizuální, by měly mít podobný vzhled a použití v rámci jednoho návrhu.
To znamená, že tlačítka mají stejnou barvu a používají stejné stavy vznášení, které uživatelům pomáhají vědět, jak komunikovat, titulky mají stejnou velikost a používají stejný typ písma v celém návrhu, a prvky, jako jsou barvy, následují paletu, která je identifikovatelná a spojená s značka.
Jiné vizuální prvky by také měly dodržovat jednotný styl, stejně jako styl a plán použití prvků, jako jsou ikony nebo fotografie, video nebo ilustrace. Návrh by měl mít hlas, který se používá pro kopírovací bloky, které odpovídají celkové estetice.
Všechny tyto prvky konzistence přispívají k celkové použitelnosti, díky čemuž je návrh pro uživatele co nejjednodušší.
2. Budete používat mezeru
Další prostor kolem prvků může pomoci vytvořit oddělení a usnadnit jejich čtení. Není třeba napěchovat každý jednotlivý prvek do prostoru nad svitkem. Pomocí mezery vytvořte rytmus a tok, vytvořte vizuální hierarchii a pomozte uživatelům procházet návrhem.
Pokud je obsah dobrý, posouvají se.
A mezera může ve skutečnosti pomoci povzbudit tuto akci uživatele tahem oka dolů po obrazovce.
Mezera je ještě důležitější, protože velikost obrazovky se zmenšuje. Další prostor kolem prvků může pomoci vytvořit oddělení a usnadnit jejich čtení. (Přemýšlejte o tom, jak prospěšné může být trochu více místa, pokud jde o klepání na tlačítka s lehkostí.)
Nejste si jisti, kam do návrhu přidat mezeru? Začněte zde:
- Kolem tlačítek nebo jiných interaktivních prvků
- Jako řádkování mezi řádky typu usnadňuje čtení
- Mezi elementy tak tings jsou na východ rozlišit, jako je obtékání na fotografie vložené do textových bloků
- Ve formulářích pole lze snadno klepnout na mobilní obrazovky
- Kolem jakéhokoli prvku, na který se uživatelé mají zaměřit
3. Budete používat mřížku
Mřížka je základem uživatelské zkušenosti. Při navrhování pomocí mřížky je finální web přesnější, konzistentnější a prvky jsou uspořádány v pořadí, které dává vizuální smysl.
Mřížky jsou jak vodorovné, tak svislé, i když nejznámější mřížkou pro návrh webu může být vertikální mřížka sloupců s 12 sloupci pro zarovnání prvků.
Mřížka je něco, co vidíte pouze v procesu návrhu, a pokud máte potíže s hledáním umístění pro prvky nebo vytvořením organizovaného obrysu, mřížka může být úplným záchranářem.
4. Nezapomenete uživatelské vzory
Uživatelé dělají věci určitým způsobem a očekávají od vašeho návrhu konkrétní věci. Aby bylo dosaženo co největšího úspěchu, měl by design používat běžně přijímané uživatelské vzorce (opakující se řešení problémů s designem), aby lidé přesně věděli, jak design funguje.
Mezi běžné uživatelské vzorce patří:
- Pořadí informací ve formulářích, počínaje jménem nebo e-mailem a končící slovy „odeslat“
- Umístění navigačních nabídek
- Umístění a klikatelná povaha ikony nákupního košíku pro elektronický obchod
- Jak oznámení fungují
- Ikony pro vyhledávání a chat, mimo jiné
Návrhové vzory UI mají dlouhý seznam uživatelských vzorů pro všechny typy návrhových situací.
5. Budete používat podobnost v akcích uživatelského rozhraní
Každý prvek v designu webových stránek by měl fungovat jako každý jiný prvek stejného typu. Tyto prvky by také měly mít vizuální identitu, aby uživatelé věděli, co jsou a co na první pohled dělají.
Existuje tolik akcí uživatelského rozhraní, které mohou být zabudovány do designu, který musí dodržovat Gestaltův princip podobnosti. Seskupení vizuálních prvků a akcí tak, aby byly vizuálně identifikovatelné, pomůže uživatelům vytvořit lepší celkový dojem.
6. Dobře použijete typografii
Krok zpět od návrhu a zjistit, zda je nápis snadno čitelný z dálky. Nemusíte být mistrovským typografem, ale rozhodně to pomůže.
Tolik z toho, co tvoří dobrý design, má kořeny ve čitelnosti a čitelnosti. A tyto koncepty závisí na tom, jak si vyberete a používáte písma.
Pokud máte pochybnosti, rozhodněte se pro jednoduché dvojice typů písma, jako je serif a bezpatkové. Krok zpět od návrhu a zjistit, zda je nápis snadno čitelný z dálky. Pak se podívejte na nápisy na malém plátně, například na obrazovce telefonu, abyste se ujistili, že je také snadno na první pohled čitelné.
Zkuste použít typ v prostředí s vysokým kontrastem, jako je typ světla na tmavém pozadí nebo tmavý typ na světlém pozadí, aby bylo každé slovo snadno čitelné.
7. Nezapomeňte na sítnice
Dokonce i ty nejmenší obrazovky dokážou vykreslit prvky a obrázky s dokonalostí v pixelech.
Musíte zvážit, jak budete manipulovat s obrázky, ikonami a dalšími prvky, aby se vše zobrazovalo krásně bez ohledu na velikost obrazovky. Pokud je to možné, použití vektorového formátu může být ideálním řešením, což je jeden z důvodů, proč SVG neustále roste v popularitě.
Pokud nemáte obrázek, který má rozlišení vhodné pro běžné velikosti obrazovky, nepoužívejte jej. Žádný obrázek není lepší než špatný nebo pixelovaný obrázek.
8. Budeš čestný
Váš design by měl být věrný vašemu malému podnikání, informacím nebo značce a měl by být transparentní v tom, co děláte. Neukradejte design ani obrázek, nenamáhejte falešná klíčová slova, která zvyšují návštěvnost, a věřte tomu, kdo a jaký je váš obsah.
S tolika nepořádky na webu uživatelé chtějí komunikovat s autentickými vzory. Nabádání uživatelů k tomu, aby něco udělali nebo se zaregistrovali k produktu nebo službě, nebo je pouze uvedli v omyl ohledně tématu nebo informací, by mělo být v rozporu s vaším osobním etickým kodexem. Neberte projekty, které to od návrhu očekávají.
9. Nebudete ignorovat dostupnost
Web by měl být použitelný co nejvíce lidmi. A i když to může znít obtížně, aby byl návrh přístupný, není to tak složité, jak si myslíte.
Google má skvělého průvodce přístupem na web, který definuje takto:
Obecně řečeno, když říkáme, že je web přístupný, máme na mysli, že jeho obsah je k dispozici a jeho funkčnost může ovládat doslova kdokoli. Jako vývojáři lze snadno předpokládat, že všichni uživatelé mohou vidět a používat klávesnici, myš nebo dotykovou obrazovku a mohou s obsahem vaší stránky komunikovat stejným způsobem. To může vést k zážitku, který funguje dobře pro některé lidi, ale vytváří problémy, které sahají od jednoduchých nepříjemností až po zastavení show pro ostatní.
Přístupnost se tedy vztahuje na zkušenosti uživatelů, kteří by mohli být mimo úzký okruh „typických“ uživatelů, kteří by mohli přistupovat k věcem nebo s nimi interagovat jinak, než očekáváte. Konkrétně se týká uživatelů, kteří trpí určitým typem poškození nebo zdravotního postižení - a mějte na paměti, že tato zkušenost může být nefyzická nebo dočasná.
K celkové dostupnosti přispívá mnoho zásad dobrého designu, jako je velikost, kontrast a prostor.
WebAIM má kontrolní seznam a další nástroje, které vám pomohou určit, zda je váš návrh přístupný. Kontrolní seznam pokrývá čtyři oblasti související s přístupností: Je návrh vnímatelný, ovladatelný, srozumitelný a robustní?
10. Budeš reagovat
V roce 2018 by to mělo být samozřejmé, ale váš web musí reagovat. To zahrnuje každý prvek, od textu po obrázky, tlačítka až po celkovou strukturu.
Každý design musí fungovat na každém zařízení. Doba.
Závěr
Pevná sada pravidel vám může pomoci rychleji se dostat do návrhového projektu a pracovat důsledněji. Všimněte si, že žádné z těchto přikázání vám neříká, jak by měl projekt vypadat; jsou zakořeněny v teorii toho, jak nastíníte a vytvoříte jednotlivé webové stránky.
Máte k těmto přikázáním další pravidla pro webový design? Dejte nám vědět, co jsou na sociálních médiích. Jen nezapomeňte označit Design Shack!
