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