GR OU P L E ADE R : S AB R I NA L E E ( 0 3 1 0 0 9 2 )

GR OU P ME MB E R S :
- AK ANE AS O ( 0 3 1 0 1 5 9 )
- AMANDA L E ONG MU N AI ( 0 3 1 0 1 2 6 )
- B E VE R L Y R ACHE AL MAT U J AL ( 0 3 1 5 7 0 4 )
- S AR MI L A T AMI L VANAN ( 0 3 1 0 2 9 1 )



RESEARCH TOPIC
1. NAVIGATION
2. LOADING SPEED
3. COLOUR
4. USER INTERFACE



ARTICLE 1
NAVIGATION
KEY POINTS OF THE ARTICLE
The main point of the article is that Navigation should be
able to answer the following questions:
Where am I?
Where can I go from here?
Where was I already?
The writer also mentions that every website should have
the name or logo of their company along with the page
name on the top of every page in their website.
The visitors should not need to guess what the web site
does.
KEY POINTS OF THE ARTICLE
It is mentioned in the article that the link titles improves the navigation
usability.
The navigation should provide the visitor an insight on where the link
will take them.
The writer also presses on the issue that users would want to know if
they already visited a page and that the colour scheme to show the
unvisited page should be blue and for visited purple for other colours
will just confuse people.
At the end of the article, the writer concludes that a web site should
have at least two forms of navigational schemes for the visitor to find
what they are looking for.
POINTS THAT WE AGREE ON
Navigation should be able to answer the following
questions:
Where am I?
Where can I go from here?
Where was I already?

According to Derek Powazek (2006), he mentions that a
good navigation tells a story and that a good story has a
beginning, a middle and an end.

POINTS THAT WE AGREE ON
Therefore, just like a good story it is important that
the navigation should be able to answer those
questions.
It is important because study has shown that if a
website is selling items or to convince the user to visit
the page again, navigation is THE key factor in
deciding if the page is trustworthy or not (Powazek,
2006).
EXAMPLE
This is a good example, because at the homepage itself it says,
SHOP TOBI which tells you its an online shopping website.

Picture reference: Tobi 2014, Homepage, viewed 07 October 2014, <www.tobi.com>.

EXAMPLE
After clicking SHOP TOBI, it leads to the shopping site which has
various links to click on and it gives the users a choice on where to go
next.
Picture reference: Tobi 2014, Homepage, viewed 07 October 2014, <www.tobi.com>.
EXAMPLE
The underlining of the link the user is currently at helps them
keep track of which page they are at.

Picture reference: Tobi 2014, Homepage, viewed 07 October 2014, <www.tobi.com>.
POINTS WE AGREE ON
Website should have the name or logo of the company along with
the page name on the top of every page
It should be placed prominently for the users to see for them to
know that they have not been directed out to another page.
As mentioned by the writer, the users should not need to guess
what the web site does and by prominently placing the
brand/company name, the visitors know whether they are at the
right web site.
According to Jennifer Schiff (2013), it is ideal to link the companys
logo to the home page so that the users can navigate easily back
and forth.

EXAMPLE
This web site displays the company name/logo
prominently at every link given.

Picture reference: ElleFitActive 2014, Homepage, viewed 07
October 2014, <www.ellefitactive.com>.
Picture reference: ElleFitActive 2014, Shop, viewed 07
October 2014, <www.ellefitactive.com/collections/all>.
POINTS WE AGREE ON
Link titles improves navigation usability
It is important that the link titles are named in such a way
that the users do not need to read a description on where
the link is navigating them to.
Like the writer mentioned in the article, the navigation
should provide an insight on where the link will take them.
Always use clear and easy text or icons for the link titles. If
the user needs to click on the page to find out what it
consists, then you are not doing it right(Janjanin, 2014)

EXAMPLE
Each link titles are named in such a way it is easy to know the
content of the links. For this web site, ASOS, the links are
categorized to the types of fashion wear for Women and Men.
That way, the user gets to easily choose which section to browse.

Picture reference: Asos 2014, Homepage, viewed 07 October 2014, <www.asos.com>.
POINTS WE AGREE ON
Users want to know if they already visited a page
It is good to have visited links highlighted in another
colour to guide the users to differentiate the links
that they have visited already and the ones they
have not.
According to Bojan Janjanin (2014), the easiest way
for users to know where they are at the very
moment is to highlight the current page.

EXAMPLE
This shows that STORES had already been visited by the
different shade of grey the word has changed.

Picture reference: Lovisa 2014, Homepage, viewed 07 October 2014, <www.lovisa.com.au>.
POINTS WE DISAGREE ON
The colour scheme to show the unvisited page should be blue and
for visited purple because other colours will confuse people
However, we disagree that the colour scheme to show the
unvisited and visited pages needs to be blue and purple.
The colour scheme should be set according to the colour of the
web site for the blue and the purple might not be suitable.
The colour should be chosen strategically to suit the web site
and neutral color palette tend to help the site project an
elegant, clean and modern appearance(Schiff, 2013)

EXAMPLE
This web site proves that it does not necessarily have to be blue
for unvisited link and purple for visited. The difference can be
seen in the next picture.

Picture reference: Thought Catalog 2014, Homepage, viewed 08 October 2014, <www.thoughtcatalog.com>.
EXAMPLE
The articles that had already been read has changed from
black to grey colour and it is understood that it has been visited.

Picture reference: Thought Catalog 2014, Homepage, viewed 08 October 2014, <www.thoughtcatalog.com>.
CRITICISM ON THE DESIGNMORE.COM
WEBPAGE
The layout of the navigation bar could have
been more creative to capture the viewers
attention.
The placing of the text or the image and quote
could have been more spread out because the
area with the image and the quote looks
hanging at mid-air.

EXAMPLE
Picture reference: Visage
2014, Homepage, viewed 08
October 2014,
<www.visage.co>.
Picture reference: Emmy
Twenty Shoes 2014,
Homepage, viewed 08
October 2014,
<www.emmytwenty.com>.
ARTICLE 2
DONT MAKE THEM
WAIT
KEY POINTS OF THE ARTICLE
The main point that the writer is trying to get across is that the inclusion of
heavy but impressive graphics into a website should not be done at the
expense of increasing the loading time.
If possible, any graphic images used should be as small as possible.
The writer insists that web page designers ought to use design more,
graphics less.
To close the article, the writer cements his or her thoughts by noting that
any extra graphic that does not sell the website to the customer or
ensures their return to the website again must be taken out.
In a nutshell:

Short Loading Time + Looks Good = Successful Web page

POINTS WE AGREE ON
I have noticed that many web sites are trying to portray themselves as if
they were a TV network. They put top-notch graphics and sound into their
web page.
According to a recent report published by Radware, load times for
the top U.S. retail websites are 22 percent slower than in December
2011 (Gesenhues, 2013)
Average loading time of Top US Retail Stores web pages is a whopping
7.25 seconds. Last December 2011, it was 5.94 seconds.
This shows an incredible increase in loading time despite the ideal time
of 3-seconds.
POINTS WE AGREE ON
Why is this so?
o This is because of the incredible need for companies or
brands to set themselves apart with large image files
and fancy, over-the-top graphics.
o Impress their clientele and target markets as it is clear
that almost everyone is not easily impressed in this day
and age.
o Keep up with the modernization of times and lifestyle.

EXAMPLE
Walmart uses large image sizes and also moving banners.
This increases the loading time, which could potentially
decrease traffic to the website itself.

Picture Reference: Walmart 2014, Homepage, viewed 07 October 2014, <www.wallmart.com>
EXAMPLE
Twitter has recently changed their log in web page to a much
more complex one, with increased loading time due to the
changing of the high resolution background image in few second
intervals.

Picture Reference: Twitter 2014, Homepage, viewed 07 October 2014, <www.twitter.com>
POINTS WE AGREE ON
Instead of designing graphics and taking pictures and turning
them into jpgs to make your web page look good, try using color
schemes.
This is a great way to ensure that your webpage does not suffer
in terms of design and also creativity.
By using bright colors or harmonious colour schemes, one can
easily attract the viewers attention and earn brownie points on
the design aspect.

POINTS WE AGREE ON
Color has a powerful effect on how we associate
things. Colors can give a reader predefined feelings
and prejudices about a web page even before
he/she sees the content.
EXAMPLE
This conscious decision to use color schemes as the
background not only makes the overall design of the web
page look fun and attractive, but also lessens the loading
time with its lack of heavy graphics.

Picture Reference: F91W 2014, Homepage, viewed 07 October 2014, <www.f91w.com>
POINTS WE DISAGREE ON
So I will give you all a suggestion that your web page
should be no larger then 50K. I would shoot for less than
30K.
Remember sometimes less is more.
For these two statements, we choose to agree and also
disagree at the same time, depending on some factors
After doing some research on various websites and their
loading pages, we have found that usually for Brand
agencies, the loading time for these web pages would be
higher than the average for common webpages.

POINTS WE DISAGREE ON
However, we find that for this case, it is understandable as they are
Brand Agencies. Hence, their selling point is in fact, their designing
skills. Thus, they need high quality design and graphics to persuade
their clients to employ their service.
These are the cases whereby Less is less and a webpage size
could potentially be larger than the article writers recommended
size.
Therefore, the first and second statement does not apply to these
particular web pages as they have legitimate reason to do
otherwise.
Our opinion: Allocation for size of webpage and amount of graphic
used is highly reliant on the needs and wants of the company itself,
and the service it provides or sells.

EXAMPLE
Picture Reference: Salted Herring 2014, Homepage, viewed 07 October 2014, <www.saltedherring.com>
Salted Herrings homepage is impeccably designed with high-
resolution images and large graphics.
On this page, some of the companys clients are featured (Whittakers
Chocolate, Heritage Hotels, among others)

EXAMPLE
Jar is also a Brand Agency like Salted Herring.
Their homepage boasts a vector-driven design that is
equipped with many vector animations that makes the
website exude fun and playfulness.
On this page, some of Jars clients are also mentioned
(Calvin Klein, University Mall, among others)

Picture Reference: Fresh Not Canned 2014, Homepage, viewed 07 October 2014, <www.freshnotcanned.com>
CRITICISM ON THE DESIGNMORE.COM
WEBPAGE
One clear thing that could be easily noticed as a flaw in this articles webpage
would be the inconsistency of content.

I have noticed that many web sites are trying to portray themselves as if they
were a TV network. They put top-notch graphics and sound into their web
page.This might seem like very little but you really can do a lot within
that size.
The long paragraph above is the opening of the article.
However, it repeats itself and is found further down the article once more, which
shows an inconsistency and disrupt in flow of the article.
When there is an unmistakable error in the content of a webpage, it could
potentially raise confusion among the viewers and subsequently, decrease the
traffic to the page.

ARTICLE 3
FIND WHAT COLOURS
KEY POINTS OF THE ARTICLE
Colours are essential in websites because colours
are the first thing that viewers notice and will attract
them to stay on the page for a longer period.
Colours brings a website to life and makes it look
professional. They dont only help to deliver
messages, but they help to set a mood for the
viewers.

POINTS WE AGREE ON
We agree that many web designers may overlook the
importance of selecting the right colours when it comes
to designing a website.
If they dont end up selecting the right colours, the
website may appear very dull and displeasing to the
viewers eyes, causing them to not want to continue
browsing for very long.
POINTS WE AGREE ON
According to Francisco Burzi, color is one of the primary keys
to good web design. Colors should be chosen wisely as it
affects the mood of the viewers. It should be chosen in such a
way which suits the subject of the website.
Choosing colors for website involves more than deciding
which colors you like. Your favorite colors are not as pleasing
when they are used together. Achieving color harmony is a
science, and knowing how to arrange colors is an art.
COLOUR WHEEL
According to Shruti Hemani and Ravi Mokashi Punekar, 2006, colour
can sway thinking, change actions, and cause reactions. It can
irritate or soothe your eyes, raise your blood pressure or suppress
your appetite. When used in the right ways, colour can even save
on energy consumption
EXAMPLE
Picture Reference: Belize2014, Homepage, viewed 07 October 2014, <www.belize.com>
POINTS WE AGREE ON
We also agree that web browsers can only see 256
colours.
Advertising art director of 25 years Gary W. Priester
stated that the reason why the palette that contains
only 216 colours, instead of the maximum 256 colours, is
that only 216 out the basic 256 colours will display
exactly the same on all computers.
EXAMPLE
Colours make a user feel welcomes, comfortable, relaxed, and secure.
These are some of the varying dimensions of colour and what they
represent in website designing:
Yellow
Symbolizes happiness, cheerful, hope, and jealousy. It makes a
webpage brighter, but it should not be overused.
Red
Symbolizes love, passion, fire, and aggressiveness. In the business
world, red is the colour used to motivate an individual to initiate
action, convey a warning, or stop the user. It is also used
cautiously as it can be irritating.


EXAMPLE
White
Symbolizes purity, truthfulness, cleanliness, and spirituality. Its
considered a great background colour for business web
designs.

Blue
Symbolizes reassurance, trust, and dignity. It is usually used to
give the website a professional look.

Green
Symbolizes wealth, freedom, and growth. It is used for business
websites for growing money.

EXAMPLE
Black/Grey
Symbolizes security, dignity, and earnestness. It is one of the
good background colours and also blends well when used with
other colours.

Pink
Symbolizes calm, nurturing, innocence, and cute. It is a good
colour choice when the target audience of the website is
primarily younger and females.

Purple
Symbolizes royalty, creativity, luxury, wealth, and mysteriousness.
It is the favourite colour for the artistic community but carries no
meaning in the business world.

Orange
Symbolizes warmth, pleasure, and ambition. It is basically used
for websites that deals with food and nature.


EXAMPLE
Picture Reference: Bloom London 2014, Homepage, viewed 07 October 2014, <www.bloom-london.com>
EXAMPLE
Picture Reference: Parallaz.js 2014, Homepage, viewed 07 October 2014, <http://matthew.wagerfield.com/parallax/>
EXAMPLE
Picture Reference: Reunite the river 2014, Homepage, viewed 07 October 2014, <http://www.reunitetheriver.com/>
EXAMPLE
In a nutshell, the most important functions of colours are to
provide visual and psychological information that generates
reactions from a viewer.
As a powerful form of communication, colour is irreplaceable.

ARTICLE 4
Dont Bore Your Visitors
Keep Them Thinking
KEY POINTS OF THE ARTICLE
The main point of the article is to have food for the mind,
keeping the readers interested. Instead of having a total
enclosure, it should have 1 or 2 questions left for viewers to
figure it out.
The writer also mentioned that a good website should have a
natural and direct flow with a simple design. However, some
may link the simplicity to a smaller company.
Nonetheless, it also mentioned the nature of human in
grouping unfamiliar things together for an easier management
on our thoughts.

KEY POINTS OF ARTICLE
Lastly, the writer pointed of that a website design should of
course be functional first. If it takes a lifetime to navigate the
page and download, there is point for a phenomenal website
design.

POINTS WE AGREE ON
A good website design should keep the viewer interested; or
rather it CAN keep the viewer interested.
If a viewer came across a good website and continue surfing,
it means it has a good flow of content with a minimal of
confusions.
There are at least 10 Requirements for a Website Design (Ron
Schiff, 2012):
1. Reduce Users Cognitive Effort
2. Do Not Waste Users Time With Trifles
3. Attempt to Focus a Visitors Attention
4. Showcase the Websites Features Effectively

POINTS WE AGREE ON
5. Write Effective Content
6. Do Not Complicate Things
7. Use Your White Space Effectively
8. Communicate Effectively
9. Use Familiar Formats
10. Test Early, Test Often (TETO)
Assuming that the above requirements are fulfilled, it is most likely
that it is a good website that can easily capture the visitors
attention.
Below is an example of a good website design, where there is
direct flow of content, low confusion with cute and attractive
graphics that attracts and interest the viewers.

EXAMPLE
Picture Reference: Toki Doki 2014, Homepage, viewed 08 October 2014, <www.tokidoki.it>
POINTS WE AGREE ON
There is a good deal to say about a simple site design but the
truth is many visitors will equate a simple website design equals a
small company.
We cannot deny the fact that judging is a human nature. It is
an issue that cannot be cleared but only reduce. By reduce in
this sense is to have a well designed website.
Even though a simpler site design is user friendly, but that does
not mean a well designed one is not. In the visitors perception,
a simple site design reflects on the companys attitude as well
as the capability to hire a professional website designer.

EXAMPLE
This is an example of what we considered as a
lowly designed website by a smaller company.

Picture reference: Game Aquarium 2014, Homepage, viewed 08 October 2014 <http://www.gamequarium.com/>
EXAMPLE
Everyone has a different perception and definition of a well
designed website. Below is the site I considered as a highly
designed website.

Picture Reference: The Source 2014, Homepage, viewed 07 October 2014, <http://dougaitkenthesource.com/liz-glynn
>
EXAMPLE
Picture Reference: Flat vs Realism 2014, Homepage, viewed 07 October 2014, <www.flatvsrealism.com>
POINTS WE AGREE ON
I strongly believe that a website design should be functional first.
It is in obvious a website should be functional first; if it is not, what
is the whole point of a website? Not to say the purpose of a
website design.
It is important to enquire all 5 basic principles for a website first
before taking the next step into design (Aliquant, 2010). For an
example:
1. Specific Alignment
2. Clear Purpose
3. Create Action
4. Relationship Focused Content
5. Active Downloader
EXAMPLE
Picture Reference: Dailylook 2014, Homepage, viewed 08 October 2014, <www.dailylook.com>
POINTS WE DISAGREE ON
You do not need to totally enclose it. You might just need a line
or two. Let the viewer figure the rest out.
Having suspense in a website is a great concept but I disagree
on having suspense in a website content.
Knowing the generation today likes being fed by easy access
of information, it would not be the greatest idea to left them
hanging.
Additionally, there is a possibility of late response and
unattended questions if users took the initiative to ask.
However, it would be a great idea to include suspense in
promotional activities from the company to keep the users
attracted.

CRITICISM ON THE DESIGNMORE.COM
WEBPAGE
If you will please open this page
http://www.designmore.com/grouptest.htm you will find it
easier to follow what you are about to read.
It states that it helps the visitors to increase their
understanding on the particular topic. However, it is a
broken link that leads the visitor to nowhere related to
the article.
This proves that this Designmore website is not fully
functional, therefore not a well designed website.

CRITICISM ON THE DESIGNMORE.COM
WEBPAGE
Please take a look at A and B. What do you see?
In actual fact, I do not see anything as the link given is a broken
link. Non-functional navigation that increases the doubts of the
readers.
Wistfully half of the text in the article is related to the content in
the link, which is unknown therefor the readers will be confused
with the content.
The website designer should comprehend the Test Early, Test
Often (TETO) action under the requirements of a website design.
Testing it early makes a difference in delivering product that
satisfies your clients requirements (Ron Schiff, 2012)

REFERENCE
Anon, (2014). 1st ed. [ebook] Available at:
http://www.edb.utexas.edu/minliu/multimedia/The%20Effect%2
0of%20Color.pdf [Accessed 10 Oct. 2014].
Designgraphics.org, (2014). designgraphics.org - Importance of
Color in Web Design. [online] Available at:
http://www.designgraphics.org/article22.html [Accessed 10
Oct. 2014].
Dsource.in, (2014). D'source Courses - Visual Design - Color
Theory, Concepts, Principles and Applications - Introduction.
[online] Available at: http://www.dsource.in/course/colour-
theory/introduction/introduction.html [Accessed 10 Oct. 2014].
Gesenhues, A. and Gesenhues, A. (2013). Top Retail Websites
Not Getting Faster: Average Web Page Load Time Is 7.25
Seconds [Report]. [online] Marketing Land. Available at:
http://marketingland.com/retail-website-load-times-continue-
to-decline-with-a-22-decrease-during-the-last-year-37604
[Accessed 10 Oct. 2014].

REFERENCE
Htmlgoodies.com, (2014). Consistent Colors For Your Site - All You
Need To Know About Web Safe Colors. [online] Available at:
http://www.htmlgoodies.com/tutorials/web_graphics/consistent-
colors-for-your-site-all-you-need-to-know-about-web-safe-
colors.html [Accessed 10 Oct. 2014].
Line25.com, (2014). 30 Web Designs Featuring Pop Out Navigation
Menus. [online] Available at: http://line25.com/articles/30-web-
designs-featuring-pop-out-navigation-menus [Accessed 10 Oct.
2014].
Muller, G., Muller, G. and Muller, G. (2011). 25 Examples of Perfect
Color Combinations in Web Design. [online] Codrops. Available
at: http://tympanus.net/codrops/2011/12/08/25-examples-of-
perfect-color-combinations-in-web-design/ [Accessed 10 Oct.
2014]. Muller, G., Thomas, J. and Muller, G. (2011). 30 Excellent
Examples of Color Usage in Web Design | Inspiration. [online]
Webdesignledger.com. Available at:
http://webdesignledger.com/inspiration/30-excellent-examples-
of-color-usage-in-web-design [Accessed 10 Oct. 2014].

REFERENCE
Muller, G., Rocheleau, J. and Young, N. (2013). 13 Beautiful
Examples of Bold Colors in Web Design | Inspiration. [online]
Webdesignledger.com. Available at:
http://webdesignledger.com/inspiration/13-beautiful-examples-
of-bold-colors-in-web-design [Accessed 10 Oct. 2014].
Powazek, D. (2006). Where Am I?. [online] Alistapart.com.
Available at: http://alistapart.com/article/whereami [Accessed
10 Oct. 2014].
Schiff, J. (2014). 13 Simple Tips for Improving Your Web Design.
[online] CIO. Available at:
http://www.cio.com/article/2385250/online-marketing/13-simple-
tips-for-improving-your-web-design.html [Accessed 10 Oct. 2014].
Schiff, R. (2012). 10 Requirements for Website Design -
SiteProNews. [online] SiteProNews. Available at:
http://www.sitepronews.com/2012/08/16/10-requirements-for-
website-design/ [Accessed 10 Oct. 2014].
REFERENCE
Slideshare.net, (2014). Importance of color scheme in web
design. [online] Available at:
http://www.slideshare.net/PixelCrayons/importance-of-color-
scheme-in-web-design [Accessed 10 Oct. 2014].
unctionfox.com, (2014). 7 Essential Do's and Don'ts of Website
Navigation | Articles | Resources | FunctionFox. [online]
Available at:
http://www.functionfox.com/articles/article77.aspx [Accessed
10 Oct. 2014].
Webtransitions.com, (2014). Five basic requirements for
success, Effective, professional web design..: Privacy
Statement. [online] Available at:
http://www.webtransitions.com/five-requirements-for-
success.asp [Accessed 10 Oct. 2014].