Potřebujeme přesně vyjasnit, jak se bude stránka používat a jak bude vypadat. Cílem je, abyste všechna rozhodnutí udělali teď, a pak už zbývalo jen postupovat podle plánu a zařídit vše potřebné.

Úkoly

Ve skupině vás je několik, proto řešte víc úkolů najednou:

• A) Na disku Public jsem doplnil komentáře k vašim zadáním. Vyjasněte, co tam podle komentářů chybí, a podle potřeby se domluvte se svojí skupinou na podrobnostech.
• B) Vypište si nejdůležitější use cases (včetně cílů, které budete mít pravidelně vy sami) a pro každý z nich načrtněte a popište UX design (viz níže). Může být pohodlné psát a kreslit na papír.
• C) S hrubou představou o use cases z části B) už můžete začít pracovat na grafickém návrhu. Naplánujte přesně, jak má stránka vypadat na telefonu (na výšku) a jak na počítači (na šířku). Podrobnosti vizte níže.
• D) Určete, které funkcionality ve vašem projektu můžou být náročné, co může být těžké zařídit. Nejdřív najděte na webu několik různých řešení, pak zkuste rychle vyřadit ta nevhodná a odhadněte, co bude nejvýhodnější.

Vyberte si jeden z úkolů B, C, D, za který budete zodpovídat. Můžete na nich libovolně spolupracovat, a bude asi potřeba, abyste spolupracovali. Úkol, za který zodpovídáte, odevzdejte na konci hodiny do Teams.

Všechny soubory vaší skupiny také prosím nahrávejte na disk Public, aby se nám neztratily.

A: Zadání

Zadání musí vyjasnit:

• čeho se snažíte dosáhnout tím, že stránku vytvoříte,
• k čemu to bude dobré,
• jací uživatelé mají stránku používat,
• jak to (v hrubých rysech) bude fungovat.

B: UX design

User experience design musí:

• popisovat alespoň 3 use cases (spíš čekám, že jich bude 5),
• v každém z nich jasně popsat:
  • v jaké situaci je uživatel,
  • co chce,
  • co udělá a
  • jaké obecné vlastnosti stránky tomu můžou pomoct, na co byste měli vy dávat pozor.
• přesně jeden z vašich use cases by měl pracovat s uživatelem, který se na stránku dostal omylem.

User experience design nesmí:

• přidávat něco, co nevyplývá z vašeho zadání, ani
• vynechat něco, co vaše zadání vyžaduje.

UX znamená user experience a jde tedy o celkové plánování toho, jak budou uživatelé aplikaci používat.

V první řadě si potřebujete vyjasnit, co uživatel potřebuje (případně, co vy chcete, aby uživatel udělal – dark pattern). Vypište si doopravdy všechno, co od vaší aplikace může někdo chtít a co bude občas potřeba, aby někdo udělal (use cases). Že si něco přečtete nebo jen něco uvidíte, může být taky důležitá situace nebo dokonce cíl.

Určete, které z těchto use cases jsou nejdůležitější a nejčastější. V souvislosti s tím navrhněte, které informativní a ovládací prvky by měly být vidět nejvíc, a které můžou být menší, případně schované. Rozmyslete si, na co musí stránka celkově dbát (přehlednost, přesvědčivost atd.), abyste každého cíle dosáhli co nejlépe (tj. nejspíš aby byl uživatel spokojený).

C: Grafický návrh

Grafický návrh musí:

• přesně ukazovat, jak stránka bude vypadat, když ji otevřeme,
• přesně ukazovat jednu další situaci (uživatel na něco kliknul, něco se otevřelo atd.),
• někde mít slovy napsané, jaké písmo bude stránka používat
• mít konkrétně vyznačené barvy palety, kterých se drží (stačí jako vzorník / čtverečky)

Grafický návrh nesmí:

• přidávat něco, co není potřeba pro vaše vyjmenované use cases, ani
• vynechat něco, co některý váš use case potřebuje.

Nejdůležitější je, jak přesně budou jednotlivé prvky na stránce (stránkách) rozmístěné. Abyste si doopravdy představili rozměry a neudělali nějakou zásadní botu, je potřeba to doopravdy vidět před sebou na počítači: velikost písma, šířku čar, volné místo mezi prvky pro oddělení.

Profesionálové pro grafické návrhy obvykle používají aplikaci Figma.com. Pro vás bude výhodnější použít canvu, protože ji už znáte.

Zvažte, jaký dojem (potažmo, jaké pocity) má vaše stránka vzbuzovat. V závislosti na tom si vyberte písmo, například na Google Fonts (podrobnější vysvětlení: Font-inspired interfaces). Stejně tak si vyberte barevnou paletu, nejspíš dvě nebo tři barvy, kterých se vaše stránka bude celkově držet. Nemusí tam nikde být černá ani bílá, pokud ji nepovažujete přímo za vhodnou. Pro výběr barev je skvělý nástroj Adobe Color.

Text a veškeré nadpisy, popisky tlačítek atd. je lepší psát opravdový, aspoň jako hrubý náčrt. Namísto slova "Nadpis" do grafického návrhu napište doopravdy nadpis, jaký vaše stránka bude mít. Dlouhé odstavce textu pochopitelně napíšete až později, zatím místo nich můžete nakopírovat třeba kus textu Lorem ipsum, i to vypadá líp než třeba "blablablablablabla".

Fotky a obrázky, které vložíte do svého grafického návrhu, si rovnou ukládejte samostatně vedle toho. Budou se vám hodit při tvorbě samotného webu.

D: Technická analýza

Technická analýza musí:

• vyjmenovat aspoň 2 otázky technického rázu (spíš očekávám 3),
• u každé otázky jasně popsat:
  • co je za problém (a k čemu je to potřeba, pokud to není úplně jasné),
  • jaký přístup chcete použít pro řešení,
  • odkaz na aspoň jeden (radši 2) fungující příklady, kde je už něco podobného vyřešené.

Jedna z řešených otázek může být problém, jak stránku vůbec vytvořit. V tom případě by řešení byla konkrétní šablona na Wix nebo Wordpress, případně konkrétní stránka, která se podobá tomu, co potřebujete.

Další z řešených otázek u některých projektů může být, kde vzít data, která se na vašem webu budou ukazovat. Vypište si několik zdrojů, které můžete použít, a napište, jakým způsobem z nich budete čerpat informace.

Odkazy na fungující příklady jednak pomáhají vyjasnit, co chcete, a druhak možná půjdou přímo okopírovat a použít. Jestli najdete nějaké podrobnosti nebo související návody, zapište si je taky.