Wireframing: The First Steps of Web Design

By ·Designer at Kickstarter

Class Project
Wireframe a website (portfolio or otherwise)

wireframing_online_image.png

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.

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.

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!

wireframing_description_example.png

Class topics

  • Planning your content
  • Language of wireframes
  • UI patterns
  • Fidelity
  • Tools and resources

Who should take this class?

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.

Endorsements from past students

“Jessica is intimately familiar with the topic and was able to provide me as a layman with some insights and fundamentals that changed the way I thought of wire framing and what goes into it.” - Wesley Verhoeve

"Going out of the class, I was confident that I could do some basic wireframes.” - Raj Kandathi

"I've casually studied wireframing over the past couple of years but this class really explained the nuances of the process.” - Michael Martinez-Campos 

Prerequisites
No prior experience with wireframing necessary, although a background in the product or web industry recommended.
  • Beginner Difficulty
  • 77
    Student Projects Submitted
Project Guide by Jessica Harllee

Designer at Kickstarter

Jessica Harllee is a designer at Kickstarter. She's worked on both the product and the agency side and has done wireframes and interaction design for small marketing websites, large-scale commerce sites, web applications, and iPhone apps. Her work has been recognized by the ADDYs, the FWAs, and Tec...

95% Positive Reviews (Read All 20 Reviews)

    At a Glance

    • Self-Paced Class

    • Project Guide

    • 6 Video Lectures

    • 524 Students

    • 95% Positive Reviews (20)

    Refer a Friend to Skillshare

    Tell a friend and get $10

    Learn more