Renaissance

GROUP LEADER:
Nicholas Han Tatt Wah (0310426)

GROUP MEMBERS:
Liew Zu Xing (0310413)
Mok Han Leon (0314405)
Tan Jia Xuan (0309954)
Tee Mieng (0309219)

RESEARCH TOPIC:
Layout Design Concept

List of topics that
will be discussed:
Find Out What Colors Will
Cause Your Visitors to Hate
You

The colours on the article is too striking and
unappealing to the eyes.

The orange colour makes the eyes feel fatigued after
awhile.

Furthermore, it is only one flat colour and it is very
boring to look at.
Colours

A website with good usage of colours would be
dustinabbott.net.
It only consists of light brown, black, and light grey.
Since it is a photography website, the light brown makes
the photos in the website blend in nicely with the
background, making the photos stand out.
Even though only a shade of light brown is used, it is
textured so it is not so boring to look at.
There are no other bright colours in the website, so
reading would not be straining your eyes.

Colours
(www.dustinabbott.net)

The layout in the article is very messy and unorthodox.
For instance, the body text is justified to the left side of the
page, instead of in the middle.
This narrows the texts, making the texts look more compact and
this tends to make the reader unwilling to continue reading.
The buttons at the top of the page are not arranged properly
and uniformly in one line.
The home button is above the contact button, and the portfolio
and expertise buttons are separated from and larger than the
other buttons.

Layout

A good example of a website which has a good
layout is www.apple.com.
All the buttons in the website are in the same line
and clearly separated from each other.
The texts and images are aligned properly and
utilized properly to not waste any space.
The website does not look messy, and keeps the
reader interested to continue browsing the website.



Layout
(www.apple.com)
Navigation

CONTENT
The points discussed in the article do make sense and
are true when it comes to site concepts. The article
provides some very useful information to enlighten
readers and increase their knowledge on site
navigation.
USER INTERFACE
However, the articles site lacks user interface. In fact,
besides the article, there is not much on the site at all. It
is quite boring and does not really serve much of a
purpose.
ARTICLE CRITIQUE

Contents are some of the most important aspects of
a site.
Of course, the contents of a site have to be relevant
with the type of site/the aim of the site, e.g. What is
the site about? For example, a cooking website
should display recipes and other cooking-related
material, not information about car engines.
The contents of a site are very important as they hold
the power to determine site traffic and the
effectiveness of the site; if the sites contents are
bad, there will be less visitors.

Content

It is important that a sites navigation and user
interface remains easily understandable and not too
complex.

In terms of user interface, it can branch out into
many other aspects that make up a site, such as
design (colour, font, etc.), layout (to ensure that
visitors do not have trouble navigating through the
site) and so on.

User interface is also important to sustain human-
computer interaction.
Navigation & User
Interface

An example of a site with bad content,
navigation & user interface
(cavs.mit.edu)

In that site (cavs.mit.edu), not only does it look
disorganized and totally unappealing, but visitors will
also not be able to figure out what the site is actually
all about.
The site completely lacks user interface as well,
whereby it is limited when it comes to enabling
interaction between visitors and the site itself.
There are also plenty of irrelevant and unnecessary
contents on the site.
Reasons

An example of a site with good content,
navigation & user interface
(www.soyacincau.com)

In that site (soyacincau.com), not only is the overall
look of the site quite simple and easily
understandable, the site also provides ample
opportunity for visitors to interact with the site.
By providing shortcut links
and even a search function,
it is much easier for visitors
to navigate through the site
with ease.
With this site, less is more.
Reasons

MoRe exaMples
Sites with good
navigation, content &
user interface


MoRe exaMples
Sites with bad
navigation, content &
user interface

Dont Make Them Wait

According to the article Dont Make Them Wait,
most website viewers can only see 216 colours and
download at 28.8kb per second.
We disagree with this point because technology has
advanced and we are now able to load pages with
large size in a second.
According to Smith (1999), the faster your modem,
the less time it takes to transmit data. The larger the
number, the more bits of data a modem can transmit
in a second.
Size/Graphics

According to The Star Online (2014), almost three
times slower than Vietnam, Malaysia at 5.48
Megabits per second (Mbps) was ranked a low 126
out of 192 countries surveyed from May 2013 to April
this year in the recent Net Index.
Even though Malaysia is one of the countries that
has the slowest internet speed, it is still able to
download at 5.48 Mbps, hence, can load a website
that is more than 50k in size pretty fast.
Size/Graphics
(www.7Designers.com)

7Designers, is a website that has large graphics, not
to mention it is also an interactive website, hence its
large size.

The website, although large in size, is impressive
due to the cute navigation buttons that resembles the
Periodic Table of Elements. It also gives off a cute
tone when you move your cursor to it. It is also user-
friendly.
Size/Graphics
(www.malaysia.yahoo.com)
(www.malaysia.yahoo.com)

The size of the website Yahoo! is small but it is also
very plain.

There are very little images and so the whole website
just looks like its full of words and more words.

If the words that Yahoo! write are unable to catch the
viewers attention, the viewers would not stay long in
the website.
Size/Graphics

In the article, there was this question Here is the
dilemma: download quick or look good?

Naturally, the answer would be both. However, if a
website does load very quickly but looks extremely
messy or uninteresting, viewers would not stay long.
Hence, for the answer to this dilemma, we would say
look good.
Size/Graphics:
Conclusion

Good Website :
Size/Graphics
(www.maplesea.com/index)
Lots of images and
animation
to make the website look so
much more interesting.

Bad Website:
Size/Graphics
w
w
w
.
r
o
g
e
r
a
r
t
.
c
o
m

A lot of colours for fonts, however, no graphics and it is too messy.
Which is why: Small Size Good Website.

In a guideline written in this page
http://www.gamequarium.com/edweb/gooddesign.htm, to
create a website that is successfully designed, you must:

a) Select standard fonts that are easy on the eye to maximize
readability

b) Text is big enough to read, but not too big

c) Background and font colors should contrast
Use light font colors on dark backgrounds
Use dark font colors on light backgrounds
Avoid red and green combinations- hard on the eyes

Fonts

The font that is used in the article is just Arial.

Although it is good that the fonts are consistent
throughout the whole article, however, for the part
where the website put up a customers feedback,
should be in a different font to make the website look
more interesting overall.
Fonts

Fonts

In the article, all the font colours are either black or
white. This makes the website look extremely dull
and boring.

Fonts

To make a website look livelier and more interesting,
playing with different fonts and colours can be a
good thing, for example, http://monsterism.net/
Fonts

One more thing about fonts is that it cannot be too
small. Although readable, it would still take quite an
effort and the viewers would have to strain their
eyes, for example, the words in www.rinzen.com is
too small.

Fonts

Fonts
(www.rinzen.com)

Good Website : Fonts
w
w
w
.
A
n
i
L
i
n
k
z
.
c
o
m

The fonts and its colours, plus the animated characters beside them make
the website look attractive.

Bad Website: Fonts
w
w
w
.
0
0
7
m
u
s
e
u
m
.
c
o
m

Although there is a banner and a few images, the whole website look so chaotic
due to the fonts and fonts colour.

One of the most important things about creating and
designing a successful website is its compatibility
with various browsers.

Your website might look good in one browser, but
may look distorted in another.

For example, the article Dont Make Them Wait
looks fine when opened using Google Chrome, but
looks distorted when opened using Mozilla Firefox.
Compatibility

Compatibility
* With Google Chrome
* With Mozilla Firefox
Dont Bore Your Visitors
Keep Them Thinking

Design displayed: Simple but Plain
As shown in the website, the fonts are
in a standard font throughout the
article, making it easier for viewers to
browse through. However, we realize
that the title is also in the same font
size as the text, and this has caused
the title to not be outstanding enough
for the viewers to spot it directly.
To counterbalance this issue, we have
come to a conclusion to enlarge the
titles font size as well as add
Underline, Bold or Italic effect. This
will not only let the title look different
as compared to the text, but also
attract the attention for the viewers at
first sight.
DESIGN
Font size: Larger
Font colour: Contrast with
text
(www.ectomachine.com/)
To create a good website, the design plays the
uttermost important role in attracting viewers. The
design determines the first impression given to
viewers, and if the design does not hold viewers
attention immediately but makes viewers
uncomfortable, the website will only lose potential
viewers and business throughout the time.

The overall design of
the website is messy
and unorganized
(www.constellation7.org/Constellation-Seven/Josiah/Index.htm)
Likewise, the design of the website is simple and easy to
understand, the background colour of the website is plain and
light (Orange), and causes a contrast with the font colour
(Black), but the colours contrast into a not very interesting first
impression to the viewers.
To improve this, we have referred to another website that is
able to show an obvious contrast between the text and the
background colour. The most noticeable contrast would be
black and white, thus to improve the website, we chose to
change the background colour and the text colour.


Contrasting
colour of black
and white
Black background
colour makes the
text stand out.
(webleeddesign.com)
On the other hand, the buttons on the website is positioned
under the title but small sized and packed. As said in the
article: A web site design should not be to confusing nor
should it be to simple. This statement is true but the website
did not implement the theory into their own design.
The buttons could be altered to be larger and noticeable.
Navigation buttons are
designed to be in a bigger
size for better perspective
form the website.
(www.10bestdesign.com/firms/2014/february/rose-city-websites/web-design-firm-about.png)

The content of the article given
is informative and was conveyed
in decent language. An author
should be able to compose a
piece that is appropriate and
with polite vocabulary.
Additionally, an author needs to
write articles with a subjective
thinking, in order to not affect
viewers feelings. For example,
the author should not include
any profanities or write an article
while being emotionally affected.

Therefore, to protect the image
of the website, proper language
should be used at all times in
order to be consistent and to
show professionalism .
language
(www.bagnewsnotes.com)
* As
shown in
the image,
the text is
written in
a
subjective
manner,
not
emotionall
y
Besides showing professionalism in the writing of the article, it is also
crucial to ensure that the article is not lengthy and dull to interpret. In
this article, we realized that the text length in the article is too long
and could be a pain to absorb all the information given to the viewers.
For the viewers sake, the text should be summarized in a way that
the viewers is still able to understand the message that is being
conveyed. Besides, the paragraphing of the text should also be
rearranged to not form a clutter of text in the whole article.
Texts are divided
and summarized
in a way to make
it easier for
viewers to read
and interpret.
(journal.gregorywood.co.uk/entries/top-5-zombie-films.php)
Last but not least, some images should be added
into the text to not cause the entire piece to look
uninteresting.

Images are
added onto
the article to
make the
text look
more lively.
(www.ringvemedia.com/shanghai-
blog)

10bestdesign.com, (2014). [Online] Available at:
http://www.10bestdesign.com/firms/2014/february/rose-city-websites/web-design-firm-about.png
Anilinkz.com, (2014). Watch Anime Online | AniLinkz Streaming Anime Episodes. [Online] Available
at: http://www.AniLinkz.com
Apple. 2014. Apple. [ONLINE] Available at: http://www.apple.com.
Cavs.mit.edu, (2014). Center for Advanced Visual Studies. [Online] Available at: http://cavs.mit.edu
Constellation7.org, (2014). WELCOME TO THE REVELATION OF OUR TIME: A 21ST CENTURY
TAPESTRY IN CHRIST. [Online] Available at: http://www.constellation7.org/Constellation-
Seven/Josiah/Index.htm
DustinAbbott.net. 2014. DustinAbbott.net. [ONLINE] Available at:
http://dustinabbott.net/photography/.
Ectomachine.com, (2014). ECTOMACHINE | Tulsa Web Design | Oklahoma Web Design. [Online]
Available at: http://www.ectomachine.com.
Gamequarium.com, (2014). What are principles of good web design?. [Online] Available at:
http://www.gamequarium.com/edweb/gooddesign.htm.
Michael Shaw, B. (2014). BagNews | Reading the Pictures Visual politics and the analysis of
news images. [Online] Bagnewsnotes.com. Available at: http://www.bagnewsnotes.com.
Missionbicycle.com, (2014). Mission Bicycle: Beautiful Custom Bicycles Made in San Francisco.
[Online] Available at: http://missionbicycle.com
References

Monsterism.net, (2014). Pete Fowler. [Online] Available at: http://monsterism.net
Only, F. (2014). JAMES BOND 007 MUSEUM NYBRO SWEDEN. [Online] 007museum.com.
Available at: http://www.007museum.com
Owltastic.com, (2014). Owltastic. [Online] Available at: http://owltastic.com
Ringvemedia.com, (2014). GOTOCHINA. [Online] Available at:
http://www.ringvemedia.com/shanghai-blog.
Rinzen.com, (2014). RINZEN. [Online] Available at: http://www.rinzen.com
Rogerart.com, (2014). www.RogerART.com [Online] Available at: http://www.rogerart.com
Searchsoa.techtarget.com, (2014). What is user interface (UI)? - Definition from WhatIs.com.
[Online] Available at: http://searchsoa.techtarget.com/definition/user-interface
Smith and Goldsmith Inc., (2014). [Online] Available at:
http://smithandgoldsmith.homestead.com/home.html
Smith, R. (1999). Electronic resumes & Online networking. 1st ed. Franklin Lakes, NJ: Career Press.
Soyacincau.com, (2014). SoyaCincau. [Online] Available at: http://soyacincau.com
Team, P. (2014). MapleSEA Explore MapleStory! A popular, fun-filled Online adventure where
friendship begins for children and adults! [Online] Maplesea.com. Available at:
http://www.maplesea.com/index

References

The Importance of Website Design & Layout - Traffic Brand. 2014. The importance of website design
& layout - Traffic Brand. [ONLINE] Available at: http://www.trafficbrand.com/the-importance-of-
website-design-layout/.
Themalaysianinsider.com, (2014). Where did they get the grenades, asks DAP - The Malaysian
Insider. [Online] Available at: http://www.themalaysianinsider.com/malaysia/article/where-did-they-
get-the-grenades-asks-dap.
Thestar.com.my, (2014). Speed slower than Vietnam and Cambodia - Nation | The Star Online.
[Online] Available at: http://www.thestar.com.my/News/Nation/2014/05/04/Our-Internet-not-so-
broadband-after-all-Speed-slower-than-Vietnam-and-Cambodia/
Uglytub, (2014). Bath Magic: Tub Refinishing / SInk Reglazing / Tile Resurfacing. [Online] Available
at: http://uglytub.com
Webleeddesign.com, (2014). The portfolio of Bryan Katzel | Design, illustration & stuff to make you
smile. [Online] Available at: http://webleeddesign.com.
Website Layout Tips: Where To Put Your Most Important Stuff [INFOGRAPHIC] | Social Media
Today, (2014) Website Layout Tips [ONLINE] Available at:
http://www.socialmediatoday.com/content/website-layout-tips-where-put-your-most-important-stuff-
infographic.
Wood, G. (2014). Top 5 zombie films | journal.gregorywood.co.uk. [Online]
Journal.gregorywood.co.uk. Available at: http://journal.gregorywood.co.uk/entries/top-5-zombie-
films.php.
Yahoo, (2014). Yahoo Malaysia. [Online] Available at: http://www.malaysia.yahoo.com
References