SONOS THE LATIN PRONUNCIATION FOR THE WORD “SOUNDS”.
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 Ss 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.