Jak jsme navrhli Dark Mode pro Mobilní banku od KB

Android verze KB Mobilní banka v Dark Mode.

3. září spatřil světlo světa operační systém Android 10 a celý svět netrpělivě očekává spuštění systému iOS 13. Co mají společného? Spolu s nimi na mobilní zařízení přijde i nativní podpora Dark Mode. Právě ten je uživatelsky velmi populární. Mezi jeho hlavní benefity patří kromě atraktivního vzhledu také fakt, že šetří vaše oči i baterii.

Nejdříve jsme začali s Androidem, po něm následoval iOS, který se aktuálně kompletně redesignuje pod taktovkou agentury Blueberry a čeká ho velký update v listopadu.

Nejprve odlaďte všechny klíčové funkce aplikace

Jak?

Jak na to

  1. Navrhněte všechny důležité stavy a funkce v tmavé podobě.
  2. Popište svým vývojářům změnové požadavky.
  3. Připravte ve své knihovně elementy ve stavech Light/Dark.

V čem?

Používáme Sketch+plugin Anima a jako verzovací nástroj Abstract

Každý designer si nejprve navrhne svou část ve vlastní “designové větvi”, která se po schválení propíše do master souborů, které jsou společné pro všechny.

Důležitým nástrojem je pro nás Sketch plugin Anima, která umožňuje vytváření a stackování dynamických elementů podobně jako v HTML.

Zdroje a inspirace

Google Material dokumentace pro Dark Theme
Android Dark Theme template pro Sketch
iOS Dark Mode Guidelines
iOS Dark Mode Implementace
iOS Design Resources
Contrast Checker

Mobilní banku od Komerční banky si můžete vyzkoušet na svém telefonu.
Stačí si ji stáhnout a spustit demo verzi.

Google Play
App Store

Jarin Němeček
Lead Designer 2FRESH
www.2fresh.cz/ui

Naším posláním je pomáhat organizacím pochopit chování lidí. Spojujeme design, byznys a marketing.

Naším posláním je pomáhat organizacím pochopit chování lidí. Spojujeme design, byznys a marketing.