Daily UI – přímé zasílání zpráv

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.

Jak vypadá výsledný návrh chatu pro tuto výzvu.
Jak vypadá výsledný návrh chatu pro tuto výzvu.

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.
Jak odlišit online a offline kontakty, přečtené a nepřečtené zprávy nebo odeslané a přijaté zprávy.
Jak odlišit online a offline kontakty, přečtené a nepřečtené zprávy nebo odeslané a přijaté 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.
Snažil jsem se využít minimum barev.
Snažil jsem se využít minimum barev a zároveň takové, které jsou si podobné.

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ě.
Sjednocené barvy pro aktivní prvky a komunikaci.
Sjednocené barvy pro aktivní prvky a komunikaci.

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.
Příklad využití 8-Point Grid System v návrhu.
Příklad využití 8-Point Grid System v návrhu.

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.
Porovnání velikosti online indikátoru.
Porovnání velikosti online indikátoru.

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 👍.

Napsat komentář