A vocabulary, an eye, a POV

How do you teach/learn art direction and UX?

A Slack friend polled the group for thoughts on teaching art direction, and I thought I’d share with you all what I shared with her. Art direction something I touch on in my UX/IXD classes, and I realized it’s very similar to how I teach UX patterns. To me, there are 3 steps.

1. Develop your vocabulary

First you need to know what’s already out there; it’s all part of our baseline for usability or aesthetics. I bucket the ocean like college level classes:

101: general standards

• UX Patterns 101 would be the default interface elements like buttons, links, checkboxes, radio buttons, lists, tables, date pickers, color pickers. You could learn these by looking at developer documentation, like the W3 docs on HTML elements, or old classics like Designing Interfaces or the polar bear book (Information Architecture).

• Art Direction 101 might be your most popular art movements, artists, photographers, and directors. You could fluently say “in the style of Dadaism, Basquiat, Cindy Sherman, or Wes Anderson.” There are lots of free art history courses online to explore.

201: professional best practices

• UX Patterns 201 might be common design system components like accordions, panels, chips, facepiles, or tunnels. You could learn these by exploring Apple’s Human Interface Guidelines or Google’s Material Design guidelines, or the component libraries for popular JavaScript frameworks (React, Angular, etc.)

• Art Direction 201 might expand your vocabulary of movements, artists, or brands: Russian Constructivism, Corporate Memphis, Web 2.0, Vaporware, and more. I love this giant List of Aesthetics on Fandom.

301: cultural specifics

• UX Patterns 301 could get into cultural and subcultural variations — art world vs gaming vs e-commerce vs editorial expectations. You can see lots of different corporate components in Figma’s Design Systems site or Storybook’s component library showcase, and also find dedicated directories like the Game UI database or Data Viz Project.

• Art Direction 301 might be more niche aesthetics and trends. Elizabeth Goodspeed’s Casual Archivist newsletter pulls up great gems and trends from history, and she’s shared her whole list of public archives too.

401: emerging trends

• UX Patterns 401 might include novel interfaces (like Soot’s spiral image browser or Hume’s expressive voice AI) or emerging patterns from new technologies or companies (e.g. The Shape of AI or Awwwards). To learn these, nerd out. Dedicate the time to explore and absorb. I like godly.website and 60fps.design and there’s also a million other resources in my Notion Toolkit.

• Art Direction 401 might draw from the most contemporary trends and styles. Cosmos is a beautiful new exploration tool, and Are.na is probably the most popular way to keep up. Again start with Elizabeth Goodspeed and explore from there. Zoë Yasemin also writes a newsletter entirely about art direction.

Can you tell I’m a strategist who loves nothing more than creating another framework? lol

My book has a full spread of common UX patterns to help people with their development here. It’s a vocabulary quiz and a visual reference, grouped into practical clusters. How many have you used?

2. Sharpen your eye

Next, you have to be able to see the small differences between things. What’s the difference between portraits by Annie Leibowitz and Richard Avedon? Between rounded corners of 5px vs 8px? Between #F5F5F5 and #F3F3F3?

I gave my current grad students an optional packet of Mystery Grid puzzles (carefully curated from Teachers Pay Teachers worksheets) as a fun way to sharpen their eyes. I did tons of these drawing exercises as a kid (plus other how-to-draw books from the school book fair), and they made my hand-eye relationship sharp enough to skip Drawing II in art school. I put one of them in my book too.

Another good exercise is to try and recreate an interface or artwork you love. You’ll really notice all the details once you get into the canvas and work with them.

When you see all the tiny choices, and how they affect the overall gestalt, you start to become a real craftsperson.

3. Define your personal point of view

Once you’re able to see all those patterns and details, you’re able to take a position on them. Defining your personal design principles will help you cut a steady path through the world of inspirations and options (rather than drifting from possibility to possibility).

For me, teaching was the activity that forced me to draw my line in the sand. I had to tell students what was good, and what was not so good, and why.

For other people, a public channel like a blog or social media presence becomes an arena for them to present, defend, and refine their preferences.

MFA programs also focus on supporting this important accomplishment (which sometimes disappoints the students who prioritize technical skills, as if the programs are very expensive boot camps). Rob Walker teaches a whole class on Point of View in SVA’s Products of Design program (where I currently teach too).

Find some way to express your principles. (Or just quote Dieter Rams like everyone else.)

Keep learning

Boss lady Martha Stewart says that one of her mottos is “learn something new every day.” What’s missing from the lists above? I’d love to hear any resources or frameworks that helped you learn art direction or UX. What’s your POV?