Interactive MediaGroup Assignment

Critique on Various Sites

Group: Ong Jou Ee (0313648) – group leaderLeong Ka Sinn (0303003)

Michelle Thomas (0304670)Ariel Cheong (0309594)Freda Tan Ern Wei (0309982)

The Creartive Team

The world is changing all around us. Information technology has transformed society and we live in a digital age of fast-paced consumerism, instantaneous gratification, unlimited infotainment and borderless communication.

We are – Creartive, a group of keen media students who acknowledge the potential of a well-designed website for the purpose of creating and engaging the online community. Through this review, we hope to develop a comprehensive report that will be able to aid us in the development of our website. Beyond that, we hope to take away from this exercise, essential skills that will broaden our knowledge and skillset as we pursue our respective majors.

Introduction

Web Design is an art that goes beyond art. What separates design from art is that design is meant to be functional. It involves the design of information, products and services over the Internet. It is an expression of organized art, customized to fulfill needs and achieve objectives.

“Design is a key determinant to building online trust with consumers. For motivated users of an information site, bad design (busy layout, small print, too much text) hurts more than good design helps.”—Sillence, Briggs, Fishwick, and Harris, 2004.

Given how important it is then to identify and understand what differentiates good from bad, a detailed research into important aspects of Web Design is necessary.

Overview

In attempting to identify fundamental essentials for what makes a good website layout design concept, we conducted an online research.

Our research involves a qualitative content analysis of four articles that address a particular component involved in Web Design. Each article is then reviewed and critiqued to achieve the purpose of identifying a set of criteria necessary for a successful website.

In order to further understand and highlight these aspects, we took a look at various existing websites to obtain visual examples (both negative and positive) of these criteria to support our report.

Our article reviews are as follows:

Article 1 – Find out what colors will cause your visitors to hate you

Colours are very important for Web Design. Colors are one of the nonverbal communications (Bear, n.d.). In this day and age of borderless, unceasing marketing, websites

are an essential platform for companies to maximize their reach to customers. However, mere textual information is not enough to engage and maintain user attention. Hence, colors are integral to ensuring a website is sophisticated and functionally attractive. (Martinovic, n.d.).

In the know about colours:

Web Safe Colours

Website or web browsers can only view 216 colors out of the 256 basic colors

Appearance of colours varies according to the browser that is used.

Colours are selected by a mathematical formula made up of the digit zero with other hex digits that are the multiples of 3 For example: 3, 6, 9, C (12) and F (15) they must also be in equal pairs (Merttol.com, n.d.)

Web Safe Colours

Example

• Color Code: #336699. • Web safe color • the digits are identically paired • all the multiples of 3

• Color Code: #C6C6C6• Not Web safe color• Not identically paired although they are

multiples of 3

Colour Psychology

o Different colors have different meanings

o Also a type of language that can express our emotions (Martinovic, n.d.)

Examplelove / passion / danger / anger / warning / excitement / food / adventure calmness / trustworthiness / success / professionalismnature / animals / money / health / life / harmony / healingcomfort / creativity / youth / affordability / celebration royalty / justice / luxury / fantasy / dreams

innocence / pure / cleanliness

earth / nature / simplicity

mysterious / darkness / seriousness

(Martinovic, n.d.)

Colour Combinations

Colors must be selected wisely to make a website more appealing

It is recommended to use 3 to 5 (at most) colours in a webpage. Wrong combinations/usage of colors for websites may create

dissonance or negative feelings in users.(Hornor, 2013).

Examples of Wrong Colour Combinations

Green, Yellow and/or Purple on a Green background

(Hornor, 2013)

Light colours on a white background – hard to read, reduced visibility.

(Hornor, 2013)

Light colour text on multicolour textured background

(Hornor, 2013)

Examples of Websites with Good Usage of Colours

(Muller, 2011)

Examples of Websites with Bad Usage of Colours

(Davlin, 2013)

Article 2 –Don’t Make Them Wait

Overview Users are unable to load a webpage full of jingles and

animations, due to slow internet download speed. If user waits for more than 10 seconds, It is likely they will exit

the website. Use only 216, solid colours on a webpage. All graphics should be kept small, only 4K to 6K. Smaller images are better because they load faster.

Critique of Several Websites

Used more than 216 colours According to Lieberman (2012), 65% of the

population are visual learners and prefer looking at images rather than reading a lot of text

There are too many things going on at the same time, animations are happening all over the place

Owoh (n.d) stated that 99% of website users do not fancy background music, especially on every page

(Valentine L, 2004)

(Primark, 2013)

(BonFX, 2009)

(Aforadio, 2013)

Article 3 – Navigation

Navigation buttons plays a vital role in a web page. “Without navigation, websites can appear unstructured and unorganised.” (Optimus01, 2013).

The Internet is an endless sinkhole of information. Disorganised websites that are not systematic and categorical are a huge deterrent to users who need to locate and identify specific information.

Navigation is about functionality and accessibility. It addresses how easy it is for people to take action and move around your website.

In today’s fast-paced world, Internet users no longer have the patience to trawl every inch of a website. Instead, they want clear, direct access to the content they are looking for.

Disorganized websites with poor navigation will most likely result in frustrated and impatient users exiting their website in less than a minute.

Examples of Websites with Good Navigation

Good comprehensive list on available products, services, company information and contact.

Information is divided into categories and sub-categories

(McDonalds.com.my, 2014)

Shows are organized according to (i) popularity, (ii) alphabetical order for easy navigation.

Visual buttons also aid in identification

(Foodnetwork.com, 2014)

Recipes are differentiated according to the festivities that they are usually cooked for – this allows users to identify which recipes are appropriate for the respective holiday.

Good navigation is helpful and informational in its usage of categories, to users.

(Food.com, 2014)

NO’vigation

This website has no further navigation and has incomplete landing pages.

(Zappos, 2014)

Article 4 –Don’t Bore Your Visitors

A good website should keep the viewer interested and engaged.

Thus, it needs A natural flow to it

The viewer’s eyes should be able to follow the website in order of Left to Right, Top to Bottom. Content should be organised according to categories in a systematic manner that relates.

To be simple without being simplistic, compact but not crowded. Basic elements with an attractive main component to grab attention.

Examples of Websites with Good Layouts That Attract

o Both of these websites used a javascript masthead for their gallery of highlighted images to show the viewers what their website all about.

o Images are in HD quality and help direct viewer’s attention to the main subject.

(Camille Co, 2014) (Lam, 2014)

o Layout of the website has videos, photo gallery, and articles all on the topic of fitness and health. All in which creates the illusion that if we follow those videos and read those articles, we would achieve the desired body image.

(Shape, 2014)

o The very small fonts makes it difficult for viewers to read especially with a black background.

(Occultopedia, 2014)

Examples of Disengaging Websites

o Random images and an uninteresting mosaic graphic background, gives a perception of a messy, confusing clutter.

References

Bear, JH n.d., Color Symbolism, about technology, viewed 8th October 2014, <http://desktoppub.about.com/cs/color/a/symbolism.htm>.

Davlin, A 2013, Color Combinations from Hell – Death Sentence for Your Designs, DesignWebKit, viewed 8th October 2014, <http://designwebkit.com/web-and-trends/color-combinations-hell-death-sentence-designs/>.

Hornor, T 2013, 10 Troublesome Colors to Avoid In Your Advertising, sitepoint, viewed 8th October 2014, <http://www.sitepoint.com/10-troublesome-colors-to-avoid-in-your-advertising/>.

Martinovic, A n.d., Color Psychology in Online Marketing, 2 Create a Website, viewed 8th October 2014, <http://www.2createawebsite.com/design/color-psychology.html >.

Merttol.com 2009, Understanding Web Safe Colors, viewed 8th October 2014, <http://www.merttol.com/articles/web/understanding-web-safe-colors.html >.

Muller, G 2011, 25 Examples of Perfect Color Combinations in Web Design, Codrops, viewed 8th October 2014, <http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/>.

Gube, Jacob., 2011, 7 Best Practices for improving Your Website’s Usability, Mashable. Available at: <http://mashable.com/2011/09/12/website-usability-tips/>, Viewed on 8th October 2014.

Lieberman, M., 2012, How Important Are Images In Your Website Design, Square2Marketing, Availabe at: <http://www.square2marketing.com/blog/bid/121405/How-Important-Are-Images-In-Your-Website-Design >, Viewed on 8th October 2014.

Owoh, B, n.d, 11 Common Web Design Mistakes (Blunders), Hongkiat.com. Available at: <http://www.hongkiat.com/blog/11-common-mistakes-blunders-in-web-design/>, Viewed on 9th October 2014.

Valentine, L., 2004, Car Leasing-Contract Hire- Cheap Lease Cars, LingsCars.com, Available at: < http://www.lingscars.com/ >, Viewed on 9th Octobr 2014.

Primark, 2014. Available at: < http://www.primark.com/en/primania>, Viewed on 10th October 2014.

BonFx, 2009. Available at: < http://www.bonfx.com/index2.html>, Viewed on 10th October 2014.

Aforadio, 2013. Available at: < http://aforadio.com/> , Viewed on 10th October 2014. Optimus01, (2013). Importance Of Website Navigation. [online] Available at:

http://www.optimus01.co.za/importance-of-website-navigation/ [Accessed 8 Oct. 2014]. Food.com, (2014). Food.com - Thousands Of Free Recipes From Home Chefs With

Recipe Ratings, Reviews And Tips. [online] Available at: http://www.food.com/ [Accessed 10 Oct. 2014].

Foodnetwork.com, (2014). Food Network - Easy Recipes, Healthy Eating Ideas and Chef Recipe Videos. [online] Available at: http://www.foodnetwork.com/ [Accessed 10 Oct. 2014].

Mcdonalds.com.my, (2014). I'm lovin' it! McDonald's® Malaysia | Home. [online] Available at: http://www.mcdonalds.com.my/ [Accessed 10 Oct. 2014].

Zappos.com, (2014). Shoes, Shipped Free | Zappos.com. [online] Available at: http://www.zappos.com/shoes [Accessed 10 Oct. 2014].

Camille Co (2014) Camille Tries To Blog, Available at: http://itscamilleco.com/ (Accessed: 7 October 2014).

Gerald Lam (2014) Xerixe Photography, Available at: http://xerixe.com/ (Accessed: 7 October 2014).

Shape (2014) Shape Magazine, Available at: http://shape.com/ (Accessed: 7 October 2014).

Occultopedia (2014) The Occult And Unexplained Online Encyclopedia, Available at: http://occultopedia.com/ (Accessed: 7 October 2014)

Angelic Pretty (2014) Angelic Pretty, Available at: http://angelicpretty.com/en/ (Accessed: 7 October 2014)