The viewer will learn about the importance of the Principle of Unity and see how to increase a site’s sense of unity by customizing hyperlink styles with CSS.
- [Instructor] The next principle of design we will examine is unity, or what some people refer to as harmony. In web design, you can achieve unity through a pleasing balance of the elements of design, like color, form, shape, and space. Another great way to keep the design cohesive and promote unity is to customize your hyperlink styles with Cascading Style Sheets. Simply put, unity refers to the pleasing arrangement of all the parts within a composition. In design, we're often trying to communicate some kind of idea, promote a brand, or evoke a feeling.
So in terms of design, you can think of unity as the relationship between the individual parts and the whole of the design, used creatively to express a particular idea or emotion. When a design is not unified or harmonious, it's pretty obvious because the design can seem either boring or too busy. And bland design is not engaging. Even worse, chaotic design is often so disorganized and unharmonious that the human brain rejects it.
So here's an example of a super unharmonious design. And I'll just scroll down so that you can see how not good it is. I'm sure you're thinking to yourselves, oh, I'd do that differently, I'd do that differently, (chuckles) I'd do that differently. Well, let me show you an example of more harmonious design. When done well, unity in a design presents the information in a logical structure. There's a nice sense of order with visual interest that really engages the viewer.
So, as you're scrolling through this design, you go, okay, that's nice, that's interesting, I like it. And you're curious to see what might be happening in the next section, so you'll continue to scroll down. It's not exactly the same as the previous section, but it still holds your interest as the viewer until you get to the bottom of the page. Along with choosing appropriate fonts, colors, shapes, lines, photos, textures, and other decorative elements in a web layout, and then using your alignment and distribution buttons to evenly space and distribute these various site elements, as a designer, you also need to consider the unity of the user's experience.
For instance, how will hyperlinks look and behave differently from regular text? This too, is a design decision that can detract from or assist in achieving unity. After all, you can create several sets of link styles depending on their location and function within your design. For instance, you have navigation links, inline text links, featured item links, buttons, icons, and footer links. As you likely already know, the default appearance for hyperlinks is underlined in blue for unvisited links and underlined in purple for visited links.
What you may not know, however, is that you can override these settings with CSS. There are four link states that you can style with CSS, Link, Visited, Hover, and Active. Keep in mind, however, that on touch-enabled devices, the Hover state is irrelevant. The most obvious change you can make when styling your hyperlinks to improved unity is to edit the color to match your layout. In addition, for each of the four link states, you can turn the underline on or off.
You can add a background color behind the text. You can work with borders or even change the font. Remember, however, when you're styling your links, not to go overboard, as extreme complexity leads to over-stimulation. Links do not need to scream, click me, to the visitors. Conversely, don't be too timid, since too little styling can lead to under-stimulation. With unity, you're seeking a dynamic equilibrium.
So remember, customizing your hyperlinks is a really great way to enhance the visual unity of your site's designs and interactively engage visitors in a satisfying way.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices