Research Into Existing One Page Websites

After being set the new brief i thought a good place to start would be to look into existing one page websites. This would give me a feel on how they navigate, the sort of visual components they include and the style of the page.

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:

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:

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.

Body Text 

Titles/ Header Text

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:

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: 

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:

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

New Assignment Brief - Portfolio Website

The Brief 

In this assignment, you will design and build a website containing your FdA work to date, plus any existing work you feel you should include in your portfolio and biography information such as an ‘about’ section and/or a CV.  This will form the starting point to your portfolio website which you will keep up to date with new projects throughout the course. 

Making web pages

To make successful websites with working links you will need to thoroughly understand the folder system that structures your files. You will create a web project folder with your name and make folders within this that offer a sensible navigation structure.  These may be, css, images, scripts, working files.  Please note the index.html page MUST be loose at the top of the hierarchy not inside a folder.

You will use TextWrangler to create all HTML and CSS. The goal of this project is to further your understanding and abilities in hand coding HTML & CSS, therefore you will not be allowed to make any of this assignment in Adobe Dreamweaver or any other visual WYSIWYG editor.

Your site will be constructed as a single page with the different sections made visible using css positioning or by a hide/show or similar jQuery method. CSS3 animation or jQuery will give the smoothest and best results.

You will not use images of text in this assignment. All text elements must be live selectable text and styled using css. You will use either Google Fonts or @fontface for your text elements.

Images are restricted for content, header (masthead) decoration or sprites for use as background to navigation elements but all links must be text based.

Important: You will not use html tables for the purpose of creating layouts at all in this assignment.

Working with CSS

You will use Cascading Style Sheets (CSS) to format and style the elements of your page so that you can:

·  style and distinguish between navigational and content areas of your page,

·  format and control your text and any links,

·  you can create print- friendly versions of your page which restyle the content for print outcomes.

Working with real outcomes

You will also prepare and format your page with CSS for different browsers on different platforms. This will involve testing your pages on both Mac and PC computers.

In order to make sure that your pages work seamlessly in different browsers and on both Macs and PCs, you can use conditional HTML comments to direct Mac and PC browsers (including Internet Explorer and Safari to sets of CSS files).

Working with text and images

Text material in Word .doc format or created in any other word processing package must be converted to 'vanilla' plain text (txt) files before inserting into the web page.

You will use Photoshop or Illustrator to process images that will be optimised for web delivery using Save for Web and Devices as a gif, jpg or png, with care taken over pixel dimensions, file sizes and image qualities. Video content should be displayed using the ‘Video for Everybody’ system.

All the images you make in Photoshop and Illustrator should be placed in the ‘images’ folder in your project folder and will be addressed with the correct routing through HTML. You will make these images accessible through the use of  <alt> and <title> tags.

For the typographic elements of your design you will use webfonts using either @fontface or Google Web Fonts.

Your design work

You should ensure that you take note of screen sizes and that your pages work effectively with current popular screen resolutions.

You should consider creating visually pleasing and legible designs where the design acts to make the content more appealing and readily readable with a standard web browser, rather than dominate or overpower the content.

Your designs must achieve consistency over the sections of your site: you must use common type styling, layout and structural elements between sections.

You need to consider usability and accessibility in the design of your interface and page layout.

You will need to demonstrate your approach to the creative process using methods that are standard to the digital media industries.  As well as your visual research, your sketchbook and blog should show sketches, ideas and experiments for the designs in development so the processes you used to reach decisions on such issues as wireframe layout, colour, typography and navigation are transparent.  Navigation must be planned using flow diagrams. 

 

Pitching your designs

You will pitch your designs to the group and tutors in a presentation.  You have to include your proposed content, layout, interface designs and look and feel in your pitch.  This can include:-

-   Wireframes

-   Flow diagrams

-   Graphics

-   Proposed content

-   Logo and heading designs

-   Interface designs

-   Page mock-ups

This pitch needs to be prepared as if you were selling your idea to a client.  Include technical research, particularly screen resolutions, browsers and platforms.  Show colours and fonts in mock ups rather than on their own – make visualisations rather than lists.

Evaluation

Things that i would do differently next time:

- First of all this was my first attempt at making a website, i was completely new to the HTML code and CSS. I would take more tutorials in how to code both HTML, CSS and javascript.

- I think that the time given between the start of the assignment and he deadline was long enough considering i had to earn the code from scratch. However the time i spent was mostly trying to work out how the site worked and how exactly was put together. I was forever looking online at trouble shooting blogs because it was difficult.

- I would organise my time better for my sketchbook, there wasn't enough drawing or sketches done in order to really solidify my ideas and visual styles.

- Clients missed meeting deadlines

Things that went well:

- I think that towards the end as i became more familiar with the code i was able to understand it better thus being able to work faster at coding HTML and CSS.

- The initial research went well, and the communication between the client went well, despite them not being able to turn up, twice.

What i have learnt overal:

- i have learnt to code HTML and CSS to a satisfactory level, more work needs to be done in this area of design, more experience required in order to fully reach my potential in web design.

Final Critique

Here is the feedback i got from my peers and my teacher:

- Needs more styled CSS, both on the layout and on the typography

- Logos needed to be better positioned, maybe either side of the main header and slogan

- The unbalanced content boxes, maybe try setting a height to one of them if not both of them

- Bottom navigation bar needs tweaking 

- Either put more information in the gallery feed or take it off completely 

- Change the blog placement or get rid of the blog 

- Roll overs on the images/ light box could be added to give the site more of a media flavour

- Colours were good, however another colour needs to be added to give it a bit more depth 

- The content is very good and used appropriately 

- No broken links, or loading issues with images 

Overall there are many improvements to be made and i will make the improvements in time for final submission. 

Final Website

                            

Trouble Shooting

Here is a list of some of the errors i had trouble with:

First off all writing out the main index page. This was vital because once i had one page done i could then just copy and paste the HTML code and save them as their own HTML sheets in the website folder located on my decktop.

Next was sourcing images from the images folder in my website folder. I then had to figure out how to style the images, in a way on the browser window, for example positioning, padding, margin.

I tried using light box how ever it took me far to long to code the light box because even after looking at tutorials i didnt know how to code and link it all together. So in the end i dropped the light box idea, this was the same with the roll over images.

Inserting line breaks into paragraph divs with in the HTML and CSS

After floating images, i then had to figure out how to use the class known as 'clearfix'.

The Code

Starting off as you see in the image below this was the HTML code, doctype is stating what type of code sheet it is. You then have header, title, link to the stylesheet (CSS), end of header, start of the body tag, then the two <divs> containing two id's, wrapper and header. 

The code above is essential when making any website in HTML and CSS. You must put the tags in the right way or it won't work properly.

Below you see i added my first logo image. I had to source it from the website folder, in which i constructed before i started coding. You must have all of your files organised otherwise nothing will work.

 I had to get into the habit of closing every tag that i opened, if i didnt close the tag, again it wouldnt work.

In the image above, you can see i started to construct my navigation bar in my HTML code. The image below is the navigation bar for the footer, relatively speaking its the same code as i copied and pasted it because they are going to do the same job.

Below you see is th end of the HTML code. As i said earlier, always remember to close your tags. 

-           -        -          -         -          -           -          -          -         -         -         -          -        -         -          - 

The image below is of the web font code i got off of google web fonts.

below is the CSS coding i use in order to style my paragraph of text i order to get it sitting naturally .

 The screen shot below is that of the CSS that goes hand in hand with the beginning of the HTML code i mentioned earlier.