Here are links to the site –
Front end – click here
Children’s Healthy Eating website – click here
Over all, I think that this module was very successful and I am happy how it all turned out to be at the end. I worked very hard on it, came across to big challenges that taught me how to handle different tasks, time management, decision making and the final result is great.
As on every single project, there are some mistakes that I am aware of but it does not ruin positive feel about the site.
This website works in
While doing user testing, I got very positive feedback from people. However, some of them said a few things that they would do a bit different or change them completely.
These things were:
1. changing brightness of pictures used on home page so it creates bigger contrast and readability is higher
2. centering full page so icons with text are in the middle of the screen (Under age 5/Children’s health 6-15)
Explanation of changes
1. Fist of all, I didn’t think it was a major issue and changes were not needed but later on when I opened the website, I started to notice problem with contrast of the picture and text. I decided to change full image. After little research on it, I found the perfect picture. It was basically the same picture but different version of it, plus it was darker than previous one.
After (the picture downloaded from here)
I personally think that it looks so much better at the moment and change was very good idea.
2. Another change I wanted to make was centering icons and text. I spent so much time trying to figure it out and I thought I did it but it wasn’t working well at all. When I did set up ‘width’ from 100% to 70%, it put it in the middle of screen however, it moved icons underneath which looked ridiculous and I couldn’t leave it there.
I simply couldn’t solve this little problem so I decided to leave it how it is. I am aware of this problem thought.
In one of the posts I said that I am not going to make this website responsive [read more here]. However, at the end of the day, this website is fully responsive and it is working on different devices.
This is how pop out window looks like after customizing it. I decided to go for the same background colour as background of the site because it creates continuity to the design but at the same time divides icon and text from main text and so makes it simple for users to read the text.
Header is there to simply orientate on the site as users can change what they want to read about without having to close pop out window, it is simple move navigation in left corner of the screen. Icons on the right side were used for the same reason as header.
All information were copied from NHS website and all links are on the bottom after every text so users can read more about topic if they are interested. Also, they are there for copy rights as used text is not mine.
For slides show on home page I decided to use pictures of children downloaded from these links –
1st picture – to view click here
2nd picture – to view click here
3rd picture – to view click here
4th picture – to view click here
For text in slide show I decided to use different quotes that I found while doing my research about children’s healthy eating. The reason why is that this site targets parents and by using quotes from famous people, it will grab their attention. It also creates very good effect and meaning when used with pictures.
In my previous post, I was talking about unsuccessful attempt to combine two different designs (codes) that I downloaded from codrops. However, I did not give up and tried to figure it out, why it wasn’t working and I did it!!!!!!!!!!
Basically, I had to read line by line again and copy and paste right lines of codes at right places and I think that the mistake I was making before and why it was not working was that I copied the wrong part of code and paste it to wrong place. After I did it again, it started to work.
Home page –
Age category page – as you can see, the payout and navigation stayed the same, I embed element from different design into it (and it was working this time!)
After clicking on ‘view project’ (which I need to change to ‘read more’)
My next task is to customize style sheet the way I want it, which means I have to make it looks the exactly the way that home page looks (background, fonts, colours etc.) Also I have to change background on pop out window, make space for text bigger, change font etc.
After consultation with graphic design lecturer, I came to conclusion that my previous design was not bad, but I could do better to make users more interested in design and interact them more by user experience.
I had a look at video of Leo Burnett website [click here to view it]. Full website was created as application and little bit as a game. Every click moved you somewhere else and showed you different design and it was very interesting and it grabbed my attention, I wanted to see what else is there so I clicked through full site. If the site can do this to user, then it is designed very well.
I was thinking how I could do something similar with my website. While doing my research I came across the site MegaProject
It was designed with HTML5 and CSS3 and what I loved about it, was big slide banner on top. I knew straight away that I want to have something like that on my website.
I went to codrops, typed ‘slideshow ‘ into search box and it came up with amazing things. After looking through all of them, I knew how my site will look like. I downloaded 3 different slideshows and started to play with codes.
This is my home page –>
It is not fully finished as you can see on the picture above as I did not want to waste my time trying to customize it the way I want it (colour scheeme and text) because I wanted to see if it’s going to work the way I imagined it first.
When I got this done and it was working perfectly fine, I started to play with next code for sub navigation.
This would give users perfect interacting with the site. This is the reason why I wanted to use it.
However, when i tried to customize it for my website it was not working. I spent hours trying to fix it and find out why it was not working, I upload it on server but nothing happened. After clicking on ‘view more’ it just simply showed me another page but with no effect.
It is a big shame that I could not figure it out as it’d be just perfect for the site. I’m going to keep my home page but customize it the way I want it to look like and I’ll think about something different for age category pages. I’m sure it will look great at the end.
After research about how other children’s healthy eating websites classify age categories and also having a look at definitions of what baby, toddler, infant and newborn actually mean and what age categories they are, I decided to change it from ‘0-5’ to ‘Under age 5’. I found out that the definition of baby is any child from birth to age 4. NHS website uses ‘Babies and Toddlers’ and also ‘Your child’s health 6-15’ so I am going to use ‘Child’s health 6-15’ as well instead of having just age ‘6-15’.
I decided to change position of the side bar with navigation after user testing. All people that did user testing for me suggested to put side bar with navigation to the top under main navigation and make icons bigger so there is no problem to see them.
This is what I did and here is the result –
I personally think that it works better for the user as it gives smoother way of seeing sub navigation and it also gives it better look on the site.
Another suggestion was to change age categories from 0-5/ 6-15 to something different. I am going to do research on it and see what I can do about it.