Task:  Create a responsive web design based on your first website skeleton created, with basic HTML and CSS, which had to have these specific pages: “Home Page”, “About Page”, “CV”, “Challenges in making the website” and a “Recipe”.

The first website that I made was quite chic but not very well documented in terms of what I was really going for and what I could do with my basic begginner’s knowledge of HTML and CSS. All I had prepared before I started coding the first website was just a virtual Mockup made in PhotoShop.

letscodedesktop

(Mockup ^)

first site printscreen

Of course, in the end the site did not turn out really the way I wanted it to but the biggest problem with it wasn’t really the design – which you will notice that I tried to stick to the same rules of simplicity for the final design, or the lack of experience in coding a website. It was the fact that it was not responsive and that plays a HUGE role when it comes to reaching a bigger audience as we need to adapt to the user’s needs – I cannot exclude that part of my potential viewers that are using mobile devices.

Design Solution:

For this task I decided to go for a website design that highlights the logo by putting it on the “top of everything”, right in the middle, for the desktop version, as well as making it the “burger menu” button and showing up huge on the mobile version.

As one of the first parts of the Design and Evaluation process, I have done some sketches for the website in the way I invisioned it to be for the most common devices (desktop and smartphone).

My Website sketches:

Mobile:

mobile sketch

Desktop:

desktop sketch

And made some mockups that I hanged in the classroom as well:

desktop mockup home

(Desktop – Home Page ^)

mockup gallery desktop

(Desktop – Gallery ^ )

wp_20160916_15_32_27_pro

(Mobile Version ^ )

Final product:

Desktop Version:

Desktop Version

Mobile Version:

Mobile 1

mobile 2

Link:  http://toonstalesandtools.com/fvofmysite/

What I could have done better:

The items in the gallery don’t work properly;

The writing for the mobile version is a little bit too small which makes is uncomfortable for the user to read.