Learn Web Design: Simpler is Better

By on May 2, 2016 in How To
Learn Web Design: Simpler is Better

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:

photo bannerPin It

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!

photo bannerPin It

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.

photo bannerPin It

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?

photo bannerPin It

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.

photo bannerPin It

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.

photo bannerPin It

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.

photo bannerPin It

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.

photo bannerPin It

With all this nice, available copy space, we can drop in the same headline that we created in our last version.

photo bannerPin It

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:

photo bannerPin It

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:

photo bannerPin It

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.

photo bannerPin It

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:

photo bannerPin It

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.

photo bannerPin It

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.

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

6 Comments

  1. Living in a small town where many designers stop at step 1. Trying to do the difference and your tips trigger my energy to do that.

  2. Great teaching! I love the step-by-step using actual design. It's much better to see design versus simply reading about it.

    I would love to see an example of over-designing this ad. You know, in a way that many people may think is okay. We can all imagine an over-the-top version of this ad. But what about an example of subtle overkill?

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →