Improving Your Visual Design Skills: Thoughts for Beginners

Last summer, I set out to improve the visual polish of my client deliverables. Other UX team members’ work looked like it could have been from members of the visual design team, and it was time to up my game. I felt lost, however, in plotting concrete steps to accomplish this goal. While I knew what I needed to do — build an understanding of typography and color, and strengthen existing skills around layout and visual hierarchy — I didn’t know what resources to trust, tools to use, or ways to practice.

Fast forward a year, and my visual skills — while still budding — have grown. If you’d like to create more visually effective deliverables and improve your basic visual design skills, below are resources and tools to get you started, and some lessons that will help you succeed along the way.

Books & Articles

Here are a few specific resources I can wholeheartedly recommend as a starting point:

Typography

Viget art director Mindy Wagner says that, “typography is the thing I recommend interns/juniors get right before anything else … if you get the type and whitespace down, you’re usually 90% there.” I recommend:

• On Web Typography

• 26 Digital Typography Rules for Beginners

• 20 Typography Mistakes Every Beginner Makes – And How You Can Avoid Them

Color

Viget VP of Design Tom Osborne has written a series on color that is accessible to beginners. I recommend:

• Add Colors To Your Palette With Color Mixing

• Shades of Gray — Yes, Really

• From Darkness to Light: Color Versatility Using Tints, Tones, and Shades

• Signal vs. Noise: Color as a Wayfinding Tool

• Color Contrast for Better Readability

On Design Education

Understanding color and typography are just the tip of the iceberg when it comes to building visual design skills. If you’re looking for more comprehensive advice on design education, I recommend:

• How To Make Your Not-So-Great Visual Design Better

• A DIY Design Education

Design tools

I used a few powerful, flexible tools that help you play and explore. For beginners, I recommend:

Typography

Google Fonts makes it fun and easy to filter through and play with different typefaces.

• Google Fonts — There are a ton of typography tools out there, but as a beginner, I found Google Fonts to be especially helpful. You can easily filter through different typefaces, see how they look at different sizes and lengths, and pair different ones together. Best of all, Google Fonts are free, so if you see something you like, you can use it.

Color

Coolors.co has a simple and friendly interface that is perfect for people who are new at working with color.

• Coolors.co — Coolors.co is especially friendly for people who aren’t color experts. The large color panels make it easy to compare colors side by side. Changing the hue, saturation, and brightness of any color is straightforward. Palettes can only have up to five colors, which keeps beginners from getting too complicated.  Additionally, you can generate random palettes, which are good for inspiration and figuring out what you think looks good together.

• WebAIM Contrast Checker — It’s helpful to get into the habit of checking color contrast early on in your visual design practice for the sake of accessibility. Plus, working  within the constraints of color contrast helps strengthen your color skills overall.

Interface Design

• Sketch — Sketch is a great tool for beginners because of its flexibility — it’s powerful enough to create high fidelity comps but easy enough to use that it's a good wireframing tool. Sketch also makes it easy to see designs side by side, which is helpful as you’re iterating.

Figma is an intuitive, flexible tool. It’s web based, which makes it easy to share work, and it also has a Mac App, pictured above.

• Figma — It’s been my tool of choice as of late. Figma feels similar to Sketch. It’s just as easy to use and just as powerful — but it’s web-based, which makes it easy to share your work and access it from anywhere.

Tips & lessons learned

See as much good design as possible

Gathering inspiration from others’ work will give you a sense of what you like and don’t. I recommend Viget’s work page, the FWA Site of the day, and Awwwards.com if you’re looking for some solid visual design examples.

Practice by duplicating

Recreating others’ work (for learning purposes only, of course) can be a good way to help you think through how good design is constructed and how those lessons might apply to your future work.

Realize no opportunity is too small for practice

There are plenty of opportunities to practice visual design outside of working on an interface. That informal Google Doc of notes? Play with fonts, and use something besides Arial or Helvetica. Got a presentation coming up? That’s a great opportunity to practice with typography, color, layout, and hierarchy to make the presentation flow.

Prioritize real projects

Whether personal or for a client, I find that real projects are more helpful than made-up design exercises. Pretend exercises just don’t offer the same constraints or personal investment as real ones.

When it comes to personal projects, start small

I find it helps to keep projects small, like a one-page site or some portfolio updates. Practicing new skills is hard enough without trying to also make big decisions around, say, interaction or product design. Keep it small and digestible so you don’t get overwhelmed.

Get feedback

It can be scary to think about sharing your work when you’re learning something new, but getting feedback from someone with more expertise will help your skills grow. There’s no right way or time to get feedback, but don’t be so married to your design work that you won’t be able to hear constructive feedback by the time you show it to someone.

----

To those of you who are just starting to build your visual design skills — good luck! If you happen to already be on this path, or if you’re a seasoned visual designer with thoughts on resources, tools, and lessons for beginners, please share!