Re-Design

Research Topic: Layout Design Concept

Group Leader: Suresh Para Kumaran (0303472)

Group Members:
Azrin Arizz (0303913)
Kingston Lo (0302578)
Muhamad Asyari Bin Amir Arif (0313976)
Ryan Fong Fu Wen (0304332)
Suresh Para Kumaran (0303472)



Find Out What Colors Will Cause Your
Visitors to Hate You (Color)

REVIEW AND CRITIQUE
In the world today, there are millions of colors but unfortunately web browsers can only support up
to 256 colors (Dianev.com, 2013). A color will be automatically mixed and replace by the web
browser if it does not match the 256 colors.

However, most browsers share the same color palette called Web Safe Colors which contains 216
colors (Techbomb, 2014). The other 40 colors may be coded differently on each web browser. With
the rapid growth of bigger screen resolution and monitors, the color palette increases with more
color bits like 32 bit and 64 bit is being made available (astropix.com, 2013) .

As our eyes contain a thin layer of tissue that has tiny light-sensing nerve cells called rods and cones
which causes us to respond to different wavelengths of light differently like the different shades of
red.

Choosing the right color for a website is essential as the wrong colors can cause our eyes to strain
and make us feel fatigue. Based on my understanding, the color yellow catches our eye more
compared to other colors and it must be used sparingly. There are many different color
combination which can be used to enhance a website but it must also match the brand identity.

HOW TO SELECT THE MOST EFFECTIVE COLOR?
Purple is the color of death in many Catholic countries
Imperial color in Chinese Countries
Potential visitors might come from a global or regional
market. Visitor demographics also can make a difference
in how colors are perceived. Young people are drawn
more to saturated colors than adults, who may find them
garish or offensive Pallasweb.com
Red - Passion, romance and aggression. It can also mean warning or forbidden actions in many
cultures.
Purple - Creativity, mystery or even death.
Blue - Loyalty, security, conservatism, tranquility, coldness, sadness.
Green - Nature, fertility and growth.
Yellow - Illumination, illness and cowardice.
Black - Power, sophistication, contemporary style, death, morbidity, evil and night.
White - Purity, innocence, cleanliness, truth, peace, coldness, sterility.

Warm color can work well for food sites and restaurants that offer spicy fare.
Fiesta Color
COLOR COMBINATION
Websites that sell chocolate products
Chocolate Color
Complement outdoor products, airlines, medical services and law firms.
Cool Color

If your site uses pictures or headlines with
important messages, you should always chose a
unsaturated background so the images will
stand out on the page
The colors of your product pictures and key
messages should always be more highly
saturated than your background colors. Areas on
your site with the most saturated colors will
attract the visitors eye first.
SATURATED VS. UNSATURATED
GOOD WEBSITE
COLORS
Supreme is a website which uses 3 colours
mainly red, white and black to represent
their website . The black background with
white fonts makes it more appealing to the
eye due to its minimalist look when
navigating through the website. This is
because the color white is neither too
bright or dark which prevents eyesore.

Whereas, the colour red represents the
brand which allows visitors to know the
brands passion in the skateboarding scene.

www.supremenewyork.com
SUPREME
Cadbury make use of the color purple
very well because the color purple
associates with wealth & luxury. Since
Cadbury is a chocolate manufacturer,
they want their customers/target
audiences to feel luxurious while eating
their chocolates at any time of the day.
www.cadbury.com.my
Based on Apples website we can clearly
see hints of dark grey and white as colors
for the tabs, white backaround and black
fonts which creates a minimalist look.
The grey color resembles the material
Apple uses in its products which provides
a sleek look and professional feel. The
black color text on the other hand allows
readers to read better at the same time
enjoy the product visuals. This is because
Apple wants their customers to focus
more on the product and not on the
design of the website.
www.apple.com
APPLE
BAD WEBSITE
COLORS
Yale University School of Art uses many
bright colors like pink, blue and yellow.
Such colors in the design can make the
website visitors to feel distracted from
the content and cause eyesore which
creates a negative feeling. In order to
improve the website for its visitors, a
white color should be used as the text
background as not only it allows users to
focus on the content but not feel
distracted. Use of such bright colors can
be good factor if it is being used in the
tabs section as it is able to attract the
visitors attention.
art.yale.edu
YALE UNIVERSITY
SCHOOL OF ARTS
The major problem on LINGsCARS.com is the
animated GIFs which contains many colors.
This can be annoying as those GIFs are
constantly blinking and contain many moving
elements that can cause distractions.
LINGsCARS.com is a car rental company which
suppose to create a more professional feel by
using more corporate colors like blue and
white. A more professional feel would not
only lease more cars but also keep their
visitors longer on their page.

Web designers conclude that a maximum of
3 colors should be used in a web design
DesignWebKit.com
Lingscars.com

LINGsCARS.COM
Hochberg & Company uses the right
amount of colors in its website. However,
the lack of bright colors causes many
visitors to the website to feel bored at
the same time lose interest after reading.
This can be a major problem to a
company as a negative feeling would
linger in the mind of the visitors. It is
recommended a brighter hue of color is
used to create appetite of the viewer in
order to make them read and not lose
interest in the information that is being
delivered.
Hochberginc.com
HOCHBERG &
COMPANY, INC.

Don't Bore Your Visitors Keep Them
Thinking (Design )

REVIEW AND CRITIQUE
The article (Don't Bore Your Visitors Keep Them Thinking) covers the importance of
keeping the viewers interested. However the website itself is old and out of date.
Considering the layout and design, though it loads fast enough, there are too many
information within the page that makes it seem that it is all cramped together.

The navigation is basic and easy to use, the website isnt a responsive one and it makes
it difficult to view on mobile devices even though the loading speed is quick enough.

WHY IS DESIGN IMPORTANT?
Keeps the
viewer
interested
Allows easy
navigation
Comfortable
usage
WHAT MAKES A BAD
WEBSITE?
It is not very good to have
too many information
cramped up which makes it
difficult to look at and
neither is it good to have a
website that is too
simplistic which could
cause the viewers to think
that the website belongs to
a small or underdeveloped
company. If the viewers
attention are not grasped
within 10-20 seconds then
it is likely that the viewers
would just move on to
another website (Sims,
n.d.).

WHAT MAKES
A GOOD
WEBSITE?
The author of the article provided a few
tips within the article that are helpful
with developing a website that would
benefit the viewers and at the same time
making the website easy to use by the
viewers. The author suggested using
objects that would help the viewers in
seeing a relationship between the object
and the information. For example, VLT
uses symbolic images that easily allows
images to easily click with the
information.

This allows the viewers, such as us to
connect the information in our minds,
easily remembering it and also keeps
us wanting to continue to explore the
website even more.
Another helpful tip would be to allow
the website to be functional and also
downloaded very quickly. It would be
very frustrating if the website takes
too long to load a page or those not
easily function properly. This would
cause the viewers to feel frustrated
and unwilling to return to the website
or even explore further. An average
loading page should only be 5
seconds according to Marketing
Charts, 2013. Especially in this
modern age of technology that allows
us to go online anywhere with
portable device, it is also important to
have responsive websites which
provides flexibility for the viewers
(Pettit, 2012).
When accessing through mobile
devices such as handphones or
tablets, it is very difficult to read of
website that are not responsive. This
causes the viewers to have a proper
laptop or desktop to access the
website clearly and effective. By doing
so, the viewers would feel restrained
or disappointed for not being able to
access the website with fluidity on
their mobile devices when away from
their laptops.

EXAMPLE OF GOOD WEBSITE DESIGN
9GAG allows easy navigation by letting its viewers to go to
different sections or pages of the website easily and this
would provide comfortable usage for the viewers and also
makes it easier for the viewers to explore.

NAVIGATION

REVIEW AND CRITIQUE
Easy navigation around a
website is the most important
element when it comes to
building a website. Navigation
should aid the users in finding all
the information they are after,
before a call to action can be
made.

As shown in Design Mores 3
navigational question articles
below:
Where am I?
Where can I go
from here?
Where was I
already?
Based on the article shared on
the page, I agree that the 3
questions as shown above are
question a designer should ask
or know before designing a
website. This is to ensure
consistency and ease of access
to users. Link the Logo to the
Home Page. Place the
navigation system on the top
and left of the page. These
include tabs like About Us,
Contact Us, Site Map and
other information. Cutting
down the number of clicks the
user needs before they get to
their information destination. It
should not require more than 3
clicks to find the necessary
information and destination.
The navigation tools/bars
need to remain present when
moving from one web page
to the next. These are usually
found on the left side or the
top of the page. Navigation
needs to be clear, structured
and intuitive. Links need to
be descriptive and allow the
people to know exactly
where they are going. Never
link the term Click Here.
Rather link the exact location
the link will take you. An
example includes Contact
Us. Link to other articles in
the site where possible. This
means that these links will
take you to other relevant
articles in the site,
encouraging visitors to read
more. There must always be
a link to the Home Page, on
every page.
Home pages are generally the
central station, where it connects
to all the other areas and pages
in the website. Site maps are also
very important because they are
used so to link to all the available
pages on the website. Good
navigation has excellent flow,
which means that you can enjoy
and interact with the website
through a click or two. This
means that the users should be
able to go from one page to the
next without returning to the
home page.


Navigation plays an important role in carrying convenience.
Enhancing user interactions on a website.
Navigation bars are often seen on websites and serves as a purpose to aid users
and potential users to access a website in a much simpler way without feeling lost.
Example: Navigating from
the Home page that is the
introductory
page to next page
Gallery with a list of
photos can all be done via
hyperlink. By clicking on
it, a user can access
another page with a just a
click away.
The Home page is essential,
as it should have brand
identity either through the
logo or a short background
introduction on the company
or the services being offered.
In simple layman terms, what
you do and what you have to
offer to a user or a potential
customer.
Alignment for the navigation buttons
has to be arranged in the correct
form and placed on the header for
main navigation buttons and for sub
navigation buttons aligned
appropriately to the text(article) or
image.
WHY NAVIGATION?
Besides having a gallery that shares your services, pass work or
product, a user is able to access relevant information that aids their
understanding on what you have to offer to them.
Example: Think something relatable and is no too general but informative instead. Navigation bars also allow instant access and
easy to move from page to page. This of cause should work for different pages across contact pages, services page and etc.

GOOD WEBSITE
NAVIGATION
DESIGN
Title: Vintage Clothes and Accessories in Dallas, Texas at Zolas Vintage Everyday
Website Link: http://www.zolasvintage.com
This website is called Zolas, a vintage clothing brand that operates in USA. This is an
example of a website navigation that is done right. The navigation bars are properly aligned
and organized to give the brand a professional theme and outlook. The navigation bar
contains simple text with adequate amount of information. The placement of navigation
buttons is clearly placed at the top that also creates good visibility.
Title: Naks
Website Link: http://naksfood.com
This website is called Naks, a nutritious food company from Us. The navigation buttons in
this website is design from simplicity with the aim of keeping the website organize and tidy
at the same time. The navigation buttons are structurally placed on the left side of the page
without any broken links. The hyperlinks are well aligned and direct user/ potential
customers to the description page with no clutter and smooth navigation. There are also
social media icons on the top of the header for the website and this creates visibility and
ease of access on the page. General a good website with clean navigation.
Title: Ole Chef
Website Link: http://www.olechefperu.com
The website Ole Chef represents a restaurant that is based in Peru, South America. The
navigation done in this website is very minimal and small buttons on the right side of the
website. With the emphasis solely on the food as wide as the website, the navigation bars
are done with a swirl like ribbon with a short introductory to the brand. Navigation is
properly aligned with ease of access when the left hand side navigation bar pops out after
you have seen their introductory images as shown above. The links are well placed beneath
the text and is easy to navigate from one page to another.
BAD WEBSITE
NAVIGATION
DESIGN
Title: After Life
Website Link: http://heaven.internetarchaeology.org/heaven.html#bottom
In terms of navigation, the website has none at all. When the website is loaded the
animation on the page loads constantly for about 40 seconds and comes to halt as shown in
the image above. Once it comes to a halt, you can notice there arent any information or
navigation bars that are visible. No clickable icons as well but a moving animation only.
Without any form of navigation this website falls under an incomplete website with no
navigation or description. On the end user part, there is no two-way interaction at all.
Title: Ron Oslunds Home Page
Website Link: http://ronoslund.com
This is a personal website by Ron Oslund. In terms of navigation, this website consist of
hyperlinks which are working and broken ones as well. The layout doesnt do justice as it
overlaps on the same image over 6 times. The navigation bars are not properly aligned and
can be found from the middle, left and right of the website. This makes navigating difficult
and unorganized. In general and unorganized website attracts low reoccurring visitation and
also show unprofessionalism.
Title: Goalie Plus, Where Everything Is For Goalie
Website Link: http://goalieplus.com/
This is a website dedicated to Goalies as in Goalkeepers who play football. The main goal of
the website is to collect donation, but there is no concrete evidence to show why a person
should donate. The navigation in the website is barely minimal with only a few hyperlinks a
user can click on. Some of the navigation text and fonts are either too big or too small as
well. Some of the navigation buttons are not broken links or not clickable. This is seen in the
Donate button in the red box above. The website also has navigation buttons that are
poorly aligned and unorganized.

Don't Make Them Wait (Time)

REVIEW AND CRITIQUE
In 2013, there are over 2.8 billion internet users (InternetWorldStats.com, 2014)
with users coming from not only computers but smartphones as well. The number
of computer web browsers have increased tremendously with most webpage
having a resolution of 1024 x 768 and higher (hobo-web, 2014). The number one
problem when it comes to a slow loading webpage is the use of large graphics.
With graphics and videos becoming a major part of a website, using the right
format, size and number is essential to improve a website loading time.

I strongly agree that having the right amount of graphics on a website is important
as having a cluttered website makes people not appreciate your website but we
can also lose a visitor. There are many more causes which lead to a website having
slow load speed. The use of free and paid tools on the Internet can help one
optimize their website better by offering suggestions.


Tolerable waiting time! - University of Nebraska-Lincoln

2
seconds
FUN FACTS
o Because waiting for a website to load is no different
from waiting in line for a slice of pizza. We want that
pizza now. And if it takes too long to get that slice, well
walk out the door and find somewhere else to eat
o The same is true when surfing online. If a site takes too
long to load, were outta there.
51 percent of online shoppers in the U.S claimed if a
site is too slow they will not complete a purchase.
75 percent consumers are willing to visit competitor
sites instead of dealing with a slow loading page
Source: Radware
Source: Akira

1. HTML Code Optimization
WHAT CAUSES SLOW LOADING
WEBSITES?
2. Focus on content area
Make sure website doesnt have any broken links and unnecessary tags.
Broken links always put on a negative effect.
No link in the website which redirects visitors to an error page.
Categorize pages and link them if needed to reduce content load on unique pages by
distributing the load.

3. Optimize Images
WHAT CAUSES SLOW LOADING
WEBSITES?
4. Optimize Large Files
Major obstacle for servers.
Preferably use background color over large graphics
PNG should be used for icons or logos, but JPEGs work better as photos.
Optimize images in web format.
Use editor programmes to lessen file size.
It lessens bandwidth.

5. Simple design and interface
WHAT CAUSES SLOW LOADING
WEBSITES?
6. Widget/Plugin Overload
Loads much faster.
Use attractive text links and not graphical buttons if there are many links present.
Too many social media buttons
Facebook Like button downloads 83 Kb of data at 1.34 seconds Matthew Ogborne
7. Advertisements
No one likes advertisements.
One slow loading advertisement can cause visitors to detour.

1. WebPageTest
TOOLS TO TEST & IMPROVE SITE SPEED
2. Pagespeed Insights
This tool is supported by Google and allows you to run a free website speed test. It provides
waterfall charts that break down content, check for Page Speed optimization, and make
suggestions for improvements after receiving a page speed score out of 100.
Receive a page speed score out of 100 and analysis of both the desktop and mobile
versions of your site. You get recommendations that are divided into high-, medium- or
low-priority.
3. Webpage Analyzer
Provides you with page size, composition, and download time. This tool also comes
with a summary of page components with advice on how to improve page load time.

REFERENCES (COLOR)
Anderson, S. (2014). Best Screen Size & Screen Resolution to Design Websites | Is There A Standard Size? What Is The Most Common
Dimension?. [online] Hobo. Available at: http://www.hobo-web.co.uk/best-screen-size/ [Accessed 8 Oct. 2014].

Astropix.com, (2013). Monitor Resolution and Color Depth. [online] Available at:
http://www.astropix.com/HTML/J_DIGIT/MON_RES.HTM [Accessed 8 Oct. 2014].

Cannon, T. (2012). An Introduction to Color Theory for Web Designers - Tuts+ Web Design Article. [online] Web Design Tuts+.
Available at: http://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers--webdesign-1437 [Accessed
8 Oct. 2014].

Colourlovers.com, (2014). Trends / Websites :: COLOURlovers. [online] Available at:
http://www.colourlovers.com/web/trends/websites [Accessed 8 Oct. 2014].

Dianev.com, (2014). Web Design Basics: Computer color settings and screen resolutions. [online] Available at:
http://dianev.com/web-design-help/web_design_basics/computer_settings.html [Accessed 8 Oct. 2014].

Lim, H. (2014). Best Color Tools For Web Designers. [online] Hongkiat.com. Available at: http://www.hongkiat.com/blog/best-color-
tools-for-web-designers/ [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].

Plaut, R. (2014). Web Design: Web safe colors palette. [online] Techbomb.com. Available at: http://www.techbomb.com/websafe/
[Accessed 8 Oct. 2014].

REFERENCES (DESIGN)
Engage.synecoretech.com, (2014). 10 Awesome Examples of Ecommerce Sites Using Responsive Web Design. [online] Available at:
http://engage.synecoretech.com/marketing-technology-for-growth/bid/177023/10-Awesome-Examples-of-Ecommerce-Sites-Using-
Responsive-Web-Design [Accessed 8 Oct. 2014].

Firtman, M. (2014). You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy - Smashing Magazine. [online]

Smashing Magazine. Available at: http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-
only-mobile-strategy/ [Accessed 8 Oct. 2014].

MarketingCharts, (2013). Average Mobile Page Load Time For A Fortune 100 Company Is About 5 Seconds. [online] Available at:
http://www.marketingcharts.com/online/average-mobile-page-load-time-for-a-fortune-100-company-is-about-5-seconds-37293/
[Accessed 8 Oct. 2014].

NADDIC GAMES, (2014). NADDIC GAMES. [online] Available at: http://naddic.com [Accessed 8 Oct. 2014].

Responsivewebdesign.com, (2014). The Boston Globe Responsive Web Design. [online] Available at:
http://responsivewebdesign.com/podcast/boston-globe.html [Accessed 8 Oct. 2014].

Small Business - Chron.com, (2014). How Long Do You Have to Get a Website Viewer's Attention?. [online] Available at:
http://smallbusiness.chron.com/long-website-viewers-attention-72249.html [Accessed 8 Oct. 2014].

Treehouse Blog, (2012). Beginners Guide to Responsive Web Design - Treehouse Blog. [online] Available at:
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design [Accessed 8 Oct. 2014].

Wearevlt.com, (2014). VLT. [online] Available at: http://wearevlt.com [Accessed 8 Oct. 2014].


REFERENCES (NAVIGATION)
Goalieplus.com, (2014). Goalie Plus // Where Everything Is For The Goalies!!!. [online] Available at: http://goalieplus.com [Accessed
8 Oct. 2014].

Heaven.internetarchaeology.org, (2014). The Afterlife. [online] Available at:
http://heaven.internetarchaeology.org/heaven.html#bottom [Accessed 8 Oct. 2014].

Muller, G., Rocheleau, J. and Young, N. (2012). 21 Examples of Excellent Navigation Menus in Web Design | Inspiration. [online]
Webdesignledger.com. Available at: http://webdesignledger.com/inspiration/21-examples-of-navigation-menus-in-web-design
[Accessed 8 Oct. 2014].

Naksfood.com, (2014). Naks. [online] Available at: http://naksfood.com [Accessed 8 Oct. 2014].

Olechefperu.com, (2014). Ole Chef. [online] Available at: http://www.olechefperu.com [Accessed 8 Oct. 2014].

Optimus01, (2013). Importance Of Website Navigation. [online] Available at: http://www.optimus01.co.za/importance-of-website-
navigation/ [Accessed 8 Oct. 2014].

Ronoslund.com, (2014). Ron Oslund's Home Page !. [online] Available at: http://ronoslund.com [Accessed 8 Oct. 2014].

Shuey, V. (2013). 10 Worst Websites For 2013 - The Ugliest Websites Ever. [online] Global Web FX Inc. Available at:
http://www.globalwebfx.com/10-worst-websites-for-2013 [Accessed 8 Oct. 2014].

Thebiguglywebsite.com, (2014). THE BIG UGLY WEBSITE. [online] Available at: http://thebiguglywebsite.com [Accessed 8 Oct. 2014].

Zolasvintage.com, (2014). Vintage Clothes and Accessories in Dallas, Texas, at Zola's Everyday Vintage. [online] Available at:
http://www.zolasvintage.com [Accessed 8 Oct. 2014].


REFERENCES (TIME)
Costill, A. (2014). How Important is Site Speed in 2014? | Search Engine Journal. [online] Search Engine Journal. Available at:
http://www.searchenginejournal.com/seo-101-important-site-speed-2014/111924/ [Accessed 8 Oct. 2014].

Everts, T. (2013). Case Study: How a 2-Second Improvement in Page Load Time More Than Doubled Conversions. [online] Radware
Blog. Available at: http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2013/05/case-study-page-load-
time-conversions/ [Accessed 8 Oct. 2014].

Fui-Hoon Nah, F. (2014). A study on tolerable waiting time: how long are Web users willing to wait?. [online] University of Nebraska-
Lincoln. Available at: http://cba.unl.edu/research/articles/548/download.pdf [Accessed 8 Oct. 2014].

Marlow, K. (2014). The Importance of Website Loading Speed & Top 3 Factors That Limit Website Speed. [online] Aykira Internet
Solutions. Available at: http://www.aykira.com.au/2014/04/importance-website-loading-speed-top-3-factors-limit-website-speed/
[Accessed 8 Oct. 2014].

The Last Drop of Ink, (2011). Facebook Like Button = 84Kb or 1.340 Seconds? - The Last Drop of Ink. [online] Available at:
http://lastdropofink.co.uk/personal/random-stuff/facebook-like-button-84kb-or-1340-seconds/ [Accessed 8 Oct. 2014].