tan yen ling (adelyn)0315222 kevin lim kien fong0319821colours tharashini a/p...

31
Revolution Tan Yen Ling (Adelyn) 0315222 Kevin Lim Kien Fong 0319821 Colours Tharashini a/p Selvam 0309858 Navigation Wendy Lim Ern Ching 0303420 Don’t Make them Wait Yip Yuin Yahn (Mandy) 0308370 Don’t bore Visitors

Upload: aubrie-holt

Post on 17-Jan-2016

221 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Revolution

Tan Yen Ling (Adelyn) 0315222

Kevin Lim Kien Fong 0319821 Colours

Tharashini a/p Selvam 0309858 Navigation

Wendy Lim Ern Ching 0303420 Don’t Make them Wait

Yip Yuin Yahn (Mandy) 0308370 Don’t bore Visitors

Page 2: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

ColoursColour is one of the most important aspects when you are designing your website. Also, it has to be the first thing you should think of when you’re designing because colours can be the reason visitors are attracted to your website. It is safe to stay within 216 colour pallets because browsers nowadays don’t support any higher numbers.

Giving suitable colours for different parts of the website is important. For example if you want your readers to focus on one place of the website, use yellow as it is mostly used in caution signs and it is said to be the first thing you would notice. It is as if the brain is designed to recognize this color faster than the others. However, you should use it cautiously. It is true that you could attract readers, but it will also hurt and (or) annoy readers eyes when it is there in the website the whole time.

Page 3: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

One example of successful use of the color of yellow

Page 4: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

If you have no idea which color to use when designing your website, it is easy to start off simple. For example, using black texts on white background. This is the simplest set up you can use for your website because it is commonly used and it would be the easiest to read while not irritating the eye. Example of it are as the picture below.

Page 5: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

There are many colours to use since different websites use different colour themes. It can have a very big psychological impact on readers and how colors can provoke reader’s emotions. Colours can also be used to express the website’s main subject. For example, Green is used in a more greenish related website such as golf or lawn sites. Blues and white background are normally used in business sites while maternity sites are often associated with pink. Red is also normally used on food sites.

Page 6: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Conclusion

You should choose very carefully which colour to use when designing your website because of how impactful it is to readers. It could be the factor that readers decides to stay on reading or just leave due to its good or bad readability. In conclusion, picking the right colour for your website is really hard but once you get the hang of it, readers will enjoy venturing into your website. Not to forget that colour is as important as the content that is used in the website.

Page 7: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Navigation

One aspect of good web design is a main page that has the insignia of the company on top of the page, together with any other important details that might be needed for the page. It should be simplified to reflect the personality of the company as well as having systematic and smart links to other web pages within the same website. It would be helpful if a description appears about the next web page by hovering the mouse over a button leading to that web page. One good example of a website that has a good balance of both functionality and aesthetic value is Rinzen which has a lot of buttons located at the top of the web page, leading people to slowly discover what each page is about by hovering over each button.

Page 8: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip
Page 9: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Secondly, a lot of the web pages are filled with attractive, uniquely drawn art pieces that truly reflect the pages creativity of art design. It is also simply to work with and really makes accessing a lot of web pages within the web site simple. This is the true brilliance of a simple yet functional design with gives an added dimension of flexibility to the website.

Page 10: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Another thing to consider for the navigation aspect of a website is the smart use of link titles. It is obvious that the more usable a link title is, the better the website's design aspect will be. However, it would be even better if the website itself uses link titles that demonstrate the website's personality as well as gives the website a feel that’s entirely its own. A website that executes this technique well is Pete Fowler's website, Monsterism.net which uses link titles that have been creatively made to show an artistic whimsical side that is all its own. Besides enhancing the feel of the website, it doesn't compromise on the functionality of the site. This gives the site a feel of a professionally made website that would be known for both it’s art and music.

Page 11: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip
Page 12: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Finally, it is also important that links that have already been browsed by the user should be shown in a different colour than those that have not been clicked on browsed. This would save a lot of frustration for the unsuspecting user, who would otherwise be searching for something new on a site in which most of the links have been browsed or clicked on. The knowledge and usage of different colour schemes is definitely something to consider.

Page 13: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Rinzen uses a lighter colour to indicate visited pages. The lighter the colour, the more frequent a user visits the page.

Page 14: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Conclusion

All in all, it is important to consider all aspects that might increase the ease of browsing for the viewer. If a website is pleasant to browse, all the more reason for the viewers to visit it.

Page 15: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

WaitingWhen embarking on creating a new web site, it is best to create a site that caters to its visitors in the most user friendly and practical manner. It is not obligatory for the graphics and sounds to have the highest quality respectively, because this will be impractical to the everyday site visitors. The amazing sound quality and visuals of the site will be redundant if the page can’t even finish loading before the visitor loses interest and closes the page. In today’s fast paced age, time is of essence and people now lack patience. They will therefore move on very quickly from your site if they are made to wait. Generally your audiences are operating on a screen between 15-19 inches wide, can only view 216 colors and downloads at a speed of 28.8 kb per second. With such information we can follow a few simple rules to make your site visitors more satisfied.

Page 16: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip
Page 17: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

The first is to make sure that your page can finish loading fast on a 28.8 internet connection. To achieve a faster loading time, you as a site owner should create a web page no bigger than 50K. Yahoo is the humble site we are talking about. This proves that you can really do a lot within that very little size.

In order to get your site under 50K, your graphic images should aim to be as small as possible. A size of under 4-6K should be ideal. Also when designing a graphic for the site, the number of colors needed is a grand total of 216 only. Choose solid colors when designing your image. 

With the gradient tool PhotoShop has popularized fancy way of making site background borders fade things in and out. It is quite common to see the usage of this visually appealing make up on sites today. Upon right clicking you can check to see that the size ranges between 8-12K. This large space is wasted on lots of color and dithering which is unnecessary and ends up making your site users wait a long time for the site page to finish loading.

Page 18: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

A good rule of the thumb is always to use more design and less graphic. An ideal and successful web page needs to download at top speed and still look good. Both can be achieved if you use color schemes for your site. No need the fancy hassle of designing graphics and having jpg pictures. For the boarders of your site page, use cell colors. Always maximize the use of negative space on your site. Simplicity is highly valued, thus ignoring what is not there is just as bad as ignoring what is.

Page 19: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip
Page 20: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Moreover, when it comes to graphics, choose wisely. Ask yourself if that extra graphic has the power to attract your audience to keep coming back again and again. If so, it’s a keeper. However if it’s not much of a crowd puller you should scrap it.

Page 21: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Conclusion

Site users always appreciate not waiting more than necessary. We must remember that the web is here to be making life easier thus any amount of extended time users sit waiting for heavy web pages to download is unacceptable.

Page 22: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Visitors

One of the elements in designing a good website is the background. The background of the website should be attractive and simple at the same time. A website can have a blank white background, which may drives visitor’s attention away to focus more on the navigations, web content and colorful images or banners displayed on the web page. For example, Hybrid Works chose a blank background, associated with simple and yet eye-catching visuals to attract visitors.

Page 23: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip
Page 24: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Another element is that the color scheme should be precise. A good color combination helps to improve the website and also sparks interests among visitors. On the other hand, each design has its specific theme. It can be in any genre, as long as it does not lose interests. Here is an example of a design which I found intriguing:

Page 25: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

The design of Pixles & Aromates is whimsical, fun and light. When compared with Spectrum Powderworks, visitors would not feel bored or confused when they visit the page.

Pixles & Aromates Spectrum Powderworks

Page 26: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

The third element is the font. From all the websites visited, there is a balance between these two aspects. Title fonts should be in the center if attention; it can be fancy, decorated while simple fonts such as Calibri or Georgia can be used for contents. If both title and content fonts are used in a same style, viewers might find the site boring, unappealing. The final element is the arrengement. A good web design must be neat and well-organized which every information displayed are presented in their own specific sections. The content displayed also should not be overpowering the web page. For example of a bad website is Rudgwick Steam Show.

Page 27: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip
Page 28: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Conclusion

In conclusion, a good web design comes in a whole package: background, simplicity, good colour combinations, font designs and arrangement. An inetersting website is not because of the content presented, but the main aspect is the design itself.

Page 29: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Reference 2 Create a Website (n.d.), Colour Psychology in Online Marketing, 2 Create

a Website, viewed 8 October 2014, <http://www.2createawebsite.com/design/color-psychology.html>

Agarwal, N (n.d.), How to Reduce Loading Time of Website to Make it Faster, InkThemes Blog, viewed 8 October 2014, <http://www.inkthemes.com/how-to-reduce-loading-time-of-website-to-make-it-faster/02/#>

  Davis, M 2014, 10 Ways to Make Your Website Load Faster, Hostway Blog,

viewed 8 October 2014, <http://hostway.com/blog/10-ways-to-make-your-website-load-faster/>

Francis, C 2013, 40 Stunning Website Designs with Great Color Schemes, One Xtra Pixel, viewed 8 October 2014, <http://www.onextrapixel.com/2013/10/25/40-stunning-website-designs-with-great-color-schemes/>

Page 30: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Hybrid: Works 2014, Hybrid Works, viewed 8 October 2014, <http://www.hybridworks.jp>

Monsterism.net 2014, Pete Fowler, Green House Group, viewed 7 October 2014, <http://www.monsterism.net/>

Patel, N 2012, How to Make Your Site Insanely Fast, Quicksprout, viewed 8 October 2014, <http://quicksprout.com/2012/09/20/how-to-make-your-site-insanely-fast/>

Pixles & Aromates 2014, Pixles & Aromates, viewed 8 October 2014, <http://www.pixelsetaromates.com>

Quinn, M 2014, How to Optimize Your Website’s Performance and Keep Customers Happy, Forbes, viewed 8 October 2014, <http://www.forbes.com/sites/theyec/2014/02/19/how-to-optimize-your-websites-performance-and-keep-customers-happy/>

Page 31: Tan Yen Ling (Adelyn)0315222 Kevin Lim Kien Fong0319821Colours Tharashini a/p Selvam0309858Navigation Wendy Lim Ern Ching0303420Don’t Make them Wait Yip

Rinzen 2004, Nose Fall/ Winter Catalogue, Rinzen, viewed 7 October 2014, <http://www.rinzen.com/>

Rinzen 2014, Rinzen, viewed 7 October 2014, <http://www.rinzen.com/?id=628>

Spectrum Powederworks 2014, Spectrum Powderworks, viewed 8 October 2014, <http://www.spectrumpowderworks.com/>

Webweaver 2014, Formating Tips to Speed Up Your Website, Webweaver, viewed 8 October 2014, <http://www.webweaver.nu/html-tips/load-times.shtml>

Yellow Pages 2014, Advertise Online, Yellow Pages, viewed 8 October 2014, <http://www.yellowpages.co.za/page/advertise-with-us>