The student will gain an understanding about the element of Space is and how it can be used effectively in any web design.
- [Instructor] 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, spaces 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 gonna 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 this set of thumbnail images on eCommerce sites and closeup images. Space can also be effectively used in a 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. 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's 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, 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.
It doesn't feel crowded. Easy to communicate, so that you can read the little blurbs that pass by. There's simple illustrations. Just go a little bit faster so you can see what else they've done. Clean center 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.
- 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