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!
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!
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)
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!
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 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.
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.
'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.
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.
Thanks everyone, glad you enjoyed the video! I'm working on the follow-up right now, will post it tomorrow.
This was great! Especially to hear you explain what you’re doing while you sketch.
Thanks! Glad you liked it.
Excellent explanation. I am just starting with a UX design course , so these techniques are like gold to me. Thank you for sharing.
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.
Superb! Simple 'n' subtle...
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.
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!
That was really a detailed explanation, thanks for sharing
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 !
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!
excellent game-changing video!
Loved it! Great technique to get the my UI sketches to life.
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)
One very helpful video!!!
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!
Thank you very much for doing this video. It helped me a lot in my career
Super useful and hands-on tutorial! Thanks a bunch :)
Thanks for this. Very helpful. Please continue doing videos related to UX!!!
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?
this is really helpful, thank you!
Thank you Matt, this was very useful! Kepp vids like this coming :)
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 :)
Grate! Thanks for your video...
Great tutorial, thank you so much!
thank you for sharing
Thanks Matt!! Very useful techniques...
Great tutorial buddy, it helped me a lot. Keep adding more.....
honesty but this has helped me a lot
Great video, thanks Matt.
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
im your 1000 subscriber.. i think it was long time coming
Welcome Henry - thanks for checking out the channel.
Really helpful video, thanks
Thank you 🙏🏾
Thanks Matt gold tips my bro
I like this technique. Thanks, man!
Great tips...thank you!
great video! thanks for the great tips!
Love the tutorial! Where are the rest? :-P Thanks for doing this!
Awesome mate...
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.
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?
very informative tutorial, thanks!
Your old passion - Storyboarding. Can we see some of that? Or is that too far back?
what do you do for website ? how to sketch for web applications :)
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.
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.
Summary at 31:22
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.
tnx :)
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