Design boards ougd504 design for web

CONCEPT & PRODUCT

..

.

D . .

U .

B

After School

...

D Y .....

My concept is to create and After School Service that will encourage teenager from the age of 16 plus to start a job that will allow them to teach younger children their skills and pass on the enthusiasm for certain activities. The aim is to give working parents and carers an alternative after service which offer school pick up by and After School Buddy who will work home with the child and engage in the chosen activitity by the parents and child. Activities include sport, art, homework and free play.

After school care in the child’s home, looked after by CRB checked After School Buddies.

Jane Hansesgaard | OUGD504 | Studio Brief 2

RESEARCH Primary Research

Jane Hansesgaard | OUGD504 | Studio Brief 2

Secondary Research

Looking at websites and trying to identify the grid systems help me in my design decision for my own website. I found the sites with a clear grid system very easy for the eye to follow, however, this can sometimes comprimise design that stands out.

I felt it appropriate for my site to be very easy to navigate and fairly straightforward design which will appeal to people leading a busy life and who will use is as a tool to make their life easier by booking a service online rather than be amazed by design.

I also look at websites providing child care and other relevant concepts such as summer camps.

I made a questionnaire and gave out to parents in order to determine whether my concept would be appropriate and relevant as a proposal for a website.

The response was positive and a few people mentioned that they thought I should go ahead and make it real.

DEVELOPMENT STAGE 1

Jane Hansesgaard | OUGD504 | Studio Brief 2 FLOW DIAGRAM

Home

About

Book A Buddy

Become A Buddy

What People Think

Once I had identified my concept I created a list of the content and from this I was able to create my flow diagram and make a start on my scamps which first of all were focussing on the homepage which then led to making wireframes. Further on in the development I realised that it would be beneficial for me and the audience if the wireframe stayed the same on all pages.

INITIAL SCAMPS

At the starting point I felt it would be best to have a reasonable amount of information on the homepage but with a clear layout in order that people would understand what the purpose of the site was immediately without clicking further.

Through the crits it became clear that my idea of a simple layout was too busy with too much information. As a result I reduced the amount of information and images on the homepage and went with a very simple design.

FINAL WIRE FRAME This is now reduced to have a header and footer with one big image in the middle container and the logo in top left corner.

DEVELOPMENT STAGE 2

Jane Hansesgaard | OUGD504 | Studio Brief 2

Type faces

Logo Development Through crits this initial sketch was shortlisted to carry on working with.

I did some development in black and white first of all before I added the colour.

VinylCuts Typeface used for the logo

by Mehmet Abacy

This is bold and heavy typeface but with a friendly feel to it with the roundness and yet bridging between suitable for children and teenagers with the cut in the letters.

Helvetica Regular used for body text I chose Helvetica due to its high readability and open letters which gives it a friendly and at the same time professional feel which is appropriate to my concept where I want the audience to get a sense of trust.

Colour Scheme Initial colour scheme

R243 G153 B21

R51 G152 B195

R153 G204 B204

Final colour scheme

R51 G153 B204

R153 G204 B204

.... B U D

I looked into colour psychology in order to find the most appropriate mix of colours for my audience. My initial colour scheme was selected due to blue being a cool calming color that shows creativity and intelligence and is a colour of loyalty, strength, wisdom and trust. The orange is bright and warm and stimulates mental activity, fun, easygoing and youthful. However, I felt it was too flat and I felt it needed more colour and personality and altered the orange and blue to be slightly stronger as well as introduce purple to lift the whole look and make it more fun.

After School

..

R153 G204 B204

D Y .....

...

R255 G153 B0

FINAL DEVELOPMENT STAGE Navigation Buttons

I decided the easiest way for me to code the site would be to create content as image for the middle container which is the only thing changing from page to page.

I created roll over button but decided in the end that I would have them floating without background colour.

.... .... ..

..

........

...

TY

N

FU

.... ...

AF T

.

.. ......

SCHOOL ER

..

........

.....

...

...

.......... ...

.......

.

.......

...

.. . . . . . . . .

Content for the middle container

Jane Hansesgaard | OUGD504 | Studio Brief 2

& A C TIV

I

For the header and footer I took the same approach as for the middle container and create an image. I made a simple dotted line and used the colours to bring it to live to add some personality and fun to the look of the site.