připomenutí předchozí hodiny a uvedení problému „Wireframe“. 5–12 min: stručná teorie – wireframe, hierarchie prvků, ovládací prvek, obsahová oblast. 12–18 min: společná ukázka prvního kroku a kontrolních kritérií. 18–36 min: samostatná práce nebo práce ve dvojici – Navrhnout dvě klíčové obrazovky programu nebo evidence v černobílém wireframu. 36–41 min: vzájemná kontrola podle zadání a oprava zjištěné chyby. 41–45 min: uložení výstupu (Dva wireframy), krátký exit ticket a pojmenování dalšího kroku.
Návrh uživatelského rozhraní · 45 minut
Wireframe
Žák vytvoří nízkodetailní návrh rozhraní bez předčasného řešení vzhledu.
00
ČASOVÁ OSA
Struktura 45minutové hodiny
01
VIDEO LEKCE
Ukázka a vysvětlení postupu
▶
Video je připravené k doplnění
Video ukáže princip, první kroky, kontrolu a typickou chybu. Nebude obsahovat celý hotový upravitelný úkol.
provider: youtube · youtubeId: ""02
STUDIJNÍ MATERIÁL
Výklad: z čeho se učíš
Dobré rozhraní vychází z potřeb uživatele, jasné navigace a ověřování prototypu, nikoli pouze z dekorativního vzhledu.
V hodině „Wireframe“ je hlavním cílem: Žák vytvoří nízkodetailní návrh rozhraní bez předčasného řešení vzhledu. Nejde pouze o dokončení jednotlivých kliknutí nebo příkazů; důležité je umět vysvětlit, proč zvolený krok vede k cíli a co se v průběhu práce mění.
Klíčové pojmy wireframe, hierarchie prvků, ovládací prvek, obsahová oblast tvoří společný jazyk pro popis řešení. Při praktické práci v prostředí „Papír nebo Figma“ sleduj vstup, jednotlivé kroky, mezivýsledek a způsob kontroly. Pokud některý krok nelze popsat nebo zopakovat, postup ještě není dostatečně přesný.
Praktická část vychází ze zadání: Navrhnout dvě klíčové obrazovky programu nebo evidence v černobílém wireframu. Výsledkem musí být „Dva wireframy“. Hotový výstup nestačí pouze ukázat; musí být možné doložit, že vznikl z pracovních podkladů a že splňuje uvedená hodnoticí kritéria.
Před odevzdáním ověř zejména: Hierarchie, úplnost a návaznost. U programů nebo modelů použij více vstupů, u diagramů zkontroluj vztahy a popisky, u dokumentace ověř úplnost. Chybu nejprve přesně popiš, potom změň jen jednu věc a znovu výsledek otestuj.
Slovníček pojmů
wireframe
Zjednodušený náčrt rozhraní soustředěný na strukturu, obsah a ovládání, nikoli finální vzhled.
hierarchie prvků
Uspořádání obsahu podle důležitosti a vztahů, které uživateli pomáhá rychle pochopit stránku.
ovládací prvek
Prvek rozhraní přijímající akci uživatele, například tlačítko, pole, přepínač nebo odkaz.
obsahová oblast
Část rozhraní určená pro hlavní informace nebo pracovní obsah.
03
ŘÍZENÁ PRÁCE
Postup krok za krokem
- 01
Ve studentské lekci si přečti cíl a otevři pracovní podklady. Připrav prostředí: Papír nebo Figma. Originální podklady ponech beze změny a pracuj s kopií ve vlastní složce.
- 02
Pojmenuj pracovní složku ve tvaru „55_wireframe_prijmeni“. Uvnitř odděl zdrojové soubory, vlastní práci a výsledný export.
- 03
Rozděl zadání na menší ověřitelné kroky: Navrhnout dvě klíčové obrazovky programu nebo evidence v černobílém wireframu. Nejprve vytvoř nejjednodušší funkční nebo srozumitelnou variantu.
- 04
Po každém významném kroku výsledek spusť, otevři nebo jinak zkontroluj. Zapisuj testovací vstup, skutečný výsledek a případnou opravu; neměň více nezávislých věcí najednou.
- 05
Porovnej práci s kritérii „Hierarchie, úplnost a návaznost“. Oprav alespoň jednu konkrétní slabinu zjištěnou vlastní nebo vrstevnickou kontrolou.
- 06
Ulož zdrojovou i výslednou podobu. Odevzdej „Dva wireframy“ v požadovaném formátu a přidej krátké zdůvodnění, jak jsi správnost ověřil/a.
04
PRACOVNÍ PODKLADY
Stáhni si soubory, se kterými budeš pracovat
Náhled ukazuje pouze strukturu a typ výsledku. Hotové upravitelné řešení ve studentské části není.
.TXT
55 Podklady Readme
↓Pracovní podklad určený k samostatnému zpracování.
55_PODKLADY_README.txt · 1 kB.TXT
55 Pozadavky Uzivatele
↓Pracovní podklad určený k samostatnému zpracování.
55_pozadavky_uzivatele.txt · 1 kB
.SVG
55 Prazdny Wireframe
↓Pracovní podklad určený k samostatnému zpracování.
55_prazdny_wireframe.svg · 2 kBDůležité: Podklady jsou vstupy k práci, nikoli kompletní řešení. Vlastní výsledek musí vzniknout podle zadání, testu a reflexe.
05
OTEVŘENÉ ODPOVĚDI
Pracovní list
1. Startovací otázkaStačí 2–3 věty; důležitý je konkrétní výchozí příklad.
Co už o tématu „Wireframe“ víš? Uveď konkrétní příklad nebo situaci.
2. Práce s pojmyDefinici spoj s konkrétním krokem, hodnotou nebo částí výstupu.
Vysvětli vlastními slovy alespoň tři pojmy: wireframe, hierarchie prvků, ovládací prvek, obsahová oblast. Ke každému přidej použití v dnešní úloze.
3. Rozhodnutí a zdůvodněníUveď nejméně dvě možné varianty a kritérium volby.
Které rozhodnutí je při řešení úkolu „Navrhnout dvě klíčové obrazovky programu nebo evidence v černobílém wireframu.“ nejdůležitější a podle čeho je uděláš?
4. Plán praktické prácePostup má mít vstup, očíslované kroky, kontrolu a očekávaný výstup.
Rozepiš vlastní postup k zadání: Navrhnout dvě klíčové obrazovky programu nebo evidence v černobílém wireframu.
5. SebekontrolaKaždou otázku musí být možné zodpovědět důkazem z práce.
Převeď hodnoticí kritéria na kontrolní otázky: Hierarchie, úplnost, návaznost.
6. Exit ticketOdpověď musí být konkrétní a vztahovat se k dnešní práci.
Napiš jeden pochopený princip, jednu provedenou opravu a jeden další krok.
06
PRAKTICKÁ PRÁCE
Wireframe
Navrhnout dvě klíčové obrazovky programu nebo evidence v černobílém wireframu. 1. Pojmenuj pracovní složku ve tvaru „55_wireframe_prijmeni“. Uvnitř odděl zdrojové soubory, vlastní práci a výsledný export. 2. Rozděl zadání na menší ověřitelné kroky: Navrhnout dvě klíčové obrazovky programu nebo evidence v černobílém wireframu. Nejprve vytvoř nejjednodušší funkční nebo srozumitelnou variantu. 3. Po každém významném kroku výsledek spusť, otevři nebo jinak zkontroluj. Zapisuj testovací vstup, skutečný výsledek a případnou opravu; neměň více nezávislých věcí najednou. 4. Porovnej práci s kritérii „Hierarchie, úplnost a návaznost“. Oprav alespoň jednu konkrétní slabinu zjištěnou vlastní nebo vrstevnickou kontrolou.
Očekávaný výstup
Dva wireframy
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Otevřená odpověď
Dva wireframy
Dokonči praktickou práci a odevzdej důkaz: Dva wireframy. Použij studentské podklady, zpracuj je samostatně a před odevzdáním projdi kontrolní kritéria. Hotové řešení je dostupné pouze v učitelské části.
Zatím nebyl vybrán žádný soubor.
V samostatném HTML se ukládají odpovědi a názvy vybraných souborů pouze do tohoto prohlížeče. Skutečný upload provede aplikace Kurzy/Studio.
08
ZÁVĚREČNÁ KONTROLA
Test
09
REFLEXE
Co si z lekce odnášíš
Dokončeno neznamená pouze vytvořeno. Po dokončení lekce prokážeš cíl odevzdáním výstupu: Dva wireframy. Výsledek zkontroluj podle kritérií: Hierarchie, úplnost a návaznost.