LAYOUT DESIGN CONCEPT

- 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

CrazyRockets

Lecturer: Ms Ivy Chen

Introduction

• 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 LayoutWebsite SpeedNavigationColour

Interesting Website LayoutDon’t 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 reader’s 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

• It’s 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

WEBSITESPEED

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 2nd website

• But less graphic website like 2nd website, do load faster compare to 1st 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 smallii. Use graphic more, design lessiii.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 Yahoo’s 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 it’s 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 website’s 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.

Bluegg’s 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 Marketing’s 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 Ness’s 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

SUMMARY• 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!

WHO’S 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 doesn’t

need tons of colors to attract

Who are your site’s potential visitors?

What are your products or services?

What are your site’s 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

page’s background and it’s 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.

RED

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

Conclusion

• Website Layouto Simple yet interesting web layout attracts

o Text in web should be concise however informative

• Website Speedo Too much graphic and design would slow down loading of webpage

• Navigationo Easy navigation to explore the web should be easily access

• Colouro 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 2nd 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

9th 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, Don’t 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 2nd 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 5th October 2014, <http://fitzfitzpatrick.com/>

• Visia, 2014, Home Page, Pixelentity, [Online], viewed on 3rd October 2014,

<http://themes.tf/preview/?halfcreative_wp>

END