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.