Drawn Initial Made Easy

Drawn initial

hey I'm Jeff head of UX design here at career foundry today I'll talk you through a very important aspect of the UX design process wireframes I'll start by explaining exactly what a wireframe is and why it's so useful then we'll take a look at the wire framing process and show you how to create your own sound good let's do it so what exactly is a wireframe put simply it's a two-dimensional drawing of a pages interface imagine you're a designing a mobile app you would need to create wireframes for each screen that the user moves through when using at a wireframe is used to define and plan the information hierarchy on a page or screen in other words how should the items in the page be organized what content goes where how should space be allocated and what functionalities are available this includes positioning elements such as buttons menus and headings how do you work out the information hierarchy for your wireframe well this is a pins on how you want the user to process the information on the page and this will be based on your user research it's important to note that a wireframe is a very simple blueprint of what the final product will look like it is essentially a black-and-white diagram there's no need to include any styling color or graphics a wireframe can be hand drawn a simple pin and paper affair or it can be digital but more on that later wireframes are really helpful for a number of reasons above all else they allow you to organize your ideas and get clarity and how the final product should be laid out they also help to ensure consistency throughout the user interface as you'll determine how certain types of information should be displayed on every screen it's important to have layout and functionality clear before you start adding things like color and fonts these can be distracting so wireframes are that necessary in-between step without all the bells and whistles wire framing is also a great way of getting to know how the user interacts with your interface if the user can't easily navigate their way around a plain hand-drawn diagram of your site when something needs to be fit it's important to iron out these kinks before you start actually building out the product once you've done your competitor analysis and conducted the initial user research you're ready to start hatching ideas you might start by sketching out ideas in their roughest form exploring different avenues you might take with this particular product once you've redefined your ideas and they start to take shape you're ready to move on to proper wireframes before we get started on the wire framing process let's take a look at some different types of wireframes your brother of different methods of producing your wireframes hand-drawn wireframes can be created with pen and paper or on a whiteboard these are handy for getting your designs down quickly and they're also super easy to edit drawing your wireframes by hand can be a good way to keep things basic and resist the temptation to get lost in unnecessary details once you're happy with your hand-drawn wireframes you'll switch to digital wire framing to create digital wireframes you'll need a wire framing tool or software there are plenty out there to choose from so if you're new to the field just do a search of the most popular wire framing tools you'll be pretty spoiled for choice the good thing about digital wire framing is that it allows you to keep track of the progress of your wireframes and to document certain decisions you make along the way and of course digital wireframes are easier to share ready to create your first wireframe let's go before you start designing your own wireframes get inspired take a look at some examples of wireframes for a similar product to the one you're designing most decent portfolios will contain wireframes so browse through sites like dribble and Behance to see what other designers have done you don't need to spend ages on this it's just a nice way to get into the groove and start generating ideas okay so you're feeling inspired now you need to create the building blocks of your wireframe I suggest starting by hand so grab a big thick marker pen and a stash of paper at this stage you need to be asking the following questions what are the intended user and business goals when interacting with this page in other words what does the user want to achieve and what actions does the business want the user to complete this could be something like adding an item to a shopping cart for example how can you organize the content to support these goals which information should be more prominent and what buttons or touch points does the user need in order to complete the desired actions this in turn will get you thinking about what your main message and logo should go and what the users should see first when they land on the page you'll also need to consider where to place your call-to-action and finally to think about user expectations what does a user expect to see on certain areas of the page remember right now you're just drawing out the building blocks the bare-bones so keep it simple once you've got the foundation in place it's time to fill in the details my advice would be work from top to bottom then left to right so what kind of details do you need to fill in at this stage you need to define usability conventions such as putting the navigation at the top next to your logo and maybe placing a search box in the top right corner for example you also need to think about spacing layout and information hierarchy what information is most and least important what are your calls to action for example if you're building an e-commerce app your CTA may be a button with the text Add to Cart next think about what images you want to include where you want to include them and what size they should be now throughout the entire wired framing process there are three big boxes you should be looking to tick clarity user confidence and simplicity what do we mean by clarity your wireframe needs to make it clear as to what page is depicting and what the user can do does a layout of the page satisfy the user needs can the user easily complete their desired actions without too much thought user confidence is all about building trust in your brand for good design what does this have to do with wire framing well ease of navigation and clear calls to action make sure that the product interface is predictable and comfortable if your page is unpredictable with buttons and boxes in unexpected places user confidence will rapidly sync when creating your wireframe use familiar navigational processes and place buttons and commonly use intuitive positions simplicity is all about keeping out the noise or creating your wireframes avoid information overload excessive content links and buttons can be really overwhelming and distracting for the user and ultimately makes it difficult for them to achieve their goals the user journey should be as smooth and seamless as possible so really think carefully when deciding what needs need to be included on each screen remember wireframes are not about pretty colors and aesthetics they're about intuitive and logical layout and good information hierarchy so keep this in focus at all times before converting your hand-drawn wireframes into digital format you might wish to get feedback on your work so far if you've got the time and resources consider conducting some quick usability tests to highlight any big flaws that you might have missed as I mentioned before there are countless digital wire framing tools out there so spend a bit of time experimenting and finding one you like I personally like balsamic as it limits you and keeps you from adding too many colors and details most tools offer free tutorials and plenty of guidance so you'll get to grips with it in no time we're designing an app or a website you will create a wireframe for each screen or page eventually ending up the complete set of wireframes to test your wireframes you'll turn them into prototypes this can also be done with the help of special software which essentially turns your wireframes into a clickable mock-up you'll then conduct user testing to see how the user interacts with your design identifying any bugs flaws or blind spots however that's a topic for another day now you know where wireframe is why it's so important and how to get started creating your own I hope this guy's been useful please feel free to leave your comments below we'd love to hear your feedback for more tips and insights check out the career foundry blog oh and if you enjoy this video don't forget to subscribe to our YouTube channel see you next time