Final Wire Frames

Thoughts on design

When designing my wire frames I wanted to keep it looking modern and exciting. So began doing site maps, this was my starting point. So I produced rough wire frames which I thought would work nicely. However after asking my house mates they pointed out it looked dated. So I began researching into other water filtering websites and I found most of them kept to a clean crisp simplistic design. So I began producing wire frames taking this into consideration. This time I liked the look of my wire frames but it was still too large for this type of website. 

I needed to rethink the sub sections, So after much debating I have decided to embed the sub sections into main elements so instead of the website being 10 pages, I have cut it down to five. In my opinion this is more manageable and easier for the user. I have kept to the same design which I feel will have a nice simplistic look and feel. 

After I had finally decided on the wire frames and design, I began developing the logo. The reasoning behind this is because I feel the logo at the moment is very stiff to say its the face of a water based company. I produced a quick brainstorm and developed on the ideas that I jotted down. I'm aware the logo has to legible. Because of this factor I tried out a funky bold typeface, however I felt it looked inappropriate, So I began experimenting with handwritten typefaces, I felt this had a better overall look. I will be developing these ideas further. 

For the background of the website I was in two minds whether to keep it white as white space draws to your eyes or adding a light blue to a dark blue gradient tint. I began creating this in my sketch book using pencil crayons however I wasn't able to produce a wash using this material so I will be using water colours to try and produce a more even outcome. I will be experimenting with this idea further. 

However if this idea doesn't prove to work, I will be adding elements to reinforce who I'm aiming this product at such as hikers, campers etc. An example would be a tent, hills etc to the header. If I head down this route I won't be using photographs I would like to add a more illustrative look. The website already has this styling, so I will be keeping to this rough outline when developing this idea. 

Examples of layouts

Other Water Filtering Websites

http://www.waterbobble.com/

This is the first website that I looked at water bobble and this is exactly where I want to take my own website. The website has made the product look as exciting as it is. The black space behind the text and images works amazingly well. I wanted the product to be the main focus point and this website has produced this. I will be taking this website into consideration when I come to finalising my ideas. I may change my wireframe to look similar to this website as its very basic and straight to the point. Istraws website is over complicated and quite confusing to the eye, so this is why I'm taking the website away from this. 

http://www.purwater.com/

When I first looked at this website, it was clean and crisp. I knew that this website related to water even if I had clicked it on accident. I straw doesn't have this impact, and this is what I would like to achieve. The layout itself is also simplistic and easy to navigate, because of this I may use white space in a similar way. This website has been cleverly designed and a lot of thought has been taken. I think I may have jumped into my wireframes to early, so I will be changing elements. 

http://espwaterproducts.com/

Personally this website has gone overboard with the water element, because of this the website looks outdated and crude. As I was planning on adding this to my own website, I need to be careful of factor. Also this particular website has been overloaded too much with information. Its hard on the eyes and hard to navigate. 

http://www.filtrete.com/wps/portal/3M/en_US/FiltreteUS/Filtrete/Products/Catalog-Water/

This website has a similar layout to esp water products, which in my opinion is a bad design. However its bright and eye catching but again it has too much information on the home screen. The products are clearly shown for the user, I feel this is a good idea but when you go to the next stage there is more information which isn't needed. I personally was starting to get bored with navigating through all of the wireframes. 

Sitemaps and Wire Frames

A sitemap is a list of pages of a web site accessible to users. It can either be a document in any form used as a planning tool for web design, or a web page that lists the pages on a website. This is normally organized in hierarchical fashion. There are two popular versions of a site map. An XML sitemap is structured format that the user doesn't need to see, but it tells the search engine about the pages in your site, their relative importance to each other, and how often they are updated. HTML sitemaps are designed for the user to help them find content on the page and don't need to include each and every subpage. This helps visitors and search engines find pages on the site. 

A wireframe is a visual guide that represents the skeletal framework of a website. Wireframes are created by the user experience professionals called interaction designers. They create wireframes for the purpose of arranging elements to best accomplish a particular purpose. The wireframe is the page layout and arrangement of the website content, including interface elements and navigational systems and how they work together. The wireframe usually lacks typographic style, colour, or graphics. The reason behind this because the main focus is the functionality, behavior and priority of content. 

Wireframes focus on:

• The kinds information displayed
• The range of functions available
• The relative priorities of the information and functions 
• The rules for displaying certain kinds of information
• The effect of different scenarios on the display

Critique of I straw

I believe the best way of improving a website is to critique of the original. The brief I have chosen is I straw I want to bring this website right up to date. I want the product to be more appealing because at the moment, I think the website makes the product look bland. And in my opinion this product is a great invention. I will be aiming my new website to campers, hikers and travellers. As I feel this is the main audience, I did take the third world into consideration however I don't think in reality they would buy this product.

The home page has so much text and information which in my opinion isn't needed. A lot of the information is repeated on several pages, so the viewer is constantly repeating themselves. This can be off putting, so I want to make the website simple like the product itself. Also the website didn't need to put a box around the text, this makes it look dull and uninviting. 

The typography that runs without the website doesn't fit the product. I would like to use a softer, rounded typeface. The reasoning behind this is that water flows so I want to enhance this factor. I think the choice of the colour of blue is too dark and intense for this particular product. The product helps and improves natural resources so I will be lightening the colour majorly to show its a inventive and clever product. 

At the moment the logo its very stiff and corporate, I personally think this isn't the right angle as this is the main element which the consumer will remember. Logos in my opinion is a very important factor.

I have also noticed that the website only shows the Istraw, but however they also produce a water bottle. I think that this would be the more popular product because it's easily carried, stored and it hold more water than the straw itself. I will bringing this product to the front of the website along with the Istraw. I noticed the website shows the price of the Istraw straight away, If  I was to go on this website I would be put off. The reason behind this is because its trying to get me to buy something before I have even looked into the product. 

However I will be keeping the different sections of the website for example what is Istraw?. This is a great element but I'm aware that this sections are not clear because of the amount of text within the home page. I will be using a range of buttons which will be down the right side. I'm convinced this will be more clear to the user. 

I will also be keeping the video however I will be making certain changes. I would like a demonstration of someone using the I straw, because this will give the product more authenticity to see someone using in a real situation. I'm hoping the company will send us free samples so we can produce this within my video.

Website Critique

BBC Iplayer

My first observation is the colour scheme, in this case its pink and black.This theme runs throughout BBC Iplayer. This consistency is an important factor for the user. As the user must be able to navigate through the website without getting confused.

My next element is that website itself has a easy method of choosing a desired programme in which the user wants to watch. Bbc have done this by using different categories throughout their website. The bbc have made two main categories which are featured and most popular, this is helpful tool as it enables you to browse easily through the main programmes that other people are watching. If you scroll down further it shows a list of all the bbc channels, and you can simply click on the channel you want and this enables you to watch bbc iplayer live or recorded. This enables users of all ages to efficiently search for a programme on a certain channel. Because some channels are aimed at certain age ranges. For example bbc three is aimed at mainly young adults. 

Next to this feature, theres a section which enables the user to choose a programme using the alphabetical order system, I feel that this element doesn't need to be embedded within the site. The reasoning behind this is because theres a categories section, from childrens tv to series catch up, which is a more simplistic way of finding your programme. 

At the top of the screen you can flick through all the different elements of the bbc from sport to weather and each of these have they own colour schemes so its easy to recognize. This is one of the features which I personally like because every section that surrounds the bbc is all accessible through one website. 

When you search for a programme using the search tool at the top, it will list all of the episodes that have been aired in the past few weeks, this service is a great catch up tool. This is one of the main reasons I use this service. 

Overall I feel that the website is well designed and clear however I feel that it could do with a little bit of tweaking.