7 Pravidla pro vytvoření jednoduchého designu
Nech to být jednoduché, hloupé. Tato koncepce se datuje do roku 1960, kdy americké námořnictvo implementovalo princip KISS, který tvrdí, že většina systémů funguje nejlépe, jsou-li jednoduché, spíše než komplikované. Totéž platí o téměř všech designérských projektech.
Většina grafiků se o KISS dozví brzy na začátku své kariéry. Jak na to? Vytvoření jednoduchého designu je o něco složitější, než si možná myslíte. Zde je sedm pravidel, podle kterých můžete navrhnout, které vám pomohou odříznout všechny nepořádky a vytvořit krásně jednoduchý účet.
Prozkoumejte zdroje návrhu
1. Nastavte jeden cíl na stránku
Začátek jednoduchého designu začíná s cílem projektu a konkrétními cíli pro každou stránku webu. Každá stránka by měla vést uživatele k jedné akci, kromě navigace a zápatí.
Může to být cokoli od kliknutí na odkaz, zadání informací ve formuláři, sledování videa nebo hraní hry. Každá stránka by se však měla zaměřit na jednu akci uživatele nebo konverzi.
Příliš mnoho věcí, které můžete udělat, může uživatele ohromit. Mohou ztratit ze zřetele, jaké akce by měly být dokončeny, a mohou učinit méně žádoucí volbu. Navrhněte design tak, aby každá stránka vedla uživatele k jednomu cíli. Každé funkční tlačítko nad posuvníkem a pod posuvníkem na stejné stránce by mělo dělat to samé. Tato konzistence pomáhá uživatelům pochopit, proč jsou na vašem webu a co mají dělat; jednoduchost těchto možností činí design snadným a poutavým.
2. Držte se dvou typů rodin
Existuje tolik návrhových pokynů, které doporučují tři písma pro projekt. To můžete ještě více zjednodušit dvěma robustními rodinami typů.
Hledejte rodinu typů, která obsahuje více závaží s velkým kontrastem mezi běžnými a výraznými nebo černými možnostmi. Chcete-li dosáhnout ještě většího vkusu, rozhodněte se pro výběr displeje, který obsahuje několik alternativních znaků, které můžete použít v nadměrných nadpisech.
Pak stačí jen promíchat a porovnat písmo těla a zobrazit písmo, abyste získali skvělou kombinaci písma pro celý design. Použijte dvě rodiny typů stejně jako byste, pokud jste vybrali více možností s konkrétním použitím pro určité váhy nebo styly.
Zjistíte, že vám to pomůže vytvořit vysoce čitelnou a snadno použitelnou typografickou paletu, která se snadno spravuje a má vizuální konzistenci.
3. Použijte konzistentní zarovnání
Vlevo, na střed nebo dokonce napravo - bez ohledu na to, jak se vám líbí, držte se toho v celém designu. To zahrnuje zarovnání podobných položek, jako jsou textová pole a prvky, které nejsou podobné, ale hodí se dohromady do seskupení.
Adaptable to dělá skvělou práci s textem na domovské stránce jezdce. Přes text s různým počtem řádků na obrázku se každý nadpis zarovná s tlačítkem výzvy k akci. Rozestup mezi prvky je také konzistentní.
A co víc je to, že toto konzistentní zarovnání prochází na svitku s ostatními páry nadpisů a CTA.
Zarovnání odpovídá toku jezdce, který se také pohybuje doplňkovým směrem. Zarovnání doleva a středu jsou nejčastějšími možnostmi textových prvků, protože jsou nejčitelnější. U delšího textu je upřednostňovanou možností zarovnání doleva.
4. Založte hierarchii
Uživatelé by neměli přemýšlet o tom, na co se mají dívat nebo jak se pohybovat napříč designem. I nejjednodušší vizuální kompozice by měly mít odlišnou hierarchii.
Začíná to dominantním vizuálem. Může to být obrázek nebo video nebo textový displej nebo cokoli jiného, co udělá první dojem.
Pak by měl existovat nějaký text, který řekne uživateli, co se design a web snaží komunikovat. To je obvykle ve formě jednoduchého nadpisu, který pracuje s dominantním vizuálem.
Třetí je sekundární kousek textu nebo akce, kterou mohou uživatelé dokončit. Posledním vizuálním prvkem je navigační nabídka. Uživatelé očekávají, že najdou všechny tyto prvky a oko je vyškoleno, aby se pohybovalo těmito elementy v zásadě v tomto pořadí. Usnadněte jim tím, že budete takto navrhovat.
5. Dejte elementům dostatek prostoru
Pokud to ještě nevíte, věnujte to paměti: Prázdný prostor je váš přítel.
Dejte každému prvku v designu dostatek prostoru. Prostor pomůže upoutat pozornost na jednotlivé prvky, zabere „prostor“, takže se nemusíte pokoušet plátno proměňovat a pomůže vám vytvořit celkový design, který se soustředí.
Trik s využitím prostoru dobře je konzistence. Nastavte pravidla pro velikost prostoru, který bude obklopovat jednotlivé prvky nebo se bude shodovat mezi řádky textu. Pokud návrh skončí vypadat příliš neplodně, možná budete muset trochu oddálit mezeru. Když otevřete nový design, budete vědět, že mezery jsou správné a jdete přímo na místa, která uživatelé chtějí vidět jako první. (Nejste si jisti, co to je? Vraťte se k č. 4 - Vytvořte hierarchii.)
6. Zesílení kontrastu
Designové prvky s vysokým kontrastem - od výběru barev až po velikost prvků - mohou poskytnout projektu přesně tu vizuální jemnost, jakou potřebuje, a to i v těch nejmenších rámcích.
V případě trendové možnosti zkuste jasnou kontrastní paletu barev, abyste upoutali pozornost uživatelů. Výrazné barvy způsobí, že jednoduchý design bude složitější a zajímavější než černobílá varianta. Chcete-li co nejlépe kontrastovat s barvou, rozhodněte se pro odstíny z opačných pozic na barevném kolečku s podobnými saturacemi. Pokud je tato možnost příliš pro vaše přání, vyzkoušejte jiné páry založené na barevných kolech. (Můžete dokonce najít neočekávanou novou oblíbenou položku, jako je fialová a šedozelená kombinace výše.)
7. Používejte konzistentní ikony a prvky
Soulad v designu je jedním z nejlepších (a nejhorších) tajemství zabijáckého designu. Je to jedna z těch věcí, která se příliš často zapomíná, protože designové projekty jsou poseté několika styly tlačítek nebo ikonami sociálních médií, které prostě neodpovídají zbytku ikonografie na webu.
Prvky uživatelského rozhraní by neměly být dodatečně promyšleny.
Je důležité vytvořit sadu ikon a pravidel prvků uživatelského rozhraní a pravidla a používat je stejným způsobem v celém projektu. (Můžete si dokonce koupit nebo stáhnout ikonu písma nebo sadu prvků uživatelského rozhraní, pokud je nechcete vytvářet od nuly.)
Vyberte barvu pro prvky, použijte stejnou akci nebo efekt přechodu pro každý (jeden pro elementy, na které lze kliknout, a druhý pro elementy, které nejsou) a velikost prvků na základě použití. (Je přijatelné mít velikost ikon i nadměrnou velikost pro prvky, které jsou trochu grafičtější.)
Prodejní automaty Praticca používají nadrozměrné ikony, například pro upozornění uživatelů v tom, že existuje více informací. + Se nachází uvnitř barevné ikony. Všechny tři ikony jsou kromě barvy identické. Všichni dělají totéž na vznášení a všichni jednají stejným způsobem, když uživatel klikne. Stejná ikona se na webu používá menší k zahájení nových bitů obsahu a pomáhá uživatelům skenovat kopii.
Závěr
Jednoduchý design nemusí být zcela minimální nebo postrádat zábavné prvky nebo dobroty uživatelského rozhraní. Jednoduchý design je vysoce použitelný a intuitivní, umožňující uživatelům zapojit se bez otázek nebo složitých pokynů.
I když existuje místo pro složitější webové stránky nebo uživatelské interakce, většina návrhů webových stránek může těžit z přístupu KISS. Nepřeceňujte to a uživatelé nebudou muset ani.
