Wireframing: The First Steps of Web Design

By ·Designer at Kickstarter

Class Project

Wireframe a website (portfolio or otherwise)

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.

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.

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?

wireframing_description_example.png

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.

Prerequisites

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

Level: Beginner

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 sites, web applications, and iPhone apps. My work has been recognized by the ADDYs, the FWAs, and TechStars. I'm prone to nerd out over making lists, bringing order to chaos, and sentence casing.

View Full Profile

90% Positive Reviews (48 Reviews)

    • At a Glance

    • 5 Video Lessons
    • 837 Students
    • 90% Positive Reviews (48)
    • Lifetime Access
    • Self-Paced Online Class
    • How does an online class work?

      Classes revolve around completing a project and collaborating with fellow students to give and get feedback on your work. Use Video Lessons and the Project Guide designed by your teacher to complete your class project.

    • Do teachers give project feedback?

      Teachers design and present all class content, but Skillshare is community based around student-to-student interaction. You'll be surprised at what you learn from your classmates!

    • When does a class end?

      Never! Once enrolled, you have lifetime access to class materials. That means you can learn when and where you want. Learn at your own pace.

    See All