Giving MusicManaged some personality: Designing the Front End.

In this blog post we will explore the process of designing and implementing the front end of MusicManaged. We will look at Bootstrap Grids, Components, JQuery and the whole shebang!

From the beginning, Bootstrap has been an essential part of the development process — every layout we explored had been built on a robust Bootstrap Grid — responsiveness is important to us beause MusicManaged at its core is built for simplicity and portability. While our front end has drastically evolved since the start of the project, The Grid has remained a constant anchor for our design thinking and decisions.

More than a tool to enable responsiveness, we allowed Bootstrap to be an enabler for our design decisions —simplicity is paramount when designing for dynamic content. In our case, songs load dynamically through JQuery and it is important that this does not change the page in unusable ways or confuse the user by displacing existing content.

The first exploration for MusicManaged. Notice that the nav-bar and Footer styles have been set. 23rd Jan.

The earliest versions involved a slightly colourful UI style — this would eventually change in favour of single-tone colors with high contrast to provide clear differentiation and easy readability on screens of varied capabilities.

While the header and footer remain similar in terms of the Grid, their style evolved more by the time of this exploration. Also, the sign in form and the basic tagline have found their place. 2nd Feb.

We also experimented with SVG components and rotating discs to add to the aesthetics, but the idea was discarded with great sadness after it became a bit of work to maintain it and have it fit with our evolving design — for one, the disc would take up substantial space on most screens, rendering it an unnecesary addition in a situation where real estate is prime.

The navbar and footer have firmly found their place and space has been left for upcoming components.

We also played with ideas involving SVGs but the idea didn’t fit into our direction.

In our current front-end, we settled for bold colors with clear differentiation and used JQuery to dynamically load content. Each row of songs has space for metadata, and 3 unique buttons — play, download and delete. These are the 3 fundamental operations we allow users to perform to manage their Libraries at this point, and we felt they should be clearly conveyed with little error-room.

Using JQuery to load content dynamically allows us to append content in pre-defined areas in order of latest-upload-last. This allows for consistency of layout while ensuring that exiting layout components do not get displaced/behave badly as the size of dynamic content grows.

We used Modal boxes for uploading files — they provide additional context by allowing the user to remain on the same page and see their changes/additions/deletions in live time. This makes the size of the project smaller by removing one extra page and also makes load-times faster. The newly introduced CSS Filter property was used to provide additional aesthetic quality, while allowing the user to be aware of how the page is responding in the back end — when content loads, the user is aware of changes in the background and a soft reveal ensures it is not jarring to see.

All of our efforts, in conclusion, were driven by the fact that standard templates are a pre-defined set of rules and constraints, but the dynamic nature of our project both in terms of the content and also in terms of its own evolution, meant that a template that suited our needs today would be limiting our progress the next — that is why it was a continued effort to try and develop our own design ideology and methods because only that way could we best complement our ideas with actual implementations.

That’s a wrap, folks! See you in the next post!