In an era where the internet has enabled seamless sharing of information, a plethora of users utilize the World Wide Web and the internet as their primary tool for the sourcing of information. However, these websites utilize different elements of design to appeal to the users as well as augment its readability and usability. The primary objective of this paper is to contrast and compare two website samples from the perspectives of critical traits including proximity, alignment, repetition, and contrast. In particular, Major League Baseball (mlb.com) and National Football League (nfl.com) websites will be contrasted using the four aforementioned elements of website design.
Proximity
Proximity is among the principles of web design that entails moving things farther apart or closer to each other to achieve a more organized look. In this principle, the related items ought to be grouped so that they can be viewed as a single entity instead of several elements that are unrelated (“Gestalt Theory for UX Design: Principle of Proximity”, 2017). The utilization of white space is a crucial proximity factor as they are used as the balancing tools between displayed items. Nevertheless, they can be useful in some cases especially when accentuating elements or when attaining a dramatic effect. Similarly, other elements like visual hierarchy are traits of proximity that manipulate white spaces and also groups related content. When
Major League Baseball
(mlb.com) and
National Football League
(nfl.com) are contrasted in regards to the principle of proximity there are some apparent similarities and differences. For instance, both utilize white spaces efficiently as
each paragraph and text are separated and grouped.
Delegate your assignment to our experts and they will do the rest.
Fig. 1 NFL Website proximity (nfl.com)
Fig.2 MLB website proximity (mlb.com)
However, while the MLB website uses great visual hierarchy, the NFL website is not as efficient and it can be hard to discern titles from the main text. The two websites grouping follows a definite and logical pattern where each of the entities are connected or divided via a suitable balance and usage of white space (“Learning About Proximity in Web Design” N.d). This means that both websites have a scannable and readable layout which allows users to locate the important points at a glance. Both the MLB and NFL websites also use a lot of white spaces on the sides in order to prevent the clustering of information which can sometimes confuse the readers.
Alignment
Alignment is a design principle that visually connects every element via an invisible line. It also shows that the slide designs were not connected randomly and it makes designs to be visually appealing. In the same manner, it makes it easier for users to scan over the page and it also subconsciously offers a calmer reading experience (Shillcock, 2013). All the elements in a website require alignment including texts, images, videos, buttons, as well as links. Grids are among the main tools used for alignment and helps in creating relationships between the different elements.
The NFL website has a great alignment of all the texts and images within a certain grid as depicted below.
Fig 3. NFL website Grid alignment
Some of the grids are visible while others are imaginary and they aid in the readability as well as navigation of the website.
Fig. 4 MLB website grid alignment
Similarly, the MLB website is also divided into several grids that help in aligning the main texts as well as other links to other articles. However, the major difference in the alignment of the two websites is that the MLB website has two major grids for alignment while that of the NFL website has several grids within the page for alignment. The grids are highlighted by the blue lines in the pictures.
Repetition
This is the reusing of similar elements throughout the design. This means that the website will have a clear sense of consistency, unity, as well as cohesiveness (Kittle, 2020). Repetition is important in a website because:
It coherently organizes information.
Guides the audience.
Helps the users in interacting with the website
Makes people feel comfortable
W
hen contrasting the MLB and NFL website, it is apparent that the most notable element of repetition is the navigation. It is repeated in all the pages of the website for ease of navigation.
Fig 5. MLB repetition of navigation
Fig 6. NFL repetition of navigation
Similarly, other elements such as the logo are subject to repetition and are consistent across all the pages. Besides, there is a repetition of colors in all the links within the texts as they are given a blue color. This enhances the navigation of the website.
Contrast
In this design principle, the difference between the two elements is emphasized. It enables a web designer to create visual interests thus directing attention to the user. There are different types of contrasts including color, size, and alignment and they are crucial for separation as well as hierarchy for ease of readability.
The MLB website depicts great utilization of contrast of color, image, as well as alignment to show the different types of information. For instance, the main headers are bolded and are increased in size compared to the normal texts and the sub-headers are also b
olded although they are similar in size to the normal texts.
Fig 7. Size and color contrast of MLB website
This is also similar to the NFL website which uses contrast in colors to differentiate between the texts like the heading as well as the normal texts as shown below. In the same manner, the links in both the websites are given a blue color thus showing contrast.
F
ig 8. Size and color contrast of the NFL website.
Conclusively, the main function of design is not to decorate but is rather a means of facilitating communication. This means that all the elements including repetition, contrast, proximity, and alignment are crucial for the readability and usability of the website. Therefore, these web design elements are essential for a functional website.
References
Gestalt Theory for UX Design: Principle of Proximity. (2017). Retrieved 4 March 2020, from https://uxplanet.org/gestalt-theory-for-ux-design-principle-of-proximity-e56b136d52d1
Kittle, B. (2019). How to Utilize Repetition in Web Design. Retrieved 4 March 2020, from https://www.cdgi.com/2019/03/design-principle-no-4-repeat-repeat-repeat-repeat-2/
Learning About Proximity in Web Design - Visual Hierarchy Blog. (2016). Retrieved 4 March 2020, from https://visualhierarchy.co/blog/learning-about-proximity-in-web-design/
Shillcock, R. (2013). Using Alignment to Improve Your Designs. Retrieved 4 March 2020, from https://webdesign.tutsplus.com/articles/using-alignment-to-improve-your-designs--webdesign-14501
