No video :(

How to Wireframe a Website or App | Web Design & App Design Tutorial

Подписаться 395 тыс.

Просмотров 128 тыс.

50% 1

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.i...
////////// Connect with me here 👍🏼
Instagram: / imjesseshow
Twitter: / imjesseshow
Anchor: anchor.fm/imje...
Medium: / imjesseshow
////////// Sign up for my Monthly Newsletter 📫
jesseshowalter....
////////// Music is from Musicbed click below for a free trial 👇🏼
share.mscbd.fm/...
////////// Equipment 📸
www.amazon.com...

Опубликовано:

14 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 119

@negarrahmatali1050 2 года назад

OMG you are the most honest content creator i have ever seen! thanks alot

@Marleyman7 5 лет назад

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

@JesseShowalter 5 лет назад

More coming every week

@officiallytia5276 6 лет назад

Awesome video!!! You made it really simple to connect and relate with. FINALLY a video I get!!!! 😎 Thank you!!!

@JesseShowalter 6 лет назад

+Tia Alexandroff I’m so glad, let me know if there are any other topics I can cover that would be helpful to you 👍🏼

@officiallytia5276 6 лет назад

Jesse Showalter What program would you recommend for wireframing? Balsamiq looked pretty good but I have yet to dabble in it. 🤓

@pauljessee8611 6 лет назад

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.

@JesseShowalter 6 лет назад

Agreed. Competitive sets aren't complete without looking under the hood.

@dave3k 7 лет назад

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?

@JesseShowalter 7 лет назад

+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👍🏼

@theclovergent2143 3 года назад

Very useful information, thank you for this video. Helps a lot when learning webdesign on your own.

@JesseShowalter 3 года назад

I’m so glad I was able to help you out!

@saharakram8291 6 лет назад

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.

@brookebkk 4 года назад

These videos are great. Thanks so much, Jesse!

@JesseShowalter 4 года назад

Glad you like them!

@courtneywarmanrecio6749 4 года назад

Thank you for sharing your tips on wireframing! :)

@JesseShowalter 4 года назад

Thank you for the support, Courtney!

@magnusolesen6715 6 лет назад

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?

@JesseShowalter 6 лет назад

+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 👍🏼

@NbaLive4ever 6 лет назад

Great video man. So many good tips here. Thank you!

@tomcotter4299 4 года назад

What software/program do you recommend for doing the digital copy of the wireframe?

@aniketb3513 4 года назад

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

@JesseShowalter 4 года назад

it works great!!!

@kiruanime2003 2 года назад

Really useful for beginners starting out in the field of design👍

@edwinigwebuike7271 Год назад

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!

@EnderCamacho 5 лет назад

Thanks for the tips! This is a new tool that I need for sure on my career as an Art Director. I am in! 👍

@ellenithernandez9195 3 года назад

Thank you! It helps a lot!

@JesseShowalter 3 года назад

So glad I was able to help out!!

@rick7242 5 лет назад

Amazing tips, thank you very much

@JesseShowalter 5 лет назад

You're so welcome

@shallomsoyombo8849 5 лет назад

The hair! Awwhhee! Love your channel!

@JesseShowalter 5 лет назад

It has a mind of its own sometimes👍🏼

@lisachenindia 6 лет назад

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

@JesseShowalter 6 лет назад

I did a series called “design and code a responsive landing page from start to finish” it covered my whole process through a project 👍🏼

@user-gu5ts5nx8r 4 года назад

Very helpful. Thanks for sharing.

@JesseShowalter 4 года назад

Glad it was helpful!

@valriechang 4 года назад

MAN i haven't built a website in years so much has changed

@JesseShowalter 4 года назад

You’ve got this!!

@ChritsianBucic 6 лет назад

cool informative process ! tx !

@JesseShowalter 6 лет назад

Thanks so much 👍

@trevormonthei4420 4 года назад

my blessings go out to you brotha.

@trevormonthei4420 4 года назад

thanks brothat. i relly aappreciat this.

@JesseShowalter 4 года назад

you are so welcome

@pranoymehra2150 4 года назад

Helped me tons :)

@JesseShowalter 4 года назад

So stoked!! 🤘

@tootonica 7 лет назад

Thanks so much for this video - it's always interesting to hear about other people's design process :)

@JesseShowalter 7 лет назад

+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 👍🏼

@waqaskhan8401 6 лет назад

Your presentation is awesome...i really like it.

@fangbifxx 6 лет назад

Cool video. Your camera off focus many time though.

@JesseShowalter 6 лет назад

always trying to improve, thanks for the feedback 👍

@ErickAdrianM 3 года назад

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?

@zakk238 Год назад

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)

@jasonscharf2084 5 лет назад

Thanks, very helpful video dude.

@JesseShowalter 5 лет назад

Your so welcome

@comfortsamuel2470 7 лет назад

thanks. my first wireframe for my first app loading.

@JesseShowalter 7 лет назад

+Comfort Samuel 👍🏼👍🏼👍🏼

@sabaparsa8939 5 лет назад

Perfect💕thank you

@funglobe3629 4 года назад

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

@dennisosunde2609 4 года назад

Thank you!

@JesseShowalter 4 года назад

Thank YOU, Dennis!! Stay rad 🤘

@swallowedinthesea11 5 лет назад

Riotously nice! Thank you, subbed, and skol!

@AhmedWasef 6 лет назад

liked nice work buddy

@JesseShowalter 6 лет назад

+Ahmed Wasef thanks for the support and thanks so much for watching.

@siddhartharyan7586 4 года назад

What is the tool that you used to create the wireframes on computer?

@evalunaguerraz6100 5 лет назад

thanks for the video!!

@JesseShowalter 5 лет назад

Your so welcome 🤙🏼

@chrisb715 6 лет назад

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?

@JesseShowalter 6 лет назад

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 👍

@MrTriptik 5 лет назад

I've been designing websites for over 10 years and I VERY rarely get any content to work with. So annoying.

@JesseShowalter 5 лет назад

It's always a challenge man.

@OGUNSAKINDPETER 4 года назад

thank you

@JesseShowalter 4 года назад

No problem

@RobertBradford2 6 лет назад

Great video. have you tried adobe comp cc (mobile app) for creating wireframes on the go and sending to your computer?

@JesseShowalter 6 лет назад

I have tried all sorts of solution but pen and paper always fits me better.

@aleksejsaleksejevs7818 5 лет назад

You are going to be my friend :)

@JesseShowalter 5 лет назад

Sounds good

@brockbourgeois7686 4 года назад

I bless ur day

@JesseShowalter 4 года назад

To you as wel

@yashvlog8933 5 лет назад

'nice exp.....but plz do upload abt witeframes using UI/UX ...its software too...waiti'n

@JesseShowalter 5 лет назад

More videos coming

@ryanjohnston3220 6 лет назад

Try using a manual focus in the future. My eyes couldn't focus on the camera adjusting every 5 seconds.

@JesseShowalter 6 лет назад

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

@omarkhateeb3649 6 лет назад

Nicely donnnne broooo

@JesseShowalter 6 лет назад

Thanks 👍 let me know what topics you would be interested seeing covered.

@mma101100 5 лет назад

That song was money lol what is it?

@JesseShowalter 5 лет назад

I don't remember but probably from epidemic sound

@elishanks7292 3 года назад

Link is not in the description

@allysongregg7353 4 года назад

Allyson M.Gregg.

@Minal50 3 года назад

hi, do you take classes?

@bugra1989 5 лет назад

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?

@JesseShowalter 5 лет назад

Yes

@slacky1489 5 лет назад

Your camera is better than pewdiepie

@JesseShowalter 5 лет назад

Wow thanks

@slacky1489 5 лет назад

Your welcome

@slacky1489 5 лет назад

Jesse Showalter your welcome

@user-oe4ly4ne2p 5 лет назад

what wireframe tool??

@JesseShowalter 5 лет назад

Figma, Sketch, etc...

@user-oe4ly4ne2p 5 лет назад

Jesse Showalter thank you 👍👍👍

@OsatoOkoro 5 лет назад

your camera kept losing focus. that was distracting but great video!

@JesseShowalter 5 лет назад

I have since upgraded equipment 👍🏼

@toluatkinson6128 6 лет назад

Just after I tweeted you I found this video! 😂

@JesseShowalter 6 лет назад

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 🤘🏻

@beckybeck3888 5 лет назад

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 :)

@JesseShowalter 5 лет назад

Happily married 💍

@furqueue9590 4 года назад

Why have you scribbled all over your hands? Shouldn't you wash that off before recording?

@JesseShowalter 4 года назад

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!

@chandimakarunarathna2983 7 лет назад

Can i know what is this designing software

@JesseShowalter 7 лет назад

I use Sketch for my wireframes

@lonewolf3564 5 лет назад

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

@JesseShowalter 5 лет назад

That was the whole point of the video... a general overview of wireframing 👍🏼

@lonewolf3564 5 лет назад

@@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