A2: RESEARCH DESIGN REPORT

LAYOUT DESIGN CONCEPT

Grey Flamingos
Yeong Xiu Hui (Sara)
Elisha Yeo Hui Shien
Ninna Cornelia Geuze
Omer Anwar
Vincent Choo Chin Yu
Johann Yong

0306459
0306637
0306167
1002K69378
0314554
0312491

$UWLFOH'RQW%RUH<RXU9LVLWRU
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, KXPDQVOLNHWRUHODWH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 WZRthe viewer figure the
rest RXW.

$UWLFOH'RQW%RUH<RXU9LVLWRU
Simple divider lines are
sufficient to separate sections
full boxes are unnecessary

Image: (Webdesigner Depot, 2008)

Just usage of colour differences

and sufficient spacing can separate
sections

Image: (Friedman, 2008)

$UWLFOH'RQW%RUH<RXU9LVLWRU
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 REMHFW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 LQWHUHVWHG.
Usage of a theme helps engage the
UHDGHUVPLQGWRGUDZFRQQHFWLRQV
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.

$UWLFOH'RQW%RUH<RXU9LVLWRU
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:
http://www.bagnewsnotes.com
2. http://www.notcot.org/
3. http://goop.com/


1.

$UWLFOH'RQW0DNH7KHP:DLW
Summary: A webpage loading time should be kept low by
trading off on graphics, images and colour-based objects
DQGFRORXUSDOHWWHFKRLFHVIRUWKHUHDGHUYLHZHUV
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 JRRG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 VFKHPHV.

$UWLFOH'RQW0DNH7KHP:DLW
The layout uses colour blocks and
shapes simple, but still interesting
and requires less loading time

Image: (Webdesigner Depot, 2008)

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)

$UWLFOH'RQW0DNH7KHP:DLW
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 PRUH

+RWHO2[IRUGVZHEVLWHXVHVD
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.
(Hotel-oxford.ro, 2014)

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
YLHZHUVH\HV

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 FRQVLGHUDWLRQ.

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.

Image: (Top Design Magazine, 2011)

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: (Webdesigner Depot, 2008)

Article: Find Out What Colours

&RORXUFKRLFHVKRXOGWDNHLQWRDFFRXQWZKDWLVHDV\RQWKHYLHZHUV
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
IDWLJXHG.

The website uses a lot of bright
FRORXUVWKDWZLOOWLUHWKHYLHZHUV
eyes out it also uses the colours
very messily so readers are too
distracted by the colours
everywhere to read the content.

Image: (Top Design Magazine, 2011)

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
FDWFKHVWKHUHDGHUVDWWHQWLRQDQGWKH
GHVLJQGRHVQRWVWUDLQWKHYLHZHUVH\HV

Image: (Cousins, 2014)

The website uses red, but it uses a less

bold hue and saturation, plus it keeps the
layout simple instead of overloading the
YLHZHUVH\HV7KHWH[WLVDOVRNHSWVKRUW
and easily readable through font and
colour.

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
NQRZZKHUHFDQ,JRIURPKHUH\RXshould put links in FRQWH[W

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.

$QGWKH\GRQWKDYHWREHERULQJRU
follow a linear format always just be
FRQYHQLHQW7KLVZHEVLWHVPHQXEDULV
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 VFKHPH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
$ZHEVLWHVOD\RXWGHVLJQKDVWRVXLWLWVSXUSRVHDQGUHIOHFWWKHPHVVDJH
RUWKHPHLWFRQYH\V3HRSOHZKRYLVLWDJUDSKLFGHVLJQHUVSHUVRQDO
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
V\VWHPVWRHQVXUHLWVXLWVWKHZHEVLWHVSXUSRVH

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.
6LPSOHFRORXUV&,0%VWKHPHFRORXUDQGVKDSHVIRUVHSDUDWHGVHFWLRQV
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.

2.

3.

4.

Commercial (fashion):
http://www.catherinemaland
rino.com/
Commercial (fashion):
http://row.jimmychoo.com/e
n/home
News portal:
http://www.bloomberg.com/
Corporate:
http://www.unilever.com.my

Bad Designs:
1.

2.
3.

Commercial:
http://www.gatesnfences.com
/
Commercial:
http://www.arngren.net/
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

9LHZHUVH\HVDUHPXVFOHVDQGZLOOEHIDWLJXHGLIPDGHWRZRUNWRRKDUG
which leads to viewers moving away from the website. Colours used in
the website design should work well together and should be pleasant to
QRWVWUDLQWKHYLHZHUVH\HV%ULJKWDQGKDUVKFRORXUVVKRXOGEH
avoided.

Colours chosen in the design should serve a purpose. Use bright colours
very sparingly RQO\LI\RXQHHGWRJHWWKHYLHZHUVDWWHQWLRQ5HDGDEOH
content should come in a colour comfortably read. The colour
combinations should also be suitable and not clash with each other.

Pleasant Colour Schemes

0F'RQDOGV0DOD\VLD
,WNHHSVLWVFRORXUVFKHPHVLPSOHEXWGRHVQWPDNHLWGXOO(DFKQHZ
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

%HQV0DOD\VLD

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
1LFROHV&ODVVHV

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].