Designers who work on small teams do a wide range of activities. From customer research to front-end development, there’s a long list of skills to cultivate. Every designer chooses areas to develop more than others but visual design is almost always on the list.
Years ago, I became an accidental graphic designer on a TV show called Party Down. I didn’t know a lot about graphic design and so I tried to emulate things I had seen before. I used a lot of clip art and poorly designed fonts. I didn’t understand color or leading or kerning or font weight. I center aligned things I would never center align now. Oh, the shame…
Since then, I’ve been expanding my capabilities by taking classes and working on many, many production-ready designs. Through design critiques, feedback from customers and my own increasing awareness, I’ve learned some valuable lessons in functional aesthetics.
Here are some of those lessons:
1Use reputable font distributors/foundries
Some fonts are well designed to appear consistently sized and spaced. I’m not an expert in typography so I go to a few key resources to select fonts. I look at who designed the font, how many weights are available and if they have both desktop and web fonts. I also test words and sentences to see how the letters look in different configurations. Some fonts are uneven and require too much work to read. Other fonts work for print but aren’t available for web.
Resources:
- MyFonts
- Typekit
- LostType Co-op
- GoogleFonts — good for sans serif web fonts or designing for Android
- TypeThursday — a rad, type-focused meetup
2Choose color deliberately
When I first started designing, I would drag around the color picker until I found the general color I wanted — aka yellow, green, blue, etc. Now, I’m much more specific with the values of the colors. I start a project by defining a set of colors and then, I’ll adjust them as I use them in practice. I include:
- A primary brand color (also doubles as a call to action color)
- A secondary and tertiary brand color (usually less bold than the primary color)
- Lighter and darker shades of all the brand colors
- Three to five grays (light, medium, dark — either warm or cool — usually for text, disabled actions and placeholder content)
As a digital designer, I don’t have the luxury of color matching my work against the end result so it’s helpful to look at colors on different screens and in different lights. I also run my color combinations through the accessibility contrast checker to make sure they pass readability guidelines.
Resources:
- Coolors — color palette generator
- Material Design Color Tool — color selector that applies palettes to stand-in wireframes
- WebAIM Color Contrast Checker — for accessible, readable color combinations
3Balance your line, font and icon weights
One thing that took me a long time to understand was that I had to balance out the weights of every element I place on a page or screen. Icons should have equal border weights and equal widths. The easiest way to achieve this is to download an icon set that has been designed as a coherent whole. It’s also pretty simple to manipulate icons as long as they are vector.
As you add icons, borders, illustrations, buttons and text, every element added takes away focus from the other elements. Sometimes, you want to emphasize something like a heading or a primary button. Other times, you want everything to look evenly balanced. For example, it typically makes sense to use either illustration or photography, not both.
A few things to pay attention to:
- How fonts, icons, borders and buttons look together
- Rounded vs square edges (aka border radius)
- Hand-drawn vs digitally created icons or illustrations
Resources:
- The Noun Project
- UX Pin Icon Set
- Apple System Icons
- Material Design Icons — for Android design
- Font Awesome
4Define spacing and margins
Readable text is one of the most important aspects of a successful design. If you’ve chosen a well crafted typeface, you don’t have to worry much about letter spacing. Next is handling space between lines. In graphic design, the space between lines is called leading. In web design, we call it line height. One of my graphic design teachers said that as a general rule, in print, leading should be 1.25x the font size and in digital, 1.5x the font size. For example, if you’re using 12pt font, the print leading would be 15pt and the web line height would be 18pt. If you read the post below from Teehan + Lax, you’ll see there’s many nuances but it’s an easy guideline to start with.
Aside from text, you’re often dealing with fields, buttons, lists and other interactions. Consider the space you give text within a button or a list. Set guides in your design tool for padding around an element. Keep your margins consistent throughout your design.
A simple guide for margins and sizing is to use the iOS or Android templates for Sketch. You can use the standard interface components defined by Apple and Google and customize them for your app’s style.
Resources:
- Android AI Templates
- iOS Sketch Templates
- Thinking With Type — reference lessons from the famous book by Ellen Lupton
- Designing Faster with a Baseline Grid — from Teehan and Lax (RIP)
5Define reusable patterns
The web design community is quite passionate about styleguide and pattern libraries. Atomic design anyone?
It makes a project much easier to start with a set of components and reuse them until you need to customize it or add a new component. This is something I continue to struggle with but it’s easier if you build it into your process from the beginning.
Start with a small set of critical things you’ll need — navigation, type sizes, buttons, borders, lists, graphic element styles. Define those styles before you start working with them in situ. As you develop your functional designs, you’ll have, as David Hendee calls it, a “kit of parts” to style quickly. You’ll want to adjust styles but as you do, keep your patterns updated so they are flexible and reusable. Styleguides are often referred to as a team resource, but they make design and development much easier even if you’re working alone.
Resources:
I continue to spend a lot of time working on my awareness of aesthetics and the details of type, color and composition. I find focusing on one aspect at a time to be a helpful way to level up my skills.
Studying existing paradigms can be a very helpful way of understanding what works and what doesn’t. I often refer to pttrns.com or to the Sketch templates of Apple and Google UI elements for sizing and guidance. There are also tons of great classes in various aspects of design online and off. Skillshare is a great place to start.
My design work improves every day. I look back at projects I did five years ago and wonder why I thought it was acceptable design. Maybe design is like hair styles — you don’t know what you’re doing to yourself and those around you until you look back years later.
Some design is timeless. Some design is an uneven what were they thinking bowl cut.
Please share any great visual design resources you use. I’d love to add more tools to my workflow.
