Visual Design & UI design







Vocal is a project for the class Foundation of Digital Design. It's a music label website which will publish latest released albums, songs that hits the world. Users can also check the popular artists and listen to their music clips. Generally, we started this project by a design brief which listed the potential users, goals as well as features of this website, but this project mainly focuses on the visual part of UI Design. 





For better branding in this project, I decided to start with a persona, which could help me to understand the basic needs for the potential users. 





Young people just don't want to spend a lot of time reading words, especially online. In this case, graphics, which could also pass emotional conception of the informations, were the main explanation in this website. I also intended to use data visualization and try new interaction methods here, so I explored some amazing works in this area to get inspirations. 




Color was one of the strongest voices of Vocal. As a music label website, the contents in this website should be the most vital elements. Using the color black and white leads the users to concentrate on the colorful contents, lessening the distractions. The website construction should be flat and simple, not only on the information construction, but also in the visual experience. Hence, I didn't introduce any other color as a theme color and just used black, white and different grades of grey to build up the page. 

I chose Myriad Pro Bold Condensed as the theme typography. It gives a sense of strong, vivid together with black and white. To ensure the consistency, I made the subtitles with a lighter color or a smaller size than the headers, rather than assigning them another typography.  


Obviously, the buttons and other controlling icons are another important ways to convey the sense of the style of this websites. I made the buttons flat, clean and with clear angles. They are mainly black and white. The typography of the texts in the buttons are also Myriad Pro with Bold Condensed, consistent with other parts in the website. 

I used the combination of hexagon and lines to be the main symbol. They divided the pages into different parts based on the contents. Hexagons are easy to become the focal point of users because of its shape, and lines were used to direct their focal into the contents. 




As Vocal is starting with a "V", I decided to make the logo with its first letter. Before coming to the final design, I actually did a lot of researches and made quite a few sketches. I finally took the idea of including a triangle into this design. The shape of triangle matches the style of Vocal, because of its sharp angles and the feeling of balance. It is also similar to the letter "V". When combining them together, I found it would be a simple but iconic logo that really explain the concept of Vocal. 





Before diving into the visual design work, I made a low fidelity prototype. By listing out all the pages based on the design goals, I tried a few interaction methods and compared them to figure out the most suitable one for each page. I also made wireframes as the deliverables: 




Making the information as flat as possible, I introduced a new way to show albums of artists and provide sample clips. 

This function is available when you click into an artist page. It provides the music sample of the artist. The center will display the album picture. The rings around the middle circle are responding to the albums of the artist, and the small circles mean different clips of this album. When you click on one of these small circles, the name and the album of this song will display on the right. 




The first part in "Music" page is to display the latest nine albums. When a user move his cursor onto a clickable area, it means that he is interested in it and want to learn more about that. To give more detailed information of this album, I used this small trick. 

When hover the cursor onto one of these albums, all of these nine parts would become components of the current album, which gives you more detail of it. But when hover onto the blank area, it will be back to the previous default setting. 





The next part in the "Music" page shows different types of ranking lists. When checking the ranking lists, people are usually only interested in the top 3 or top 5. So I wanted to reduce the page changing and clicking operations in this part. To make the information structure flat and easy to get, I made it like this: 






After getting feedbacks from the instructor and classmates, I made a few changes on the design. To better show the design, I made a prototype in Marvelapp. You can view all the design by scrolling and using "<" and ">" in keyboard. Here is the final version of Vocal: 




< Previous                                                                                                                                                                                                          Next >