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.

Usability testing/evaluation

I did usability testing while designing the site regularly so there were a lot of changes I made to the site after feedback from a lot of different people (some of them work in the same industry so they know what to look at, some of them were people that only use internet on daily basis). Their advices were quite useful and I’m happy with changes I made to the site as it looks very nice now.

However, when I did my final user testing at the end, I got very nice feedback from people. Most of them said that they would not change anything to the design part of the site; some of them pointed ‘flag issue’ and I am aware of it (read the post below to find out more!); and one person asked me question if the site is responsive. No it is not responsive YET, but my plan is to make it responsive in the future (probably next semester).

Browsers

This website is working in every browsers and Ipads.

Improvements that I would like to make

There are a lot  of improvements that I would like to make to the site. As I mentioned before, I want to sort out ‘the flag issue’, make the site responsive as more and more people nowadays use tablets and phones. In semester 2, we’re going to be learning PHP and MySQL so I will definitely make this website dynamic. I will add playlist of my songs, video, contact form etc.

Overall, I am very happy with the site I have designed in semester 1 as it had to be static website but I already know how I am going to make it even better in next semester so keep looking at my blog…thanks for your attention during semester 1 everybody!

Issues with the site

While designing this website, I came across to a few issues.

1. Colours of flags

As you probably noticed, there are two flags on the top of the site (English and Slovak) as I was planning on have the site in two different languages as I’m a Slovakian. The problem is colours of flags as it does not fit with the colour scheme of my site.

Solution

I thought about how to sort it out and did a little research on internet about multiple language websites. Great example I found was www.ulozto.net! The site is in three languages and when you look at flags to choose from, ‘hover effect’ is used what gives great looks so basically you can see full colours of the flags only when you show cursor on them.

fds

This is what I want to do with the flags on my website but I am going to leave it for now and improve it in semester 2.

2. CSS sheet – body

Long time ago, I found on internet or in a book, cannot remember where I found it thought, example of what to put into ‘body’ part of CSS style sheet. It was this:

body

I’ve been using this for quite long time as it was working fine but while I was designing this website, I had massive problem with lightbox in gallery. When I opened picture with lightbox, length of the lightbox was always different.

Solution

When me and my tutor had a look at it together, we realized that the problem is in ‘body’ part of my CSS style sheet. After I got rid of all rubbish settings in body and left only what had to be there (body2) , lightbox was working perfectly fine!

 

Correcting text in portfolio page on my website

When I did user testing with my lecturer, he made a very good point about the text link. I used full sentence as the link and it is a bit long (as you can see on the picture below).

text

That is why, I am going to leave the text as it is but use words ‘click here’ as a link to YouTube video instead.

Also I am going to get rid of underline under text ‘Songs played in the video’ as it might give the wrong idea to users about where to click to watch video.

After correction:

This is the result after I corrected it. I like it better if I’m honest.

text2

Explanation of the layout of the site

First ‘index.html’ page is created different because I wanted to make sure that when the users open website for the first time, they are going to see my photo and also text telling them what this website is all about. So after a few unsuccessful tries, I came up with this layout –

layout

This way is everything I wanted to make visible perfectly clear. Also, because of symmetry, I made sure that the box with text is symmetric to ‘V’ letter.

*The layout of the pages was exactly the same for all of them. You can see it on the picture below.

layout2

Again, I made sure that the symmetry is well preserved and that is why I put the box with text exactly symmetric with the line of my photo. The reason for the line of my photo is that this way it makes nice changeover from the picture to the background.