Re-Design of Website

So when i started my website as i slowly started to build it i wasn't sure in what direction it was going. I was building upon new ideas that was just coming to mind at the time. There was no plan or structure to it and eventually i wasn't happy with the way it looked. It looked too cluttered and unprofessional, the colour schemes were off and it didn't look visually pleasing at all. So i decided to go back to my sketch book and draw up some new ideas with a new set of ideas. I soon realised that a lot of websites have one thing in common: simplicity. When looking at some websites that had won awards for their responsiveness, it was all about the styling and how simple it was. Some of them just simply used images with very little text on them. I think these websites worked the best as you didn't have to take in a lot of information all at once it was structured very well and had clearly been thought out how to make it interesting without having too much for the user to look at.

My new website home page

This is a screenshot of the home page of my new website. The design i went for was a full screen effect where images would take up the whole screen. This is a common trait amongst responsive design website and i personally think it looks professional and less boring. My home page has a .gif image I found of a cinemagraph of a humpback whale where the reflection of the ocean moves on its back. I think that it is simple concept but it works out really well as it adds some more visual styling to the homepage rather than just a plain image.

So for each section i added a banner of an image and the title. I thought it would be good to add a button that takes you back a section as it saves a lot of scrolling especially when viewing my site on a mobile device. I also added a parallax scrolling effect when you scroll past each banner, it adds a 3D effect which i think adds to the look and feel of it.

Here is my coding to achieve the background parallax effect. It was as simple as making the background fixed. From there the background would remain in a fixed position and the text positioned around it would move, this would make it look 3D.

Another part of my website i changed was the Navigation. My old navigation was still responsive however the icons and the styling of it looked too simple and boring, as i had downloaded it instead of making it myself. For this new navigation bar i followed a simple Youtube tutorial on how to make it responsive and how to create a button for when it goes down to a mobile size.

This is what my navigation looks like on the desktop screen. I used a simple sans serif font and changed the opacity of the background to 0.5. My original idea was to make the nav bar fixed and move with the screen but I later found out that a lot of websites don't really use a fixed nav bar.

These are some screenshots of my website when it's at a mobile size. As you can see the navigation shrinks down and hides the menu options and only the 3 line icon appears. This icon is used on most websites for mobile devices so i thought it would be good to use it for mine as it is recognised easily. When you click on the button the navigation becomes a drop down menu. When the menu drops down the H1 title of 'Oceans' also moves down with it. At first it did this on it's own but now i think it is better that it does it like that rather than the nav bar going over the top of it and having the two elements clashing with each other. Again i made the nav bar for mobile have a lower opacity as it goes well with the background image and makes it more visible so you don't lose half the image because of the nav bar.