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
===
👉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.co/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://bit.ly/thefuturishere
Creative Market: https://goo.gl/g4jlTE
Design Cuts: http://bit.ly/2GSsAR3
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: 🎙
https://open.spotify.com/show/5K96ryZCjCmxqMzEotvS8h?si=J0NnGXwcQCymfBEA4poEVA
—
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
Futur Theme Music – Adam Sanborne http://www.adamsanborne.com
Typefaces: Futura, DIN, Helvetica Neue, Calibre
Futur theme song— Adam Sanborne
source
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.
This was great! Thanks 🙂
Thanks man. I've been a graphic designer for 20 years and am working on my first proper UX design project now. Following the sketch pad first approach. This has always been helpful in many of my project. Although I've designed many websites. The UX side needs a different approach and your vids are helpful.
Dear Sir I totally got it but Can you please create sample work on small pro for showing us like doing user reaseach and analyze the goals and getting material like typography and then create wireframe So design in on tool in one video for explain it .We always supoort .i will so appreciate it thanks
So glad I came back to this video, the thought process behind the wireframe sketches is really helpful.
I want to redesign your hat and the sneakily replace them… because that hat has … seen some sh*t. lol
such intense yet friendly energy from you
When or where in the process would you look at competative anlysis and best practices?
God bless you like I have been struggling with this so much thank you so much!!
I completely agree with the pencil and paper approach. I teach my students first…low fidelity paper prototyping…aka drawing. Good stuff!!
This was super helpful – do you have any video regarding file management / storage /sync/ workflow process for staying organised as a ui/ux designer
Thanks for sharing.
#introduction_web_design_q
What software or platform are you using to get the approvals for your wireframes?
Could you create a course of UX/IU, like the research for the project, copywriting, any GB quantity for the website in case it produce lag? Thank you, Ben
With what size do you design your webpages? Many use a 1240 screen , but in a course i attended the guy said design with 1920 pages. The problem is my front end developers have a 1240 screen so they cant code what i designed
Beginning. Broke this video down – have my principle concepts. I like very much. I'm all about the Futur
My major blockage when it comes to web design is just getting started. Once I've got the wireframe up, everything starts flowing, but I get hung up on the initial layout. ATHe advice on your four overarching concepts (our goals, user goals, questions to answer, and emotions to evoke) is really helpful here. Any other tips on that subject?
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.
Mr ben i would love if u answered me on this one question , i m a 2d graphic designer interested in becoming a ux designer i use ps ai and id would i ever face a coding part as a ux designer?
Great content!
Excellent video! I was looking for someone showing the initial thought process involved in the design.
WOW! Very relevant and helpful video to beginners like me out here!
Hi,
For one of my projects I'd have to do a wireframe. I have the concept in my head with the basic features listed out as well.
So for someone who has never done a wireframe, would it be better to put the ideas in blocks in the paper or let the ideas just run on the paper.
thank you so much for the video!
regards,
Sir Ben Burns could you please provide me your feedback on this https://www.youtube.com/watch?v=vFib2_37ueQ
Thank 🙂 Big Fan 😀
Hi Ben, awesome vid as The Futur always does ! One question though, if I wanna build a website (let's say for a portfolio) how would you decide of the feel/ look of this website; the aesthetic you want to use .. ?
Really really great video. Love how it's broken down and so digestible. Love your site too. Can I ask where you built it? Webflow?
Please don't use that expression "skin this cat".
hey fellas, u video is great. i'll be waiting for part 3 of ur video
impatiently waiting for more videos on this topic!
Really cool. Thanks.
Hi Ben, at wireframing stage, do you look at inspiration in coming up with you layouts or it's all from imagination?
Thanks for sharing! I am waiting for the 2nd part… I also wanna know, why do you wanna choose Adobe XD instead of Figma?
i have been looking for this kind of tutorial. can you tell us more detail of how sketch is done or maybe do a live project for us? tnx
OweMYsis.
Not SklarOhSIS…
Lee, Merry . Rolling g aobg
😘
You mention that you don't really like mobile first because your creative mind just enjoys the desktop first… I work the same way – however what do you prefer doing with the media queries? I'm wondering if you put the mobile images first in the media queries, as these are the smallest? This to prevent long loading time. I don't know if you understood what I meant, but I would be so grateful for any response on this. Thank you Ben! 😊🙏
Great video for the wireframe beginners like me!
I got one question.
What’s the “Emotions” for example?
I’m wondering how I should write down this part on sketch book.
Hi @MrBenBurns,
Thank you so much for the great content. I have never worked on website design before so the term wireframing seemed quite intimidating to me but I always draw a layout for how I want to present my identity and packaging design portfolio on my Behance page. This video showed me that I have been wireframing for my Behance pages this whole time. Now I'm really looking forward to learning web design.
Great video @MrBenBurns