Hey!👋Looking for some next steps? Subscribe to our channel for more UX and UI content: ruclips.net/user/careerfoundry . Check our our updated 2021 wireframe video, and learn to sketch and digitise your wireframes in free software! 📺 ruclips.net/video/qpH7-KFWZRI/видео.html . Interested in UX Design? Check out CareerFoundry's free, UX short course here, to get a better taste of what''s involved: careerfoundry.com/en/short-courses/become-a-ux-designer/?.com&UXD_wireframe_291018&
I think the content of this video is really the CORE of UX design because this is the ORIGIN of all those pretty interfaces being created later, not user research, not product strategy, it's this--- how do you actually come up with your wireframes, I counted the number in the video, there are 11 questions need to be considered when you create wireframe. These 11 questions are gold. This is extremely valuable stuff, every single person who wants to become a UX designer should watch this. Thank you, CareerFoundry.
How to made 1st wireframe:- 1. inspiration(Go to websites like dribbble and behance and show up the the products and wireframes that are made by professionals) 2. Start building blocks like pickup thick Marker Pen and start sketching on notebook and take a look or think about that what are the intended user(audience) and business goals when interacting with this page. 2a. How can you organise the content to support the goals? 2b. Which information should be more prominent? 2c. What buttons or touch points does the user need in order to complete the desired actions ? 2d. What does the user expect to see on certain area of the page? 3. Now *Fill in the Details* So start from first top to bottom then left to right this is the advice by the gentleman of this video. 3a. Now at this stage I have to *Define Usability Conventions* like Spacing, layout and information hierarchy 3b. What information is most and least important? 3c. What are your Calls-To-Action? 3d. Now think about what images you want to insert and where to insert and what the size of that image? 4. Now for the entire wireframing process you have to check main three boxes those are *Clarity, User Confidence and Simplicity* 5. Go digital ( use Balsamiq software for Wireframing) 6. To test or wireframes we have to to make them into prototypes which can be done with the help of some softwares which essentially turns into our wireframe into a clickable mock-ups then after you can check bi user testing to see how the user interacts with your design to identifying any bugs, flaws or blind spots.
As a 2nd year university student majoring in graphic design & illustration, this is soooo sooo helpful because i’m taking my first UX design course and don’t know shit, thankyou so much going to help tremendously with my first assignment 🙌🏽
Hey Simma, amazing to hear. Thanks for sharing, and glad the video came in handy! We also have a re-vamped version we released a few months back that might be of interest: ruclips.net/video/qpH7-KFWZRI/видео.html
Thank you so much this have alot of knowledge for us as newbie in UX Design. I love how he explain with clear pronounciation (bcs i am not native english speaker).
this video was soo good, it's literally what I needed to know on how to wireframe, it's even better than what's produced from google's definition on wireframing, great job!
Data can get very complex and overwhelming. As a business analyst, I find the KISS (Keep it simple, stupid) approach the best for creating wireframes and managing all other aspects of data.. Focus on small pieces rather then the overall finished product. Data is like a jigsaw puzzle. You have to put it together one piece at a time.
Very good...unfortunately i spent money to a company called suittwentyfour for this information. He didint help me at all but took my money...lesson learnt
Hi Lilith! We recommend having a look at the guide on our blog: careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/ We did our very best to explain the difference between UX and UI design in a clear and comprehensive way. We hope this will help you!
Wow, Jeff has the face of a 90's male model and the body of a 70's lumberjack. All edited together with with proficiency of a 1980's High School AV club.
Hey, thanks for the feedback Aliaksandra, we wanted to focus on the introductory fundamentals here but we take your point. We'll look at adding specifications to future Wireframing content, thanks again!
Hi Mia, it may mean that the site was not tested with users to the fullest extent it should have been if the design is hard to navigate, for example. So yes, UX would play a big part in that.
Thanks for the feedback! If you want to learn more about wireframes, we have these in-depth articles on our blog dedicated just to creating wireframes. There's a new, updated RUclips video embedded there as well. Check it out! - careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/ - careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
Hey!👋Looking for some next steps? Subscribe to our channel for more UX and UI content: ruclips.net/user/careerfoundry
.
Check our our updated 2021 wireframe video, and learn to sketch and digitise your wireframes in free software! 📺 ruclips.net/video/qpH7-KFWZRI/видео.html
.
Interested in UX Design? Check out CareerFoundry's free, UX short course here, to get a better taste of what''s involved: careerfoundry.com/en/short-courses/become-a-ux-designer/?.com&UXD_wireframe_291018&
I think the content of this video is really the CORE of UX design because this is the ORIGIN of all those pretty interfaces being created later, not user research, not product strategy, it's this--- how do you actually come up with your wireframes, I counted the number in the video, there are 11 questions need to be considered when you create wireframe. These 11 questions are gold. This is extremely valuable stuff, every single person who wants to become a UX designer should watch this. Thank you, CareerFoundry.
Agreed. True gems were dropped in this video, for those who paid attention and weren't distracted by the presenters powerful eye contact
I got hypnotized looking at his eyes and just woke up right now
Haha same here 😆
How to made 1st wireframe:-
1. inspiration(Go to websites like dribbble and behance and show up the the products and wireframes that are made by professionals)
2. Start building blocks like pickup thick Marker Pen and start sketching on notebook and take a look or think about that what are the intended user(audience) and business goals when interacting with this page.
2a. How can you organise the content to support the goals?
2b. Which information should be more prominent?
2c. What buttons or touch points does the user need in order to complete the desired actions ?
2d. What does the user expect to see on certain area of the page?
3. Now *Fill in the Details*
So start from first top to bottom then left to right this is the advice by the gentleman of this video.
3a. Now at this stage I have to *Define Usability Conventions* like Spacing, layout and information hierarchy
3b. What information is most and least important?
3c. What are your Calls-To-Action?
3d. Now think about what images you want to insert and where to insert and what the size of that image?
4. Now for the entire wireframing process you have to check main three boxes those are *Clarity, User Confidence and Simplicity*
5. Go digital ( use Balsamiq software for Wireframing)
6. To test or wireframes we have to to make them into prototypes which can be done with the help of some softwares which essentially turns into our wireframe into a clickable mock-ups then after you can check bi user testing to see how the user interacts with your design to identifying any bugs, flaws or blind spots.
Thank you
Thank you!
thanks a lot buddy!
As a 2nd year university student majoring in graphic design & illustration, this is soooo sooo helpful because i’m taking my first UX design course and don’t know shit, thankyou so much going to help tremendously with my first assignment 🙌🏽
Hey Simma, amazing to hear. Thanks for sharing, and glad the video came in handy! We also have a re-vamped version we released a few months back that might be of interest: ruclips.net/video/qpH7-KFWZRI/видео.html
Good info! A bit creepy just staring into the camera instead of more graphic examples. But still informative.
I couldn't take my eyes off that unbuttoned shirt!
I love your comment Bob I swear! 🤣🤣🤣
@@JavaScriptJolt Same. Distracting, like too much cleavage...
😂
😩🙌🏼🤭😂👌👌
Thank you so much this have alot of knowledge for us as newbie in UX Design. I love how he explain with clear pronounciation (bcs i am not native english speaker).
Thanks for the feedback Nurfitria, glad you enjoyed this video. We are actually releasing an updated version of this this week on our channel too!
every itgs student is grateful with you
Jeff thanks a lot. I`m just a newcomer to the concept, so lucky to find your video. Best regards
hey , its amazing i found this is really useful for the initial learners. Thank you very much for explaining the content in pretty simple manner.
You're very welcome! Thanks for the kind feedback Anuupama!
Interesting, actually helpful in order to understand wireframing
Good and simple explanation for beginners...thank you
You are welcome!
Wish I could like this more than once!
So much information in such short video. Great! Heading to the article to take more notes.
Waouh !
Very usefull, simple explanations.
Thank you Jeef!
that was good ! easy to understand instructions and not over the top speaker ..great thanks!
Very nice, simple and easy video to follow. Good job jeff.
Glad you liked it!Thanks for the feedback!
Thank you
Awesome walkthrough for non designers like me.....simple and elegant
And definitely his eyes and arm tattoo are helping to focus :D
His eyes... it feels like his staring into my soul.
hey it's really amazing and helped me thank u so much for explaining.
i really thank you for sharing these informations. It was reallyyyyyyy helpful for me and make wireframe more clerar for me!
nice explanation and easy to understand .you wrap the whole point in simple and beautiful manner .
very insightful, thank you!
this video was soo good, it's literally what I needed to know on how to wireframe, it's even better than what's produced from google's definition on wireframing, great job!
Really glad you found it so helpful!
Thanks guys for this guides! (from Ukraine)
Great Insights
Thanks Jeff, really useful and interesting. Thanks for the heads up on some digital tools as well.
Good insights viz emphasis to Intuitive and logical layout and information hierarchy.
Thanks Priya, glad you found this useful! We have an updated version of this video coming out this week too!
are these videos the same wit those available when someone enrolled to CF to take ux design course, or just different videos
Fantastic. So informative
Thank you...very informative
Thanks, glad you found this video helpful!
Great content. Thanks a lot.
Content amazing. Chest hair... Impressive. I give it two thumbs up.
Very useful information 👌
Glad it's helpful!
well explained...thanks a TON 🤩🙌👍🙏🙏🙏
useful lesson
This is really helpful
Thanks alot
Thank a lot, glad it helped. What else would you like to see from us relating to digital design?
@@careerfoundry what to do next after you're done with your project, like how to export, how to post it online and to add it to your profolio Thanks
outstanding information!
Glad it was helpful!
Great tutorial. Thanks!
4:34 why does it look like he's
A: Being forced to do this
B: About to cry
lmfao
lmmmmaafo
hahahahaha, I read this before I watched the video, and now I can't focus on what he's saying
I got hypnotized looking at his eyes and just woke up now
you are commenting on his appearance and you forgot that your user id name is green goblin and has face that is already sting.
Very informative. Sounds like you need a bit of sound dampening in your studio.
Thank-you
Great! I have subscribed instantly. All I can suggest is add some background images linked to a specific topic or question you explain. Thank you!
Data can get very complex and overwhelming. As a business analyst, I find the KISS (Keep it simple, stupid) approach the best for creating wireframes and managing all other aspects of data.. Focus on small pieces rather then the overall finished product. Data is like a jigsaw puzzle. You have to put it together one piece at a time.
This was awesome! Thanks for the info!
You read it all without blinking. 🤸
Hello Sir, Can you tell me where I can get all the wireframing UX shapes so that I can practice over paper before jumping into application skeach
super impressive.
THANK YOU SO MUCH
So glad to see that you liked this one! 😊
you look like marty's father in back to the future:) thanks for sharing.
Thank you. your video was very informative. :D
Glad it was helpful!
Great content, really insightful and informative. Thanks for sharing :)
thanks alot
steve harrington from stranger things gave some good info here
When he'd had enough of ice-cream parlors and fighting Mind Flayers, Steve became a UX designer.
You're so woke.
Great man
Thanks
Thank you!!
Wireframe VS. Design explained with drawing : ruclips.net/video/cQzTmfPEN_4/видео.html 😋
Informative. Thanks. More images should have been added though.
Thanks, glad you found this informative! We'll try to implement your feedback for our future releases!
Nice! i would have to agree
I would have to highly disagree w/ you, you see human trafking is a real problem rn.
Rare video of Joshdub talking about Wireframe
very pog nice video
Very nice and precise explanation, thanks bro. :-)
Nice
good stuff.
Thanks Cesar! We're glad it was helpful!
amazing
Really amazing and clear content! Thank you very much!
He looks like young Jamie Lannister
Thank u, very useful.
Very good...unfortunately i spent money to a company called suittwentyfour for this information. He didint help me at all but took my money...lesson learnt
Good job but doesn't it have some Special plane figures
Good video, a little bit longer than usual, but clear
Glad it helped, thanks for the feedback too! We want the content to be just as long as it needs to be and as clear as possible!
the backsound track sounds like digimon 4 loading screen
I love how everyone is commenting on his eyes
useful!
anyone knows how to create a wireframe sitemap using wireframe cc?
dude u have a lot of chest hair
edit: oh its the shadow x'D
I opened the video on RUclips for this. Thank you!
My name is Jeff
Someone please help! I've tried looking for differences between UX and UI, but I still don't get the difference... 😭
Hi Lilith! We recommend having a look at the guide on our blog: careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/ We did our very best to explain the difference between UX and UI design in a clear and comprehensive way. We hope this will help you!
Wow, Jeff has the face of a 90's male model and the body of a 70's lumberjack. All edited together with with proficiency of a 1980's High School AV club.
Damn good !
VeRy Cool
I feel like i am in the movie "team America".
Wireframe must contain a specification for each element. What you are talking about is only 50% of a wireframe.
Hey, thanks for the feedback Aliaksandra, we wanted to focus on the introductory fundamentals here but we take your point. We'll look at adding specifications to future Wireframing content, thanks again!
Good
DANKO!!!!!!!!!!!!!
His shirt is also a wireframe
Just goes to show our level of commitment 😅
dope
🙏🏼
soundtrack ?
so, HOWWWW????
So when I hate the design of a website, a UX designer did not do a good job.
Hi Mia, it may mean that the site was not tested with users to the fullest extent it should have been if the design is hard to navigate, for example. So yes, UX would play a big part in that.
john morrison
my name is jeff
I am sure creating a wireframe is not staring at his face
My name Jeff
teaching wireframes without any wireframe....cool
Thanks for the feedback! If you want to learn more about wireframes, we have these in-depth articles on our blog dedicated just to creating wireframes. There's a new, updated RUclips video embedded there as well. Check it out!
- careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/
- careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
my name.... jeff
Am I crazy or is that terraria music?
Hey, good question, we wouldn't be able to say for sure what the track is sorry, as this video is an oldie!