First Client Meeting: Feed back!

The two mock-ups that Wish Upon a star like:

I had my first client meeting with Wish Upon A Star to get feedback and confirm a few requirements that they need for their website. I took in the 3 mock-ups that are featured in the previous post. The general response was positive. They liked the illustrations as they represent what their charity is about-uniting families to give their children their ultimate wish. Although they liked the illustrations they felt that the layout needed to be structured to find a balance between a plain, structured website that will attract corporate businesses and the general public that look for a 'fun' aspect to keep their attention. They liked the idea of the donation button being an animated hot air balloon. They want it to be animated with hot air underneath it is the mouse is moved over it.

Although Wish upon a star liked the layout of the first mock up (with the polaroids) they felt that it had been done before by other charities.

New goals that have arisen from the meeting

• Create a website that corporate businesses will be attracted to.
• Merge the illustrations with the layout from the 'pink' website.
• Experiment with different donate buttons
• Experiments with different types of background (faded, textured etc).
• Research what corporate companies are attracted to
• Do some more illustrations of the families looking at the children having fun. This will tell people that the charities focus is about the families enjoying watching their children enjoy their wish.
• A way of highlight where you are on the website. Highlighted text when on a certain page?

What Else does wish upon a star want?

• Latest events in banner
• interactive map
• glimpse of events on the homepage as an intro

Also during the meeting it was mentioned a lot that Wish upon a star's main competiton is Rays of sunshine. 'Wish' aspires to have a website that is like theirs. They like how it is linked to multiple social networks, the information is separated so that there isn;t an over load of information. They like the contrast in colour and the faded background. They also like the idea of an animated icon that gets people to donate. Also the navigation is clear as the user automatically knows where they are on the website as the navigation text is circled once clicked.

https://www.raysofsunshine.org.uk/

One more Mock-up...2 versions

With this mock-up I wanted to combine a structured layout with a creative, 'fun' look that will attract a broad audience. I made the background out of tissue paper as I want to experiment with re-creating a scrap book look that hold memories of the children's lives and want the charity represents. The background is going to tell a story of how Wish upon a star grants the wishes of terminally ill children. I have chosen to do the illustrations in a linear, childish manner so it doesn't over power the content and fits in with what the charity/ website is about.

The header is one of the most important things of the mock up as it would be a slide show of the different cases the charity has helped with therefore instantly informing the audience about what the charity does. The donate button is also in a prominent place to that it makes it quick and easy for people to donate.

I have one one mock-up with the centre in white to make the text stand out more. It makes it easier to read. I think I prefer the first one as the white content area gives it a multi layered effect.

First Mock-ups

This mock-up is based on a children's book style scene. I think using the illustrative skills will draw in both adults and children therefore appealing to a broad audience. I have used the original drawings to mess around with the layout and use them as an initial guide for the client can get an idea about the style the website could be completed in and the layout of the website. The hot air balloon is a very important part of the website that will allow people to donate quickly and easily. At the moment I prefer this mock-up as it attracts a broader audience and automatically tells the audience what wish upon a stars goals are. I think this website would make full use of my skills both technically and through design.

I have gone for a completely different style for this website as it is simple and clean cut. I wanted the photos to represent memories that have been created by wish upon a star. i would make the photos into an interactive show that would reveal different stories. I think this website need more work. Maybe change the colour/tone of the navigation bar.

Illustrations for Client website

Below are a few illustrations that I have designed for a landscape based mock-up for wish upon a star.

The hot air balloon would act as a donate button as it is a sign of hope and one of the activities that could be done as a last wish.

An illustration to represent the unison of families. I plan to place this image of father and son watching the stars as a sign of hope.
A hills scene that would go at the bottom of the site.
A man trying to catch a star or 'wish'.

More ideas-Wish upon a star

I have been thinking about what Wish upon a star is about. A mind map has helped provide me with an out to get my ideas flowing. I want to create a website that the audience can enjoy visually that also informs them of the charities goals whilst providing them with an easy way to donate.

The logo has got to be a part of the design, which means I have to create something that goes with a navy blue and sans-serif font. Below is a design that I have focused mainly on the navigation. I am thinking about doing navigation that lights up when selected to keep the audience interested. Also I have placed the a series of boxes in the header that would show the audience 3 simple steps of how to donate.

This wire-frame is all about building the content into a scene. I have chosen a night time scene with bright stars in the sky to represent hope therefore a wish for each child in need. Wish upon a star is also about bringing families together for a moment through all the hospital visits etc so I want to include some illustrations that represent families uniting together to share their child's last wish.

This idea is based on the idea of creating a children's scrap book of memories that all the family can share and something that everyone can relate to. It would have stickers, photos on etc

Smashing magazine tips on charity websites

Smashing magazine has published an article about non profit charity websites that has given a lot of tips about how to attract people to donate and inform them quickly. My charity website needs to make it easy for people to get involved, find out Wish upon a stars cause and allow them to donate quickly.

The donation button is going to be a big factor of the website as it will attract people to donate regularly. The process needs to quick and simple.

The site needs to be media friendly. I intend to use this through widgets but offer good ways that smashing magazine suggests is to make the information easily accessible to journalists, bloggers and any one that can generate hype. Also make sure that the organizations purpose is instantly apparent.

A way to achieve ALL of this is to make sure that the design revolves around the content and the charities mission not the other way around. Another challenge that will add to this is that I have to abide by their print design, which includes their logo. This will ensure that their brand remains consistent therefore people will find them more recognizable.

Below are a few websites that I think use unique yet clean design to promote themselves successfully.

http://ww5.komen.org/

This website makes good use of space however my favourite part of this is it's slide show in the title. It adds an interactive element that people can relate to. Slide shows are a popular way of getting the audience to interact with the charities cause but this website does it particularly well through its use of colour and speed changes with the mouse. Donation link very prominent in the header.

http://www.one.org/us/actnow/globalfund2010/splash_wad.html?rc=globalfund2010wadsplash

I like this website because it is strikingly clear what their purpose is and how we can help. The website is also made more personal by the people in the title that make it clear that it can affect any one, any where, any time.
http://www.takethewalk.net/

This website uses striking colours and graphics. It also has a easy to use navigation that makes use of this. The main part of the website I like is the subtle use of space beneath the slide show as quite a lot of information is presented with a tone change to highlight it and simple illustration to tell the audience quickly what the information is about.
http://www.nyccah.org/

I like the simple header and navigation making it easy for people to find what they require.

Made Like Gaia...The design

Here is an updated version of my portfolio. I've made a few small touches, such as the widgets the logo is made more prominent by the sign Incorporated into the logo design. Also I've added a bold, colour introductory sentences so that the target audience automatically know what my website is about and what I can offer. I have also changed the illustration, which I am going to continue to work on. For the background I used ink to represent 'brainwaves/ideas'. I want to add tools that I use to it and maybe a few other things that are important to me that sums me up as a designer.

More wireframes for my portfolio

Vertical slide show with animation along the side to express my creativity?

Also a paper/ homemade style portfolio to show that I can work digitally and for print.

3rd wireframe of a landscape with tools/things that make up my style.

Maybe at the bottom have a 'cut out' style set of information that will sperate the information and make it interesting to look at.

Initial client wire frames

Donation button has to be the main focus and easy to use. Widgets will also be a big part of advising the audience how to donate and how to become part of the charities community.

Centered content so that an image/illustration can inform the audience what the charity is about.
Animated headed separated into small boxes to grab the audiences attention and inform them about different sections of the charity. One box can be a donation box that will be brightly coloured so it is instantly recognisable.

Design process in the real world

Lately I have been thinking a lot about how I am going to transfer my skills I have learnt from my degree into real world design situations and have come across this diagram that I am going to implement in my up coming client project.

I found it on http://www.rustymonkey.com/web-design-nottingham/. I really like rustymonkey's approach to website design to the client through using their own unique design traits to tell the clients story. They produce impressive pieces of artwork through the creation of their website yet they are also informative.