A2: RESEARCH DESIGN REPORT

LAYOUT DESIGN CONCEPT

Grey Flamingos
Yeong Xiu Hui (Sara) 0306459
Elisha Yeo Hui Shien 0306637
Ninna Cornelia Geuze 0306167
Omer Anwar 1002K69378
Vincent Choo Chin Yu 0314554
Johann Yong 0312491
Article: Dont Bore Your Visitor
Summary: The article emphasizes the balance necessary for
a good website: functionality, loading speed, readability,
ease of navigation and ability to hold interest.


1. The article draws connections from the way human minds process
information, (humans like to relate) to design methods or mechanics
(If you would like to separate or close a section off you do not need
to totally enclose it ... just need a line or two the viewer figure the
rest out).


Article: Dont Bore Your Visitor
Simple divider lines are
sufficient to separate sections
full boxes are unnecessary
Just usage of colour differences
and sufficient spacing can separate
sections
Image: (Webdesigner Depot, 2008) Image: (Friedman, 2008)
Article: Dont Bore Your Visitor
2. The article says readers are able to draw our own conclusions from
pieces of information, (We have the ability to create what is not there
in order for us to recognize an object.) and doing so keeps our
attention on the website (We like to look at objects and use our mind
to make connections. It keeps us interested).
Usage of a theme helps engage the
readers mind to draw connections
between the website (and its message)
and your theme, to reinforce your
point.

The example on the left (image source:
Friedman, 2008) shows a notice that
the company is hiring, tacked onto a
notice board, so it relates to real life
situations where notices are also tacked
onto notice boards.
Article: Dont Bore Your Visitor
3. All the characteristics necessary:

Functionality comes first before design creativity
Loading time should be low
Text should be easily readable
Navigation should be simple and uncomplicated
Overall design should have the ability to keep readers interested

Sample websites with some or all of the above characteristics:
1. http://www.bagnewsnotes.com
2. http://www.notcot.org/
3. http://goop.com/


Article: Dont Make Them Wait
Summary: A webpage loading time should be kept low by
trading off on graphics, images and colour-based objects
(and colour palette choices), for the reader/viewers
convenience.

1. A good tradeoff between loading speed and eye-catching graphics
(For a web page to be successful it needs to download quickly and
look good) is to depend on colour schemes instead of images to be
interesting (Instead of designing graphics and taking pictures and
turning them into jpgs to make your web page look good, try using
color schemes).

Article: Dont Make Them Wait
The layout uses colour blocks and
shapes simple, but still interesting
and requires less loading time
The layout uses just a few simple
images and colours, but is still pleasing
to the reader with low loading time
Image: (Webdesigner Depot, 2008) Image: (Webdesigner Depot, 2008)
Article: Dont Make Them Wait
2. Keep colours simple and use website space efficiently (Use cell
colors to make borders. Use the negative space on your web site. What
is not there is just as important as what is there. Remember
sometimes less is more).

(Hotel-oxford.ro, 2014)
Hotel Oxfords website uses a
simple, single-page-site layout.
The navigation is clear, the
borders never change and only
the content changes. It keeps its
colour scheme small and uses
space optimally so visitors do not
have to keep reloading pages.
Article: Find Out What Colours
Summary: Do not overlook the important of colour in
layout design. Individual browsers can only load up to 256
colours. Colours used should be in the 216 colour palette
browsers have in common. Pay attention to usage of red,
yellow and bright colours to prevent wearing out the
viewers eyes.

1. Colours need to be chosen carefully in a layout design. It should not
appear either plain or chaotic (The color you use should only be
chosen after careful consideration).
Article: Find Out What Colours
While you should keep colours simple, it
should still be cohesive and interesting.
The example below uses blue and brown
colour families but it is plain and boring
it also jars horribly due to a bad colour
hue combination.
The website uses the same colour families
at the one on the left, but it is a lot better.
The colour hues are more pleasant to the
viewer, and it manages to keep the design
interesting.
Image: (Top Design Magazine, 2011) Image: (Webdesigner Depot, 2008)
Article: Find Out What Colours
2. Colour choice should take into account what is easy on the viewers
eyes to prevent tiring out the viewer (Do not make large parts of your
web site with bright color. It might get your visitors attention but they
will either consciously or subconsciously notice their eyes getting
fatigued).

Image: (Top Design Magazine, 2011)
The website uses a lot of bright
colours that will tire the viewers
eyes out it also uses the colours
very messily so readers are too
distracted by the colours
everywhere to read the content.
Article: Find Out What Colours
The website uses yellow only in the
banner, whereas the colour of everything
else is muted and less strong. The banner
catches the readers attention, and the
design does not strain the viewers eyes.
The website uses red, but it uses a less
bold hue and saturation, plus it keeps the
layout simple instead of overloading the
viewers eyes. The text is also kept short
and easily readable through font and
colour.
Image: (Cousins, 2014) Image: (Friedman, 2008)
Article: Navigation
Summary: Website navigation should be simple and clear
hyperlinks and link titles help when viewers want to move
from one section to another. It should still be easy to
navigate between main pages without going back to the
homepage.

1. Websites should make it easy on viewers to know where they can
navigate to from their current page (Your visitor will always want to
know where can I go from here you should put links in context).
Article: Navigation
The very basic of navigation is the
inclusion of a menu bar, usually near the
top of the page. This website has a
rectangle navigation bar to the top left
corner.
And they dont have to be boring or
follow a linear format always just be
convenient. This websites menu bar is
designed like mini mindmaps.
Image: (Cousins, 2014)
Image: (Webdesigner Depot, 2008)
Article: Navigation
2. Use universal navigation standards to not confuse readers such as
colour-coding links (For your navigation to work well you should use
blue for unvisited and purple for visited as a color scheme). If a
website uses unconventional navigation systems it should have an
alternative that people are familiar with.
This website has a traditional menu
bar at the top, but viewers can also
choose to navigate with the colour
hexagon buttons to the right. Both
systems are fixed and do not change
so viewers can choose to browse
either way.
Image source: (Anet-design.cz, 2014)
Article: Navigation
Many websites now use less conventional navigation (ie. menu bar).
Some websites are no longer vertical but are designed in horizontal
layouts, which make it open to creative options.

The websites below have creative and easily understandable navigation
systems:
1. http://www.narrowdesign.com/
2. http://teamviget.com/#!lift-off
3. http://walktalkazores.org/2012/


SO WHAT MAKES A GOOD
LAYOUT DESIGN?
A list based on the four articles provided.
1. Overall Functionality
A websites layout design has to suit its purpose and reflect the message
or theme it conveys. People who visit a graphic designers personal
portfolio, for example, might be open to unusual layouts and graphics-
based content but people who visit an online banking site would prefer
clear layouts with easy navigation and more text content (information-
based).

Therefore, you have to know what the website is for and plan
accordingly the colour schemes, design template and navigation
systems to ensure it suits the websites purpose.
1. Overall Functionality
CIMB Clicks (Banking)
1. Clean and simple layout design that loads fast
2. Clear navigation menu and options to optimize experience
3. Simple colours (CIMBs theme colour) and shapes for separated sections
People who go to
banking sites usually
are running errands
(make payments or
online transfers) and
do not like having to
go through a lot of
fuss to do that. A
banking site should
therefore be simple
and easy to use for the
best customer service.
CIMB Clicks is a good
example.
Overall Functionality
Blog (www.cheeserland.com)
1. Standard blogpage layout, with
navigation on the top and sides of the
page
2. Simple colours with clear headers to
identify different sections
3. Graphics-heavy content

This is a blog website, so the design is
more centred towards blog utilities, but it
is kept simple as blog posts are usually
graphics-heavy and keeping the design
simple lessens the loading time.
Overall Functionality: Examples
Good Designs:
1. Commercial (fashion):
http://www.catherinemaland
rino.com/
2. Commercial (fashion):
http://row.jimmychoo.com/e
n/home
3. News portal:
http://www.bloomberg.com/
4. Corporate:
http://www.unilever.com.my



Bad Designs:
1. Commercial:
http://www.gatesnfences.com
/
2. Commercial:
http://www.arngren.net/
3. Corporate:
http://www.mrbottles.com/

2. Low Loading Time
Viewers browsing online will usually be going through multiple
websites and do not have the time to wait for each individual one to
load. Loading time for a website should be low by keeping the design
less heavy, to prevent people from getting impatient and leaving.

A good rule of thumb to keep loading time short is to base website
layout designs on smaller colour palettes and use graphics only if
absolutely necessary.

The tradeoff between creativity in design and loading time depends on
the type of website you are designing, and the purpose it serves to its
viewers.
Low Loading Time
Food Network (www.foodnetwork.com)

This is an information/instructive site
so viewers tend to go through multiple
pages, articles or links. The design is
kept simple so people do not have to
wait a long time to load each page. Also,
because it relates to food, it has a lot of
graphical content which would require
a substantial amount of loading time, so
the design is also simple to not compete
with the content.
Low Loading Time
Kilfish Web Designer (http://www.kilfish.com/v6/#/home)

This is a personal promotional website and portfolio, and the subject is a web
designer so he prioritizes the showcase of his talents and abilities over the loading
speed of the website. His design is unique and has 2 navigation methods, and his
content is very media-heavy, but people looking for web designers are likelier
more patient and willing to wait for the loading in order to see his capabilities.
3. Pleasant Colour Schemes
Viewers eyes are muscles and will be fatigued if made to work too hard,
which leads to viewers moving away from the website. Colours used in
the website design should work well together and should be pleasant to
not strain the viewers eyes. Bright and harsh colours should be
avoided.

Colours chosen in the design should serve a purpose. Use bright colours
very sparingly only if you need to get the viewers attention. Readable
content should come in a colour comfortably read. The colour
combinations should also be suitable and not clash with each other.
Pleasant Colour Schemes
McDonalds Malaysia
It keeps its colour scheme simple but doesnt make it dull. Each new
entry in the featured section has its own small coloured banner, which
helps make the website look livelier even with only a red and grey
colour scheme.
Pleasant Colour Schemes
Bens Malaysia

The website uses a slideshow of
monotone photographs for its
background so that takes up most
of the bandwidth, but they keep
everything else simple, and each
new sitepage loads a small section
in the middle. The colour scheme
is also simple, black, white and
grey. The tradeoff here was to
focus on the backgrounds and
give less loading time to other
design aspects but it is still
pleasant despite being limited.
Pleasant Colour Schemes
Lee Flower

Even though they kept it simple, it
is not pleasant to the eye. The
website looks dull and slightly
unorganized because of the
haphazardly chosen colours and
the lack of a unifying theme or
identifiable colour scheme.
4. Understandable Navigation
If people do not know how to get to where they want, they will be
frustrated and move away. To make sure viewers are able to navigate
happily, the navigation system should be simple and clear. It should not
be too difficult or too complicated, and it should follow some common
standards to make sure viewers understand its meaning.

Designers can use hyperlinks and title links to help viewers navigate the
website more easily. If a website has a very unconventional navigation
system, then an alterative, more universally identifiable one can be
included so viewers will not be too confused.
Understandable Navigation
HNY, Hoe & Yin design studio

Navigation bars do not always
have to be in the same
position, but they have to be
easily found on the website.
This one places the navigation
bar in a corner but it is still
prominent and viewers will
notice it, without it drawing
attention away from
everything else.

Understandable Navigation
Nicoles Classes

The website has clear navigation
bars at the header and footer of
the website. The slideshow
banners and featured columns are
also easily recognizable and can
be used to navigate.
Understandable Navigation
Atlanta Restaurant Club

This website has a lot of links at
the sidebar and in each post but
everything is so packed in
together, and formatted in
multiple different ways that
viewers would find it difficult to
identify the links they wish to
click. Therefore, the navigation is
confusing and viewers will not
want to browse further, which
defeats the purpose of a website
promoting restaurants.
References
Anet-design.cz, (2014). Anet design :: Bodypainting a
facepainting. [online] Available at: http://www.anet-design.cz/
[Accessed 4 Oct. 2014].
Cousins, C. (2014). E-Commerce Website Design: 10
Interesting Examples | Design Shack. [online]
Designshack.net. Available at:
http://designshack.net/articles/inspiration/e-commerce-
website-design-10-interesting-examples/ [Accessed 4 Oct.
2014].
Friedman, V. (2008). 40 Creative Design Layouts: Getting Out
Of The Box - Smashing Magazine. [online] Smashing
Magazine. Available at:
http://www.smashingmagazine.com/2008/09/03/40-
creative-design-layouts-getting-out-of-the-box/ [Accessed 4
Oct. 2014].

References
Hotel-oxford.ro, (2014). Oxford Hotel Timisoara: Oferta
Cazare Timisoara, Hoteluri in Timisoara 3 Stele+. [online]
Available at: http://www.hotel-oxford.ro/cazare-hotel-
timisoara.htm [Accessed 4 Oct. 2014].
Top Design Magazine - Web Design and Digital Content,
(2011). 20 Examples Of Bad Web Design - Top Design
Magazine - Web Design and Digital Content. [online] Available
at: http://www.topdesignmag.com/20-examples-of-bad-web-
design/ [Accessed 4 Oct. 2014].
Webdesigner Depot, (2008). 100 Websites With Outstanding
Artistic Design. [online] Available at:
http://www.webdesignerdepot.com/2008/12/100-websites-
with-outstanding-artistic-design/ [Accessed 4 Oct. 2014].