- Wong Chin Hui 0307877 (Leader)

- Lok Ly-Sha 0307964

- Kuan Jie Yi 0308246
- Kristine Goh Junyi 0314697
- Chan Jia-Qi Janice 0307993
BMC 2314: Interactive Media
Lecturer: Ms Ivy Chen
In this slides, an overview of building a webpage
layout design is being studied supported by
opinions
Focus of the important criteria in designing a
webpage
Interesting Layout
Website Speed
Navigation
Colour

Dont bore your readers
Use an interesting layout for your website
A simple yet interesting website will
create great interest for the viewers.

An informative and easy to read
website to engage the readers
attention
The content must be relevant to the niche, business, or company that it's being written
about (The Huffington Post, 2014)

Agree
From Harbeck, 2012
Studies show that people read information
differently on the web than they do in print.
o For example, website users only tend to read small amounts of
information at a time, and they are less likely to read all of the
information especially if the information is poorly organized
or if there is too much text on a page.
Users are less likely to read information that
they must scroll down to find. (Harbeck, 2012)


From Huffington Post,
2014
The content should provide valuable and
useful information to the reader. It should
teach them at least one or two things or
answer at least one question they have.
This can be adjusted depending on where
the content will be published
o such as a blog, website, add or social media) and
what the main purpose of the content is.
You have to keep in mind that real people
are reading this content, so it has to be
interesting; the content needs to catch
and keep their attention from the title to
the last period

The content must be relevant to the niche,
business, or company that it's being
written about
Examples Of
Interesting Website
Layouts
Screen Shots
Of
Interesting
Content
Websites
Source from The Huffington Post, 2014
Source from Harbeck, 2012
Its a simple website as it is easy to access.
Easier for readers to read
Not messy
Straight to the point
Picture from Hongkiat, 2014
Simple design
Captures attention of the readers easily

Picture from Brown, 2014
Summary of Article
Web designer put top-notch graphics and sound into
their web page
Only 216 colours can be seen through the screen that
is between 15 and 19 inches wide
And most of the viewers view the screen at the
inches wide, can only download at 28.8 kb per
second
Size of the page should be cut down, if viewers need
to wait for the page to fully downloaded
We agree with the article that website speed is
much more important then those fancy images and
sound.
No matter how great the web design, impatient
visitors will not wait around for slow-loading pages
Website Speed
Compare
This website:
Ellecta Interactive, 2010
Versus
This website:
Rochester Institute of Technology, 2011
Which attracts?

And

Which loads faster?
In terms of visual, 1st website is more visualize
compare to 2
nd
website


But less graphic website like 2
nd
website, do
load faster compare to 1
st
website

We know that effective web pages have to
look great, and images play a huge role in
that.

We also know that images play an equally big
role in degrading performance.

As you increase the number and size of
images on your pages, load time uniformly
increases (Pinto, 2013)

Some facts
With the amount of content out there on the web,
a page or site that loads slowly is going to have
fewer visitors than one that loads quickly (Kyrnin,
2014).
47% of consumers expect a web page to load in 2
seconds or less, said Sean Work, Minister of
Propaganda, KISSmetrics (Neeley, 2012).
Therefore, loading speed is very important for web
sites.
Common Causes
Of A Slow Website
Large volume of unoptimized Images

Too Much Fancy Flash

External Media Usage
And so, here is some tips to speed up your website!
To speed up the website
i. Web images should be small
ii. Use graphic more, design less
iii. Use special effects sparingly
Web Images should be... SMALL
Web images take up the majority of the
download time in most web pages.
But if you optimize your web images you will
have a faster loading website.
The one way that will improve your speed the
most is by making your graphics as small as
possible (Kyrnin, 2014)

Picture from Visia, 2014
For example:
As mention from the article, web page should be no
larger than 50K and not lesser than 30K.
The number one visited web site home page is
under 21k.
Example given is Yahoos home page which is 20K
More Design

Less Graphic
Instead of one long page.
The more you separate your content the faster it will
download.
Picture from Half Creative, 2014
Use Special Effects Sparingly
Make sure that the site needs the effect you want

Put important ones only.
If extra graphics can sell them, keep it, if not, delete it!
Picture from Half Creative, 2014
Ways To Get
Small Size Images
Using the right format
Image dimensions
Color of images
Using The Right Format
GIF
JPEG
For flat color
images.
Images with just a
few colors
For photographic
images.
Images with millions of
colors.
PNG
Good for both flat color
and photographic
images
Transparent background
There are only three image formats for the web: GIF, JPG, and PNG
Image Dimensions
Most cameras take photos that are way
bigger than the average web page can
display.
By changing the dimensions to
somewhere around 500 x 500 pixels or
smaller, you will create a smaller image

Color of Images
216 is the number of colors you have on a
web safe color pallet.
Use solid colors when designing your
image.
The more color you have in an image the
bigger its going to be.

For
example
This website consists of more colors for the image, therefore,
the image size is bigger
Picture from Ellecta Interactive, 2014
However
This website consists of less color for the image, therefore, the size of the
image is smaller
Picture from Rochester Institute of Technology
Therefore,
a web page to be successful it
needs to download quickly and
look good.
WHAT IS
NAVIGATION

Ease of navigation is
one of the biggest keys
to the usability of a
website. If visitors can
easily find what they
are looking for they will
be more likely to stay
on the website rather
than leaving and
going to another site.
Navigation is the way
to guide users through
a website, so that they
know how much
content is available
and exactly where to
find what they are
looking for.




WHERE AM I?

WHERE CAN I GO FROM HERE?

WHERE WAS I ALREADY?
Your websites navigation should answer the
following questions :

WHERE
AM
I?
Should a visitor randomly arrive at your
website, it should let them know exactly
what website they are at, and what they
are reading.

The name and logo of the company should
consistently be at the top / top left of every
page in the website, and link the user back
to the homepage.

Websites should always include a search bar.

Some sites use a breadcrumb trail near the
top of the page that usually looks a bit like
this:
Home >Products >Women > Bottoms >
Skirts





no second guessing.

Blueggs browser title states exactly what the company is ; a
website design, branding and design agency in Cardiff.
The title / logo is consistently placed at the top of every page
and a single click will bring you back to the main page.


WHERE AM I
Picture from Bluegg, 2014
Another way to ensure the user knows where they are
is by highlighting the icons in a darker color as an
indication for the currently opened subpage, as
shown by Bloom Search Marketings website.
WHERE AM I
Picture from Bloom Search Marketing, 2014
75B s website, while innovative in their use of icons
instead of words, is confusing because while mousing
over one icon, the user might have forgotten what the
other icons are for.



WHERE AM I
Picture from 75B
WHERE
CAN
I
GO
FROM
HERE?

People leave websites that they cannot
navigate. Thus, your website should be
understandable, clear and intuitive and
utilize the three click rule.
Site navigation should appear in the same
location on every page of a site. This will
enable users to get used to a site and feel
comfortable browsing it. If navigation were
to jump from the top to the left, disappear, or
change colors from section to section,
frustrated visitors are more likely to go
elsewhere.
Links must be labeled smartly and tell the
user where it's going without the user
having to open the link to find out. Also,
users should be able to get where they
intend to go in two or three clicks.

be creative, but
organized.


Naks navigation is clear, concise, and the menu bar
consistently sits by the left hand side no matter what page
you are at.

WHERE CAN I GO FROM HERE
Picture from Naks Food, 2014
However, Larissa Nesss website has too many navigation
buttons. A long list of options is messy, unnecessary and
confusing. Aim for a maximum of 7. Sub-pages should be
grouped under related titles, and social media links can be
included as icons.

WHERE CAN I GO FROM HERE
Picture from Ness, 2011
Eurofurniture uses drop-down navigation, which shows lower levels
of the classification when the mouse rolls over a particular link.
Similar items can be grouped into a list of hyperlinks to show they
have a relationship. This allows the reader to navigate further into the
website if they wish, without being messy and intrusive.
WHERE CAN I GO FROM HERE
Picture from Euro Furniture
WHERE
WAS
I
AL-
READY?

It is helpful to let users know what they
have already read instead of having
them to open and check each page
over and over again. That way, they can
spend more time on the things that
matter.

Visited links should be highlighted in a
different color, or underlined (since some
web users are colorblind) after being
opened.


Avoid making pages too deep and hard to
find. Users may lose interest if they find it
difficult to find what they were looking
for.
have I been here
before?

A very prominent example of using highlights to
distinguish visited websites is Google. By doing
this, users can save time instead of re-clicking
links.
WHERE WAS I ALREADY
Color should be one of your first concerns
when it comes time to starting your web site
design.

You should always use a browser safe color
when using solid color as a design element.

You should NEVER irritate the visitor with bright
colors.
Agree?
OF COURSE!
WHOS ABLE TO STARE AT
THIS??
Picture from Accept Jesus, Forever Forgiven
Or these?
Picture from Cheesies, 1999-2012
Picture from Burnsed C 1995-2009
Picture from Penny Juice
These websites used lots and
lots of colors, causing it to hurt
the audiences eyes!
How about now?
Picture from Eric, 2010
Picture from Speed Motion, 2006-2014
This website, only used a few
colors. Therefore, making the
audiences eyes feel
comfortable
Lets take a look
at a few more

eye soothing

webpages..
Picture from Paraguay, 2011
Picture from Thomas Fritzpatrick,
2014
Picture from These Are Things
Picture from Activate Media, 2014
As you can see,
a website
doesnt
need tons of
colors to attract

Who are your sites potential
visitors?
What are your products or
services?
What are your sites key
objectives?
(Pallasart Web Design, 1996-2014)
Before selecting colors, we
ask the following questions:
A good number of designers
recommend using only 3 main
colors on your website. (Bowers,
2011)
Create a strong contrast between a
pages background and its text. (Avangate, 2004-2014)
Picture from Massimiliano, 2013
Understand the meaning
behind different colors
RED: Energy, passion, excitement, power
Blue: Depression, spirituality, freedom, loyalty
orange: Friendliness, warmth, playfulness
BLACK: Power, elegance, secrecy, mystery
(Avangate, 2004-2014)
Less well-known businesses should carefully
consider the colors they choose for their logos and
website.

Certain colors work well with specific types
if businesses.
(Pallasart web design, 1996-2014)
For Business Websites
For Example,..
Warm colors like , , and work
well for food sites and restaurants that offer spicy fare.
RE
D
YELLOW ORANGE
(Pallasart web design, 1996-2014)
Picture from Chillis, 2013
Cream, white and dark brown can be used
successfully on websites that sells chocolate.
(Pallasart web design, 1996-2014)
Picture from Dove Chocolate, 2014
Cool colors like and
complement outdoor products, airlines, medical
services, law firms and intellectual content.
BLUE GREEN
(Pallasart web design, 1996-2014)
Picture from M&M Outdoor Product, 2010
Website Layout
o Simple yet interesting web layout attracts
o Text in web should be concise however informative
Website Speed
o Too much graphic and design would slow down loading of webpage
Navigation
o Easy navigation to explore the web should be easily access
Colour
o Too much colour would affect negatively on the web, keep colours to the
theme
o Readable colours are important especially for text
Simplicity is the key to
sophistication
REFERENCES
75B, [ONLINE], viewed 9th October 2014, < http://www.75b.nl/>
Accept Jesus, Forever Forgiven, [ONLINE], viewed 8th October 2014, < http://www.dokimos.org/ajff/>
Activate Media, 2014, Activate Media United Kingdom, [ONLINE], viewed on 8th October 2014,
<http://activatemedia.co.uk/>
Avangate, 2004-2014, Choosing the Right Colors for your Web Site, [Online], viewed 1st October 2014, <
http://www.avangate.com/avangate-resources/article/color-web-site.htm >
Bloom Search Marketing, 2014, Montreal, [ONLINE], viewed 9th October 2014, <http://www.makeitbloom.com/>
Bluegg, 2014, Bluegg, United Kingdom [ONLINE], viewed 8th October 2014, <http://www.bluegg.co.uk/>
Bowers, T 2011, How to choose a great color scheme for your website, [Online], viewed 2nd October 2014, <
http://premium.wpmudev.org/blog/choose-color-scheme-your-website/ >
Brown, D 2014, The Experience, [Online], viewed on 1th October 2014,
<http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/derren.jpg>
Burnsed, C 1995-2009, The Ultimate '80s Songs, [ONLINE], viewed 8th October 2014,
<http://www.ultimate80ssongs.com/index.html>
Cheesies, M 1999-2012, Mama's Cheesies Handmade Clothing & Accesory, Dynamic Drive United States, [ONLINE],
viewed 8th October 2014, < http://mamascheesies.com/>
Chillis, 2013, T.A.S Publisher, Malaysia, [ONLINE] , viewed 2
nd
October 2014, <http://chillis.com.my>
Dove Chocolate, 2014, Dove Chocolate, Mars, [ONLINE], viewed 8th October 2014, <http://www.dovechocolate.com/>
Ellecta Interactive, 2010, Home Page, [Online], viewed 1st October 2014, <http://www.ellectainteractive.com/#/home>
Eric, C 2010, All Around DJ, [ONLINE], viewed 8th October 2014, <http://www.djericc.nl/>
Euro Furniture, [ONLINE], viewed 9th October, < http://www.eurofurniture.com/>
Half Creative, 2014, Home Page, Pixelentity, [Online], viewed on 3rd October 2014,
<http://themes.tf/preview/?halfcreative_wp>
Harbeck D 2012, How to Make a Website Interesting and Easy to Read-Site Pro News, Jayde Online, [ONLINE], viewed 9
th

October 2014, <http://www.sitepronews.com/2012/04/18/how-to-make-a-website-interesting-and-easy-to-read/>
Hongkiat, 2014, The Noodle box, [Online], viewed 10th October 2014, Available at: < http://media02.hongkiat.com/designing-
restaurant-websites/10-the-noodle-box-restaurant-website.jpg >
Kyrnin, J 2014, Dont Use Nested Tables, About.com, [Online], viewed on 4th October 2014, <
http://webdesign.about.com/od/speed/a/dont-use-nested-tables.htm>
M&M Outdoor Products, 2010, New Berlin, [ONLINE], viewed on 2
nd
October 2014
<http://mmoutdoorproducts.com/home.aspx>
Massimiliano, B 2013, Barni Design, [Online], viewed 3rd October 2014, <http://www.barnidesign.it/>
Naks Food, 2014, Big Red Dog, [ONLINE], viewed 9th October 2014, <http://naksfood.com/\>
Neeley, J 2012, Five Ways to Speed-up Your Website, Hosting Services, Inc. Midphase, UK2 Group, [Online], viewed on 5th
October 2014, < http://www.midphase.com/blog/five-ways-to-speed-up-your-website/ >
Ness, L 2011, Larrisa Ness, [ONLINE], viewed 9th October 2014, < http://larissaness.com/>



Pallasart, 1996-2014, Website Design, Web Marketing, & Technical Tips make your site a success, [Online], viewed 2nd
October 2014, <http://www.pallasweb.com/color.html>
Paraguay, A 2011, Melonfree, [ONLINE], viewed 8th October 2014, <http://melonfree.com/>
Penny Juice, [ONLINE], viewed on 8th October 2014, <http://www.pennyjuice.com/htmlversion/whoispj.htm\>
Pinto, A 2013, Why Your Website Is Slow: Image Performance, Yotta, [Online], viewed on 4th October 2014, <
http://www.yottaa.com/blog/bid/293406/Why-Your-Website-Is-Slow-Image-Performance>
Rochester Institute of Technology, 2011, Visual Communication Design at RIT, Rochester Institue of Technology,
[Online], viewed on 3rd October 2014, <http://computergraphics.rit.edu/>
Speed Motion, 2006-2014, [ONLINE], viewed 8th October 2014, <http://speed-motion.com.ua/>
The Huffington Post, 2014, Informative, Interesting, Relevant: Three Rules for Creating Quality Content in Digital
Marketing, [ONLINE], viewed 1th October 2014, <http://www.huffingtonpost.com/roger-bryan/informative-
interesting-r_b_4914330.html>
These Are Things, [ONLINE], viewed 8th October 2014, http://www.thesearethings.com/
Thomas Fritzpatrick, 2014, [ONLINE], viewed 5
th
October 2014, <http://fitzfitzpatrick.com/>
Visia, 2014, Home Page, Pixelentity, [Online], viewed on 3rd October 2014,
<http://themes.tf/preview/?halfcreative_wp>

END