![]() UX Booth also uses font styling to create similarity between the posts to the right of the main image. This allows users to discover and understand that blue buttons with ellipses will take them to pages with more information. Even though the blue buttons are located in different places (in the main body and on the right hand side), they are styled the same way. The blue buttons are to learn more about whatever content they are below. The red buttons for search and subscribe are attached to input boxes, and make actions happen immediately. One last thing to note here is how SM has two button styles for calls to action (CTA) on their homepage: a red button for search and subscribe, and blue buttons whose text ends with an ellipsis (“…”). Large size, dark colour: they’re headings! Calls to Action Even if you scroll down the page at breakneck speed, you can identify the individual posts by their headings. ![]() Even though you can only see one post in this image, it’s clear that it’s a blog heading. The headings for each post are the largest font, with the heaviest weight. When a link is hovered, the bar to the left of the category contents becomes more pronounced, making the category hierarchy clear. Additionally, colour is used to separate the categories. Sub-categories are lighter grey, have only the first letter of each word capitalized, and have a normal font weight. Top level categories (Coding, Design, Mobile, etc.) are are dark grey, written in all capitals, and have a heavier font weight. The links in the left hand navigation menu are grouped using colour and typography. You can immediately identify each of these kinds of links as you scan the page. If you scroll down the page, the links are consistent. The tags and comments are obviously links (same light blue) even though they aren’t underlined.The name of each post’s author is slightly larger, and light blue.Links in the body copy are light blue, underlined in grey.Let’s start by looking at the links in the page content: Figure 1: Smashing Magazine Landing Page Content Links Links in the content, and navigation links. There are two distinct types of links used on the Smashing Magazine landing page. Let’s examine how Smashing Magazine (SM) uses the principle of similarity in their links and calls to action. Let’s look at some examples of popular UX sites, and how they use colour, shape, and size to convey similarity. In general, if you’re consistent (even if you’re consistently bad), people will learn what to look for and how to use your interface. Sections of your site that are related should look the same. Making elements look similar to convey that they’re going to do the same thing, or are somehow related, is often a matter of being consistent in style. Similarity and consistency are two sides of the same coin. There are other characteristics like texture, orientation, and dimension, but they aren’t as common, and in most cases aren’t as important. The three most common characteristics used to create similarity are colour, shape, and size. The principle of similarity states that things that share similar visual characteristics are perceived to be more related than things that are dissimilar. In this post I’ll be looking at the principle of similarity, and how you can use it to become a better designer. In part one of this series, I looked at the figure/ground Gestalt principle.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |