The first example one page website i looked at was Nymphea - Fitness Furniture.
http://nympheaproject.com/#theteam
"More than a simple fitness accessory"
"Our first idea was to offer a simple aesthetic to practice sport at work. Nymphea grew out from this concept to become an elegant fitness accessory, harmonious enough to fit in perfectly in an office. The exercises which can be realised (sit-ups, strengthening...) allow you to decrease stress at work and offer a nice take-off to the user.
To fit in even more, Nymphea's leaves work as sound isolators, enabling a visual and acoustic separation between working spaces. With its organics curves, outlined with a touch of aluminium, Nymphea lives out to be a modern sculpture dedicated to relaxation and well-being."
The above was quoted from the website, roughly explaining what it is.
Analyzing the site
I looked at each page of the website:
Layout
When first entering the site i recognized almost straight away that everything was nicely spaced apart, not to much content close together. This made the site seem very modern and gave it a subtle and gentle overlook as seen in the image above. The positioning of the side navigation bar in the top right corner is a nice touch.
Theme/ Visual Styles
They have gone with the a commonly known visual style known as 'White Space' or Negative Space'. This is when the background is very white/ plain which then focuses the attention to the visual elements that contrast and stand out from the page. An example of this visual style is as seen below:
I then proceeded to look at the header for the website, i think this is a custom header, as they have included artwork with in text there title header to give make it more isync with the theme/ style of the rest of the website.
As you can see, the artwork they have included is roughly the same as the type of products viewed on the website.
Navigation:
They have two navigation bars with in this website, the first is located on the home page as seen above and the second is in the right hand corner, which happens to stay with in the browser window on every page you visit. The navigation on the home page is a traditional navigation, which features the text and inline elements with in a horizontal navigation bar, as seen below:
The Other navigation bar that stays within the browser window on every page is a custom navigation bar that has been designed specially for this website by the designers. Instead of custom navigation bar using words/ text for the buttons, it has used small images (created in photoshop or illustrator no doubt) as the buttons. Also, unlike the other navigation bar on the home page, the custom navigation bar is vertical, i'm not entirely sure this works interms of the flow of the webpage.
You may have noticed there is an arrow next to the vertical nav bar in the above image. This is another way to navigate the page without having to use either the traditional and custom navigation bars. The arrow simple takes you to the next page, which is next in line after the home page, the reason being the website is all on a single page.
Typography:
The typography used through out the site seems to be very stylish and modern. All san-serif fonts, not sure what font exactly. They used the same font for the body text but made it bigger and bolder for the titles.
Colour:
When designing the site they have kept to a chosen colour scheme and have used the bright colours sparingly which is good because it focuses the consumers attention on the bold colours against the 'Negative Space'. The negative space in this website is white, known as, yes you guessed it, 'White Space', however this can also apply to the colour black. They have used grey for the typography and when highlighting key words they have used one of the colours from the product itself. This keeps within the theme. The images of the product also have shadows on them, this adds depth to the product because the background is all white.
Interactivity:
With in this site, there are a couple of interactive features besides the navigation bar that allow the consumer engage with the content which over all improves the user experience and make it more interesting. On the overview page there are little grey like circles as seen below:
These little circles are located on the product image in different areas and when there are clicked on with the cursor an information box pops up near the circle telling you more about each area of the product, as seen below:
As you can see the images change through out the slide show and so does the information on the side. There is a fade transition set with in the slide show between each slide, this is smooth and looks more professional then just jumping from one slide to another. She fade transition is shown below:
Usability:
Content - There wasnt much content both images and text on a couple of the pages which i thought worked surprisingly well. Sometimes less is more, and because of the design theme/ concept this was the case.
Text - The typography overal was very clear and visible. The site wasn't text heavy, until the 'The Team' page where it stated the biography of each designer.
Loading Time - The site was very quick to load up, the interactivity features were very smooth and fluent which was good.
Layout - Very well laid out both content, and navigation. However the right side vertical navigation was just hanging in mid air, this might look better if it was further to the right side of the page, a bit like a scroll bar. The layout was easy to get to grips with as most content was labeled.
Navigation - The navigation was quick and easy to understand, more then one type of navigation was good as it added more variety to exploring the one page website which all in all made it more interesting.
Colour - The colours used were very contrasting but worked well with the way they were used against one another (images against background colour, typography colour and navigation colour)
size - The size of the page was standard, keep to the conventions of a normal website. Although unlike a 'normal' website, this website was based all on one page which is what i am looking to do with mine.
User Experience:
The user experience overall is the most important thing when making a website. The user experience i gained from this website was very thorough, i knew what the site was about and what it was trying to achieve very easily. I could navigate the way i wanted to, with out having to divert to different pages in order to get to the page i wanted/ to find the information i needed. Content wise there wasnt much, but the content they had was useful and helpful.
-------------------------------------------------------------------------------------------------------------------------------------------------
After looking at that website i discovered there was an image on the right hand side of the website shown below.
This was a link to another websites gallery that stated many other websites that were nominees for a CSS award. This website is called CSS Design Awards and the URL is stated below:
http://www.cssdesignawards.com/css-web-design-award-nominees.php
I looked at each page of the website:
Home Page
Overview Page
How To Page
The Team Page
The Contact Page
Layout
When first entering the site i recognized almost straight away that everything was nicely spaced apart, not to much content close together. This made the site seem very modern and gave it a subtle and gentle overlook as seen in the image above. The positioning of the side navigation bar in the top right corner is a nice touch.
Theme/ Visual Styles
They have gone with the a commonly known visual style known as 'White Space' or Negative Space'. This is when the background is very white/ plain which then focuses the attention to the visual elements that contrast and stand out from the page. An example of this visual style is as seen below:
Navigation:
They have two navigation bars with in this website, the first is located on the home page as seen above and the second is in the right hand corner, which happens to stay with in the browser window on every page you visit. The navigation on the home page is a traditional navigation, which features the text and inline elements with in a horizontal navigation bar, as seen below:
The Other navigation bar that stays within the browser window on every page is a custom navigation bar that has been designed specially for this website by the designers. Instead of custom navigation bar using words/ text for the buttons, it has used small images (created in photoshop or illustrator no doubt) as the buttons. Also, unlike the other navigation bar on the home page, the custom navigation bar is vertical, i'm not entirely sure this works interms of the flow of the webpage.
Typography:
The typography used through out the site seems to be very stylish and modern. All san-serif fonts, not sure what font exactly. They used the same font for the body text but made it bigger and bolder for the titles.
Body Text
Titles/ Header Text
When designing the site they have kept to a chosen colour scheme and have used the bright colours sparingly which is good because it focuses the consumers attention on the bold colours against the 'Negative Space'. The negative space in this website is white, known as, yes you guessed it, 'White Space', however this can also apply to the colour black. They have used grey for the typography and when highlighting key words they have used one of the colours from the product itself. This keeps within the theme. The images of the product also have shadows on them, this adds depth to the product because the background is all white.
Interactivity:
With in this site, there are a couple of interactive features besides the navigation bar that allow the consumer engage with the content which over all improves the user experience and make it more interesting. On the overview page there are little grey like circles as seen below:
This interactivity is quite interesting because it allows the consumer to engage more with in the site, making the site more interesting whilst adding visual and content depth. On the 'How To' page there is a slide show, with navigation buttons allowing you to move through the slides.
There is also a timer set on the slide show where it changes slides by itself. The slides are as shown below:
Transition fade out
Transition fade in
Within the ' The Team' page, there is a little biography section to the four designers who made the product. They all have links and contact details at the end of there biography as shown in the images below:
Usability:
Content - There wasnt much content both images and text on a couple of the pages which i thought worked surprisingly well. Sometimes less is more, and because of the design theme/ concept this was the case.
Text - The typography overal was very clear and visible. The site wasn't text heavy, until the 'The Team' page where it stated the biography of each designer.
Loading Time - The site was very quick to load up, the interactivity features were very smooth and fluent which was good.
Layout - Very well laid out both content, and navigation. However the right side vertical navigation was just hanging in mid air, this might look better if it was further to the right side of the page, a bit like a scroll bar. The layout was easy to get to grips with as most content was labeled.
Navigation - The navigation was quick and easy to understand, more then one type of navigation was good as it added more variety to exploring the one page website which all in all made it more interesting.
Colour - The colours used were very contrasting but worked well with the way they were used against one another (images against background colour, typography colour and navigation colour)
size - The size of the page was standard, keep to the conventions of a normal website. Although unlike a 'normal' website, this website was based all on one page which is what i am looking to do with mine.
User Experience:
The user experience overall is the most important thing when making a website. The user experience i gained from this website was very thorough, i knew what the site was about and what it was trying to achieve very easily. I could navigate the way i wanted to, with out having to divert to different pages in order to get to the page i wanted/ to find the information i needed. Content wise there wasnt much, but the content they had was useful and helpful.
-------------------------------------------------------------------------------------------------------------------------------------------------
After looking at that website i discovered there was an image on the right hand side of the website shown below.
This was a link to another websites gallery that stated many other websites that were nominees for a CSS award. This website is called CSS Design Awards and the URL is stated below:
http://www.cssdesignawards.com/css-web-design-award-nominees.php
I am going to analyse a few of these websites as they are exactly what im looking for both content wise and visual/ technical construction.
The next example i looked at was called 'Art Direction'
http://www.mathieudebruyere.com/#contact_area
This website is a portfolio website, exactly the same kind of website i have been assigned to build. The following image was taken from his about page, generally stating what exactly it is he does, which happens to be an 'Art Director'.
After finding out what the website was for i then began to break down the visual elements of the site just like the last website i looked at.
Analysing the site
I looked at each page of the website:
Home/ Contact Page
About Page
Portfolio Page
Services Page
Layout
From the first Home/Contact page i could see that (just like the previous website) this one was going to be laid out with lots of free space/ negative space. The contents on every page is as minimal as cam be, whilst still getting over the information needed. I like the idea of simplicity and minimalism, and this site does exactly that. Everything seems centered in the middle of the browser window, again i like this idea, seems very modern. The navigation bar is laid out off screen and slides down from the top to reveal the other page buttons, i like the idea of keeping things off screen and having an action point for a roll over.
Hidden
Visible
Theme/ Visual Styles
The theme of this website is very different from other website, it uses shapes and the sides of shapes to give it some sort of visual effect. Though they are not exactly mirrored from the center, they do seem to have some sort of visual style but its hard to pin point, its very abstract.
Abstract Background One
Abstract Background Two
Abstract Background Three
Abstract Background Four
Navigation
The navigation as i mentioned earlier slides drown from the top on every page, or you can scroll up and down the website because it is a one page website. When you click on a page from the navigation bar it slides you to the correct page which is nice. - A bit vague. Every page was interlinked with one another so made this easier to navigate the site.
Typography
Colour
Interactivity
Usability
User Experience
No comments:
Post a Comment