Welcome to the eighth lesson of our Web Design for Kids series, “design basics”!
Throughout this series we have focused on bringing a design to life, but we haven’t yet talked about the decisions that went into that design to begin with. In this tutorial we’ll walk through some of the basic design concepts that are part of making a good website.
Don’t forget to ask any questions in the comments section at the bottom of this page!
Something else we’ve talked a lot about so far is the user (or visitor). Every decision we make in web design and every design concept we talk about in this tutorial all have the same goal: to make the website as easy to use and understand as possible.
Design is all about solving problems. If our users find it hard to use our website they will simply leave. It’s our job to get rid of any difficulties for them, make it easy to read and give them an overall super-enjoyable experience. Our decisions involve things like content, organization, layout, empty space, graphics, color, and typography.
Content is the single most important part of web design. It won’t really matter how pretty our site looks if we don’t have content that users want to read. One thing we can ask ourselves when wanting to build a site is “Do people need this?” and if so, “What information is essential?”.
It can be tempting to include as much content as possible on a website. Cleaning up and narrowing down content will actually help the user get more information in the end, because what’s important won’t get lost on the page.
Content Organization and Layout
Once we have our content ready we need to organize it into categories, or relevant groups, so that the user can find everything without trouble.
The best website will flow very naturally and make sure the user doesn’t have to think too hard about where something might be.
The Tuts+ Town website doesn’t have a lot of content, so we were able to center align everything and highlight our lovely images. If we were to have more text on the site, however, this particular layout might not work as well.
To make sure our site is easy to navigate and enjoyable for the user we need to think about its look and feel. This is where images, hierarchy (making it clear how important everything is, compared to everything else), typography, and color come in.
Graphics and Images
At this point we know all about using images on a website. We included four images on our Tuts+ Town site and walked through the different types of images to use on the web in a previous tutorial.
When and where to use these images and graphics is also important to think about. All of the images included on our Tuts+ Town site made sense next to the content they were placed with. For example, our website is about Tuts+ Town, so we have a neat image at the very top of an important building in our town. The three images to follow this one are related to the groups of businesses next to them: hotels, restaurants, and general shopping.
We used these images to give the user a better sense of the feel of the town, as well as what the shopping will be like in our beautiful buildings. It’s important that we don’t grab a user’s attention with an image that has nothing to do with the actual content it’s with.
Icons are small graphics that are used to represent something.
A good icon is well understood and can make finding important bits of information on a website a lot faster.
Here are some examples of especially useful icons:
There is so much we can communicate without using text at all and using icons in place of text in the right situation will give us a cleaner, easier to use site.
Visual hierarchy is all about choosing what stands out and showing the relationship between information. The hierarchy of the parts of a website can be shown through a number of different styling choices, such as: color, size, use of empty space, and positioning. All of these choices will help tell to the user what’s super important, what’s not as important, and what information is related.
Hierarchy is not only shown by the size of our text and images, but also by their distance from each other. Similar content should be grouped close together and distanced from unrelated content.
This image of Tuts+ Town sky has been designed to make sure that the balloon grabs the viewer’s attention first, followed by the clouds. Everything else in the images has been made less clear to make sure the balloon and clouds stand out more.
The above image shows a change in what we focus on first. Do you find that you see the clouds first this time, then the balloon?
There’s a lot going on in this image and we are not quite sure where to look first. There’s no color change, no organization, and no spacing to tell us what’s important, making it a bit hard to follow.
Whitespace is the empty space on a site; it doesn’t have to be white though! It’s those spots where there is no text and no images. Where we choose to have this empty space is really important because it determines what parts of a site stand out and how well we can read the content.
The image above is an example of a site that doesn’t use whitespace well. There is a lot of content and images and not enough space between them all to show us what is most important.
So, let’s see if we can clean this up!
Much better. We threw away some non-essential content and created a hierarchy with a lot more whitespace and better organization, making it easier to read.
Tuts+ Town Whitespace
The whitespace we used on our Tuts+ Town site is actually light yellow.
We have large spots of empty space to the right and left of the page, as well as between the images. This space helps highlight our content while making sure nothing is too cluttered.
Remember! It’s just as important to think about what’s not on the site as what is, and that’s where whitespace comes into play.
Typography & Color
Typography and color are so important to web design that they will have their own tutorials to follow this one, so we’ll just quickly touch on them here.
Typography is the art of selecting and arranging type in a way that makes it as appealing and readable as possible. While our Tuts+ Town site doesn’t have much text, there was actually a lot of thought that went into the font choice and arrangement of it.
Choosing colors is also a really powerful part of design. Colors have meaning and can help give users certain feelings about a brand or site. The Tuts+ Town colors help create a fun and welcoming feel for our town.
But again, we’ll chat about these much more soon!
In this tutorial we touched on some really important design concepts. After we have content ready we need to present this content to our user in the easiest, most orderly way possible.
Design is all about making things easy and enjoyable for people. We achieved this with our Tuts+ Town website through layout, images, color, and whitespace.
Next we will be discussing typography, the art of selecting and arranging type; one of the most interesting and fun parts of design.
See you around town!