More with CSS Basics

Website Comparison

Ng Zhen Fai AI180226

Ng Kei Wak AI180281

Chua Shiann Koan AI180196

Section 5

1.

      In this assignment , we choose 2 websites which are digi.com.my and u.com.my. These 2 websites  exhibit the deisgn principles of repetition , contrast , alignment and proximity.

      First, we discuss about the repetition principle. There are a few properties that repeat in both website design. The logo of both websites will keep repeat on top of the left when browing through the websites. The digi’s logo design is yellow in background and the font “digi” inside the logo is using black colour with 3 blue colour air drops. While for u mobile’s, it is simply using white colour background with the orange colour in font and logo. Secondly, the typography of 2 websites are consistent throughout the sites. Both of the websites  use the particular font size for their headers to make their pages looks more organized. In addition, both websites have footer that provide quick access for the user to refer to the important parts of the websites.

       Other than that , the second principle that exhibit by the websites is contrast. The contrast is show in 2 aspect of design which are colour and size. A contrast in the colour will help user to differentiate page element from one another . It will makes the website have a nice flow and hierarchy to increase the usability of the websites. For example , the main heading of digi’s website use yellow as the background colour the the font colour is in white to create the contrast effect.While in u mobile’s website , the heading is use orange colour and and content of the website is using black colour. Both pages also use different font size and logo size to show the contrast. These two pages use large font size for the main or sub headings and small font size for the content. In the result ,this has successfully establish the hierarchy in the content of the websites and drive the interest of the user.

In term of alignment , U-mobile websites and Digi websites able to show a good design and interfaces in many aspects , such as for text alignment, images alignment, header alignments and footer alignment. For U-mobile websites and Digi websites, they aligned their header and text centrally in the webpage to show clear message for the users.  The alignment of the images are difficult due to the size of the images and the images need to adjust whenever the company want to add on the new images. The images in U-mobile websites are aligned within the grid the text normally in, and it looks good and simple , while for Digi websites , its image only aligned at the top side of websites where the area header and its description in.

While for proximity, the U-mobile websites and Digi websites have their related information placed closely together to form a categories and groups in a side bar. Both websites are able to place together the elements of their website in different categories which aligned at the top of websites with a link of navigation in each categories.  The users can easily wades through the elements in the websites by referring to desired categories in sidebar of websites. For the Digi websites, it only promote their internet plans with its information which grouped properly in the grids.

2. Web Design Best Practice:

Based on the U Mobile and Digi websites that we chose, both of them exhibit several web design best practices. Their URL are short and simple so that users will not be confuse them with different sites. Their target audience is for all ages, its purpose is to provide users with mobile service to communicate with other people with mobile devices.

For the page layout, their page is colourful and appealing to their target audience, their site header and logo are also consistent. At the footer area of the websites, they included the copyright and their contact e-mail. They also made good use of basic design principles like repetition, contrast, proximity, and alignment. For the text in the sites, there is a balanced gap between the graphic and white space in the space to make it easier to read and look.

For the browser compatibility, both of the websites are able to be displayed on popular  browsers like Google Chrome, Firefox, Safari, and Microsoft Edge without any problem. Moreover, you are also able to surf the sites on your mobile devices including tablets and smartphone for your convenience.

For the navigation part, the main navigation links are clear and consistently labeled so that users may not be left confused. The navigation is easy to use even for the elderly who are mostly tech-savvy. If the main navigation uses images or media, its text link are applied in the footer section of the page. All of their navigation hyperlinks are working and not broken.

For the colour and graphics, colour scheme is limited to few colours only plus neutral colour like white and black and the colour is used consistently to avoid eyesore for the users. For example, umobile website is focused on orange colour while Digi website is more focused on yellow colour.

For the content presentation, the websites chose to use familiar and common fonts like Times New Roman and no more than one type of font is used to make the page consistent to look at. To avoid a text congestion, writing techniques like bullet points and paragraphs are used in the text writing. As for the hyperlink, the links are always written in detail and not something like “Click Here” to inform users on what this hyperlink will do.

For the functionality and accessibility, all internal and external hyperlinks for the websites are working well and no javascript errors are generated. If a media like picture is used, the alternate text is provided to serve as a note if the picture failed to load. The frames are granted with titles and meaningful content are placed in the noframe areas. As for the language of the sites, html element’s lang attribute will serve its purpose.

Improvement:

U Mobile

1. Information should be easier to find by adding a filtered search function.

2. Content of the website should be updated regularly to remove outdated information to avoid mislead for users.

3. The page design should be made more appealing by adding more media content.

4. The site should have an online customer service to let users talk to the admin on the site.

Digi

1. The page should include a page number to let user switch to their desired banner conveniently.

2. The navigation should be structured in an unordered list.

3. Graphics should be optimized and do not significantly slow download when users load the website.

4. Animated images should not be endlessly repeat to avoid motion sickness for certain users.