rblogo-01.png
R&B is an iOS app the generate random combinations of gradient background and wave to demonstrate rhythm and balance between colors, shapes and visualization of sound.
Role Developer, UX/UI Designer
Duration : 1 week - Autumn 2018
ToolsSketch, Adobe Illustrator, Xcode
Type : iOS mobile game application development
Objective: Create an app which utilize NSArray or NSMutableArray  to create a visual composition that demonstrates your understanding of the concepts of rhythm and balance.​​​​​​​
 
design
process

 / ideation 

What is rhythm & balance?

Rhythm: a strong, regular, repeated pattern of movement or sound.

Balance: an even distribution of weight enabling someone or something to remain upright and steady.

As a designer, balance is something I always seek to have within my work. Whether that is balance in color, scale, space or density. With many choices in mind, I decided to create an app that generate multiple combination of color gradients. I chose gradient because there are color that could balance each other out in gradient while there are color that might fight each other for attention. It’s simple yet difficult to create combination that could represent balance nicely.

/ ui design

 

Balance ?

I chose gradient because there are color that could balance each other out in gradient while there are color that might fight each other for attention. It’s simple yet difficult to create combination that could represent balance nicely. Some color inspiration I got are from the website : coolors.co and account @coloripso on Instagram. With resources and idea in mind, I used Illustrator to create the color combo. Here are some:

1.png
2.png
3.png

Rhythm?

Without music and sound, how could I portray rhythm? And the idea of using waves popped in my head. Because sound is ,indeed, just a pressure wave

However, the traditional sound wave did not seem to fit well so I use illustrator and create gradient colored line, in addition to simple line to create variety.

15.png

/ final design

Simulator Screen Shot - iPhone X - 2019-
Simulator Screen Shot - iPhone X - 2019-
Simulator Screen Shot - iPhone X - 2019-
Simulator Screen Shot - iPhone X - 2019-
 
Simulator Screen Shot - iPhone X - 2019-
Simulator Screen Shot - iPhone X - 2019-
Simulator Screen Shot - iPhone X - 2019-
Simulator Screen Shot - iPhone X - 2019-

/ development

In order to generate multiple combinations of my designs, I created 2 NSArrays of gradient backgrounds and colored waves. 

Then I create a method to randomize each array object appearance and ... voila !

Screen Shot 2019-02-09 at 23.51.43.png