Wireframing: The First Steps of Web Design

, Designer at Kickstarter

Add To Cart
This class is no longer available.

Enrollment Closed

Unfortunately, this class is no longer available on Skillshare. Don't fret! There are hundreds of other classes out there for you to take.

Find a class

Student Projects View all projects →

Ashima Bawa

Ashima Bawa


Adam Krebs

Adam Krebs


Yvonne Le

Yvonne Le


Class Project

Wireframe a website (portfolio or otherwise)

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

At a Glance

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

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