UX Design Process: How To Sketch Wireframes—Web Design Pt 1

How do you wireframe a website? How do you create a landing page from scratch? How do you sketch a wireframe? How do you design a sales landing page for downloadable products? How do you do UX design without going overboard? What is paper prototyping?

You can call it a squeeze page, a landing page, or a download page. This is the page that converts a cold audience into known users. And the web design needs to be on point in order to make these conversions! Enter: UX Design!

Our landing pages currently... let's say they're not so great. So over the next couple of weeks on The Futur Academy Channel, Mr. Ben Burns is going to share his process for redesigning the landing pages on thefutur.com.

In this UX design tutorial, he shares his easy UX design process on how he thinks about the user experience, and what it might take to capture a potential user.

Here's Ben's outline:
----------------
Before drawing anything I figure a few things out. I write a simple list on one side of the paper that I can refer back to. And I always look at four distinct prompts:

1. Our goals
2. User Goals
3. Questions to answer
4. Emotions to invoke

I jot down three or four bullet points for each. This doesn't have to be fancy, especially if this is our first pass at the page. The first pass is always going to be an educated guess. As people interact with the page, we can always improve it. Back to the sketch.

Once I have everything mapped out, I start sketching out a basic wireframe. What comes first should always the overlapping goals of the site owners and the users.

In this case, that intersecting goal is to download something for free. So I want to prioritize the download action, which in the case is the form that you submit when you download this resource.

I also want to make sure there's an easy-to-read summary for those of you who don't actually like to read stuff. I know you're out there.

Once that first goal is accomplished, I start filling in content that will handle secondary goals. In our case, we want to educate users on what the download is, and answer all of the user's potential questions.

It's also helpful to keep in mind what kind of assets you have at your disposal. I know, for example, that we just shot a trailer for this download, so I want to make sure I'm including space for that video.

There are a few common symbols that I use during wireframing. Big headers are usually written out if I can brainstorm a catchy title. Narrow boxes are smaller headers. Text is usually groups of lines. Videos are represented with little play icons in boxes. Images are usually a box with an X in it. Buttons are squares with text in them. You guys get the idea. You can kinda see the website come together as I sketch.

Once I've got all the content mapped out on the page, I go back and make sure that all of the goals and questions have been answered. I literally start checking things off and labeling these sections.

Get more of Ben:
@mrbenburns
http://www.mrbenburns.com/

#uxdesign #webdesign #UX #UI #Wireframe

===