Welcome back to our series on learning to be a web designer. Remember from last time that we’re not talking about code, like HTML and CSS, but the foundational principles of design. Simple lessons that will improve your ability to create an aesthetically pleasing end product for your clients.
Today we’re launching into our first important principle: simpler is better. This sounds so basic, right? It’s something that you probably already instinctively know, but you need to learn how to apply it in a real-world design situation. Let’s jump right in and see how it’s done with our first project.
Be sure to check out our first post in this series: 3 Common Misconceptions About Design
Video
Class Banner
Let’s imagine that you were given the task of creating a simple web banner for a free photography class at a local high school or college. No buttons, links, or crazy responsive design necessary, just a simple static layout.
Where would you begin? Typically, the first step would be to find out everything you need to know about the class: who it’s for, when it is, where it’s being held, that type of thing. Once you’ve got this information, you’d probably toss a nice little paragraph onto your page, like this:
We’re off to a good start, but everyone knows you need a picture to get people’s attention! At this point, most people do the same thing: they turn to Google images and find a crappy piece of clipart. If it was good enough for 1993, it’s good enough for us!
Now we’re really cooking. We need one final touch to make this thing work though: a nice, attention-grabbing headline. At this point, the average person would look through the default fonts on their computer for ten minutes, and invariably decide that Comic Sans is the best possible choice.
There we have it, our web banner is complete! Ain’t she a beauty?
Better Resources, Better Design
To be fair, this banner probably gets the job done. That being said, it’s no where near as good as it could be. As a sidebar to our main lesson about simplifying, let’s take a minute to talk about proper inputs.
A design is only as good as what you put into it, and in this case, we’ve put in a terrible piece of clipart and the most cliché, ugly font choice known to man. What if we actually took the time to find a great photo, like this one from Creative Market?
With that one change, we’ve made a lot of progress. Let’s take things even further and swap out our headline font. I realize that you won’t have a high end design budget for every project, so to compromise, I’ll use a completely free font.
You can find great, free design resources all over the web if you know where to look. In fact, we give away six amazing free goods every single week right here at Creative Market.
Doesn’t that look a lot better?
Simpler is Better
When I look at the banner we just created, I think it’s decent, but it doesn’t really look like it was created by a professional designer. Why not? What would a professional designer do that we haven’t?
As it turns out, we can improve this design pretty dramatically not only aesthetically, but from a messaging perspective. In our last post, we talked about how good design always looks to achieve a set of goals. Here, our goal is to tell people about this free photography class while knowing that, at best, someone might stop and look at it for a three to five seconds.
Three seconds is not a lot of time! Our paragraph of copy is not conducive to this goal, so we might need to rethink it. Before we do though, let’s work on this layout a bit.
Awkward Whitespace
Now, any good designer will tell you that whitespace is your friend. In fact, minimal, airy designs are very much on trend at the moment. That being said, structuring your whitespace is a bit of an art form. In our current design, we have lots of awkward, wasted space that could be much better utilized.
The really interesting thing about whitespace is that it’s not always white! We can have a fairly minimal design while still utilizing the entire canvas. Let’s give this a shot and scale that photo way up to take up the entire available background space.
Our original version was a little bit deceptive in its attempt at simplicity. Sure, it was just three items center-aligned in the middle of the page, but all that trapped, awkward whitespace made for a cluttered arrangement of objects. By maximizing the photo on our canvas, we simplify the layout dramatically while making a much more powerful visual statement.
The Headline
Notice how I didn’t simply scale the image up, I’ve also very selectively cropped it so that the camera occupies the bottom right corner, leaving lots of empty whitespace at the top left for copy.
With all this nice, available copy space, we can drop in the same headline that we created in our last version.
Tip: Astute observers will notice that I darkened the background image slightly to help the white text stand out. Contrast is an extremely important design principle that we’ll cover in more detail down the road.
The Paragraph
The final step is to drop in our paragraph text. In theory, we could use the paragraph in its current form:
This looks decent, but if we focus on our goal of quick communication, and apply our design principle that simpler is better, we can do a lot better!
As designers, it’s not only our job to make the visuals attractive. We’re tasked with making the entire package as user-friendly as possible. When you have the freedom to do so, this even applies to simplifying the messaging in a design.
If we read through that paragraph that we wrote earlier, we can easily pick out all the most important information:
In the spirit of simplicity, let’s pull this information out and ditch the rest. We’ll also solve our messy text alignment issues by using a strong left alignment.
Look how much better this is! We may have lost a bit of the original personality of the text, but we’ve simplified the messaging so much that it’s definitely worth it. This truly fulfills our original goal of something that can be read and understood in only a few seconds.
Going Further
Before we close out this lesson, let’s make one last tweak. One very popular technique that designers use to create a quick read is to replace words with images. If done tactfully, you can use imagery to further simplify your messaging while increasing the aesthetic appeal of your design. We’ll use a nice, minimal icon set to achieve this goal:
I think the icons really finish off the design nicely. We’ve cut our word count down to around a third of what it was to start without losing any of the important communication points. Now that’s progress!
All Done!
Looking back over our various iterations of the design, you can see how we started with a basic idea and kept chipping away at it until we arrived at something that was both attractive and simple while meeting the goals we set out for the project. This is the design process in a nutshell.
Be Careful
Just like any design principle, the idea that “simpler is better” is one that you’ll have to wield carefully. Obviously, there’s a point of diminishing returns where any further simplification will actually make the design worse. As a designer, it’s your job to identify that point and make sure your work doesn’t cross it.
Also keep in mind that rules are made to be broken. A good designer knows how to use core design principles to improve a design, and how to intentionally discard the rules to achieve an interesting and attractive result. Some really complex designs can be fantastic, but it takes a highly skilled designer to pull this off. When in doubt, go simple.
More to Come
Thanks for checking out our series on learning to be a designer. Check back soon for more foundational principles that will teach you to design with confidence. In the mean time, feel free to share any insight and tips you have in the comments below. We’d love to hear from you.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Making beautiful design simple & accessible to all.
View More Posts
