Internet source:http://topshelfweb.

com/wp-
content/uploads/2014/02/web_design.jpg
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).
Internet
source:http://fc01.deviantart.net/fs42/i/2009/153/f/8/MAGIC_BALL_by
_SET07.jpg
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).
Internet source:
http://simplicity.laserfiche.com/sites/default/files/styles/w
idth-550/public/Jakob%20Nielsen%20photo.jpg

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
Internet source: http://sproutnewmedia.com/wp-content/uploads/2013/08/Mirror.png
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
Internet source: http://www.topdesignmag.com/wp-content/uploads/2011/02/220.png
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 humans:
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 Audio Information
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.
Internet source: http://img.wallpaperstock.net:81/adobe-photoshop-logo-
wallpapers_34161_2560x1440.jpg
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 pages 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).

Internet source:
http://www.inc.com/uploaded_files/image/website_navigation_
pop_6498.jpg
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 9
th
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 7
th
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 6
th
October 2014]

Norton, C., 2012. Dont bore your visitors: How to evaluate your websites 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].