Buttons

When designing the buttons, we had to think carefully of styling; They had to be both style neutral as they needed to work well when placed in different styled sections and prominent at the same time.

The 'On' state was kept consistent through the entire site while the hover state acquired different colours in certain sections of the website.

Primary buttons, secondary buttons & interaction states

Calls to action

The calls to action were initially designed in the form of grey boxouts utilising the main button for performing the main action.

Main & aside call to action

The calls to action were initially designed in the form of grey boxouts utilising the main button for performing the main action.

Call to action sketches and notes

- Maximum four shades of grey to be used
- Course pages use black boxout
- Need to distinguish from other elements

Revised calls to action

Further user testing indicated a significant number of users were missing the call to action, especially in its aside placement, confusing it for regular content. Extra revisions were in line to differentiate it more from regular content.

Revised CTA variations & interaction states

After going through the website content, 3 different variations of Calls to Action were designed to accommodate any content needs.

next ual element

Navigation

Web Design  •  Visual Design  •  UI  •  Framework  •  Typography  •  Style guidelines

next project

SoIndie

Digital  •  Website  •  Start-up  •  Music label