New website – check it out!

Check out my portfolio website –http://www.veronikalesnakova.co.uk/

If you like what you see and you have a project in mind then I’m happy to hear from you.

Designing of mock up – step 6

I opened Adobe Photoshop CS6 and started to design. This is what I came up with –

1st version

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.

Second attempt

After unsuccessful first attempt of design and consultation, I had a few very good ideas drawn on the paper.

2014-02-19 20.03.41

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 –

2nd version

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.

Research about colour scheme

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!)

Untitled-1

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.

Colour scheme/site map – beginning of step 5

Colour scheme

This is colour scheme that I decided to use for my website:

colour scheme

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

site map

Drawing – main navigation + sub navigation

2014-01-14 23.04.32

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 – navigation

My version of it

2014-01-14 23.05.10 2014-01-14 23.18.47

Technical requirements – step 3

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.

Analyzing websites about children’s healthy eating – Step 2

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.

www.eatright.org 

1website

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.

www.childrensfoodtrust.org.uk

2website

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.

www.healthystart.nhs.uk

3

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.

  1. I want to make it more serious than playful as a target audience are parents of children (finding after doing a deep research)
  2. main navigation + sub navigation
  3. line across the full screen
  4. footer with navigation + social media icons
  5. colour scheme: white background and green or blue colour