Question 3 - Reference

1. Department of Social Services, Australian Government, Web Accessibility, 2012. Available from: https://www.youtube.com/watch?v=bEM9Fn9aOG8 [Accessed on 9/12/2015]

Question 3 Web Accessibility

WEB ACCESSIBILITY

          Accessibility can be defined in term of how the certain things capable of providing their service completely to all kind of people regardless of their ability. 

         The accessible website does not mean the website is used for people who have disability but the accessible website mean that they can be used by everyone without having any problem at all. The accessible website also means that the website is universal which it can be used by as many people as possible.

         The accessible website also can be opened by using different devices such as smartphone, laptop and any other devices. this show that the website is accessible to different kind of devices. the website can be view in the form of smaller screen used by the smartphone. The website also provide an option for the user so that website can be viewed into different kind of view such as mobile view and desktop view.

         The accessible website also can be access by a people who have impaired abilities. According to Australian Bureau of statistic in 2009 mentioned that 18.5% of the Australian had a report disability. impaired abilities can be including for those who have hearing problem, reading difficulty, limited mobility and etc. By making web content more accessible will attracted people to surf your website in a greater number. they also can read the information provided by the website and give them greater understanding.

         The color contrast should be use carefully when designing the website since the people who have problem with color will loss his interest to read the information contained in the website. this happen because he could not read the information due to the color could not be differentiate from each other such as using the blue background and cyan as font color will cause difficulty for the people to obtain the information from the website.

         When designing the website, the web developer have to think about their audience. the website structure and styles should be use correctly as this will cause confusion among the user. For example, for the title should be formatted using the heading style since it contained main idea about the information provided in the website.

         The developer also should use only a simple language as this will ease the user to access the content in the website. avoid using accent word which cause the user to get misunderstand thus cause the website fail in delivering the information. The website also only need summarize all the information into a simple description and only displayed detailed information when the user click the 'read more'.

         The developer also must not forget to put any description for any image or graph that he put in the website so that it may not cause the user to wonder the what kind of message that the user want to provide.

         In conclusion, user should provide accessibility to their website as this will help them and their website to become more flexible and beneficial to everyone that using it.

Question 2 - Reference

11. Michael Palermo, CSS in Modern World, 2015. Available from <http://www.sitepoint.com/css-modern-world/> [13/11/2015]

Question 2 - Web Development technologies

CSS IN THE MODERN WORLD

Website Article : http://www.sitepoint.com/css-modern-world/


     Based on the article on the website mentioned above, I have to write a reflection for the online article written by the Michael Palermo which is CSS in the Modern World. I have gained a proper understanding regarding the article. The article mainly discuss about the benefit of using the CSS (Cascading Style Sheet) in today's modern website.

     First is the article is discussing about the relevant usage of the CSS in today website. The writer also provided some other article regarding the CSS. The writer give suggestion to read the other article because he  want to ensure that the reader have proper understanding why the CSS faced the momentum. The writer start to narrow the topic by giving few benefit of the CSS.

     I have understand that the CSS have many benefit when used to develop the website. The first benefit is CSS allow for separation of concern which is separate the coding of the website and style which ease the user to maintain the coding. The second benefit is CSS is faster to load compared to the javascript in term of transition and animation. The third benefit is CSS is responsive by ensure the user who browse the website to view the content in amazing way. The fourth benefit is CSS has captive audience which is the CSS has larger amount of resource for reference. The Last benefit is CSS is everywhere which mean that the CSS has been widely used in the almost every website.

     I also understand that there are multiple of way to use the CSS which can be divided into two general ways. The first way is manual implementation and maintenance for CSS which developer responsible for all aspect of CSS. The second way is CSS that depend on extension or framework in which the developer directly depend to the extension or framework to write CSS.

      I am aware that CSS even though faced many problem and challenging while using it but it is still can be continue to be further use in the modern website development.

Question 1 - Reference

1.  Lan Hoang, Aura Kingdom, 2013. Available from <http://aurakingdom.aeriagames.com/>  Accessed on 16/10/2015

2. Jennifer Kyrnin, Balance - Basic Principles of Design, Available from <http://webdesign.about.com/od/webdesignbasics/p/aabalance.htm/> Accessed on 16/10/2015

3. Patrick Mcneil, 25 Example of Symmetry in Web Design, 2011 Available from <http://www.webdesignerdepot.com/2011/07/25-examples-of-symmetry-in-web-design/> Accessed on 16/10/2015

4.  Patrick Mcneil, Asymmetrical Balance in Web Design, 2011 Available from <http://www.webdesignerdepot.com/2011/10/asymmetrical-balance-in-web-design/> Accessed on 16/10/2015

5. Ryan Boudreaux, Effective design principles for web designers: Proximity, 2012. Available from <http://www.techrepublic.com/blog/web-designer/effective-design-principles-for-web-designers-proximity/> Accessed on 16/10/2015

6. James T. Saw, MINI LESSON: ALIGNMENT, 2011. Available from <http://daphne.palomar.edu/design/align.html> Accessed on 16/10/2015

7. Jennifer Farley, Principles of Design: Proximity, 2009. Available from <http://www.sitepoint.com/principles-of-design-proximity/> Accessed on 17/10/2015

8. Mike Rundle, How C.R.A.P is Your Site Design?, 2006. Available from <http://blog.teamtreehouse.com/how-crap-is-your-site-design> Accessed on 17/10/2015

9. Ryan Boudreaux, Effective design principles for web designers: Alignment, 2012. Available from <http://www.techrepublic.com/blog/web-designer/effective-design-principles-for-web-designers-alignment/> Accessed on 17/10/2015

10. Ryan Boudreaux, Effective design principles for web designers: Repetition, 2012. Available from <http://www.techrepublic.com/blog/web-designer/effective-design-principles-for-web-designers-repetition/> Accessed on 17/10/2015

11. Creativemarket.com, Learn Web Design: How Repetition Leads to Rhythm, 2014. Available from <https://creativemarket.com/blog/2014/10/23/learn-web-design-how-repetition-leads-to-rhythm> Accessed on 17/10/2015

12. Jennifer Kyrnin, By Contrast - Basic Principles of Design, 2015. Available from <http://webdesign.about.com/od/webdesignbasics/p/aacontrast.htm> Accessed on 17/10/2015

13. Jennifer Farley, Principles Of Design: Contrast, 2009. Available from <http://www.sitepoint.com/principles-of-design-contrast/> Accessed on 17/10/2015

14. Henry Jones, The Principle of Contrast in Web Design, 2010. Available from <http://webdesignledger.com/the-principle-of-contrast-in-web-design> Accessed on 17/10/2015

15. Henry Jones, The Principle of Contrast in Web Design, 2010. Available from <http://webdesignledger.com/the-principle-of-contrast-in-web-design> Accessed on 17/10/2015

16. Martin, Design, Marketing 101 web Design Principles Of Successful Websites, 2015. Available from <http://www.entrepreneurial-insights.com/web-design-principles-successful-websites/> Accessed on 18/10/2015

17. depthskins, What is White Space?, 2007. Available from <http://www.webdesign.org/web-design-basics/design-principles/what-is-white-space.10284.html> Accessed on 18/10/2015

Question 1 - Website Design Evaluation ( Ebay )

Ebay

Website Address: www.ebay.com

       Ebay is one of the online shopping that acts as third party between the customer and the seller. The seller will advertise their item on the website with and the buyer get to choose what kind of item they want to buy. The customer must be registered before buying any kind of item at the ebay website. The customer also need to register their wallet detail which is Paypal or Credit card. This is to prevent the fake buyer that bid the item through the value but does not buy anything from the seller. The ebay will ban those buyer and charge him using law. 

Website Interface :

I) Balance

         Balance in website design mean that distribution of element such as image, color and text across the design field. Balance also can be defined in term of gravity which explain the graphical interface which show the large element appear to be heavier while smaller element appear to be lighter. In the Aura Kingdom webpage, 2 type of balance is used in term of website design such as symmetrical balance and asymmetrical balance. Symmetrical balance is the balance that are used in design to place the same type of element that matching each other in design. Asymmetrical balance is the balance that that complete opposite to the symmetrical balance as they do not matched the element.

       For example in the website Ebay as shown in the image 1, the image are perfectly balance to each other. Since the bigger image is put to the right along with the three smaller additional image, the image also is put to the left as same as the right to balance the website. if one of the image such as smaller image got missing the image will lost it balance and the website appearance will become awkward. The font also is display for both of the two bigger pictures that explain the content of the picture which is symmetrical to each other.

Image 1

       In the website ebay, asymmetrical balance is also used in the website as shown in the image 2. The right image are bigger compared to two rectangle on the left of the website. Furthermore, the two rectangle only display two words. The color of the font is also perfectly asymmetrical to the background since the background does not have too much color that will hinder the appearance of the font which affect how reader perceive the content of the website. 

Image 2

II) Proximity

       The principle of proximity in the web design is defined as the moved closer and grouping the related item or separate the unrelated item in order to achieve more organized look. the principle of proximity in web design is usually is used to organize the menu bar. 

       For example, in the website ebay as shown in the image 3, all the unrelated available item are grouping together in the menu above the picture. This will make the website more organized rather than scattered around item which will confused the buyer that come to navigate the seller's item. User also can differentiate which item for the sporting good or electronic. If the user wanted to find camera he  he only have to view the pointer over the electronic words and drop down menu will appear along with the other listing item.

Image 3

    

       In the image 4, the website organize all the jewelry, handbag and accessories into one group which is known as fashion. The purposed to organize all the related item such as accessories, handbag and jewelry into one group which make the user understood that the fashion include the things. It is important control the thinking of the user so that they will not be misunderstood or thinking about the wrong stuff because when the same category of the item is not grouped together, the user tend to think that they are not related to each other. 

Image 4

III) Alignment

      The principle of alignment in the website design is defined as the how element are properly placed and organized and the website design should not look as if it were placed randomly. The alignment is divided by two types which is edge alignment and center alignment. The edge alignment usually are used for object with flat edge such as rectangle that contain four flat edge. the proper alignment will make website look organized. The center alignment can be used for any kind of shaped object since the center alignment focused on the horizontal axis that run on the center of the object.

       For example in the website Ebay as shown in the image 5, the website only used edge alignment to align the picture and box in the website. there are no center alignment being used in the website. Since the picture of the irregular shape are standardize by putting them into rectangle once they are upload to the website. This is necessary because the website does not need any irregular shape since they are properly aligned by using the edge alignment. The alignment line from the bigger image meet the smaller rectangle line and this show that they are not randomly put into the website.   

Image 5

IV) Repetition

       The principle of repetition in the website design is defined by reusing the similar element throughout the website which united the different to together. Repetition will bring consistency and cohesiveness through the design. Repetition can occur on many things such as font, color and background picture of the website of different pages. 

      For example, in the website Ebay, as shown in the image 6. as we scroll down the page that we will know the website use the same design to arrange the photo because the website want to keep consistency of the design so that they user will not be confronted with too much graphical design which eventually lead to the the information that need to be delivered to the customer could not be reached.

Image 6

        The repetition also occur in the menu of the several item category that are grouped together as shown in the image 7. the item use the same type of font, same size and does not used the bold formatting. this is because to make sure the consistency of the menu item on the above. if one or two item category use the bold formatting, it will cause the bold one look clear and get notified by customer first which automatically will interrupt the notification of the customer toward other item category. 

Image 7

V) Contrast

         The principle of contrast is defined as the difference not only to the color but also can be used for any kind of design element such as shape, font and etc. The contrast for color is how to make our eye notice the different in the website and to show the important part of the website. the contrast for color also can be used in image manipulation to ensure that the image become clear and important. The font also can be used to show contrast by using difference font for heading and sub heading, user can differentiate the introduction and detail of the website. 

         For example in the website Ebay as shown in the image 8, the contrast is widely used in the webpage. Since it is business website, it contain many image upload by the seller to advertised the product. The product image has many color so the website is set to have background which is totally contrast to other color so that the image uploaded by the seller are easy recognized by the customer. 

Image 8

       The contrast also is used in description of the image item where the item name got a bigger size in term of font while the explanation regarding the item using a smaller font. This is because the item name will draw the attention of the customer. if the customer interested in the item, the customer will eventually read the explanation below the item's name. this show that the contrast aid in the delivering information to the customer. 

Image 9

VI) Space

       The website design principle for space or also known as white space or negative space which is the space that always occurring in the design the moment you open the document or also is the space between the two object or image. The white space have several purpose such as to provide a space without being confronted by too many graphical art, provide readability content which the information able to be delivered completely to the user and ensure all the element matching with each other.

      For example, in the Ebay website as shown in the image 10, the drop down menu will show once the mouse pointer is hover through it. the drop down menu has a rhythm properties because the negative space is provided in the drop down menu that cover letter and image which cause the smooth flow of element in the design. If the negative space is not provided, the image will get mixed with the backside image which caused the imbalance lead to the confusion of the customer that open the drop down menu. The image will get blend cause uncomfortable feeling.

Image 10

      I think that the website are user friendly especially in term of design since the website use correct alignment for the image so that it will look compatible to each other. The website also use good color contrast which is black and white in which enable the user able to obtain the information clearly. The website also repeat the arrangement of the certain element in the website which cause the website to look consistent.

Question 1 - Website Design Evaluation (Aura Kingdom)

Aura Kingdom 

Website Address: aurakingdom.aeriagames.com

       Aura Kingdom is one of the Massively Multiplayer Online Role Playing Game (MMORPG) that provide a service to their customer by providing a server so that the customer can enter the server as player and can purchase in-game item. The website is sponsored and published by Aeria Games company. When the player enter the website, player must be registered before downloading the Aura Kingdom client. The website also provide news to the player regarding game content such as event, maintenance time and update content.

Website Interface :

I) Balance

         Balance in website design mean that distribution of element such as image, color and text across the design field. Balance also can be defined in term of gravity which explain the graphical interface which show the large element appear to be heavier while smaller element appear to be lighter. In the Aura Kingdom webpage, 2 type of balance is used in term of website design such as symmetrical balance and asymmetrical balance. Symmetrical balance is the balance that are used in design to place the same type of element that matching each other in design. Centering the element also can be used to get symmetrical balance image. Asymmetrical balance is the balance that that complete opposite to the symmetrical balance as they do not matched the element. 

         For example, in the aura kingdom website as shown in image 1, symmetrical balance are used to placed both of the character on the right and left of the webpage. The logo 'aura kingdom' as shown in image 1 is also centered to  show that the design also used centering to symmetric the logo. The space between text also is symmetrical to each other text. 

Image 1

         In the image 2, the asymmetrical element that are used is the sidebar and video. the sidebar appear as long rectangle and is placed as vertical while the video is also rectangle but is placed as horizontal. The color in the sidebar is set darker opposite to the video rectangle color which is white. This to ensure that the sidebar will get notified by the user.

Image 2

II) Proximity

       The principle of proximity in the web design is defined as the moved closer and grouping the related item or separate the unrelated item in order to achieve more organized look. the principle of proximity in web design is usually is used to organize the menu bar. 

       For example, in the Aura Kingdom website as shown in Image 3, The game menu bar will separate the type of platform for every kind of game such as PC Games, Browser Games, Mobile Games and Mini Games. This ensure the user to differentiate the different platform for every kind of game which prevent them from downloading wrong stuff which eventually will make them upset. 

 Image 3

       In the Image 4, the website organize all the windows platform games such as Dragomon Hunter, Aura Kingdom, Digimon Master and Elsword into category known as PC games. All this game also is put into the same category which is Anime MMORPG which is because of the design of character is same as japanese cartoon. 

Image 4

III) Alignment

      The principle of alignment in the website design is defined as the how element are properly placed and organized and the website design should not look as if it were placed randomly. The alignment is divided by two types which is edge alignment and center alignment. The edge alignment usually are used for object with flat edge such as rectangle that contain four flat edge. the proper alignment will make website look organized. The center alignment can be used for any kind of shaped object since the center alignment focused on the horizontal axis that run on the center of the object.

       For example, in the Aura Kingdom website, all the rectangle that represent information use proper alignment to make sure that all the information and graphical art are properly organized as shown in the image 5. The red line show the alignment line. It ensure that information are properly organize which enable the user to obtain proper information without being misunderstood or overlooked the information due to the poor alignment. It also user friendly since it organized the box in the proper place. 

Image 5

       The center alignment is also used in the Aura Kingdom website as shown as the image 6 where both of the character and Aura Kingdom's logo are align on the center using the horizontal alignment line. The shape of the character and logo consist of multiple basic shape which are not suitable for the edge alignment which depend of the angle and flat edge. It also ensure that the image are not scattered around which will eventually lead to the confusion of the user during browsing the website. 

Image 6

IV) Repetition

       The principle of repetition in the website design is defined by reusing the similar element throughout the website which united the different to together. Repetition will bring consistency and cohesiveness through the design. Repetition can occur on many things such as font, color and background picture of the website of different pages. 

       For example, in the Aura Kingdom website as shown in image 7a and 7b, repetition of the background picture are used to bring consistency to the website and also make the website load faster than previously open since the same image will be saved in the application data of browser. This will saved the time for the user to browse between the page of the website without being confused by too many change at once time. 

Image 7a

VS

Image 7b

          The repetition also occur in the font of Aura Kingdom menu as shown in Image 8 which is for every font is bold such as Community, Exploring Azuria, The Game, media and Item mall. This will united the different word close together which show us that they are in the same group as the menu grouping. It also enable the user to distinguished the words that are align in horizontal axis and prevent the user to overlook the words in the menu bar. 

Image 8

V) Contrast

         The principle of contrast is defined as the difference not only to the color but also can be used for any kind of design element such as shape, font and etc. The contrast for color is how to make our eye notice the different in the website and to show the important part of the website. the contrast for color also can be used in image manipulation to ensure that the image become clear and important. The font also can be used to show contrast by using difference font for heading and sub heading, user can differentiate the introduction and detail of the website. 

        For example, in the Aura Kingdom website as shown in the image 9, the background of the website is blur and the character and logo are clear. this will make that the eye of the user will focus on the character and logo. The image is blur by using bird eye view to produce far away image which make it more beautiful when clearer image is put on the blurred image. 

Image 9

      The contrast design for the font is also used by the Aura Kingdom website as shown in the image 10 which is the news 'The Pirate's Loot Tiered Spender Program' and there below goes an explanation 'Only running until the 20th!... Read More »' which automatically aids organization of information  of the words 'The Pirate's Loot Tiered Spender Program'. The shape of the selected video is bigger showing that the video is ready to be streamed and the smaller box show the additional video that available in the website. This will create the focus of the user to stream the video right away compared to the bunch of smaller boxes that are align together. 

Image 10

VI) Space

       The website design principle for space or also known as white space or negative space which is the space that always occurring in the design the moment you open the document or also is the space between the two object or image. The white space have several purpose such as to provide a space without being confronted by too many graphical art, provide readability content which the information able to be delivered completely to the user and ensure all the element matching with each other.

       For example, in the Aura Kingdom website as shown in the image 11 which the video element have rhythm properties that ensure the smooth flow of element in design. the space are provided for the video and the negative space show the video size along with several smaller boxes composed of the additional video align in the horizontal axis. The white space ensure the user to engage easily with the video without being confronted by other graphical art. The box 'Welcome to the Azuria' have white space to ensure the readability of the box content. the words can easily be distinguished from the background and easily recognize and readable by the user.  The background are blurred to provide a space for the character to get an attention from the user when the user browse the website which eventually lead to the character and background to united with each other to provide the design being holistic and agree with each other. 

Image 11

       I think that the website are user friendly especially in term of design since the website use correct alignment for the image so that it will look neat. The website also use good color contrast in which they user able to read the information without any problem. The website also provide a good negative space so that the user will not feel uncomfortable if the information that are put into the website are overloaded. 

Developing Modern Website - Assignment 1

Introduction

       In the assignment 1 for the course Developing Modern Website, student is required to answer several question such as question 1 which is website design evaluation which evaluate the 2 website in the term of the balance, proximity, alignment, repetition, contrast and space while question 2 which is popular web development tool which to summarize the article regarding the title and the last one is question 3 is the web accessibility which is about how the website can help some individual finding solution to their problem. 

        Question 1 is mainly about the evaluation of the website design. Student are free to choose the website that he think have a very good design and good navigation system. in order to complete this project student need to evaluate the website design based on the principle such as balance, proximity, alignment, repetition, contrast and space. Student need to explain and support the reasoning with the few example using the website. student also required to make justification after declaring the website is good in term of the criteria.

        Question 2 is mainly about the popular web development tool. Student are required to find out an article regarding the topic. After found the article, student are required to analyse the article and summary the content in the article. The summary must be written based on the experience or what have the student on the article. 

        Question 3 is about the web accessibility. Student are required to create a link to a video that show how a website could help some individual to find solution about their problem. Based on the video, student should explain the component of the web development such as the content, web browser, media player, assistive  technology, user's, developers, authoring tool and evaluation tool that help to create those accessible website. 

         In the conclusion, after answering several question, student should be able understand the website design and able to create a good website that based on the criteria. student also gain a deeper understanding of the current popular web development mainly about their user function and features. Student also able to extract a wide amount of knowledge from the video to explain the web component.