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!

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

#uxdesign #webdesign #UX #UI #Wireframe

===

Want a deeper dive? Typography, Lettering, Sales & Marketing, Social Media and The Business of Design courses available here:

—
Love the content? Become a sustaining member for $5/mo today.

Our recommended products and Booklist:

Kits & Proposals:

Visit our website:

FREE resources:

Mandarin (Chinese) Subtitles on UiiUii

—
OUR AFFILIATE LINKS

By making a purchase through any of our affiliate links, we receive a very small commission at no extra cost to you. This helps us on our mission to provide quality education to you. Thank you.
—
Futur Podcast on iTunes: 🎙
Spotify: 🎙

—
We love getting your letters. Send it here:
The Futur
c/o Chris Do
1702 Olympic Blvd.
Santa Monica, CA 90404
USA

—
Host– Ben Burns
Content Director– Matthew Encina
Cinematographers– Mark Contreras, Stewart Schuster, Aaron Szekely, Ricky Lucas, Jona Garcia
Editors– Mark Contreras, Stewart Schuster, Aaron Szekely, Ricky Lucas, Jona Garcia
Live Editor– Jona Garcia
Social Team– Elle Money, Alex Burlui
Typefaces: Futura, DIN, Helvetica Neue, Calibre
Futur theme song— Adam Sanborne

[mrbenburns]

Obviously there will be more here but is there anything in the sketching or thinking or planning process shown in this video that you guys want more on? This wasn’t really meant to be an end all be all course, but happy to field questions.

[a.charlie]

Summary
Make a list that answer these four prompts:
1 Our goals
2 User goals
3 Questions to answer
4 Emotions to invoke

Jot down 3- 4 bullet points for each prompt

Sketch down your wireframes, if your business and your users have an intersecting goal that goal should be displayed first on a site.

Have a short summary on the page for those people that don’t read.

[Emotioneler]

Finally some web design related content! #excited

[kevinscholz]

Ben, you are right on par with things I am learning in my first year Graphic Design program. I am a total advocate for the futur and I love that after every class, I can jump on my phone, computer, or tablet and just keep listening to more ideas as I work. Really helps me take control of my own education. You're all amazing, thank you.

[kristiyanilchev]

So happy to see ui/ux related content!! Keep it up!

[raymondchee]

I guess most of the people here already knew the process BUT, BUT watching you guys from thefutur sharing it?

Priceless.

Keep up the good work!

[pmwilliams]

So glad I came back to this video, the thought process behind the wireframe sketches is really helpful.

[iynobhetter]

Beginning. Broke this video down - have my principle concepts. I like very much. I'm all about the Futur

[keszycki]

This is literally THE BEST wireframing walkthrough I have ever seen! Thanks

[angelvelazquez]

I'm glad that your doing a series on web design/dev. Can't wait to see more of how you'll be building the Futur website.

[ProfNomis]

Great video. I really like Ben's relaxed vibe. So easy to watch. Kudos, Mr B 👌🏻

[paulirwin]

Yes! Pencil and paper for this early work always felt more natural to me. I’ve tried a few kits and online apps etc but the trusty notepad gets my vote too! Great video, looking forward to this series!

[zaurmakharoblidze]

We need more web/mobile ui/ux design content here. Thank you.
Great video by the way 👍

[artoutlaw]

Love the concept of showing all of process from start to end. Looking forward to the next part.

[HopeAdoli]

Mr Ben 🤨🤨🤨 you & Chris have taught me so much since I discovered the Futur YouTube Channel last year. Thank you 👊🏾👊🏾

[wonderfullife]

impatiently waiting for more videos on this topic!

[ambershear]

You have the most wholesome energy 🥺 incredibly helpful breakdown to what has been a very daunting task

[xtcgaming]

awesome content .... cant wait for pt.2 !

[julianhecker]

Very nice! Looking forward to the next parts!

[MrLewisConnell]

Can’t wait for more web design videos! Would be really beneficial to know how to make a website look professional (vague I know) but knowing about spacing, colours, font types & sizes, images etc.. would be awesome