Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
A basic understanding of the principles of good design (such as contrast, unity, and balance) is the foundation for creating beautiful websites. In this course, Sue Jenkins explains design aesthetics in simple terms, and shows how to incorporate the principles of design in specific ways that improve your site. Learn how to adjust adjacent colors to add contrast, create depth with texture, incorporate movement, and use repeating shapes, patterns, and borders to unify your design. Then, in the final chapter, learn about special issues designers should address in their web layouts, such as responsive design for mobile devices, accessibility, and originality.
The next principle of a 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, I'd do that differently. And let me show you an example of a more harmonious design. When done well, unity in a design presents 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? These two 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, in line 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 underline 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 understimulation.
With unity, you're seeking a dynamic equilibrium. So, remember, customizing your hyperlinks is really a great way to enhance the visual unity of your site's designs. And interactively engage visitors in a satisfying way.
There are currently no FAQs about Design Aesthetics for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.