Důležitost UX a UI
Nemusí se to zdát, ale lidé knihu podle obalu soudí a v dnešní době víc než kdy dřív. Pokud tvá webová stránka nebude vizuálně zajímavá, ani přehledná, tak na ní člověk nevydrží ani pár sekund a zmáčkne šipku zpátky.
Moderní stránky už nejsou o pouhé funkcionalitě, právě naopak. Čím dál tím víc se propojují s marketingem a svým designem v podstatě bojuješ o pozornost návštěvníka.
Ready! Set! Go!
Ne tak rychle, ještě není čas psát kód. Jasně, každému vyhovuje jinačí postup a na ten svůj přijdeš časem. Každopádně u designu ze všech oborů platí nejvíc, že než začneš, tak se menší či větší přípravě nevyhneš.
Pokud začneš rovnou házet prvky do svého kódu, tak nejspíš skončíš frustrovaný tím, že nevíš, jak začít, a výsledek taky nebude zrovna ono, zvlášť pokud nemáš takové zkušenosti s webovkami. Zkus si nejdřív svůj nápad zakreslit, na to je dobrá Figma nebo klidně i tužka a papír.
Neboj se prototypovat
V praxi nejspíš dostaneš od svého klienta zadání. Není to ale pravidlem a tvůj klient ani nemusí být tak znalý ve vytváření webových stránek, takže jeho představa nebude vždy dávat smysl v reálném provedení. Samozřejmě klient by měl mít ale silné slovo a pokud ti jisté požadavky nedávají smysl, tak je s ním konzultuj.
Zkus se tedy zamyslet, co tvá aplikace nutně potřebuje, a na tom stav. Vytvoř postupně několik jednodušších návrhů. Důležité je se nezaseknout. Jednotlivé návrhy by ti neměly zabrat moc času na vytvoření a neměly by být extra propracované. Hlavní myšlenkou tohoto procesu je, že vytvoříš víc jednodušších návrhů a ten nejlepší později zpracuješ více do detailu.
A taky se neboj inspirovat! Poznat, že stránka vypadá dobře, zvládne každý. Jakmile takovou stránku najdeš, tak ji zkus zanalyzovat a zjisti, proč ti přijde tak přívětivá. A proč se omezovat jenom na stránky? Design je všude – plakát na zastávce, zajímavý polep na autobusu, podtácek v restauraci…
Dej svému designu duši
Stránka banky bude vypadat jinak, než stránka s hrami pro děti. Uprav vizáž podle cílovky na kterou chceš cílit. Hranatější písmo a zaoblení prvků působí více profesionálně, zatímco kulatější tvary dávají dojem hravosti a přátelství.
Barvy a jejich použití taky silně ovlivňují pocit, který návštěvník ze stránky bude mít. Zelená barva působí klidně a zdravě, červená zase energeticky. Jak personalizovat svoji stránku zvládneš většinou odhadnout podle pocitu. Pokud si ale nejsi jistý, tak se vždy můžeš podívat na stránky s podobnou cílovkou.
Bacha ale na barvy u “systémových” zpráv. U těch je standard, že červená značí nepovedenou / zakázanou akci, oranžová varování a zelená zdařilou / pozitivní akci.
Omez své možnosti
Pokud budeš pokaždé vybírat z 16 milionů barev, tak nejenže tvé barvy nebudou konzistentní, ale budeš plýtvat svůj čas. Na začátku si vyber několik vlastních barev a jejich odstíny a ty používej. Později je můžeš kdykoliv poupravit, nebo úplně změnit.
To stejné udělej s velikostí písma, velikostmi vnitřních a venkovních odsazení, odsazením nadpisu od textu, zaoblením rohů na prvcích, stíny pod tlačítky… Nedává smysl mít jednu mezeru 13px a druhou 14px. Pokud budeš mít obě stejně velké, tak tvůj design bude vypadat konzistentněji a zároveň budeš mít jednodušší rozhodování. Pokud si nechceš vytvářet vlastní sety, tak můžeš využít Tailwind CSS, který má tyto sety už předpřipravené a ty je můžeš jednoduše využívat jako třídy na svém webu.
Zkoumej, objevuj a zajímej se
Po přečtení tohoto článku z tebe určitě nebude profesionální UX / UI designer. Teď máš ale základní informace o tom, jak pracovat s UX a UI, a na tom můžeš stavět. Cílem tohoto článku bylo převážně ukázat ti, co je v tomto světě důležité, a ty tak teď máš jednodušší začátek a víš do čeho se ponořit.
© 2025 Student Cyber Games, z.s. – Vydáno pod licencí CC BY-NC-SA 4.0.