Web Design – How to Sketch a Wireframe Landing Page Pt.1

Share it with your friends Like

Thanks! Share it with your friends!


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?

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.

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 video, he shares his web design process on how he thinks about the user experience (UX), and what it might take to capture a potential user.

Get more of Ben:

#TheFutur #webdesign #UX #UI #Wireframes

👉Subscribe: https://goo.gl/vB9zoP
👉See our main channel: https://goo.gl/F2AEbk

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

If you’re a complete beginner, consider taking any of these Adobe Creative Cloud fundamental courses from our friends at Bring Your Own Laptop: http://byol.me/thefutur 

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

Webflow: http://bit.ly/2EbET9l
Retro Supply Co.: http://bit.ly/2GW8gzR
Skillshare: https://goo.gl/YCo2uT
Amazon: http://a.co/7abg3DD
Creative Market: https://goo.gl/g4jlTE

*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

Host– Chris Do
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
Futur Theme Music – Adam Sanborne http://www.adamsanborne.com
Typefaces: Futura, DIN, Helvetica Neue, Calibre
Futur theme song— Adam Sanborne


MrBenBurns says:

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.

Raymond Chee says:

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


Keep up the good work! Thankssssss

Art Outlaw says:

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

Joshua Robbs says:

Great video! Question for the next video. Why do you go into software for the digital wireframe? Why not wireframe in-browser?

Aycreativ Media says:

Great bro. I can't wait to see the digital design. I learnt a lot from this video.

Mulk Abdulhadi says:

Did you guys stop doing Movie Poster critiques?

Kris Avilla says:

Thank you MrBenBurns! Loved your content on Atomic Design, and I'm getting ready to refresh some webpages/websites so this came in just in time. Do you use any storyboarding for UX?

John says:

I hear alot about mobile-first design. Is it best practice to first wireframe a mobile page then work on desktop?

Quentin Brendemuhl says:

Awesome, love it! Really looking forward to the next video! Hey what kind of mic are you using?

Leo Pirela says:

Hey Ben! Do you do any form of research before you start to sketch? Like to get ideas of how the elements can fit in and so on?

SilverAphelion says:

is Xd the futur ?

Moving Dog says:

Intersecting goals! That is a discovery for me! So conversational.

Milo says:

Do you have any suggestion on how to choose the best project from a range of sketches…? I seem to throw away a ton of paper, and even when I progress to screen, I tend to stop the project and come back to sketching again for new ideas. I want to narrow down my options and make it more efficient.

miehack hd says:

This is really helpful, Thank you so much for creating this.

Lloyd Luciano says:

I would like to know more how you answer those prompts, the goals. But its a great vid, actually I was doing it before I slept and then I woke up seeing this video and immediately watched it and really looking forward to learn from you MrBenBurns as I am a self taught web developer/designer who really needs more practice and all. Hit the bell icon and I'll wait. 🙂

11swallowedinthesea says:

Nice! I've invested more time on watching web dev tutorials I forgot about the design process. I don't even have much experience with it besides a really basic layout taught from my web dev instructor. Bought Affinity Designer and now you're here to help me!

bahrudin Kf says:

why the Audio not clear?

Alex says:

Great new series, I'm loving it. This is exactly the type of insight you can't find anywhere else than on the Futur

iSANiTYX Rodax says:

So happy to see that this sketch is not High Definition, and it looks almost as mine.
I am a developer, so my process is this:
– Sketch many version as possible
– Design a specific version. If time is a luxury, I may design up to 3 versions.

I have one question. Is it normal that the High Definition mockup might not be "producible" on the development phase?

Jose Canales says:

Great video! I'm excited for this series as it is exactly what I do in my job! Looking forward to episode 2!

Write a comment