UI/UX Design | Creating Low-Fidelity Wireframes In Figma

[Music] hello youtubers and welcome to geo marvel live i'm sonia the ux and ui designer at geo marvel and i'm excited to give you a sneak peek into my work here through a short tutorial that will walk you through creating wireframes using figma a web-based interactive and collaborative design tool now let's get started the user experience design process is multi-layered but today we're going to focus on figma the main tool used to create wireframes or mockups of screens within the app you're creating right now you're looking at an empty figma document or a blank gray screen and i like to consider it an online campus before mocking up your low fidelity or grayscale screens you will have an idea or sketched blueprint of how to organize your information or your information architecture i'm going to be demonstrating how to create a mapping interface for a mobile app i'm going to start by choosing a mobile screen you can choose any size for mobile and click on the frame icon in the left hand corner of the toolbar which will give us a drop down box click on the frame option and you'll see a list of screens appear on the right side of the screen scroll down to the first option iphone 11 pro max the screen should then appear on your artboard you can zoom in by pinching your fingers outwards and zoom out by pinching your fingers inwards on your trackpad you can also press command or control and use the scroll wheel on your mouse to zoom in and out of the screen you can move through your document by swiping left or right on your trackpad or pressing the space bar and using the left clicker on your mouse to move around it's also important to note that figma auto saves your work first we are going to turn on the layout grid feature on the right hand side of the screen for organizational purposes this will help ensure the ui is aligned and looking clean i'm going to change the grid view to columns as you can see here you can update the width of the columns the color the number and the spacing between them i'm also going to drag the ruler lines both horizontally and vertically so i'm aware where the center of the screen is for reference figma will signal when you've reached the center from the weight of the ruler line as you drag it across the screen and through the measurements for low fidelity we are going to map out the page by implementing basic shapes like a rectangle for the header you can choose any shape from the top left-hand toolbar by clicking the drop down option and selecting in this case a square you then are able to draw the square on the screen and manipulate the shape by dragging the edges the right hand design tab will give you options to update the color and add a border by clicking on the stroke option among other design elements when you want to incorporate text click on the t in the upper left hand toolbar then click anywhere on the artboard and start typing i'm going to type the word header then you click outside the text box and manipulate the text font and size roboto is one of the default app fonts to go with and header size will be 35. we're also going to include a back button now we're going to create a space that overlays the bulk of the screen to portray a mapping application we're going to leave some space to incorporate functionality at the bottom of the screen for users to interact with the map when creating a mapping application you have to create various screens for the different user states this screen will include a visual of the map with the functionalities before any user interaction is activated so we're going to go to arcgis.com sign in and click on the map tab you'll be taken to the new map viewer in the left-hand toolbar you're going to click on base map to choose the type of map you want to display in your app for this app we're going to keep it simple and choose between the grayscale map and the navigation map i've chosen the light gray canvas map so it fits with the low fidelity screen i'm going to pinch my fingers outwards from the center of my trackpad to get a zoomed in view of the map users will likely be interacting with a localized area dependent on their location we're going to screenshot the image for a static visualization of the map feature all right now we're back to our figma document you can click on the shape you've drawn and in the right hand toolbar click on the color under fill click on the word solid and scroll down to image you can then choose an image to display within the shape from your files we're going to choose a screenshot we took of the map now we're going to replicate the default user location symbol we're also going to include some icons that i've downloaded and dragged the downloads into the document it will appear within a frame and you can select the icon drag it out of the frame delete the frame and manipulate the size based on your screen and format we're going to include standard map widgets as well by drawing boxes and inserting the respective icons for each function such as zoom in zoom out home location and the search bar once you start lining up the icons you are able to space them evenly by viewing the measurement that appears between them you can also drag the ruler lines to make sure the top and bottom of the icons align as well we are going to add a highlighted call to action at the bottom of the screen inserting text that says save you can change the shape of the button by adjusting the corner radius on the right hand toolbar we're going to curve the edges to 20 to make the shape look like a standard button [Music] here we want to show a map where the user is able to draw a boundary on the map itself we're going to copy and paste the same screen but show what happens when the user clicks on the draw icon the icon will then appear on the map the draw button will be in an activated state and the save button will also be activated showing how to prompt the user once they start interacting with map one additional thing to note is the layers that automatically appear in the left hand bar as you populate your screen clicking on any layer will lead you to the asset location within the document for easy access that's a wrap for this pigment tutorial on creating low fidelity wireframes if you like this video please feel free to comment subscribe and tune in to geo marvel's channel for more thanks for tuning in [Music] you

Channel: GeoMarvel

Views: 26,182

Keywords: UIUX, UXUI, UI, UX, User Experience, User, Mapping, Interface, Figma, Design Tool, Collaboration, Open Source, Mobile, Mobile Mapping Interface, Low Fidelity, Lo-fi, Wireframes, Design Systems, App Design, Mobile App Design, Mobile Application, UX Design, UI Design, UIUX Design, UXUI Design, UX Developer, UI Developer, Wireframe, Wireframing, Mapping Interface, Development

Id: pFof0FRtK6A

Length: 7min 5sec (425 seconds)

Published: Tue Oct 19 2021