Messenger App (iOS) Look and Feel Sample

Messenger app teaser image.jpg
 

The Challenge  

Design three screens to illustrate a sample look and feel for a messenger app: primary screen showing conversation threads, conversation screen with a keyboard and buttons to send different kinds of content (images, emojis, etc.), and a contacts screen.

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 reusable UI components.

 

Role/Services

UI Design
Wireframing
Mockups
Iconography
Copywriting


 
 

A Minimalist Feel

Considering the purpose of the app, I chose colors and typography that felt calm, modern, and clean so users’ attentions would not be distracted from the content of their conversations. I chose two kinds of blue to convey a calm feel with a minimal use of yellow as an accent color. I selected Work Sans for its readability, straightforwardness, and for its variety of weights and styles. To achieve a minimalist feel, I kept the design free of outlines and shadows. A thin underline demarcates messages in a minimal way. Rounded corners on UI elements and images provide a friendly feel. The mockups feature photos from Unsplash. This project was an exercise in creating an original look and feel and designing within iOS Human Interface Guidelines.

 
 
 

Typography & Color

 
Messenger Typography and Color@3x.jpg
 

UI Elements

 
 

Wireframes

 
Messenger_Lowfid.png