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.

Rethinking about the design/coming up with a new idea/designing process

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

Untitled

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.

Links to source codes on codrops:

FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3

EXPANDING FULLSCREEN GRID PORTFOLIO

This is my home page –>

Untitled

 

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 is how it was suppose to work:

Pictures would be replaced with icons and after clicking on ‘view more’, it would pop out (see next picture)Untitled

Untitled

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.

 

Research about age categories

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’.