Design For Non-Designers

I recently sent an email to some peers at my fellowship about “Design Resources” which got some positive responses. I decided to expand on those thoughts and thus this blog post was born. Hope you find it handy and if you are a professional designer, please help me correct my inevitable inaccuracies.

Design for Non-Designers
Photo Credit: NathanaelB via Compfight cc

Everyone does design work, so let’s get better at it

I’m not a designer. I have no formal training in art or design and I have not worked in the design space professionally.

And yet. I have designed. I have designed posters, presentations, websites, marketing collateral, business cards, spreadsheets, blog posts and more.

If you have ever participated in the creation of something that humans would use, read, or otherwise interact with, then you have done design work. In a sense, we are all amateur designers. In a perfect world, we could have professional design resources on hand when producing something important. In practice, that’s often not possible. So it behooves us to learn a bit more about how to design well.

As a non-des- I mean amateur designer – I’m either the worst person, or the best person to be writing an article about helping other amateur designers improve their craft. For what it’s worth, I’ve been told that my work is well-designed “for a non-designer” and I’ve learned tons from designers I’ve worked with like Suelyn Yu, Randy Pang, Al Abut, Seth Warrick, Garry Tan and David Merkoski.

But anyway, it’s my blog so I’ll do what I want. Let’s do it!

Above All Else, Remember Your Audience and Your Purpose

Who is your user/audience and what do you want them to do?

This is the most important question you can ask when designing something. Products are meant to be useful and design enhances it’s usefulness in some way.

  • A resume should highlight your strongest achievements for that specific recruiter and encourage them to contact you for an interview.
  • A targeted landing page for a invoicing software should convince freelance programmers to dive into a case study about the product or try a 30 free trial.
  • A photo sharing app should to help new parents easily and delightfully share photos of their kids with the entire family.

Keeping your purpose in mind allows you to not get bogged down in “what color should this button be” and more about “what will get this set of people to have a particular experience”.

General Guidelines

Some general things to keep in mind when designing most anything.

Focus / Simplicity

Our brains are easily distracted. Sometimes design is used to overwhelm and overstimulate, but I believe the best design is focused. Don’t try to do too much on any one slide, page or even sentence. Keep it simple and it’ll be a lot hard to f*** things up.

White space

Have you ever read an old book where the font is small and the text is really tight? It’s the worst. White space is about creating open space between elements on a page/screen.

Giving elements a lot of white space is good because 1) it forces you to make decisions about what you want to FOCUS on, as per the earlier point and 2) it gives each element “breathing room” to live and establish itself.

Resources for white space

Alignment

Well designed pages have an alignment system. The Bootstrap front-end framework uses a grid system that makes it easy to split things in half, thirds or quarters. Whether or not a grid was explicitly used, most well-designed rooms, documents, webpages etc tend to have a clear alignment.

We tend to notice when things are out of alignment and that distracts people  from the main purpose you have for them. And if you get anything out of this presentation, it’s never to do the “stair case” as a way to make your headline look interesting.

STAIRCASE
IS A POOR WAY
TO ALIGN YOUR TEXT

Consistency

Similar to alignment, we tend to notice inconsistencies from things we expect to look similar. If all your headings are 24pt font except one, it’s confusing. Use consistent colors, fonts, language, element styles etc unless you are specifically trying to emphasize a difference.

Color

A common mistake I see people who want to make their stuff “prettier” is that they try to put in a lot of different colors. This is almost always a mistake because getting color palettes right is really hard. Some colors really clash. Try to stick to 1-2 colors, use a premade palette and consider what emotions a color produces. See more in resources.

Resources for color

Design Hacks

Having gotten some guidelines, here are some quick and dirty ways to quickly improve the design of something.

Model / Borrow From Others

Don’t reinvent the wheel if you don’t have to. Before starting any design project, it’s well worth the time to look at other examples of what you’re making. Notice what you like and what you don’t like. Model your work after someone who DID spend a ton of design resources on their project.

Resources for modeling

Off the Shelf Design

In many cases you can even get off the shelf designs for whatever you’re making. Don’t be afraid to use templates – whether they are in iMovie project types, WordPress themes or Powerpoint master slides. They serve as a great jump off point and are often very affordable.

Resources for off the shelf design

Brilliant Photography

Great photography makes everything look and feel better. Photos of faces is extremely attractive to the human brain, and blurred photographs are great backdrops for headline text.

It’s important to be careful with licensing and rights for photos, especially when using it for commercial products. Sticking with creative commons or buying royalty-free photography is a good idea.

Resources for photography

Clean icons

Sometimes you can’t get a photo to express what you’re looking for or the style of what you’re creating doesn’t work well with photos. The alternative is using clean icons. Using vector based icons (or at least icons that start at high resolution) allow you to associate your words with visuals that will enhance the message.

Whatever you do, avoid clip art like the plague. That stuff should have died in the 90’s but it appears to live on, especially in corporate presentations.

Resources for icons

Typography

The right font can completely change the feel of a presentation, website or document. We have strong associations with certain kinds of fonts: College vs Western vs Futuristic, etc

Like with colors, it’s easy to overdo fonts. It’s recommended to stick with one or max two different fonts that are somewhat unique. There are recommended font combinations as well as certain fonts that have a lot of weights so you can use the same font family while varying the visual look.

More resources on typography

Copy

Most things you design will have words on them. Those words matter a lot. If you care about the design of your work, you must care about making sure your copy is best it can be. Obviously it depends on what the purpose of the product is for, but some general tips include:

  • Breaking up walls of text into smaller paragraphs, ideally with sub headers
  • Avoiding formal language and writing more conversationally
  • Varying sentence length.
  • Trying not to rely on commonly used phrases or cliches

More resources on copy

Resources

Here are some great resources based on some of those design guidelines and hacks.

Whitespace

  • Whitespace – an short, easy-to-digest primer on whitespace
  • 3px of padding makes all the difference in the world – Y Combinator partner (and Ridejoy investor) Garry Tan shows how even a tiny bit of white space makes a big difference
  • My Problem with White Space – a lot of people feel the need to fill the entire screen/canvas with “stuff” and whitespace can feel like empty space. This designer shares how he overcame the challenge of allowing whitespace.

Color

  • ColourLovers – a great site for custom color palettes (combinations) created by designers that are far more likely to go well together. Color combinations are tricky.
  • Why Facebook is blue: The science of color in marketing – the Buffer team writes a useful and accessible introduction to color theory and the impact of color on websites

Modeling

  • Smashing Magazine’s Inspiration category – a great website on design, this category showcases the editor’s best finds and can serve as good models for your own work
  • SpeakerDeck Featured – SpeakerDeck is a great place to host presentations and they’ve selected some great ones that you can model off of for your own presentations
  • Pattern Tap – a library of real world examples of web design, from contact pages to pagination to search to testimonials
  • Mobile Patterns – similar to Pattern Tap, but focused on screenshots of iOS and Android apps

Off the Shelf

  • Keynotopia – an amazing set of elements for Keynote and PowerPoint that can be used to mock up websites and apps. But also useful as communication elements in decks.
  • Creative Market – an online marketplace that sells affordable fonts, graphic elements, icons, wordpress themes and more
  • Themeforest & GraphicRiver – more marketplaces, the former focused on themes for WordPress, Drupal etc, the latter being graphic elements like icons, logos, print templates

Photography

  • Compfight – a great search tool for beautiful Creative Commons license photos that you can quickly download in a variety of formats. I found the cover image for this post on compfight.
  • Unsplash – a collection of evocative, high res, and copyright free photographs that grows every 10 days

Icons

  • TheNounProject – a giant and growing collection of flat icons to describe just about any concept, object or situation
  • FontAwesome – a huge set of clean icons that can be used in websites (and hacked to print if that’s what you need)

Typography

  • FontSquirrel – a site that lists tons of free desktop fonts you can download and use in things like Word Docs, PDFs, Powerpoint etc. Overwhelmed? Try Open Sans.
  • Google Web Fonts – similar to FontSquirrel except for fonts that would appear on a website. A little technical but fairly easy to implement.
  • 19 Top Fonts in 19 Top Combinations  – exactly what it sounds like: a designer has compiled the top 19 most popular fonts into 19 great combinations. Downloadable PDF.

Copy

Please support this site by sharing:

Jason Shen

Jason is a tech entrepreneur and advocate for Asian American men. He's written extensively and spoken all over the world about how individuals and organizations develop their competitive advantage. Follow him at @jasonshen.

Latest posts by Jason Shen (see all)

Related Posts:

7 Comments

·

Leave a Reply

  1. Hi Jason
     
    I am glad you found Themeforest & GraphicRiver to be useful and a big thanks for mentioning them in your article. 
     
    Saijo

  2. Hey,  I really impressed on your presentation.  always prefer to read the quality content and this thing I found in you post. Thanks for sharing.  Best place for newbie.

  3. Want to create your own website on WordPress themes and want to hire an wordpress agency for your website than i suggest you the One Mega Workers ..

    http://www.megawebpackage.com

    <a href=”http://www.megawebpackage.com” title=”Wordpress Agency” rel=”dofollow”>Wordpress Agency</a>
    <a href=”http://www.megawebpackage.com” title=”Wordpress Themes” rel=”dofollow”>Wordpress Themes</a>

  4. <a href=”http://www.wattpad.com/user/NikoleEdwards”>nikole edwards</a>
    <a href=”http://www.storenvy.com/nikoleedwards3″>nikole edwards</a>
    <a href=”http://www.whitepages.com/name/Nikole-Edwards”>nikole edwards</a>
    <a href=”https://twitter.com/NikoleRae_044″>nikole edwards</a>
    <a href=”http://vimeo.com/nikoleledwards”>nikole edwards</a>
    <a href=”http://www.pinterest.com/kolie8/”>nikole edwards</a>
    <a href=”http://www.pinterest.com/nikkilynn77/”>nikole edwards</a>
    <a href=”http://www.youtube.com/user/clutchv1120″>nikole edwards</a>
    <a href=”http://www.linkedin.com/in/elysiumllc”>nikole edwards</a>
    <a href=”http://www.linkedin.com/pub/nikole-edwards/46/234/85″>nikole edwards</a>
    <a href=”https://plus.google.com/+nikoleedwards/posts”>nikole edwards</a>
    <a href=”https://www.facebook.com/nikole.edwards.90″>nikole edwards</a>

  5. Just want to add http://copywritercollective.com/ on Copy section also a useful source for copywriting.  Sometimes it is essential to take note that the content as well as the images and photos that were added on a website match with the design.  Useful article indeed!

  6. Hi Jason! This is some great stuff and you do some great work (and I’m not going to say “for a non-designer” because it appears you’ve earned the title of “designer”!) I am a designer of about 17 years (just recently started a freelance career too!) and I just started my own blog teaching non-designers too. You’ve got some great stuff here and if you ever want to collaborate, I’m happy to assist! You can check out my site at TeachMeCreative.com. Be warned, though, I may be a designer but I’m a newbie at blogging! ;)

Comments are closed.