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

Godaddy videos and tutorials just for you.
Lightning fast hosting for a shockingly low price! 50% off GoDaddy Hosting plans



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:
@mrbenburns
http://www.mrbenburns.com/

#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:
https://goo.gl/bRt5qd

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.
https://goo.gl/nwekfL

Our recommended products and Booklist:
https://kit.com/TheFuturIsHere

Kits & Proposals:
https://goo.gl/mSjuWQ

Visit our website:
https://www.thefutur.com

FREE resources:
https://goo.gl/Qh6gHr

Mandarin (Chinese) Subtitles on UiiUii
https://uiiiuiii.com/?s=the+futur


OUR AFFILIATE LINKS*
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: 🎙
https://itunes.apple.com/us/podcast/the-futur/id1209219220?mt=2
Spotify: 🎙


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


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

source

22 thoughts on “Web Design – How to Sketch a Wireframe Landing Page Pt.1”

  1. 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.

  2. 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?

  3. 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.

  4. really like it, i used to draw a sketches like those but without linking them with a certain content or idea just a layout ill use to drag and drop the websites owner content … but Ben here changed the game by contributing with the branding and controling the content creation needed for the site
    great tips !

  5. Ben, thanks for putting this out there. I am looking forward to this series. I was looking for exactly this type of content the past few days on wireframing a website and wasn't really finding anything useful. This was so informative and helpful. Exactly what I was looking for. Thanks again!

  6. Hey, Ben, great video, great use of simple and effective advice.
    By the way, what are you going to use down the road for building up the website? You've mentioned WP and custom themes. Any builder in particular? I myself am happy with Divi builder and what I can do with it. What are your process and tools going to be?

  7. Yes! Pencil and paper, that’s where it all starts. I have designer friends who go straight onto the computer & I don’t know how they do it, I need my sketchbook with me for all my projects.

    I can’t wait for part 2! I know adobe XD is great for UI/UX design, but are you ever going to do a comparison between Sketch and Adobe XD? Or a high fidelity wireframe vs a low fidelity, when to use those and what looks best for your portfolio?

Leave a Reply

Your email address will not be published. Required fields are marked *