[Tutoriál] → Návrh úvodní sekce zabere běžně i 3 hodiny. Ukážu ti, jak ji zvládnout za 6 minut
1/ Na pozadí z barevného přechodu si zobraz 12sloupcovou mřížku. Sloupec široký 64 px a mezera 32 px. Nejsou to náhodné hodnoty. Rád tě naučím, jak je zvolit.
Na mřížku umísti logo, navigaci a akční tlačítka.
2/ Popiš, o čem služba je. Zdůrazni výhody. Nemluv o tom, co služba umí. Mluv o tom, co zákazníkovi přinese.
Pracuj s velikostními odsazovači, které se odvíjí od typografie a na základě 8px gridu.
3/ Přidej vizuál, který zaujme oko a podpoří myšlenku. Odvaž se. Buď kreativní. Existují milióny kombinací. Míchat k sobě můžeš nespočet stylů. Vezmi si 3 inspirace a prolni je.
4/ Vizuálně celou sekci spoj. Použij křivku, která vede oko a různě velké tečky, které znázorňují pohyb. Říká se tomu Princip jednotného propojení. Jeden z Gestalt principů. Často ho zmiňuji v rozborech webů, které 2x měsíčně posílám odběratelům.
5/ Přidej do vizuálu hloubku. Přidej rozmazané průhledné barevné kruhy na pozadí. Vytvoř pod objekty stín a získej 3D efekt.
6/ Doplň do sekce další obsah. Prvky zarovnej k mřížce. Hrany objektů by na sebe měly navazovat. Krásně tak celý design propojíš.
👍 Hotovo!
Pro tutoriál jsem použil:
- Námět na „fake“ web vymyslel ChatGPT.
- Smyšlené logo jsem vytvořil s Looka.
- Pro typografickou stupnici jsem použil Type Scale.
- Fotografie je z Pexels.
- Barevné přechody vygeneroval Mesh.
- Šum jsem vytvořil s pluginem Noise & Texture.
- Free fonty Prata a Roboto jsem použil z Google Fonts.
- Vytvořeno ve Figma.
Designui—Jediné místo pro designéry webů a aplikací
Na Designui najdeš:
- → Lekce pro designéry,
- → nabídky práce pro UI/UX designéry (inzerce pracovních pozic, pracovní nástěnka s mikro-zakázkami),
- → seznam česko-slovenských designérů pro tvůj projekt.
Spolupráce?
Chceš se mnou pracovat? Je jedno, jestli jsi jednotlivec nebo velká firma. Pomůžu ti s:
- → Návrhem webu nebo appky.
- → S texty do webu nebo appky.
- → Nebo vytvořím web na Webflow.
Napiš mi zprávu na → https://www.lukasaugusta.cz 👋
