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.

Evaluation

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.

Browsers

This website works in

  • Opera 20.0
  • Internet Explorer Version 11 (slide show is without special effects)
  • Mozilla Firefox 27.0.1
  • Google Chrome Version 32.0.1700.107 m
  • Macs
  • Computers
  • Laptops
  • Mobile devices
  • Tablets

 

User testing/responsive design

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.

Before

9

After (the picture downloaded from here)

Untitled

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.

Untitled

I simply couldn’t solve this little problem so I decided to leave it how it is. I am aware of this problem thought.

Responsive design

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.

Customizing the design part 2

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.

5

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.

6

 

Changed pictures in slide show – home page

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.

7 89 10

Making it work

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.

This is the result:

Home page –

Untitled2

 

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

Untitled

After clicking on ‘view project’ (which I need to change to ‘read more’)

Untitled

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.