Website

Homepage

I started off with the homepage and experimented with basic layout. 

I tried a full image at first but I decided I wanted to add some text and information on the homepage to make it informative so I didn't continue with this.

I also tried images along the bottom but this limited the space above and wouldn't allow for any scrolling down so would limit the size of the site so I didn't stick with this either.

I added in a nav bar using my colour scheme and one of my two main fonts for continuity. I also added the boat and chevron to link with previous designs.

I decided to create a weather forecast as people looking into visiting the city will want to know this before they come, and existing residents will also find it very useful. I chose a very simple icon style design to make it easy to understand and clear and legible.

I then added in the rest of the bulk elements on the page. I decided to box them in to keep in neat and clean and give a more corporate and professional look. I made the text white as it had a strong contrast with the green and made the words really stand out.

I then added in some images along the top to give more of a feel for the city to the site and added in my slogan to reinforce my brand identity. I then added in the rest of the elements to the page e.g. search bar, and darkened the nav bar as the contrast between the white and pale green wasn't strong enough so the text was hard to read and darkening it improved the contrast which increased the legibility.

History

I then created a page for history using the same basic layout but adapting the images and main content. I changed the size of the text boxes to vary it a little but kept the basic layout for continuity.

Tourist Guide

For the tourist guide again I kept the basic layout but edited the images and main content.

Mobile / Tablet View


I also created a mobile and tablet view to make my site accessible to all. For the mobile I had to condense it significantly so I removed the nav bar and made it into a drop down menu at the top instead. To condense the images I created them into a slideshow, and to condense the main content I reduced the size and number of columns, and to get any missing columns the user could just scroll down. I think this is an effective layout because I managed to keep all of my content in.

For the tablet view I managed to keep almost the exact same layout but had to reduce the width so I took the longest column and placed it underneath. This worked out well as the tablet is longer than the laptop screen so it filled in the space at the bottom.

Layout on mock ups


I then laid everything out on to the mockups so I could see how my designs would actually look on a screen. Overall I think my website is effective because it fits with my brand identity as I stuck to my colour scheme and fonts and used my slogan throughout. I also adapted it to various screen sizes and devices and managed to keep the same basics of the design running throughout these which gives it all strong continuity.