Drumcode.se

From scratch to the final layout

Drumcode.se techno music label

I decide to redesign this website as at the moment is presented as kind of blog, and my thought about it is that it should focus more on the artists and the news, events and releases related to them.

Pain points


  • The website presents an infinite scroll to reach older news, artists at the end of the alphabetic list...
  • To be able to register to the newsletter is needed to scroll till the end of the page.
  • Is not possible to do any research inside the website except for the event section.

Wireframe Definition

First idea and Low-fi Wireframe

  • The first idea was to introduce the card concept of the element, like news, events, artists, radios, with horizontal scrolling.
  • The newsletter registration field was moved to the top of the screen and made it fixed during the vertical scrolling.
  • Introduction of a search bar related to the section were the user is, for instance, search news related to the artist X inside the news page.
  • Introduction of the news archive, in this way the user can go to the archive and scroll quickly between the news titles.
This card system was thought for all the sections.

First Hi-fi Wireframe



Based on the lo-fi wireframe have been added: colours, the brand is black and white so I decided to go for a greyscale colour scheme; the font, Roboto, squared and clear.

Final Prototype


After working on the hi-fi wireframe, I decide that the proposal was still too similar to the actual website and the goals weren't reached in a proper way, even if something has been improved.
So, I reworked on the wireframe and I have introduced more functionalities.
In the final prototype, the home page is the artist page, where we can find at the top profile pictures of all the artists with a horizontal scroll. The subscription as becoming a button. The page of the artist shows the events, radio, releases and news related to the artist.