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