This is really an amazing video. I love it Matt. I just love it. It's kind of cool when you can just do things naturally with a simple pen and paper and produce a ground breaking results.
Hi Sahiti. In reply to your question - the sketch I've shown is appropriate for an early design, to quickly show page layout and UI components. If you know the kind of content to expect, I suggest you move on a more detailed digital mockup where you can paste in sample copy etc. Check out Balsamiq (PC and Mac) or Sketch (Mac only), they're both quick and produce sketch-like mockups. That way you can get a better sense of how big containers need to be, etc.
As always, Love your videos. You take away the mystery and fears and make it interesting to learn. Here are several topics that I'm interested in or concerned about: *** What a UXUI Designers resume should look like (or just UI)? *** Can you do a video discussing getting that first job (how to)? *** What would our days look like as a UI Designer and what will be expected? Thanks buddy!
Hello Matt, I am your 1000th subscriber!!!. That's funny. Your video is valuable to me. Thank you for sharing your artistic knowledge to the UX community. I'm just getting into ui ux, is there any tips you think might be valuable to beginner?
Welcome, Ganiyu. I'm full of tips - Feel free to ask if you're wondering about anything. Usually I recommend people starting out focus less on prototyping tools and more on sketching, the process and the understanding why designs are the way they are. Your thinking matters more than your artistic skills or how good your mockups look. Take a look at Leah Buley's book 'The User Experience Team of One,' which is great and explains some of the most important steps and activities UX designers go through - or my own videos on the process!
Thanks, Matt! Great simple straight forward techniques for those of us that are not normally sketchers/drawers. It takes the pressure off and allows us to get out of our own way. { :-p)
These techniques are so helpful! I've been trying to follow along while using my iPad, same concepts apply definitely a different feel but practice makes a difference!
No, it's not a hinderance. The most important thing is that your sketches communicate your ideas clearly and can be understood by others - your client, colleagues etc. For that, they can be very simple and still work well. But.. practice will improve your presentation quality and that adds a lot of value for a designer, enabling you to communicate more detail, excite clients, and help colleagues to envision your ideas and buy in to them. So the better you can get, the more impact your sketches can have.
Hi Julia. It's been a long time coming, but I've finally posted a video on user story mapping. That's my preferred way of organising information for UX and service design. I hope you find it useful. czcams.com/video/CyGRdC27QqY/video.html
Hey Matt, I also am an Industrial / Product Designer. I'm making the transition to UXUI design. I have several questions: *** Is there much difference between UX and UI? I want to do more of the creative side (UI) like wireframes and mockups. *** How difficult is it learning the UX side?
Excellent video. Could you tell me what highlighters you were using please? These look ideal. (If you’ve discovered better ones (this video is 2 years old!) I’d love to know too!) cheers 👍🏻
Hi Lee. They're Pantone Pro Markers. Still my favourite but a bit pricey if you're buying a lot. Copic also make good markers, and (if you're in the UK), Windsor & Newton do their own version of Pantone pens which are decent, too.
i feel uncomfortable drawing lines inplace of content/text, because i'm worried about what content is most important what is the structure highlighting, am i missing any info, or is there unnecessary info anywhere? how will i know this if i just make a skeleton with lines instead of actual mock text?
Sahiti Ss Iterate. You can do your sketch over and over again after different rounds of research, until you feel, you got the right amount of information to put content in.
'Wireframing' usually means drawing out screens, components and layouts in black and white. You often do it first to decide where everything goes and what make for a good experience, and don't worry about visual style much until later. This could be hand-drawn sketching, or laid out on-screen in a tool like Sketch, XD, Axure, Balsamiq etc. I'd always recommend sketching first. When you're happy with the wireframes, you may then move on to adding visual style - colour, fonts, adjusting layout, adding content like images and charts. This is usually done on-screen as opposed to on paper, with the same tools mentioned above. So 'wireframe' is black and white linework that shows where everything goes. 'Visual mockup' is the same design taken further, with colour, fonts and style added.
@@mattcorrall2090 Well explained. I'm from web design / front end developer background since 2000 and have always started work with visual mockups. Paper sketches work for new clients but I also worked in a software development company a lot of the works require really fast turnaround. I'm wondering how things have changed from when I started as I now have to work with a new UX hire who are more about getting the high level methodology and processes right to get the end product. I"ve moved on to do different hings now and with the new hire, I guess things have changed as in more specialists than generalists these days.
@@izounokuda5461 I'm from a product design background originally but have been in the UX game for around 15 years. In terms of change, my impression is UX graduates are more aware now of development and business needs, and more likely to ask if we're building the right software, what the overall experience is, etc. I've been in agency for years so completely understand what you mean about tight timescales. I advocate for sketching because UX people are often mediocre sketchers and in my opinion rely too heavily on software tools sometimes. Even when my client might want high detail mockups quickly, I still need to ensure the design is well considered and correct first, and for that, sketching first can let me try out a lot of ideas and make my decisions more quickly than drawing everything on screen. Once I'm happy with the sketch, I can move to on-screen mockups confident that I won't have to change so much. Sketching is one tool - that's often overlooked in UX - that can sometimes be the fastest tool for the job, depending on your project.
Thin, orange pen is a fineline Bic Biro. The medium lines a Papermate Flair, the thick lines a Sharpie. The grey markers are Windsor & Newton Promarkers.
Yes, a picture of a single screen from an application of some kind is often referred to as a wireframe. it doesn't really matter whether it's made as a hand sketch (like this) or digitally. Wireframes usually are simple and black and white, showing screen layout and components, but without colour, fonts and photos put in. They often come next.
This was great! Especially to hear you explain what you’re doing while you sketch.
Thanks! Glad you liked it.
Thanks everyone, glad you enjoyed the video! I'm working on the follow-up right now, will post it tomorrow.
Excellent explanation. I am just starting with a UX design course , so these techniques are like gold to me. Thank you for sharing.
Superb! Simple 'n' subtle...
excellent game-changing video!
This is really an amazing video. I love it Matt. I just love it.
It's kind of cool when you can just do things naturally with a simple pen and paper and produce a ground breaking results.
I am an ID myself slowly shifting towards digital product design. Love your approach of sketching the ID way :)
Thanks for the tutorial. I learned the same techniques in the mid 80’s. Glad to see drawing/sketching is coming back instead of right to computer!
Hi Sahiti. In reply to your question - the sketch I've shown is appropriate for an early design, to quickly show page layout and UI components.
If you know the kind of content to expect, I suggest you move on a more detailed digital mockup where you can paste in sample copy etc. Check out Balsamiq (PC and Mac) or Sketch (Mac only), they're both quick and produce sketch-like mockups. That way you can get a better sense of how big containers need to be, etc.
As always, Love your videos. You take away the mystery and fears and make it interesting to learn.
Here are several topics that I'm interested in or concerned about:
*** What a UXUI Designers resume should look like (or just UI)?
*** Can you do a video discussing getting that first job (how to)?
*** What would our days look like as a UI Designer and what will be expected?
Thanks buddy!
That was really a detailed explanation, thanks for sharing
Hello Matt, I am your 1000th subscriber!!!. That's funny. Your video is valuable to me. Thank you for sharing your artistic knowledge to the UX community. I'm just getting into ui ux, is there any tips you think might be valuable to beginner?
Welcome, Ganiyu. I'm full of tips - Feel free to ask if you're wondering about anything.
Usually I recommend people starting out focus less on prototyping tools and more on sketching, the process and the understanding why designs are the way they are. Your thinking matters more than your artistic skills or how good your mockups look.
Take a look at Leah Buley's book 'The User Experience Team of One,' which is great and explains some of the most important steps and activities UX designers go through - or my own videos on the process!
Thanks, Matt! Great simple straight forward techniques for those of us that are not normally sketchers/drawers. It takes the pressure off and allows us to get out of our own way. { :-p)
Excellent video series, really helpful & thorough. Thank You so much for spending the time to make this !
These techniques are so helpful! I've been trying to follow along while using my iPad, same concepts apply definitely a different feel but practice makes a difference!
this is really helpful, thank you!
Loved it! Great technique to get the my UI sketches to life.
Super useful and hands-on tutorial! Thanks a bunch :)
Grate! Thanks for your video...
honesty but this has helped me a lot
Thank you very much for doing this video. It helped me a lot in my career
Thanks for this. Very helpful. Please continue doing videos related to UX!!!
Great tutorial, thank you so much!
Thank you very much, Matt. Your sketches look great! And the techniques are well explained and easy to follow and then practice. Super useful! Merci.
Can you include the equipment in the video description?
im your 1000 subscriber.. i think it was long time coming
Welcome Henry - thanks for checking out the channel.
I'm interested in UX design but worried my relative lack of artistic skill will be a hindrance. Your sketches look really nice T_T
No, it's not a hinderance. The most important thing is that your sketches communicate your ideas clearly and can be understood by others - your client, colleagues etc. For that, they can be very simple and still work well. But.. practice will improve your presentation quality and that adds a lot of value for a designer, enabling you to communicate more detail, excite clients, and help colleagues to envision your ideas and buy in to them. So the better you can get, the more impact your sketches can have.
Thanks for the share. Really helpful stuff. I would love to see a video on how you think about organizing information. Thanks again :)
Hi Julia. It's been a long time coming, but I've finally posted a video on user story mapping. That's my preferred way of organising information for UX and service design. I hope you find it useful. czcams.com/video/CyGRdC27QqY/video.html
thank you for sharing
Thank you Matt, this was very useful! Kepp vids like this coming :)
Thank you 🙏🏾
Excellent! Great tutorial, very thorough and informative. I feel more confident in my ability to make quick sketches :)
Thank you very much for the video!! It was just what I was looking for :)
Thanks Matt!! Very useful techniques...
One very helpful video!!!
Really helpful video, thanks
Great tutorial buddy, it helped me a lot. Keep adding more.....
Thanks Matt gold tips my bro
Great video, thanks Matt.
Your old passion - Storyboarding. Can we see some of that? Or is that too far back?
Great tips...thank you!
I like this technique. Thanks, man!
Hey Matt, I also am an Industrial / Product Designer. I'm making the transition to UXUI design. I have several questions:
*** Is there much difference between UX and UI?
I want to do more of the creative side (UI) like wireframes and mockups.
*** How difficult is it learning the UX side?
Love the tutorial! Where are the rest? :-P Thanks for doing this!
great video! thanks for the great tips!
👍👍👍👍
very informative tutorial, thanks!
Awesome mate...
tnx :)
Excellent video. Could you tell me what highlighters you were using please? These look ideal. (If you’ve discovered better ones (this video is 2 years old!) I’d love to know too!) cheers 👍🏻
Hi Lee. They're Pantone Pro Markers. Still my favourite but a bit pricey if you're buying a lot. Copic also make good markers, and (if you're in the UK), Windsor & Newton do their own version of Pantone pens which are decent, too.
Summary at 31:22
what do you do for website ? how to sketch for web applications :)
i feel uncomfortable drawing lines inplace of content/text, because i'm worried about what content is most important what is the structure highlighting, am i missing any info, or is there unnecessary info anywhere? how will i know this if i just make a skeleton with lines instead of actual mock text?
Sahiti Ss
Iterate. You can do your sketch over and over again after different rounds of research, until you feel, you got the right amount of information to put content in.
What's the difference between sketching / wireframing vs visual moxkups?
'Wireframing' usually means drawing out screens, components and layouts in black and white. You often do it first to decide where everything goes and what make for a good experience, and don't worry about visual style much until later. This could be hand-drawn sketching, or laid out on-screen in a tool like Sketch, XD, Axure, Balsamiq etc. I'd always recommend sketching first.
When you're happy with the wireframes, you may then move on to adding visual style - colour, fonts, adjusting layout, adding content like images and charts. This is usually done on-screen as opposed to on paper, with the same tools mentioned above.
So 'wireframe' is black and white linework that shows where everything goes. 'Visual mockup' is the same design taken further, with colour, fonts and style added.
@@mattcorrall2090 Well explained. I'm from web design / front end developer background since 2000 and have always started work with visual mockups. Paper sketches work for new clients but I also worked in a software development company a lot of the works require really fast turnaround. I'm wondering how things have changed from when I started as I now have to work with a new UX hire who are more about getting the high level methodology and processes right to get the end product. I"ve moved on to do different hings now and with the new hire, I guess things have changed as in more specialists than generalists these days.
@@izounokuda5461 I'm from a product design background originally but have been in the UX game for around 15 years. In terms of change, my impression is UX graduates are more aware now of development and business needs, and more likely to ask if we're building the right software, what the overall experience is, etc.
I've been in agency for years so completely understand what you mean about tight timescales.
I advocate for sketching because UX people are often mediocre sketchers and in my opinion rely too heavily on software tools sometimes. Even when my client might want high detail mockups quickly, I still need to ensure the design is well considered and correct first, and for that, sketching first can let me try out a lot of ideas and make my decisions more quickly than drawing everything on screen. Once I'm happy with the sketch, I can move to on-screen mockups confident that I won't have to change so much.
Sketching is one tool - that's often overlooked in UX - that can sometimes be the fastest tool for the job, depending on your project.
This is great, thanks! What is the brand of the pen that you use?
Thin, orange pen is a fineline Bic Biro. The medium lines a Papermate Flair, the thick lines a Sharpie. The grey markers are Windsor & Newton Promarkers.
Hey Matt. What is the name of the fine liner you used in this video?
Just a Bic Orange Fine Ballpoint Biro - they're pretty cheap and easy to pickup.
Matt Corrall Thank you for the great tutorial.
User Experience Design
Is it a wireframe
Yes, a picture of a single screen from an application of some kind is often referred to as a wireframe. it doesn't really matter whether it's made as a hand sketch (like this) or digitally. Wireframes usually are simple and black and white, showing screen layout and components, but without colour, fonts and photos put in. They often come next.