Renaissan ce GROUP LEADER: Nicholas Han Tatt Wah ( ) GROUP MEMBERS: Liew Zu Xing ( ) Mok Han Leon ( ) Tan Jia Xuan ( ) Tee Mieng ( ) RESEARCH TOPIC: Layout Design Concept List of topics that will be discussed: Find Out What Colors Will Cause Your Visitors to Hate You The colours on the article is too striking and unappealing to the eyes. The orange colour makes the eyes feel fatigued after awhile. Furthermore, it is only one flat colour and it is very boring to look at. Colours A website with good usage of colours would be dustinabbott.net. It only consists of light brown, black, and light grey. Since it is a photography website, the light brown makes the photos in the website blend in nicely with the background, making the photos stand out. Even though only a shade of light brown is used, it is textured so it is not so boring to look at. There are no other bright colours in the website, so reading would not be straining your eyes. Colours (www.dustinabbott.net) The layout in the article is very messy and unorthodox. For instance, the body text is justified to the left side of the page, instead of in the middle. This narrows the texts, making the texts look more compact and this tends to make the reader unwilling to continue reading. The buttons at the top of the page are not arranged properly and uniformly in one line. The home button is above the contact button, and the portfolio and expertise buttons are separated from and larger than the other buttons. Layout A good example of a website which has a good layout is All the buttons in the website are in the same line and clearly separated from each other. The texts and images are aligned properly and utilized properly to not waste any space. The website does not look messy, and keeps the reader interested to continue browsing the website. Layout (www.apple.com) Navigation CONTENT The points discussed in the article do make sense and are true when it comes to site concepts. The article provides some very useful information to enlighten readers and increase their knowledge on site navigation. USER INTERFACE However, the articles site lacks user interface. In fact, besides the article, there is not much on the site at all. It is quite boring and does not really serve much of a purpose. ARTICLE CRITIQUE Contents are some of the most important aspects of a site. Of course, the contents of a site have to be relevant with the type of site/the aim of the site, e.g. What is the site about? For example, a cooking website should display recipes and other cooking-related material, not information about car engines. The contents of a site are very important as they hold the power to determine site traffic and the effectiveness of the site; if the sites contents are bad, there will be less visitors. Content It is important that a sites navigation and user interface remains easily understandable and not too complex. In terms of user interface, it can branch out into many other aspects that make up a site, such as design (colour, font, etc.), layout (to ensure that visitors do not have trouble navigating through the site) and so on. User interface is also important to sustain human- computer interaction. Navigation & User Interface An example of a site with bad content, navigation & user interface (cavs.mit.edu) In that site (cavs.mit.edu), not only does it look disorganized and totally unappealing, but visitors will also not be able to figure out what the site is actually all about. The site completely lacks user interface as well, whereby it is limited when it comes to enabling interaction between visitors and the site itself. There are also plenty of irrelevant and unnecessary contents on the site. Reasons An example of a site with good content, navigation & user interface (www.soyacincau.com) In that site (soyacincau.com), not only is the overall look of the site quite simple and easily understandable, the site also provides ample opportunity for visitors to interact with the site. By providing shortcut links and even a search function, it is much easier for visitors to navigate through the site with ease. With this site, less is more. Reasons More Examples Sites with good navigation, content & user interface More Examples Sites with bad navigation, content & user interface Dont Make Them Wait According to the article Dont Make Them Wait, most website viewers can only see 216 colours and download at 28.8kb per second. We disagree with this point because technology has advanced and we are now able to load pages with large size in a second. According to Smith (1999), the faster your modem, the less time it takes to transmit data. The larger the number, the more bits of data a modem can transmit in a second. Size/Graphics According to The Star Online (2014), almost three times slower than Vietnam, Malaysia at 5.48 Megabits per second (Mbps) was ranked a low 126 out of 192 countries surveyed from May 2013 to April this year in the recent Net Index. Even though Malaysia is one of the countries that has the slowest internet speed, it is still able to download at 5.48 Mbps, hence, can load a website that is more than 50k in size pretty fast. Size/Graphics (www.7Designers.com) 7Designers, is a website that has large graphics, not to mention it is also an interactive website, hence its large size. The website, although large in size, is impressive due to the cute navigation buttons that resembles the Periodic Table of Elements. It also gives off a cute tone when you move your cursor to it. It is also user- friendly. Size/Graphics (www.malaysia.yahoo.com) The size of the website Yahoo! is small but it is also very plain. There are very little images and so the whole website just looks like its full of words and more words. If the words that Yahoo! write are unable to catch the viewers attention, the viewers would not stay long in the website. Size/Graphics In the article, there was this question Here is the dilemma: download quick or look good? Naturally, the answer would be both. However, if a website does load very quickly but looks extremely messy or uninteresting, viewers would not stay long. Hence, for the answer to this dilemma, we would say look good. Size/Graphics: Conclusion Good Website : Size/Graphics (www.maplesea.com/index) Lots of images and animation to make the website look so much more interesting. Bad Website: Size/GraphicsA lot of colours for fonts, however, no graphics and it is too messy. Which is why: Small Size Good Website. In a guideline written in this page http://www.gamequarium.com/edweb/gooddesign.htm, to create a website that is successfully designed, you must: a) Select standard fonts that are easy on the eye to maximize readability b) Text is big enough to read, but not too big c) Background and font colors should contrast Use light font colors on dark backgrounds Use dark font colors on light backgrounds Avoid red and green combinations- hard on the eyes Fonts The font that is used in the article is just Arial. Although it is good that the fonts are consistent throughout the whole article, however, for the part where the website put up a customers feedback, should be in a different font to make the website look more interesting overall. Fonts In the article, all the font colours are either black or white. This makes the website look extremely dull and boring. Fonts To make a website look livelier and more interesting, playing with different fonts and colours can be a good thing, for example,Fonts One more thing about fonts is that it cannot be too small. Although readable, it would still take quite an effort and the viewers would have to strain their eyes, for example, the words inis too small. Fonts (www.rinzen.com) Good Website : FontsThe fonts and its colours, plus the animated characters beside them make the website look attractive. Bad Website: FontsAlthough there is a banner and a few images, the whole website look so chaotic due to the fonts and fonts colour. One of the most important things about creating and designing a successful website is its compatibility with various browsers. Your website might look good in one browser, but may look distorted in another. For example, the article Dont Make Them Wait looks fine when opened using Google Chrome, but looks distorted when opened using Mozilla Firefox. Compatibility * With Google Chrome * With Mozilla Firefox Dont Bore Your Visitors Keep Them Thinking Design displayed: Simple but Plain As shown in the website, the fonts are in a standard font throughout the article, making it easier for viewers to browse through. However, we realize that the title is also in the same font size as the text, and this has caused the title to not be outstanding enough for the viewers to spot it directly. To counterbalance this issue, we have come to a conclusion to enlarge the titles font size as well as add Underline, Bold or Italic effect. This will not only let the title look different as compared to the text, but also attract the attention for the viewers at first sight. DESIGN Font size: Larger Font colour: Contrast with text (www.ectomachine.com/) To create a good website, the design plays the uttermost important role in attracting viewers. The design determines the first impression given to viewers, and if the design does not hold viewers attention immediately but makes viewers uncomfortable, the website will only lose potential viewers and business throughout the time. The overall design of the website is messy and unorganized (www.constellation7.org/Constellation-Seven/Josiah/Index.htm) Likewise, the design of the website is simple and easy to understand, the background colour of the website is plain and light (Orange), and causes a contrast with the font colour (Black), but the colours contrast into a not very interesting first impression to the viewers. To improve this, we have referred to another website that is able to show an obvious contrast between the text and the background colour. The most noticeable contrast would be black and white, thus to improve the website, we chose to change the background colour and the text colour. Contrasting colour of black and white Black background colour makes the text stand out. (webleeddesign.com) On the other hand, the buttons on the website is positioned under the title but small sized and packed. As said in the article: A web site design should not be to confusing nor should it be to simple. This statement is true but the website did not implement the theory into their own design. The buttons could be altered to be larger and noticeable. Navigation buttons are designed to be in a bigger size for better perspective form the website. (www.10bestdesign.com/firms/2014/february/rose-city-websites/web-design-firm-about.png) The content of the article given is informative and was conveyed in decent language. An author should be able to compose a piece that is appropriate and with polite vocabulary. Additionally, an author needs to write articles with a subjective thinking, in order to not affect viewers feelings. For example, the author should not include any profanities or write an article while being emotionally affected. Therefore, to protect the image of the website, proper language should be used at all times in order to be consistent and to show professionalism. language (www.bagnewsnotes.com) * As shown in the image, the text is written in a subjective manner, not emotionall y Besides showing professionalism in the writing of the article, it is also crucial to ensure that the article is not lengthy and dull to interpret. In this article, we realized that the text length in the article is too long and could be a pain to absorb all the information given to the viewers. For the viewers sake, the text should be summarized in a way that the viewers is still able to understand the message that is being conveyed. Besides, the paragraphing of the text should also be rearranged to not form a clutter of text in the whole article. Texts are divided and summarized in a way to make it easier for viewers to read and interpret. (journal.gregorywood.co.uk/entries/top-5-zombie-films.php) Last but not least, some images should be added into the text to not cause the entire piece to look uninteresting. Images are added onto the article to make the text look more lively. (www.ringvemedia.com/shanghai- blog) 10bestdesign.com, (2014). [Online] Available at: Anilinkz.com, (2014). Watch Anime Online | AniLinkz Streaming Anime Episodes. [Online] Available at: Apple Apple. [ONLINE] Available at: Cavs.mit.edu, (2014). Center for Advanced Visual Studies. [Online] Available at: Constellation7.org, (2014). WELCOME TO THE REVELATION OF OUR TIME: A 21ST CENTURY TAPESTRY IN CHRIST. [Online] Available at:Seven/Josiah/Index.htm DustinAbbott.net DustinAbbott.net. [ONLINE] Available at: Ectomachine.com, (2014). ECTOMACHINE | Tulsa Web Design | Oklahoma Web Design. [Online] Available at: Gamequarium.com, (2014). What are principles of good web design?. [Online] Available at: Michael Shaw, B. (2014). BagNews | Reading the Pictures Visual politics and the analysis of news images. [Online] Bagnewsnotes.com. Available at: Missionbicycle.com, (2014). Mission Bicycle: Beautiful Custom Bicycles Made in San Francisco. [Online] Available at:References Monsterism.net, (2014). Pete Fowler. [Online] Available at: Only, F. (2014). JAMES BOND 007 MUSEUM NYBRO SWEDEN. [Online] 007museum.com. Available at: Owltastic.com, (2014). Owltastic. [Online] Available at: Ringvemedia.com, (2014). GOTOCHINA. [Online] Available at: Rinzen.com, (2014). RINZEN. [Online] Available at: Rogerart.com, (2014).[Online] Available at: Searchsoa.techtarget.com, (2014). What is user interface (UI)? - Definition from WhatIs.com. [Online] Available at: Smith and Goldsmith Inc., (2014). [Online] Available at: Smith, R. (1999). Electronic resumes & Online networking. 1st ed. Franklin Lakes, NJ: Career Press. Soyacincau.com, (2014). SoyaCincau. [Online] Available at: Team, P. (2014). MapleSEA Explore MapleStory! A popular, fun-filled Online adventure where friendship begins for children and adults! [Online] Maplesea.com. Available at:References The Importance of Website Design & Layout - Traffic Brand The importance of website design & layout - Traffic Brand. [ONLINE] Available at:website-design-layout/. Themalaysianinsider.com, (2014). Where did they get the grenades, asks DAP - The Malaysian Insider. [Online] Available at:get-the-grenades-asks-dap. Thestar.com.my, (2014). Speed slower than Vietnam and Cambodia - Nation | The Star Online. [Online] Available at:broadband-after-all-Speed-slower-than-Vietnam-and-Cambodia/ Uglytub, (2014). Bath Magic: Tub Refinishing / SInk Reglazing / Tile Resurfacing. [Online] Available at: Webleeddesign.com, (2014). The portfolio of Bryan Katzel | Design, illustration & stuff to make you smile. [Online] Available at: Website Layout Tips: Where To Put Your Most Important Stuff [INFOGRAPHIC] | Social Media Today, (2014) Website Layout Tips [ONLINE] Available at:infographic. Wood, G. (2014). Top 5 zombie films | journal.gregorywood.co.uk. [Online] Journal.gregorywood.co.uk. Available at:films.php. Yahoo, (2014). Yahoo Malaysia. [Online] Available at:References