Wireframe digital sketch on an iPad, next to an Apple pencil, a cup of a coffee and a miniature succulent plant.
Photo by Visual Design on Unsplash

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.

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. 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.

A little digital blog, by a little analog person

© 2021 Ashley Chin