06 Jan

Web Dev: Mood Board & Wireframes

To begin my visual/prototyping phase, I put together a mood board. I tried to encapsulate the spirit of BOSH, and running in general. The branding of BOSH is blue, so obviously this features very heavily in the mood board, but I’m very happy that I managed to convey the intended emotion of the new website.

The key things I want to try and represent through the design are: achievement, community, freedom, motivation and inspiration.

BOSH mood board by Ashley Nye


My initial thought is to use WordPress, as it will be a great content management system, easy for the site owner to use and update. The current BOSH website is a WordPress site.

I have a sitemap, and a requirements list, so I know what I need to include in the site and how I am going to organise it. I started by sketching out some 5-minute ideas of how I expect the elements of each page to be arranged. It is important to keep to some design conventions, because the user will expect certain elements to be in certain places, and this aids navigation and makes the site easy to use. I came up with some initial wireframes using Balsamiq Mockups which can be seen below. I started with the Home page and the Events page. I would like the header image to be a slider, with various inspiring images to scroll across the top. I want the site to be quite clean looking and minimalist in design, because it has a lot of content to include and I don’t want it to look overcrowded and therefore less professional.

BOSH wireframe

Please follow and like: