Page:Wireframes to Design & Colour

Wireframes to Design & Colour

Monday 17-06-2019 - 10:08
Blog 4 transition image

#Update 4 - New SU Website


We’re beginning to progress from wireframing key templates for the new SU website to applying the first design and colour.
During April & May we have produced a series of Alpha Wireframes. These have been key in sharing the core structure and components to later be applied across the website. Wireframes fundamentally look at the hierarchy, layout and structure of Landing Pages, Sub-section Landing Pages and finally content pages.

 During this phase of work we have focused on sharing this thinking with SU staff to ensure we have the elements essential to the services the SU offers for students. 
Homepage alpha wireframes

Feedback from these wireframes and from alpha prototypes is informing iterative improvements as we begin producing designs and look at how colour and imagery come together for the final build.

Mobile Navigation

Running in parallel we’ve shared ideas for where you might find content across the site using thinking from our Student Top Tasks work. In wave one of testing, some areas of the navigation were creating confusion.

An example being what was expected in the About & Your SU sections of the site.


 Wave two of testing with our Student Feedback Panel saw better results with still a few areas we need to improve on.
In the next few weeks we will be refining the mobile and desktop navigation and applying further improvements. For desktop & tablet we’re proposing a modern and clean full screen navigation that takes over the entire screen. This clearly shows all the Student Top Tasks and we hope a more intuitive understanding of the website structure. We’ll be rolling out a Beta Prototypes in future weeks for you to feedback on. For now you can get hands on and see the concept working in our Alpha Prototype
Desktop & Tablet - full screen navigation takeover


Mobile - section headings, leading to Sub-section Landing pages


Homepage Design - first pass

The emerging designs are first drafts and not finalised, part of sharing our progress is to give opportunities for you to feedback. Please email with any
One key output we are constructing is a component library that will help us build consistently across the site, think of it like a lego box of parts we can construct our web pages from. Helping deliver a far better experience for you using the site day a to day.
Some core components are taking shape from wireframes and the firterations of design for the Homepage. Take a look to see these emerging below, again we’ll be testing and sharing more as we go in the following weeks.
Homepage first pass Beta Designs


Related Tags :

new SU website, Update #4,

More Sheffield Students' Union Articles

More Articles...