top of page

Project Update: Good Design = Good Vibes

Updated: Sep 16, 2018


Who knew that perfecting a design for a product could take so long and be slightly painful!


Today was an interesting day as I spent a lot of time with my supervising teacher discussing and trying various options for our product design. At the start of this project my supervising teacher mentioned that he wanted to reflect Apple's simplistic and clean look through specific design aspects like font, colour and spacing.

We experimented with a wide range of options in Hype today, focusing on spacing and sizing of various elements.

Together we went through 30+ different options but I shall just summaries some of the key challenges below.


Our original Draft:










Change of Canvas size:

We first discussed the various screen sizes and resolutions that we would have in one classroom (students each have their own laptop).

We decided on the canvas size of 1280 x 699.


We also discussed the possibility of having a larger screen for the iPad so by moving the logo to the side, there was more room to make the iPad video bigger.



Line up of the logo with text:

We struggled to get the logo to look right on the side with the title text and the instruction text.






Size of logo:

We tried to see if a bigger logo was less awkward but still didn't like it.







Opposite side and size of logo:

We tried swapping the side of the logo and then made it small.






Stereo logos:

We briefly tried double logos and a centred iPad screen but agreed that it was too much.






Line of sight - Right vs Left:

In an effort to make the video as big as possible we tried to put all the text on one side.





We discussed the idea that the eye reads in an L shape down the left and then across and so we knew that the top image would go against what research tells us.



Final Design:

Finally after much discussion with both the music teachers at my prac school and small adjustments of elements we agreed on the design shown below.





26 views
bottom of page