Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Web Design Process

Well done!

You have completed Web Design Process!

Sign up for Treehouse Back to Library

Prototyping with Wireframes

3:20 with Nick Pettit

A wireframe is a simple version of the final product. Similar to how buildings are made using a simple blueprint drawing, websites are typically first designed with simple black and white lines that help frame where each piece of content should go.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    We're finally ready to create the first wireframe of our design. 0:00
    A wireframe is a simple version of the final product. 0:04
    Similar to how buildings are made using a simple blueprint drawing, 0:08
    websites are typically first designed with simple black and 0:13
    white lines that help frame where each piece of content should go. 0:17
    And, they do sort of look like wires. 0:22
    There are lots of ways you can create wireframes. 0:25
    You could use pen and paper or, a program like Sketch, or Photoshop or Illustrator. 0:28
    Personally, I like to use a program called Balsamiq Mockups. 0:35
    It has lots of common things you'd find in a phone app or a website. 0:39
    And it gives everything a nice hand drawn look so 0:44
    that when you present your wireframes to other people, 0:48
    it's clear that it's not intended to be the final product. 0:51
    I'm going to hop on my computer and I encourage you to follow along. 0:55
    Again, you don't have to use Balsamiq Mockups or even a computer, but 0:59
    that's what I'm going to use to demonstrate. 1:04
    If you want to follow on paper or in another tool that's fine too. 1:06
    Point your web browser to balsamiq.com. 1:11
    That's balsalmiq with a q at the end. 1:16
    Then choose download from the top level navigation menu. 1:19
    And then click to download balsamiq mockups. 1:27
    The process will be slightly different if you're on a Mac or a PC, but 1:32
    the app will work the same. 1:37
    Once the installation is complete, take a moment to look at the interface. 1:40
    Along the top are several common items you might find on a website like 1:45
    buttons, check boxes and other common interface elements. 1:51
    In the middle of the screen is a large grid where we can drag 1:57
    these items and resize them, and arrange them however we'd like. 2:02
    In the spirit of designing from the inside out, let's start with a button. 2:08
    We'll change the text on this button to say Pre-Order Now. 2:16
    Then let's make this button a little larger just by dragging on 2:24
    the handles here, because it's an important call to action. 2:29
    And then on the right side we have some properties that we can adjust for 2:35
    the currently selected item. 2:40
    Let's scroll down here and increase the font size. 2:43
    Let's try something like 18. 2:48
    I think that looks good. 2:51
    And there are a few other things that we'll add, but that's enough for 2:56
    us to get started. 3:01
    We'll need a lot more than just a button, but if you'd like, take some time to play 3:03
    around with Balsamiq Mockups or whatever mockup tool you decided to use. 3:08
    In the next video, 3:12
    we'll design the mobile version of our site before moving on to larger screens. 3:13

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up