Visual Design 

The story is positive and inspiring but kind of mysterious so I've chosen a darker theme color. 

The website originally is expected to have a extreme simple and page displayed before the main page is loaded but after discussing with my tutor, this effect seems to be pointless and will only result in redundancy of content, so I've just abandoned that design. 

The background of the whole website is the picture with pink dots in the dark grey background, providing a bit dark theme to create the mystery of the story, which is more likely to catch readers’ eyes and matches the content of the story. 

Most of the buttons have the background same as the color of cork, giving a contrast to the background to make it easier for users to find buttons and distinguish them from the content of the story. 

The top left button is the giver logo, which comes from the cover of the book and makes the theme more like this story book. All the header navigation beside this logo is designed with color of cork and brown text in it. The color has no significant meaning but stays smooth with the dark background color. There are going to be animations once users’ mouse is hovering above them(the bottom of the button moves down a bit) and the text is going to turn into white(highlight). 

‘Home’ and logo is lining to the home page(index.html) and the ‘Brief’ links to the Brief page, ‘Author’ links to the author page. The ‘content’ button has a dropdown effect with six parts in the menu of the dropdown. ‘Contact us’ links to the footer where there will be a column about contacting us. 

Below the header, there is a giant image with ‘The Giver’ text in the middle, which is going to turn into embedded YouTube video once user clicks on it. I cant use the poster of the book due to license reason so I've just used the scenery picture from pexels (creative commons), which still has some similarities to the scenery in the book. And the YouTube video is for intro to the movie which is adapted from the book. 

After you scroll down that, the ‘Back to Top’ button is going to fade in at the right bottom and the side navigation bar is going to fade in at the right middle side. The side navigation contains 6 dots, each standing for each parts of the story (one to six from top to bottom). Also, the dot is going to become bigger if user hovers over it. The ‘back to top’ button is going to change background color and text color once user hovers over. 

In the content part, each part heading is decorated as a button, which will trigger the content of that part to be toggled only when being clicked. The text of the main content is antiquewhite, which offers contrast to the dark theme background color. 

And each paragraph is going to form a brown dashed border when mouse hover. The specific paragraph that is being clicked will form a brown solid border (though it’s going to disappear after mouse leaves it), and the text is going to get bigger with color changed from aliceblue to beige and its size will increase and also underlined. 

In the second and fifth part there will be parallax background image and there will be a slide showing 3 pictures at the bottom of the fifth part. 

Plus, there will be tab content showing several different ‘memories’ in part 4. 

Down to the bottom, the footer will feature a background linear-gradient from grey to beige. Inside the footer where will be three main box ‘contact us’ ‘site map’ ‘follow us’. 

The contact us box has a form for user to fill in, the site map provides links to any part of this website and the flooring us box provides links to Facebook, twitter and Instagram of the story-related content. 

The parallax background image effect is also used in the ‘The Brief’ page, and the rest content, together with the ‘author’ page is the same as the main home page do. This keeps the whole website consistent.