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.
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.
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)
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!
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!
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. ua-cam.com/video/CyGRdC27QqY/v-deo.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?
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.
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.
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.
'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.
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.
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.
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.
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.
That was really a detailed explanation, thanks for sharing
Superb! Simple 'n' subtle...
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!
excellent game-changing video!
I am an ID myself slowly shifting towards digital product design. Love your approach of sketching the ID way :)
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)
Super useful and hands-on tutorial! Thanks a bunch :)
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!
Excellent video series, really helpful & thorough. Thank You so much for spending the time to make this !
this is really helpful, thank you!
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!
One very helpful video!!!
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!
Loved it! Great technique to get the my UI sketches to life.
Can you include the equipment in the video description?
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!!!
Grate! Thanks for your video...
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.
Great tutorial, thank you so much!
Thank you Matt, this was very useful! Kepp vids like this coming :)
Thank you very much for the video!! It was just what I was looking for :)
honesty but this has helped me a lot
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. ua-cam.com/video/CyGRdC27QqY/v-deo.html
Excellent! Great tutorial, very thorough and informative. I feel more confident in my ability to make quick sketches :)
thank you for sharing
Thanks Matt!! Very useful techniques...
Great video, thanks Matt.
Really helpful video, thanks
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?
Great tutorial buddy, it helped me a lot. Keep adding more.....
Your old passion - Storyboarding. Can we see some of that? Or is that too far back?
Thanks Matt gold tips my bro
Great tips...thank you!
I like this technique. Thanks, man!
im your 1000 subscriber.. i think it was long time coming
Welcome Henry - thanks for checking out the channel.
Thank you 🙏🏾
great video! thanks for the great tips!
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.
very informative tutorial, thanks!
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.
Love the tutorial! Where are the rest? :-P Thanks for doing this!
Awesome mate...
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.
👍👍👍👍
what do you do for website ? how to sketch for web applications :)
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.
tnx :)
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.
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.
Summary at 31:22
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.
User Experience Design