Notebook App (iOS) Look and Feel Sample

Notebook app teaser image 2.jpg
 

The Challenge  

Design five screens to illustrate a sample look and feel for a note-taking iOS app inspired by Dieter Ram’s, “less, but better” motto.  

Context

This project was an assignment of the UI design bootcamp I completed at CareerFoundry. It was an exercise in creating an original look and feel and extensible UI components.

 

Role/Services

UI Design
Wireframing
User Flow
Mockups
Iconography
Copywriting

Time Frame

July, 2018


 
 

“Less, but Better”  

My approach was to use colors and typography that are not flashy or fussy as to distract from the content of users’ notes. I chose a greyish green and dark pink as primary colors with orange as an accent color to provide personality and differentiate it from typical white background productivity apps. For typography, I selected Source Sans Pro for its approachable feeling, readability, and efficiency.   

To embody “less, but better,” I designed the app with minimal features; the navigation only includes sections for notes, adding a new note, and settings. Notebooks are represented with recognizable illustrations, and the notes contain simple formatting controls as well as ways to add photos or attachments. This project was an exercise in creating an original look and feel while designing within the guidelines of iOS Human Interface Guidelines.

 
 
Final Screens@3x.jpg
 

Typography & Color

 
Typography and Color@3x.jpg
 

UI Elements

 
UI Elements@3x.jpg
 

User Flow & Wireframes

 
user flow
 
Low Fidelity Wireframes@3x.jpg
 
Medium-Fidelity Wireframes@3x.jpg
 

Final Product

 
Final Product@3x.jpg