Komplexní a moderní UI design v nástroji Figma

Po několikaleté zkušenosti s prací v Adobe XD, se kterým jsem byl hodně spokojený, jsem přešel na Figmu, protože pro můj systematický styl práce má Figma mnohem více možností a nástrojů, které mi denně pomáhají s tvorbou všech možných projektů.

Méně klikání, více tvoření

Figma je velmi univerzální, v jádru však zůstává hlavně nástrojem pro tvorbu uživatelských rozhraní, ať už to jsou webové nebo mobilní aplikace. Figma za vás nevyřeší kreativní část práce, ale udělá za vás rutinu, a vám tak zbyde víc času a energie na tu zábavnější část designérské práce.   

Styly, komponenty, auto layout

Já se specializuji na design webových aplikací. Baví mě optimalizace práce a zefektivnění mého workflow. Figma na to má spoustu funkcí. Ne všichni je ale umí naplno využívat. Designéři často tvoří design “po staru”, bez využití stylů, komponent, auto layoutu a dalších vychytávek, které pomáhají dělat design "živým" a interaktivním. 

Pod pokličkou kódování

Plnohodnotné využití Figmy vám pomůže lépe pochopit i to, jak se vaše návrhy následně kódují do šablon. Budete tak lépe přemýšlet nad svým designem, protože budete vědět, jak se budou chovat jednotlivé bloky vašeho layoutu a jak je co nejlépe připravit pro následnou realizaci. 

Řád a konzistence

Nestačí jenom vědět, co všechno Figma umí. Potřebujete na reálných situacích pochopit, co za vás může Figma vyřešit a jak vám to může ušetřit spoustu času a posunout váš návrh na novou úroveň. Už vám nebudou ulítávat pixely a vaši kódeři si nebudou trhat vlasy a zasypávat vás svými dotazy. 

Jenom praxe

Připravil jsem workshop, ve kterém chci na reálném projektu ukázat vznik návrhu webových stránek krok po kroku. Celý proces od bílého framu po design responzivních šablon. Detailně probereme každý krok, všechno si vysvětlíme a ukážeme. Kromě designu vzorového webu uděláme i revizi vašich projektů, odhalíme nedostatky a rovnou zapracujeme na vylepšení. 

Obsah workshopu

Budeme spolu od úplného začátku navrhovat web v nástroji Figma. Ukážeme si práci s gridem. Nastavení framu a pokročilé práce s auto layoutem. Interaktivní komponenty, včetně variant, animací a rozšířených funkcí. Využití stylů barev, textů a efektů. Tvorbu styleguide a její využití v praxi. Ukážeme si šikovné pluginy, které mi ulehčují práci.

Probereme prototypování a prezentaci vašeho designu.

Na workshopu bude prostor na revizi vašich návrhů s mou zpětnou vazbou. To, co se v průběhu workshopu naučíme, rovnou vyzkoušíme ve vašem designu. 

Po workshopu budete mít jasno, proč se Figma stala nejoblíbenějším nástrojem mezi UI designéry a že toho možná umí mnohem víc, než jste si mysleli, a hlavně se naučíte její skvělé funkce využívat denně při své práci. 

Autor workshopu

Jmenuji se Sergey, jsem spoluzakladatel a kreativní ředitel digitální agentury Proidea.digital. UI designu se věnuji od roku 2007. Od té doby mi pod rukama prošlo přes 500 designů firemních webů, e-shopů a webových aplikací. Spolupracuji s koncovými zákazníky a agenturami jako samostatný designér i jako součást širších týmů. Zadávám a řídím projekty s dalšími designéry, což mi umožňuje nahlížet na UI design z mnoha úhlů. Od roku 2018 píši blog pro digitální designéry a pořádám užitečné kurzy a workshopy pro UI designéry.

Showreel:

Sledujte mě

Píši blog o designu - https://sergeypetukhov.cz/design

Práce - https://www.proidea.digital

Instagram - https://www.instagram.com/sergeypetukhov

Youtube - https://www.youtube.com/user/SergioLaDrak

TikTok - https://www.tiktok.com/@sergeypetukhovcz

Facebook - https://facebook.com/sergeypetukhovbloger

Twitter - https://twitter.com/SergeyPetukhov4

LinkedIn - https://www.linkedin.com/in/sergey-petukhov-20502974