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 sixth element of design is Space. All designs deal with space whether you've deliberately addressed it as an element within your design or not. Positive and negative space is created automatically by elements in your design. It's how you use these spaces that determine not only the layout's organization, but also the ease with which your site visitors understand how to comprehend what it is that they're seeing as they navigate through that space. When we speak of space, what we're actually referring to is the whitespace.
That is space is the intervals, areas, or measurable distances between all of the objects or items in a design. That's right, we're talking about the space between everything and how that space is part of your design. In fact, it's really important to leave some areas in your design completely blank, and you should resist the temptation to fill in all the gaps with stuff. Why would you want to do this? The answer is simple. So that the eye has a place to rest between and around the elements.
And so that the person looking at it can easily distinguish the more important information from the less important information. In web design, we often see lots of space in the header so that the eye can quickly identify the logo, the navigation, and any other information that might be important. I'm going to scroll down a little bit here so you can see the next section. Space can also be effectively used in the body of the page as with the set of thumbnail images on e-commerce sites, and closeup images.
Space can also be effectively used in social media bar or in a balanced empty space in the footer. So, here's another section. Lots of clean open space in the footer. Lots of breathing room for the eye to travel around. There are three websites I'd like to show you now that use space beautifully. The first is colorkite.com. Here, they've created a wonderful sense of breathing room. Everything is neatly organized and nothing feels cramped or crowded.
Let's take a look at what they've done here. Look at all that whitespace. It's just easy to look at. The next site is Ivan McClellan who's a designer. He has very little content here. He uses space in a wonderful, innovative way. Each section is wide open so that there's no awkward overlapping. And the eye can really have a chance to rest between here and there. So let's scroll down and see what he's done. He's got parallax scrolling going, all that clean open space, it's really fresh like being outside.
Space between the sections since everything is on a single page, organized neat and really lovely. The third site I want to show you is rule-of-three.co.uk. Here, everything is contained on a single long page but the way they've designed the site to be experienced you know, it really allows visitors to take in the content in a unique way. The space is everywhere here. So, let's slowly scroll through this and you'll see what I mean.
Things pop into the frame as you slowly scroll down. Every section is interesting, doesn't feel crowded, easy to communicate so that you can read the little blurbs that pass by, there are simple illustrations. And let's go a little bit faster, so we can see what else they've done. Clean central line design. Even spacing. It's really lovely. Don't be afraid of creating an open, airy layout in your own designs.
And be willing to break some rules for the sake of interest. Vary the space throughout your pages to keep your visitors engaged and interested. For best results, space should be considered as an integral element throughout your entire web design process. Use space by evenly distributing your elements or by varying the space between the elements throughout your site. However you use it, always attempt to use space deliberately in your designs. Make it a considered element. Look at the positive and negative shapes in your layout to see how they help or hinder your design.
Don't be afraid of leaving whitespace in your layouts. And above all, remember that empty spaces give the eyes a chance to rest between your objects and they really help viewers understand which parts of the designs are most important.
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.