Pro naše projekty jsme vytvořili počáteční šablonu. Řekneme podrobnosti a na konci článku necháme odkaz.
Dobrý den! Jmenuji se Alexander Shchetinin. Jsem designérem v The Architect, digitální společnosti, která vytváří produkty a komplexní řešení pro vývojáře v digitálním prostředí.
Vytvořili jsme startovací šablonu pro naše projekty. Řekneme podrobnosti a na konci článku necháme odkaz.
K čemu je počáteční šablona?
Jeho účelem je systematizovat design. Tím se minimalizuje ztráta času – každý návrhář se může do projektu rychle ponořit.
Jak to bylo dříve
Každý designér vytvořil nový projekt ve Figmě a naplnil jej. Když se k projektu přidala jiná osoba, byl nucen neustále se ptát, kde je ten či onen prvek. Ztráceli jsme čas zbytečnou komunikací a hledáním.
Stejně jako teď
Existuje jasný systém jmen, velikostí obrazovek a komponent. Každý projekt má navíc svůj vlastní obal – všechny projekty v seznamu vypadají jednotně a stylově.
Na začátku projektu , návrhář duplikuje šablonu a začne vyplňovat všechny stránky v jednoduchých krocích.
Z čeho se šablona skládá
Obálka
Nebo obálka projektu. Zde vložíme logo klienta a název projektu.
Kreativní koncept
Před vytvořením webu vytvoříme kreativní koncept. Přemýšlíme nad tím, jak bude stránka odrážet poselství značky nebo projektu a prostřednictvím kterých prvků se informace přenášejí.
Návrháři shromažďují reference a popisují koncept. Můžete o tom napsat samostatný článek. Sledujte proto náš blog a sociální sítě – jakmile uvedeme do provozu naši metodiku hledání kreativního konceptu, okamžitě s vámi sdílíme životní hacky a postřehy.
Prototyp
V prototypu sestavíme budoucí strukturu webu, vytvoříme stránky, které budou použity, a naplníme je obsahem. Jinými slovy, vytváříme UX – uživatelský komfort.
Hlavním pravidlem je, že nemusíte vytvářet design z prototypu, vše by mělo být schematické. Úkolem je vygenerovat jasné rozhraní a adaptivní produkt, pak bude pro uživatele snazší dokončit cílenou akci.
Na konci musíme nastavit všechny odkazy na stránky, které představí prototyp klientovi.
Desktop, Tablet, Mobile
Navrhujeme na těchto stránkách. Existují zde pravidla – dávat názvy komponent, skupin a rámců. Další informace.
Sada uživatelského rozhraní
Sada obsahuje všechny prvky a součásti designu. Návrhář vytvoří pro každý projekt své vlastní komponenty a umístí je do rámců.
Stránka již obsahuje základní komponenty – vstupní pole, tlačítka, sadu standardních ikon, sadu písem pro počítač a telefon, sadu odsazení a standardní mřížku 1200 px.
Archiv
Archiv ukládá prvky a stránky, které se nepoužívají, ale nechcete je mazat. Například různé verze designu. Existuje zde pouze jedno pravidlo – v uspořádání potřebujete přísné pořadí.
Nuance, které potřebujete znát
Jak pojmenovat barvy
Název barvy, musíte použít vzorec „Kategorie/Název“.
Šablona již má potřebné standardní barvy:
motiv – hlavní designové barvy;
- primární – hlavní zvýrazňující barva,
- sekundární – sekundární barva,
- text – barva textu,
- šedá – šedá.
funkční – barvy, které mají funkční význam: „omyl“, „úspěch“;
značka – sada odstínů v kombinaci s hlavními rozsah;
přechody – přechody.
Jak pojmenovat textové vrstvy
Pro název barvy použijte vzorec kategorie/nadpisu.
Jaké velikosti rámečků použít
Používáme pět populárních obrazovek: 1280, 980, 640, 480, 320px.
O odsazeních
Soubor má základní komponentu – offset – obsahuje možnosti pro odsazení. Všechny jsou násobky 8px.
Jak používat startovací šablonu
Stačí zkopírovat šablonu, změnit název a začít ji vyplňovat.
Díky tomu jsme byli schopni systematizovat design a zrychlit pracovní tok díky připraveným komponentám a standardizaci. Ano, neobjevili jsme Ameriku, jen jsme ukázali, jak používáme Figmu. Pokud máte nějaké způsoby, jak dále optimalizovat proces navrhování vašeho webu a aplikace, budeme rádi, když se o nich dozvíte.
Přihlaste se k odběru přehledu návrhů od týmu Architect. V něm jednou za dva týdny sdílíme svá zjištění, školicí materiály a užitečné funkce.
Design Digest Jednou za dva týdny sdílíme skvělá zjištění, návody a užitečné funkce pro … letter.thearchitect.digital.tilda.ws
A na naši stránku Instagram 👋
