You are on page 1of 52

Leader : Tee Lian Cheng (0319996)

Wong Shin Yih (0319238)


Lu Siew Tein (0320166)
Teh Xin Yie (0319236)
Soon Ka Shin (0320034)
De Kids
Assignment 2:
Research Design Report
Research Topic : Layout Design Concept
Find Out What Colours Will Cause Your
Visitors to Hate You
Article:
Direction of this article: 2 topics
1) 216 Colors Palette

2) Website Colors
When designing key elements in your web site you
should stay within the 216-color pallet.
We agree with this statement as after research it states that if you designing colors for your
website which is outside 216 colors pallet and someone who using 256 colors pallet and comes
to your site, they will find a lot display problems. The graphic will look speckled because other
nearby colors dithered the graphics. 216 colors pallet is to ensure all computers or laptops
would display colors correctly.
216 Colors Palette
Red color box and Blue color box are colors within the 216 colors palette. Purple color box is the
color that outside the 216 color palette and you can see the dithered on Purple color box.
Example:
216 Colors Palette
This article says about colours should be the first
concerns when designing a web site.
We agree with this statement as color of one web site is really important to keep your visitors stay at
your site and continue to view your web site.
Website Colours
The color you use on header of your website,
headlines and sub-headlines, text, and
background color of your website and so
forth have the psychological impact on your
visitors.
Colours can be used as an expression
To choose best color of your website, it is
important to understand color psychology and
the subconscious and subliminal effect of
colors on emotions so that you can capture the
attention of your visitors and potential
customer.
Website Colours
For example, black and white represent professional, seriousness. If your website is for business
purpose using black and white color can be one of your choices to choose for your website to
show your business is professional and trusted. Visitors who view your website will find your
business serious and professional. They will trust your company more than other colorful
company websites. Choose colors according to what the meanings or feel of your site you want
your potential visitor to have or according to your company objectives, products or services.
Different colors associated with different meanings
Colours can be used as an expression
Website Colours
List of colors meanings
and psychological emotions
RED- get attention, danger, warning, excitement, food, adventure
BLUE- trustworthiness, success, seriousness, calmness
GREEN- balancing, nature, health, life, harmony
ORANGE- creativity, fun, youth, affordability
WHITE- innocence, purity, cleanliness, simplicity
PURPLE- royalty, justice, inventive, uncertainty, luxury, fantasy, dreams
YELLOW- curiosity, playfulness, cheerfulness
PINK- romantic, sweetness, innocence, youthfulness, tenderness
BROWN- comfort, nature, dependability, friendliness, simplicity
GREY- neutrality, indifference, reserved
BLACK- seriousness, professional, darkness, mystery, secrecy
Colours can be used as an expression
Website Colours
Too much bright colors in a website lead your visitors to leave your website
quickly as it is difficult for your visitors to read and very distracting and painful to
your visitors eyes. Bright color might be used when you want to focus on
something or gain your visitors attention such as advertise something or sales, etc.
Not using too much bright..
Website Colours
Color of text on website must be always readable for your visitors. It must be easy to
read and the color of text must not let visitors eyes fatigue such as red and yellow
colors.
Color of Text must be readable
Website Colours
- Used colors within 216 palette
- Not too much on bright colors
- Choose colors theme according to your
potential visitors, company objectives, site
key objectives, products and services of
company
- Colors of text must be easy to read
- Simple & Neat
Good
Bad
- Used colors outside 216 palette
- A lot bright colors
- Randomly choose colors (eg. colorful website,
wrong combined colors)
- Text using color that hard to read
- Complicated & Messy
Example of GOOD Websites
on Great Color Schemes
spektrummedia.com
secretkey.it hyundai-veloster.eu
dokimos.org
rogerart.com
mamascheesies.com
Example of Bad Websites
on Worst Color Schemes
References
Colorcombos.com, (2014). Bright Colors - Website Basics. [online] Available at: http://www.colorcombos.com/bright-colors-
article.html [Accessed 8 Oct. 2014].

Irby, L. (2014). Choosing Colors For Your Website Design. [online] 2createawebsite.com. Available at:
http://www.2createawebsite.com/design/color-psychology.html [Accessed 8 Oct. 2014].

Msdn.microsoft.com, (2014). The Safety Palette. [online] Available at: http://msdn.microsoft.com/en-
us/library/bb250466(v=vs.85).aspx [Accessed 8 Oct. 2014].

Pallasweb.com, (2014). How to make effective use of color in websites. [online] Available at:
http://www.pallasweb.com/color.html [Accessed 8 Oct. 2014].

Top Design Magazine - Web Design and Digital Content, (2011). 20 Examples Of Bad Web Design - Top Design Magazine -
Web Design and Digital Content. [online] Available at: http://www.topdesignmag.com/20-examples-of-bad-web-design/
[Accessed 8 Oct. 2014].

Francis, C. and Francis, C. (2014). 40 Stunning Website Designs with Great Color Schemes. [online] Onextrapixel.com.
Available at: http://www.onextrapixel.com/2013/10/25/40-stunning-website-designs-with-great-color-schemes/ [Accessed
10 Oct. 2014].

Dokimos.org, (2014). ACCEPT JESUS, FOREVER FORGIVEN!. [online] Available at: http://www.dokimos.org/ajff/ [Accessed 10
Oct. 2014].

SitePoint, (2000). The 216-Color Webmaster Palette. [online] Available at: http://www.sitepoint.com/color-webmaster-
palette/ [Accessed 8 Oct. 2014].

Francis, C. and Francis, C. (2014). 40 Stunning Website Designs with Great Color Schemes. [online] Onextrapixel.com.
Available at: http://www.onextrapixel.com/2013/10/25/40-stunning-website-designs-with-great-color-schemes/ [Accessed
10 Oct. 2014].
Navigation
Easy navigation around a website is of
the up-most importance when designing a
website
I agree with this statement that navigation is the best understood
as the method in which you explore and move around the website.
It is a very important function that enables viewer to access your
site from pages other than home page. It is also easier to find
information in the website they are searching for.

Simple Navigation
As a general rule, simple navigation is best and not need multiple clicks. For example, less clutter
in terms of menu structures, calls to action and design allows anyone to find their way speedily.
Visitors will lose interest if they have to put in too much effort when comes to moving through
your site to get their desired information.
A website should be well organized
with navigation
People cant automatically understand how our site is
organized and where they should click to get where they want
to go. Navigation is a way of organizing our site. For
example, by making good use of primary navigation,
secondary navigation, menus, and internal linking, you can
create a user experience that is likely to keep people
interested and loyal to our website.
Consistency of Navigation
Consistency is rather important because visitors will get confused if there are different changes
on every web page and would seek a simpler website that gives the required information. A
consistency navigation allows user to find their way around, or back to where they have
already been if they wish.
Put Home Page Navigation Button
Home page icon must be included in website every page so that visitor can go back
to the home page when desired. Website design is fun but should be done with these
steps in mind for good navigation.
Emphasize on certain
Navigation
There are several navigation is important to emphasizes on such as Contact, Home Page and also back
button if necessary. Contact is important because it allows visitors who are interested in their services or
product to connect the company itself.
Letting readers know where they are
Navigation should give readers a clear and clear hint of what page of the website they are
on. Imagine you are on holiday and you are looking at a map in a town square. If the map
is well designed, one of the most prominent features will tell you - "You are here."

For example
As you can see CNNs website, the masthead in bold capitals, the word "ENTERTAINMENT
describes the page the reader is on, should be a different design form the other classifications
in the navigation.
Good example of Navigation
Bad example of Navigation
References
http://blog.etech7.com/blog/bid/142508/Website-Design-The-Importance-Of-Good-Navigation

http://www.streetdirectory.com/etoday/why-good-website-navigation-is-important-uepcoj.html

http://klustcreative.com/theblog/importance-of-navigation-in-web-design/

http://www.onextrapixel.com/2009/07/03/10-principles-of-navigation-design-and-why-quality-
navigation-is-so-critical/

http://www.treefrog.ca/the-importance-of-good-website-navigation


Dont Bore Your Visitors Keep Them
Thinking
Direction of this article: 2 topics
2. Attractive and Interactivity 1. Design Layout
Design Layout
We agree with this statement as to draw viewers attention, the first impression are important role due to it
is the key crucial to keep your viewer to continue look on it before they being interrupt into other content of
website.
A good website design layout should keep the viewers interested
Design Layout
We agree a web site design should be simplicity and not to confuse the viewers.
The viewer tend to look for website is simple and classy. For example, they tend
to ignore a long web page and rather click than scroll the website.
In the website design layout should focus on the important things that we want to
convey.

A picture can speak a thousand words, and using a correct image for your website could assist with the
brand positioning and stay interact with your target consumer.

Make use of original information and images will make a website look more credible and provides an
original approach which can match with your brand identity.

Design Layout
Consistency of the website also an essential principles in website design layout.
Create a consistent layout will lead your whole website to keep your viewers
mind at ease.
The consistent layout has to do with textures, colors, patterns and use borders to
placing the content on your webpage.


Design Layout
Example of Design Layout
Coca-Cola website exploit the brand color red and white color to be their consistency
of color.
Example of Design Layout
Oreo website has make use of consistency of brand color such as blue, black, and
white. Besides, the website design layout are dynamic and playful to target their right
consumer.
Interactivity
We agree this agreement as a human being are often connect things that we can see
on website to something they have seen before.
The purpose of interactivity is to attract viewers attention and to engage them on the
webpage which create 2 ways communication.

A viewer tend to look at objects and use their mind to make
connections. The website keep them interested.
A good design layout is always meet the needs of the viewer.
To create the most effective way of website page is to create informative
details, entertainment, creative type of interaction and also with a clear
goal.
Interactivity
Example of Interactivity
Starbuck website has shown that the creativity of the website and it makes this site more playful and
interactive to attract the viewer. A viewer can see different types of coffee available by mouse over the
coffee packets as shown in the website.
Example of Interactivity
Data Fisher website has
make used of an
interactive 3Dimmensional
book and the book has
included the creative
visuals and information.
Thus, it can make it more
readable and interesting.
Example of Interactivity
zzz.drinkzzz.com is a playful interaction website that can impress the viewer and
also it made a brilliant interactive concept to communicate with the audience.
References
1. Gamequarium.com, (2014). What are principles of good web design?. [online] Available at: http://www.gamequarium.com/edweb/gooddesign.htm
[Accessed 10 Oct. 2014].
2. Idler, S. and Idler, S. (2013). Principles of Website Usability | 5 Key Principles Of Good Website Usability. [online] The Daily Egg. Available at:
http://blog.crazyegg.com/2013/03/26/principles-website-usability/ [Accessed 10 Oct. 2014].
3. Woods, S. (2014). 10 Top Principles of Effective Web Design - Shortie Designs. [online] Shortie Designs. Available at:
http://shortiedesigns.com/2014/03/10-top-principles-effective-web-design/ [Accessed 10 Oct. 2014].
4. Cdn.tutsplus.com, (2014). [online] Available at:
https://cdn.tutsplus.com/webdesign/uploads/legacy/170_UnityWebDesign/Unity%20in%20Web%20Design/coke.png [Accessed 10 Oct. 2014].
5. 4.bp.blogspot.com, (2014). [online] Available at: http://4.bp.blogspot.com/-
jHvOGFq39rA/Twr8G3OqohI/AAAAAAAACK0/ce0XNWvPHO0/s1600/OREO+Fudge+Cremes.png [Accessed 10 Oct. 2014].
6. Hongkiat.com, (2014). Importance of Web Interactivity: Tips and Examples. [online] Available at: http://www.hongkiat.com/blog/importance-of-
web-interactivity-tips-and-examples/ [Accessed 10 Oct. 2014].
7. Media02.hongkiat.com, (2014). [online] Available at: http://media02.hongkiat.com/web-interactivity/starbucks-at-home.jpg [Accessed 10 Oct.
2014].
8. Media02.hongkiat.com, (2014). [online] Available at: http://media02.hongkiat.com/web-interactivity/datafisher.jpg [Accessed 10 Oct. 2014].
Article: Dont Make Them Wait
Why is SPEED matters?
Your Target Consumer Doesnt Want to Wait!
According to some research
75% of the 1,058 people asked would not return to
websites that took longer than four seconds to load.
All your graphic images should be
as small as possible.
One of the knowledge for person to develop websites should know.
Images is the main things that affects the speed of loading, the larger
the file is the more time needed to load. Few small images is much
more better than one single huge image.
Example
http://redrain.tw/
This is one of the example show few small photo better than one large photo.
Gradient Not Worth the Space.
Use solid colors when designing your image.
I not really agree with this terms, because add on a little gradient might
will add few k to the images, but I dont think that this will affects the
speed of loading a lot. Size of the image and type is still the main
point.
Web page should be no larger then 50K.
I agree with this terms, because is better for a websites to have shorter loading period.
There is no guideline about how long should a good website to load, but as short as you
can.
For a web page to be successful it needs to
download quickly and look good.
I agree with this terms. Although not letting target audience to wait is very important, but
the websites also needs to fulfill some condition, nice looking websites is one of the
attraction that makes them come back again.
Example
http://www.pomodrone.com/
This is one of the examples that wont take long time to load, but looks good.
Remember sometimes less is more.
I agree with this terms. Sometimes people wants to place a lot of elements into the websites,
they worried their target audience might missed out some. But sometimes, when the
websites have lesser things but provide some teaser, they will tend to find out more about
the websites.
Example
http://designchapel.com/
This is the example of websites which less but creates curiosity.
Viewers will appreciate not waiting more then they
have to.
Absolutely agree with this terms, especially for people nowadays. This
new era with new technology, everyone asking for efficient. If there is
a choice they will absolutely choose the way that can be done in short
period rather that lengthy.
References
http://www.hobo-web.co.uk/your-website-design-should-load-in.../

https://support.ceros.com/.../664735-how-can-i.../public