Gijs Bakker

This is a portfolio/blog of Gijs Bakker, UX (interaction and UI) designer from Amsterdam.
Read more about me, filter work by tags or mail me at .

Re-design sidemenu

What is it A re-design for a side menu in studyspanish.com
Prospective client Studyspanish.com
Platform Web
NOTE: This is an older self-initiated re-design

I would advise every webdesigner to keep tablets in mind when designing a new website. Not only on technical terms – for instance the use of HTML5 and JavaScript instead of Flash – but also considering the design and usability; larger sized elements, more white space, the absence of the ‘a:hover’ principle and perhaps the use of ‘a:active’ instead.

StudySpanish.com features a content-rich side menu that displays all of their Spanish lessons. With the tablet-approach in mind, I made a redesign for this side menu. The result is a design with more whitespace, larger finger-friendly elements, the absence of underlines and more visual distinction between the lessons hierarchy.

All elements are clickable/tappable across their entire lenght and will slide up and down vertically to show or hide the content. Just like the original design there will be a ‘Show all’ option, but now this label will change to ‘Collapse all’ once it is clicked/tapped on, and the arrow will point upwards.

An alternative (or addition) to this menu would be to have a page where all the lessons are listed in their entirety (units, categories, etcetera). Though I personally prefer to be able to access the units while still viewing the lesson, having them side by side so to speak.

The hierarchy is three layers deep. In the images below, the following structure can be seen:

1
2
2.1
2.2
2.2.1
2.2.2
..
2.3
2.4
..
3
..

topics-redesign

Δ Redesign sidemenu – Left: The original sidemenu / Right: My redesign

Post navigation