Issuu on Google+

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.



SONOS