Leader: Rhyz bin Ruslan 0310444

Members: Norman Iskandar bin Shaipudin Shah 0308645

Natalie Loo Pei Shen 0310100
Nicole Levins 0314998
Ma Graciella Ysabella Padilla Juson 0306378
Keeping the Viewers Interested
Points Highlighted in the Article
should have a natural flow

should not be confusing

should not be simple
o people equate a simple site design equals to a small company

should be functional
o loads faster
o text and navigation are straight to the point
Natural Flow
A website with a natural flow is a
lifesaver as it does not require a lot
of time to think of what links link
to what. A website that has a
natural flow will most likely be
easier to browse around as it does
not have over the top features,
headers, sub headers, link and so
on that may result in confusion
amongst the viewers.

The picture on the right is an example
of a website that does not have a
natural flow (SOLVM, 2014).
Confusion
Websites that are confusing, will only result
in the viewer to close their browser as
they do not have time for that.
According to the website, SOLVN,
viewers equate confusing websites to an
unorganized and ignorant business. A
site is confusing when there are more
links then it should initially have
(Schroder, 2013).

An example of a confusing website would
be: http://www.loobiecore.com/.
Not Too Simple
Based on a case study one by Google in the year
2012, researchers found that websites that are
filled with images and colours (NOT SIMPLE)
are rated as less beautiful compared to
websites thats just the right amount of simple
(Tuch et al., 2012).

I strongly agree with this as websites that are
overfilled with images, fancy texts and colours
only overwhelms the mind, thus not enjoying
it. Websites that are basic-simple, are easier to
navigate and is easy on the eyes as it less
congested and messy.
Example: (Not Simple VS Simple Website)
Not Too Simple
Functional
Not only must your website be well designed, but it should
also be functional in a way that it will not take forever to
load due to the resolutions used in images. Besides that, a
website is not functional with navigation buttons that are
not straightforward. Even though, it is the 21st century,
there are still people that are not tech-savy and a web
designer should always have that in mind.
According to Hubspot
These websites are considered the top 3 websites that are
well designed and functional.

1. Ford
2. Sony
3. Apple
Ford
It gives the buyer a feeling
like as if he/she was in the
showroom as the
homepage allows the
buyer to choose the car
there and then without
any hassle.
Sony
Sony is well designed and
functional because its
navigation was made easy
for the visitors as their
products are sorted in the
most logical
categorization way
possible. Besides that,
their navigation button
has a drop-down menu.
Apple
Apples homepage makes it
easier for the visitors select
their desired products and
find out more about it. It
also includes high
resolution graphics of the
products.
In a Nutshell
Websites should always be simple no matter how bizarre your
business is (Hongkiat.com, (n.d).). In order for visitors to
be interested, always make sure the website is functional,
has a natural flow and most importantly make sure it is not
confusing (Schroder, 2013).
Dont Make Them Wait
Content of the article
- keep the web page size under 50K

- graphic images should be as small as possible

- 216 colors on the web safe pallet

- Use more design and less graphic

- reduce the loading time for the web page
Size of websites
Websites have a longer loading time as compared to the years before
this due to the increase in size and complexity (Gesenheus, 2013)

For example, retail websites that are saturated with images
often have a longer loading rate. In fact, load times for the top U.S.
retail website are 22% slower than in December 2011, according to a
recent report published by Radware (Gesenheus, 2013). The ideal 3 second
load time is not being applied now (Gesenheus, 2013)
Colours
It is imperative to maintain
within the web safe colours to
prevent any dithered and
inconsistency on the web page
(Priester, 2013)
An example of
discrepancy is when the colour
gray is shown on a Windows
monitor, the colour pale yellow
might appear on a Macintosh
browser (Priester, 2013)


Large images and poorly-written page (code, not the text) contribute
to the loading time (Spector, 2013)

I do agree with the article as a website that takes a long time to
load is very frustrating and it is proven that those websites will lose its
audience due to the load time factor.

According to surveys done by Akamai and Gomez.com, nearly half
of web users expect a site to load in 2 seconds or less, and they tend to
abandon a site that isnt loaded within 3 seconds (Jacob, 2011)
Below is the slowest website according to Internet Supervision



According to marketingland.com, the fastest websites are :

CVS.com

Polo.com

eCrater.com
CVS.com
Polo.com
eCrater.com
The Importance of Color
1)

2) Colors should be ones concern when it comes
time to begin your site plan

3) Web browsers can only see 256 colors.

4) Use yellow color sparingly in your web site itself.
Use a browser safe color when using solid color as a design
element
Many web designers overlook the importance of
choosing a safe color when designing a web site. It
should be one of your first concerns when it comes to
start your web site design. If you don't pay close
attention to the colors you chose, your site will end up
either plain and boring or so messy it's hard to look at.
The color you use should only be chosen after careful
consideration. (Webdesignct.com, 2014)
Colors used to begin a site map
- Color use is often consistent across different types of
maps by different cartographers or publishers. Site map
colors are always consistent on a single map.
- Colors are normally used in relation to a certain
sections in a site map.
- Exp: if its a website for guys, you wouldnt find the
color pink in it
Web browsers can only be seen in 216 colors
Web Safe, or Browser Safe palettes, consist of 216 colors
that display solid, non-dithered, and consistent on any
computer monitor, or web browser, capable of displaying
at least 8-bit color (256 colors). The reason why this
palette contains only 216 colors, instead of the maximum
256 colors, is that only 216 out of the basic 256 colors will
display exactly the same on all computers.
(Htmlgoodies.com, 2014)
Use yellow in your web site
- Yellow can definitely be harsh on the eyes, but when correctly used, it
can convey different ideas. One of which is the warmth. Sunny, tropical,
and bright, yellow brings instant pop to a site or logo. (Sprout New Media,
2013)

- Yellow doesnt usually stand up well on its own, and needs contrasting
colors to be effective. Yellow on red can illustrate an joyful feel, or create
an edgy look thats perfect for some artists and designers.

- Exp: Macdonals, and Shell
WEBSITES
Victorias Secret
Victorias Secret
Kiehls
Kiehls
Chris Dyson Architect
Chris Dyson Architect
Topic
Points that has been discussed in
this article:

Importance of answering the question

Where am I
Where can I go from here?
Where was I already?
The article claims:
It is important to put links in context
It is important to use link titles
It is important guests knows where they are at all times
The color of the unvisited links should be blue and
change to purple when visited
It gives the visitors an insight on where the link will take them
This next slide shows a clear example of a web site in context
with the link
The resource links in the small boxes on the left bottom side of
the screenshot was included with a brief description of what the
link leads to
This is good because visitors can get an insight on what the
website is about and they can choose to press or not to press on
the link
1. It is important to put links in context
(The Smart Passive Income Blog, 2014)
2. It is important to use link titles
According to Ann Smarty on How to Use Link TITLE
Attribute Correctly, link titles should:
Be used for your users, not search engines (this approach always
pays back);
Not be duplicated with link text (this hurts usability: for example
some blind users will hear the same text twice);
Not have too much weight on the title attributes as not all screen
readers may render it (make sure either surrounding text or anchor
text explains the link at least the first time you use it).

3. It is important visitors knows where
they are at all times
Question: What would make it obvious to the
visitors where they are?

Answer: a very clear and simple design of website
the website's dropdown is well placed

(Frost*collective, 2014)
An example of when guests do not
know where they are

The next few slides are screenshots of websites
which are very confusing and does not inform
visitors where they are
Therefore it shows how navigation is an important
part of building a website.

Welcome Page
(Soulbath.com, 2014)
2
nd
Page
(Soulbath.com, 2014)
By this point guests would already be confused and stop
browsing through
(Soulbath.com, 2014)
4. The color of the unvisited links should be blue
and change to purple when visited
I disagree that there needs to be different colours for a
person to know whether they have visited a page/link or
not
as you can see from Salted Herring's website, whichever
page you are on, you will see the title highlighted
therefore it shows where you are and the colour is white not
blue

(Saltedherring.com, 2014)
References
Frost*collective, (2014). What we do - Frost*collective. [online] Available at:
http://www.frostcollective.com.au/what-we-do/ [Accessed 2 Oct. 2014].
Saltedherring.com, (2014). Our Work - engaging your audience - brand development.
[online] Available at: http://www.saltedherring.com/work/category/brand-development
[Accessed 2 Oct. 2014].
Smarty, A. (2014). How to Use Link TITLE Attribute Correctly - Search Engine Journal.
[online] Search Engine Journal. Available at: http://www.searchenginejournal.com/how-
to-use-link-title-attribute-correctly/ [Accessed 2 Oct. 2014].
Soulbath.com, (2014). soulbath. [online] Available at:
http://www.soulbath.com/intro.html [Accessed 2 Oct. 2014].
The Smart Passive Income Blog, (2014). Resources. [online] Available at:
http://www.smartpassiveincome.com/resources/ [Accessed 2 Oct. 2014].
Vandelaydesign.com, (2014). Vandelay Design. [online] Available at:
http://vandelaydesign.com/ [Accessed 2 Oct. 2014].

References
Blog.hubspot.com, (2014). 10 Brands With Website Designs That Nail Both Form AND Function. [online] Available at:
http://blog.hubspot.com/blog/tabid/6307/bid/33367/10-Brands-With-Website-Designs-That-Nail-Both-Form-AND-Function.aspx
[Accessed 3 Oct. 2014].

Hongkiat.com, (n.d.). 11 Common Web Design Mistakes (Blunders). [online] Available at: http://www.hongkiat.com/blog/11-common-
mistakes-blunders-in-web-design/ [Accessed 3 Oct. 2014].

Schroder, K. (2013). 7 Signs Your Site is Confusing - Coaching Sites That Work. [online] Coaching Sites That Work. Available at:
http://www.coachingsitesthatwork.com/7-signs-your-site-is-confusing/ [Accessed 3 Oct. 2014].

Loobiecore.com, (2014). lou barlow's vast and confusing website. [online] Available at: http://www.loobiecore.com/ [Accessed 3 Oct. 2014].

Tuch, A., Presslaber, E., Stcklin, 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. 1st ed. [ebook] Switzerland: Google. Available at:
http://static.googleusercontent.com/external_content/untrusted_dlcp/research.google.com/en/us/pubs/archive/38315.pdf [Accessed 3
Oct. 2014].

References
lingcar-homepage. (n.d.). [image] Available at: https://blog.kissmetrics.com/wp-content/uploads/2012/11/lingcar-homepage.jpg [Accessed
3 Oct. 2014].

Before and After. (n.d.). [image] Available at: http://execmediaassets.s3.amazonaws.com/emails/websiteredesign/beforeandafter.jpg
[Accessed 3 Oct. 2014].

Apple, (n.d.). Apple Homepage. [image] Available at:
https://cdn.tutsplus.com/webdesign/uploads/legacy/119_AppleDesignInfluence/apple-homepage.png [Accessed 3 Oct. 2014].

Ford, (2010). Ford Homepage. [image] Available at: http://www.youngmanblog.com/wp-content/uploads/2010/06/wall1.jpg [Accessed 3
Oct. 2014].

SOLVM, (2014). Is Your Website Dressed for Success. [image] Available at:
http://www.google.com.my/imgres?imgurl=http%3A%2F%2Fsolvm.com%2Fwp-
content%2Fuploads%2F2011%2F05%2Fconfusing.jpg&imgrefurl=http%3A%2F%2Fsolvm.com%2Fis-your-website-dressed-for-
success%2F&h=964&w=1247&tbnid=GSFMZMw6cwTreM%3A&zoom=1&docid=LlnvHc83YcZutM&ei=m6UuVK7oEcagugTm_4KADw&tb
m=isch&ved=0CB0QMygBMAE&iact=rc&uact=3&dur=588&page=1&start=0&ndsp=21 [Accessed 3 Oct. 2014].


References
Netdna, (2014). Paypal. [image] Available at: http://netdna.webdesignerdepot.com/uploads/2014/06/paypal.jpg [Accessed 3 Oct. 2014].

Webeminence, (2011). Simple Website. [image] Available at: http://webeminence.com/wp-content/uploads/2011/10/simple-website.jpg
[Accessed 3 Oct. 2014].

Sony, (n.d.). Sony Homempage. [image] Available at: http://cdn2.hubspot.net/hub/53/file-23151752-
png/blog/images/sony2.png?t=1412347387047 [Accessed 3 Oct. 2014].


References
CVS, (n.d).CVS Homepage. [image] Available at: http://www.cvs.com/ [Accessed 3 Oct. 2014]

eCrater, (n.d). eCrater Homepage. [image] Available at: http://www.ecrater.com/ [Accessed 3 Oct. 2014]

First Person Medical, (n.d). First Person Medical Homepage. [image] Available at:
http://www.firstpersonmedical.com/ [Accessed 3 Oct. 2014]

Gesenheus, A. (2013). Top Retail Websites Not Getting Faster: Average Load Time Is 7.25 Seconds. [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 3 Oct. 2014]

Jacob, S. (2011). Speed Is A Killer - Why Decreasing Page Load Time Can Drastically Increase Conversion.
[online] KISSmetrics. Available at: https://blog.kissmetrics.com/speed-is-a-killer/ [Accessed 3 Oct.2014]


References
Polo, (n.d). Polo Homepage. [image] Available at:
http://www.ralphlauren.com/home/index.jsp?utm_source=redirect&utm_medium=polo [Accessed 3 Oct.
2014]

Priester, G. (2013) Consistent Colors For Your Site - All You Need To Know About Web Safe Colors. [online]
HTMLGoodies. 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 3 Oct. 2014]

Spector, L. (2013) Why Some Websites Are Much Slower Than Others. [online] PCWorld. Available at:
http://www.pcworld.com/article/2038500/why-some-web-sites-are-much-slower-than-others.html
[Accessed 3 Oct. 2014]


Reference List

- Victorias Secret, (2014). Victorias Secret: The Sexiest Bras, Lingerie & Womens
Fashion. [online] Available at: https://www.victoriassecret.com/ [Accessed 4 Oct.
2014].

- Kiehls.com, (2014). Kiehls Since 1851 Skin Care, Men, Hair, Gifts & More.
[online] Available at: http://www.kiehls.com/on/demandware.store/Sites-
kiehls_us-Site/default/Home-Global?noRedirect=True [Accessed 4 Oct. 2014]

- Chrisdyson.co.uk, (2014). Home. [online] Available at:
http://www.chrisdyson.co.uk/ [Acceseed 4 Oct. 2014]
Reference List
- Htmlgoodies.com, (2014). Consistent Colors For Your Site - All You Need To Know About Web Safe
Colors. [online]

- Rosenberg, M. (2014). Why Are There Different Colors on Maps?. [online] About. Available at:
http://geography.about.com/od/understandmaps/a/mapcolors.htm [Accessed 4 Oct.
2014].

- Sprout New Media, (2013). Color Guide: Using Yellow for your website - Sprout New Media.
[online] Available at: http://sproutnewmedia.com/color-guide-using-yellow-for-your-
website/ [Accessed 4 Oct. 2014].

- Webdesignct.com, (2014). Your Choice Of Website Color - WDCT. [online] Available at:
http://www.webdesignct.com/designarticles/yourchoiceofwebsitecolor.htm [Accessed 4
Oct. 2014].