interactive media assignment 2 group : can go

65
INTERACTIVE MEDIA ASSIGNMENT 2 GROUP : Can Go Leader: Rhyz bin Ruslan 0310444 Members: Norman Iskandar bin Shaipudin Shah 0308645 Natalie Loo Pei Shen 0310100 Nicole Levins 0314998 Ma Graciella Ysabella Padilla Juson 0306378

Upload: minerva-crane

Post on 31-Dec-2015

17 views

Category:

Documents


2 download

DESCRIPTION

INTERACTIVE MEDIA ASSIGNMENT 2 GROUP : Can Go. Leader: Rhyz bin Ruslan 0310444 Members: Norman Iskandar bin Shaipudin Shah 0308645 Natalie Loo Pei Shen 0310100 Nicole Levins 0314998 Ma Graciella Ysabella Padilla Juson 0306378. TOPIC :. - PowerPoint PPT Presentation

TRANSCRIPT

Topic:

INTERACTIVE MEDIAASSIGNMENT 2GROUP : Can GoLeader: Rhyz bin Ruslan0310444Members:Norman Iskandar bin Shaipudin Shah 0308645Natalie Loo Pei Shen0310100Nicole Levins0314998Ma Graciella Ysabella Padilla Juson 0306378TOPIC:Keeping the Viewers InterestedPoints Highlighted in the Articleshould have a natural flow

should not be confusing

should not be simplepeople equate a simple site design equals to a small company

should be functionalloads fastertext and navigation are straight to the pointAnalysisNatural FlowA website with a natural flow is a lifesaver as it does not require a lot of time to think of what links link to what. A website that has a natural flow will most likely be easier to browse around as it does not have over the top features, headers, sub headers, link and so on that may result in confusion amongst the viewers.

The picture on the right is an example of a website that does not have a natural flow (SOLVM, 2014).

ConfusionWebsites that are confusing, will only result in the viewer to close their browser as they do not have time for that. According to the website, SOLVN, viewers equate confusing websites to an unorganized and ignorant business. A site is confusing when there are more links then it should initially have (Schroder, 2013).

An example of a confusing website would be: http://www.loobiecore.com/.

Not Too SimpleBased on a case study one by Google in the year 2012, researchers found that websites that are filled with images and colours (NOT SIMPLE) are rated as less beautiful compared to websites thats just the right amount of simple (Tuch et al., 2012).

I strongly agree with this as websites that are overfilled with images, fancy texts and colours only overwhelms the mind, thus not enjoying it. Websites that are basic-simple, are easier to navigate and is easy on the eyes as it less congested and messy.

Example: (Not Simple VS Simple Website) Not Too Simple

FunctionalNot only must your website be well designed, but it should also be functional in a way that it will not take forever to load due to the resolutions used in images. Besides that, a website is not functional with navigation buttons that are not straightforward. Even though, it is the 21st century, there are still people that are not tech-savy and a web designer should always have that in mind. According to HubspotThese websites are considered the top 3 websites that are well designed and functional.

FordSonyAppleFordIt gives the buyer a feeling like as if he/she was in the showroom as the homepage allows the buyer to choose the car there and then without any hassle.

SonySony is well designed and functional because its navigation was made easy for the visitors as their products are sorted in the most logical categorization way possible. Besides that, their navigation button has a drop-down menu.

AppleApples homepage makes it easier for the visitors select their desired products and find out more about it. It also includes high resolution graphics of the products.

In a NutshellWebsites should always be simple no matter how bizarre your business is (Hongkiat.com, (n.d).). In order for visitors to be interested, always make sure the website is functional, has a natural flow and most importantly make sure it is not confusing (Schroder, 2013).Topic:Dont Make Them WaitContent of the article - keep the web page size under 50K

- graphic images should be as small as possible

- 216 colors on the web safe pallet

- Use more design and less graphic

- reduce the loading time for the web pageAnalysis16Size of websites Websites have a longer loading time as compared to the years before this due to the increase in size and complexity (Gesenheus, 2013)

For example, retail websites that are saturated with images often have a longer loading rate. In fact, load times for the top U.S. retail website are 22% slower than in December 2011, according to a recent report published by Radware (Gesenheus, 2013). The ideal 3 second load time is not being applied now (Gesenheus, 2013)17Colours It is imperative to maintain within the web safe colours to prevent any dithered and inconsistency on the web page (Priester, 2013) An example of discrepancy is when the colour gray is shown on a Windows monitor, the colour pale yellow might appear on a Macintosh browser (Priester, 2013)

18 Large images and poorly-written page (code, not the text) contribute to the loading time (Spector, 2013)

I do agree with the article as a website that takes a long time to load is very frustrating and it is proven that those websites will lose its audience due to the load time factor.

According to surveys done by Akamai and Gomez.com, nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isnt loaded within 3 seconds (Jacob, 2011)19

Below is the slowest website according to Internet Supervision

20According to marketingland.com, the fastest websites are :

CVS.com

Polo.com

eCrater.com21CVS.com

22Polo.com

23eCrater.com

24TOPICThe Importance of Color251) Always use a browser safe color when using solid color as a design element.

2) Colors should be ones concern when it comes time to begin your site plan

3) Web browsers can only see 256 colors.

4) Use yellow color sparingly in your web site itself.AnalysisUse a browser safe color when using solid color as a design elementMany web designers overlook the importance of choosing a safe color when designing a web site. It should be one of your first concerns when it comes to start your web site design. If you don't pay close attention to the colors you chose, your site will end up either plain and boring or so messy it's hard to look at. The color you use should only be chosen after careful consideration. (Webdesignct.com, 2014)Colors used to begin a site map- Color use is often consistent across different types of maps by different cartographers or publishers. Site map colors are always consistent on a single map.- Colors are normally used in relation to a certain sections in a site map.- Exp: if its a website for guys, you wouldnt find the color pink in itWeb browsers can only be seen in 216 colors Web Safe, or Browser Safe palettes, consist of 216 colors that display solid, non-dithered, and consistent on any computer monitor, or web browser, capable of displaying at least 8-bit color (256 colors). The reason why this palette contains only 216 colors, instead of the maximum 256 colors, is that only 216 out of the basic 256 colors will display exactly the same on all computers. (Htmlgoodies.com, 2014)Use yellow in your web site- Yellow can definitely be harsh on the eyes, but when correctly used, it can convey different ideas. One of which is the warmth. Sunny, tropical, and bright, yellow brings instant pop to a site or logo. (Sprout New Media, 2013)

- Yellow doesnt usually stand up well on its own, and needs contrasting colors to be effective. Yellow on red can illustrate an joyful feel, or create an edgy look thats perfect for some artists and designers.

- Exp: Macdonals, and Shell

WEBSITESExample of websites that use suitable colors to attract the attention of customers

1) Victorias Secret2) Kiehls3) Chris Dyson Architects

Victorias Secret

Victorias SecretThe shades utilized for this site is a fabulous decision as it is truly eye catching. The color's utilized are splendid and brilliant which permit's kin to perceive fun, lively and dynamic in young adults to purchase their beauty products and lingerie. Particularly the last picture which says " Pink Collegiate Collection ", are apparel wear for college students. This is a decent picture and the color contrast used will likewise give college students the feeling of excitement and confidence for college. Kiehls

KiehlsThe official Kiehls website has also another brilliant idea in designing and choosing their colors used for their website. They have an image of a skeleton dressed as a laboratory scientist which portrays that majority of their beauty products are fresh, healthy and studied well in the science lab before selling their products. They have a dull foundation utilized for their site with beautiful drawings and pictures on it which is additionally exceptionally eye catching to individuals who view their site. This will help in pulling in individuals to buy their products.Chris Dyson Architect

Chris Dyson ArchitectThe " Chris Dyson Architects " site utilizes splendid, straight forward and suitable colors to outline their page with pictures of a home decorated and furnished perfectly with sketches hanging on the wall. There are less colors utilized on this site as the web planners objective is to portray an extravagant and exquisite home dcor. This is one splendid thought for individuals, particularly individuals of the higher class to contract Chris Dyson as their Architect. NavigationTopicPoints that has been discussed in this article:Importance of answering the question

Where am IWhere can I go from here?Where was I already?The article claims:It is important to put links in contextIt is important to use link titlesIt is important guests knows where they are at all timesThe color of the unvisited links should be blue and change to purple when visitedAnalysisIt gives the visitors an insight on where the link will take themThis next slide shows a clear example of a web site in context with the linkThe resource links in the small boxes on the left bottom side of the screenshot was included with a brief description of what the link leads toThis is good because visitors can get an insight on what the website is about and they can choose to press or not to press on the link1. It is important to put links in context

(The Smart Passive Income Blog, 2014)2. It is important to use link titlesAccording to Ann Smarty on How to Use Link TITLE Attribute Correctly, link titles should:Be used for your users, not search engines (this approach always pays back);Not be duplicated with link text (this hurts usability: for example some blind users will hear the same text twice);Not have too much weight on the title attributes as not all screen readers may render it (make sure either surrounding text or anchor text explains the link at least the first time you use it).

3. It is important visitors knows where they are at all timesQuestion: What would make it obvious to the visitors where they are?

Answer: a very clear and simple design of websitethe website's dropdown is well placed

(Frost*collective, 2014)

(Vandelaydesign.com, 2014)

An example of when guests do not know where they areThe next few slides are screenshots of websites which are very confusing and does not inform visitors where they areTherefore it shows how navigation is an important part of building a website.

Welcome Page

(Soulbath.com, 2014)2nd Page

(Soulbath.com, 2014)By this point guests would already be confused and stop browsing through

(Soulbath.com, 2014)4. The color of the unvisited links should be blue and change to purple when visitedI disagree that there needs to be different colours for a person to know whether they have visited a page/link or not as you can see from Salted Herring's website, whichever page you are on, you will see the title highlighted therefore it shows where you are and the colour is white not blue

(Saltedherring.com, 2014)ReferencesFrost*collective, (2014).What we do - Frost*collective. [online] Available at: http://www.frostcollective.com.au/what-we-do/ [Accessed 2 Oct. 2014].Saltedherring.com, (2014).Our Work - engaging your audience - brand development. [online] Available at: http://www.saltedherring.com/work/category/brand-development [Accessed 2 Oct. 2014].Smarty, A. (2014).How to Use Link TITLE Attribute Correctly - Search Engine Journal. [online] Search Engine Journal. Available at: http://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/ [Accessed 2 Oct. 2014].Soulbath.com, (2014).soulbath. [online] Available at: http://www.soulbath.com/intro.html [Accessed 2 Oct. 2014].The Smart Passive Income Blog, (2014).Resources. [online] Available at: http://www.smartpassiveincome.com/resources/ [Accessed 2 Oct. 2014].Vandelaydesign.com, (2014).Vandelay Design. [online] Available at: http://vandelaydesign.com/ [Accessed 2 Oct. 2014].

ReferencesBlog.hubspot.com, (2014). 10 Brands With Website Designs That Nail Both Form AND Function. [online] Available at: http://blog.hubspot.com/blog/tabid/6307/bid/33367/10-Brands-With-Website-Designs-That-Nail-Both-Form-AND-Function.aspx [Accessed 3 Oct. 2014].

Hongkiat.com, (n.d.). 11 Common Web Design Mistakes (Blunders). [online] Available at: http://www.hongkiat.com/blog/11-common-mistakes-blunders-in-web-design/ [Accessed 3 Oct. 2014].

Schroder, K. (2013). 7 Signs Your Site is Confusing - Coaching Sites That Work. [online] Coaching Sites That Work. Available at: http://www.coachingsitesthatwork.com/7-signs-your-site-is-confusing/ [Accessed 3 Oct. 2014].

Loobiecore.com, (2014). lou barlow's vast and confusing website. [online] Available at: http://www.loobiecore.com/ [Accessed 3 Oct. 2014].

Tuch, A., Presslaber, E., Stcklin, M., Opwis, K. and Bargas-Avila, J. (2012). The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments. 1st ed. [ebook] Switzerland: Google. Available at: http://static.googleusercontent.com/external_content/untrusted_dlcp/research.google.com/en/us/pubs/archive/38315.pdf [Accessed 3 Oct. 2014].

Referenceslingcar-homepage. (n.d.). [image] Available at: https://blog.kissmetrics.com/wp-content/uploads/2012/11/lingcar-homepage.jpg [Accessed 3 Oct. 2014].

Before and After. (n.d.). [image] Available at: http://execmediaassets.s3.amazonaws.com/emails/websiteredesign/beforeandafter.jpg [Accessed 3 Oct. 2014].

Apple, (n.d.). Apple Homepage. [image] Available at: https://cdn.tutsplus.com/webdesign/uploads/legacy/119_AppleDesignInfluence/apple-homepage.png [Accessed 3 Oct. 2014].

Ford, (2010). Ford Homepage. [image] Available at: http://www.youngmanblog.com/wp-content/uploads/2010/06/wall1.jpg [Accessed 3 Oct. 2014].

SOLVM, (2014). Is Your Website Dressed for Success. [image] Available at: http://www.google.com.my/imgres?imgurl=http%3A%2F%2Fsolvm.com%2Fwp-content%2Fuploads%2F2011%2F05%2Fconfusing.jpg&imgrefurl=http%3A%2F%2Fsolvm.com%2Fis-your-website-dressed-for-success%2F&h=964&w=1247&tbnid=GSFMZMw6cwTreM%3A&zoom=1&docid=LlnvHc83YcZutM&ei=m6UuVK7oEcagugTm_4KADw&tbm=isch&ved=0CB0QMygBMAE&iact=rc&uact=3&dur=588&page=1&start=0&ndsp=21 [Accessed 3 Oct. 2014].

ReferencesNetdna, (2014). Paypal. [image] Available at: http://netdna.webdesignerdepot.com/uploads/2014/06/paypal.jpg [Accessed 3 Oct. 2014].

Webeminence, (2011). Simple Website. [image] Available at: http://webeminence.com/wp-content/uploads/2011/10/simple-website.jpg [Accessed 3 Oct. 2014].

Sony, (n.d.). Sony Homempage. [image] Available at: http://cdn2.hubspot.net/hub/53/file-23151752-png/blog/images/sony2.png?t=1412347387047 [Accessed 3 Oct. 2014].

ReferencesCVS, (n.d).CVS Homepage. [image] Available at: http://www.cvs.com/ [Accessed 3 Oct. 2014]

eCrater, (n.d). eCrater Homepage. [image] Available at: http://www.ecrater.com/ [Accessed 3 Oct. 2014]

First Person Medical, (n.d). First Person Medical Homepage. [image] Available at: http://www.firstpersonmedical.com/ [Accessed 3 Oct. 2014]

Gesenheus, A. (2013). Top Retail Websites Not Getting Faster: Average Load Time Is 7.25 Seconds. [online] Marketing Land. Available at: http://marketingland.com/retail-website-load-times-continue-to-decline-with-a-22-decrease-during-the-last-year-37604 [Accessed 3 Oct. 2014]

Jacob, S. (2011). Speed Is A Killer - Why Decreasing Page Load Time Can Drastically Increase Conversion. [online] KISSmetrics. Available at: https://blog.kissmetrics.com/speed-is-a-killer/ [Accessed 3 Oct.2014]

61ReferencesPolo, (n.d). Polo Homepage. [image] Available at: http://www.ralphlauren.com/home/index.jsp?utm_source=redirect&utm_medium=polo [Accessed 3 Oct. 2014]

Priester, G. (2013) Consistent Colors For Your Site - All You Need To Know About Web Safe Colors. [online] HTMLGoodies. Available at: http://www.htmlgoodies.com/tutorials/web_graphics/consistent-colors-for-your-site-all-you-need-to-know-about-web-safe-colors.html [Accessed 3 Oct. 2014]

Spector, L. (2013) Why Some Websites Are Much Slower Than Others. [online] PCWorld. Available at: http://www.pcworld.com/article/2038500/why-some-web-sites-are-much-slower-than-others.html [Accessed 3 Oct. 2014]

62Reference ListVictorias Secret, (2014). Victorias Secret: The Sexiest Bras, Lingerie & Womens Fashion. [online] Available at: https://www.victoriassecret.com/ [Accessed 4 Oct. 2014].

Kiehls.com, (2014). Kiehls Since 1851 Skin Care, Men, Hair, Gifts & More. [online] Available at: http://www.kiehls.com/on/demandware.store/Sites-kiehls_us-Site/default/Home-Global?noRedirect=True [Accessed 4 Oct. 2014]

Chrisdyson.co.uk, (2014). Home. [online] Available at: http://www.chrisdyson.co.uk/ [Acceseed 4 Oct. 2014]Reference List- Htmlgoodies.com, (2014).Consistent Colors For Your Site - All You Need To Know About Web Safe Colors. [online]

- Rosenberg, M. (2014).Why Are There Different Colors on Maps?. [online] About. Available at: http://geography.about.com/od/understandmaps/a/mapcolors.htm [Accessed 4 Oct. 2014].

- Sprout New Media, (2013).Color Guide: Using Yellow for your website - Sprout New Media. [online] Available at: http://sproutnewmedia.com/color-guide-using-yellow-for-your-website/ [Accessed 4 Oct. 2014].

-Webdesignct.com, (2014).Your Choice Of Website Color - WDCT. [online] Available at: http://www.webdesignct.com/designarticles/yourchoiceofwebsitecolor.htm [Accessed 4 Oct. 2014].