so what is ux sketching i find sketching an effective way to communicate all of
my design concepts and allowing the team members and myself to
iterate on different ideas before settling on the final one what's really good about ux sketching is
you don't need to be an artist and no one from your team needs to have an art degree
to participate in ux sketching trust me on this if you can draw the visual alphabet
then you are ready for ux sketching okay so let's give it a go together
so first thing when you're sketching for ux it's very important to decide what kind of device
or browser you're going to use so we have three different versions desktop tablet and a smartphone
let's just sketch out all of them so what's really important here is you keep the aspect ratio
so this is our desktop and if you want to represent a mac or you might just place three
dots here and if you want to represent a windows computer then you just add the cross in the corner
you can represent the tablet in a portrait or landscape mode i know this is not what the
ipad looks like but this is how i usually represent the tablet in landscape version
so this is the previous tablet this is the porsche version and on a smartphone what you want to do
you just keep the ratio smaller and maybe this is your camera and what if this is a landscape
so we have three different viewports here now one of the other common components when
you're sketching or when you're wireframing your website or an application is your navigation so we
have three different navigation structures horizontal vertical and one for mobile so
let's just do a horizontal one i'm just going to sketch a desktop
and i like to stay in a mac our navigation is basically just a logo here
and then just adding some lines as navigation items so let's do the vertical one
if you're going to do a slider menu then your menu can actually come from the left or from the right
so something like this or another version would be just going to use another color here like this
it's very simple okay for your mobile either it's coming from the right or from the left
i just add the line here and this is my navigation items and i just like to shade this other part out
basically represents that this part is an overlay there are common elements when it
comes to ux sketching so let's just have a look at them so it's very common to have a header
how i usually represent the header is basically i draw a rectangle and i add the logo here and
some nav items here or you can have a little bit different header you can put your logo here and
add some navigation items here you might actually want to include maybe a button here
the next common component when you're sketching is a title if you're using pen and paper then
i would just recommend to use a sharpie where you can actually draw like a thicker line so that's
how i would represent my title and while we are doing the title then we need another component
which is the body copy or paragraph and instead of a thick line i usually just add these kind of
lines so the next common component is an image as we already saw that in a header
i usually represent my image like this if you're thinking about adding or representing a carousel
then what i usually do is basically i just sketch this image i add some icons here and i represent
the carousels not only with these elements but i also add these dots here the next common component
when it comes to wire framing and sketching is buttons like to use rectangles for a button
or you can use like an oval kind of shape for a button or you might have icon buttons
or you might have text button you know like a link text button for the buttons and whenever
actually you would like to frame a text or a label then i would recommend to put the text down first
for example we just do button and then we add the frame around the text i see a lot of people
doing the frame first and then they add the text in it so but see what can happen subscr
so i cannot actually fit the whole text in so text first and framing after you might want to
include button groups as well so it's very simple just like that other things there are important
form elements what are your form elements those are basically your
input fields tangle and you have a label here you can have a form element with a leading icon or you
can have a form element with the tailing icon it might be also your combo box your drop down
and then this is your drop down something like that other important form elements are
the check boxes and radio buttons for check boxes it's just a square and another square
another square you might want to put some lines next to it and this is your checked checkbox your
radio buttons are circles and then when something is selected then you just add another dot here
i like to add a little bit of shadow here like this so that's how you pimp your checkbox another
form element is your text area these little lines represent that this text area is expandable and i
might include a scroll bar here as well speaking of scroll bar you can have this kind of scroll bar
or like this and some miscellaneous why should i pronounce it miscellaneous and some random
items that you usually need to include in your sketches let's call them misc so for example
pagination how do you represent pagination this is a rectangle and it has a beginning and an end
some arrows so you can just step through and we have number one here number two
and something and something and this is 99 let's say very bad pagination but this is how you can
represent it and maybe with another color or just adding a little shade here so you know that this
is actually selected so the user is on page number two controls that you might want to include maybe
like a toggle so this is on and off other controls like a slider it's very simple play button
pause button you might want to include a video in your sketches
the video player might have a slider as well other elements you might need is a progress bar which is
you can represent it so many ways maybe like that kind of looks like a bucket if you think about it
or like this
and just shade it in and just give it a percentage here another element that you frequently need is a
messaging a banner message or toast message so let's just do a toast once you have your basic
things done then maybe you just want to have a toast here and let's say this is a success message
to do this is an icon body copy and this is your toast message you might want to represent
tabs again this is just a rectangle tab tab tab maybe this is the selected one you underline it or
you shade it in that's also nice kind of like this next is your model that you might need frequently
you just draw your browser window and then add the model on top of it which has a title decline
body copy maybe you want to include some buttons here and definitely a close icon and you can shade
this one out if you wanted to yeah so that's your basic model if you're working on a pricing page or
an e-commerce website then you probably would use a lot of cards there i usually do my cards again i
have a rectangle here i have an image maybe i have a title here some body copy then i have a button
and then i just do the same next to it
and maybe you actually want to draw attention to one of them so you either just draw this one a
little bit larger or you can add a border around it with a different color like what i did here
and finally if you do some kind of lists either it's a bullet list or number list then you just
do it like this these are your bullet points if it's a number list it's very similar it's
one two three and in mine and there you have it so this is how you sketch for user experience design
you might have seen one of my videos about crazy 8 and crazy 4
if you haven't make sure you check it out thanks for joining me today i see you next time bye