Note app cover.png

Note-taking app

Context

note is a note-taking mobile app.

Its look and design should be defined by Functionalism
principles based on the industrial designer Dieter Rams

“How things look and their design should be defined by their function.

mockup.png

*Quote by designer Dieter Rams

UI challenge

  • Design a note taking app in less than 6 hours.

  • Build a clean interface with minimal requirements.

  • Deliver high-fidelity wireframes for 5 screens so client can pitch the concept to their investors. The wireframes need to be shaped by functionalism, with “less is more” in mind.

Approach

01

The interface design is based on iOS Human interface guideline,
in order to understand the UI patterns, iconography and navigation intuitively.

02

Sans Serif Font Verdana is used for the text input and helps for a clear readability, avoiding reading tiredness and helps people with dyslexia.

03

Containers with soft edges and gray background for an ergonomic feel, smooth contrast and ease the eyes.

Duration

6 hours on short notice

Role

UI design
Branding

Tool

Figma

Task performed

UI pattern & styling Wireframe

 

Main screens
& key features

Note view

Text edit

Landing screen

Note list

Search

Style

Inspiration

01   iOS Human interface guideline
02   iphone “Notes” app

App logo

“Good design is as little design as possible
Less, but better - because it concentrates on the essential aspects, and the products are not burdened with non-essentials.
Back to purity, back to simplicity.”


Dieter Rams
 

Typography

Iconography

Color palette

UI patterns

Thank you!