UX Design Process: How To Sketch Wireframes-Web Design Pt 1
HTML-код
- Опубликовано: 5 сен 2024
- 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
www.mrbenburns....
#uxdesign #webdesign #UX #UI #Wireframe
===
👉Subscribe: goo.gl/vB9zoP
👉See our main channel: goo.gl/F2AEbk
Want a deeper dive? Typography, Lettering, Sales & Marketing, Social Media and The Business of Design courses available here:
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: byol.me/thefutur
-
Love the content? Become a sustaining member for $5/mo today.
goo.gl/nwekfL
Our recommended products and Booklist:
kit.co/TheFutu...
Kits & Proposals:
goo.gl/mSjuWQ
Visit our website:
www.thefutur.com
FREE resources:
goo.gl/Qh6gHr
Mandarin (Chinese) Subtitles on UiiUii
uiiiuiii.com/?...
-
OUR AFFILIATE LINKS
Webflow: bit.ly/2EbET9l
Retro Supply Co.: bit.ly/2GW8gzR
Skillshare: goo.gl/YCo2uT
Amazon: bit.ly/thefutur...
Creative Market: goo.gl/g4jlTE
Design Cuts: 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: 🎙
itunes.apple.c...
Spotify: 🎙
open.spotify.c...
-
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 www.adamsanborn...
Typefaces: Futura, DIN, Helvetica Neue, Calibre
Futur theme song- Adam Sanborne
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.
Hi Ben, great series! Replying to you: yes, I would love to see how core relates to the wireframing process!
Love from Portugal!
Please more UX design related content!
Do you design with CSS-specific attributes in mind, with flex-grids, colors, and layouts?
How you go about pulling that information from a client... that you then use to create their wire frame
thanks for making this, it's really helpful to get a sense of your thought process. and I like how chill you are!
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.
Finally some web design related content! #excited
Just had to get Mr. Ben Burns warmed up on this. more to come.
The door has been opened!
I couldn't agree more. It is helpful and inspirational. Keep up the good work 👍🏼
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.
Kevin Scholz beautiful!
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! Thankssssss
Thank you.
Thanks! You know, for those who don't have a process yet, I hope this helps :)
So happy to see ui/ux related content!! Keep it up!
So glad I came back to this video, the thought process behind the wireframe sketches is really helpful.
This is literally THE BEST wireframing walkthrough I have ever seen! Thanks
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!
exactly
Yep!
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.
Angel Velazquez yeah I’m psyched
We need more web/mobile ui/ux design content here. Thank you.
Great video by the way 👍
Thanks!
Great video. I really like Ben's relaxed vibe. So easy to watch. Kudos, Mr B 👌🏻
Thanks simon!
Mr Ben 🤨🤨🤨 you & Chris have taught me so much since I discovered the Futur RUclips Channel last year. Thank you 👊🏾👊🏾
Yay
Love the concept of showing all of process from start to end. Looking forward to the next part.
Awesome!
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
Mmmm great question
Beginning. Broke this video down - have my principle concepts. I like very much. I'm all about the Futur
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.
You have the most wholesome energy 🥺 incredibly helpful breakdown to what has been a very daunting task
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?
The comparison would be good. I’m a huge fan of sketch, but XD is rapidly evolving and I’m starting to really love using it. I won’t get into on this series but it’s a great topic for another video.
@@mrbenburns Sprinkle some Figma to the comparison mix too!
@@mrbenburns Thank you for replying! I definitely understand, I need to try out XD! Thanks again! Hoping to see the comparison in a futur video ;)
If I am very very bad at drawing / sketching , can I be a good web designer / web developer ?
Love this series and where it’s heading! I’m actually being tasked with art directing the rebrand of my current studio and that includes the website. While I’m not actually going to code the site I will be laying out the UI and layout of the site. Your insights are immediately helpful. Can’t wait to watch the rest
Awesome, thanks!
Very helpful to have an actual example for a project from start to finish! Am looking forward to the rest!
Im Home awesome 😎
Awesome! Wanted to maximize my knowledge and start with ui/ux and this comes perfect timing. Also, nice vibes and editing at the begging/intro. Love how you guys are always evolving!
We're experimenting. Thanks for the feedback!
Awesome thank you!
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!
This is great! I love seeing the process unfold.
Amazing video as always
Steve Anthony thanks Steve!
On survey for the pocket full of do, i asked about web design and Ui Ux... This is crazy timing! thank you!!!!!
We're listening.
And watching 👀
awesome content .... cant wait for pt.2 !
Working on it
Yeah!
Nice, always good to see Ben Burns vids
Carl thanks Carl!
Just in time! I've been itching to start my UX/UI journey and this has me so pumped! Thank you and very Happy Valentine's Day to my Futur fam!
Happy Valentine’s Day!!
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 new series, I'm loving it. This is exactly the type of insight you can't find anywhere else than on the Futur
That vibe Ben! I can sit all day doing the listening and learning! Good thing!
Great video Ben! Sketching and making the website on paper is the best part :D
yup!
My fav :)
Very nice! Looking forward to the next parts!
Julian Hecker me too!
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!
Daniel Freeman excellent?
Love that new channel! So much helpful. I made a good note from this video. Thanks :)
Zahirul Islam Mamoon awesome!
Love what you guys are doing, keep it up. I know some folks are going to watch this and want to turn it into a workflow for making landing pages for their clients. One thing that might be beneficial is to explain that there might be different or more prompts depending on the industry or competition the client faces. There is a Venn diagram of overlap for you and a lawyer, or author, or landscaping company -- but also some difference. 'Trust' for example might be it's own prompt as end users/consumers weigh their options. Trust can come through many channels, logos for example could be one channel. 'Assets' associated with professionalism (BBB, AIGA, NARI) and will often be a mixture of generic and industry specific. Others might be reviews, testimonials, before and afters, etc. Food for thought, hope it helps.
Great little nuggets of wisdom there. Thanks
Thanks Kyle!
@@mrbenburns You're welcome. Great work on all you're doing on the Futur stuff.
Nothing compare to youuuu! (Sketchbook)
Lol
Good job Ben! Thanks a lot for this! I'm studying web design right now and this video is perfect! Can't wait for part 2!
Martina Dick coming soon!
Thank, Ben! and The Futur. You always give great insights, I always walk away from a video having learned something new.
Nick Bradshaw awesome. Great thumbnail btw
Love the aesthetic of the video
Thanks
You made my day.
MrBenBurns one advice tho: try to get the right exposure when showing the notebook. Its pretty hard to see on my phone at least.
Great point thanks!
great video as always
As always, THANKS!
wow! Super thanks to writing all your script! tanks a lot I already share your video 5 times :D
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 !
Amr AbuTalleb yeah it helps so much
I completely agree with the pencil and paper approach. I teach my students first...low fidelity paper prototyping...aka drawing. Good stuff!!
I’m loving this academy channel! I think I’m loving Futr more now!!!
Yes!!
Oh man.. I don't Have enough words to thanks this... Keep it going plz.
WOW! Very relevant and helpful video to beginners like me out here!
Ben this is really helpful, especially for me who is an old school designer trying to tap on the ux/ui.
Awesome!!
hey, I like the way you explaining the design process!! Keep it up!
Hey Ben, awesome content as usual.
Thank you for sharing so much important stuff and being so transparent about everything. You help a lot!
I really would love to see more about the process milestones. It would be enough to see a rough sketch from the start of a project to finished product. Just like the sketch in this video where the lead magnet fits in in the process. What are the milestones of this project called?
Sorry for that confusing minddump but I really struggle to order my thoughts about a whole webdesign-project.
My problem: I am a front end developer and in the stage of building an own agency. Now I need to figure out the whole design process and what comes before that and so on.
The Core Strategy Framework has been a big big help to structure some thoughts but I am in desperate need for a simple process sketch, e.g. "no1 do this, no2 do this..."
Anyways keep the amazikg content coming. Thank you guys from the futur so much.
Cheers, Deniz.
hofling. This is a great question - I’ll add a basic overview to the next one.
Love it, very well timed Mr Ben. I have been researching on good landing pages. Can't wait for the next video
Arzo Arsalan yeah!
Excellent video! I was looking for someone showing the initial thought process involved in the design.
Glad you enjoyed it!
Hey man! Great video, also love to start creative work in a sketch book, definitely is the faster way to go!
Lucas Henriques thanks! Agree 💯
Great content!
impatiently waiting for more videos on this topic!
Great video! I'm excited for this series as it is exactly what I do in my job! Looking forward to episode 2!
Jose Canales thanks Jose!
Great bro. I can't wait to see the digital design. I learnt a lot from this video.
Awesome!
This is awesome and insightful, thank you so much Ben.
You are awesome man and The Futur Academy is lit💟👌
Thank you.
This is really helpful, Thank you so much for creating this.
Thanks!
hey fellas, u video is great. i'll be waiting for part 3 of ur video
Intersecting goals! That is a discovery for me! So conversational.
Yeah! if you can identify those, it's really easy to prioritize information
Great video @MrBenBurns
Amazing! Can’t wait for more!
Very Inspiring. Thank you :D
Really nice. Thanks MrBB
God bless you like I have been struggling with this so much thank you so much!!
This was great! Thanks :)
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. :)
Very cool! And we will analyze those goals in the next few videos, for sure.
@@mrbenburns thank you! Keep on going, will wait :)
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?
cant wait for the next video!
loved this part
@
The Futur Academy I am interested in learning a lot and here's a question for you: are you part of the marketing team or part of the design team? I would like to know who in the company gets the UX/UI ball - we are overhauling our company website and divvying up the process is a pain.
I went down the rabbit hole and found this video you made, UX/UI has been my passion despite not being trained or schooled for it. You are speaking my language...
P.S. I like that you have the freedom to do it all without having to depend on several 'yesses' before you create the wireframe.
This was super helpful - do you have any video regarding file management / storage /sync/ workflow process for staying organised as a ui/ux designer
Hmmm. Thanks for clarifying something for me. Interesting.
What was clarified?
Well, I found myself struggling to understand the wireframing concept. My understanding was kind of vague. Kinda like when I first started learning other creative tasks in the past. Some things just aren't easy to understand. With this video and thank you for it, I completely understand, for jottng down prelim stuff and laying out steps and methods is something that I have always naturally done and sometimes avoid because I am so detailed with it and would rather jump into a project and tweak as I go. I can now feel comfortable promoting this on my resume.
Thank you Ben!
Really cool. Thanks.
Loved this video, it's been super helpful!
Would it be possible to get an example for "questions to be answered"?
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?
Nope! Not yet. I map out the information I need first. Then comes the fancier stuff.
Great video
Great content as always! Love it❤️. I want to learn more about UX/UI Design, can you give me some tricks&tips to develop the ability to creat awsome content?
Thanks
Document! Document everything!
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.
Can you share any example? Also I wanted to know deeply about some of the good UI designs or layout styles.
How can i learn that?
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
👌
Should we showcase our wireframes to the clients? And what if the client rejects it? Is it back to the drawing board?
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
Got a question, how do you build/plan the page narrative? I just started to use this amazing framework for clarifying communication called Storybrand from a company with the same name and it's awesome! Allows you to have a clear system for messaging in all your collateral. Would like to hear on how you guys approach this. Cheers mate!
Storybrand is great. let's have Mr Ben Burns chime in here.
Love storybrand! This narrative/information structure is entirely based on those prompts - But this page is also really simple. Tell me what I’m getting, why I need it, and what it will do for me.
How come I wasnt aware of this series... wtf!!
Hahaha great stuff!!
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?
That's a first for me. We look at use cases, but never execute storyboards. You should make a video about that.
@@mrbenburns Thank you, that's an awesome idea! It's something new I'd not heard about before either until our UX Designer at work mentioned it briefly. Would definitely be great to explore and build some content around it.
Wow, looking forward to the third part :)
btw what book are you using?
When or where in the process would you look at competative anlysis and best practices?
competitive analysis would be in the discovery session, though that really depends on the client. Best practices? Not sure what you mean there :)
Great video! Question for the next video. Why do you go into software for the digital wireframe? Why not wireframe in-browser?
What do you mean wireframe in-browser?
@MrBenBurns I mean building the wireframe in HTML & CSS. Why learn another tool when you could do the work in the native, responsive environment: the browser. Not my link but the first I found: www.velir.com/blog/2015/07/30/prototyping-why-you-should-start-designing-websites-browser
Better link: usersnap.com/blog/guide-designing-in-the-browser/
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! 😊🙏
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?
Good questions! I’ll take you through the process
@@mrbenburns can't wait. Next week I'm registering my own company and starting a journey I've been avoiding, out of fear of not being good enough. You guys at The Futur have given me so much great advice, I think it's time I take my skills seriously. I'll have your videos to guide me through this journey.
Thanks a lot.
Great 👏👏👏👏👏
Thanks for sharing! I am waiting for the 2nd part... I also wanna know, why do you wanna choose Adobe XD instead of Figma?
Awesome, love it! Really looking forward to the next video! Hey what kind of mic are you using?
A potato. lol no, it's just a videomic go. I upgraded this week, so stay tuned ;)
@@mrbenburns Haha, we'll I wasn't going to diss it...but I was going to remind my future self not to use it. 😁
Great Presentation! Any Reason you use Adobe XD vs Sketch?
cool learned a lot
Hi Ben, at wireframing stage, do you look at inspiration in coming up with you layouts or it's all from imagination?