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.
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”.
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.
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.
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.
IS A POOR WAY
TO ALIGN YOUR TEXT
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.
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.
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.
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.
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.
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.
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.
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
Here are some great resources based on some of those design guidelines and hacks.
- 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.
- 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
- 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
- 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
- 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
- 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)
- 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.
- Copyblogger’s Copywriting 101 – a collection of time-tested blog posts by one of the most influential copywriting blog posts on the web. Requires creating a free membership.
- Conversational writing kicks formal writing’s ass– Kathy Sierra is a key inspiration to my obsession with kicking ass and this blog post is still awesome, even 8 years later!