Ambience

iOS app to play relaxing sounds from nature

Project main imageProject main imageProject main imageProject main image

Project details

Ambience is an iOS app that allows users to play natural sounds to create a personalized background ambiance. The sounds in this app can be used for relaxation, concentration, sleeping, or creating a room ambience.

Project type
iOS mobile app | Personal project
My role
iOS developer & UI designer
Tools
Xcode , Swift , Affinity Designer
Date
June 2021

Functionality

No items found.
No items found.
No items found.
No items found.
  • Play white, pink, brown, and nine natural ambience sounds.
  • Mix and play up to 5 sounds at a time.
  • Sound volume control for individual sounds.

Product design & development

Ambience app is a personal project that I created because I use sound-relaxing apps frequently. I designed an app with features that I use more often. The app presented in this portfolio here is the first version, and I plan to keep improving it in the future.

My approach for design and development

Design

I started creating paper wireframes and then draft versions of the prototypes in Affinity Designer.

No items found.
Draft version
No items found.
Final version
No items found.
No items found.
Digital wireframes
No items found.
No items found.
Digital wireframes
Digital wireframes
Light & Dark modes: Launch screen
No items found.
Light & Dark modes: Main screen

App assets: sounds, icons & images

I defined 12 sounds that are popular in sound-relaxing apps. Users can find the most common sounds in the first row: white noise, pink noise, and brown noise.

Read more: The many colors of sound.

I designed the app icon, splash screen, and button images using vector images in Affinity Designer. I used SF Symbols for the action buttons in the sound player and the control volume screen.

Development

I developed this app 100% programmatically in Xcode because, during my learning of iOS development, I had only experience creating apps using storyboards. One of my personal goals was to learn to develop an app without storyboards.

I followed an MVC design pattern to develop this app.

Elements used:
-
UICollectionView
- UICollectionViewCell
- UITableView
- UITableViewCell.
- Data model: Codable and Hashable struct.
- AVFoundation framework for audio management.

Recording of the finished app

Launch

Style guide

App icon & graphic elements

No items found.

Color palette

Color palette

Typeface

Typeface

Next steps