IM A2 Research Design Report

8/10/2019 IM A2 Research Design Report

1/34


2/34

Article: Dont Bore Your Visitor

Summary: The article emphasizes the balance necessary fora good website: functionality, loading speed, readability,

ease of navigation and ability to hold interest.

1. The article draws connections from the way human minds processinformation, (humans like to relate) to design methods or mechanics(If you would like to separate or close a section off you do not needto totally enclose it ... just need a line or two the viewer figure the

rest out).


3/34


Simple divider lines aresufficient to separate sections

full boxes are unnecessary

Just usage of colour differencesand sufficient spacing can separate

sections

Image: (Webdesigner Depot, 2008) Image: (Friedman, 2008)


4/34


2. The article says readers are able to draw our own conclusions frompieces of information, (We have the ability to create what is not therein order for us to recognize an object.) and doing so keeps ourattention on the website (We like to look at objects and use our mindto make connections. It keeps us interested).

Usage of a theme helps engage thereaders mind to draw connectionsbetween the website (and its message)and your theme, to reinforce yourpoint.

The example on the left (image source:Friedman, 2008) shows a notice thatthe company is hiring, tacked onto anotice board, so it relates to real lifesituations where notices are also tackedonto notice boards.


5/34


3. All the characteristics necessary:

Functionality comes first before design creativity

Loading time should be low

Text should be easily readable Navigation should be simple and uncomplicated

Overall design should have the ability to keep readers interested

Sample websites with some or all of the above characteristics:

1. http://www.bagnewsnotes.com

2. http://www.notcot.org/

3. http://goop.com/
http://www.bagnewsnotes.com/http://www.notcot.org/http://goop.com/http://goop.com/http://goop.com/http://www.notcot.org/http://www.notcot.org/http://www.notcot.org/http://www.bagnewsnotes.com/http://www.bagnewsnotes.com/http://www.bagnewsnotes.com/


6/34


7/34

Article: Dont Make Them Wait

The layout uses colour blocks andshapes simple, but still interesting

and requires less loading time

The layout uses just a few simpleimages and colours, but is still pleasing

to the reader with low loading time

Image: (Webdesigner Depot, 2008) Image: (Webdesigner Depot, 2008)


8/34

Article: Dont Make Them Wait

2. Keep colours simple and use website space efficiently (Use cellcolors to make borders. Use the negative space on your web site. Whatis not there is just as important as what is there. Remembersometimes less is more).

(Hotel-oxford.ro, 2014)

Hotel Oxfords website uses asimple, single-page-site layout.The navigation is clear, theborders never change and only

the content changes. It keeps itscolour scheme small and usesspace optimally so visitors do nothave to keep reloading pages.


9/34

Article: Find Out What Colours

Summary: Do not overlook the important of colour inlayout design. Individual browsers can only load up to 256colours. Colours used should be in the 216 colour palettebrowsers have in common. Pay attention to usage of red,

yellow and bright colours to prevent wearing out theviewers eyes.

1. Colours need to be chosen carefully in a layout design. It should not

appear either plain or chaotic (The color you use should only bechosen after careful consideration).


10/34


While you should keep colours simple, itshould still be cohesive and interesting.The example below uses blue and browncolour families but it is plain and boringit also jars horribly due to a bad colourhue combination.

The website uses the same colour familiesat the one on the left, but it is a lot better.The colour hues are more pleasant to the

viewer, and it manages to keep the designinteresting.

Image: (Top Design Magazine, 2011) Image: (Webdesigner Depot, 2008)


11/34


2. Colour choice should take into account what is easy on the viewerseyes to prevent tiring out the viewer (Do not make large parts of yourweb site with bright color. It might get your visitors attention but theywill either consciously or subconsciously notice their eyes gettingfatigued).

Image: (Top Design Magazine, 2011)

The website uses a lot of brightcolours that will tire the viewerseyes out it also uses the colours

very messily so readers are toodistracted by the colourseverywhere to read the content.


12/34


The website uses yellow only in thebanner, whereas the colour of everythingelse is muted and less strong. The bannercatches the readers attention, and thedesign does not strain the viewers eyes.

The website uses red, but it uses a lessbold hue and saturation, plus it keeps thelayout simple instead of overloading theviewers eyes. The text is also kept shortand easily readable through font andcolour.

Image: (Cousins, 2014) Image: (Friedman, 2008)


13/34

Article: Navigation

Summary: Website navigation should be simple and clear hyperlinks and link titles help when viewers want to movefrom one section to another. It should still be easy tonavigate between main pages without going back to the

homepage.

1. Websites should make it easy on viewers to know where they cannavigate to from their current page (Your visitor will always want to

know where can I go from here you should put links in context).


14/34

Article: Navigation

The very basic of navigation is theinclusion of a menu bar, usually near thetop of the page. This website has arectangle navigation bar to the top leftcorner.

And they dont have to be boring orfollow a linear format always just beconvenient. This websites menu bar isdesigned like mini mindmaps.

Image: (Cousins, 2014)

Image: (Webdesigner Depot, 2008)


15/34

Article: Navigation

2. Use universal navigation standards to not confuse readers such ascolour-coding links (For your navigation to work well you should useblue for unvisited and purple for visited as a color scheme). If awebsite uses unconventional navigation systems it should have analternative that people are familiar with.

This website has a traditional menubar at the top, but viewers can alsochoose to navigate with the colourhexagon buttons to the right. Both

systems are fixed and do not changeso viewers can choose to browseeither way.

Image source: (Anet-design.cz, 2014)


16/34

Article: Navigation

Many websites now use less conventional navigation (ie. menu bar).Some websites are no longer vertical but are designed in horizontallayouts, which make it open to creative options.

The websites below have creative and easily understandable navigationsystems:

1. http://www.narrowdesign.com/

2. http://teamviget.com/#!lift-off

3. http://walktalkazores.org/2012/
http://www.narrowdesign.com/http://teamviget.com/#!lift-offhttp://walktalkazores.org/2012/http://walktalkazores.org/2012/http://walktalkazores.org/2012/http://teamviget.com/#!lift-offhttp://teamviget.com/#!lift-offhttp://teamviget.com/#!lift-offhttp://teamviget.com/#!lift-offhttp://www.narrowdesign.com/http://www.narrowdesign.com/http://www.narrowdesign.com/


17/34

SO WHAT MAKES A GOODLAYOUT DESIGN?A list based on the four articles provided.


18/34

1. Overall Functionality

A websites layout design has to suit its purpose and reflect the messageor theme it conveys. People who visit a graphic designers personalportfolio, for example, might be open to unusual layouts and graphics-based content but people who visit an online banking site would preferclear layouts with easy navigation and more text content (information-

based).

Therefore, you have to know what the website is for and planaccordingly the colour schemes, design template and navigationsystems to ensure it suits the websites purpose.


19/34

1. Overall Functionality

CIMB Clicks (Banking)

1. Clean and simple layout design that loads fast

2. Clear navigation menu and options to optimize experience

3. Simple colours (CIMBs theme colour) and shapes for separated sections

People who go tobanking sites usuallyare running errands(make payments oronline transfers) anddo not like having to

go through a lot offuss to do that. Abanking site shouldtherefore be simpleand easy to use for thebest customer service.CIMB Clicks is a good

example.


20/34

Overall Functionality

Blog (www.cheeserland.com)

1. Standard blogpage layout, withnavigation on the top and sides of thepage

2. Simple colours with clear headers to

identify different sections3. Graphics-heavy content

This is a blog website, so the design ismore centred towards blog utilities, but itis kept simple as blog posts are usually

graphics-heavy and keeping the designsimple lessens the loading time.


21/34

Overall Functionality: Examples

Good Designs:

1. Commercial (fashion):http://www.catherinemalandrino.com/

2. Commercial (fashion):http://row.jimmychoo.com/en/home

3. News portal:http://www.bloomberg.com/

4. Corporate:http://www.unilever.com.my

Bad Designs:

1. Commercial:http://www.gatesnfences.com/

2. Commercial:http://www.arngren.net/

3. Corporate:http://www.mrbottles.com/
http://www.catherinemalandrino.com/http://www.catherinemalandrino.com/http://row.jimmychoo.com/en/homehttp://row.jimmychoo.com/en/homehttp://www.bloomberg.com/http://www.unilever.com.my/http://www.gatesnfences.com/http://www.gatesnfences.com/http://www.arngren.net/http://www.mrbottles.com/http://www.mrbottles.com/http://www.mrbottles.com/http://www.arngren.net/http://www.arngren.net/http://www.gatesnfences.com/http://www.gatesnfences.com/http://www.unilever.com.my/http://www.unilever.com.my/http://www.bloomberg.com/http://www.bloomberg.com/http://row.jimmychoo.com/en/homehttp://row.jimmychoo.com/en/homehttp://row.jimmychoo.com/en/homehttp://www.catherinemalandrino.com/http://www.catherinemalandrino.com/http://www.catherinemalandrino.com/


22/34

2. Low Loading Time

Viewers browsing online will usually be going through multiplewebsites and do not have the time to wait for each individual one toload. Loading time for a website should be low by keeping the designless heavy, to prevent people from getting impatient and leaving.

A good rule of thumb to keep loading time short is to base websitelayout designs on smaller colour palettes and use graphics only ifabsolutely necessary.

The tradeoff between creativity in design and loading time depends onthe type of website you are designing, and the purpose it serves to itsviewers.


23/34

Low Loading Time

Food Network (www.foodnetwork.com)

This is an information/instructive siteso viewers tend to go through multiplepages, articles or links. The design iskept simple so people do not have towait a long time to load each page. Also,because it relates to food, it has a lot ofgraphical content which would requirea substantial amount of loading time, sothe design is also simple to not competewith the content.
http://www.foodnetwork.com/http://www.foodnetwork.com/


24/34

Low Loading Time

Kilfish Web Designer (http://www.kilfish.com/v6/#/home)

This is a personal promotional website and portfolio, and the subject is a webdesigner so he prioritizes the showcase of his talents and abilities over the loadingspeed of the website. His design is unique and has 2 navigation methods, and his

content is very media-heavy, but people looking for web designers are likeliermore patient and willing to wait for the loading in order to see his capabilities.
http://www.kilfish.com/v6/#/homehttp://www.kilfish.com/v6/#/homehttp://www.kilfish.com/v6/#/home


25/34

3. Pleasant Colour Schemes

Viewers eyes are muscles and will be fatigued if made to work too hard,which leads to viewers moving away from the website. Colours used inthe website design should work well together and should be pleasant tonot strain the viewers eyes. Bright and harsh colours should beavoided.

Colours chosen in the design should serve a purpose. Use bright coloursvery sparingly only if you need to get the viewers attention. Readablecontent should come in a colour comfortably read. The colourcombinations should also be suitable and not clash with each other.


26/34

Pleasant Colour Schemes

McDonalds Malaysia

It keeps its colour scheme simple but doesnt make it dull. Each newentry in the featured section has its own small coloured banner, whichhelps make the website look livelier even with only a red and grey

colour scheme.


27/34


Bens Malaysia

The website uses a slideshow ofmonotone photographs for its

background so that takes up mostof the bandwidth, but they keepeverything else simple, and eachnew sitepage loads a small sectionin the middle. The colour scheme

is also simple, black, white andgrey. The tradeoff here was tofocus on the backgrounds andgive less loading time to otherdesign aspects but it is stillpleasant despite being limited.


28/34


Lee Flower

Even though they kept it simple, itis not pleasant to the eye. The

website looks dull and slightlyunorganized because of thehaphazardly chosen colours andthe lack of a unifying theme oridentifiable colour scheme.


29/34

4. Understandable Navigation

If people do not know how to get to where they want, they will befrustrated and move away. To make sure viewers are able to navigatehappily, the navigation system should be simple and clear. It should notbe too difficult or too complicated, and it should follow some commonstandards to make sure viewers understand its meaning.

Designers can use hyperlinks and title links to help viewers navigate thewebsite more easily. If a website has a very unconventional navigationsystem, then an alterative, more universally identifiable one can beincluded so viewers will not be too confused.


30/34

Understandable Navigation

HNY, Hoe & Yin design studio

Navigation bars do not alwayshave to be in the same

position, but they have to beeasily found on the website.This one places the navigationbar in a corner but it is stillprominent and viewers will

notice it, without it drawingattention away fromeverything else.


31/34


Nicoles Classes

The website has clear navigationbars at the header and footer of

the website. The slideshowbanners and featured columns arealso easily recognizable and canbe used to navigate.


32/34


Atlanta Restaurant Club

This website has a lot of links atthe sidebar and in each post but

everything is so packed intogether, and formatted inmultiple different ways thatviewers would find it difficult toidentify the links they wish to

click. Therefore, the navigation isconfusing and viewers will notwant to browse further, whichdefeats the purpose of a websitepromoting restaurants.


33/34

References

Anet-design.cz, (2014).Anet design :: Bodypainting afacepainting. [online] Available at: http://www.anet-design.cz/[Accessed 4 Oct. 2014].

Cousins, C. (2014).E-Commerce Website Design: 10Interesting Examples | Design Shack. [online]Designshack.net. Available at:http://designshack.net/articles/inspiration/e-commerce-website-design-10-interesting-examples/ [Accessed 4 Oct.2014].

Friedman, V. (2008). 40 Creative Design Layouts: Getting Out

Of The Box - Smashing Magazine. [online] SmashingMagazine. Available at:http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/ [Accessed 4Oct. 2014].


34/34

References

Hotel-oxford.ro, (2014). Oxford Hotel Timisoara: OfertaCazare Timisoara, Hoteluri in Timisoara 3 Stele+. [online]Available at: http://www.hotel-oxford.ro/cazare-hotel-timisoara.htm [Accessed 4 Oct. 2014].

Top Design Magazine - Web Design and Digital Content,(2011). 20 Examples Of Bad Web Design - Top DesignMagazine - Web Design and Digital Content. [online] Availableat: http://www.topdesignmag.com/20-examples-of-bad-web-design/ [Accessed 4 Oct. 2014].

Webdesigner Depot, (2008). 100 Websites With OutstandingArtistic Design. [online] Available at:http://www.webdesignerdepot.com/2008/12/100-websites-with-outstanding-artistic-design/ [Accessed 4 Oct. 2014].

IM A2 Research Design Report

Documents