MOUNTED PROTOTYPES

My final prototypes for the internet-based elements of the brief are completed and mounted ready for submission and client presentation. A clearer look at each is provided here:

I felt that it would be appropriate to make mock-ups depicting their use as they would be seen, and using the iMac allowed the images to open in a browser, in this case Google Chrome, to give the clearest indication of their suitability and impact. Rather than just showing them how they'd look on the screen, I included the whole of the computer too so that the most complete image possible was displayed. I am pleased with the designs of these web elements, and feel that they meet the client's requirements as well as their opinions expressed later on within the project. They provide a clean and concise service to the user and I feel that navigation would be easy, as would finding all the required information. They also accompany the annual report design, using the same design style to ensure continuity with all the media involved.

This is the part of the project that I am happiest with and the one with which I best displayed my work, and I am grateful to have worked with Our Happy Place in order to produce a printed piece for a live brief. This is one of the pieces of work that I am most proud of and one which I will include in my portfolio for a long time, and the experiences of client work, meeting deadlines and printing have provided valuable insights and challenges that will benefit me as I move forward into a career post-graduation.

FINAL PROTOTYPE

This is the final prototype for the Our Happy Place web element, an expansion on the version that my client preferred with a few minor design tweaks. The logo remains in place in the top left-hand corner to provide recognition, and would stay in place on every page of the site. The header would also remain in place, but that has undergone some changes. Instead of each link using the house icon they now have bespoke icons and only the home button keeps the original image. There is an 'i' for information for the About page, a newspaper for the News page, a pencil and spanner for the Projects page, a contacts book for the Directory and a calendar for the Events page. Quick links to Facebook and Twitter have also been moved up into this header. In the body of the page the main element is still the photographic slideshow with welcome text. I felt it was important to include an option for local people to voice their opinions and although I decided against this option on the website itself, I have included a link to a blog site or forum where members of the community could sign up to post. Below this are feeds for the Latest News and Twitter which provide up-to-date information cleanly and efficiently and using plug-ins would ensure that the latest information is displayed. On the right hand side I have added a basic calendar following on from a suggestion by my client which quickly shows which days events are happening, while this would be expanded on within the 'Events' section. I have moved the download link for the annual report down the page to fit underneath this and again I have added a brief version of one of the pages to the bottom, this time 'Quick Links' which is a shorter version of the directory. I feel that this is all that the homepage requires, and acts to direct the viewer in whichever direction they wish to take, displaying all the necessary information clearly and cleanly. At the bottom of the page is a footer with the annual report cover style which provides a nice end to the page.

MINIMALIST WEB DESIGN

I am a firm believer that the simplest option is always the best, and design accordingly. I feel this is particularly true in web design where the most effective sites for me tend to be clean and minimal, laying out their information clearly and with easy navigation. My client backs me up on this point, stating that she is a 'sucker for simplicity', which makes the design process easier knowing that we are on the same wavelength.

Websites such as minimalsites.com showcase some of the very best sites of this kind out there, which show that a website doesn't have to be flashy and overly designed with animations and slideshows to be effective and become noteworthy. The websites listed on this site tend to be portfolio sites for designers and photographers where the style allows them to cleanly showcase their work, and I think this also suits a community site like 'Our Happy Place'. Due to the diversity of the community in terms of age and education, ease of access and use must be paramount to cater for all comers, and so a minimalist style is perfect in this application.

UPLOAD - TAKING PRINT TO THE WEB

I took this book out of the library as the title sounded perfect for my current brief, taking my design and layout from print media online to create Our Happy Place's web presence.

This book features 'fourteen case studies showing how top designers are taking their companies and their clients successfully from traditional print design to interactive Web design.' However, this book was published in 1998 and with the speed that web design is progressing, a book published in 2008 would be considered out of touch.

For that reason I do not feel that I can take much inspiration from the websites showcased within: none of them would even exist in these forms anymore. It seems that in 1998 there were only a few very basic things that could be done online and with very low resolution text and images, whereas almost anything can be achieved in web design and even a novice like myself could create something approaching professional and an expert can create almost anything. This book deals with companies taking their accomplished print designs and trying to fit them into that time's internet templates, and so that aspect won't help me. But surely the ideas remain the same?

In the introduction to the Cosmopolitan magazine case study it is stated that, '"The biggest challenge was making sure the Website was as clear and accessible as the print version," says Cosmopolitan Executive Editor Catherine Romano. "With the magazine, you read a headline, then the deck, and then the lead or the photo captions. We had to make sure that someone perusing the Website would never be confused."'

This corresponds with my web design, as the site must include elements of the visual hierarchy of the Annual Report in order for it to be followed easily and display information in a suitable manner. I feel that I can achieve this by using a similar style to the headings on the website as I did in the report and maintaining the clean orderliness of the text.

I do not feel that there is much else of use in the book, as the case studies themselves are just about the web design itself which is completely outdated and the introductions are often just an introduction into the design company's process and being new to the medium which again is very out of touch now.

Donnelly, D. (1998) Upload - Taking Print to the Web. Gloucester, USA, Rockport Publishers, Inc.

CLIENT FEEDBACK

I sent the Twitter and Facebook mock-ups to my client at 'Our Happy Place', as well as the three designs, and received this feedback this morning:

''The Twitter and Facebook both look fine and I really like how they both continue your ‘annual report’ design throughout giving a recognisable visual consistency to these arms of further communication.''

This was the feedback I expected for these designs, as the annual report design was incorporated into an existing template for the two sites and provides continuity which I like. This gives me confidence that I am on the right track with the designs.

With regards to the  OHP webpage here is my feedback:

1 – This one jumped out at me as my preferred design overall. I really like the simplicity of it and the clean lines and space. I‘m a sucker for simplicity. I also loved how you put the menu in the ‘coloured house’ house icons.

I was a little surprised with this feedback, as I did not feel that my first design was the strongest. I agree that the simplicity is what makes this design, but for me the house icons do not work as well as they could as they seem too large and clunky. However, as the client feels that this is her favourite design I will work on this and make improvements to this existing design.

2 – This was my least favourite design. The border is a good idea but I think makes it too busy over all.

I agree with Francesca Davies that this design is the least effective and included it really as more of a comparison with the others to demonstrate their simplicity. The use of icons I think works well but I do not like the border. This version of the design will not be used.

3 – I do like this one and I agree with you that it combines the best of the previous too but I still feel that top bar area appears too ‘busy’. The bottom two boxes names ‘latest news’ and ‘twitter’ are a great idea but they look like some of the box is missing at the moment.

I was hoping that my client would agree with me that this is the most effective design, but it is a little disappointing that she does not like the house design on either side of the logo. Apart from that it is essentially identical to the first option and so the information shown will be the same anyway.

From this feedback I will adapt the first option and include more elements to that, including expanding the Twitter and Latest News sections and adding a calendar:

One of the major challenges for all our partners is communicating what is on locally so it would be great to have a calendar on the home page to draw attention to ‘what’s on’ immediately – what do you think?

I think the overall look of what you have come up with is excellent and I’m really excited now because you have taken the first step with creating our ‘web’ look. Great work Billy.

Thanks Billy, Fran

This gives me a positive idea of where I am going with this brief and it is reassuring to know that my client likes any of the designs. This is the final design that I will work on and finish up a homepage for in order to fulfil the brief.

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.

SITE MAP

I thought of using the map-style cover design as a site map for the website, or even the homepage as I felt that some of the links could be appropriate for this application.

The homepage link would obviously be used with one of the houses, which works well. I also thought that the events link could look good as a banner strung between two trees, while the directory could be used with either a phone box or telegraph poles as above.