Grey Flamingos Yeong Xiu Hui (Sara) 0306459 Elisha Yeo Hui Shien 0306637 Ninna Cornelia Geuze 0306167 Omer Anwar 1002K69378 Vincent Choo Chin Yu 0314554 Johann Yong 0312491 Article: Dont Bore Your Visitor Summary: The article emphasizes the balance necessary for a good website: functionality, loading speed, readability, ease of navigation and ability to hold interest.
1. The article draws connections from the way human minds process information, (humans like to relate) to design methods or mechanics (If you would like to separate or close a section off you do not need to totally enclose it ... just need a line or two the viewer figure the rest out).
Article: Dont Bore Your Visitor Simple divider lines are sufficient to separate sections full boxes are unnecessary Just usage of colour differences and sufficient spacing can separate sections Image: (Webdesigner Depot, 2008) Image: (Friedman, 2008) Article: Dont Bore Your Visitor 2. The article says readers are able to draw our own conclusions from pieces of information, (We have the ability to create what is not there in order for us to recognize an object.) and doing so keeps our attention on the website (We like to look at objects and use our mind to make connections. It keeps us interested). Usage of a theme helps engage the readers mind to draw connections between the website (and its message) and your theme, to reinforce your point.
The example on the left (image source: Friedman, 2008) shows a notice that the company is hiring, tacked onto a notice board, so it relates to real life situations where notices are also tacked onto notice boards. Article: Dont Bore Your Visitor 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/
Article: Dont Make Them Wait Summary: A webpage loading time should be kept low by trading off on graphics, images and colour-based objects (and colour palette choices), for the reader/viewers convenience.
1. A good tradeoff between loading speed and eye-catching graphics (For a web page to be successful it needs to download quickly and look good) is to depend on colour schemes instead of images to be interesting (Instead of designing graphics and taking pictures and turning them into jpgs to make your web page look good, try using color schemes).
Article: Dont Make Them Wait The layout uses colour blocks and shapes simple, but still interesting and requires less loading time The layout uses just a few simple images and colours, but is still pleasing to the reader with low loading time Image: (Webdesigner Depot, 2008) Image: (Webdesigner Depot, 2008) Article: Dont Make Them Wait 2. Keep colours simple and use website space efficiently (Use cell colors to make borders. Use the negative space on your web site. What is not there is just as important as what is there. Remember sometimes less is more).
(Hotel-oxford.ro, 2014) Hotel Oxfords website uses a simple, single-page-site layout. The navigation is clear, the borders never change and only the content changes. It keeps its colour scheme small and uses space optimally so visitors do not have to keep reloading pages. Article: Find Out What Colours Summary: Do not overlook the important of colour in layout design. Individual browsers can only load up to 256 colours. Colours used should be in the 216 colour palette browsers have in common. Pay attention to usage of red, yellow and bright colours to prevent wearing out the viewers 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 be chosen after careful consideration). Article: Find Out What Colours While you should keep colours simple, it should still be cohesive and interesting. The example below uses blue and brown colour families but it is plain and boring it also jars horribly due to a bad colour hue combination. The website uses the same colour families at 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 design interesting. Image: (Top Design Magazine, 2011) Image: (Webdesigner Depot, 2008) Article: Find Out What Colours 2. Colour choice should take into account what is easy on the viewers eyes to prevent tiring out the viewer (Do not make large parts of your web site with bright color. It might get your visitors attention but they will either consciously or subconsciously notice their eyes getting fatigued).
Image: (Top Design Magazine, 2011) The website uses a lot of bright colours that will tire the viewers eyes out it also uses the colours very messily so readers are too distracted by the colours everywhere to read the content. Article: Find Out What Colours The website uses yellow only in the banner, whereas the colour of everything else is muted and less strong. The banner catches the readers attention, and the design does not strain the viewers eyes. The website uses red, but it uses a less bold hue and saturation, plus it keeps the layout simple instead of overloading the viewers eyes. The text is also kept short and easily readable through font and colour. Image: (Cousins, 2014) Image: (Friedman, 2008) Article: Navigation Summary: Website navigation should be simple and clear hyperlinks and link titles help when viewers want to move from one section to another. It should still be easy to navigate between main pages without going back to the homepage.
1. Websites should make it easy on viewers to know where they can navigate to from their current page (Your visitor will always want to know where can I go from here you should put links in context). Article: Navigation The very basic of navigation is the inclusion of a menu bar, usually near the top of the page. This website has a rectangle navigation bar to the top left corner. And they dont have to be boring or follow a linear format always just be convenient. This websites menu bar is designed like mini mindmaps. Image: (Cousins, 2014) Image: (Webdesigner Depot, 2008) Article: Navigation 2. Use universal navigation standards to not confuse readers such as colour-coding links (For your navigation to work well you should use blue for unvisited and purple for visited as a color scheme). If a website uses unconventional navigation systems it should have an alternative that people are familiar with. This website has a traditional menu bar at the top, but viewers can also choose to navigate with the colour hexagon buttons to the right. Both systems are fixed and do not change so viewers can choose to browse either way. Image source: (Anet-design.cz, 2014) Article: Navigation Many websites now use less conventional navigation (ie. menu bar). Some websites are no longer vertical but are designed in horizontal layouts, which make it open to creative options.
The websites below have creative and easily understandable navigation systems: 1. http://www.narrowdesign.com/ 2. http://teamviget.com/#!lift-off 3. http://walktalkazores.org/2012/
SO WHAT MAKES A GOOD LAYOUT DESIGN? A list based on the four articles provided. 1. Overall Functionality A websites layout design has to suit its purpose and reflect the message or theme it conveys. People who visit a graphic designers personal portfolio, for example, might be open to unusual layouts and graphics- based content but people who visit an online banking site would prefer clear layouts with easy navigation and more text content (information- based).
Therefore, you have to know what the website is for and plan accordingly the colour schemes, design template and navigation systems to ensure it suits the websites purpose. 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 to banking sites usually are running errands (make payments or online transfers) and do not like having to go through a lot of fuss to do that. A banking site should therefore be simple and easy to use for the best customer service. CIMB Clicks is a good example. Overall Functionality Blog (www.cheeserland.com) 1. Standard blogpage layout, with navigation on the top and sides of the page 2. Simple colours with clear headers to identify different sections 3. Graphics-heavy content
This is a blog website, so the design is more centred towards blog utilities, but it is kept simple as blog posts are usually graphics-heavy and keeping the design simple lessens the loading time. Overall Functionality: Examples Good Designs: 1. Commercial (fashion): http://www.catherinemaland rino.com/ 2. Commercial (fashion): http://row.jimmychoo.com/e n/home 3. News portal: http://www.bloomberg.com/ 4. Corporate: http://www.unilever.com.my
2. Low Loading Time Viewers browsing online will usually be going through multiple websites and do not have the time to wait for each individual one to load. Loading time for a website should be low by keeping the design less heavy, to prevent people from getting impatient and leaving.
A good rule of thumb to keep loading time short is to base website layout designs on smaller colour palettes and use graphics only if absolutely necessary.
The tradeoff between creativity in design and loading time depends on the type of website you are designing, and the purpose it serves to its viewers. Low Loading Time Food Network (www.foodnetwork.com)
This is an information/instructive site so viewers tend to go through multiple pages, articles or links. The design is kept simple so people do not have to wait a long time to load each page. Also, because it relates to food, it has a lot of graphical content which would require a substantial amount of loading time, so the design is also simple to not compete with the content. 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 web designer so he prioritizes the showcase of his talents and abilities over the loading speed 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 likelier more patient and willing to wait for the loading in order to see his capabilities. 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 in the website design should work well together and should be pleasant to not strain the viewers eyes. Bright and harsh colours should be avoided.
Colours chosen in the design should serve a purpose. Use bright colours very sparingly only if you need to get the viewers attention. Readable content should come in a colour comfortably read. The colour combinations should also be suitable and not clash with each other. Pleasant Colour Schemes McDonalds Malaysia It keeps its colour scheme simple but doesnt make it dull. Each new entry in the featured section has its own small coloured banner, which helps make the website look livelier even with only a red and grey colour scheme. Pleasant Colour Schemes Bens Malaysia
The website uses a slideshow of monotone photographs for its background so that takes up most of the bandwidth, but they keep everything else simple, and each new sitepage loads a small section in the middle. The colour scheme is also simple, black, white and grey. The tradeoff here was to focus on the backgrounds and give less loading time to other design aspects but it is still pleasant despite being limited. Pleasant Colour Schemes Lee Flower
Even though they kept it simple, it is not pleasant to the eye. The website looks dull and slightly unorganized because of the haphazardly chosen colours and the lack of a unifying theme or identifiable colour scheme. 4. Understandable Navigation If people do not know how to get to where they want, they will be frustrated and move away. To make sure viewers are able to navigate happily, the navigation system should be simple and clear. It should not be too difficult or too complicated, and it should follow some common standards to make sure viewers understand its meaning.
Designers can use hyperlinks and title links to help viewers navigate the website more easily. If a website has a very unconventional navigation system, then an alterative, more universally identifiable one can be included so viewers will not be too confused. Understandable Navigation HNY, Hoe & Yin design studio
Navigation bars do not always have to be in the same position, but they have to be easily found on the website. This one places the navigation bar in a corner but it is still prominent and viewers will notice it, without it drawing attention away from everything else.
Understandable Navigation Nicoles Classes
The website has clear navigation bars at the header and footer of the website. The slideshow banners and featured columns are also easily recognizable and can be used to navigate. Understandable Navigation Atlanta Restaurant Club
This website has a lot of links at the sidebar and in each post but everything is so packed in together, and formatted in multiple different ways that viewers would find it difficult to identify the links they wish to click. Therefore, the navigation is confusing and viewers will not want to browse further, which defeats the purpose of a website promoting restaurants. References Anet-design.cz, (2014). Anet design :: Bodypainting a facepainting. [online] Available at: http://www.anet-design.cz/ [Accessed 4 Oct. 2014]. Cousins, C. (2014). E-Commerce Website Design: 10 Interesting 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] Smashing Magazine. Available at: http://www.smashingmagazine.com/2008/09/03/40- creative-design-layouts-getting-out-of-the-box/ [Accessed 4 Oct. 2014].
References Hotel-oxford.ro, (2014). Oxford Hotel Timisoara: Oferta Cazare 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 Design Magazine - Web Design and Digital Content. [online] Available at: http://www.topdesignmag.com/20-examples-of-bad-web- design/ [Accessed 4 Oct. 2014]. Webdesigner Depot, (2008). 100 Websites With Outstanding Artistic Design. [online] Available at: http://www.webdesignerdepot.com/2008/12/100-websites- with-outstanding-artistic-design/ [Accessed 4 Oct. 2014].