Super StarLeader: Teh Hooi Lene 0314220

Chan Sin Yee 0314135 Ho Jing Shing 0314357 Hau Siew Ting 0314909 Lim Le Xuan 0314540

Group name:

Article 1

Find out what’s color

Summary of the Article

Colour should be one of your first concerns when it comes time to start your web site design

Currently web browsers only share 216 common colours. When designing key elements in your web site you should stay within the 216-color pallet.

Should always use a browser safe colour when using solid colour as a design element.

Red will makes people become tired and fatigued ; Using yellow colours for banners and advertisements will receive more attention from the viewer's eye.

Do not make large parts of your web site with bright colour.

We agree with the articles content.

Colour can control or affect the look and feel of the web

site.

The importance of colour when designing a website

Colour deeply influences the overall look and feel of a website and can form the first impression about a company for visitors.( Daniela Baker, 2011)

Colours can be investigated further and help web designers to process their designs in more depth to achieve the desired results.

The right colours will help web designers provide users with certain emotional impacts.

Colours not only have an impact on or vies, they also provide other stronger stimulations.

Colours can affect the readers’ moods and provide sensations.

Colour is used to get your business noticed and positively connect potential clients. (Amber Tripp, 2014)

How colour affect a website?

1. Web-safe colour

Web Safe colours, also known as browser safe colours, were introduced many years ago, when the web was in its infancy. And despite the advances in graphics cards, monitors and browsers, you can still find the web safe palette in many graphics programs.

(Sabrina H. DeLay,2014)

Figure_07(GaryW.Priester,2013)

Using a Web Safe colour, should produce a cleaner image like the one shown on the right.

“If your web site has a solid colored background, make it a Web Safe colour. That's your guarantee the colour will not embarrass you when it displays on the other computer platforms.”(Gary W. Priester, 2013) .

Web safe colour is especially helpful when we want to fill art with flat or solid colour. Logos, cartoons, and drawings can be susceptible to ugly dithering when the browser-safe palette is not used (Abigail Rudner, 2003).

How colour affect a website?

2. Dithering

creates lots of new transitional pixels, creates a larger file size.

We should use dithering if the image contains a transition between colours as shown here.

The example on top with no dithering shows banding. The file size is 2.2K. Adding dithering as seen on the bottom image, smooths the transition.

Figure_08(GaryW.Priester,2013)

3. Bright Colour Do not make large parts of your web site with bright colour. Only

use them in areas where you want the visitor to focus on.

It might get your visitors attention but they will either consciously or subconsciously notice their eyes getting fatigued.

This will make them not want to look at your web site for long periods of time.

Yellow, pure bright lemon yellow is the most fatiguing colour. The answer comes from the physics of light and optics. More light is reflected by bright colours, resulting in excessive stimulation of the eyes. Therefore, yellow is an eye irritant. For best results, use softer tints of the hue or small quantities.

4. Bright Colour - Yellow

Good website: http://danjoedesign.com/

(Nyaggah, J. 2014)

Comparison

(Nag, 2002)

Bad website: http://www.colourpixel.com/

Comparison

( Pep Zuijderwijk 2003)

Bad website: http://www.saltedherring.com/

Comparison

Red has been shown to increase blood pressure and heart rate. It increases appetite, restlessness and nervous tension. Creating a site with bright red is a very poor idea!

Bright red has the longest wavelength. When viewing these colours the human lens has to adjust to focus, and it tries to focus on both. This tires the eyes very quickly and will give the viewer a headache.

5. Bright colour - Red

Instructions: 1. Make sure the image below fills your computer screen. 2. Look at the image at a distance of 12 inches or 30 centimetres from the screen. 3. Stare at the black dot in the middle of the red rectangle for 30 seconds. Keep your focus on the black dot or the test will not work. 4. After 30 seconds, shift your focus to the black dot in the middle of the white rectangle. Once again, you must focus on the black dot in the middle of the white square or this will not work.

Did you see red? Probably not. What did you see?

Article 2

Don’t bore your visitors

A web site design should not be too confusing nor should it be too simple.

When looking at A and B, you see two objects that look like a circle and a square.

We see these object because humans like to relate.

We have the ability to create what is not there in order for us to recognize an object.

We like to use the ability too - use our mind to make connections.

When looking at C you should see two things. The first thing you see are four groups of two vertical lines because humans like to group objects together. The second thing you should see is a circle because humans like to relate.

Two ideas to keep in mind when designing a web site are humans like to relate and humans like to group objects together.

A B CSummary of the Article

We agree with the article. It mentioned that humans like to relate. It’s like the website’s pictures is related with the topic which will earn more attraction from visitor to a website. And group objects together. For example, Johnny Depp and Brad Pitt are under actor category while Justin Bieber and Nicki Minaj are under singer category. It’s mean that same things put to inside a same category. So that visitor will have the clear direction.

(Jenny, 2011)

(FeaturePics, 2014)

Visitors need very clear and reinforcing guidance to get them to do what you want.

You need to guide them in the same way through your page to complete the desired action. Just like an author who tells his story in a sequence of ordered chapters, you want to tell the story of your product or service offerings in a pre-determined order of web page elements.

High converting landing pages use a variety of visual cues and an understanding of typical web page viewing habits to immediately put that leash on visitors and guide them through to conversion.

Usability studies have shown that viewers tend to relate to and be drawn to images of people that either resemble or appeal to them. Try to stay clear, though of images of people who are obviously professional models (Engine Ready, Inc. 2014).

How to create an interesting website?

The website have clear direction and the index page is categorized with few topics which is very tidiness. Visitor can easily proceed to the landing page which they preferred. The pictures they used is relatable with the topic.

(Frost*collective, 2014)

Good website: http://frostcollective.com.au/

Comparison

This website very confusing and no clear direction for user where to proceed to find out more. No clear and reinforcing guidance for visitor, visitor couldn’t identify what is this website about. Nothing is relatable and the whole vision is bad.

(Yugop.com, 2007)

Bad website: http://yugop.com

Comparison

Article 3

Don’t make them wait

There are many companies website put top-notch graphics and sound into their web-page.

Most of the viewing in our web site on a screen that is between 15 and 19 inches wide, can only see 216 colors, and can only download at 28.8 kb per second.

If viewer need to fully downloaded faster, they really need to cut down on the size of the page.

For a web page to be successful it needs to download quickly and look good. Use design more, graphics less.

(shawn hessinger,2013)

Summary of the Article

(Mustafa Ziraba, 2013)

We agree that graphics and sound will slow down the speed of the loading website. Viewer with slow speed connection will be impatient for the loading pages.

Which kind of website will viewer prefer as long as they do not have a

high speed connection? Which will loads faster?

The text of the page, any graphics it contains, video and sounds, will be one of the element to cause a slow loading web pages. (rob.schifreen, 2012)

The most common reason for slow websites; there are lots of images, all of which are full-size and uncropped.

Flash and sounds are great tool for adding interactivity or animation to a website. However, flash and sounds are also very bulky and causes websites to load slowly. (Sachin Kakade,2013)

A simple designed website without fancy graphics.This site will be loading faster than the bad website (on next slide) because of its simple design without adding many graphics in their webpage.

Good website: http://theclocksmiths.it/

Comparison

A complicated website with lots of graphics and sound. This website has more prominent in the visual effect by providing graphics, sounds and flash. Viewers without patient and lack of high speed connection may be dissatisfied with the website.

Bad website: http://home.disney.com.my/

Comparison

Website load times have been identified as a crucial factor in measuring website performance.

In 2006, Akamai established that 40% of online viewer feel that the most influential factor for them to revisit a site is whether the website will load quickly.

More than a quarter of dissatisfied viewers are likely to develop a negative perception of the company.

How a Slow Website Impacts Your Visitors

(techidea.co.nz, 2012)

1. Optimized ImagesUnoptimized images as any image that can be reduced in size without visual impact to your user, also known as “lossless” optimization. Images that are optimized using lossless methods are visually identical to their original images, just stripped of extraneous metadata that helps describe the image .( Mark Isham, 2013)

PNG image files are often needlessly large. This is due to extra data inside the PNG file such as comments or unused palette entries as well as the use of an inefficient DEFLATE compressor. PNG images can be optimized using free tools like pngcrush that reduce the size of the file without changing or reducing the image quality.

JPEG image files can also be needlessly large for similar reasons to PNG. By using free tools such as jpegtran you can convert JPEGs into progressively rendered JPEG files to reduce the size of the file without losing image quality.

2. Stop kowtowing to Flash.

Flash can be problematic. Sure, Flash can be impressive. But more often than not, it’s more of a show-stopper than a showstopper. If you need to use it at all, use Flash in moderation, as a component within the page.

(minimalwal, 2011)

3. Design more, graphic less.

Graphic images should be as small as possible to avoid longer loading time.

Keep in mind the colour being use as we know the more colour we have in a image the bigger it's going to be.

For Example:

Article 4

Navigation

There are many companies website put top-notch graphics and sound into their web-page.

Most of the viewing in our web site on a screen that is between 15 and 19 inches wide, can only see 216 colors, and can only download at 28.8 kb per second.

If viewer need to fully downloaded faster, they really need to cut down on the size of the page.

For a web page to be successful it needs to download quickly and look good. Use design more, graphics less.

(shawn hessinger,2013)

Summary of the Article

Navigation should answer questions such as where am I? Where can I go from here? And where was I already.

Name or logo of your company along with a page name should be on the top of every page in your website.

There should be no guessing of what your website does for your visitor.

The links to pages within your website or links to an outside webpage.

Either way of put links in context or in words.

Links title improve the navigation usability.

Summary of the Article

Using color navigation to work well

Use blue for unvisited and purple for visited as a color scheme

Prevent using blue, red or black color

Easy to understand the Primary navigation if the website have at least two forms of navigational schemes

Summary of the Article

We agree with the articles content. Navigation is the way to guide readers through a website.

1. Company logo & name on top of the website

Company logo & name must be on the top of every page in your website.

Company logo & name should be your link back to your home page.

Do not let your visitor guessing of your website.

"Your logo is an important part of your brand, so make sure it's located prominently on your site, "Also, it's a good rule of thumb to link your logo back to your home page so that visitors can easily navigate to It." (Jennifer Lonoff Schiff,2013)

Their website has very clear navigation and when you want to go back to the home page, you can just go back by clicking the company logo on the top of the website.

Visitors can clearly see the company name and logo when visit to Yeo’s company website.

Good website: http://www.yeos.com.my/

Comparison

This website did not fulfill the condition. the company logo only appear on the middle left in the website

There is no any clearer information that tell visitors that this is our home page.

When you clicking their company logo, you cannot go back to the homepage of the website.

Bad website: http://www.hybridworks.jp/

Comparison

2. Linking Navigation

Users want to know if they already visited a page

Color differentiation as blue for unvisited and purple for visited as color scheme

Using other colors will just confuse people

“color is a central part of our lives. People look at and react to different colors everyday. People rely on colors to convey meanings for many things” (HyeYeonLim, 2013 ).

The research stated that Experimental support for the differentiation of visited link colors is presented, along with analyses of the advantages provided by differentiating link colors (Tim Halverson and Anthony J. Hornof, 2004).

3. Links to pages to an outside website

Visitors will always want to know “Where can I go from here”

There must a link to pages within your website

The linking navigation helps people move around your site when you have a clean navigation menu in the sidebar and/or the footer. It helps people find the posts and articles you want them to find. (wordpress, 2013)

the Starbucks Company website also show the good linking navigation, you can click on any button on their website, the website will automatically brings you to the page you want to view and also the outside website linking as well, such as facebook, twitter.

Good website: http://www.starbucks.com.my/

Example

Starbucks’s facebook account after clicking the starbucks icon in their website.

Good website: http://www.starbucks.com.my/

Example

References List

Gary W. Priester, 2013, Consistent Colors For Your Site - All You Need To Know About Web Safe Colors, HTML goodies, viewed on 8th October 2014, < http://www.htmlgoodies.com/tutorials/web_graphics/consistent-colors-for-your-site-all-you-need- to-know-about-web-safe-colors.html>

Abigail Rudner, 2014, Fireworks MX Fundamentals, Peachpit, viewed on 8th October 2014,< http://www.peachpit.com/articles/article.aspx?p=31078>

Amber Tripp, 2014, Color Theory: The Importance of color in web design, Design and promote, viewed on 8th October 2014, < http://www.designandpromote.com/color-theory-the-importance-of- color-in-web-design/ >

Daniela Baker,2011, The Importance of Color in Website Design, Designrfix,viewed on 8th October 2014, < http://designrfix.com/web-design/importance-color-web-design>

Sabrina H. DeLay,2014,how, photograph, viewed 10 October 2014, <http://www.govloop.com/community/blog/letting-go-of-the-how/>

GaryW.Priester,2013, Figure_07, photograph, viewed 10 October 2014,<http://www.htmlgoodies.co m/tutorials/web_graphics/consistent-colors-for-your-site-all-you-need-to-know-about-web-safe- colors.html>.

GaryW.Priester,2013, Figure_08, photograph, viewed 10 October 2014,<http://www.htmlgoodies.co m/tutorials/web_graphics/consistent-colors-for-your-site-all-you-need-to-know-about-web-safe- colors.html>.

Jay Remer, 2011, Agree to disagree, photograph, viewed 10 October 2014,<http://todaysetiquette.blogspot.com/2011/06/agree-to-disagree.html>.

Elliott Brown ,2014, Birmingham & Fazeley Canal - Fleet Street - new decking - sign - Caution Slippery floor surface, photograph, viewed 10 October 2014, <https://www.flickr.com/photos/ell-r- brown/15183964278/in/pool-yellowwarning >.

Nyaggah, J. (2014). Owlses. [online] Available at: http://danjoedesign.com/ [Accessed 10 Oct. 2014].

Pep Zuijderwijk , (2003). Saltedherring. [online] Available at: http://www.saltedherring.com/ [Accessed 10 Oct. 2014].

Engine Ready, Inc. 2014, Treating Your Visitors Like Untrained Dogs, viewed 9th Oct 2014, http://www.engineready.com/sem-resources/sem-newsletter/treating-your-visitors-like-untrained-dogs.php

Feature Pics. 2009, [image] viewed 9th Oct 2014, http://www.featurepics.com/online/Construction-Group-548668.aspx

Frost Collective. 2014, viewed 9th Oct 2014, http://www.frostcollective.com.au/

Walsh, J. 2011, [image] viewed 9th Oct 2014, http://www.asdeducation.com/relate

Yugop.com. 2007, Motion Logic With Rigid Dynamic. Drag Each Cell To Interact, viewed 9th Oct 2014, http://www.yugop.com/

Kakade, S 2013, 8 Reasons Your Website Is Slow, viewed on 9th October 2014 < http://social.msdn.microsoft.com/forums/ie/en-US/c7133cd3-1a9c-49c5-a267ba556d619366/8-reasons-your-website-is-slow>

Schifree, R 2012, How To Diagnose Slow-Loading Web Pages, viewed on 9th October 2014 < http://www.techsupportalert.com/content/how-diagnose-slow-loading-web-pages.htm>

Isham, M 2013, 5 Common Causes of Slow Website Performance, viewed on 9th October 2014< http://zoompf.com/blog/2013/04/top-5-causes>

Tips For Addressing Page Loading Speed, viewed on 9th October 2014< http://smallbiztrends.com/2013/10/website-page-load-speed.html>

Why is WordPress So Slow And 5 Ways to Fix it, viewed on 9th October 2014< http://onlinemediamasters.com/why-is-wordpress-so-slow/> Tips to Speed Up your Website / Blog Loading Time, viewed on 9th October 2014< http://pcsplace.com/blog-tips/tips-to-speed-up-your-website-blog-loading-time/> How to Speed up Your Website – Tips and Tricks, viewed on 9th October 2014< http://www.digital6technologies.com/speed-website-tips-tricks/4063> Why is my Internet Connection so slow?, viewed on 9th October 2014< http://www.monitor.co.ug/artsculture/Reviews/Why-is-my-Internet Connection-so-slow-/-/691232/2032104/-/cd8yx3z/-/index.html> Posts Tagged ‘Just say no’, viewed on 9th October 2014< http://www.minimalwall.com/2011/10/13/breathe-2/>

Hye-YeonLim,2013,“The Effect of color in Web Page Design”, viewed on 8 October 2014,http://www.edb.utexas.edu/minliu/multimedia/The%20Effect%20of%20Color.pdf Jennifer Lonoff Schiff, 2013, “13 simple tips for improving your web design”, viewed on 8 October 2014, http://www.cio.com/article/2385250/online-marketing/13-simple-tips-for-improving-your-web-design.html Hybrid work, 2014, viewed on 8 October 2014, http://www.hybridworks.jp/Starbucks Corporation, 2014, viewed on 8 October 2014,http://www.starbucks.com.my/ Tim Halverson and Anthony J. Hornof, 2004, “Link color guide a search”, viewed on 8 October 2014http://pdf.aminer.org/000/088/545/link_colors_guide_a_search.pdf Wordpress, 2013, “Good navigation link”, viewed on 8 October 2014, http://codex.wordpress.org/Good_Navigation_Links Yeo Hiap Sheng Malaysia Berhad, 2014, “Yeo’s The Natural Choice”, viewed on 8 October 2014,http://www.yeos.com.my/

END