DEV Community

Tracy Osborn
Tracy Osborn

Posted on • Originally published at hellowebbooks.com on

Design for Non-Designers (Part 1)

Even if you’re not a designer, I’d bet that at some point in your career you’ll need to do something visual, whether it’s making a landing page for your project, designing a form, creating your personal website, or making slides.

So, part one — what’s the one main thing to remember when designing?

Reduce clutter.

That’s it. Focus on just this one thing. If you want your design to feel more beautiful, reduce visual clutter.

Ugly widget
Our ugly widget that we’re going to apply design concepts to.

I made these little widget to help illustrate these clutter-busting tips. As we go through the concepts below, we’ll apply them to the widget and see how it starts to look more cohesive and visually appealing.

Let’s get started!

Reduce clutter by adding a grid to line things up.

Foundation front-end framework
Image via the Foundation front-end framework.

There’s an anecdote often told about the strife between designers and front-end developers: A designer gives a mockup to a developer, who implements the design in code. The designer then complains that so-and-so element is two pixels off, causing the developer to roll their eyes — two pixels? That’s so small it shouldn’t matter! Silly designers and their nitpicking!

However, small misalignments might be hard to see, but contribute to a feel of “clutter” within a design. Elements can feel randomly placed and not harmonious when they’re not aligned with each other.

Before/after lining things up
Which looks more cohesive?

It’s easy to add accidental misalignments by accidentally adding extra padding and margins to headlines and content. In the example above, the screenshot on the right has even margins and padding, and all the elements are aligned to the same left grid, leading to a more cohesive and professional-looking design.

Lining up stuff in our widget
Lining up the left and right edges of everything makes the widget look a bit more cohesive.

In our example widget, the left and right margins were all over the place. Aligning those margins instantly makes the widget feel less chaotic.

In short, reduce the clutter-y feeling by lining things up.

For web work, use shortcuts by using front-end web frameworks that include a grid, such as Foundation, Bootstrap, Skeleton, and PureCSS, which’ll make it near-impossible to use random placement of HTML elements.

For non-web-design work and mockups, you can also use grids and guides within design programs like Sketch, Photoshop, and Gimp.

Reduce clutter by limiting the colors in your design.

It can be super tough to choose colors, one of the reasons why color theory is often a semester-long class at design schools.

GoDaddy before and after
Old GoDaddy site versus current.

One thing we can see in the old GoDaddy site above is the sheer numbers of colors used throughout the design. Red, green, orange, dark grey, light grey, yellow, and blue all are featured — and this rainbow display of colors contributes (along with other factors) to a severe feeling of clutter.

The current GoDaddy website is much cleaner, using the same shades of black, green, and orange throughout the design. The photo is also mostly gray, allowing it to fade to the background and let the green button on the form stand out.

There is a lot of theory and best practices behind choosing colors that would overwhelm this article, which is why here especially I advocate for using shortcuts.

The Adobe Color CC website has a great point-and-click interface to build complementary color palettes.

Choosing a color palette from scratch is a tricky business, which is why I like to rely on websites that showcase pre-built color palettes or help you build palettes from a base color, such as Colormind, Adobe Color CC, and Colorblendy. These sites will help you build a palette that contains a small number of colors that work well together.

Applying a color palette to our widget
Applying a color palette.

For our widget, we grabbed a palette and applied it to the widget. Note that not all colors have to be used, and the neither does the exact colors specified in the palette. The new “Download” button is not quite the same dark peach as in the palette, but the palette gave us a great starting point.

If you’d like to learn more about the process of building colors, I’d recommend this excellent article on Smashing Magazine: A Simple Web Developer’s Guide To Color.

Reduce clutter by reducing the number of fonts you use.

Thank goodness we have more fonts available to us now! Gone are the days of only having a few fonts to choose from.

Typography is another big subject that can be overwhelming. Serif, sans-serif, monospace, display, web-safe, and slab are all terms used to describe and categorize fonts and typefaces (terms which are generally used interchangeably for non-typographers).

There are a lot of guidelines when it comes to choosing a font but I like to recommend just two to start: Use only two fonts per design and avoid fancy/display fonts.

Updating the typefaces on our widget.
Using only two typefaces makes the widget look and feel cleaner.

Our original widget on the left uses four different fonts, and our refreshed widget on the right uses just two. The new widget uses styles like italics and all-caps which still lends a feeling of difference between different elements but overall feels more cohesive.

But choosing two fonts with all the options we have available can still be overwhelming. Sites like Typekit (free to $99/year) and Google Fonts (free) are great resources for professional, beautiful fonts, but contain hundreds of options to choose between them.

Use sites that curate free fonts like Typewolf, Beautiful Web Type, Font Pair, and Typ.io.

Reduce choice by using a font-curation site to see a more limited number of fonts and see them in action. A number of websites list the best Google Fonts available, including Typewolf, Beautiful Web Type, Font Pair, and Typ.io. No longer will you need to scroll through hundreds of fonts—simply browse these sites until a combination feels right for you and your situation.

For more about choosing typefaces, check out this excellent Smashing Magazine article: How To Choose A Typeface — A Step-By-Step Guide.

A Book Apart also has an excellent book that goes into web typography in detail: On Web Typography

Reduce the feeling of clutter by adding whitespace.

Whitespace is the ultimate clutter reducer.

We have a tendency as beginning designers to push too much information close together. Large, empty gaps feel uncomfortable and unnatural and beginners often have the urge to fill empty space (otherwise known as whitespace or negative space) with information and elements.

Before and after adding whitespace to my personal website.
Before and after adding white-space to my personal website.

However, whitespace in design (the margins and padding around our elements as well as space between our text and letters) makes our words more readable, our interfaces less chaotic, and our designs feel more professional.

Before and after of adding whitespace to the widget.
Adding whitespace (and normalizing the space between elements) makes the widget feel more professional.

By adding whitespace in a number of places in our widget — between the content and the edges of the green background, between the headline and the paragraph, between the individual lines of text, and within our form — our widget feels more professional and is easier to read.

There isn’t a good shortcut to use here, just a reminder: Use more whitespace than you think you need. Make sure your elements in whatever you’re designing has plenty of margins and space between them, that your text has plenty of space/line-height between the individual lines, and that your design has plenty of space between the content and the edges of the space.

For more, check out these excellent articles:

In conclusion, remember to reduce clutter for a better looking and feeling design.

The progress on our widget.
Each of the clutter-reducing principles applied to this widget has vastly improved its looks.

  • Line things up and use a grid.
  • Limit the number of colors in your design and use a complementary color palette.
  • Reduce the number of fonts used.
  • Add whitespace.

In short, aim for a “clean” and orderly design.

Of course, design isn’t just how it looks — more importantly, it’s how it works. Stay tuned for part two and part three of this article series, going into user experience as well as looking into the design process and tactics on how you can train your design eye.


This is a three part series on design for non-designers. See Part 2 about user experience here and Part 3 about training your design intuition here.

Hello Web Design

You can get even more info and tips in my book! Hello Web Design will contain not only the above information but also theory and best-practices in down-to-earth and easy-to-understand terms aimed at programmers and non-designers.

Order Hello Web Design Prices start at $24.95 for the eBook.

Thanks everyone! For any questions, follow and message me on Twitter.

What do you think? Anything I missed? Let me know in the comments below!

Top comments (17)

Collapse
 
emmabostian profile image
Emma Bostian ✨

Hey Tracy! Nice article :) I fully agree we should reduce clutter! You should also mention accessibility when it comes to color palettes though :) The gray on green in your sign up modal probably doesn't meet W3C color contrast and we love our sites to be usable by all! :)

Collapse
 
tracymakes profile image
Tracy Osborn

That's a great point, even more reasons why it's a bad choice!

Collapse
 
ermengolbota profile image
Ermengol • Edited

Nice article,
I also think that CRAP design principles are also very useful (as the use of whitespace you did) when teaching, in very few hours, design to non designers students.
Btw, interesting web references, thanks

Collapse
 
katieadamsdev profile image
Katie Adams • Edited

As somebody looking to freelance in web development work, this is great advice. I've definitely not got the head for design as much as I do development.
To build on your mockup point, NinjaMock is a fantastic website for designing wireframes for a website. Used simply, it can help provide clarity in transferring the ideas in your head onto paper. Used properly, it's an insanely powerful piece of kit that can plan out multiple aspects of a site - including mobile sites!

EDIT: also FontSquirrel is another site I use interchangeably with GoogleFonts

Collapse
 
jrc86 profile image
Jonas

This is exactly what I need.

Collapse
 
tareefdev profile image
Tareef Mando

Hey Tracy, in the article you mentioned that the Hello Web Design ebook price starts at 14.95$. I opened the link and found the price is 24.95$. Is there something I missed?

Collapse
 
tracymakes profile image
Tracy Osborn

Ack, thanks for catching that. I raised the prices since I published the article (cross-posted to dev.to recently but the article was originally published on my website awhile ago.)

I'll fix the article here, and in the meanwhile, send me an email tracy@hellowebbooks.com and I'll send you a discount code to bring it back to the originally posted price.

Collapse
 
tareefdev profile image
Tareef Mando

oh, thanks, done!

Collapse
 
sdq121 profile image
Oyebola Sodiq

Very nice.
I wish I had read this article a long time ago.
Very educating.

Collapse
 
claudiobernasconi profile image
Claudio Bernasconi

Spacing, Fonts, Layout. Three (when mastered) somewhat simple yet massively useful tools to declutter user interfaces.

I would by no mean consider myself a user interface expert, but getting the basics right has helped me out a lot.

Who hasn't had the countless conversations where a new feature should be discussed, but the discussion derailed to a user interface conversation? I've been there, done that.

Applying some basic rules helps not only avoiding discussions like these, but it also makes a better impression of our work as developers. We don't need to be designers, but some basics help a lot.

Thank you very much, Tracy, for sharing this information with us and for taking the time to write this article.

Collapse
 
bigschatz profile image
bigschatz

Wonderful article Tracy!

Thank you for taking the time to write it. I am so on board with the idea of reducing clutter, this principle can be applied to other facets of your life.. pretty much every facet. Ha!

Collapse
 
ndiecodes profile image
Ndifreke Friday

My favourite article on here, bless you!

Collapse
 
tracymakes profile image
Tracy Osborn

Yay! That's awesome to hear. :D

Collapse
 
scrabill profile image
Shannon Crabill

Great read! As someone who has a design background, I wish I had clearer tips like this when it came to designing for the web.