How to Wireframe a Website or App | Web Design & App Design Tutorial
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- Today we're talking about Wire-Framing for the web design and product designer process. If you have never wire-framed a website before, I would recommend stopping what you're doing and getting a paper and pen to follow along. It’s the first part of any web design or app design process and will really help you design the structure of a site or app based on the content.
Remember to Subscribe goo.gl/6vCw64 🤘
In this video I cover some the things you will need before you start sketching ideas out, the process I go through, and some tips on how to create a visual wire-framing style that works for you to make your projects flow smoothly.
------------------------------------------------------------------------------------
////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...
designchamps.io/hip
////////// Connect with me here 👍🏼
Instagram: / imjesseshow
Twitter: / imjesseshow
Anchor: anchor.fm/imjesseshow
Medium: / imjesseshow
////////// Sign up for my Monthly Newsletter 📫
jesseshowalter.com/newsletter
////////// Music is from Musicbed click below for a free trial 👇🏼
share.mscbd.fm/imjesseshow
////////// Equipment 📸
www.amazon.com/shop/jesseshow...
![[Live สด] การออกรางวัลสลากกินแบ่งรัฐบาล งวดวันที่ 1 มิถุนายน 2567](http://i.ytimg.com/vi/3canzHC_d0k/mqdefault.jpg)
Cool video, I always move this way for every project and watching this video got some more point to remember before sketching them on paper. Thanks :)
I will keep my eyes for the next video.
Great video man. So many good tips here. Thank you!
Thanks for the tips! This is a new tool that I need for sure on my career as an Art Director. I am in! 👍
OMG you are the most honest content creator i have ever seen! thanks alot
Love your content, Jesse! I’ve learned a ton watching the videos! Keep up the good work! One thing I like to do for sure framing is go research a bunch of different websites that are relevant to the project I’m doing. Just an easy way to jump start the creative juices.
Agreed. Competitive sets aren't complete without looking under the hood.
Awesome video!!! You made it really simple to connect and relate with. FINALLY a video I get!!!! 😎 Thank you!!!
+Tia Alexandroff I’m so glad, let me know if there are any other topics I can cover that would be helpful to you 👍🏼
Jesse Showalter What program would you recommend for wireframing? Balsamiq looked pretty good but I have yet to dabble in it. 🤓
These videos are great. Thanks so much, Jesse!
Glad you like them!
Really useful for beginners starting out in the field of design👍
Thank you for sharing your tips on wireframing! :)
Thank you for the support, Courtney!
Great video! From someone who has been in the business for 30 years and kind of let web design slip by me, I’m looking to learn more and catch up to be more rounded. More vids like this would be awesome! Thx
More coming every week
Thanks so much for this video - it's always interesting to hear about other people's design process :)
+tootonica I agree it's a super interesting topic. I think a lot of designers share some of the same pieces of there process but with such interesting variation. Thanks for watching 👍🏼
Perfect💕thank you
Your presentation is awesome...i really like it.
Amazing tips, thank you very much
You're so welcome
Very useful information, thank you for this video. Helps a lot when learning webdesign on your own.
I’m so glad I was able to help you out!
The hair! Awwhhee! Love your channel!
It has a mind of its own sometimes👍🏼
Thank you! It helps a lot!
So glad I was able to help out!!
What software/program do you recommend for doing the digital copy of the wireframe?
Riotously nice! Thank you, subbed, and skol!
thanks. my first wireframe for my first app loading.
+Comfort Samuel 👍🏼👍🏼👍🏼
cool informative process ! tx !
Thanks so much 👍
Very helpful.
Thanks for sharing.
Glad it was helpful!
Thanks, very helpful video dude.
Your so welcome
Great video, I'm getting more serious with wireframes I'm definitely too quick to jump into Sketch and it's a bad habit I'm looking to get rid of :)
You mentioned a more in-depth wireframe video, is that an upcoming video?
+Marcus just posted a video about my design sketching techniques. Happy to her you are taking the time to wireframe it helps so much. Honestly I still struggle with wanting to dive right into design but it always turns out better when I follow my own advice👍🏼
I'm starting my first UX/UI-position on monday with very limited experience - this seriously helped with thinking out a possible work flow! Thanks so much. Any tips for evaluating existing designs?
+magnuz olezen congrats on your new role! When evaluating existing designs I always try to think user first, company second, my opinion last. Try to do as much as you can based on data, and iterate before you overhaul 👍🏼
thanks for the video!!
Your so welcome 🤙🏼
Helped me tons :)
So stoked!! 🤘
My Role model, watching your newer videos, and seeing how far you’ve come, is so motivating and i love seeing this growth, thanks for your videos, you have helped me so much!
my blessings go out to you brotha.
thanks brothat. i relly aappreciat this.
you are so welcome
Thank you!
Thank YOU, Dennis!! Stay rad 🤘
Great video. have you tried adobe comp cc (mobile app) for creating wireframes on the go and sending to your computer?
I have tried all sorts of solution but pen and paper always fits me better.
Bro can we take ideas from our competitive audits for our product paper wireframes that how to place things
liked
nice work buddy
+Ahmed Wasef thanks for the support and thanks so much for watching.
MAN i haven't built a website in years so much has changed
You’ve got this!!
I'm a beginner what software i should start with ? Does adobe xd work out for starters especially for the windows pc version coz i can't get a mac right now
it works great!!!
can you us show a case study of something you've worked on? like from conception>wireframing>design etc....I think that would be super helpful
I did a series called “design and code a responsive landing page from start to finish” it covered my whole process through a project 👍🏼
What is the tool that you used to create the wireframes on computer?
Nicely donnnne broooo
Thanks 👍 let me know what topics you would be interested seeing covered.
thank you
No problem
I sat down and started wireframing for an upcoming project and after about 3 wireframes I ran into a wall - do you look at other websites for inspiration while wireframing? or does that slow you down?
I use inspiration sometimes. Look at comps for the industry and demographics. Wireframing is all about solving problems of the user's needs via the skeleton. Your skeleton could look similar to another but the aesthetic details could be the thing that sets it apart. There are some standard solutions to things, just make sure you have reached and explored other things before settling for one of those 👍
Hi Jesse, this might be a silly question, but I am confused about the difference between Wireframe and Prototyping. Prototyping = FInal Design of Product and Wireframing = explanation and actions of the product?
Generally speaking. A prototype is interactive (it's clickable) while a wireframe is like a quick sketch of the layout of the contents (without showing any specific images or fonts)
I don't know any coding knowledge and UI knowledge but I have so many ideas in my mind about app and I hire a developer for making an app , is it okay that I only wireframe on paper for my developer
You are going to be my friend :)
Sounds good
Cool video. Your camera off focus many time though.
always trying to improve, thanks for the feedback 👍
I bless ur day
To you as wel
'nice exp.....but plz do upload abt witeframes using UI/UX ...its software too...waiti'n
More videos coming
Just after I tweeted you I found this video! 😂
I tweeted you back, thanks for the awesome comment. I am in the middle of recording a video about design systems vs patterns vs style guides 🤘🏻
I've been designing websites for over 10 years and I VERY rarely get any content to work with. So annoying.
It's always a challenge man.
Link is not in the description
Try using a manual focus in the future. My eyes couldn't focus on the camera adjusting every 5 seconds.
Sorry for the distraction, It's been a growing process over the last 10 months of making video. I don't strive to be perfect but always be progressing. Constructive feedback like this helps so much, so thanks for watching and helping me to progress. 👍
Allyson M.Gregg.
hi, do you take classes?
Hey Jesse you are really cute :D Can we meet :D JK the second part or not haha, btw thanks for the video, really helped me :)
Happily married 💍
Your camera is better than pewdiepie
Wow thanks
Your welcome
Jesse Showalter your welcome
what wireframe tool??
Figma, Sketch, etc...
Jesse Showalter thank you 👍👍👍
Something is fishy. That's the 3rd video I watched on this subject and these are the EXACT tips that the other 2 gave. Even the wording of those tips are the same. Are these like general rules of wireframing which everyone follows?
Yes
That song was money lol what is it?
I don't remember but probably from epidemic sound
Can i know what is this designing software
I use Sketch for my wireframes
Take a look at axisbits.com/blog/Rapid-App-Prototyping-Tips
your camera kept losing focus. that was distracting but great video!
I have since upgraded equipment 👍🏼
Why have you scribbled all over your hands? Shouldn't you wash that off before recording?
Why waste trees when I have a perfectly good hand! Haha, jk. Just somethings I needed to remember. Thanks for the feedback, have a good one!
This video is pretty generic and not very useful. I've been a UX designer for 6 years and I think it'd help people more of you had chosen a subject and actually wireframed it front of the camera, sort of like an actual tutorial. You just mainly loosely covered a very generic overview of what a wireframe is but not actually how to do it and think through it
That was the whole point of the video... a general overview of wireframing 👍🏼
@@JesseShowalter but the title says 'tutorial' however there was no tutorial because you didn't actually create a wireframe as an example. This is just my opinion on what I thought was missing from the video... basically I'm giving you my user experience of the video and I felt that it was missing the actual tutorial part. Just my two cents, no offense intended. Keep up the good work
Tattoo hands. What ever happened to "thug for life". OMG the dorkiest trend ever. So sad.
I really like my finger tattoos, they are meaningful to me. Thanks for the feedback 👍🏼
TERRIBLE HANDWRITING :-)
I know, haha! Have a good day!