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.