New website – check it out!

Check out my portfolio website –

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


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.


I thought about how to sort it out and did a little research on internet about multiple language websites. Great example I found was! 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.


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:


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.


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


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.


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 –


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.


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.

Designing process – part 2

After my last post about how I created container with reduced opacity, I’ve designed nearly a full website.

Screenshots of pages:

  1.  index.html








After discussing design of the site with my lecturer, I’m going to make a few changes to the site.

These will be the changes that I intend to make –


  1. no italic font (not easy to read)
  2. titles the same size as size of navigation
  3. get rid of all underlines
  4. get rid of the web address in contact.html
  5. text in footer area: 2013 Designed by Veronika Lesnakova – the same size as size of main text
  6. get rid of text: Connect with me


  1. change red color in navigation into green color (the same green that I used for my logo)
  2. set borders in gallery to the same green color as navigation


  1. change text in footer for links into icons – wordpress, facebook, youtube


Container with reduced opacity

In this post, I’m going to explain and show how I created container with reduced opacity on my site.

All you really have to do in your CSS sheet is add ‘background’ in to container (I named it ‘middlebox’ in my CSS) and set up choosing colors in numbers in Dreamweaver. Then pick color you want in palette of colors. It will automatically add right numbers into code (I chose black).  To reduce opacity of color, reduce last number in code. That is all you need to do.

Screenshot of CSS code:


Screenshot of the result:


I did the same thing for ‘footer’ but opacity was set up to higher number screenshot2so this way you get darker effect as you can see on the picture above.