Všechny projekty

Chytrá Rezervace App

Role : UI, UX

Klient : Aleš Urban

O projektu

(R)evoluční řešení pro skupinové lekce. Představujeme vám budoucnost vašeho fitness. On-line rezervační systém. Dostupný odkudkoliv.

Stáhnout aplikaci : Appstore, Google Play

Challenge

Brief byl jednoduchý. " Potřebuji vytvořit aplikaci vizuelne nesouvisející s webem, který aktuálně nechci redesignovat.  Jen potřebuji aby aplikace byla moderní a plně funkční. Vše by mělo být pro každého jasné a srozumitelné "

Research

Fitness je dnes trendy a tak jsem musel zjistit, co vše si lidé mohou ve fitness objednat. At jde o jogu, vyzivove poradce, samotne fitness, bojove sporty az po ruzne pilates. Cilovka je jasna, krom malych deti a duchodcu je to kdokoliv.

rezervace_title_2rezervace_title_2

Process

  • Research

  • Sketches & Design System

  • Flowchart & Wireframes

  • Moodboard & Design

Timeline

  • Planning - 20 hodiny

  • Wireframes - 30+ hodiny

  • Design - 8+ hodiny

  • Assets - 2 hodiny

Tools

  • Sketch

  • Flowmapp

  • Email (komunikace)

  • Invision

Colors

Pro projekt jsem jako hlavní vybral odstiny modré. Modrá barva symbolizuje důvěru, loajalitu, moudrost. A jako druhou oranžovou, symbolizující pohyb.

reservace_colorsreservace_colors

Typography

Použil jsem rodinu písem Gotham Rounded od Tobias Frere-Jonese a Montserrat od Juliety Ulanovsky. Obě rodiny fontů maji jednoduchý a moderní vzhled. A vsadil jsem na kontrast mezi Rounded Sans-Serif Fontem pro Headliny a Geometrickym Sans-Serif fontem pro odstavce. Za mne ideální font pair.

rezervace_typorezervace_typo

Icons

Ikony jsou důležitou součástí projektu.Komunikují s uživateli a pomáhají jim snadno porozumět slovům. Pro tento projekt jsem pouzil sadu Simple Line Icons, ke které jsem dodělal chybějící ikony ve stejném duchu.

chytra_icons3chytra_icons3

Personas

gym_personas_2gym_personas_2

Sketches

Skicování je první část ve které si načrtnu jak by aplikace mohla fungovat. Ze skicování následně vychází přesnější Flowchart.

sketches_2sketches_2

Flowcharts

Po schromáždění informací, pár náčrtů vznikla celkem jasná představa, jak by aplikace měla fungovat a jak uživatel bude v aplikaci fungovat, a tak jsem mohl začít s mapováním. Díky tomu jsem byl schopen vytvořit reálnou flowchart, kterou jsem tentokrat řešil přes Flowmapp.

rezervace_flowcharts_3rezervace_flowcharts_3

Wireframes

Wireframes. Flowchart již máme, takže wirefrime, davá reálnou předlohu vznikajicimu designu.

rezervace_wirerezervace_wire

Moodboard

mood-board-1mood-board-1

Design

rezervace_screens1rezervace_screens1
rezervace_screens2rezervace_screens2
[unex_ce_button id="content_i6p1znlwz" button_text_color="#43484d" button_font="light" button_font_size="24px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="transparent" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="transparent" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="transparent" button_border_hover_color="transparent" button_link="/" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]Zpět[/ce_button]