Complete Websites

Building a Website in Progressive Steps: Wireframing


"Steps" is a progressive series of screencasts, during which we'll walk through the process of designing and building a website. In this part, we take a look at wireframing.

Step 1: Wireframing

Don't like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Additional Resources

Related Posts
  • Web Design
    Community Projects
    Community Project: The Tuts+ Illustrator Wireframe KitWireframe thumb
    Calling all community members! We have a little project for you to take part in! We're compiling a wireframe kit for Adobe Illustrator, built by you, the Tuts+ community. Read on to see how you can take part.Read More…
  • Design & Illustration
    10 Tips for Building Wireframes With IllustratorPreview wireframe
    Adobe Illustrator is experiencing a come-back in the world of web design. Not only is SVG becoming commonly used online, but more and more designers are using vectors for wireframing. The following tips will help you make the most of Illustrator as a wireframing tool.Read More…
  • Web Design
    Design Theory
    Introducing Wireframes to Your Design ProcessDsfd wireframes retina
    After sketching, there is one final thing you should work on before starting to design (although, admittedly, this is all part of designing). Wireframing is essentially a visual guide to a website which helps you to look at layout without thinking about the aesthetics of the project.Read More…
  • Web Design
    Applications and Tools
    Fireworks in the Real World: MoodboardsFw real world moodboards retina
    At this stage in our real world process we've built a few wireframes in Fireworks, then (theoretically speaking) sent them off to the client for review. Whilst they're having a good look through them, sharing them amongst other stakeholders in the project, we'll turn our attention to the aesthetics. We're going to build three different moodboards, just to explore various visual directions for our pet shop website.Read More…
  • Web Design
    Applications and Tools
    Fireworks in the Real World: Interactive WireframesFw real world next retina
    Following on from our introduction to wireframing, let's now look a little deeper into what Fireworks can do for us in that area. We'll look at pages, using common symbols and making our wireframes interactive.Read More…
  • Web Design
    Applications and Tools
    Fireworks in the Real World: WireframingFw real world wireframing retina
    Fireworks isn't a dedicated wireframing application, but its familiar interface, templates and extensions make it the perfect contender for being your wireframing tool of choice.Read More…