====== Základy UI a UX designu ======

V digitálním světě rozhoduje o úspěchu aplikace to, jak snadno se používá a jaký z ní má uživatel pocit. **UX** (User Experience) se stará o celkovou logiku a prožitek, zatímco **UI** (User Interface) řeší konkrétní vizuální prvky, se kterými uživatel interaguje.



===== 1. UX Design: Uživatelský prožitek =====

UX design je proces tvorby produktů, které poskytují smysluplné a relevantní zážitky. Jde o to pochopit potřeby uživatele a odstranit mu z cesty všechny překážky.

==== Klíčové fáze UX procesu: ====
  * **Výzkum (User Research):** Analýza cílové skupiny pomocí dotazníků, rozhovorů a tvorby **Person** (fiktivních profilů typických uživatelů).
  * **Informační architektura:** Logické uspořádání obsahu webu tak, aby uživatel nic složitě nehledal.
  * **Wireframing (Drátěné modely):** Jednoduché skici obrazovek bez barev a grafiky, které se soustředí čistě na rozvržení prvků.
  * **Uživatelské testování:** Sledování reálných lidí při používání prototypu a identifikace míst, kde tápou.



---

===== 2. UI Design: Uživatelské rozhraní =====

UI design se zaměřuje na vizuální stránku produktu. Je to to, co uživatel vidí – barvy, písmo, tlačítka, ikony a animace.

==== Základní prvky UI: ====
  * **Vizuální hierarchie:** Uspořádání prvků tak, aby oko uživatele nejdříve dopadlo na to nejdůležitější (např. výrazné tlačítko „Koupit“).
  * **Typografie:** Výběr písem, která jsou čitelná na různých typech displejů.
  * **Barevná schémata:** Použití barev k vyvolání emocí a odlišení funkcí (např. červená pro chybu, zelená pro úspěch).
  * **Responzivita:** Zajištění, aby rozhraní vypadalo skvěle na mobilu, tabletu i desktopu.



---

===== 3. Zlatá pravidla designu (Heuristiky) =====

Existuje několik osvědčených principů, které by měl každý designér dodržovat (např. podle Jakoba Nielsena):

  * **Konzistence:** Stejné akce by měly mít v celé aplikaci stejnou podobu (např. všechna potvrzovací tlačítka mají stejnou barvu).
  * **Zpětná vazba:** Uživatel musí vždy vědět, co se děje (např. animace načítání, když se data stahují).
  * **Prevence chyb:** Design by měl uživateli zabránit v udělání chyby dříve, než k ní dojde (např. zešedlé tlačítko, dokud nejsou vyplněna všechna pole).
  * **Minimalismus:** Méně je více. Nepřetěžujte uživatele zbytečnými informacemi.



---

===== 4. Nástroje pro designéry =====

Moderní design se dnes netvoří v grafických editorech typu Photoshop, ale v nástrojích specializovaných na vektorové prototypování:
  * **Figma:** Aktuální standard, umožňující spolupráci více lidí v reálném čase v prohlížeči.
  * **Adobe XD:** Komplexní nástroj od Adobe pro návrh UI/UX a animace.
  * **Sketch:** Oblíbený nástroj pro macOS s velkým množstvím doplňků.

---

===== 5. Vztah UI/UX k vývoji =====

Design není konečným produktem. Designér musí úzce spolupracovat s vývojáři, kteří jeho návrh převedou do [[it:dev:web_tech|HTML, CSS a JavaScriptu]]. Pro usnadnění této spolupráce se vytvářejí tzv. **Design Systemy** – knihovny hotových komponent, které zajišťují, že výsledek odpovídá návrhu.

----
//Související články://
  * [[it:dev:web_tech|Webové technologie (HTML, CSS, JS)]]
  * [[it:dev:oop|Objektově orientované programování]]
  * [[it:dev:agile|Metodiky vývoje (Scrum, Kanban)]]

//Tagy: {{tag>design ux ui figma web_development usability accessibility}}//