previously we shared how insights from your research can inform your goal statement and storyboards which ultimately builds toward the wire frames you'll design in this video we'll focus on organizing the information your wireframe using what we call information architecture information architecture or ia organizes content to help users understand where they are in a product and where the information they want is when users find a product easy to use it means they can find what they're looking for quickly and intuitively this isn't by chance it's by design to make sure your product is easy to use your information architecture should be informed by many sources like user research and the ways that existing products in the market are structured knowing the users their goals and their behaviors is key to effective ia ia helps organize a site or an app it's like a map here's an example of how ia might come to life notice how it's a bunch of lines and rectangles the rectangle at the top might represent the home page because it's the page you want users to start on when they enter your website below the home page is a row of rectangles that are each attached to the home page by a line this row of rectangles represents the different sections of your website for example if you're creating a sitemap for a shopping website this row of rectangles could include products cart user account and the shop's about page finally each section has a column of rectangles attached to it by lines this column of rectangles represents the subpages of that section for example the cart section of our shopping website might include subpages like order summary shipping and payment creating information architecture is an important part of ux design for many reasons first and foremost ia organizes and defines the overall structure for the app or the site second it provides a high level view of a product as a ux designer you need to understand how the elements of a product fit together and relate to each other in order to create the design of that product third ia helps stakeholders review your designs stakeholders can evaluate whether the content in the site or app is the correct type of content and if it's placed in the appropriate places to help achieve business or product goals strong ia also helps engineers understand how to organize the data so the eventual development of the product matches the visual designs you've created so not only will your users benefit from good ia it'll make your colleagues jobs easier too finally an information architecture that's flexible allows your ideas to grow and iterate with the design the ability to adapt your approach at different stages of a project is one of a ux designer's most necessary skills for example you should group your information architecture in a way that allows you to add additional categories in the future once you've established your information architecture you can use it to inform your wireframes a stronger ia generally means clearer wireframes and a better thought out product overall put it this way if you create a clear information architecture for the dog walking app you'll have a better understanding of how the different screens in the app will fit together and how the user will move or navigate between those screens this will help a lot when you start drawing wireframes now you know the basics of information architecture and how ia can inform your wireframes next we'll explore how information architecture is visually represented through sitemaps meet me there [Music] earlier you learned how to draw one frame of a wireframe on paper when you created your first wireframe of the google photos app in this video we're going to take your wireframing skills to the next level wireframing helps you get your ideas down so it's time to draw wireframes for a new product let's go remember a wireframe is a basic outline of a digital experience like an app or website that's made up of lines and simple shapes the goals of creating wireframes are to establish the basic structure of a page and to highlight the intended function of each element we want to focus on the structure and function before visual elements like color or fonts are added to the mix you may be wondering why do we build wireframes on paper remember we already covered the benefits to creating wireframes in general so i'll quickly share a few benefits to paper wireframes in particular first paper wireframes are the fastest way to get your idea out a simple drawing by hand is much faster than building a wireframe in a digital tool think about how quickly you could draw a few lines squares and circles on a napkin now that's speedy second drawing on paper is inexpensive after all you only need a pen and paper no fancy tools or software are required in addition because creating paper wireframes is fast and inexpensive you can explore lots of ideas keep in mind that wireframes are not meant to be perfect instead wireframes help you get all your ideas out on paper without worrying about every single detail later we'll review those ideas and narrow our focus on the best parts of the wireframes we drew okay there's one thing i should clarify the example wireframes we presented earlier in gmail and google photos were for products that already exist this is a great way to practice wireframing because you have a real product to reference and try to replicate but typically we draw wireframes for a new product or new feature to help us explore a lot of ideas we may be creating multiple wireframes for the same screen of an app or website think about this example imagine we need to draw wireframes for the home page of our dog walking app the dog walking app doesn't exist in real life yet so we're coming up with lots of ideas for the structure of the home page and the intended function of each element on the home page in other words you're drawing wireframes for lots of ways that one screen the home page could work paper wireframes sound pretty great right so grab your thinking cap and let's get to it step one before we begin drawing it's helpful to write a quick list of the information that needs to go on the page you're drawing wireframes for it's important to list this information up front so you remember to draw all of the elements in each of your wireframes we're drawing wireframes for the home page of our dog walking app so the information that needs to be included on this page might include a navigation icon a search bar images and text descriptions step 2 start drawing it's a good rule of thumb to try to create at least five different versions of how you want to structure information on a page remember at this stage our goal is to explore lots of ideas with our wireframes for our example i'll draw five wireframes of the home page for a dog walking app as i draw i'll check the list from step one to make sure i don't forget any elements there's no right answer so be creative and try new ideas you might come up with what feels like a ridiculous layout but that's how we come up with innovative ideas wow that was fun let me share my thought process for each of the five wireframes i just drew first for option a i drew a layout for the home page where each dog walker has their own profile card i wanted each profile to look like a card because it reminded me of when dog walkers put up flyers at the grocery store there's also a search bar at the top of the home page for option b i wanted more than just the dog walker's profiles on the home page i thought it might be helpful for users to have some tips or articles about how to train your dog at the top of the page i also tried making the dog walker profiles horizontal rectangles instead of vertical rectangles like cards for option c i added an area to show the user's recent activity within the app i thought this might be helpful for users who want to schedule the same dog walker multiple times i like the horizontal dog walker profiles so i drew them again but this time i used dividers instead of rectangular shapes i also added a header to describe the profiles as dog walkers near you next for option d i drew something totally different that's part of the ideation process i drew three large sections to highlight the most important features in the app schedule a dock walker recent activities and latest training tips i thought this would help users easily navigate the app finally for option e i wanted the home page to be more visually engaging so i added a few placeholder images which are the squares with an x in them i also added an avatar in the top right corner to help users easily navigate to their profile page alright so now it's time for step three we're done coming up with ideas and it's time to refine the wireframe review the versions of the wireframe you came up with and add a star next to the pieces you like most in our example i drew a bar at the top holding the navigation menu in most of my explorations that tells me i probably want to keep that content up there so i'll add a star to that part of the wireframe in addition i really like showing the dog walkers near you in a list because it makes it easy for the users to quickly see as many new dog walker candidates as possible and find someone they'd like to hire so i'm going to put a star next to that and finally step four with attention on the best of your ideas you can narrow down the parts of your wireframe that you want to explore further in a digital wireframe it's helpful to pick two or three ideas to build out further using a digital design tool we'll cover wireframing digitally in the next video one more thing it's helpful to refer to your site map to determine which pages you've already wireframed and which ones you still need to wireframe you can also use your sitemap to chunk the project into smaller pieces for example if you were building wireframes from the shopping website sitemap you might wireframe the home page then each of the section pages and finally each column of subpages because wireframing is such an important part of the design process you want to save your paper wireframes to include pictures of them in your portfolio each time you create paper wireframes remember to take photos so when you're ready to work on your portfolio piece you have a bunch to choose from to include coming up you'll learn how to use your favorite elements of your paper wireframes to build digital wireframes we've learned a lot about wireframing and why paper wireframes are a great starting point for your actual ux designs by now you should have created a pretty solid paper wireframe yourself be sure to hang on to your paper wireframes for your portfolio so you can showcase your full design process in this video you'll learn how to know if you're ready to convert your paper wireframes to a digital version and the most important elements to focus on as you get started let's do it after you've explored multiple ideas for wireframes on paper and you understand which wireframe elements will provide the best user experience it's time to bring your paper wireframe to life digitally while drawing wireframes on paper is fast and inexpensive things get a little trickier when we move to digital wireframes so make sure you feel good about your paper wireframes before you move on to the next step there are a few questions you can ask yourself to decide if you're ready to move on to a digital wireframe one is my paper wireframe complete as we know a wireframe isn't anywhere close to a finished product so complete means you have an idea of the structure that you want to use in your wireframe two have i received feedback on my paper wireframe hopefully by this point you've received feedback from peers or your manager on your wireframes and three am i ready to consider basic visual cues remember color and images don't come into play until much later but at this point in the design process you might vary the kind of text you include in your wireframes we'll discuss this more soon if you can answer yes to these three questions you're probably ready to transition from a paper wireframe to a digital wireframe if not that's okay keep working on your paper wireframes until they meet this criteria as you move forward with your wireframes and make the transition from paper to digital there are a few things you should keep in mind first use actual content for important pieces of text instead of all placeholder text for example for different sections of the screen i might want to call out what that section is called in the dog walking app right above the list of dog walkers i'll write out available dog walkers near you to make that clear another example is in a bottom bar you might list the actual text label below the icons to make it clear what each icon will do but for large chunks of body copy use a placeholder text like lorem ipsum if you're not familiar with it lorem ipsum is meaningless placeholder text written in latin that you can use to show where content will go and how a page will be laid out the use of latin text to simulate words without actual meaning started in the printing industry where it was used to lay out a printed page before the real text had been written the 69 word lorem ipsum text block originally appeared in an ethics book written in 45 bc by the roman scholar cicero and it was first used for fake text in the 1960s while manual printing is pretty much extinct designers still rely on lorem ipsum to simulate text in a layout using lorem ipsum allows designers to present the structure of the wireframe without the distraction of actual words you'll see lorem ipsum used a lot and will use it frequently yourself throughout your ux design career the second thing to keep in mind when transitioning from paper to digital wireframes is that you should hold back on adding expressive content like color or images into your wireframe for now your wireframe should still focus on functionality wait until you start working on prototypes before adding expressive visual details so why do ux designers create wireframes digitally digital wireframes allow you to pay more attention to the details the goal of paper wireframes was to get all of your ideas out on paper and it was okay to be messy but now with digital wireframes it's important to get the structure array and that means making your design cleaner digital wireframes are also easier to share than paper wireframes because many digital tools like the ones we'll use allow you to collaborate sharing a link to your digital design is a lot easier than making photocopies and mailing them to each of your stakeholders all right using what you just learned you should be able to get your paper wireframes in a good enough state that you're ready to start translating them into a digital format and coming up we'll do that as we transition from a paper wireframe to a digital wireframe in figma keep up the great work you've learned so much about the ux design process so far you've created some basic wireframes and explored different elements that go into planning your design now is a great time to switch over and learn the ins and outs of a ux design tool this way you get a feel of what it's like to build a project in the next video you'll learn to use an innovative ui and ux design tool called figma there are many applications and tools out there to help you achieve your wireframing and design goals so what makes figma special figma simplifies the design process by allowing teams to collaborate even if they're not in the same location and that's appreciated by designers who work remotely or teams where individuals are located in different parts of the world imagine you're collaborating with the designer on the other side of the globe you're on a tight deadline to have the project completed working together on a cloud-based app speeds up the process making it ideal for collaboration and time management i personally use figma a lot for remote work because figma enables a very collaborative environment my team runs a good amount of workshops with other teams around the company and oftentimes many of the participants are based in different locations figma's collaborative features have made it possible for us to continue doing workshops even though we may not physically be in the same room figma is widely used by the design community so there are many plugins made available by the design community to help speed up the design process figma is considered an all-in-one tool because designers can create wireframes and prototypes which we'll explore later even though we'll be working in figma for this part of the certificate it's important to remember that many of the skills we'll explore are transferable to other ux design tools too remember ux design changes often and so do ux design tools once you know the basics in one tool like figma you'll be able to master a new tool in no time coming up you'll learn how to create a figma account build digital wireframes in figma and understand how to present your new digital wireframes figma is a vector design tool that runs in the browser use figma to brainstorm ideas iterate on designs create prototypes and get feedback at any stage of the creative process in this beginner's course we're going to take you through the key stages of designing an app in figma from the initial wireframes to an interactive prototype we'll cover the basics and introduce more powerful features like auto layout components and prototyping there's something for everyone whether you're new to design or new to figma we won't cover all these features in depth but we'll provide you with resources to continue your figma education sign up for a free figma account at figma.com with the figma account you can create teams shared workspaces where you can collaborate on files and organize them in projects choose from a free starter team or a paid professional team if you are a student or educator you can get access to all of figma's professional features for free visit figma.com education apply to verify your education account [Music] once you've created your team you can invite members to collaborate this will give them access to all the projects and files in your team you can choose what level of access each team member has learn more about creating teams and inviting members by searching teams in the figma help center [Music] we're pretty sure we've got the next million dollar idea a social media app for pets we want some feedback on the general layout before we start exploring specific elements of our design wireframes are simplified designs that are devoid of any style like color type or imagery they allow us to map out user flows and explore different ways we structure our app without having to design any elements or add any content [Music] we start our journey in the figma editor the canvas is the backdrop for all of your designs it's where you'll add all the frames shape text and images there are no bounds to your creativity but you should know that the canvas extends approximately 65 000 points in each direction with the great expanse that is the canvas we need something to put our designs in [Music] enter frames frames are the containers we place our shape text and image layers in you can think of each frame in the canvas as a single screen of your design the toolbar contains the tools we need for creating layers select the frame tool in the toolbar frame presets in the sidebar on the right let us create frames with specific dimensions we know that we're making a mobile app so we'll select google pixel 2 xl from the presets two exciting things just happened figma added a frame to our canvas and the sidebar on the left is no longer empty everything that we add to the canvas will also be added to the layers panel let's right-click on this frame and name it to home to explore more of the canvas we can use two fingers on a trackpad or the scroll on the mouse wheel to pan around we can also press and hold the space bar and click and drag to pan let's zoom out so we can see the entire frame if you're using the trackpad you can also use the pinch gestures to zoom in and out you can also use shortcuts like command plus and command minus to zoom in or out for granular control adjust the zoom level in your view settings up here now we're ready to add some layers to our frame as this is a wireframe we're going to keep it basic and use shapes like rectangles and ellipses to represent more complex aspects of our designs we'll select the rectangle tool to create an image for a post on our app's homepage just like frames every layer in the canvas has dimensions we can adjust the layer's position and dimensions at the top of the right side bar we want a rectangle to take up most of the horizontal space in our frame so let's make the width of our rectangle 380 and a height of 300 [Music] if we look in the layers panel again we can see that our rectangle is within our home frame some layers like frames can contain other layers if we move our rectangle outside of the frame the layers panel updates too we're going to place our rectangle back inside of our frame figma will help us snap the position of the rectangle to align it to the center of the frame cool now we're going to create a shape that represents a user's profile picture or avatar select the ellipse tool in the menu and click to start drawing the ellipse if you hold down shift as we drag we can create a perfect circle we'll release to create the avatar with dimensions of around 30 by 30. holding shift can strain the proportions of our ellipse if we update one value in the right side bar the other will update too we can click into the width field and use the arrow keys to nudge the ellipses dimensions to 30. some fields in figma accept equations we can use equations to resize layers by adding subtracting multiplying or dividing the existing value let's add plus 10 to the field to set the dimensions of our circle to 40. basic shapes support both fill and stroke properties we can see these in the right side bar when we select both of our layers by default our layers have a fill of gray but you can choose another color enter a hex code in the field or click the swatch to open the color picker we can select colors from the palette or apply other fills like gradients images and even animated gifs we can also remove the fill entirely by clicking the minus button we want our wireframes to appear like outlines instead of solid shapes we can do this by adding a stroke strokes are outlines or borders around layers we've learned to align layers to their frames but we can also align objects to each other let's use the alignment tools to align the layers to the left as our avatar layer is smaller figma will align it to the larger image layer now we need a username to go with our avatar select the text tool click a spot on the canvas next to our avatar and type in name we'll cover adjusting text properties later in the series we want our text layer to align to the center of our avatar drag over multiple layers to select them all at once and click align vertical center if we want to make small adjustments to a layer's position we can use our arrow keys to nudge objects on the canvas looks good to me users will want to engage with each other by commenting liking and saving posts let's press r to select the rectangle tool and create some icons for these actions we'll use shift again to constrain the proportions and create a perfect square let's aim for dimensions of 32 by 32 instead of drawing three separate squares we can copy the original layer there are a few ways to copy layers hold down alt or option and click and drag on our layers to duplicate it or press command d figma will maintain the same distance between objects if we want to change the uniform spacing between them we can select our layers and update the horizontal spacing in the right side bar we'll need some text below our image let's add that [Music] all these layers make up a single post we want to be sure these objects stay together there are two ways we can group layers we can use the keyboard shortcut command g to create a group out of these layers groups allow us to move a collection of layers around without having to select each individual layer we can use groups or frames to organize our layers panel while frames and groups look similarly in the layers panel they are fundamentally different groups are the sum of their parts and have no properties of their own we can use groups to organize our layers or apply properties to layers in bulk frames on the other hand can have their own dimensions and properties some of which can affect the layers within them we'll learn more about frames and their properties later in this series from the right side bar we can convert our group into a frame then we'll copy this frame using the keyboard shortcut to create a second post for our feed we'll move the other post below the other post in the frame the feed is starting to take shape but we're missing some crucial elements to make it look like an app we need a status bar and a navigation menu to move between pages in our app we could make these elements using shapes or we could rely on components and libraries to speed up the process components are the building blocks of our designs they can be basic ui elements like buttons or icons or more elaborate compositions like toolbars and menus libraries are collections of components and styles you can use libraries in figma to create share and use components across your files you might have heard of a design system design systems combine component libraries with standards and guidelines for implementing them in code they're a single source of truth for designers and developers and help to create consistency at scale let's look for a component library in the figma community the figma community is a space where creators can share resources in the form of design files and plugins we're going to use this wireframe ui kit so we'll duplicate the file and add it to our drafts we could copy components from this file and paste them into our wireframes we're going to publish these components to a library instead to make them available to our team we'll open the file in the editor and click the arrow next to the file name and select move to project as components can only be published in a team we'll move this to a project in our team now we can go to the same menu and select publish components and styles we can enter a description of our library and press publish to share it to our team back in our original file we can now access that library in the assets panel of the left side bar click the book icon to open the library's modal toggle the switch to enable the wireframe in our file let's resize the left sidebar hover over the edge until the cursor appears then click and drag to resize ok we need components to represent the status bar at the top of the screen and a floating action button or fab at the bottom this generic status bar is perfect to add this component to our file we can click on the component in the assets panel and drag it onto the canvas we'll position the status bar near the top of the frame and release to place we'll align to the top and left let's repeat this process for the fab and place it in the bottom and the right of the frame now we have copies of these components known as instances instances are connected to the main component they originated from if you make a change to the main component pigma will also apply those changes to any instances this saves you from having to manually update every instance when you want to change properties of your component [Music] our eventual application will need to adapt to different screen sizes if we want to resize our frame now our components don't change [Music] we can make sure they respond to different frame sizes using constraints at the moment our constraints are set to the top and left by default we want the status bar to take up the full width of the frame so we'll keep the vertical constraints at top and set our horizontal constraints to left and right we'll set the constraints for the fab at the bottom and right now when we resize our frame the components will respond according to their constraints [Music] our app is starting to come together let's create a frame for our menu select the frame in the toolbar or press the f key we'll add another google pixel 2 xl preset to the canvas let's add some text layers for each page in our app press t to select the text tool and click to create a new text layer we'll type in menu item for now we want all our text layers to be the same width so we'll set the width to 200 we'll also increase the font size to 20. let's duplicate this layer to create four more menu items one for each page in our app hold down alt option then click and drag to duplicate then use the duplicate shortcut let's copy the status bar and fab from our home page to complete our menu page we'll click to select the status bar hold down shift then click to select the fab we'll then use the shortcut command c to copy them to our clipboard select our menu frame and press command v to paste figma pastes them in the same position as this frame nice [Music] i think there are some other ways we could lay out this menu page so let's explore some different approaches [Music] okay we have a few designs here but i'm not quite sure which approach to take we could set up a design critique and schedule some time on the calendar but i wonder if anyone on the team is around to help me choose we'll click the share button in the toolbar as we've already invited everyone on our team we don't have to invite them to every file we'll click copy link and drop the link in our team channel our team has some existing sticky note components which we love to use for feedback i'll enable that library in this file while i'm waiting for our team to arrive our team members avatars are showing up in the toolbar to jump to their location on the canvas we can click on their avatar to enter observation mode [Music] it sounds like our team loved the simplicity of our first design but thought that a back button would be better than our fab someone suggested the menu could be underneath the rest of our content i like that idea another person pointed out that the center text makes it hard for users to scan quickly that's a great point it looks like fellow design intern daniel is creating a new version of the menu which incorporates some elements of each of our designs this looks awesome and everyone's on the same page i'm glad we got some feedback on our wireframes before we invested in some higher fidelity designs now we know which direction to go in we'll see you in our next video where we explore color typography and imagery now that you understand the basics of wireframing and have been introduced to figma we're going to put these two things together so far you've drawn wireframes on paper but now let's go digital in this video you'll learn how to transition the wireframes you've drawn on paper into digital wireframes using figma so let's open figma i'll start by adding pictures of my paper wireframes to the figma dashboard i took photos of my sketches already so i'll upload them now from the menu click file then place image let me find where i saved my paper wireframe photos on my computer found them now that i've located them i can upload them to figma another way to upload the photos is to drag them from a folder and drop them into figma let me demonstrate it for you now there now i have something to reference as i build a digital wireframe next i'll build the frame on the toolbar i'll click this icon that looks like a hashtag it's called a frame icon in figma then i'll select the platform i want to use you can create a wireframe for any type of platform since i'm demonstrating how to build a mobile app i'll choose a phone as the frame i'll pick android seeing the long rectangle makes it much easier to visualize the phone screen to make it easier for me to reference i've moved the home screen sketch next to the android frame now i'm ready to create the bar at the top of the screen to do that i'll need to create another rectangle i'll open the shapes menu in the toolbar where there are a variety of shapes to choose from i'll select this rectangle then i'll draw the rectangle in the frame across the top to create the bar next i need to create the navigation icon which is usually three horizontal lines to do this i'll draw a line i need the shapes menu again for this one the navigation icon will be in the top left corner of the app so let's draw the first line oops that doesn't look very straight does it i'm going to delete that by selecting it and using the delete key on my keyboard here's a pro tip to create a perfectly straight line instead of drawing it freehand like i just did you need to hold down the shift key on your keyboard as you draw there that's better instead of drawing two more lines i'll copy this one i'll select the line by clicking on it then use a keyboard shortcut to copy it on a mac hold down the command button then press c on a pc hold down the control button then press c now that i've copied the line it's time to paste it i'll use a shortcut again this time for paste you can press command v or ctrl v it seems like the second line pasted right on top of the original line so you might not be able to see it but i can use my keyboard arrows or my mouse to move the new line i'll put the new line directly below the original line now i'll make another copy and position this third line directly under the previous one do you notice how when i move the line i drew red lines appear in the frame those are guiding lines to help line up the shapes that way when you have a group of lines or shapes none of them are too far to the left or to the right great now let's go back to our hand-drawn wireframe the next feature on the bar is the company logo remember for wireframes we want to keep this simple so i'm going to create another rectangle to act as the placeholder for the logo now let's fill the rectangle in with a new color to show that it's a placeholder for something else and to provide contrast with the bar first i'll select the shape then in the design menu i'll choose the color since this is a wireframe i'll just use a darker gray great so we have the bar at the top of the app and a spot for the logo the last element that will be in this bar is the profile icon to make the profile icon i'll use the shapes menu again and select a circle remember how i held down the shift key to draw a straight line i'll also hold down the shift key to draw a perfect circle let's make this dark gray too to make the circle seem like a person i'll add a smaller circle for the head of the person i'll make this circle light gray for contrast to make the body a stick figure will do i can use a few lines for this one first a straight line for the body then for the arms let's use diagonal lines the shift key trick won't work for diagonal lines but that's okay i'll just draw these two lines as straight as i can you'll notice that i made those lines gray as well so now i have the bar at the top of the app great the next thing i need to create is the image carousel at the top of the page an image carousel allows me to show rotating features in the app to represent the carousel i'll make a large rectangle just like in my paper wireframe i'll draw an x through the rectangle to show that this will be an image once we get to the hifi stage i'll choose a light gray for the x so it somewhat fades into the background next to show that this is a carousel and the content will change i need to create something that shows there are multiple pages we call this a pagination indicator on our paper wireframe i used an ellipsis so i'll do the same here first i'll draw a very small circle and as a reminder i'm holding down my shift key as i draw there now i'll fill the circle in a black color for contrast next i'll make two copies of the small circle i'll put the three circles in a line and place them in the middle of the rectangle at the bottom now i'll line them up using the built-in guides together these three dots show that the image and content will rotate on the carousel perfect next let's write some copy as a reminder the only copy you should include in a wireframe are words that help people understand the function of a button or section to do that i need to create a text box i'll click the text icon then i'll draw a box where i want the text to appear the blinking cursor indicates where i can type i'm going to write latest tips to train your dog this kind of title is important to explain what the rectangle represents although wireframes don't have a lot of text it's a good idea to use some copy here and there because real text helps ground you in the design if i just use placeholder text like lorem ipsum here the purpose of this carousel wouldn't be clear now we need to adjust the size of the text using the design menu i'll make this 24 point font finally let's enter the text in the carousel so it's visually appealing let's use the guides to center the text great now that's done i'll add the schedule button next since schedule is the call to action or the button i most want users to click i'll make the button big and obvious i'll draw a big rectangle and write schedule in the middle i'll do this a bit faster now that you're getting the hang of the process now i have more than half the wireframe completed the last section i want to create is the list of dock walkers that will automatically populate at the bottom of the screen based on the user's location so first i'll add another text box i want another simple title here to explain the function of this section of the wireframe i'll use doc walkers near you and i'll adjust the font size to 24 again so it's consistent with the title above next i need to create the profiles for each dog walker the profiles need to be divided into sections so i'll create some dividers to create dividers i'm going to draw a straight line that fills most of the length of the screen you'll see this line is drawn in black which fits the style that we've been using now i'll make a copy of this line and move it a little ways underneath the first line to allow space for the dog walker's profiles great i'm going to select both of these lines and make two more copies now i'll paste them in equal distance from the original two lines this is a pro tip copying and pasting multiple items at a time makes the wireframing process faster earlier i used figma's guiding lines to line up each element but when i have a bunch of elements like this group of lines here i can use other techniques in the design panel i'll first click on align to the left this makes all of my lines start at the same point on the left next i want to have the same amount of space between each line so i'm going to click on distribute vertical spacing in the design panel ta-da beautiful evenly spaced lines it may seem like a small detail but it can really give your wireframes a cleaner look okay next let's show some profiles i'm going to use a circle to represent a profile photo just like we did for the user account then i'll add lines to show that there's some text here holding down my shift key again i'll draw one line i'll make it a bit wider by going into the design panel and changing the stroke i'll make the stroke five which is a thicker line the stroke was previously one which is a thinner line wide lines typically indicate text in wireframes narrower lines are meant to show divisions another small detail that conveys a lot of information next i'll copy this wide line and paste it underneath the first one i'm going to make this one longer than the first one just a minor thing like different line lengths can convey a lot of information the top line is shorter since this will be the dog walker's name then the line underneath is longer because it'll have additional information about these dog walkers these kinds of details will feel more automatic to you the more wireframes you build now we want to fill in the boxes we created with the dividing lines with more profiles of dog walkers first i'll make a copy of this group of design elements i'll do that by selecting the avatar with the lines then using command c then command v or control c then control v on the keyboard this will make a copy of the group of elements right on top of the existing group then i'll drag the set of elements i just copied and pasted down lower in the frame i can use the arrow keys so that the new elements move i'm going to follow the guiding lines to make sure they line up correctly all right the wireframe for the dog walking apps homepage is done i think it's looking great coming up you're going to be transferring your own paper sketches into digital wireframes you should be really well prepared at this point as you practice using figma or any other digital tool you'll get a lot faster and digital wireframing will be almost as quick as sketching on paper of course anytime you get stuck come back to this video or look up the tutorials figma has on their website there are plenty of resources to help you as you get more comfortable with the tool good luck have you ever looked at an app and found that your eyes are drawn to a certain spot of the screen that's because design principles are actually happening behind the scenes we know our eyes are being drawn to something but we may not be able to easily articulate how that's being done exactly you know how to create basic wireframes of an app so it's time to learn a few principles to make your designs even more usable and intuitive in this video we'll explore the concept of the gestalt principles there are a few gestalt principles that you can commonly apply to your wireframes like similarity proximity and common region keep in mind there are more gestalt principles beyond these three to get things started let's define gestalt principles gestalt principles describe how humans group similar elements recognize patterns and simplify complex images when we perceive objects you can use the principles to organize content on apps and websites so it's visually pleasing and easier to understand basically humans naturally notice the whole of something before noticing the parts gestalt principles got their name from the word gestalt which is a german word that means shape or form have you ever looked at the clouds and tried to find shapes within them you might have spotted a cloud that loosely resembled an animal or a familiar object that's an example of gestalt principles at work we unconsciously connect different elements in a scene to quickly understand them in short our brains are designed to make meaning at a glance let's examine one of the gestalt principles similarity this principle means that elements that look similar are perceived to have the same function elements might look similar based on their shape size or color one example of this is links within a webpage they're almost always the same color blue this leads us to think that their function is similar too let's look at an example of how similarity comes into play in wireframes earlier we worked on a wireframe of google photos if you look closely you'll notice that the bottom half of the app contains six squares that are the same size because they all have the same shape and size you perceive these elements as being similar or peers in a group in this case each square represents a photo and the function of each square is the same if you tap on the square it will enlarge to fill the full screen here's the takeaway when designing a wireframe consider making elements that have a similar function look similar to give your app a more intuitive user experience now let's examine another gestalt principle proximity this principle states that elements that are close together appear to be more related than things that are spaced farther apart how does this play out in our google photos wireframe at the top of the wireframe there are three large rectangles placed close together in a row because the rectangles are close together our brains think they're related it turns out our brain is correct these three rectangles are photo albums while the six squares below which are placed more distantly from those rectangles are just individual photos here's the takeaway when designing your wireframe put elements that are related close together instead of far apart great now you're getting the hang of this let's examine one more principle common region this principle states that elements located within the same area are perceived to be grouped together let's think about this principle in our gmail wireframe the divider line creates a border around each email so the subject line email recipients and email content appear to be grouped together here's the takeaway you can use borders in your wireframes to group elements together great now you know some of the most commonly used gestalt principles similarity proximity and common region keep these principles in mind as you create your wireframes and your products will be easier to use congratulations on finishing this course from the google ux design certificate you can access the full experience including job search help and start to earn your certificate by clicking on the icon or the link in the description below watch the next video in the course by clicking here and subscribe to our channel for more from upcoming google career certificates