Logo Ideas

I have decided to develop the logo further as i think the original logo is outdated. I started with scanning in my drawn idea however this didn’t look good on computer which was a shame. So I began experimenting with typography. I created outlines so I could put my personal touch on the type itself. I have kept to a blue colour scheme,. Whilst experimenting I have used gradients tints, type on path tool. The reason I used the type of path tool is because I wanted my text to glide and make it look more like water without adding the blue colour as my background is already blue.  Another effext I have used is the brush tool, this gave my logo a nice rough look however I feel ths doesn’t relate to the product itself. 

Diagram Development

I have produced the diagram in Adobe Illustrator, this has been taken from the original however I will be changing the colour schemes in the next week however I feel that this is a decent looking diagram as it is but I would like to be my own stamp on it. So I will be changing the bacteria to a green, and I have produced the water flow using the brush tool in Adobe Illustrator. I think this is quite effective. I could of used the original image however I wanted to use Illustrator to add my own touch to the website. 

This is my final diagram, I felt green worked better than red in my own personal opinion. The original diagram had arrows that shown what each element however I felt that wasn't needed. As they are already instructions of how it works on the page I don't feel it needs to be repeated. 

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. 

Task 3

HCI  is known as human computer interaction. This is how people use computers. A web site has to be simple, useful and accessible. 

This link shows what HCI is

http://www.youtube.com/watch?v=KtvwustmEDI

Ten usability heuristics

Visibility of systems status - The system should always keep users informed about what is going on, through appropriate feedback within reasonable time

Match between system and the real world - the system should speak the users language, with words, phrases and concepts familiar to the user, rather than system oriented terms.

User control and freedom - users often choose system functions by mistake and will need a clearly marked exit to leave the unwanted state without having to go through an extended dialogue. 

Consistency and standards - users shouldn't have to wonder whether different words, situations or actions mean the same thing. Follow platform conventions.

Error prevention - Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error prone conditions or check for them and present users with confirmation option before they commit to the action. 

Recognition rather than recall - minimize the users memory load by making objects, actions and options visible. The user shouldn't have to remember information from one part of the dialogue to another. Instructions  for use of the system should be visible or easily retrievable.

Flexibility and efficiency of use - accelerators unseen by the user may often speed up the interaction for the xpert users such the system can cater to both inexperienced and experienced users.

Aesthetic and minimalist design - Dialogues should not contain information which is irrelevant and rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose and recover from errors - error messages should be expressed in plain language.

Help and documentation - even though it's better if the system can be used without documentation, it may be necessary to provide help and documentation.

http://mnmlist.com/

This is an example of a uncluttered website. This example has a simple layout which uses white space to show simplicity. The styling is linear as it is a just scroll down format. 


http://www.restaurantguideatlanta.com/

This the second example of a cluttered website. Theres too much text and advertisements. This doesn't keep to the three step rule as there is so many options.


Web design mistakes 

• Legibility problems
• Non - standard links
• Flash
• Content that's not written for the web
• Bad search
• Browser Incompatibility
• Cumbersome forms
• No contract information or other company info 
• Frozen layouts with fixed pages widths
• Inadequate photo enlargement

Three click rule

The three click rule is an unofficial web design rule concerning the design of website navigation. It suggests that a user of a website should be able to find any information with no more than three mouse clicks. It is based on the belief that users of a site will become frustrated and often leave if they can't find the information they are looking for within three clicks.

http://www.iamyuna.com/ This is a example of the three click rule.

Site maps

http://www.apple.com/sitemap/
http://pages.ebay.com/sitemap.html 
http://www.number10.gov.uk/site-map/

These are examples of site maps for three different websites. Apple and Ebay have the same format, which in my opinion is more effective than number 10. Number 10's layout has too many categories which is confusing for the user. In my opinion I think that the bigger companies have more experienced designers and this is why the site maps are more clear and effective. Going back to the number 10 site map is too businesslike and this would put off certain users.

User feedback

http://www.apple.com/contact/feedback.html
https://opm.princeton.edu/forms/request-WWW.html

These are two feedback pages. I personally think princeton university has too many information boxes, personally this would put me off as I wouldn't like to receive junk mail and also I would be concerned that my information that would shared with other websites. So in my opinion Apple have a much better layout.

Accessibility 

http://www.hsbc.co.uk/1/2/accessibility;jsessionid=0000s-eB518ot9sAPpZPDNIg0Y-:12c58o847
http://www.tesco.com/direct/?redirect=default
http://www.apple.com/accessibility/
http://www.rnib.org.uk/professionals/webaccessibility/Pages/web_accessibility.aspx

I feel that all of these websites are very accessible, however the last link is over packed and hard on your eyes. Tesco is also over packed, however its easy to navigate. The apple site has kept to the simple white space again, this theme runs throughout their website, this is one of the main rules of website design, because if the design changed the user would be confused. But overall I feel that these websites are easily accessible.

Tutorials

Notes on powerpoint

What I use the internet used for?

• Downloading music, mainly youtube
• Social networking (Twitter,tumblr and facebook)
• Online shopping (HMV, river island, sainsburys etc)
• Catchup t.v/ films

About the internet

• It started in the 1960s, in the american defence transferred information through many computers
• The advanced research project agency (ARPA) created a network
• Gateways - all computer networks are connected
• Protocols - exist for different types of internet traffic
• TCP/IP - transmission control protocol/ internet protocol
• internet addresses - each computer has a unique name eg 231.231.6.7
• domain addresses - we prefer names then numbers so instead of 231.231.6.7 it becomes cinemac.co.uk
• ISP - internet service provider - provides the internet
• Server - is another computer possibly without a screen, with many other banks of computers in room somewhere,
• Web host - is a company that store your websites on their server
• URL- uniform resource locater
• HTML- hypertext markup language is language designed to display text and allow hyperlink to be embedded within it
• browser - software to allows you to access the WWW.
• Bandwidth - the capacity of a line to carry data.

Tim berners lee developed the world wide web in 1991 and ted nelson helped him to produce non linear text documents.

About Dream Weaver

Adobe Dreamweaver, formerly known as Macromedia Dreamweaver is a professional web development tool that has been around since 1997. It offers a flexible workspace that can be customized to fit the user's needs and integrates well with other Adobe products. It has a robust collection of tools, yet is still easy for a beginner web developer to use due to its intuitive interface.

Dreamweaver offers three different interfaces which are design only, HTML code only or a split screen combination of design and code. Those who are less familiar with HTML may find building web pages in the design only interface much easier. It looks and behaves like a word processor window. For those who like to get into the HTML code and tweak things down to the final tag, the coding window has an easy to read format for programming. Tags are colour coded, lines are numbered and the nested tags are automatically indented.

Most tools in Dreamweaver are located on the main screen so they easy to find. The toolbar at the top of the screen so they are easy to find. The toolbar at the top of the screen can be set for menus or tabs and sorts tools into seven categories based on their purpose. The tools needed for a basic web page can be found under the "common" toolbar tab. A "favourites" tab can be customized to contain the tools used most often. At the bottom of the Dreamweaver editing window is the properties inspector, which allows the user to adjust attributes associated with a particular object. The inspector palette automatically changes according to what type of object is selected on the page.

First task 24/09/12

The first lesson consisted of looking at the internet and what surrounds the World Wide Web. We went through a power point on all the different points such as java script, protocols, gateways etc. Some sections of the powerpoint I fully understood however some areas which I was confused about. At the end of the lecture we was asked to research two sections of the power point to research and look deeper into the terms. 

I choose java script and web page plugs in as these are terms which I don't understand. I began looking back over the power point to refresh my memory and I began researching.

Java Script

Java script is the Netscape which was developed with a scripting language that is used in millions of web pages and server applications. It's a scripting language with a supporting prototype. Its a lightweight programming language that supports the writing of the scripts. Java Scripts was designed to add interactivity to HTML pages. The code is inserted into HTML pages to be executed by the web browser. (meaning that the browser would interpret the commands directly without requiring the code to be compiled and without requiring a plug in to be able to run it)

Web page plug ins

Web page plug are sets of software components that adds specific abilities to a larger software application. If supported, plug ins enable customising the functionality of an application. For example plug ins are commonly used in web browsers to play videos, scan for viruses and display new file types. Examples include Adobe Flash Player, Quick Time and Java Applets. 

I know feel I have a better understanding of the term itself, this exercise has helped me greatly. I'm looking forward to learn more about Java Scripts because this one of the main elements of this module. However as I have never used any java scripts this is seems very daunting at the moment. But I'm confident that I will be able to get used to the software.