hey there and welcome back now that you've empathized with users define the user's problem to solve and begin to ideate on possible solutions it's time to bring those ideas to life in a wireframe the wireframes you design in this course are for responsive websites it's important to keep in mind that your website will have different layouts depending on the device and the screen size you're designing for in other words if you're creating a wireframe for a desktop or a laptop computer you'll have a lot more space on the screen and therefore a lot more flexibility than if you're designing for like a mobile phone screen so to learn how to create wireframes for a responsive website we'll start with some basics like common website layouts next we'll examine how to build paper wireframes for websites and you'll create paper wireframes for your own website after that we'll discuss how to plot responsive website layouts using grid paper and we'll go over a few elements and components that are commonly used in responsive website design then we'll transition to digital wireframes i'll demonstrate how to build wireframes in adobe xd for my library website project so that you can create digital wireframes for your own project finally you'll update and refine your wireframes to enhance accessibility and we'll revisit gestalt principles to understand how they come into play during wireframing get excited because during this part of the course you'll create paper and digital wireframes of your website designs you're getting closer and closer to completing your second portfolio project you ready let's get started in order to better help users navigate and interact with your pages let's check out some website layouts and best practices that you could use to arrange the elements on your site's home page remember home pages are the entryway to the contents of a website they're usually the first page users land on when they arrive at your site home pages also provide a central point for user navigation so how do you lay out a website home page as i'm sure you can imagine there are multiple ways a website home page can be laid out so let's check out some of the more common layouts first up let's discuss single column website layouts as the name implies single column layouts have only one column for content take a peek at this blog post on medium the entire article is in one single vertical column in this layout elements tend to be stacked in a logical order with the navigation at the top the content next and maybe a footer just to round things off as you can imagine single column layouts are probably one of the simplest layouts one more thing to keep in mind you may notice single column website layouts frequently on mobile websites it's a straightforward approach to presenting information to users especially when you're creating a mobile layout for a website second let's check out websites with multi-column layouts multi-column layouts generally have two or more columns for content you've probably encountered this layout on many desktop websites if the multi-column layout has two columns there's usually a clear focal point a focal point is a specific and distinct area of the website that captures user's attention in this example the grow with google website uses images as focal points content that supports the focal point takes up anywhere between 25 to 45 of the page here the supporting content is the text to the right of each image if the multi-column layout has many columns designers use visual weight to create a good user experience or check out this vietnamese home cooking recipe website that uses three columns having three columns of content means more recipes can be displayed above the fold remember above the fold refers to the content on a web page that doesn't require scrolling to experience the box layout is a layout that consists of boxes or squares of various sizes and proportions box layouts are often found at the main starting point or home page of a website in this example nordstrom uses boxes to organize different categories of gifs for the holiday season the box layout allows users to quickly navigate to gifts of varying price points and item types using a box layout allows e-commerce websites to easily swap out items that are relevant depending on the season or a sale they want to draw users attention to the box layer is often used in ux design portfolios as well next up is the featured image layout which is sometimes referred to as a single image layout a featured image layout places the user's focus on a single image or video that often takes up the entirety of the page a featured image layout is popular on many product pages because it's based on the idea that using images in the design is the fastest way to sell a product the featured image is big and bold which creates an emotional connection with users and makes a strong first impression if you choose to use this layout make sure your featured image is relevant to the message you want to deliver and is high quality the featured image is often accompanied by a menu bar on the side or top of the page this menu is often sticky or fixed which means that the menu stays in place as the users scroll down the page in this example caledon build a project management and construction company uses a featured image that takes up the whole top of their homepage website alright let's explore some more popular website layouts up next asymmetrical layouts asymmetrical layouts have purposeful imbalance between different sides of a page you may use an asymmetrical layout to place emphasis on certain parts of the page such as images or headlines two common types of asymmetrical layouts are f shape and z shape these layouts get their names from the path the user's eyes usually follow across the page f-shape layouts mean that the pattern users will likely browse content on the page follows the shape of an f an f-shape layout is commonly used to present a lot of material on a single page the f-shape layout allows users to scan the information quickly this layout is often used on search result pages like this one the user follows the shape of the f as they explore the page on the other hand a z shape is where users skim information starting left to right then move diagonally to the left before scanning to the right again like the letter z it also imitates the natural scanning pattern of western users who read left to right and top to bottom z shaped layouts are typically used for sites with less content like this keep in mind anyone with a visual impairment would need accessibility support to navigate the page but they would follow the same z or f-shape pattern through the information last but not least let's talk about one more common website layout a grid of cards a grid of cards layouts features a series of cards that provide previews of more detailed content each card can vary in size but the cards are often a uniform size also keep in mind that the size of the cards you use may vary depending on the size of the screen you're designing for you may recognize this website layout from your favorite recipe blogs streaming service or other content heavy websites here's an example from dribbble the cards are all the same size and preview lots of different content other popular websites that use a grid of cards layout are youtube and pinterest and last but not least let's check out a tiered layer cake the tiered layer cake is just what it sounds like it looks like a layered cake with individual rows or layers stacked on top of one another within each row there can be different numbers of columns and they don't have to be consistent the tiered layer cake layout is often used in responsive website design as layers can easily be swapped out or moved around the tiered layer cake layout differs from a regular multi-column layout in that there is no all-encompassing container or long-running sidebars they can be multiple columns within a layer though how does a tiered layer cake layout show up on a real website let's check out the strider bikes website here there are clear breaks between each layer and each layer has a different number of columns allowing for different combinations of text boxes icons and images using familiar website design layouts like these makes it easier for users to navigate your website since they've lightly encountered the layout before you'll need to find the layout that works best for your project keep in mind that the internet and the ux design industry are constantly changing and you may notice that common website layouts change too what's trending right now doesn't necessarily reflect a high level usability or address accessibility needs instead you should always pick the layout that's best for your users and the project rather than simply following what's popular at the time and that's a wrap now it's your turn to go and explore some of your favorite websites what layouts do they use what do you notice about the user experience when certain layouts are used have fun and stay curious at this point you've empathize with your users define problem statements that need to be addressed and started ideating design solutions now it's time to explore wireframes remember when we mentioned site structure earlier in the course now you can start designing each page that will go into that structure just like a blueprint as a reminder a wireframe is an outline or a sketch or product or screen as a name might suggest wireframes are relatively bare bones consisting primarily of shapes lines and minimal text wireframes help the designer figure out the layout of the page a layout is the structure that supports how visual components on a page are arranged layouts also demonstrate where each feature of a product fits in with the others and how users will progress from one screen to the next there are two methods designers can employ when wireframing paper or digital like many ux designers i normally start sketching my wireframes on paper and later switch to digital this allows me to work through many iterations faster and throw away the wires that aren't working it's a good idea to consider implementing industry standards for creating paper wireframes like representing text with horizontal lines icons or images as squares and x overlapping the square and calls to action like buttons as rectangles or circles doing this makes it easier for other designers in the project to understand the purpose of each element in the wireframe to help us explore a lot of ideas we often create multiple wireframes for the same screen of an app or website in this case i'm going to draw wireframes for the homepage of our library website the goal is to come 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 i'm going to draw wireframes for lots of ways at one screen the home page could work so let's get started before you 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 i'm drawing wireframes for the home page of the library website so the information that needs to be included on this page might include a navigation bar across the top of the screen images of book covers and text descriptions that call out the title and author of each book all right let's start drawing it's a good rule of thumb to try to create at least five different versions of how to structure information on a page remember at this stage our goal is to explore lots of ideas with our wireframes when you sketch you can use a few sheets of paper a notebook or a stylus with a tablet so i'll grab a few pieces of paper and a pen first i'll draw a rectangle to represent the frame of my website i'm going to start at the top of the page first the header personally it's easier for me to design from top to bottom because that's how i experience a web page but this is a matter of personal preference and you can begin wherever you want for the header area of the home page i want to include a logo a few key navigation buttons or links and a hero image so in the upper left hand corner of my wireframe i add a rectangle and the word logo to make this clear to myself or others who might review the wireframe next to the logo i add links for search discover donate and about pages because those are important hyperlinks i need to include for a library specific website on the right side of the header i'll add icons for account and cart folks need to know where to find the books add into the cartwright it's a common design pattern in left to right reading languages like english to put the link to the cart the furthest to the right after that i'm going to pop in a placeholder for a hero image below as a personal design decision i'd like this hero image to take the majority of the header area but not all of it i'll want some text next the hero image to explain what the image is all about maybe this could be a featured author or a new book release remember we usually draw an x in the boxes to indicate that this is a placeholder for an image great i think that will work below that i want to include a few squares and rectangles that show website visitors the latest books i'm going to add a long line to create a new area of the page i'll draw a couple of rectangles with an x inside within this area to show where images might go i'll also add lines to show a corresponding description to the right of each rectangle the reason i'm adding these two rectangles above the fold is so users will immediately notice them when landing on the home page remember above the fold refers to the content on a web page it doesn't require scrolling to experience below the fold i want to include additional books that a visitor can view right on the home page i don't know what these books will be yet but i want a variety of options to cater to different genre preferences to do that i'll draw a line to create a new section on my home page for these books and inside this rectangle i want to list six books i'll create two groups of three rectangles and some lines directly below each of them to indicate the texts for the book title author name and other relevant information last but not least there's the footer of a page generally the footer is where we add extra information that might be useful for visitors to navigate to such as the organization's social media pages terms and conditions career opportunities privacy policy and more things like that i'll add a few lines that indicate hyperlinks to these pages within the footer in the footer i'll also include the logo of the library because i want to show the full version of the logo that has the library name next to it we'll use a smaller version of the logo in the header to save a bit of space all right my first wireframe is complete i'm going to create a few other wireframes for the home page remember it's best practice to create around five versions of important pages like the home page to figure out which features and layouts you like the best 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 okay here we go we'll check out all my wireframes side by side when i'm done [Music] [Music] and there we have it i've created a variety of wireframes for the home page let's review the five wireframes i drew and i'll share my thoughts on each one one thing i like about my first wireframe which i called option a is a large hero image with text next to it this could be a fun place to introduce an author or a feature collection of books for option b i put a really prominent search field in the top right of the home page i was thinking about putting a hero image of the library behind it for option c i wanted to group the logo search and navigation to one floating box then i placed other images and text for items like books further down the page for option d i thought i might be able to simplify some of the navigation by having the discover about and donate areas of the site as part of the actual home page finally for option e i decide to think a bit outside the box and create something completely different i made search super prominent in a kind of a search engine kind of way now that i've come up with some ideas in my wireframes it's as good a time as any to identify which features i like the most i'll add a star next to the parts of different wireframes that are my favorite first in option e i'd like to discover about and donate tabs across the top of the home page so i'll add a star next to this feature i also like this large hero image of the text next to it in option a so i'll add a star here too in option d i like this section of the wireframe that i call discover to help users find popular books i'm going to put a star next to these two image placeholders and their accompanying text finally in option b i like the footer that has the logo and placeholders for text i'll draw one more star here great now that i've identified the parts of my wireframes that i like the most i can combine them into one new wireframe i might draw this new wireframe on paper if i want to keep ideating or creating a digital tool when i'm ready to move on okay it's time to take everything you know and create paper wireframes for your own website in the next activity you'll sketch designs for a desktop computer screen have you ever noticed when you change the size of your internet browser that the layout of a website changes or when you view a website or mobile phone the layout on your phone is different from the layout on a desktop computer well that's because the website was built with responsive layout responsive web design means crafting changes to the appearance or layout of a website depending on the device being used to view it and the size of the screen a ux designer planning a website needs to consider how the elements on each page will appear on different size screens all right but why is responsive web design so important responsive web designs adapt easily to any screen this increases usability and creates a good user experience of people visiting the website responsive design also drives mobile traffic to your website after all not everyone will be visiting your website from a desktop computer and you want the layout of your website to work for users no matter what device they use in addition responsive design saves money and time because you don't have to design a website for every device size let's examine a responsive website in action remember this vietnamese home cooking recipes website from earlier let's compare the desserts page of this website on a desktop computer to the desserts page on a mobile phone on the desktop the website uses a four column layout taking full advantage of the bigger screen on the mobile device it switches to a single column layout for a better user experience if i flip the phone to a horizontal orientation the layout of the page changes too pretty neat right that's the magic of responsive design now how do you as a ux designer apply responsive design to a website it takes a bit of planning and it begins the wireframes you've already created for example let's take a wireframe i created earlier where i combined all of my favorite features of the library website home page i'll plot it on some dot paper to get a feel for how the design might appear on a mobile screen the dot grid or paper makes it easy for you to shrink or scale elements of the wireframe in a consistent way since mobile phone screens are significantly smaller and more narrow than desktop computer screens i have to create a narrower version of the wireframe i drew earlier desktops are clearly larger than mobile so i'll scale down my wireframe to approximately one-third the size for mobile okay here we go check this out [Music] [Music] all right my wireframe is complete i usually draw this on a5 paper which is fairly small so sometimes when i draw mobile phone screens like this the sketch spans across two pages no worries though i can just tear up these pages and put them together like this notice how different the layouts in my two wireframes look for desktop and mobile websites keep in mind i'll also want to draw wireframes for all of the screen sizes in between desktop and mobile like a tablet or a desktop computer with a smaller browser size you'll want to plot responsive layouts for the most important pages of your own website in addition to the home page doing this helps to make sure that the layouts for each of your pages provide a good user experience you're learning all about responsive layouts to make sure that your website design provides a good user experience no matter the device or screen size being used to view it at this point you've already created wireframes for the desktop version of your website now you're getting ready to create responsive layouts for smaller screen sizes like a mobile phone or tablet when you try to adapt a desktop website for a smaller screen there's less digital real estate on the page to place icons images and text that means details need to be scaled down to meet accessibility standards and ensure a good user experience you may also need to reduce the size of text across your website to ensure it fits in the smaller screen and still looks good using common easily recognizable elements and components can help users interact with your product in an intuitive way so let's discuss three of them first up is a popular navigation design icon that you've probably encountered in your favorite mobile websites a hamburger menu hamburger menus are a type of navigation menu that is represented by an icon with three lines it kind of looks like a hamburger when you click on this icon it unfolds by either sliding in from the side or taking over the whole page revealing a menu of options that allows you to navigate through the pages hamburger menus are useful to hide information in order to keep the user's attention focused on the primary content of the webpage next cards are a common component used in responsive designs cards are surfaces that contain content and actions about a single subject card should be easy to scan for relevant and actionable information elements like text and images should be placed on them in a way that clearly indicates hierarchy here's a quick example this mobile website uses cards to provide information about different video files you can download and watch placing the cards in a consistent pattern makes it easy for users to quickly scan the page another common component used in responsive design websites is a carousel you may also know them as slideshows carousels are scrollable feeds of images or cards that can be sifted through with a click or automatically loop while you're on the page carousels are often used on websites with lots of images like a photography gallery to help place more images above the fold carousels are also commonly used on mobile sites to help condense the layout to fit a smaller screen size so let's check out an example here a carousel is used to present the featured products on the website sometimes e-commerce websites or online retailers use carousels to show users the most popular items purchased by the consumers so that's it now you know a few elements components that are commonly used in responsive designs as you create wireframes for smaller screens consider implementing one or more of these into your own designs by this point you've created a few iterations of your paper wireframes you've even explored responsive designs in your wireframes by sketching for different screen sizes 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 to determine if you're ready to transition your paper wireframes to digital ask yourself a few questions one do you have an idea of the layout you're aiming for two have you received feedback from peers or managers on your paper wireframes and three are you ready to consider basic visual cues like size text and typography or other visual elements like content or images if you answered yes to all three of these questions then you're ready to start creating a digital version of your paper wireframes but here's one tip be sure to hang on to those paper wire frames for your portfolio so you can showcase your full design process in the next video you'll learn how to create and adjust columns grids and gutters in adobe xd just like you use dot or grid paper to layout your paper wireframes you'll use these features to layout your digital wireframes as we discussed in an earlier video adobe xd gives us the tools to design and prototype websites apps and more i'll take the paper wireframes i already created on paper and turn them into digital wireframes now for now i'm only going to show you how to create a digital wireframe of the desktop version of the library website homepage as a reminder i laid out my home page using a layer cake structure because i want to order the content by order of importance this structure will help draw attention to the content above the fold one last thing to note before we jump in the digital wireframes i'm about to create in adobe xd will be a little higher fidelity than the wireframes karen created an earlier course for the dogwalker app for example i may use a few more keywords or lorem ipsum text instead of lines that represent text okay so let's open xd and pick up where we left off here we go remember when we worked in adobe xd earlier in the course i added a desktop sized artboard to the canvas and specified a layout grid which included customizing the columns gutters and margins so i'm not going to need this text box and rectangle i want to start my digital wireframe from scratch so let me delete those quickly before i get started i'm going to upload a photo of my paper wires into adobe xd this will make it easy for me to refer back to them as i design my digital wireframes you can start building your digital wireframe anywhere on the artboard but for me it's easier to build from top to bottom using my paper wireframe as guidance i'll begin by building the general outline of the entire home page with various squares and rectangles i'll start by using the rectangle tool to draw the four large rectangles that make up the outline of my layer cake design layout now i need to decide on the navigation pattern i want to implement for this design i think a sticky top navigation bar will be a good idea a sticky top navigation bar doesn't move as the users scroll down and always stays at the top of the page as i imagine search results can get quite long for a library i don't want users to have to scroll all the way back up if they want to switch to a different page of the website first i'll add a narrow rectangle across the top of the page to represent the top navigation bar here's a pro tip the rectangle is already filled in white which makes the wireframing quick next i'll draw a square in the left side of the navigation bar and i'll fill it in black this square will represent the library logo that i'll add in later then i'll select the text tool and add the word search to the right of the logo to represent a tab that will link to a different page of the website i'll continue to fill out the top navigation bar here including discover donate and about now that i have all four words let me make sure they're spaced evenly and align vertically there we go on the other side of the top navigation bar i'm going to add two tabs that are called account and basket i might even add a number like three to the text here to show that there are three items in my basket this is just something fun to make the wireframe seem more realistic next i'm going to create the hero image part of the wireframe i'll use a rectangle tool to create a new rectangle for the hero image below the navigation then i'll create a second rectangle next to it and fill it gray this is where i'll add the text to describe the hero image now i'm going to add two text boxes to describe the hero image since i'm not sure what the text will say yet i can use lorem ipsum as placeholder text to differentiate between the header and the regular text i make the header a larger font size and there we have it above these two text boxes i'll add another small text box to indicate what i want the hero image to feature i'll type featured author into this text box for the next two layers of the website i'll use repeated groups of similar size rectangles and text boxes i want to make a little bit more space for my book covers so i'm going to need to make my artboard a little bit longer i can do this by clicking on the selection tool and dragging the height of my artboard i'm now just going to resize a couple of these rectangles to make more space for these larger book covers okay now back to creating those books next to the book i'll place three text boxes to represent the book title the author's name and a short description of the book i'll add lorem ipsum text for all three of these and i'll make sure each of them is a different sized font now i'm going to use the selection tool and click on each of the elements i want to group together while holding down the shift key once i have all elements highlighted i'll select the repeat grid button option from the top of the right side panel from here i'm going to use a neat adobe xd feature called repeat grid which allows me to select a group of items and instantly duplicate them across my artboard like so ta-da did you see how easy that was so much faster than copying and pasting great this layer is looking good i can now follow a similar process to create a group of rectangle book covers and accompanying text for the layer below to do this i'll draw one vertical rectangle using the rectangle tool and then make two copies of it i'll need to make sure the three rectangles are evenly spaced i'll add a couple of tiny text boxes below each book for the title and the author finally above the group of books i'll add a long text box that will indicate the book category now i'm going to use the selection tool again and click on each of the elements i want to group together while holding down the shift key just like last time once i have all the elements highlighted i'll click on the repeat grid button and then drag the vertical green bar to the right to make additional copies of the group appear and you can see that there's not enough space between these book covers so i can hover over the repeat grid and then just increase that spacing between them like this as you might have noticed i added an extra group to the third layer here there's plenty of digital real estate in a desktop website like i'm designing so i have the space to showcase a few of the book titles that users might be interested in renting from the library how exciting the wireframe is starting to come together i love this part of the process where my ideas are taking form there's one thing left to do add the footer to the final layer at the bottom of the page and here's a pro tip a lot of organizations include a simple version of their logo at the top of the home page like i did in the sticky top navigation bar but at the bottom of the home page in the footer you can include a more detailed or larger version of the logo i'll add a rectangle to represent this logo and i'll fill it in black below the logo i'll add four small squares to represent social media icons you may have noticed this on web pages you've explored many organizations like to include links out to their profiles on social media to drive traffic and followers finally i'll add a few text boxes with lorem ipsum text to the footer later i might add information here like the library's address or links to other libraries nearby that are part of the same chain bingo my digital wireframe for the desktop version of the library website is now complete keep in mind moving from your paper wireframes to digital wireframes might not be a perfect process sometimes the elements you drew in your paper wireframe won't fit on the screen when you make a digital wireframe or you might have to change the design that's okay and completely normal and there you have it you now know how to use adobe xd to create digital wireframes for the desktop version of your website creating digital wireframes can be a little time consuming but it's well worth it to create a more refined version of the wires you do on paper now it's your turn open adobe xd and get started with your digital wireframes for desktop screen size we just finished our digital wireframes for the desktop since we're designing a responsive website i also need to think about what these pages will look like on a smaller device like mobile phone unfortunately we don't get this functionality automatically so we need to design for the smaller screen size ourselves let's take a look an example of responsive design on the web with a grow with google home page you can see here as i resize this desktop website content reflows on the page to allow for the smaller screen size you can fit a lot more content on a desktop web page at one time than you can on a phone so we need to think about how our content and control should appear on a smaller screen so let's get started i'll pull up adobe xd and next my home page wireframe for a desktop i'm going to add another artboard in a mobile phone size now i'm ready to think through how to transform my library website design for a smaller screen size i'll start at the top and work my way down at the top of my desktop website i have a navigation bar and this is too big to fit in a mobile phone screen i still want a top navbar but i'll hide all the menu options underneath the hamburger menu in the top left i'll plan to use an overlay that pops up when a user clicks on the menu and from there the user can access these actions since the hamburger menu is usually found at top left of the phone screen i'll need to move the logo to the middle of the screen to compensate the other two things i think people will still want access to our search and the basket so i'll turn this into icons and also include them in the top nav bar on the right side i'll keep the basket on the far right so it feels familiar and consistent with the desktop site i'll put these in as circles for the moment since this is a wireframe moving down the page i have the featured author section i can't do a two column layout on the mobile phone screen like i did on desktop so i'll put my hero image at the top and have the accompanying text descriptor right below it the next section is the popular wcl section on my desktop screen this is very horizontal so i need to flip it to be vertical so instead of my books being side by side i'll place them one above another the feature collections section is similar instead of having each collection side by side i'll also place these one above the other i'll add a couple of tiny text boxes below each book for the title and the author once i have all elements highlighted i'll select the repeat grid button option from the top of the right side panel which allows me to select a group of items and instantly duplicate them across my artboard like so did you see how easy that was so much faster than copying and pasting finally for the footer i still want the library logo to be the first thing people notice so i'll put that into the footer first i also need the contact information for other library branches and finally i can put the social media icons at the very bottom of the footer all right i now have a wireframe for the home page of my website for a mobile phone i now need to follow the same process for each of the additional artboards you'll need to do the same exercise for additional screen sizes like a tablet adapting the design to make it responsive forces you to prioritize page layout and decide what's really essential for the user and how to group that information in your portfolio you'll want to show important pages like your home page and multiple screen sizes great now's the time to take what you learned in this video and apply it to your website wireframes try designing your own narrow view wireframe next my colleague shabi is going to show you how to refine wireframes to enhance accessibility as you're creating digital wireframes in your website it's important to keep accessibility considerations top of mind remember users of all abilities identities and experiences need to be able to successfully move through your design and understanding how people with disabilities use your product is a crucial part of the ux design process there are a few features to include in your wireframes to ensure that people using assistive technology have a great user experience first let's talk about headings headings are titles or subtitles that stand out at the beginning of a paragraph article section or another area of a website header text is often larger and bolder than the text on the rest of a page and designates the beginning of a section headings can be used to label menus page titles subtitles and other related structures on a page one reason it's important to make sure headings are clear in your designs is because all users can benefit from headings headings support visual hierarchy as well as support efficient navigation for users of screen readers screen readers can navigate a web page through headings which allows users to listen to a list of all headings or jump to a desired heading to begin reading at that point on the website users can use the screen reader headings menu to move around to key sections of the webpage let's check out the library website to see how this works in practice at the top of the webpage i included a featured author section i added a heading to this section called featured author i'll need to make sure developers know which heading tag to use in the html implementation to do this i'll make an annotation in my wireframes that this is an h2 heading since it is a subcategory of a greater article i'll repeat this process for my two other content blocks popular at wcl and featured collections as you continue refining your wireframes consider annotating various sections to serve as personal reminders using placeholder words like heading subtitle or page title will be helpful for your own reference as well as when you determine the appropriate heading tag another feature to include in your wireframes is a landmark landmarks are features used to map out regions of an interface headings which we just discussed serve a similar purpose to landmarks landmarks are used by assistive technology like screen readers to provide cues for navigation allowing users to efficiently move from one section to another common landmarks include navigation bars search boxes fixed sidebars and footers much like landmarks in real life these objects or sections stand out from the rest of the page to help users navigate through a website for example ios devices utilize the voice over screen reader it features a rotor that users can control by pressing the keys control option u this rotor tool allows users to browse web pages and switch between landmarks and headings for ease of navigation ok let's check out one more feature to include in your wireframes to ensure that people using assistive technology have a great user experience initial focus is how you attract a user's attention to help them accomplish a task if your web page requires the user to do several things it's best to direct focus to the top of the page or to the first h1 heading to understand how this is used in real life let's check out the google home page the home page of google search features the search bar at the center of the page below a single hero image this positioning ensures the user's attention is directed towards the search function but the idea behind the initial focus isn't just to attract the user's attention focus can also help define the primary tasks or actions you want a user to take although there are other links on the google search page defining the search bar as the initial focus supports the central purpose of the page in general the less clutter there is on a web page the easier the interface is to navigate otherwise a user might experience cognitive overload too much information or too many tasks simultaneously resulting in the user not being able to complete the task a good user experience design has the power to help users of all abilities identities and experiences move easily through a product keep features like headings landmarks and initial focus in mind as you create your digital wireframes in high fidelity designs to help users navigate your website with ease now take some time to review your digital wireframes and find ways to apply these features in your own work as you continue to create and refine your digital wireframes there's one more thing i want you to keep in mind gestalt principles if you've been taking the courses of the certificate program in order you'll remember gestalt principles from our early work in wireframes and mockups as a reminder 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 easy to understand basically humans naturally notice the whole of something before noticing the parts we do this in order to mentally connect the dots between separate objects and create cohesive story in our minds okay so let's talk about a gestalt principle that's particularly relevant to our wireframes similarity remember similarity means that elements that look similar are perceived to have the same function elements might look similar based on their shape size or color let's check out how the principle of similarity came to life in my wireframes of the wisconsin county library website in the popular at wcl section of the home page there are two areas that have a rectangle for a book an accompanying text for the book title author and description notice how these two groups are identical in size and shape because these two groups look similar users can tell they have the same function for example both of the rectangles will have an image of a book cover and both of the first rows of text will have the book's title this also makes it easy for users to quickly understand the information we're presenting for example the book titles look the same in both of these groups all right let's investigate a second gestalt principle that can help inform our wireframes proximity proximity is a perception that elements that are close together appear to be more related than those that are spaced apart in my wireframes of the wisconsin county library website we can find the principle of proximity in action here's one notice the groups of three rectangles under the featured collections header the first group of three rectangles is spaced close together which indicates that they're related the second group of three rectangles is spaced apart from the first group which means the two groups are less related in other words the first group of three rectangles might be booked within the same collection while the second group of three rectangles are books in a different collection okay so how about one more gestalt principle do you remember common region the principle of common region states that elements located within the same area are perceived to be grouped together let's go back to libra website again and check out the featured author section at the top of the homepage within the featured author box is a header title and descriptor text the border around the box indicates the users that this information is related for example the text in this area will all be about the featured author who is shown in the hero image to the left keep in mind there are many mortgage style principles to explore and apply to your wireframes these are just three of them to get your creative juices flowing with these gestalt principles in mind are the things you'll change in your own wireframes for example are there elements in your wireframes that you want to appear related that you'll now move closer together if so you're utilizing the principal proximity good luck with your 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