Wireframing

Activity 1: What is wireframing?

(10 minutes)

Do you have an idea for the website you want to design? Are you ready to start thinking about how your website will look? If so, you might be ready for wireframing!

Building a website can take a long time, and designers want to get feedback on their ideas before they spend a lot of time building the real thing.

One way to do this is to build a wireframe, which is a sketch of your idea. A wireframe describes a website in the same way that a storyboard describes a movie. Wireframes aren’t real websites, but they can describe the things that a real website will do. That way, the designer can show people what they are imagining and ask for feedback.

Here’s an example of the first draft of a wireframe and the webpage it turned into.

Activity 2: Crazy Eights

(10 minutes)

The designer in this video is going to explain her technique for wireframing using an activity called “Crazy Eights”

Watch the video, and then check out the Crazy-Eights sketches for the Media Making website.

After you watch the video, take a sheet of paper and fold it in half three times. Challenge yourself to sketch eight different version of your website’s homepage. Which ones do you like the best? What have you left out?

Activity 3: Full Color Designs

(20minutes)

Once you’ve sketched out the basic idea for your website and made a few notes about what the different pieces are, you may want to improve your wireframes so that anyone looking at them could get a sense of the look and feel of your site.

One way to do that is with a slide deck. Try using Powerpoint or Google Slides to create a full color design. Too see a full color design for the Media Making pilot site, look through these slides. Those slides are just images. There was no coding or web development required to show people how the website would look. If you don’t like slides, you could create a full color designs with Paint or online with Sumo Paint.

Activity 4: Ask for Feedback

(10 minutes)

The whole point of wireframing is to get feedback on your designs before you spend days building a website.

Take your wireframes to a friend, and ask ask him or her to guess what your website is all about. Give a quick description of the website you want to design, and ask your friend whether the wireframes make sense. Ask your friend what they notice and what they are wondering about your site. Incorporate this feedback as you move on to actually building the first page of your website.

Activity 5: Submit your work!

(5 minutes)

Send your wireframes to BGCAmediamaking@gmail.com to work toward a web design badge!

What You'll Need: