WEB DESIGN

Color

Navigati

ons

Loading Page

Grabs

Attention

Grabs Attention

It is important to grab visitors’ attention in the first 8 seconds, bored visitors will not stick to your web page longer and your web page might function just

to be the Google search (Norton, 2012).

Website design should be functional. no broken codes/links

Websites must be as creative as possible. E.g : the Vertical Split layout of Great Brand

Spilt layout of Great Brand (Spooner, 2013)

What is the Vertical Split Layout?

A combination of two pictures resulting in a creation of one background.

These two split layout are usually contrasted with dark and light color schemes.

Internet source :http://dezayo.us/blog/36-car-website-designs-for-your-inspiration

How should text be presented on Websites? Clear and Straight to the point Break into shorter paragraph Presented in bullet format

Example:Salted Herring Website• Simple• Colorful• Straight Forward• Show Important Points

The F Sharp pattern of text might attract and increase the percentage of visitors (Chapman,2010)

The F sharp pattern (Chapman, 2010)

According to Dr. Nielsen, he states that internet users are less to read content online, users will only read 28% of the text on a web page (Chapman, 2010).

The Importance of Colors

• Idea creation• Convey messages• Invoke feelings• Accentuate areas of interest

Which do you

prefer?

How color play an important role in Web

Design?

Example of Good Color Web Design

Only 3 Simple Colors are used

Words are easy to read

Website points out straight-to-the-point info

Creates a simple yet professional feelings for visitors to view

Example of Bad Color Web Design

Too many color used in the Website

Words are difficult to read

Website do not communicate well with visitor

Create a messy feelings as information are everywhere

Web browsers only share 216 common color. Provides consistent & predictable results (Mac

OS, UNIX, and Windows platform) Limits to 256 colors

** Suggestion : Limit the color palette to 2-3 major colors with shade variation.

Internet source: http://www.pinterest.com/natyy21/restaurant-redesign/ Internet source: http://www.pinterest.com/natyy21/restaurant-redesign/

Color of photograph or graphic elements should not hues outside the browser-safe palette Web browser will automatically dither the

displayed images or navigation buttons Results: Making the page hard to read

Human Color Detector

Human has a color-detecting equipment inside their eyes called a ‘cone’.

3 Types of Cones Red Green Blue

Do you think you know a lot about color?

Color determines: Different meaning interpretation by different

cultures The psychological effect on viewers

Western Greece

How different culture view

Yellow

?

Types of Colors:

WARM COLORS COOL COLORS

EXCITEMENT

CREATIVITY

OPTIMISTIC

PEACEFUL

HONESTY

BEAUTY

Color combination should be chosen & arranged wisely (primary key to Web Design) Color affects mood Create color harmony

Background Colors used on Web Design can be subjective according to human’s: Personal taste Psychological feeling

BAD Color Psychological Effect

Bad Background Color:Bright Blue

WHY? Color is too strong Affecting the text

(Hardly readable) Readers’ eyes

become tired easily

** According to Ann Davlin, blue websites can be associated with the Operation System crashes and people tend to avoid blue background website.

Internet sourcehttp://designwebkit.com/web-and-trends/color-combinations-hell-death-sentence-designs/:

Can this get any slower..?

Nowadays, visitors are unlikely to have the patience to wait.As a result: they abandon slow loading websites

Research by Akamai (2007) 75% of 1058 people would not return to webpages that load more than 4

seconds 30% of the respondents formed negative impression on companies with slow

loading website

Conclusion done by Akamai (2009) 47% expect the tolerate waiting time is just 2 seconds 40% will leave the websites if it takes more than 3 seconds to load 52% online shoppers will stay loyal to quick loading webpages.

Loading Page

Causes of slow loading webpage

Websites are presenting themselves as TV Network. They squeeze in … into 15 & 19 inch

websites:

Picture AudioInformation

Web Designers tend to squeeze everything when websites can only holds 216 colors &

download at 28.8 KB/second.

**Suggestion: Optimize graphic images to decrease the time of downloading the Web

Page.

How should Web Pages be presented?

Has to be Simple Not more than 50K Should be Creative

Software : Adobe Photoshop

This is one of the tool that can be used to design and resize the graphic images, enhancing the creativity & the shorten the length for downloading purposes.

The Gomez Peak Time Internet Usage Study (2010)

75% online users left sites rather than waiting for it to load during the peak internet traffic times.

88% are less likely return to the site after having bad experience.

What is affecting the loading?

More than half of this page size is due to images. Up to 804 KB per page is comprised of images. (Three years ago, images comprised just 372 KB of a page’s total payload.)

NAVIGATIONS

Importance of good navigations Easy access of the pages within the website

Navigations has to be: User-friendly

Easy to access other pages Having color scheme differentiation

Problems of Navigations

Not everyone will have direct access to the website homepage as the link that they click might be links to

pages within the website. If a website provides extensive information but navigation is poor or limited,

others could not be able to access and view these information (klustcreative.com, 2013).

What is the Universal Color Scheme?

This universal color scheme is used to help viewers to differentiate between visited or not

visited page.

Viewers have visited the page before.

Viewers have not visited the page before.

Example of Bad Navigations Website

WHY?

There is too many links available in one page.

Users will feel confused & disturbed.

Messy & tiring for the eyes to view for a long period of time.

Examples of Effective Responsive Navigation

Menu

What do YOU think?

REFERENCE LISTS • Reference• Burzi,F.,2004. Importance of Color in Web Design. [Online] Available at: < http://www.designgraphics.org/article22.html> • [Accessed 9 October 2014]• Johansson, D., 2010. Using Colors on the Web & HTML color codes. [Online] Available at: < http://www.colorsontheweb.com/colorsontheweb.asp> [Accessed 9th

October 2014]• Muller, G., 2011. 25 Examples of Perfect Color Combinations in Web Design. [ Online] Available at : <

http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/> [ Accessed 7th October 2014]• • Klust creative. (2013). Importance of Navigation in Web Design. [Online] Available at: <

http://klustcreative.com/theblog/importance-of-navigation-in-web-design/ > [Accessed 9 October 2014]• Powazek, D. 2006. Where Am I. [Online]. Available at < http://alistapart.com/article/whereami > [Accessed 9 October 2014]• Bleakley, N., 2014. What makes a good website. [Online] Available at: http://sugarrushcreative.com/blog/what-makes-a-good-website [Accessed 6th October

2014]• • Chapman, C., 2010.10 Usability Tips Based on Research Studies. [Online] Available at:

http://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-on-research-studies/ [Accessed 6th October 2014]• • Norton, C., 2012. Don’t bore your visitors: How to evaluate your website’s homepage in 30 seconds or less. [Online] Available at:

http://www.websiteondemand.ca/blog/entry/conversion-optimization/dont-bore-your-visitors-how-to-evaluate-your-websites-homepage-in-30-seconds-or-less.html [Accessed 6th October 2014]

• • Spooner, C., 2013. Interesting Web Design Trend: Vertical Split Layouts.[Online] Available at:

http://line25.com/articles/interesting-web-design-trend-vertical-split-layouts [Accessed 6th October 2014]• • Shaun Anderson, 2014. Your Website Design Should Load in 4 Seconds! Hobo Internet Marketing, [blog] 23 February, Available at: <

http://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/> [Accessed 5 October 2014].• • Chris Munch, 2010. Effect of Website Speed on Users. Munchweb, [blog] 29 September, Available at: <http://munchweb.com/effect-of-website-speed>

[Accessed 5 October 2014].