I opened Adobe Photoshop CS6 and started to design. This is what I came up with –
As you can see on the picture above, I tried to stick to colour scheme that I’ve chosen but I don’t think it looked good. Title of the site is in white colour but middle word ‘healthy’ is in rainbow colours because I thought that it might give it a bit of ‘playful’ look; rainbow has 7 colours and this word consists of 7 letters so I thought it would be perfect. But when I looked at it later on, I didn’t like it!
After consultation I decided that it is not good design at all and I didn’t like it because it does not look professional at all.
After unsuccessful first attempt of design and consultation, I had a few very good ideas drawn on the paper.
As you can see, there is a new layout of the site drawn and instead of words in navigation, I decided to have icons that symbolize words instead. The reason for that is that this task is more about the design than about anything else and people automatically link pictures to words, it is common sense and humankind did it thousands and thousands years ago when they painted pictures in caves.
I opened a new page in Adobe Photoshop CS6 and started all over again. This is what I came up with but this time, I sticked to exact colours that I’ve chosen –
As you can see on the picture above,there is a massive improvement and professional look added into it comparing to my first design of the site. I sticked to font colours and the reason why it has two different colours is that I wanted to make word ‘healthy’ to stand out a little bit so your eyes automatically look there. They layout of the site stayed the same, I just toned down colours so it does not ‘shout/scream’ at you as much as the first design did. As you probably noticed, the left sidebar for navigation is empty as I am having a problem to find right icons on internet.
In my previous posts (click here to read more), I was talking about colour scheme for my website. However, after quick visit of a shop one day, I saw a box of tea and colours were just beautifully matched. I took a photo of it on my phone so I could work with it later on. (Inspirations are everywhere around us!)
Research about colours
I did a little research about theory of colours to see if I could actually use it as my topic is ‘children’s healthy eating’. I found that purple colour is ‘the color of good judgment’ and that most children love this colour. I also did a little research about personality of people who like purple colour and I found out that those people are sensitive, supportive, thinking of others before themselves and other people like to come to them for help. (read more about it here) All of these information gave me a good evidence that this combination of colours for my website would be a good choice as I want to target parents instead of children (read more about the target audience in my post here) even thought it is unusual colour scheme for website about healthy eating. Colours that are usually used are green, brown, orange, gingery colour and soft blue.
This is plan of the layout for my website about children’s healthy eating designed in Adobe Photoshop CS6 –
This is colour scheme that I decided to use for my website:
The reason why I chose this colour scheme is because after research about colour meanings, I found out that green is colour of well being, health and this is exactly what the site is going to be about.
Site map – navigation
For navigation, I was planning on having main navigation consisting of Home, 0-5, 6-15 categories
and sub-navigation for every category.
Site map for main navigation
Drawing – main navigation + sub navigation
However, sub-navigation would have to be scroll down navigation and because of tablets and mobile phones it is not good to use scroll down menu. So my plan would not work and I had to think of alternative plan.
I had a look at a few websites and I came up with a solution that I think it’ll work but it took me a long time thought.
I will use only main navigation as I planned in the beginning and then I will design something like this and use it as link to other pages –
My version of it
The website that I’m going to design is going to be a static, which means designed with HTML,CSS and Java.
I was considering if to make it adaptive/responsive because a lot of people use different devices for browsing internet these days. It would be very helpful to be able to just find a recipe on your mobile when you’re in a kitchen and in rush and need to prepare a good meal for your kid but then it came to mind that this task is more about actual design and user experience and adaptive/responsive design would destroy it; it would simply not work. I could design different designs for different devices but that would take me a lot of time and I do not have it because of other work I have to do for modules.
When step 1 (research) was all done, I needed to find out what types/designs of websites are already out there to find out what I need to include in my website and what to do better so my website is unique and not like rest of the website on internet. That’s why I had a look at design of different websites. Most interesting ones were only 3 sites and that’s why I decided to get ideas from them.
The design of this site was amazing, I liked it a lot. It was playful and colour scheme was just great. In navigation you can choose age categories so content suits to what you’re looking for; for example ‘in the kitchen’ – cooking methods, preparation, food safety
‘meals’ – breakfast, lunch, snack, dinner
This is what I’d like to use on my site – two different navigations and colour scheme and also green line across the full screen.
Design of this site was very interesting as it wasn’t too complicated (simplicity). I liked colours of navigation and footer of the site that’s why I’d like to do something similar on my site.
This site was very playful and nicely designed. The layout didn’t change it was only content of the site. This is what I’d like to create on my site.
Overall, looking at different websites game me an idea how my website might look.
- I want to make it more serious than playful as a target audience are parents of children (finding after doing a deep research)
- main navigation + sub navigation
- line across the full screen
- footer with navigation + social media icons
- colour scheme: white background and green or blue colour
While researching my target area, I came across to this website – www.pre-school.org.uk
There was a list of things why is healthy eating important for children and because I found it interesting I thought I’ll share it with you.
(!The list is downloaded from the website named above!)
Why is a healthy diet for young children so important?
- It helps to improve their concentration, learning and behavior.
- Promotes proper physical growth and development.
- Builds up their strength.
- Promotes resistance to infection.
- Gives plenty of energy.
- Minimises future health risks like iron-deficiency anaemia, obesity, Type 2 diabetes, heart disease, stroke, cancer and dental decay.
- Helps them to establish healthy eating patterns and habits for life.
From all information I got so far while doing my research, I came to conclusion that parents that are interested in their children’s healthy eating must be aware of advantages that comes with eating healthy and want to give their children the best they can. Also they are aware of risks that comes with eating unhealthy that is why they prefer to forestall future illnesses by teaching kids how to live and eat healthy.
Maybe they grew up in household with the same rules and they want to pass it on to their children, maybe they just decided to start to live and eat healthy and that is why they involve children in it as well.