D2 -2 : Visual Hierarchy

For this project I was working with Ned Bajic.

The brief stated:

The task is to take 7 well defined round buttons of exact same size, and place them onto a screen as part of a mock interface. The buttons have 2 distinct different ranges of functions; one set of functions is deemed to be used more often. The function of the buttons/hot ares is immaterial, however if you wish to nominate a function to help define their treatment you can.

As a team, experiment with different ways that the hierarchy can be established. Finally resolve the problem with a high level of aesthetic consideration.

Aesthetic consideration is what we could measure how successful our product was.

From this we knew:

  • 7 buttons
  • 2 distinct functions
  • one function used more often
  • all buttons are the exact same size

What we didn’t know:

  • End demographic
  • Stage size
  • Colour

We started by doing a little bit of research since we were given 6 hours in total to complete the task. Websites we had a look at:



And we also had a look at the typographic workbook.

We were interested in the interactivity of the sites, layout and placement of buttons. The task was limitless in creativity. We could do anything we wanted. Our first iteration was this:

We felt that this was fairly safe and a typical website look. (archetype)

Our second iteration looked like this:

While these iterations were meeting the function requirements of the brief, they were not considering the emotional requirements. In other words we were playing it safe. So after some consideration and a short talk to the lecturer we decided to abandon the archtype ideal and go for something completely different.

From here we set ourselves a restriction of demographic. We decided to focus on children aged 8 -10, who were in primary school and had internet access. It was broad but we felt this would help us invoke a positive mindset for our end user.

We had a look at websites such as:




From this we were able to gather that bright colours and a busy interface were normal for children around that age. We created the end look of the interface which is this:

We stayed away from the archetype of an interface. However we did stick to the gestalt. People saw the interface as a whole. We decided to make the interface a question mark that was supported by the character. There are two sets of functions but we were told that the functions could be confusing since we made one of the buttons the characters eye.

If we had more time, another iteration would have been pushed out, playing with colour, form and layout. I would have liked to have seen how far we could push apart the buttons and character before they were not associated with one another. I would have also liked to play with type with the character and come up with a more defined brief.

Leave a Comment