BMC 2314 Interactive Media LAYOUT DESIGN CONCEPT Crazy

BMC 2314: Interactive Media LAYOUT DESIGN CONCEPT Crazy Rockets - Wong Chin Hui 0307877 (Leader) Lok Ly-Sha 0307964 Kuan Jie Yi 0308246 Kristine Goh Junyi 0314697 Chan Jia-Qi Janice 0307993 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 Layout ØWebsite Speed ØNavigation ØColour

Interesting Website Layout Don’t bore your readers Use an interesting layout for your website

üAgree • 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)

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

Picture from Hongkiat, 2014 • • It’s a simple website as it is easy to access. Easier for readers to read Not messy Straight to the point

Picture from Brown, 2014 • • Simple design Captures attention of the readers easily

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, 1 st 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)

For example: Picture from Visia, 2014

• As mention from the article, web page should be no larger than 50 K and not lesser than 30 K. • The number one visited web site home page is under 21 k. • Example given is Yahoo’s home page which is 20 K

þ More Design Less Graphic

Picture from Half Creative, 2014 • Instead of one long page. • The more you separate your content the faster it will download.

Use Special Effects Sparingly • Make sure that the site needs the effect you want Picture from Half Creative, 2014 • Put important ones only. • If extra graphics can sell them, keep it, if not, delete it!

Ways To Get Small Size Images • Using the right format • Image dimensions • Color of images

Using The Right Format There are only three image formats for the web: GIF, JPG, and PNG JPEG PNG For photographic images. • Images with millions of colors. • Good for both flat color and photographic images • Transparent background GIF • For flat color images. • Images with just a few colors •

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.

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

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 Ease of navigation is one are looking for. 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.

Your website’s navigation should answer the following questions : v WHERE AM I? v WHERE CAN I GO FROM HERE? v WHERE WAS I ALREADY?

Should a visitor randomly arrive at your website, it should let them know exactly what website they are at, and what they are reading. WHERE AM I? …no second guessing. • 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

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. Picture from Bluegg, 2014 WHERE AM I

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. Picture from Bloom Search Marketing, 2014 WHERE AM I

75 B ’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. Picture from 75 B WHERE AM I

WHERE

Naks’ navigation is clear, concise, and the menu bar consistently sits by the left hand side no matter what page you are at. Picture from Naks Food, 2014 WHERE CAN I GO FROM HERE

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. Picture from Ness, 2011 WHERE CAN I GO FROM HERE

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. Picture from Euro Furniture WHERE CAN I GO FROM HERE

WHERE WAS I ALREADY? …have I been here before? 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.

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

Before selecting colors, we ask the following questions: 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)

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)

For Business Websites 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 Example, . . Warm colors like RED , YELLOW , and ORANGE work well for food sites and restaurants that offer spicy fare. (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 BLUE and GREEN complement outdoor products, airlines, medical services, law firms and intellectual content. (Pallasart web design, 1996 -2014) Picture from M&M Outdoor Product, 2010

Conclusion • Simplicity is the key to sophistication 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 theme o Readable colours are important especially for text

REFERENCES

• 75 B, [ONLINE], viewed 9 th October 2014, < http: //www. 75 b. nl/> • Accept Jesus, Forever Forgiven, [ONLINE], viewed 8 th October 2014, < http: //www. dokimos. org/ajff/> • Activate Media, 2014, Activate Media United Kingdom, [ONLINE], viewed on 8 th October 2014, <http: //activatemedia. co. uk/> • Avangate, 2004 -2014, Choosing the Right Colors for your Web Site, [Online], viewed 1 st October 2014, < http: //www. avangate. com/avangate-resources/article/color-web-site. htm > • Bloom Search Marketing, 2014, Montreal, [ONLINE], viewed 9 th October 2014, <http: //www. makeitbloom. com/> • Bluegg, 2014, Bluegg, United Kingdom [ONLINE], viewed 8 th October 2014, <http: //www. bluegg. co. uk/> • Bowers, T 2011, How to choose a great color scheme for your website, [Online], viewed 2 nd October 2014, < http: //premium. wpmudev. org/blog/choose-color-scheme-your-website/ > • Brown, D 2014, The Experience, [Online], viewed on 1 th October 2014, <http: //media. creativebloq. futurecdn. net/sites/creativebloq. com/files/images/2012/11/derren. jpg> • Burnsed, C 1995 -2009, The Ultimate '80 s Songs, [ONLINE], viewed 8 th October 2014, <http: //www. ultimate 80 ssongs. com/index. html> • Cheesies, M 1999 -2012, Mama's Cheesies Handmade Clothing & Accesory, Dynamic Drive United States, [ONLINE], viewed 8 th 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 8 th October 2014, <http: //www. dovechocolate. com/> • Ellecta Interactive, 2010, Home Page, [Online], viewed 1 st October 2014, <http: //www. ellectainteractive. com/#/home> • Eric, C 2010, All Around DJ, [ONLINE], viewed 8 th October 2014, <http: //www. djericc. nl/> • Euro Furniture, [ONLINE], viewed 9 th October, < http: //www. eurofurniture. com/> • Half Creative, 2014, Home Page, Pixelentity, [Online], viewed on 3 rd 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 10 th October 2014, Available at: < http: //media 02. hongkiat. com/designingrestaurant-websites/10 -the-noodle-box-restaurant-website. jpg > • Kyrnin, J 2014, Don’t Use Nested Tables, About. com, [Online], viewed on 4 th 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 3 rd October 2014, <http: //www. barnidesign. it/> • Naks Food, 2014, Big Red Dog, [ONLINE], viewed 9 th October 2014, <http: //naksfood. com/> • Neeley, J 2012, Five Ways to Speed-up Your Website, Hosting Services, Inc. Midphase, UK 2 Group, [Online], viewed on 5 th October 2014, < http: //www. midphase. com/blog/five-ways-to-speed-up-your-website/ > • Ness, L 2011, Larrisa Ness, [ONLINE], viewed 9 th October 2014, < http: //larissaness. com/>

• Pallasart, 1996 -2014, Website Design, Web Marketing, & Technical Tips make your site a success, [Online], viewed 2 nd October 2014, <http: //www. pallasweb. com/color. html> • Paraguay, A 2011, Melonfree, [ONLINE], viewed 8 th October 2014, <http: //melonfree. com/> • Penny Juice, [ONLINE], viewed on 8 th October 2014, <http: //www. pennyjuice. com/htmlversion/whoispj. htm> • Pinto, A 2013, Why Your Website Is Slow: Image Performance, Yotta, [Online], viewed on 4 th 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 3 rd October 2014, <http: //computergraphics. rit. edu/> • Speed Motion, 2006 -2014, [ONLINE], viewed 8 th 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 1 th October 2014, <http: //www. huffingtonpost. com/roger-bryan/informativeinteresting-r_b_4914330. html> • These Are Things, [ONLINE], viewed 8 th October 2014, http: //www. thesearethings. com/ • Thomas Fritzpatrick, 2014, [ONLINE], viewed 5 th October 2014, <http: //fitzpatrick. com/> • Visia, 2014, Home Page, Pixelentity, [Online], viewed on 3 rd October 2014, <http: //themes. tf/preview/? halfcreative_wp>

E ND