Adding extra navigation into section pages

Something I realised when i was working on my website and going through page to page and viewing it in the browser is how inconvenient it was to get through the site easier by being able to go from section to section or go back to the chapter page. I decided that if i added extra navigation at the bottom of the section pages it would make it easier for the user to get through the site and from page to page etc.

I decided that the navigation i would add would be at the bottom as it would make it easier to place because adding it at the top would make the page look messy and take away from the pages main focus, as i wanted to add big arrows with the text like 'go to' blah blah. So i felt adding it at the top wouldn't do my website justice so i decided to add them in on the bottom of the section pages.

As for the idea, i wanted to make these navigation boxes like arrows for a couple of reasons, one of them being because the user could know they are either going back or forward on the website, secondly because i've used arrows a lot on my website and its a theme throughout my website.

(Its a little bit messy on some of my illustrator documents, i know haha...)

I created the graphics in illustrator of the arrows and i made two of tach arrow as i wanted to do an image swap on the arrows, one of them being the normal arrow not hovered over and another either shifted a  bit from the left or the right depending on the arrow. I wanted to do this so when the user hovered over one of the arrows it would move either to the left or right so it creates more movement and interactivity to the website and giving the user a better experience.

Something i also did is i added different colours to the chapter names and section names so the user could tell if they were clicking on a chapter page or a section page. I made the chapter name colours white and the section name colours red.


I feel that having these arrow navigations to go either back to the chapter page or go from section to section or the next chapter is a good way to make it easier for the user to navigate through the site and have a better experience in total.

Creating Chapter Header Banners

After i had got my structure for my chapter pages on my website sorted out i then wanted to begin adding assets to each of the pages, and the first thing i began doing was creating some header banners in illustrator for each of the chapters, but i was slightly in decisive about what i wanted the chapter headers to look like, as i wanted them to be different from the section pages, but still work with them theme of the site and look nice.

At first i didn't know what i wanted the banner to look, so i came up with a couple of ideas, shown below, and in these i was trying to express some relation to earthquakes in these headers.

I did like these concepts, especially the one on the right however, because it was suppose to be a hole and cracks i originally thought it was a cool concept  as it related to my ibook chapter introduction pages. However when i kept looking at it on the website, it didn't feel right as it looked like a hole was hovering instead of a birds eye view of the hole, so i decided to scrap the idea.

The other header i made on the left was an okay idea but when i placed it on the website it didn't look like a header and it just didn't work with the overall style of the site, so i decided to come up with a few other ideas for chapter headers, and then i was able to create one i felt comfortable with.

Because in my logo for the website i used a ribbon in it i thought potentially i could create something like a ribbon as a chapter header, but using different colour so people could tell it was a separate thing from the logo, and below is what i ended up creating as an representation example of all the chapter headers.

It was simple and helped to frame the topic name pretty well, so i decided to go for it and see what it looked like on the website, and below is how it looked.

Personally i think it looks fine and in nice how there is spacing away from the logo and the actual content boxes so i feel like its got the room it needs, and it being centred brings the page together and i think works really well. If i decide to change the chapter header i will do so when i go back to college to get some feedback from other people and if i can think of a better idea, potentially i will change it, but to be honest i like it and don't really think it needs changing but i guess we'll see.

Creating a frame structure for chapter pages

Since i had done my section pages i decided to go back to my chapter pages and create a structure for it as well as starting to add the content in. The reason i wanted a new structure to my chapter pages is because i wanted the user to be able to tell the difference between a chapter page and a section page, as i wanted to make them look different.

I initially wanted a similar concept to my section pages with an individual container for each area of content as well as using a background colour to place the content in a box frame. Looking back at my ibook i realised that i used a lot of the odd looking boxes to frame and contain a lot of my content in, and it made me realise i could do something similar to my website.

(examples of my iBook where i used the boxes to contain my content in)

The way in which i was thinking of being able to achieve this idea was to use the frame structure from my section pages and change the colour to the box colour from my ibook and then replace the skyline top part and use a rugged scrappy look, similar to the box top from the ibook, and then use a bottom part as well and have it place under the container so it would look like the box from that i used in my ibook but just stretched with max width.

This is how it looks like on a couple of the chapter pages as i haven't officially added the content in yet, the text and video is just something i randomly used so i could have content in there for the time being so i could see what the container looked like.

From this style for all of the chapter pages, i will have multiple boxes in order to contain my information. I will most likely use two to three boxes per chapter page as i don't want to have too much content for more of the introduction to the chapter on a whole. 

Something i also i added to fit the theme of the rest of my section pages, is by adding an arrow with text, which i feel like is a cute touch and informs the user well about looking for more content and knowing where to go to get it.

Finishing section pages!

After spending a lot of time getting the structure sorted out and placing in all the content in, and making the overall presentation a layout looking nice, i've finally been able to get my section pages finished!

Getting these pages done did take some time and it was very time consuming to get the right structure for these pages, however once i sorted out all the structure for one of my section pages it was easy to do it for the rest of them.

Some pages within the sections had more content than others, and some had sliders and there were a few problems i encountered when placing the content in at times or getting the slider to work the way i wanted it to work and look.  Despite all of the section pages are done.

I will if i have time go back and add things to certain pages or remove things or change particular things about certain aspects of those pages, but for now i'm happy how they look and the fact that i've got them done, now its time to work on my chapter introduction pages!

Making things simpler

When putting some content on my pages there were instances where i was placing the content in and was adding text underneath a image for example but because i didn't have a lot of text content for particular bits of content i felt that using mainly 8 columns wouldn't work unless i either added more text content or got rid of the text content.


The page i'm referring to is the safety page within the sections on my safety chapter and when i was adding the supply images of 'what you need for an earthquake' i realised it wouldn't work by adding text as there was very little of it for each supply and because the information i had originally wanted to use was obvious on what it was or how to use one of the supplies i decided to make it easier on myself and make it simpler by just using the images and having a comment with an arrow above to point out that they are supplies that are needed incase of an earthquake.

Overall i think it makes the layout more comfortable and i feel added text would have ruined it and the titles underneath the image speak for themselves so its more obvious to the user what images they are and because using them or getting these supplies is general knowledge i felt that added text really wouldn't have been needed.




Also for another page of mine and in the same chapter i.e. 'common places' section page i was originally going to have a continent per column with the image at the side at the text on the other side but as i was doing this i realised i didn't have as much text content as i thought so i decided to simplify it by adding all the places on a four column grid to make the text fit with the size of the screen and images and i think it looks better this way.

Also when i was working on the 'safety' page, i was originally going to add before, during and after section but because i added a lot of text for that in my ibook i realised that on the website the content of it would make it look messy and overwhelming, so i decided only to add the '3 step rule' because it would make the layout more neater and overall not overwhelm the user with text which is what i wanted to avoid doing, so i could give the user a better experience when using my site.

Adding slideshows

For some of my pages i wanted to use an image slider and i was able to find one on a website called 'code drops' and it allows up to 5 pictures to be in this slider and be able to click from one to another.

Link to site: http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/

There was a download which included the css and html as well as the javascript that needed to be added. The only things i had to change were the colours for the backgrounds in-between each slide as well as the actual images that the slider was linked to in the html. So basically all i had to do was copy and paste the slider html and css in my css and html documents and make a few adjustments according to what i wanted.

The page i used this slideshow was on 'overcoming earthquake' in the japan chapter and below is what it looks like. I made all the images the same width and height so the images looked more neater.

I also used a slider for the 'safety' page in chapter 3 and for this i got rid of some of the html where it had the div class of buttons and got rid of two of them since i only wanted 3 slides and then i changed some of the css slider stuff so it would work with 3 slides. I also changed the background colour to match the background image colour so it would look like it was one image within the slider.

Something i realised is in the smaller formats the slider was harder to see, so i replaced the slider with an image which displayed the 3 steps of what to do when an earthquake occurs. This makes it easy on the user when they are using smaller platforms and allows them to view this area without any problems.

Adding in extra content

On some of my pages i've decided to add a little bit of extra content, and in some cases it was because i wanted the layout of certain pages to look more structured or neater.

In other cases i wanted to add or split up content so i could add in extra images or so the page would feel like it had more content and it wasn't as empty or a waste of a page, and i did this for a few of my pages. For example below is a screenshot of my 'tectonic plates' page and i added extra images and text alongside that because i felt that for the website there wasn't enough content on this topic, so i thought of a good way to add more content as well as linking it in with text and then did so and placed it so the page looked more fuller with content.

However in other cases i added more content in because something on a page felt missing or the structure of the  page wasn't complete. For example in my 'impact' section i placed images on a eight column grid with information underneath. However i had an odd amount of images and for some reason placing 3 images on a six column grid wouldn't work so i wanted to stay with the 8 columns but that meant at the bottom there was a missing space.

I decided to add in an extra 'impact' which was water and made some graphics and came up with some text which i already had from the previous project which i added as an attachment to electricity and made it, its own separate thing so i could have even number of content on the column grid.