SONOS THE LATIN PRONUNCIATION FOR THE WORD “SOUNDS”.
DESIGN
PROGRAMMING
SOUND DESIGN
EVALUATION
DESIGN
The first process I do in all of my designs is sketching, I find this to be the best way, to transmit your ideas on paper in the most visual way possible. In this case I first started sketching the logo for my app SONOS. I already had some ideas in mind before sketching the logo. When it comes to logos I try to put as much meaning as possible in the logo. Since the logo has to represent the identity of the brand this was no exception. The first idea I had was to incorporate sound symbols since the app is related to sounds. Therefore I tried to incorporate symbols such as the sound wave and the treble clef. I also wanted the logo to be an ambigram (a symbol when rotated 180 degrees, remains the same). Here are some of the initial sketches I came drew.
LOGO
This is the process where I transform my sketches into the digital final product. I wanted the logo to be accurate and have a nice consistent design . In order for the logo to be consistent I constructed it using only circles. I am quite pleased with the logo since I managed to combine various sound elements into one logo. The logo is an ambigram therefore it can be viewed from both sides. I decided to keep the logo white so it could blend with any background color.
+
+
=
FAV ICON I wanted the fav icon to be consistent with the logo. What I decided to do is to keep a single letter from the logo and use it for the fav icon. By doing so I still managed to keep a certain consistency in the design itself. As for the border of the icon I decided to play it safe and go with a simple rounded rectangle. I than scaled the icon down to different sizes for different usage such as web, mobile etc. The fav icon remains recognizable until it reaches a certain size.
=
128 px X 128 px
96 px X 96 px
48 px X 48 px
32 px X 32 px
ICONOGRAPHY Since the app mostly consists of icons, the icons had to be clean and understandable . The first thing I had to do was construct a grid in order to create the icons with the same ratio. The grid comes in extremely helpful when creating icons since it is used as a guide. When using the grid it is very important not to exceed the bounding box otherwise the ratio between the icons wouldn’t be the same. The grid also comes in handy since the shapes snap to it, thus creating perfect spaces in the design. One important factor to take into consideration when designing icons is to deliver the meaning behind the icon.
BEACH
SEAGULLS
CHIMES
BREEZE
WAVES
CAMPING
WOLF
OWL
CRICKETS
CAMPFIRE
URBAN
PLANE
TRAIN
CARS
CITY
STORM
THUNDER
RAIN
WIND
BLIZZARD
BINAURAL
STUDY
SLEEP
HAPPY
MEDITATION
TYPOGRAPHY
For the typography I decided to use Helvetica Neue and there are various reasons why I chose this font. Helvetica is one the most used fonts when it comes to UI design. It is a very clean , sharp and legible font with important characteristics such as a consistent x-height and baseline. It is extremely legible even when scaled down to a small point size, this factor alone is very important for UI design, since certain fonts have to be small due to limited layout space. Apart from all these reasons the most important reason is that it is compatible with most of the devices found it today’s market.
HELVETICA NEUE - REGULAR
Aa
HELVETICA NEUE - BOLD
Aa
B b C c D d E e G g Hh I i Jj Kk L l Mm N n O o P p Q q R r S s Tt Uu V v Ww Xx Yy Zz
B b C c Dd E e G g Hh Ii J j K k L l Mm N n O o Pp Qq R r Ss T t Uu Vv Ww Xx Yy Z z
1 2 3 4 5 67 8 9 0 ! @ # $ %^ &:’”
1234567890 !@#$%^&:’”
COLOR SCHEME For the color scheme I decided to use simple colors, I wanted the colors to blend with the text smoothly , hence why I chose this particular scheme. The color scheme only remains constant through the menu and sub menu of the ambience because in the other screens the color constantly fades changing the hue from one color to another.
R : 109 G : 207 B : 246 C : 50 | M : 0 | Y : 0 | K: 0
R : 242 G : 207 B : 60 C : 6 | M : 15 | Y : 88 | K : 0
R : 248 G : 154 B : 62 C : 0 | M : 47 | Y : 85 | K : 0
R : 239 G : 55 B : 63 C : 0 | M : 93 | Y : 78 | K : 0
LAYOUT I tend to use apps that have complicated layouts and sometimes a clustered layout can be quite stressful. Keeping this in mind the layout had to be simple as possible. The layout for the main menu consists of 3 buttons: ambience, binaural and about. The ambience directs you to the submenu where the user can choose the environment he/she wishes. The binaural directs you to the binaural section , this section has no submenu so the user can start playing the binaural beats straight away and obviously enough the about directs you to the about page where one can find the general information regarding the app.
PROGRAMMING In order to develop this app I used a software called phoneGap. PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs . With PhoneGap you can easily create an app using standard programming languages such as Javascript, HTML and CSS. All I had to do was download the android sdk package in order to deploy the code directly to my device. The code was written using the languages mentioned above.
// This array specifies and sets the ambience var data = { ‘ambience’ : [{ ‘title’ : ‘beach’, ‘children’: [‘breeze’, ‘chimes’, ‘seagull’, ‘wave’] }, { ‘title’ : ‘urban’, ‘children’: [‘car’, ‘city’, ‘plane’, ‘train’] }, { ‘title’ : ‘camping’, ‘children’: [‘campfire’, ‘cricket’, ‘owl’, ‘wolf’] }, { ‘title’ : ‘storm’, ‘children’: [‘blizzard’, ‘rain’, ‘thunder’, ‘wind’] }], };
‘binaural’ : [‘happy’, ‘meditation’, ‘sleep’, ‘studying’]
// This is an array created to store the sound effects. var sound = [null, null, null, null]; // load the ambience menu function loadSubMenu(type) { // slide animation $(‘html, body’).animate({ scrollTop: $(‘.sub-menu’).offset().top }, 1000); for (var i = 0; i < data[type].length; i++) { // populate titles $(‘.sub-menu .column’).eq(i).find(‘.title’).text( data[type] [i][‘title’] ); (function(index) { // set on click event of menu items $(‘.sub-menu .column’).eq(index).click(function() { loadSubSubMenu(type, index); }); })(i); };
//This function loads the ambience sub menu function loadSubSubMenu(type, subType) { // animate background spectrum(); //animate slide $(‘html, body’).animate({ scrollTop: $(‘.sub-sub-menu’). offset().top }, 1000); for (var i = 0; i < data[type][subType][‘children’].length; i++) { // set text $(‘.sub-sub-menu .column’).eq(i).find(‘.title’).text( data[type][subType][‘children’][i] ); // set icon $(‘.sub-sub-menu .column’).eq(i).find(‘.icon’).addClass( data[type][subType][‘children’][i] ); (function(type, subType, index) { // remove click event $(‘.sub-sub-menu .column’).eq(index). unbind(‘click’); // add click event $(‘.sub-sub-menu .column’).eq(index). click(function() { // stop audio if (sound[index] != null) { sound[index]. stop() };
// This function makes the background colour to another function spectrum() { var hue = ‘rgb(‘ + (Math.floor(Math.random() * 256)) + (Math.floor(Math.random() * 256)) + (Math.floor(Math.random() * 256)) +
hue transition from one
‘,’ + ‘,’ + ‘)’;
$(‘.page.sub-sub-menu’).animate({ backgroundColor: hue }, 20000, function() { spectrum(); }); $(‘.page.binaural’).animate({ backgroundColor: hue }, 20000, function() { spectrum(); }); }
// This function goes back to ambience menu function backToSubmenu() { // slide animation $(‘html, body’).animate({ scrollTop: $(‘.sub-menu’).offset(). top }, 500, function() { // switch button off $(‘.sub-sub-menu .column’).addClass(‘off’); // remove text $(‘.sub-sub-menu .column’).find(‘.title’).text(‘’); // remove icon $(‘.sub-sub-menu .column’).find(‘.icon’). removeAttr(‘class’).addClass(‘icon’); // stop all sounds for (var i = 0; i < 4; i++) { if (sound[i] != null) { sound[i].stop(); sound[i] = null; } }; }); }
// This function goes back to main menu function backToMenu() { // slide $(‘html, body’).animate({ scrollTop: 0 }, 500, function() { // switch off buttons $(‘.sub-menu.binaural .column’).addClass(‘off’); // stop sounds for (var i = 0; i < 4; i++) { if (sound[i] != null) { sound[i].stop(); sound[i] = null; } }; }); }
//This function loads the binaural sounds function loadBinaural() { spectrum(); for (var i = 0; i < data[‘binaural’].length; i++) { (function(index) { // remove click $(‘.sub-menu.binaural .column’).eq(index). unbind(‘click’); // add click $(‘.sub-menu.binaural .column’).eq(index). click(function() { // stop audio if (sound[index] != null) { sound[index]. stop() }; // set sound sound[index] = new Media(‘/android_asset/ www/audio/’ + data[‘binaural’][index] + ‘.mp3’, function() {}, function(err) {});
SOUND DESIGN Some of the sounds that I found online had some defects , so I had to do some minor sound editing. Certain sounds were to low or lacked effects such as reverb , other sounds had some extra noise in them. Therefore the first thing I did was to adjust the volumes of the sound, so the sounds wont overpower each other. One important thing that I had to was to extend the sound waves and repeat the sound for a loop able effect.
SOUND WAVE BEFORE EXTENSION :
SOUND WAVE AFTER EXTENSION, WITH THE SAME SOUND REPEATED THREE TIMES :
EVALUATION
As soon as we were given the brief for this module, I knew that I was going to enjoy doing this module. I have always had a particular interest for UI design although unfortunately I never managed to put some time a side to get into it. However with this assignment I had no excuses, so I was actually happy that I finally got the chance to experiment with UI Design. This is the main reason I wanted to create the application by myself. Not that I don’t like working in a team but because I really wanted to feel free and have the things done the way that I wanted. I knew from the start that I couldn’t develop a highly technical application but that wasn’t my main goal either. My first priority was the general design such as branding, UI, typography, grid layouts etc. I focused on consistency through design more than the actual programming itself. I didn’t just want to create an app, my wish was to create a brand and develop an application for it. By doing so SONOS has many possibilities of expanding in the future and I will definitely continue to work on it. In the future I would like to add more technical details such as volume sliders for each sound effect. I wished to have implemented it but unfortunately programming is not my forte and I couldn’t find out how to do it. However overall I am still satisfied with the final outcome, considering that it was my first time doing UI design I was even surprised myself. I would also like to thank my tutors who have always gave me constructive criticism throughout the whole process.