WEB DESIGN MOCK-UPS

Deadlines are approaching fast, and I am running out of time to arrange a meeting with Francesca Davies to discuss and evaluate some of the ideas for elements of their website and online presence. Having emailed her to discuss options, I have arranged to have some designs for her to look over at work on Monday morning via email, and hope to receive feedback later the same day. So far I have a few mock-ups finalised and some more that I am currently working on.

This is a design to fit the style of the report into Facebook's template, using the cover design of the annual report as the cover image.

And this is a similar style to use on Twitter, with the multicoloured houses for the background which also incorporates the logo, a blue header background with the houses used again for the profile picture as the logo didn't fit.

This first finalised design for a website draws on the sizing and layouts from the site for the Angel Islington community. I wanted to use the blank white space to good effect, which helps to draw the eye to the most important elements on the page. The 'Our Happy Place' logo is used in large in the top corner of the screen for easy recognition, and the links for the rest of the page are level with that. These are all housed within a coloured house from the front cover of the annual report, which works well with the home link but perhaps I could use the other icons that I designed for the other links. Below this is a welcome message to the website (taken from worcesternortheast.org.uk), as well as a slideshow of images. From my research I have found that most websites of this style use some sort of photographic imagery as a form of welcome and I think a slideshow would work very well in this case. This is all on top of a pastel blue background. To the right is a download link for the latest copy of the Annual Report which would provide more in depth information than the welcome screen should provide. Below these features could possibly be the latest news stories relative to the area or a live blog or Twitter feed.

I think for this initial design stage of the web element I will focus on options for the home screen and navigation, as it will give more opportunity to work on various styles and show the client a variety of options to decide from. For this reason I will look at very different alternatives to this quite functional idea and deliver a wide range to the client.

This next one takes some inspiration from layouts popular with sites like Tumblr and customisable portfolio sites with a large header and emphasis on photography.

This makes less use of negative space, except in the header, and makes more use of the house icons to create a border around the page. Personally I prefer the previous style however. I prefer the purely typographic links to those within the icons, but it's a shame not to use those icons as they could be well suited to links to certain pages. Below this is again the slideshow of images which would be included in any variation, and to the right a larger description of the organisation taken from this year's Annual Report. Underneath that is the row of icons describing the nature of their priorities, and the user can hover over the icons with their cursor to read the information.

There are aspects of each that I would look to take forward into the next design, the minimalism of the first and the layout of the second perhaps.

This combination of the two previous versions is definitely my favourite so far and one that I hope the client agrees is the best option so far. This one keeps the same middle section as the first design, with the slideshow and download option for the PDF mounted on a pastel blue background. It takes the header from the second version, with typographic links and the logo simply on white as I like the minimalist style. I lost the border from the second one as the houses seemed too large and it felt tacky and distracted the eye too much, and instead used a smaller version of the illustration either side of the links and included the trees and flats to break up the monotonous square feel. Underneath there is just a glimpse of the other sections of the homepage, namely the Latest News and a Twitter feed which is how I would continue the design. If I get the go-ahead that I would like from the client then I will expand on this and maybe create other pages that fit in the design scheme.