Lu Siew Tein (0320166) Teh Xin Yie (0319236) Soon Ka Shin (0320034) De Kids Assignment 2: Research Design Report Research Topic : Layout Design Concept Find Out What Colours Will Cause Your Visitors to Hate You Article: Direction of this article: 2 topics 1) 216 Colors Palette
2) Website Colors When designing key elements in your web site you should stay within the 216-color pallet. We agree with this statement as after research it states that if you designing colors for your website which is outside 216 colors pallet and someone who using 256 colors pallet and comes to your site, they will find a lot display problems. The graphic will look speckled because other nearby colors dithered the graphics. 216 colors pallet is to ensure all computers or laptops would display colors correctly. 216 Colors Palette Red color box and Blue color box are colors within the 216 colors palette. Purple color box is the color that outside the 216 color palette and you can see the dithered on Purple color box. Example: 216 Colors Palette This article says about colours should be the first concerns when designing a web site. We agree with this statement as color of one web site is really important to keep your visitors stay at your site and continue to view your web site. Website Colours The color you use on header of your website, headlines and sub-headlines, text, and background color of your website and so forth have the psychological impact on your visitors. Colours can be used as an expression To choose best color of your website, it is important to understand color psychology and the subconscious and subliminal effect of colors on emotions so that you can capture the attention of your visitors and potential customer. Website Colours For example, black and white represent professional, seriousness. If your website is for business purpose using black and white color can be one of your choices to choose for your website to show your business is professional and trusted. Visitors who view your website will find your business serious and professional. They will trust your company more than other colorful company websites. Choose colors according to what the meanings or feel of your site you want your potential visitor to have or according to your company objectives, products or services. Different colors associated with different meanings Colours can be used as an expression Website Colours List of colors meanings and psychological emotions RED- get attention, danger, warning, excitement, food, adventure BLUE- trustworthiness, success, seriousness, calmness GREEN- balancing, nature, health, life, harmony ORANGE- creativity, fun, youth, affordability WHITE- innocence, purity, cleanliness, simplicity PURPLE- royalty, justice, inventive, uncertainty, luxury, fantasy, dreams YELLOW- curiosity, playfulness, cheerfulness PINK- romantic, sweetness, innocence, youthfulness, tenderness BROWN- comfort, nature, dependability, friendliness, simplicity GREY- neutrality, indifference, reserved BLACK- seriousness, professional, darkness, mystery, secrecy Colours can be used as an expression Website Colours Too much bright colors in a website lead your visitors to leave your website quickly as it is difficult for your visitors to read and very distracting and painful to your visitors eyes. Bright color might be used when you want to focus on something or gain your visitors attention such as advertise something or sales, etc. Not using too much bright.. Website Colours Color of text on website must be always readable for your visitors. It must be easy to read and the color of text must not let visitors eyes fatigue such as red and yellow colors. Color of Text must be readable Website Colours - Used colors within 216 palette - Not too much on bright colors - Choose colors theme according to your potential visitors, company objectives, site key objectives, products and services of company - Colors of text must be easy to read - Simple & Neat Good Bad - Used colors outside 216 palette - A lot bright colors - Randomly choose colors (eg. colorful website, wrong combined colors) - Text using color that hard to read - Complicated & Messy Example of GOOD Websites on Great Color Schemes spektrummedia.com secretkey.it hyundai-veloster.eu dokimos.org rogerart.com mamascheesies.com Example of Bad Websites on Worst Color Schemes References Colorcombos.com, (2014). Bright Colors - Website Basics. [online] Available at: http://www.colorcombos.com/bright-colors- article.html [Accessed 8 Oct. 2014].
Irby, L. (2014). Choosing Colors For Your Website Design. [online] 2createawebsite.com. Available at: http://www.2createawebsite.com/design/color-psychology.html [Accessed 8 Oct. 2014].
Msdn.microsoft.com, (2014). The Safety Palette. [online] Available at: http://msdn.microsoft.com/en- us/library/bb250466(v=vs.85).aspx [Accessed 8 Oct. 2014].
Pallasweb.com, (2014). How to make effective use of color in websites. [online] Available at: http://www.pallasweb.com/color.html [Accessed 8 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 8 Oct. 2014].
Francis, C. and Francis, C. (2014). 40 Stunning Website Designs with Great Color Schemes. [online] Onextrapixel.com. Available at: http://www.onextrapixel.com/2013/10/25/40-stunning-website-designs-with-great-color-schemes/ [Accessed 10 Oct. 2014].
SitePoint, (2000). The 216-Color Webmaster Palette. [online] Available at: http://www.sitepoint.com/color-webmaster- palette/ [Accessed 8 Oct. 2014].
Francis, C. and Francis, C. (2014). 40 Stunning Website Designs with Great Color Schemes. [online] Onextrapixel.com. Available at: http://www.onextrapixel.com/2013/10/25/40-stunning-website-designs-with-great-color-schemes/ [Accessed 10 Oct. 2014]. Navigation Easy navigation around a website is of the up-most importance when designing a website I agree with this statement that navigation is the best understood as the method in which you explore and move around the website. It is a very important function that enables viewer to access your site from pages other than home page. It is also easier to find information in the website they are searching for.
Simple Navigation As a general rule, simple navigation is best and not need multiple clicks. For example, less clutter in terms of menu structures, calls to action and design allows anyone to find their way speedily. Visitors will lose interest if they have to put in too much effort when comes to moving through your site to get their desired information. A website should be well organized with navigation People cant automatically understand how our site is organized and where they should click to get where they want to go. Navigation is a way of organizing our site. For example, by making good use of primary navigation, secondary navigation, menus, and internal linking, you can create a user experience that is likely to keep people interested and loyal to our website. Consistency of Navigation Consistency is rather important because visitors will get confused if there are different changes on every web page and would seek a simpler website that gives the required information. A consistency navigation allows user to find their way around, or back to where they have already been if they wish. Put Home Page Navigation Button Home page icon must be included in website every page so that visitor can go back to the home page when desired. Website design is fun but should be done with these steps in mind for good navigation. Emphasize on certain Navigation There are several navigation is important to emphasizes on such as Contact, Home Page and also back button if necessary. Contact is important because it allows visitors who are interested in their services or product to connect the company itself. Letting readers know where they are Navigation should give readers a clear and clear hint of what page of the website they are on. Imagine you are on holiday and you are looking at a map in a town square. If the map is well designed, one of the most prominent features will tell you - "You are here."
For example As you can see CNNs website, the masthead in bold capitals, the word "ENTERTAINMENT describes the page the reader is on, should be a different design form the other classifications in the navigation. Good example of Navigation Bad example of Navigation References http://blog.etech7.com/blog/bid/142508/Website-Design-The-Importance-Of-Good-Navigation
Dont Bore Your Visitors Keep Them Thinking Direction of this article: 2 topics 2. Attractive and Interactivity 1. Design Layout Design Layout We agree with this statement as to draw viewers attention, the first impression are important role due to it is the key crucial to keep your viewer to continue look on it before they being interrupt into other content of website. A good website design layout should keep the viewers interested Design Layout We agree a web site design should be simplicity and not to confuse the viewers. The viewer tend to look for website is simple and classy. For example, they tend to ignore a long web page and rather click than scroll the website. In the website design layout should focus on the important things that we want to convey.
A picture can speak a thousand words, and using a correct image for your website could assist with the brand positioning and stay interact with your target consumer.
Make use of original information and images will make a website look more credible and provides an original approach which can match with your brand identity.
Design Layout Consistency of the website also an essential principles in website design layout. Create a consistent layout will lead your whole website to keep your viewers mind at ease. The consistent layout has to do with textures, colors, patterns and use borders to placing the content on your webpage.
Design Layout Example of Design Layout Coca-Cola website exploit the brand color red and white color to be their consistency of color. Example of Design Layout Oreo website has make use of consistency of brand color such as blue, black, and white. Besides, the website design layout are dynamic and playful to target their right consumer. Interactivity We agree this agreement as a human being are often connect things that we can see on website to something they have seen before. The purpose of interactivity is to attract viewers attention and to engage them on the webpage which create 2 ways communication.
A viewer tend to look at objects and use their mind to make connections. The website keep them interested. A good design layout is always meet the needs of the viewer. To create the most effective way of website page is to create informative details, entertainment, creative type of interaction and also with a clear goal. Interactivity Example of Interactivity Starbuck website has shown that the creativity of the website and it makes this site more playful and interactive to attract the viewer. A viewer can see different types of coffee available by mouse over the coffee packets as shown in the website. Example of Interactivity Data Fisher website has make used of an interactive 3Dimmensional book and the book has included the creative visuals and information. Thus, it can make it more readable and interesting. Example of Interactivity zzz.drinkzzz.com is a playful interaction website that can impress the viewer and also it made a brilliant interactive concept to communicate with the audience. References 1. Gamequarium.com, (2014). What are principles of good web design?. [online] Available at: http://www.gamequarium.com/edweb/gooddesign.htm [Accessed 10 Oct. 2014]. 2. Idler, S. and Idler, S. (2013). Principles of Website Usability | 5 Key Principles Of Good Website Usability. [online] The Daily Egg. Available at: http://blog.crazyegg.com/2013/03/26/principles-website-usability/ [Accessed 10 Oct. 2014]. 3. Woods, S. (2014). 10 Top Principles of Effective Web Design - Shortie Designs. [online] Shortie Designs. Available at: http://shortiedesigns.com/2014/03/10-top-principles-effective-web-design/ [Accessed 10 Oct. 2014]. 4. Cdn.tutsplus.com, (2014). [online] Available at: https://cdn.tutsplus.com/webdesign/uploads/legacy/170_UnityWebDesign/Unity%20in%20Web%20Design/coke.png [Accessed 10 Oct. 2014]. 5. 4.bp.blogspot.com, (2014). [online] Available at: http://4.bp.blogspot.com/- jHvOGFq39rA/Twr8G3OqohI/AAAAAAAACK0/ce0XNWvPHO0/s1600/OREO+Fudge+Cremes.png [Accessed 10 Oct. 2014]. 6. Hongkiat.com, (2014). Importance of Web Interactivity: Tips and Examples. [online] Available at: http://www.hongkiat.com/blog/importance-of- web-interactivity-tips-and-examples/ [Accessed 10 Oct. 2014]. 7. Media02.hongkiat.com, (2014). [online] Available at: http://media02.hongkiat.com/web-interactivity/starbucks-at-home.jpg [Accessed 10 Oct. 2014]. 8. Media02.hongkiat.com, (2014). [online] Available at: http://media02.hongkiat.com/web-interactivity/datafisher.jpg [Accessed 10 Oct. 2014]. Article: Dont Make Them Wait Why is SPEED matters? Your Target Consumer Doesnt Want to Wait! According to some research 75% of the 1,058 people asked would not return to websites that took longer than four seconds to load. All your graphic images should be as small as possible. One of the knowledge for person to develop websites should know. Images is the main things that affects the speed of loading, the larger the file is the more time needed to load. Few small images is much more better than one single huge image. Example http://redrain.tw/ This is one of the example show few small photo better than one large photo. Gradient Not Worth the Space. Use solid colors when designing your image. I not really agree with this terms, because add on a little gradient might will add few k to the images, but I dont think that this will affects the speed of loading a lot. Size of the image and type is still the main point. Web page should be no larger then 50K. I agree with this terms, because is better for a websites to have shorter loading period. There is no guideline about how long should a good website to load, but as short as you can. For a web page to be successful it needs to download quickly and look good. I agree with this terms. Although not letting target audience to wait is very important, but the websites also needs to fulfill some condition, nice looking websites is one of the attraction that makes them come back again. Example http://www.pomodrone.com/ This is one of the examples that wont take long time to load, but looks good. Remember sometimes less is more. I agree with this terms. Sometimes people wants to place a lot of elements into the websites, they worried their target audience might missed out some. But sometimes, when the websites have lesser things but provide some teaser, they will tend to find out more about the websites. Example http://designchapel.com/ This is the example of websites which less but creates curiosity. Viewers will appreciate not waiting more then they have to. Absolutely agree with this terms, especially for people nowadays. This new era with new technology, everyone asking for efficient. If there is a choice they will absolutely choose the way that can be done in short period rather that lengthy. References http://www.hobo-web.co.uk/your-website-design-should-load-in.../