How To Create Your First Wireframe (A UX Tutorial) 2021

What is wireframing and how can you go from a  quick pen and paper sketch to a great digital   wireframe in under five minutes in this  video we'll give you an overview of the   concept show you how they work and help you  get started creating your own wireframes   we get started if you're interested in  learning more about wireframing and UX design   CareerFoundry has a great free short course  the link is in the description below please   share any questions you have about wireframing in  the comments below let's dive in and get started What actually is a wireframe essentially it's  a low fidelity sketch of a digital interface   the outline or bare bones of the key elements of  a design the purpose of a wireframe is to help   the designer plan how everything is laid out  on the screen before they get bogged down in   the nitty-gritty details of the design it also  provides a basic artifact that can be tested   with users to confirm or deny different design  choices imagine you're designing a mobile app   before you decide on the perfect colors and  design aesthetic you will create wireframes   for each basic screen this will help you  plan out exactly how the user will undertake   tasks engage with key elements and  navigate through your product or app   traditionally there are two types of  wireframes the physical hand-drawn sketch   and digital wireframes a hand-drawn sketch is  made simply using paper and pens and markers and   a digital wireframe can be made using a variety  of different tools you can find a great list of   both free and paid tools in the description of  this video whether a hand-drawn sketch wireframe   or a digital wireframe they're both made up of the  same things basic fundamental shapes to represent   the key elements that you would see on a screen  in their simplest form and they're usually in   black white and sometimes some gray the important  thing about wireframes is to keep it simple more   detail can be distracting and it's important to  keep things to their most basic fundamental forms   once you've got some initial ideas down on paper  you might notice that not everything fits quite as   you envisaged take the time to do a quick second  sketch and refine key elements if they don't fit   quite right digital wireframes are a great step  after hand-drawn sketches because they're easy   to share with colleagues and the rest of the  design team who can continue to add layers of   complexity and polish so hopefully this gives you  a better idea of what a wireframe actually is and   what it might look like in the real world before  we get started creating your very first wireframe   if you have any questions about what we've covered  so far let me know in the comments below and   we'll get back to you as soon as we can let's get  started creating your first wireframe we'll start   with a hand-drawn sketch and then digitize it in a  free online wireframing tool so let's get started   making a really quick sketch wireframe of a login  screen i'll start with sketching a basic rectangle   to represent the shape of the phone screen and our  boundaries that we're working inside then i think   about what the main elements that i definitely  need on that screen the first thing i can think of   is that the user will need to type in a username  or an email address so we'll have a text field   which we can represent with a rectangle there  and maybe an at symbol to show that it's an email   field the next thing i can think of is that the  user will need to click a button to actually log   in after they've typed their email so i'm going to  put another rectangle here underneath that will be   a button and putting the word on there for example  login to illustrate that it's the login button   now i think about what other things might i want  to put here and while i'm doing this wireframe   i'm really thinking through the process so this  won't be the first wireframe that i do i'll come   up with some ideas as i go and then realize i  want to change my sketch and start again but   it's only taken me two minutes to sketch it out  so this is one of the main points of wireframing   is to try planning and mapping out different  things on the screen see where they might fit   and then revising the sketches very quickly so  what else needs to go on this screen i probably   need to have the logo of the company somewhere i  can illustrate that with a really simple circle   or rectangle somewhere at the top that shows  it's the logo some other things that i might   need to put here are um forgot login or need help  logging in so i put some text here help logging in and some other things that we see really commonly  in login screens is the ability to log in through   a different account like a google account  or a facebook account so perhaps underneath   the main login i decided to put facebook login  and google login and show where those logos go   underneath facebook login google login and  the final element that i might add is a nice   image to make the login screen feel warm and  welcoming so now that i've thought that through   quickly with some quick sketching i want  to do a quick revision to just make sure   that everything feels like it's in the right  place so i'm going to resketch my rectangle put the image at the top here  the logo will also go here   and then some nice space this time in between  the email field and the image and the button and underneath facebook and google Okay so that's my quick example of my  first sketch where i quickly tested   out some positioning and ideas and a quick  re-sketch in one more minute to really show   how i want everything laid out on  the screen in a very simple way   so you can see that's taken me a maximum of a  couple of minutes for two sketches and a clearly   laid out final version that we're now going  to digitize in a free online wireframing tool so let's dive into this free online tool called  wireframe.cc in this tool i have a really basic   functionality which is really great and easy  to get started and you won't find yourself   spending hours and hours trying to create perfect  little details which is exactly what we want with   a wireframe there are a few different settings  you can set up beforehand this one is set up for   a desktop app so if we were creating a full page  website but i prefer to go over here to the top   left and change to a blank canvas setting so we  just have an empty board to work with and then we   can really simply recreate what we've done in the  hand sketch in digital format so i'm going to drag   a nice long rectangle to represent the area of the  phone screen and when i release the mouse button   there i shows that i can choose exactly what  shape i wanted and i just want the rectangle so   now i really quickly go back and look at my sketch  and recreate each thing i'll start with the image   at the top of the screen and i've got a rectangle  there and now i'm going to choose that image   option and it automatically puts that crossed line  through it to indicate that it's an image in the   wireframe now i want to put my logo in in the top  left corner and i'll choose the circle option to   do that to represent that and i'll keep going down  the page now putting in the elements as i did them   in my hand drawn sketch a rectangle for the email  login field a rectangle for the button and when i   click now on that rectangle that i just made and  double click i can choose a color for it so this   is how i'm going to choose to represent what the  button looks like the difference between a button   and a text input field so now when we look at that  it's a bit clearer that that's the input field for   the email and that's the button and on here as  well i can create some text so another rectangle   call that text and i'm going to call this forgot  my password i'm going to make it underlined   and i'm going to make this a little bit smaller  so that it it's not really drawing my eye because   this is something that we want to position on the  screen in a way that's accessible and it's there   if you need it but it doesn't draw the user's  attention because not everyone will actually   need to use this so i'm going to make that text  a bit smaller so that it's not so prominent and now i'm going to do another piece of  text for the word login on the login button   and i'm going to make that uh a lot bigger and  more obvious because that's the main function   that the user wants to do on this screen is to  type in their email or user id and then click   the login button so that i'm going to the  wording i'm actually going to make bigger   so that really stands out  in a much more prominent way so i'm going now i'm going to put the last  two elements on the screen which were the two   alternative login options so a facebook  login button and a google login button   so i do that again with the same drag   and release and then choose the rectangle  and i'll make a second one right away here so i'm going to copy and paste the text  from above just to make it slightly quicker   instead of redrawing an entirely new element and  i'm going to call this button log in with facebook and i'm going to make the  text just slightly smaller   and less prominent i'll remove the bold there and  make it a little bit smaller just so that there is   one clear um action on this screen which  is to put in your email address and log in   and these are now secondary options that are there  as well so you can already see that on this screen   there is a hierarchy or a  priority order of the information   there's the main function of the login email  address and the login button there's the secondary   functions of alternative login options you can  also log in with facebook or google and then in   much smaller text there's the forgot my password  which is something's going wrong not every user   will need this but if they look for it it will be  there but it's that third third priority option   so that it's very easy for the user to quickly  scan and see which things are the most um the most   important or what's the main action on that screen  so this is what wireframing really helps us with   quickly sketching out and planning what  information needs to be on the screen   where it could go and seeing what it  looks like when we lay it out like that   adjusting the options so that the primary action  is the most obvious for the user and adjusting the   basic fundamental properties of the core elements  on the screen without worrying too much yet   about exact styles and colors and fonts but just  really thinking about the information and is   it in the right place and is it easy to see and  use hopefully now after watching this video you   have a better understanding of what a wireframe  actually is and how it looks in the real world   now you should be able to create your own  wireframes using pen and paper sketching   and digital wireframing tools like wireframe.cc  if you've done wireframing before we're keen   to know what your favorite methods and tools  are please let us know in the comments below   if you're interested in learning more about  wireframing career foundry has a great in-depth   article that will walk you through the process of  creating your very first wireframe you can find   out more in the description below i really hope  you've enjoyed this video if you have please give   it a like and subscribe to this channel for more  weekly content just like this from career foundry   thank you so much for watching and we'll  see you again soon quick paper digital paper   a diaper a digital paper i'm laughing it's fine  it's fun it's fun it's fun it's fun but it's fun   it's fun so hopefully now you'll be able to create  me baby time because i said did you choose easy to   share with the duress the duress the rest of the  design team yeah that was it i gotta go get it yay okay

Channel: CareerFoundry

Views: 59,449

Rating: 4.9584055 out of 5

Keywords: What is a wireframe?, Wireframing tutorial, wireframing for UX, UX tutorial, how to wireframe, how to wireframe an app, wireframing, wireframing tools, free wireframing tools, wireframing guide, wireframe web design, wireframe, wireframe tutorial, website wireframe, how to wireframe a website, wireframe app design, wireframe ux, wireframe web design tutorial, what is a wireframe, best wireframe tools, wireframe sketch

Id: qpH7-KFWZRI

Length: 12min 51sec (771 seconds)

Published: Thu Apr 08 2021