hope you're ready to take the next step in creating website designs in adobe xd building mockups in this video we'll review some of the key differences between wireframes and mock-ups and discuss the importance of mock-ups in the design process so let's start with wireframes wireframes are an outline or a sketch of a product or screen wireframes are a great tool for helping ux designers figure out the overall structure of a website or app remember you can create wireframes on paper if you want to move quickly and brainstorm lots of ideas or digitally when you have a better idea of the structure of your product after you've gone through a few iterations and feel satisfied with your wireframes it's time to bring the designs to life visually and add more details and the best way to do that is with a mock-up a mock-up is a static high-fidelity design that's used as a representation of a final product it includes more visual and ui elements so ux designers and their collaborators can get a better idea about the final state of the website or application mockups are not clickable or highly interactive which means they can be used to make multiple iterations without affecting the functionality let's explore the differences between wireframes and mockups in a bit more detail here's an example from an earlier course when my colleagues were working on the homepage of the dog walker app in figma on the left the wireframes are static images that give us an overview of the page layout and hierarchy you'll notice that the designs outline the content without providing a lot of detail or color on the right the mock-up of the home page includes color typography and iconography these elements make it easier to map out the user flow and can help ux designers visualize the user journey in a more dynamic way keep in mind this wireframe and mockup are for an app but we'll go through the same process in this course for our website design going from a wireframe to mock-up should not feel like a paint by number exercise for example it's okay to place an image in a different part of your mock-up design than you plan for in your wireframe the way you arrange elements on a screen can make your design aesthetically pleasing help users interact with your product and make your designs more accessible similar to wires you'll iterate on your mockups multiple times and solicit feedback in between rounds coming up i'll show you how to create a mockup in adobe xd it's time to start using what you've learned to create your own mock-up in adobe xd i'll go through steps to create a mock-up for my library website homepage based on the wireframes i created early in the course here we go first i'll open adobe xd and select the artboard that has the wireframe of the library website homepage on it it's always a good idea to have the wireframes in front of you as you create mockups because my wireframes are all neatly lined up i'm going to create a new artboard below the wireframe that i'll be using for reference which is the home page in this case so i'll pop over to the toolbar and we'll pick the artboard tool and add a web 1920 artboard directly below the home page wireframe this makes it a little easier to refer to the wireframe when i'm making the mock now i'll move the second artboard below the first one so it's easy to track the flow of my work i personally prefer to work from the top of the page down but you can design your pages in any order you like so let's start with the navigation bar i'll draw a rectangle for the background i'll set the background color of the navigation bar to black by clicking the fill option under appearance in the property inspector next i'll add the logo to the far left side of the navigation bar here's a quick pro tip adobe xd lets you add images really easily by creating a rectangle first and then dropping the image inside of it for my mockup i don't need to drop in an image though as my logo is just simple text i'm going to create a text box and type in wcl which stands for wisconsin county library next i'll change the font to belly display and make the size 48. finally i'll adjust the color to a mustard yellow using hex code e0d1 5c using hex codes instead of randomly picking a color allows me to make sure that i'm using the same color throughout my mockup okay so i have the logo in the navigation bar let me keep building this part the page out i need to add more text into the nav bar for the links to other pages similar to my wireframes i'll add text boxes for search discover donate and about to the left side of the navbar next to the logo then i'll add text boxes for account and basket to the right side of the bar now i need to change the look and feel of all this text in the navigation bar i'll click the text boxes while holding the shift key until all six text boxes are selected the good news is that the background color for these text boxes is already transparent so i don't need to change that but i do need to change a few other things using the property inspector here i'll change the font to avenir and i'll make the size 20. i also want this to be heavy to add a bit of emphasis finally i'll change the color of this text to white so it stands out against my black navigation bar next i need to make sure the text boxes are aligned and evenly spaced using the alignment tools in the property inspector first i'll select the text boxes by dragging a selection over them or using shift and click then i'll align them all to horizontal center by clicking this button i'll also put even spacing between all of these text boxes by clicking the horizontal distribute button i'm going to be using the same font color and size throughout my mockup so i want to save these preferences in the assets panel which is a collection of the elements and preferences you've created in your design the assets panel serves as your sticker sheet this makes it really easy to share your elements and components with fellow designers i recommend saving your preferences when you finish each stage of your design or when you create new elements this will make the design process faster and more consistent as you move forward to open the assets panel i'll go to the bottom of the toolbar on the left side of the screen and click on this libraries icon a panel opens that allows me to either search libraries of assets i've imported or look at the assets for the design that i'm working on which is called document assets right now it's blank because i'm just like my mock-up i'll start by saving some of the colors i use in the navigation bar first let me focus on the logo adobe xd makes it really easy i'll select the text box of the logo and press the plus sign next to the word colors in the assets panel and ta-da just like that the mustard yellow color from my logo has been added to my preferences cool right i want to follow this same process to add the other colors i've used my navigation bar too like the black and white there we go simple as that now i can use these same colors throughout the rest of my mockup next i want to save the character styles which will allow me to easily use the same font size and color for additional text this is great for creating consistent headings throughout your mockup for example i'll select the logo text i'll click the plus icon in the character styles header and that's it i'll do the same thing for the links to the other page of the library website i don't need to save each one of these as they're all the same style i only need to click one of them like search and click the plus sign again great now i have some preferences saved in my assets panel that i continue to use throughout my design you may notice that there's one other part of the document assets panel which is components as a reminder components are made up of elements common components are buttons which include elements like text colour and a shape in this case my component will be the navigation bar i just created to create a component i need to group items together i'll select the navigation bar background plus all the text and the logo and then hit command and g on a mac or ctrl and g on the pc you can also right click and pick group if that's easier for you that's it now these elements my navigation bar are grouped together and form a component i'll add this component to the assets panel by clicking the plus sign next to the word components this will allow me to quickly reuse this exact same navigation bar on future artboards in other words i can easily include the same navbar at the top of other pages of the website all i have to do is click on this component and drag it onto the new artboard like this one cool thing i want to show you if i edit a master component all instances of that component will change instantly across my mockup for example if i add a new link to the navigation bar the navbar on all pages will automatically be updated which saves a ton of time i'll right click on the assets panel and click on edit main component now the main version of the navigation bar component is selected let's say i make a change notice how this change is updated for all the navigation bars across artboards pretty sweet anyway i'll undo this change for now but i wanted to show you this cool tip the navigation bar is ready to go now i'll move on to the next layer of the home page below the navigation bar which includes a hero image of the featured author and accompanying text first i'll draw a rectangle then i'll open finder on a mac or windows explorer on the pc and find the image i want and now if i drag this onto the rectangle the image will fill the rectangle bam how many is that okay now i've included a hero image in my mock-up it's time to add some text to describe this image i'll draw another rectangle to the right of the image where the text will go i'll fill the rectangle with this dark purple color which is hex code 382862 i'll also add the dark purple color to the assets panel because i'm probably going to need to use it again i'll go to color on the assets panel and click on the plus icon now let me show you another awesome feature in adobe xd stacks stacks allow you to move or resize an element from a stack and the rest of the elements will automatically move to preserve the defined space in between elements so let's check this out in action i'll create three text boxes and stack them on top of one another i'll type featured author into the top text box a short headline to middle and some body text using lorem ipsum in the bottom text box i'll select the three text boxes and group them together by pressing ctrl or command plus g then i'll name the group featured author in the layers panel now i'll go to the layout section in the middle of the property inspector i need to check to make sure that responsive resize is on i'll click the check box next to stack and make sure the vertical stack button is selected that's the icon with the arrow that points downwards to the right of these icons is a number or a line which represents the spacing between all the text boxes in the stack if you see a number that's because you have consistent space in between all the items if you see a line it's because there are different spacing between the different text boxes i want this to be consistent so i'm going to set it to 24. if i want the spacing to be larger i could type 34 for example and the spacing automatically changes this will help me save time as i design but for now i'll leave the spacing as 24. all right i've just finished designing everything above the fold on the library website homepage let's take a brief pause so you can open xd and start playing around with your own mock-ups when you're ready meet me in the next video where i'll continue to design the rest of my mockup of the library website homepage more pro tips to come i'm going to keep building the mock-up of the library website homepage that i started in the last video now that the navigation bar and hero image section are set up i can work on the sections of the homepage that are below the fold so let's get to it since i'm working down the page from top to bottom i'll focus on the layer below the hero image which is the popular wcl layer this layer contains two books each with some supporting text to describe the book i'll start by creating the elements for one book and it's accompanying text first i'll create a rectangle and fill it with the same mustard yellow i saved earlier in the assets panel to keep this rectangle in place while i add other elements on top of it i can right click on the rectangle and select lock now even if i click on the rectangle and try to drag it it won't move first i'll create a rectangle to represent the book cover up next i'll add three text boxes for the book title author and book details i'll add some placeholder text that says book title and author for the first two text boxes for the third text box the description i need quite a bit of text so i'll use lorem ipsum let me quickly copy and paste some lorem ipsum text from this website that i found through a quick google search now i'll format the text size and apply color i'll select all three boxes and change the fill color to black using the black color i saved earlier in my assets panel next i'll adjust the font size for each text using the property inspector i'll choose font size 48 for the book title 20 for the author and 16 for the description remember what you learned about typographic hierarchy earlier in the certificate program with my colleague canal typographic hierarchy orders typefaces and fonts in a layout to create divisions that show users where to focus and how to find information most product interfaces have different sizes for text a larger size text that's used for titles in this case the book's title and a smaller sized text that's used for longer text passages like the book's description i've made the font size for the author's name in between these two awesome the first book is ready to go i want to repeat this exact set of elements on the right side of the popular wcl layer luckily adobe xd is a really helpful feature called repeat grid that allows me to do this easily let me show you to use the repeat grid feature i first need to select all the elements i want to repeat the easiest way to do this is to go into the layers panel to open the layers panel i go to the toolbar on the left and click on the layers icon toward the bottom inside the layers panel there's a list of all elements that i've created so far as well as the groups of elements that i've made like the navigation bar let me locate the rectangle and the three text boxes i just created for the book okay here they are because text fields like the book title or the author name can get quite long i want to make sure that those flow on the page properly so to do that i'm going to use stacks like we used in a previous lesson so the first thing i'm going to do is group the three text boxes together and turn them into a stack i can do that by selecting three text boxes and clicking the stack button in the properties panel now i'm going to select the top element press the shift key and select the last element notice how everything in between is selected as well now that i have selected all the elements i want to repeat i can go over to the property inspector on the right here and click on repeat grid if i grab the green transform handle on the box and drag it to the right the group of elements is duplicated and you can use the feature vertically too adobe xd features like repeat grid savers designers a lot of time when making mockups i'll use this feature in the next level of the homepage too when i build out the feature collections you may have noticed that the duplicated elements look identical to the original ones one thing i really like about repeat grade is you can edit individual items inside of the peak grid and it won't change your other elements let's take a peek i'll pick one of the duplicated elements in the repeat grid by double clicking on it let me edit this book name there we go while i'm at it i've also already changed the font style to belly display now i'll drag in some images like i did for the hero image here's an important tip repeat grids allow you to input multiple images at once knowing this i set up the images in my file so that they were labeled 1 and 2. this labeling lets adobe xd know the order that the images should go in i'll select both of these images and drag and drop them onto one of the two image placeholder rectangles in my repeat grid and just like that they're both populated this is such a great time saver and another benefit of designing in adobe xd alright that layer is coming together i'm happy with that now it's time to work on the next section featured collections i'm definitely going to want to use the repeat grid feature here knowing this i'll create some placeholder items for the first section that i can repeat i'll use the text tool to draw a long text box for the collection title i'll name it collection title for now and i'll make its font belly display size 48 below the collection title i'll add a vertical rectangle to represent a book finally i want to add the book name and author name below the book so i'll create two text boxes stacked one above the other i'll call the top one book name and the bottom one author name i'll make these text boxes avenir font size 14 with the book name in bold okay now that i have all the elements i need it's time for the fun stuff repeat grid i'll do this by opening the layers panel and selecting all the elements i want in the repeat grid then i'll move my mouse over to the property inspect on the right and click on repeat grid great my repeat grid is ready now i'll grab the green transform handle on the box just like i did last time and drag it to the right until i have two more instances of this group of elements awesome now i want each book to be spaced a little bit closer to each other to do this i'm going to move my mouse to the white space between the first two books notice how the area turns pink as soon as my mouse is on top of it this lets me know that i can edit the spacing if i click on the side of the pink rectangle and drag it to the left the amount of space between the first and second book decreases at the same time the repeat grid function automatically resizes the amount of space between the second and third books to match that's pretty neat right now i have my collections of books in this layer but they're still really basic i need to add some images and add in the book and author names as i did earlier i'm going to go to my image folder on my desktop and quickly grab three images i want to display here i'll drag them into one of the empty rectangles bam they're all in i just love how easy this feature is not only is it easy to add images to repeat grids it's also easy to add text from a file prepare to have your mind blown i've pre-populated a text file with all the book names i need to add to my mockup the first book name is at the top of the list and the last book name is at the bottom notice how each book is on its own line this is really important as each new line tells adobe xd it's a new name to get these names into adobe xd i'm going to drag the text file from the folder it's in and place it on top of one of the text boxes titled book name and just like that all my books are populated on the screen i'll now quickly repeat this process for the author names how cool is that all right another layer done my mock-up is really starting to take shape now there's just one more left the footer i want the footer to match the top navigation bar so i'm going to start by drawing one large rectangle and filling it with the color black the first element i want to add to my footer is the larger library logo to do this i'm going to copy the logo from my top navigation bar and paste it down here to the right of the logo i'll add another text box where i'll type wisconsin county library i'll put each word on its own line i'll also quickly adjust the font type to avenir book and the size to 20. so now i have the text of my logo with the actual three letters that i use for it a little bit small compared to the text next to it so i'm just going to make that logo text a little bit larger so it looks a bit better at the moment the two text boxes that make up my logo are separate whenever i want to use the larger logo i'll want these elements to be grouped together i'll do this by selecting the two text boxes and pressing ctrl or command plus g on my keyboard now my items are grouped together to the right of the logo i want to insert six library addresses in two rows i'll mock this up quickly using the repeat grid feature first i'll add two text boxes and name them county and address then i'll form a repeat grid now i need to use both green transformer handles to turn this one group into six groups finally i'll import a text file for the counties i'm choosing not to do this for the addresses as the automated feature does not work if the text i want to import is on multiple lines this is great i'm almost done the last thing i need to add in the footer are icons for social media sites i downloaded these in advance from each social media site and have them saved to my computer one final step let me make these icons mustered yellow to better match the rest of the page all right my mock-up for the wisconsin county library website homepage is done i still have additional artboards to create as i want to mock up the entire book reservation flow so i'm just getting started i hope you learned some great practical tips that you can apply to your own mocks as you work in adobe xd i can't wait to see what we came up with in the last video i built a mock-up for the desktop version of the homepage of the wisconsin county library website while you were working on mock-ups for your project i did too in addition to the home page i created additional artboards to mock up the entire book reservation flow check these out once i finished all the mock-ups of the desktop version of the website i also designed the home page mock for a smaller screen size a mobile phone i put it here below the desktop designs you'll notice that the mock i created for the home page follows a layout i decided on during the wireframe phase i start out with my top navigation bar including a hamburger menu and two icons for search and the checkout cart i also included the wcl logo in the middle of the navigation bar then i have the hero image and accompanying text followed by the popular wcl section the featured collection section and finally the footer as you get started on your own project and design versions of your website for mobile phones i want to show you one trick how to design a flyout menu a flyout menu provides an overview of a website's hierarchy and helps users find information to navigate the site a flyout menu gets its name because it flies out from the side of the screen when you hover your mouse over or click on an element in the library website i'm designing the flyout menu will appear when the user taps on the hamburger menu icon to create a flat menu in adobe xd i'll start by creating a new artboard that will hold my flyout menu because my flyout menu will either be the same size or smaller than my current screen i'll add another phone size artboard next to it next i'll draw a rectangle for the background of the flyout menu i'll fill this black from the assets panel and remove the stroke then i want to add in the close button for the fly out i'll draw this in the top left so that it appears over the top of the hamburger button i'm going to make the close button out of two rectangles that i group together and rotate to make the menu useful i'm going to add links into the different areas of our website in this case discover donate about an account i'll create these using a repeat grid and apply the heading style from the assets panel now all that's needed to complete the layout of my flyout menu is the library logo at the bottom i'll copy this from the footer for now and we're done later on we'll wire this up so that it appears when you preview your prototype you can use the same process to create a search bar pop-up as well this way when users click on the search bar icon in the navigation bar of the library website a search bar will pop up that covers the width of the screen great i have my ideas for the home page of the mobile website fleshed out now just like i did with a desktop version of my website i need to create additional artboards to mock up the entire book reservation flow i'll get to work on that while you get to work on your own designs you just learned how to create your own mockups in adobe xd how exciting now let's explore some ways to use the elements and components you create in your mock-ups to build a design system that you can use across your website designs as a refresher a design system is a series of reusable elements and guidelines that allow teams to design and develop a product following predetermined standards some of the visual elements frequently included in a design system are components color iconography layout copy animation elevation typography and illustration so how are design systems set up most design systems include visual styles guidelines for how to apply them ui components and supporting code for developers let's go through each of these in more detail first up visual styles defining the styles for core visual design elements like typography color palettes and iconography helps companies express their brand more consistently this also helps ux designers improve the user's experience for example here at google we often use the colors blue red yellow and green in our websites and apps so the hex codes for these colors are included in google's design system which helps ensure we're using the same shade of these four colors across all of our branding next are the guidelines this is where the design principles editorial guidelines and implementation guidelines are defined clear rules about how certain components or styles should be used within a product help designers stay consistent across all of their work after that there's ui components which are interface elements and features that are consistent across a brand or product as you've learned components can include buttons dialogues gestures and more and finally design systems support code for developers to help developers build out designs correctly design systems often include the code to create each of the provided elements or components compiling all of this information to comprehensive design system ensures that all the different elements in your designs will carry through to the final product all right so that's an overview of everything that goes into design system and you might be wondering why should i use a design system in my own project well let's quickly cover some of the benefits of working with design systems design systems create consistency for both designers and users and reinforce the brand's identity in addition design systems help us create scalable designs using a design system also saves time and money by increasing efficiency of course it's not all sunshine and rainbows one challenge that comes with using design systems is that there can be so many components and elements included sometimes ux designers can get lost in the details depending on the company you end up working for you could either be learning a complex design system like google's or helping to build one from the ground up either way you'll adapt or apply elements of a design system to all of your designs i think you'll be pretty impressed with how much using a design system can improve your work all right now that you know about design systems it's time to go back into adobe xd and use one in the next video i'll cover how to work with assets to an external design system and how to publish assets to create your own unique design system we're exploring all things design systems when it comes to your mockups in adobe xd in this video we'll discuss some of the ways you can get the most out of working with external design systems so let's get going in xd i'll import an external design system and figure out how to work with it i'll start with material design which is google's design system i'll go to file at the top of the menu bar scroll down to get ui kits and then click on material design it automatically takes me to the material design resources page i'll click design kits for adobe xd in the top right corner of the page that opens a folder on my desktop where i can save the file next i'll open the zip file then i can choose between two different material design themes light and dark let's check out the light theme whoa visual elements like color palettes and fonts are all there in the assets panel even better they've included a bunch of artboards with directions on how to use the design kit as well as icons themes and components that you can copy into your designs here's a pro tip you can customize any element or component you borrow from a design kit to match your designs it's often as simple as changing a few colors or rounding some corners feel free to check these out on your own as you get started the material design system here in adobe xd might seem pretty familiar that's because it's pretty much the same as the one you already worked within figma if i want to add more ui kits it's super easy i'll go to file at the top of the menu bar scroll down to get ui kits again and then click on more ui kits it automatically takes me to a download page with lots of other kits there's apple aem components microsoft and many other companies ui kits if you want to explore even more options you can also search for design systems on the web and then download them from the company website as long as they're compatible with adobe xd and with that you know how to import design kits into adobe xd you may have noticed that there are many to choose from take some time to explore these kits and understand what each one has to offer it's time to learn how to create prototypes of our responsive website designs in adobe xd in particular i'll focus on how to go from mockups to high fidelity prototypes for the desktop version of the library website in an earlier course you learned that you could create a high-fidelity prototype following five steps lay out the mock-ups connect the screens add interaction details adjust the animation then complete for all the screens when you went through this process in the last course you're working in figma but now we're creating our designs in adobe xd so let's explore how to complete these steps and create a hifi prototype in this new tool i'll start by clicking on adobe xd and opening my mockup designs remember to create a prototype switch into prototype mode by clicking prototype in the menu in the upper left corner first i'll lay out my mockups in the order of the main user flow in other words i want my mockups to be in the order that users would move through the library website this will make it easier to build the connections here we go this should be right now that the artboards are in order i can move on to step two connect the screens at this point i'll be thinking through the order of interaction for the user visiting the library website the user journey i'm focused on is finding and reserving a book starting on the home page the first action i want a user to take is to click the search link in the top navigation bar so i'll click on the first element i want to connect which is a text that says search a blue arrow will appear i'll click and drag this arrow to the second artboard that i laid out earlier which has a big search bar across the top of the page you'll notice that the artboard i dragged the arrow to will be highlighted in blue until i release the arrow this helps me double check that i'm connecting the things i want to connect the next action i want a user to take on my website is to search for a book in the search bar i'll need to connect the search button here to the search results artboard you've already made connections between artboards when you made your low fidelity prototype earlier in the course and i've shown you how to do a couple of them again here so i'm going to quickly speed through connections to the rest of my user flow for the library website one sec i'll be right back [Music] [Music] there we go all of my connections are in place it's time to move to step three which is add interaction details in adobe xd you can decide the type of interaction you want for the transition between two elements and we call these triggers triggers define what type of interaction will cause a prototype to advance forward the first option is tap which is the most common choice this means a transition will happen when the user taps or clicks on the first element then there's drag this means a transition will happen when the user drags or swipes across the screen in a set direction drag is often used for image carousels the last two options gamepad and voice allow you to prototype more complex products for this library website i'll stick with the tap trigger because it's the closest to a simple click and i'm designing for a desktop computer where clicking is common and with that i'm ready to move on to step four which is adjust the animation for desktop websites i don't need to add too many animations think of websites you visited recently from your desktop or laptop computer most of these pages have a simple transition to the next page on your click so i can skip this for my desktop website designs this means my high fidelity prototype for the desktop version of my designs is complete that was quick but it's a bit more complicated to add interaction details and adjust these animations for the mobile version of your website designs let me show you how this would work for the mobile site here it is first i'm going to add a connection between the hamburger menu item on the home page and the flyout menu artboard and just so you don't get confused adobe xd uses dotted lines for connecting overlays the solid lines are for the main connections now let me add the interaction i'm going to keep the trigger as tap because that's the most common interaction for mobile websites for the actions i want the type to be overlay and i've set the animation to slide to the right this tool sizes the image for me so it's easy to position it over the page i've set this up in the overlay submenu now let's test out the interaction i'll click the preview button and click on the hamburger menu on the top of the page so this overlay only covers part of the page i can click the large x to exit keep in mind this overlay example is just one of many ways that you can change the interaction to achieve a responsive design now that one of my animations is looking good i'm ready to repeat this process and complete it for all of the screens in the mobile version of the library website i'll make connections add interaction details and adjust the animations for the rest of the artboards [Music] [Music] and there we go the prototype for the mobile version of the library website should be fully functioning let me show you how it works using the preview button so here i have the preview of my narrow website i can click on the search field i can enter a book name i can click search and i get the search results page from here i can see the detail of a book such as this island of dr morrow book by clicking here if i click the reserve button it will tell me that the book is in my basket by changing the reserve button to yellow at this point i can see the items that i have in my basket by clicking this basket icon if i scroll down in my basket i can see all the books i've added to my basket and then confirm the reservations at the bottom clicking here will take me to the reservations confirm page where i can see when to pick up my books and a quick summary of what i've ordered from the library at this point it's very easy for me to get back home by clicking the wcl logo at the top that's a wrap you now know how to create a high fidelity prototype in adobe xd now it's your turn to bring your own website designs to life get creative and don't be afraid to explore so far you've learned some great strategies for adapting the ui and other visual elements to create responsive high-fidelity web pages before you test your designs you need to make sure that the website is accessible in this video we'll discuss some of the ways that ux designers can design web pages with accessibility in mind the great news is that there are standards you can refer to called the web content accessibility guidelines or wikag the wic tag documents explain how to make web content more accessible to people with disabilities most of the standards are focused on how to incorporate text sounds and images in a way that supports more users so let's explore three ways to make your web designs more accessible based on wiki standards the first way is to make annotations annotations are markers placed next to interactive ui elements like the call to action buttons on the page here's a screen of the dog walker app that was designed earlier in the certificate program the screen now has annotations the numbers in the green circles indicate to an engineer the linear focus order or traversal order that assistive technology like a screen reader moves through the form traversal order is the navigation flow for a user on an app or a website the annotations also set the order in which a user would tab through the items on a website if they use a keyboard instead of a touch screen or a mouse a second way to make your web designs more accessible is with hierarchical headings earlier in the program you learned about hierarchy a visual design principle that orders elements on a page and highlights them by their importance headings are a great example of how hierarchy can help users navigate a web page by selecting from the screen reader menu options more easily headings are an effective way to scale the size of the text based on its importance on the page having specific heading tags allows screen readers to understand the hierarchy of the page different sized headings can be annotated with h1 h2 h3 and so on to further indicate the hierarchy these annotations will support the engineers implementation of headings in html the third way to make your web designs more accessible is by using labels labels add descriptive language to the interactive ui elements on the web page you should use labels to indicate the purpose of the control in any type or role of the control for example a floating action button in gmail is labeled compose and the type of the control is a button when annotating labels for interactive elements on your web page you should note where similar controls should be grouped to provide more efficiency and context to the screen reader for example consider grouping a list of check boxes so that a user of assistive technology could understand the relationship of the check boxes and how to quickly navigate to and from them it's important to include detailed annotations for the engineers who will be working on the implementation of the project once your designs are finalized in this image you'll notice that i included annotations for the engineers to provide the labels that the screen reader should read aloud for each button successfully applying labels is necessary to create inclusive web pages that's all for now making the most of annotations hierarchical headings and labels in your designs can help make your web content more accessible for people with disabilities try applying these learnings to your own designs 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