Wireframes for responsive design

Mobile phone wire frame based on responsive design

We’ve just completed wireframes for the Victoria Legal Aid website redevelopment project. For the first time, we included wireframes to cater for large screen layouts (e.g. desktop computer) and small screen layouts (e.g. mobile phone).

The process we used is widely known as responsive design i.e. how to make the design of your website respond gracefully to different screen sizes.

Here’s some of the things we learned:

  • On a small screen, you need to focus on the most important tasks you want the user to complete. There’s no room for waffle.
  • There are some elegant options for dealing with site wide navigation on the small screen. We tried using just a small version of the header bar but in the end we redesigned it so that the main menu is accessible via a button. Here’s an interesting article on responsive design navigation patterns.
  • Don’t skimp on font size. On small screens you need large fonts that are comfortable to read.

Once the website has been built, we’ll include a link here.