A Small Adjustment

A quick update on a small change I've made.

I've added in the 'titles' for each colour section on each of the pages. These were initially designed to look like this.

And that's fine, I've stuck with that design and I like it. When I added the graphics to the HTML and had a look at the end result, though, I noticed an issue. There was a bit of a clash with the layout.

Considering the pages on my website are going to be reasonably long, it's important for the user to be able to easily find out where they are on it. Hence the titles for each chapter that split it up and make each chapter further distinguishable (despite the obvious changes in colour...). To add to the ease of getting to places on the site I've also added a fixed home button, which displays in the top left hand corner no matter how far you are down the page. These are both good additions to the navigation of the page but they display on the page together like this...

They clash. It's okay that the home button sits above it - that's what I want it to do - but them being one on top of the other makes one less readable, doing nothing for my goal of creating a good and easy experience for the user. So, I've switched the subtitles to the other side.

Much better.

How is this aspect responsive? 

When the width of the site goes beneath 769px, this style of subtitle will disappear and text subtitles will replace it.

Above 960px

769px to 960px

470px to 769px

470px and below

Navigation Issues

It was my aim when starting to build my website that I would build the frame of the entire site first and would then start to bring in content. This gives me a frame that I can reuse easily and quickly for every page. I'm at that point now, so I'm just going back and looking at the content within my iBook and finalising how I can divide it all up/what pages I need etc.

In my iBook (what this website is based off) I have 4 chapters. Within each of those there are sections , and within those are pages (describing each section). My original plan for this site involved creating 11 pages (a page per section). However, on my home page I planned on having the main navigation links (under the main logo) not to link to any internal pages but to link to different places on the same page. This has left me with an issue that's been at the back of my mind the entire time I've been building this site - how do people link to the internal pages? Initially the plan was to have links within the text on the home page that links to them. However, I want to make the website as easy to use as possible, so why would I introduce another step in a users journey to finding the information they need?

Ideally, the links at the top of the page in the main navigation should link to the equivalent chapter pages within the website as that's generally what a user expects to happen when they click to them. To me it seems unnatural for them to attempt to navigate to information and for them to essentially only be taken half way there.

I do not want to introduce drop down menus into my navigation, it just does not seem necessary. Besides, I already have a nicely designed way of arranging information on the page - the 'tabbed', different coloured sections on the page.

I have spoken with a few peers about this and how they think I should arrange information and the general consensus seems to be reduce the amount of pages. There are already several pages within each section that I have merged together simply because standing on their own does not really equate to enough information on one page.

Plan:
-  Main navigation links (below logo) will link to each chapter page.
-  Each chapter page (e.g. "What is a Volcano?") will be split up in similar fashion to the home page, with each section being a different colour.
-  The sections on the home page will contain a summary of each question answered in that chapter, as well as images and some "did you know" facts. There will be links here to navigate to the internal pages too.
-  The sections on the home page will not be 'required reading' but it shall be made clear that they are there (they are tucked beneath the fold of the page so aren't necessarily immediately obvious). They should be thought of as 'teasers' as to what can be discovered within the website. They will also contain links to certain pages and areas within those pages.

The Frame: It's Finally Finished!

I've finished the frame of the site. It's now just a case of putting in the content. You'll see that I haven't put in the image slideshow yet - that's something I'm going to come back to! This is the frame that shall be used for the whole site.

Building this has been a lot more difficult than I anticipated! But, I've learnt a lot and it was good for me to do this now and get the hard part over with. 

Todays Progress: Internal Links, Content Spaces and Making My Life Easier

Today has been another good day of developments on my site. Mainly I've been working on creating the colour content sections that appear below the main, central banner.

I had a few issues when creating this.

I keep forgetting to close the <div> tags.
No doubt, one of the most common issues I've had with simply building this site in general is my habit of making typing errors, constantly. For this, though, I've found Google Chrome's Developer Options very useful.

When trying to create an entirely new container (below my existing one) to start framing out each content section I was having problems with it actually appearing where it was supposed to, and myself and several classmates just could not work it out. All of my tags were correct, I'd used the correct CSS where applicable, my 'classes' seemed okay and the HTML (for the new container) was entirely correct too. This was frustrating and I honestly thought it was just a case of the browser/html file itself getting confused and "perhaps if I just leave it, it will work itself out!".

I opened up the Chrome Developer options to view the code from a different perspective and use their 'find' options to hover over my site.

Thinking I'd be greeted with two containers in the code - my existing container and the new ones I was trying to create, I instead saw this:

Just one container.

Turns out I'd forgot to end 5 <div> tags. Therefore I hadn't actually closed my previous container and was just adding things inside it and not realised.

As you can see in the code above, none of those <div> tags I had opened for each Box (e.g. 'box four') did I actually close. Smart. 

Closing all of the tags fixed my problem, resulting in a new separate container and completely solving my problem.

Solving this has allowed me to create the 4 content sections on my one long home page. I am yet to add the 'arrows' that divide each section, but have inserted the two columns I need in each (as defined in my plan) and inserted some text just to pad it out and get the gist of where all my content will be.

Once I'd done this, I started to add the internal links. The idea is that the user clicks on the links in the navigation bar at the top and is skipped to the appropriate area on the page. This was a lot simpler than I anticipated. All I did was give each section (chapter 1: yellow etc) an ID (which they had already) and each button in the navigation put that id for the href="ID". This does not include any animation (e.g.  a smooth scroll) so for now this is a quick fix that works. I'd like to look into implementing a more slick, smooth motion. 

Making My Life Easier

Even though it's just a small point, I just wanted to mention what I've been doing in my code to ensure that I don't get lost in it. I am in no way an expert when it comes to HTML/any web language, so this has helped to make sure everything is spelled out to me and I know where I am - comments. 

<!--- <insert comment here> -->

I've used comments everywhere in my code to create little headings and subheadings that divide it all up into specific sections. This way, if I need to change something in the navigation bar I do not need to read all of the code to try and find it, I just have to look for the comment. Something small, and certainly not a new discovery (and not even the most appropriate use of the feature), but it's helped me hugely.

(comments in green)

Media Queries and Design Adjustments

Tonight I started working on Media Queries.

Even though we are required to use the Skeleton Framework for our website, a large proportion on whether or not our site is responsive is dependant on 'media queries'. I've never, ever worked with them before, but I got a general gist of the idea of them in class through listening to other people.

I understood that in a way it is applying CSS to certain elements at certain points depending on the size of the page. In the basic index.html we were given to work off of a layout.css file was attached, with the following in:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

From what I understood from here I gathered that within each { } I would put the information for how I'd like an element to display at each point. To gain a further understanding I watched this video:

To explain my new-found understanding!

@media only screen and (min-width: 480px) and (max-width: 767px) {}

'only screen': 'screen' is a media type. Other media types include: print, handheld devices, TV's and projectors. My code defines that this media query is only for screens.

min-width/max-width: This is a media-feature. It does not have to be a 'max' height or width, it can simply be width or height, as well as elements such as colour. 

max - upperbound

min - lower bound

{} : This is where you write your CSS that defines what each element should display like (or if they display at all) at each breakpoint.

Breakpoint: Where a new style kicks in. 

Getting to grips with this inspired me to do something a bit more complex for my site. I started to consider how I could simply my design for when it hit the mobile version - the smallest width. Looking at my existing design, I noticed how cluttered it was. Quite a prominent aspect of the desktop version is the slideshow just under the navigation bar. It is not an element of my site that is 100% necessary - it's there partly for aesthetic benefits. Because of this I came to the conclusion that for the mobile version of the site it was disposable. Removing this slideshow allowed me to trim the length of the (already rather long) central banner. 

Left: Original Banner

Right: New Banner

Implementing this has made me make use of what's now a very useful selection of code:

display: none;

Tells the browser not to display an element (if the page is at a certain size)

display: inherit !important;

Tells the browser to 'inherit' this element and display it. I used this to essentially exchange out the original banner with the new banner.

Combining this with my navigation for the mobile device, my site now displays like this (on mobile). 

You can also see above that I've made the decision to change the colour of my home button to a grey that fits in with the colour scheme (the same grey was used in my iBook). 

I decided to change the colour from red to grey as my chosen red was the exact same red that is featured very heavily in the main, central banner. As you can see above, I have coded the media queries to position the home button halfway over the top of banner when in the mobile state, so having the button and the banner the same colour just did not look good.

New Buttons:

I've kept the same principle of having an over (left) and up (right) state to give a little boost to the users experience.

Navigation Adjustments

Now I'm back from Barcelona I've hit it hard on the physical development of my site, and the first task to accomplish was creating the navigation system. This has to be robust and work efficiently and it's something that in my case can, if I'm not careful, become very complex. 

This was my initial proposed Navigation bar.

Where it says "option 1" "option 2" etc is each of the buttons that would be used for the navigation of the site. They do not have drop-down menus attached to them but will link to the appropriate area of the page that speaks about that category (they will have appropriate names).

2 issues:

1: The central banner is very reliant on size and proportion, and very little room is left for slightly longer Chapter names for each button. On the mobile version of the site these buttons will appear tiny, too. 

2: I had zero clue on how I would build this. I had designed in (purely for aesthetic reason) a dark grey 'ribbon' that runs behind them all, and I'd no idea on how to execute this. The design was more complex than necessary.

I referred back to some original designs and saw a sketch I had made where there were two rows of buttons with two buttons on each. I liked this as it allowed me to have a bit more room to include a longer title for each chapter but didn't mean that the navigation bar took up too much space. A major worry of mine was having to stack each navigation button one on top of the other. The central banner already meets the fold of the page and is very long, the last thing I wanted was to make it even longer.

You can see how I have changed the navigation bar above. This is not a final design (I haven't added any text at all) and I am still trying to finalise the actual style of it. I'm considering removing the 'backs' of the ribbons as they are so tricky to line up with the central ribbon itself. 

As I said above, I was reluctant to change the navigation boxes so that they stacked one on top of the other. Considering the mobile site, though, the buttons are going to need to be as big and as clear and easy to use as possible. If you consider the size of an iPhone screen, the buttons above (2 on one row) are not really quite big enough to enable easy use. The design of the mobile version of the navigation bar has allowed the buttons to stack one on top of the other to ensure ease of use. The buttons still have an 'over' state of changing to yellow. (Whilst on mobile, this does not apply, it's essentially a 'down' state).

Using JavaScript To Create Buttons

I wanted to make a quick blog post on how I've used JavaScript to create the rollover effects for the buttons in my navigation. The very first button I tried to create for my website was the home button. This is because logically, it comes first (it's in the top left). If you remember from my previous post about my home button I've decided to go with the following style for it.

This required me to have a rollover effect applied, so that when a mouse hit the 'up' image it swapped to the over image. I was having a lot of trouble with it - an unexpected, discouraging amount of trouble considering it was the very first thing I attempted. That was until I saw the following video, shared with me by a friend.

I followed this video to a tee, and it worked.

Following this video has given me a better understanding of how I can use JavaScript as before I'd never used it and never really understood what it was for. I've learnt how I can put code into the <head> of the document as a <script> which can then be referenced in the <body>. This is the code that I put into the <head> of my websites HTML.

<head>

<script type="text/javascript">
<!-- Home Button -->

function imgOver(id) {
document.getElementById(id).src="./graphics/home_grey_over.png";
}
function imgOut(id) {
document.getElementById(id).src="./graphics/home_grey_up.png";
}

</script>
</head>

The only "issue" with this technique is that I have to think of a unique way of saying 'over' and 'out; each time I use it for a different button. You can see in the example above I have 'imgOver' and 'imgOut'. If I wanted to use this again for another button I'd have to copy and paste the code over, change the src images and use alternative words - like 'imgOn' and 'imgOff'.

The above code is what goes in the <head> section of my html. There is another part that must go in the <body> section:

<div class="one-third column">
<a href="index.html" onmouseover="imgOver('homeButton');" onmouseout="imgOut('homeButton');">
<img src="graphics/home_grey_up.png" width="85px" height="auto" alt="home" id="homeButton" /> 
</a>
</div>

There are certain parts of this code that I can explain to show how it links with the script in the <head> and creates a image swap link.

a href: the link that the button leads to. In this case it is a home button, so it's destination is 'index.html' - the name of the home page.
onmouseover="imgOver": the words 'onmouseover' are recognised as a command, with 'imgOver' being in the script in the <head>. When a mouse is over the image, the browser should refer to the 'imgOver' code in the <head> which tells it which image to display/swap to.
onmouseout="imgOut": when the mouse is not over/on the image, the browser should display the image that is referred to under the 'imgOut' command in the script.

All of this code has resulted in creating a home button that has a rollover/image swap effect that also works as a link. I'll be using this for every image button that I create.

Building a Website: What do I already know?

As I'm going to be 'hand-coding' an entire website out of HTML/CSS/other various web languages - well, with help from the Skeleton Framework - I figured I'd write out everything that I already know about building websites. This gives me a good idea of where I'm already at and I can identify areas which are going to be 'easy' (I use that term loosely...) for me to build and areas where I'm going to have to delve into some research.

These are also things that I've picked up in our classes at University.

3 basic categories to web pages:
- Structure (HTML etc)
- Style (CSS, CSS3 etc. CSS effects what your content "looks like")
- Interactivity(CSS, jQuery)

Elements
<p) opening tag
</p> closing tag

Anything that has a 'tag' is an element, of which there are only two types.

Type 1: Block Level Element
Aside from 'anchor', 'image' and 'span', every element is a block level element, that is transparent and invisible on it's own.

• 100% width
• Full width of the page or the full width of what it's inside
• Always 100% wide, even if you define the pixels to be shown (e.g. 300px). This means it always owns the entire width of the page and the height that is explicitly defined by the content. As a result, Block Level elements stack and cannot generally be placed side by side.
• 0 height
• Cannot be seen, is invisible
• It's height is defined by its content

You can add margins, padding, borders etc*

Type 2: Inline Elements

Inline images sit next to each other until you run out of space, and then will move to the next line. You cannot give inline elements padding, margin or a border.

*Margins, Padding & Borders

Padding: If you put text inside a box and you don't want it to hit the edges, you put padding to stop it doing so.

Border: The space around the padding

Margin: Empty space to give breathing room.

When adding padding etc you are increasing the defined width of the element. If you have coded the element to be 200px but then add padding etc, the element side increases. A tool such as BorderBox can help with this - includes the padding and the border in the overall size, leaves the Margin as additional.  

A HTML Page
Everything in a HTML page is wrapped in opening and closing <html> </html> tags. Within that there is;
<head>
</head>
<body>
</body>

Everything in a HTML page is wrapped in opening and closing <html> </html> tags.

Within that there is;

<head>

<link-to-css> (this then links the browser to the appropriate CSS stylesheets)

</head> (the browser leaves the 'head' with all the information required to read the rest of the document)

<body>

<insert-content-here>

</body>

Elements naturally want to get to point 0, 0 - the top left hand corner, as long as nothing is in the way. But as they stack, they will appear one by one in the order that they read in the code. This can come in handy as if you want your elements to appear in a certain order, you just code them in that order.

Making Some Changes

There was one particular change that I wanted to make in my design as well as an additional one suggested in the pitch I did yesterday. These were the design of the home button and the direction/shape of the arrows that divide each 'section' on the main home page.

Home Button
I want to feature the home button separate from the main central ribbon, but have it float just like the navigation bar does and have it 'stick' to the top of the page. My initial design of it was pretty boring and not interesting.

There's not really much well considered design that comes into that...so I decided to do a bit more work on it so it doesn't look like so much of an after thought. 

All of these match the design style of my website, and enable me to have the ribbon coming out of the edge of the page, making them a good design to make 'sticky' at the top of the page. 

I am leaning more towards the 3rd, right hand side version. I like how the I've made the corner flick up, and as I'm writing this it's given me an idea!

Have the corner flick up as the mouse hovers over it. I don't really like the idea of having a change of colour in it's 'down' state, so I'm thinking of keeping the over state for the down state too. 

I've also now decided to move the home button to the top left of the screen rather than the top right, as it feels like a more natural place for it to sit. 

Page Dividers

A suggestion in my pitch was to change the direction or shape of the page dividers - which happen to be in likeness to an arrow. The design of these was not initially meant to represent arrows, but they are obviously in a similar shape to them.. The worry was that the fact that they are pointing upwards counteracts my want to provoke the users scrolling down the page, so the suggestion was to turn the arrows around or change the shape.

The first change was the shape.  In these examples I have changed the shape to match the outline of the volcano that is featured in the logo.

In this example I have changed the arrows to point down. I do not like it!

I do not like it as it seems to protrude a lot into the section rather than out of it. A point made my tutor has made me lean back towards my initial design of having the arrows point up. It makes each section appear like a tab in a folder and is something that is quite prominent on the web today. 

Pitching My Idea

Today I pitched my idea to the class and it went really well. My proposed idea was well received and I was complemented on several aspects of both the design and pitch as well as given some tips on how to improve.

In my pitch I presented a small amount of research and used it as a platform to explain how my idea developed, and I was complemented on this. It helped them to understand how my idea had got to the point it had and gave them a sense of background on the work I have been doing.

In the presentation I mentioned certain things that have greatly helped me come to the design I have and I was told that this helped a few other people too and also helped explain and break down my idea to them.

In terms of the design that I presented (for desktop and mobile), it was taken and complemented well. One small criticism and suggestion was that to change the arrows that separate each 'section' on the page from pointing up to pointing down. They were worried that the arrows pointing up counteracted my aim to provoke people to scroll down the page, and I understand this. I am going to do a quick re design to see what it looks like and see if it improves the look of the page. If not, I am not too worried. I was already thinking about replacing the 'up' arrows with the shape of the volcano (featured in the logo) as the shapes are very similar and would make it a bit more fun, as well as allowing me to incorporate more background graphics in an interesting way into each 'section'.

From here I need to mock up the iPad, get storyboarding and finalise my navigation system. 

Proposed Design: Mobile

Above is my proposed layout for my website in it's mobile state. It is rather long and allows larger areas for text to be read as well as full width of the screen images and small images being placed alongside each other. I've left room for their to be links at the very bottom of the page, just like in my desktop version. 

The plan with this is to use the Skeleton Framework to allow me to arrange my content accordingly. With Skeleton, as the width of the page is decreased items will start to stack. The box on the left of a row will always appear above the one to its right, so this will have an impact on whether the text of the chapter or the image on the chapter will appear first as the user scrolls down the page.

Proposed Design: Desktop

This is my proposed design for my responsive website and proposed layout for it in the desktop state. 

The Basics

This design is reliant on mainly just the one page as I am aiming to have the bulk of the (simple) information on it. Within each 'section' on the page (identified by the change in colour and ribbon labelling) the user can receive a brief run down of each subject within it and are then able to click on links which will take them to other (internal) pages that explain that concept in further depth. The idea behind the super-long, continuous-scroll-inspired page was to provoke scrolling through interesting graphics and interactive content which makes the user want to stay on the page and discover more. Also, I wanted the site to be as simple and effort-less to use. Considering my target audience (16-18 year olds) I didn't want to create a site which required clicking 4 different buttons and navigating deep into it before any information was given and any real interaction started.

Logo

I decided to incorporated the logo into an fundamental aspect of the layout of the design - the ribbon that runs down the centre. By allowing me to centralise it and make it more so of a 'feature' on the page, it has improved the design and, I feel, the users enjoyment of the page. Initially I was looking into designing a standard horizontal navigation bar and then above that placing the logo, but considering how one of the aims of this project is to educate someone about a subject, I didn't feel it would be engaging and interesting enough - even though it's just a logo.

Navigation System

The idea is that the user can click on each chapter from the top navigation bar and they will be skipped to the matching 'section' on the page. I have seen this done on a lot of websites and it helps to avoid the user having to continuously scroll and scroll just to find what they need. This navigation bar will also (hopefully) be floating - wherever the user is on the page it will be there ('locked' to the top of the page), alongside the home button. Below is an example of how the navigation bar will appear at the top of the page no matter where you are on it.

This will also be applied to any internal pages, as well as the use of the buttons in it to skip to anywhere on the page too. Whilst I've done something like this before (using Dreamweaver...) using anchors etc, it's not something I know how to code and I've never created a navigation bar that is locked to a position, so I've been looking into it briefly to understand it and there's some good YouTube videos out there. The following demonstrates how to create a "sticky navigation bar" (at least now I know it's called 'sticky'!)

Initial Design Development: Mobile

I've been sketching in my sketchbook trying to work out the direction I want to take my design. I understood I needed to apply a similar design style to which I used in my iBook (as they've got to match and be seamless between each other) but my issue is that since then I've 'moved on' from that design and when I go back to look at it I can identify a ton of things that could be improved with it! What I decided to do, then, was go back and look at the original graphic I created (from which all other graphics were inspired and created from) and have a look at how I could take elements from it.

- Ribbon wrapped around an element (in this case it's a volcano)

- Red against the sea green background

- Shape of the volcano (I like its uneven, loosly cartoon style)

I decided to take these elements and try and incorporate them into one design (initially for mobile). I had a look on Pinterest from some inspiration of ribbons. I wanted to see the different styles, see if there were any conventions with their use and just generally have a look how they're used. I found this particularly useful image (below) and used it to inspire my sketches. You'll see in my initial designs below how they have played a part.

http://www.pinterest.com/pin/341710690449661469/

I took three potential designs that I felt were most successful and started to develop them more in illustrator.

Option 1

On paper this looked pretty good...on screen, not so much. A lot of the issues I'm having is the restrictions on my actual ability to design. For me it's sort of like drawing - I know what's in my head but it's the execution of the idea that isn't quite as good as what's in my head. Whilst I'm getting much more advanced on Illustrator and my ability to execute my ideas is improving, I don't feel that this design really works the way it is. It looks a little odd with how sharply the sides of the 'Volcano' drop off and I don't think I'd be able to include much of the stuff coming out the volcano due to the shape of it. If I make the shape any wider then the illusion of the ribbon wrapped around it won't be there, and if I make the peak of the volcano any lower it will ruin it's shape. 

Option 2

I do quite like this one, especially how uneven the ribbons wrapped around it are. I like how it allows the edge of the volcano to gradually move off of the page down to the corners, but it doesn't really allow me space for a logo. I am interested in making the logo quite a prominent feature, and this doesn't allow that. The colours are good, but the lack of red doesn't really relate to my iBook as much as I'd like it too.

Option 3

Out of all my designs, this is my favourite. I love the shape of the logo and the text within it, and I think the colours work well together. I'd like to rethink the colour of the text within the logo though, as it's the same as the red background at the moment. This design has allowed me to think about the possibility of having the red background stretch down and down and to have content 'attached' to it all the way down.

For a bit of fun, and also to have a look into the proportioning of elements within my design against a mobile device, I mocked up this design onto an iPhone. This also allowed me see what elements of my design may be cut off by things out of my control (e.g. on an iPhone, the search bar at the top protrudes into the screen, as well as the back/forward/navigation buttons on the bottom. The actual size of the viewing screen is significantly trimmed compared to the size of an iPhone screen)

Pinterest

I use Pinterest quite often. Not just to pin things to my own boards, but to gain inspiration and generally browse through. Everything is on there....seriously, everything.

I decided to pin a few things for me to reference back to on my own board, linked below.

http://www.pinterest.com/amyjane11162/responsive-web-design/ 

Analysis: Web Visual Styles

I have found a few websites via the site designfridge.co.uk that I like the visual style of and that are somewhat similar to the graphics I have already created from my iBook.

Jelejah

This website is an educational website about Physics, so it has a similar aim to the website that I am going to be creating. 

The home page has 3 separate sections, featuring what seems to be quite a popular technique, 3 'slides' that you can scroll to. On the right hand side of the page there are 3 dots - buttons - that show you where you are in the page. I can see this being rather convenient if you are on a page that is quite long.

There is very little instruction in this initial home page. It takes a little guess work, but the three illustrations featured on the 2nd page are links to internal pages which is where the educational information is. 

I really love the way this design has been completely simplified and is not complex at all. It does rely on the intuition of the user, and I am unsure whether it would as successful if it were to be used with someone less web-savvy. 

The large logo (above) as the main entry screen is interesting and successful, but I'm not sure I would apply this to my own website design. I like the idea of having an introduction media, but perhaps not something as plain and not-interactive as a flat logo. On the main introduction screen there is also very minimal colour - just three - with the stand out colour (yellow) being used minimally and to good effect to highlight an icon that is relevant to the theme of the website itself. 

Once you start to delve deeper into the sight, neither the layout nor the visual style changes. It still works off of a vertical slideshow style frame, but each 'page' you get to has different content on about each of the planets, also featuring an animation.

Again, I love the simplicity of this and the way information is presented so clearly. A designated place where an image/interaction goes and a designated place where information can be displayed. After the first 1/2 the user then learns the language of the page and expects that layout at each chapter. I like the idea of repeating a layout so it becomes native to the user and the website is easy to continuously use. 

Above this is a, as I spoke about before, 'top layer' navigation bar that stays there no matter where you are on the page. 

You are able to click on the names of the planet and you will be skipped to that point in the page. What I noticed, too, was that the order of the colours where the navigation bar is (dark blue, red, light blue continuous background) is in the same order as on the homepage. This helps keep continuity throughout the website and again increases the users ability to understand every page. 

BarCamp 2013

Another site that takes inspiration from the continuous/the-entire-website-on-one-page trend. 

I love how there's a slight twist to it though. Instead of having each 'page' (section on the entire page) one colour to signify each section, it's been broken up to smaller chunks. So there's a strip across the page in a different colour with a bit of information, then there's another that's a bit longer, then perhaps another smaller one. 

You can see above how this section did not take up the entire page, and leaves the next section peeking through and the previous one can still be seen above it. It seems to provoke scrolling, and when I was browsing the website the fact that I could see more information coming and that I was already engaged with the fantastic illustrations and animations meant that I didn't mind scrolling further and going 'deeper' into the site/page. 

Each 'page' has its own individual colour scheme that is still in keeping with the design as a whole, and their all brilliant. The graphics seem to take inspiration from flat UI and there is heavy use of the same colour again and again but just in different shades. This all works brilliantly, and alongside consistent use of the same font styles (Same style for headings on each 'page' etc), everything ties in brilliantly. 

Examples of the colours in each section.