Před další výzvou jsem si trochu odpočinul, protože je docela náročné chodit do práce a po večerech experimentovat s návrhy. Nicméně jsem se opět pustil do další Daily UI výzvy, tentokrát již třinácte, která byla o návrhu přímého zasílání zpráv – například v rámci chatu.
Přemýšlel jsem nad tím, zda navrhnout chat pro desktop nebo pro mobil. Protože jsem teď ale dělal více mobilních návrhů, vyzkoušel jsem si zase něco trochu víc desktopového a navrhl jsem jednoduchý chat.
Výsledný návrh
V rámci této výzvy jsem vůbec neřešil nějaké funkce nebo jak by měl skutečně ideální chat vypadat. Chtěl jsem si opět trochu zaexperimentovat a především si vyzkoušet:
- „Sazbu“ prvků,
- Obarvení uživatelského rozhraní.
Vytvořil jsem tedy jednoduchý návrh toho, jak může takový chat na desktopu (třeba na webu) vypadat.
Neřešil jsem tedy, jaké přílohy mohou lidé chtít posílat, jak se budou vkládat emoji nebo animoji, atp. Když bych nějakou aplikaci pro chatování skutečně navrhoval, určitě bych se na to také zaměřil.
V rámci návrhu jsem ale nějakou drobnou funkcionalitu samozřejmě musel řešit. Třeba jsem přemýšlel nad tím, jak odlišit:
- Aktivní a neaktivní kontakty,
- Přečtené a nepřečtené zprávy,
- Přijaté a odeslané zprávy.
Využil jsem toho, jak se to běžně v aplikacích dělá. Proč zbytečně vymýšlet kolo a přemýšlet nad tím, zda to lidé pochopí. Říkal jsem si, že když miliony lidí používají WhatsApp nebo Messanger, budou pravděpodobně na podobný způsob zvyklí.
Barvy
Protože mám rád modou a líbí se mi docela se mi libí, jak vypadá Messenger, hodně jsem koketoval s využitím modré barvy. Co jsem se díval třeba na Dribbble, hodně lidí modrou pro chat také využívá.
Chtěl jsem si ale vyzkoušet něco jiného, proto jsem zaexperimentoval s jinými barvami a zvolil si:
- Dva odstíny fialové,
- Bílou a černou.
Co jsem se díval na různé aplikace, většinou mají vše v jedné, respektive dvou barvách, kdy:
- Aktivní prvky jsou ve stejné barvě jako vámi odeslané zprávy.
- Přijaté zprávy jsou v odlišné barvě.
V rámci výzvy jsem to také zkusil. Pocitově mi to ale k sobě neladilo (podle mě kvůli zvoleným barvám a některým prvkům), proto jsem nakonec zvolil různé barvy.
Rozložení prvků
Pro zarovnání jsem použil 8-Point Grid System, pomocí kterého jsem nastavil rozměry a mezery, ale také zarovnání prvků, tedy například:
- Velikost avatarů jsem nastavil na 48px.
- Písmo má výšku řádku 24px (podle ní jsem písmo zarovnával).
- Oblé rohy jsem nastavil na 8.
- Bubliny v chatu jsem odsadil o 16px.
Jedinou vyjímkou, pro kterou jsem přímý 8px grid nevyužil, byl indikátor online stavu. Nastavil jsem jej na 12px, protože byl příliš:
- Malý při velikosti 8px,
- Velký při velikosti 16px.
S tímto gridem se docela snadno pracuje a prvky se podle něj dobře skládají. Přijde mi, že rozhraní pak vypadá docela „uhlazeně“. Při zpětném pohledu si ale říkám, že některé prvky mohly být trochu větší nebo více odsazené – třeba bubliny bych možná odsadil o dalších 8px.
Nicméně si říkám, že to nevypadá vůbec špatně (nejsem UI designér) a mám z výsledku celkem radost. Díky výzvám alespoň vidím, že se mám určitě ještě co učit, takže budu určitě v experimentování pokračovat.
Poznámka: Budu moc rád, pokud mi do komentářů napíšete, co si o mém nápadu myslíte. Moc mi to pomůže v dalších výzvách. Díky moc 👍.