
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
Tools : Sketch, 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:



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.

/ final design








/ 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 !
