Wireframing: The First Steps of Web Design

, Designer at Kickstarter

Add to Cart $20
Get 20% off with Membership

Save 20% With Membership

Become a member to get unlimited access to hundreds of select classes and 20% off all other online classes.

Learn More

About the Class

In this class I share questions you should be asking yourself, methods of execution, and the process that I use when evaluating what should go where on the page.


We're all eager to jump into Photoshop or code when designing a website, but to make a well-constructed, organized, and easy-to-use site, there are certain steps to take before getting into the sexy stuff. Spending the time up front planning out your content and information hierarchy will save you hours of redesigning and refactoring down the road (trust me; I've been there). Wireframes aren't the final medium or design for a website, but they're often an important step to getting there.

What You'll Learn

  • Planning. You'll learn about layouts and UI patterns.
  • Process. We'll dive into how you can use wireframes to convey functionality, content and hierarchy.
  • Execution and Tools. We'll cover questions including what tools are best for what you're trying to accomplish with your wireframe? And what are some resources to make the whole process faster? Where can you take shortcuts?


What You'll Make

The project example will be based around a portfolio website, but if you have another type of website in mind (blog, marketing, personal, etc), feel free to wireframe whatever you please. This is an opportunity for you to take the time to make something you're interested in, so take advantage of it!

This class is good for designers who jump into Photoshop too quickly, co-founders who wear a lot of hats, or anyone else in the web industry who wants a better understanding of how to execute this part of the process.

More Information

No prior experience with wireframing necessary, although a background in the product or web industry recommended.

Level: Beginner

School: Design

Related Subjects: Web Design, Interaction Design, Wireframing, Web Layouts

Watch this class now

  • Access this class plus hundreds more.
  • New classes added weekly.
  • $9.95 a month, cancel anytime.
Start 7-Day Trial

At a Glance

  • Non-Membership Class
  • 5 Video Lessons
  • 837 Students
  • 90% Positive Reviews (48)
  • Self-Paced Online Class
  • 14-Day Money Back Guarantee

Class Project

Wireframe a website (portfolio or otherwise)

View all projects

About the Teacher

Jessica Harllee

Jessica Harllee

Designer at Kickstarter

I'm a designer at Kickstarter. I've worked on both the product and the agency side and have done wireframes and interaction design for small marketing websites, large-scale commerce si...

90% Positive Reviews

Eddie González-Novoa

Eddie González-Novoa

This was an excellent introduction to the key concepts, language and tools of wireframing.

View all reviews

Add to Wishlist