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.
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 CoursesCreate 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.
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.
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
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 CoursesHow to Improve Design by Coordinating Colors
Lesson #7Creative Direction
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.