THE IVY LEAGUE

RESEARCH TOPIC: LAYOUT DESIGN CONCEPT

GROUP LEADER:
LYANA ROSALINI BINTI MUHD YUNUS (0317581)

GROUP MEMBERS:
NURUL FARHANAH ZOLKEFLI (0306466)
PUTRI ELYANA (0307977)
NADYA BINTI SULAIMAN (0319580)
MELANIE ANUSHA ABRAHAM (0308696)

FIND OUT WHAT COLOURS WILL

CAUSE YOUR VISITORS TO HATE YOU

INTRODUCTION

The article expresses the correlation between a website's color palette and the
effects it brings upon its visitors.

!
It can be divided into two main themes;

!
A. color schemes that ease readability and are optimal for viewer comfort
B. colors that make people feel or act a certain way

A. Color schemes that ease readability and are optimal for viewer comfort

This article stresses upon the effects of colors on the viewers perception of the
site, which is absolutely true. Viewers form 'first impressions' about websites
the moment they visit them - hence the important role of a good color scheme
in conveying the right message the website has intended. Color selection can
make viewers happy, melancholic, bored and even fatigued when coupled with
other visual designs. (Iordan, 2007)

The article also delves into technicalities in the limited spectrum of colors a
website can obtain. This is consistent with many other websites, which
fervently warn against using certain color combinations because they cause
chaos in the reader's psyche.

!
Iordan (2007) and Hornor (2013) both explain similar do's and don'ts in
website color planning :-

!
!
1. Create a strong contrast between a page's background and its text.
The best combination for readability is black text on white background, but
there are other excellent combinations also. Besides white, other effective web
site background, colors are dark blue, gray and black.
5

2. Avoid Eye Fatigue Colors and Use Neon Colors Sparingly:

!
In fact, the worst colors to use on a green background are most shades of
green, yellow, or purple. Avoid pairing blue and red, or blue and yellow. Green
text on red background or red text on green/blue background aren't a good
idea as well, because such combinations usually cause eye fatigue. Neon color
combinations are definitely eye-catching. But when placed all over the website,
they are aversive and very irritating. They tire the eyes very quickly, and mostly
just end up causing annoyance instead of more positive feelings that companies
want customers to associate with their brand.

3. Avoid Light Colors on a Light Background for Readability:

!
Avoid using the light colors for small texts and diagrams with thin lines. White
is already light, so adding light-colored text such as pastel yellow or green on a
white background is going to create readability issues.

!
!
!
4. Testing and Gradients: Always conduct readability tests for your
website.
Using different shades of one color is always a safe bet in color harmonisation.
Select up to five (some say seven) different colors and use them consistently
throughout the web site.
7

BAD EXAMPLES:

GOOD EXAMPLES:

B. Colours that make people feel or act a certain way.

The article also gives ideas on what colors to use when you want to mould the
reader's psyche about your webpage. Marketers and graphic designers have long
known that color plays a major role in the success of any marketing campaign.
Specific colors tend to stir certain emotions in customers, thus creating brand
relevance and motivating purchases. (Morris, 2013)

!
In the article, the use of reds and yellows are useful in grabbing attention
although the author warns to use it sparingly.I agree with the statement as I
find websites bursting with bright colors very off-putting. Here are some colors
and their effects on people's mindsets: Red, Orange, Black and/or Royal Blue.

10

Studies show that impulse buyers react most to these colors. (Vale, 2014)
Pink, Teal, Light Blue and Navy

In contrast, cautious shoppers respond most to these colors:

- Purple is the color of royalty, which makes it perfect for lending a touch of
elegance and prestige to your marketing materials.
- Gold is likewise elegant and prestigious, but adds an element of power purple
cant match. In combination with purple or green, gold is a powerful color that
symbolizes wealth and pedigree.

!
The power play of colors is truly amazing for web designers, and a good sense of
color might just be the driving force a website needs to gain viewers.

!
!

11

12

LOAD TIME
DONT MAKE THEM WAIT

INTRODUCTION

Your webpage should be no larger than 50k

- I AGREE that web pages should be less than 50K. The larger the size of the
page, the longer it will take for it to load. This will lead to people getting
bored and closing the tab or moving on to another website. For instance, if a
person were to solely run a business via their web page, they would definitely
lose sales if their page takes too long to load (Peer1.com, 2014). People these
are perpetually on the move and will not want to wait very long.

14

Your graphic images should be as small as possible

- I AGREE that this is a useful factor to take into consideration when creating
web pages. Smaller images take less time to load and will not keep the visitor
waiting for too long. According to munchweb.com, 75% of people have said
that they would not revisit a website that took longer than 4 seconds to load
(Munch, 2014).

15

Good Example:

!
!
!
!
!
!
!
!
!
!
!

- This is a good example of a web site with optimised image sizes and scale. It is not too
cluttered with too many big images that may take time to load. It loaded within a few seconds
which is great. We must also bear in mind that not everyone has fast internet speed. Therefore,
we must create web pages that can cater to all types of visitors.
16

- This is another good example of a web page with optimal sizing and scaling. Energy Savers is a
US Department of Energy websites that educates people of how to be more energy efficient.
The layout is rather minimal which is good as it decreases load time.
17

Use design more, graphics less

- I AGREE that designers should incorporate more practical designs into their
web pages. For instance, avoid endless scrolling of images and content.
Instead, keep to a limit of three pages. Ensure that the content is concise and
straight to the point, rather than having it drag on to several pages. Besides
that, create quick links at the bottom of the page so that visitors do not have
to scroll all the way back up (Gamequarium.com, 2014).

18

Bad Example:

!
!
!
!
!
!
!
!
!
!

ASOS is an online shopping web page that sells clothes, shoes and accessories. This can be
considered as a bad example because the web site has many high quality image thus causing it to
take a longer time to load, especially for those with slow internet speed. By taking too long to load,
visitors may get frustrated and skip to other online shopping websites.
19

- Another example would be Tumblr. Tumblr mostly contains images and gifs. These
contents usually have big file sizes which slows down the loading time for the web page.
Moreover, most Tumblr pages have endless scrolling. Therefore, to avoid that problem, web
page designer should keep pages to about three screens.
20

DONT BORE YOUR VISITORS,

KEEP THEM THINKING

INTRODUCTION

There are an infinite number of websites that exist today. However, to create
a website that is captivating enough to hold the audiences attention long enough is
a tough task. From the article Dont Bore Your Visitors Keep Them Thinking, the
writer highlights the importance of having an interesting website without being
too confusing to the audience. Visitors who come to a website are accompanied
with specific aim in mind.
Thus, it is our job to fulfil it as quick and as easy as we can. It is momentous
to prepare visitors who come by the website with an easy groundwork that is
simple to understand and move around as well as engaging enough to keep them
interested.
If you distract or confuse your visitors, they will either need more time to
find what they came for, or they might forget their initial goal all together. Either
way, they will not experience your website as user-friendly and chances are that
they leave dissatisfied and with no intention of coming back. (Idler, 2013)
22

In the article the writer states that humans in general like to relate. Thus, we use
the ability to create what we could not see in order for us to recognize the object.
This connection that we make keeps us interested and engage to a particular
subject. The article explains the importance of letting the viewer figure things out
and to keep them thinking. It keeps people interested. When it comes to design,
the designer should keep it simple yet not too simple that the whole appeal is
thrown away.

23

!
http://www.annasafroncik.it/

Above is a good example of a good website design that is simple yet interesting enough it
captivates the audience interest and attention. Like face to face meeting, first impressions can
affect a relationship with a person in the long run. It affects the direction whether we like a
person or not, thats if we intend to meet that specific person again. Same goes online. Once a
website has made a positive impression on its viewers, chances are visitors will be more likely to
visit the site again.
From this site it shows an actress name Anna Safroncik and her beautiful portfolio website.
The power of the design is in the expressive photography that projects Annas talents and her
character. The pictures are professional, sexy, classy and sophisticated and thats exactly the image
that you see of her.
24

This is an example of a web designs that transforms itself but still remains simple yet complex
enough that it looks professional, easy enough to understand and engaging. The results from the
transformation are recorded and quoted from the representatives.

!
Zimmerman Metals:
BEFORE

25

AFTER

!
!
!
!
!
!
!
!
!
!
!
!
!
http://aspireid.com/web-design/7-components-of-good-web-design/

!
Results
Sales increased 40% after the new website was created and launched! - Bruce Pearson, Zimmerman
Metals, Roll Form Division
26

Avocation Systems:

BEFORE

27

AFTER
http://aspireid.com/web-design/7-components-of-good-web-design/

28

 Results
Our old site was very rudimentary and aesthetically unappealing. Navigation to important sections
wasnt nearly as intuitive as it should have been. Our new website encompasses everything we had
hoped when we started out this process. Its visually appealing, and all of the information is
presented in a way thats easy to find and understand. - Trent Mulligan, Avocation Systems

!
http://aspireid.com/web-design/7-components-of-good-web-design/

29

The article also pushes that a website design should be functional. That is
should download quickly.
According to Apheus.com (2014) website functionality comprises the overall
way in which a website is served on the internet. Adding functionality to a
website can include determining what type of website architecture will it be
used to build the site, the type of server on which the website will be hosted and
adding features that can be used to enhance the overall experience of the user.

30

!
Below is an example of bad functionality. The 404 error. Something was technically not
implemented correctly, causing the site to show an error message instead of the desired content.

!
!
!
!
!
!
!
!
!
!
http://blog.usabilla.com/visual-appeal-vs-functionality-web-design/
31

From what I have read, this article the writer suggested that the text should be easy to read. According
to Jones, Noack and Thomas (2009) Just like layout, typography places an important role in how users
digest the content that they see. Its momentous for a web designs typography to be easy to read and
follow through, while establishing structure and hierarchy within the content.

32

!
!
http://webdesignledger.com/tips/the-four-key-components-of-a-great-web-design

33

http://designshack.net/articles/layouts/10-crucial-elements-for-any-website-design/

!
The web was once filled with a handful of typefaces Arial and Courier come to mind because they
were readable by most computers and browsers. That is no longer a limitation for designers. But web
fonts are still important for two key reasons compatibility and licensing. By using a web font service,
type is type on the web, which is important for search engine optimization, and designers dont need to
make images out of their type to maintain a certain look. (Cousins, 2014)
34

From the article the writer also suggests that the navigation of a website should be straightforward.
Jacobson (2014) claims that the navigation on a website tells customers how to find the information
that is needed. Thus, it is important to make sure that the applied navigation is easy to find and very
clear. For example, if you are a realtor your navigation might include: Selling your House, Finding
a New Home, Getting a Mortgage, etc (Jacobson, 2014)

!
Navigation does not need to be complicated. It should be easy to identify and easy to use. It is also
important to keep navigational menus to a minimum so you dont overwhelm users. Depending on
the type of site, five to ten menu navigation items are the top end of what you should aim
for. (Cousins, 2014)

!
!

35

The above examples show two very different types of navigation: Zolas, which includes a simple
menu and progress navigation with clickable text as buttons and Anet Design, which displays a funkier,
more creative button style. What both sites have in common is that the main navigation never moves
or changes, creating consistency and flow on each site. (Cousins, 2014)
36

!
In conclusion there are several components that create a great design. It is
important to keep the audience interested and to never bore them. Designers
should find a balance between complexity and simplicity in their website to engage
and keep the viewers interest. Thus based on the article that I have read I agree
with the statements that have been forwarded. Navigation, functionality and
typography also plays a big role in achieving a great website.

37

NAVIGATION

INTRODUCTION

Navigation is easily addressed as ascertaining, or directing the course.

!
Web site navigation is in my opinion the most important aspect for site to be
successful. Navigation design will be the key to determine, if visitors will stay on
one site to perform whatever they might be that they require; such as completing a
sale. It is important for users Have an easy smooth transaction, and that starts with
navigation. There are best practices that will enhance the navigation of one web
site. - Caonabo(13 May)

!
A website needs some form of order so that a user could direct themselves to the
desired webpage. If there were no methods available to them, it would have been a
big inconvenience as well as a hassle to type down a web address individually.

NAVIGATION

Another important feature of a good website is navigation. Many website owners

fail to include well-structured pages or clear navigation tabs that lead visitors to
relevant sections of their website. Organize the information on your website in a
simple and structured way. Think of the general path you would like a site visitor
to take. In many cases, adding sub-pages to the top navigation will be the best
option for organizing your information into specific categories. Think through
your web pages structure so that it all makes sense in a logical flow. That way,
when customers visit your website, they will have an easier time navigating to the
information on your website that is most relevant to them. Yola.com

QUESTIONS?

Where am I?
Where can I go from here?
Where was I already?

!
These were the questions that the author had posed to explain how Navigation as
an answer is considered for a website. I agree wholeheartedly with all that was
written in the article but found it lacking in some areas, especially in the types of
websites and its varied forms of navigation.

FACTORS OF NAVIGATION

IMPORTANT FACTORS

Consistency is Crucial!
Site navigation (Navigation Panel) should appear in the same location on every
page of a site. It should also maintain the same style, type and colours. This will
enable users to get used to a site and feel comfortable browsing it. If navigation
were to jump from the top to the left, disappear, or change colours from section
to section, frustrated visitors are more likely to go elsewhere.
Simplicity is Key!
The section names of a site, especially as labelled in the navigation, should clearly
state what lies behind them. Obscure, general words like resources and tools
should be avoided when possible, as they only lead to users clicking on multiple
buttons before finding what they are looking for. Stick to obvious button names
such as news and podcasts to avoid confusion.

IMPORTANT FACTORS

In Plain Sight!
Navigation should be a prominent element of your design and therefore, must be very easy to
find. Since it will often take up much less space than other elements, it should stand out enough
so it doesnt get lost amongst a sea of content. The most common location of a button bar is
across the top of the page, as users should not have to scroll down to navigate further into your
site.
Keep It Short and Sweet! (KISS)
Too many navigation buttons, while leading into more sections, may just leave a user with too
many choices. A long list of options keeps the visitor from getting into the most important
content areas of your site. Instead, consider drop-down menus that break down top-level buttons
into sub-sections. Also be careful about too many separate navigation bars. It is common to have
up to three options for member-based content-driven sites (such as one main navigation, one for
user accounts, and one at the bottom for legal disclaimers). However, if they arent clearly
defined the user wont know where to look, or click, and three separate choices is already pushing
too many. There are sites that have a single webpage dedicated to a sitemap, as shown in slides
ahead.

IMPORTANT FACTORS

Where am I?
Remind the User Where They Are! Once a user clicks into a site section, its a
good idea to remind them where they are. Use a consistent method to highlight
the section a visitor is in, such as a change in colour or appearance. If the site has
more than one page per section, be sure to leave the button clickable so users can
use it to get back to the main page of that area.

WHERE AM I?

WHERE AM I?

As stated in the article:

The name or logo of your
company along with a page
name should be on top of
every page in your web site.
The company name or logo
should also be your link back
to your home page
Website: Fanfiction.net
In this website, they maintained the same banner on every single page regardless if
it is the Home page or not. Clicking the fanfiction word will link the user to the
index.html or Home Page

WHERE AM I?
Page URL.
In other words, the web address
Website Title

The Page Title located on the tab lets users know where they are (what page) and the web
Address dictates where they are as well but in more fine-tuned detail.

WHERE CAN I GO FROM HERE?

From the Article:

Your visitor will always want to know where can I go from here. This being
links to pages within your web site or links to an outside web page. Either way you
should put links in context. In other words you should give the visitor an insight
on where the link will take them. This is especially true if you have a resources
page. Do not put just the links. (Like I have time to click on each one to find out
where they go.) Give a small description of that web site in context with the link.

Description

Moused-over
Giving a description
of the Site

WHERE CAN I GO FROM HERE?

NAVIGATIONAL APPROACHES

There are several navigational approaches that users find more apprehensive of
reliable when it comes to surfing a website. The following methods (6) are the
Yahoo style menu, Rollover menu, Flash menu, Expand/Collapse menu,
Drop-down menu and lastly, the fly-out menu.

!
This is more of a design option than it is to do with navigation, therefore
irrelevant. However, the approaches can determine the number of user per site
because of the preferences of interface. The most popular and most responsive
option would be the Drop-down menu, as it had been used more often in websites
(or is the current trend).

!
The next few slides would explain navigation panes/bars/panels that make site
navigation and easy maneuverability possible.

WHERE CAN I GO FROM HERE?

Navigation panel

Search Engine

The Navigation Panel indicates links to other webpages

that is conveniently placed in every landing for easier
course plotting (direction). Dropdown Menus are created
to direct users to a specified landing under the level (level 1),
which makes it systematic.
The search engine is necessary for users to find specific
Pages/items if the page that they are looking for is not in the
Navigation Panel.
Dropdown Menu

WHERE CAN I GO FROM HERE?

In some cases, the navigation panel could be found at the very bottom of the page
as shown in the image below (Dictionary.com)

WHERE CAN I GO FROM HERE?

Or more elaborately, a Website could dedicate a single webpage for a Sitemap like
Apple:

WHERE CAN I GO FROM HERE?

Sitemaps
However, Sitemaps do not act as a primary source of navigation and is rarely seen
in certain websites. Only websites that provide a large database of topics may have
a sitemap as an option to easily categorize and file appropriate pages. Sitemaps
play a role in diverting the need of a search engine as a replacement.

WHERE WAS I ALREADY?

WHERE WAS I ALREADY?

Highlighted in purple:
showing that the page had been visited already
Titles in blue text are sites that have not yet been
visited and it helps site visitors navigate better.
This helps them figure out what theyve not yet
seen and helps them keep track.
However, the author is unclear as to why the colors
Blue and purple were chosen.
Website: Fanfiction.net

Based on commentary, it was said that it was a CSS

Configuration that dont need to be changed.

AVOIDING ERRORS

ERROR!

One of the most important thing to remember about websites is that broken links
must be avoided at all costs. The outcome of a user mis-clicking and creating
general frustration of going to a wrong page can upset anyone. Like everyone
being upset with being lost. To click on a supposed button that sends you nowhere
or going to a wrong page is a major inconvenience, no matter how nice or pretty
the website design turns out to be.
Avoid changing the layout too much to the point of losing the navigation panel.
Clicking to get to a new page and looking for another one without the help of a
navigation pane would be a hassle and decisively troublesome for new users
because they would have to search for it themselves.

BAD SITE NAVIGATION

!
!
!
!
!
!

Logo on Homepage does not link to Homepage.

No Navigation options (panel or otherwise)
No back option (clicking on logo does not go back to Homepage)

BIBLIOGRAPHY

BIBLIOGRAPHY
Apheus.com, (2014). Three F's of Website Design: Functionality, Form and Friendliness.
[online] Available at: http://www.apheus.com/about/design-philosophy/ [Accessed 9 Oct.
2014].

!
Cousins, C. (2014). 10 Crucial Elements for Any Website Design | Design Shack. [online]
Designshack.net. Available at: http://designshack.net/articles/layouts/10-crucial-elementsfor-any-website-design/ [Accessed 9 Oct. 2014].

!
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 9 Oct. 2014].

!
Idler, S. and Idler, S. (2014). Visual Appeal vs. Functionality in Web Design - The Usabilla
Blog. [online] Blog.usabilla.com. Available at: http://blog.usabilla.com/visual-appeal-vsfunctionality-web-design/ [Accessed 9 Oct. 2014].
62

BIBLIOGRAPHY

!
Jacobson, R. (2014). The 5 Must Haves of a Great Website - Small Business Web
Marketing. [online] Register.com. Available at: http://www.register.com/learningcenter/
web-101/the-5-must-haves-of-a-great-website/ [Accessed 9 Oct. 2014].

!
Jones, H., Noack, S. and Thomas, J. (2009). The Four Key Components of a Great Web
Design | Tips. [online] Webdesignledger.com. Available at: http://webdesignledger.com/tips/
the-four-key-components-of-a-great-web-design [Accessed 9 Oct. 2014].

!
Tuch, A., Presslaber, E., St\"ocklin, M., Opwis, K. and Bargas-Avila, J. (2012). The role of
visual complexity and prototypicality regarding first impression of websites: Working
towards understanding aesthetic judgments. International Journal of Human-Computer
Studies, 70(11), pp.794--811.

!
Website Company, SEO, Online Branding - Denver, Colorado | Aspire Internet Design,
(2013). The 7 Components of Good Web Design & Why it Matters. [online] Available at:
http://aspireid.com/web-design/7-components-of-good-web-design/ [Accessed 9 Oct. 2014].
63

BIBLIOGRAPHY
Gamequarium.com, (2014). What are principles of good web design?. [online]
Available at: http://www.gamequarium.com/edweb/gooddesign.htm [Accessed 9 Oct.
2014].
Munch, C. (2014). Effect of Website Speed on Users | Statistics Reveal Slow Loading
Times Cost Sites Serious Money. [online] Munchweb.com. Available at: http://
munchweb.com/effect-of-website-speed [Accessed 9 Oct. 2014].
Peer1.com, (2014). How a Slow Website Impacts Your Visitors and Sales | PEER 1
Hosting. [online] Available at: http://www.peer1.com/knowledgebase/how-slowwebsite-impacts-your-visitors-and-sales [Accessed 9 Oct. 2014].

64

BIBLIOGRAPHY

Hornor, T. (2013). 10 Troublesome Colors to Avoid In Your Advertising. [online]

SitePoint. Available at: http://www.sitepoint.com/10-troublesome-colors-to-avoid-inyour-advertising/ [Accessed 10 Oct. 2014].
Iordan, A. (2014). Do colors influence web site visitors?. [online] Graphic-design.com.
Available at: http://www.graphic-design.com/Web/web_color.html [Accessed 10 Oct.
2014].
Morris, B. and Plus, B. (2014). 10 Colors That Increase Sales, and Why. [online]
Business 2 Community. Available at: http://www.business2community.com/marketing/
10-colors-that-increase-sales-and-why-0366997 [Accessed 10 Oct. 2014].
Vale, S. (2014). Most Attention-Grabbing Colors. [online] Small Business - Chron.com.
Available at: http://smallbusiness.chron.com/attentiongrabbing-colors-74162.html
[Accessed 10 Oct. 2014].
65

BIBLIOGRAPHY

http://www.eastonmass.net/tullis/WebsiteNavigation/
WebsiteNavigationPaper.htm
http://www.chromaticsites.com/blog/the-dos-and-donts-of-websitenavigation-usability
http://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-onresearch-studies/
http://www.webpagesthatsuck.com/worst-website-navigation-of-2011.html
http://www.smashingmagazine.com/2013/11/11/guidelines-navigationcategories-ecommerce-study/