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.