Foundation & Product Design Lesson Topics

Our Curriculum

Our lessons bring you the most current, valuable product design information in the following areas:

Speed Up Your Workflow with Custom Shortcuts

Lesson #141Creative Direction

" class="" height="" width="" alt="" style="display: none;">

It’s a challenge to learn any new piece of design software, especially if you’re used to certain shortcuts performing similar actions. By overriding a shortcut that’s been already defined in a program, you can save some time and frustration and double your productivity.

Boxin’ Up That Time: Timeboxing for the Big Win

Lesson #98Creative Direction

Sometimes we look at what seems to be an insurmountable task, and we ask ourselves, “How am I going to get through this?” The short answer is timeboxing, but how should we approach it? In this lesson, we’ll explore a couple tips and tricks to timebox more effectively and give some more definition to this oft mentioned strategy.

Zap Color to Up Your Design’s Value

Lesson #53Creative Direction

Branding, accessibility, aesthetics, programming — color touches so many aspects of design that we often take its power for granted. It's said that not all colors are created equal — actually some are equal in a surprising way. Colors with different hues can have the same value, and that's bad news for design.

Ostensibly different colors with different hues are different colors. But when leading visitors around a page, contrast is king. This is especially true for people with color blindness.

Here's how to test your design not just for accessibility, but also for sighted users.

Streamline Forms for More Follow-through

Lesson #51Creative Direction

Forms are a critical touchpoint between website owners and their visitors. We use them to let people sign up or sign in; to report an error or ask for help; and to submit information about themselves. Forms are what keep the web from being a one-way street. But they can also act as barriers to entry.

People equate a dozen fields with tedious chores. Their eyes glaze over. Patience stretches thin, and so does trust. They may decide the form is more trouble than it's worth and give up before they even begin.

It doesn't have to be this way. Here are ways to make tedious forms easier to digest — and increase the number of signups.

illustration for a web form

Creating a Killer Style Guide

Lesson #31Creative Direction

Style guides are documents that designers use to maintain consistency throughout a project, even after it's launched. But they're more than a list of guidelines. Structure, samples and accuracy are keys to successful style guides. Here are five tips to creating a killer style guide.

Continue Learning with Courses

Learn product design principles from designers who practice them every day.

View Courses

Create Insanely Easy Buttons in Photoshop

Lesson #30Creative Direction

Designers have used Photoshop to make web graphics almost since … well, since the web gained traction in the early '90s. Trends and technology have changed over the last two decades, and today Photoshop offers many tools to easily make web elements in contemporary styles. Here are different ways to create fast, flexible buttons in Photoshop.

illustration of increasingly complex button styles

Simplify Your Visual Design

Lesson #21Creative Direction

It’s not uncommon for clients to request simple and/or clean designs. Few design briefs ask for a convoluted mess. But what makes simple and clean? In our experience, the two don’t always follow each other. A few simple techniques can simplify even complex designs without reducing content. Here are three lesser-known tips to simplify any visual design.

Illustration of objects becoming simpler from left to right. Rectangles, to be specific. We started with goldfish, but they were too hard to wrangle. Like herding cats. This lesson is about creating order, not cats.

How to Not Abuse Design Patterns

Lesson #17Creative Direction

Designers don’t practice their craft in a vacuum. There’s no shortage of websites about inspiration for web design. If you love what someone else has created, there’s always a temptation to mimic them outright. But there’s a fine line between seeking inspiration and copying. Here are techniques to get create your own ideas based on other people’s work.

Balance Visual Weight in an Icon Family

Lesson #11Creative Direction

When we talk about using grids in design, we usually refer to Foundation, our responsive CSS framework. But grids are just a tool to create alignment and visual rhythm in any composition. And even then, they’re guides, not rules. Sometimes we may adhere to the grids more than what they represent.

They’re the same size — according to a strict grid. But people don’t see pixels or grids. They see forms, colors, contrast — what we call visual weight. Take away the guides to reveal how much (or little) mass each icon appears to have in relation to its neighbors:

When designing icons, you can't just make shapes that adhere to guides in your drawing tool of choice. A set of icons should look like a harmonious family in the finished product. Icon design is one thing. Family design is another. Here are four techniques to make a group of icons feel like family.

Guide Your Visitors With Visual Cues

Lesson #9Creative Direction

differentiate_img01 2.png

Visual cues are your method of choice when representing sites’ structure and content in the best possible way. Provide clarity and a helping hand for your visitors to find their way around your site and content fast. You will lose them immediately otherwise.

Continue Learning with Courses

Learn product design principles from designers who practice them every day.

View Courses

How to Improve Design by Coordinating Colors

Lesson #7Creative Direction

photo of a harbor with color samples

A color scheme does more than look good. It keeps the design from contradicting itself. It reinforces the message you want to convey, whether that's for branding or for mood. It also says the designer didn’t just throw something together. There’s a sense of purpose.

It’s also a way to reveal more about a design than the designer may realize.

How to Apply Skeuminimalism

Lesson #4Creative Direction

Flat designs are popular today for a reason: They work well in responsive web designs, and people don’t need skeuomorphic hints anymore. But that doesn’t mean we should ignore photo-realistic design elements — to say nothing of photos themselves. Here’s how to use flat and skeuomorphism together in three minutes.