WEBVTT - https://subtitletools.com 00:00:06.830 --> 00:00:11.870 Hello and welcome to this UX Daily video in which we'll be discovering a design pattern 00:00:11.870 --> 00:00:17.700 that is very useful when you're creating the page structure for your project – the *visual framework*. 00:00:17.700 --> 00:00:22.700 My name is Priscilla Esser, and I will be discussing the tricks of the trade from WordPress template developers 00:00:22.700 --> 00:00:25.240 and other seasoned interface designers. 00:00:25.240 --> 00:00:28.860 And I will show you how they create consistency in page layouts. 00:00:28.860 --> 00:00:34.440 One of the essential elements of creating the best results for visual frameworks is something called *visual hierarchy*. 00:00:34.440 --> 00:00:38.060 In this video, I will help you understand what visual hierarchy is 00:00:38.060 --> 00:00:41.360 and how to use that to create a proper visual framework. 00:00:41.360 --> 00:00:46.080 The visual framework is all about creating visual consistency throughout the user experience. 00:00:46.080 --> 00:00:51.420 To illustrate the importance of this consistency, just think about the simple task of finding your way back to 00:00:51.420 --> 00:00:53.300 the homepage of a website. 00:00:53.300 --> 00:00:57.780 We're all used to having the company logo in the top navigation bar to be the homepage link. 00:00:57.780 --> 00:01:01.926 Just have a look at this example from the Interaction Design Foundation website. 00:01:01.926 --> 00:01:07.140 But what if you designed a website with multiple pages that all have this link at another location? 00:01:07.140 --> 00:01:11.800 How would it impact your experience if the logo was placed in the *footer* of the website, for example? 00:01:11.800 --> 00:01:14.200 Probably not that positive, right? 00:01:14.200 --> 00:01:19.160 You would have to scan each page separately for visual cues that indicate this functionality, 00:01:19.160 --> 00:01:21.720 adding to your mental burden. 00:01:21.720 --> 00:01:26.820 The solution is creating a consistent visual framework for all pages of your website or application. 00:01:26.820 --> 00:01:32.400 It's a framework of visual elements, colors and typography that forms a basic layout. 00:01:32.400 --> 00:01:36.400 This layout gives you sufficient structure to create consistent pages. 00:01:36.400 --> 00:01:41.360 But it also offers enough flexibility to handle different content types. 00:01:41.360 --> 00:01:46.229 In this example, you can see how the two pages of the garden supply website are 00:01:46.229 --> 00:01:50.700 consistent in the placement of the logo, headers, menu items, and search boxes. 00:01:50.700 --> 00:01:54.740 At the same time, the pages differ in the type of content they provide. 00:01:54.740 --> 00:01:59.000 The page on the left is clearly intended to inspire people with a large image and top categories, 00:01:59.000 --> 00:02:03.320 whereas the page on the right is giving an overview of available products in the online store. 00:02:03.320 --> 00:02:07.540 Notice how the consistent elements of the visual framework seem to be more in the *background* 00:02:07.540 --> 00:02:10.539 but the content itself appears to be more in the *foreground*. 00:02:10.539 --> 00:02:13.040 This is what a good visual framework can do for your design. 00:02:13.040 --> 00:02:17.620 It can help let your content stand out and shine. 00:02:17.620 --> 00:02:21.660 A great example of a visual framework in practice is a WordPress theme. 00:02:21.660 --> 00:02:29.620 These themes allow you to add any content you desire to create your own website based on the chosen visual framework. 00:02:29.620 --> 00:02:34.620 As most people aren't designers, this is a great way of making sure a website has good consistency 00:02:34.620 --> 00:02:41.603 and visual appeal. But since you are a designer, we'll use this example to see how it's done. 00:02:41.603 --> 00:02:46.380 So, let's have a look at the WordPress theme we see in this example. 00:02:46.380 --> 00:02:50.980 The visual elements that have been predetermined by the theme developers are the header size, 00:02:50.980 --> 00:02:56.140 placement of menu items and search box. Also, the structure of the blog post has given us a three-column 00:02:56.180 --> 00:02:59.500 layout with white blocks on a grayish background. 00:02:59.500 --> 00:03:04.200 The typography is set, as is color use, the way images are shown, etc. 00:03:04.200 --> 00:03:08.100 Naturally, everyone wants to personalize their website, so most elements are customizable. 00:03:08.100 --> 00:03:14.220 However, the theme developers do present a good visual framework that you can take as a starting point. 00:03:14.220 --> 00:03:18.500 Now, if we have a further look at this example, we see that the theme developers have also 00:03:18.500 --> 00:03:24.360 provided alternative ways to present different types of content while keeping the visual framework intact. 00:03:24.360 --> 00:03:29.287 The screenshot here shows how a side menu bar can be combined with a wider content block for blog posts. 00:03:29.287 --> 00:03:32.260 The user does not get confused by this change 00:03:32.260 --> 00:03:36.300 as the visual framework ensures that the major elements can be found at the same place 00:03:36.300 --> 00:03:40.380 and the overall look and feel is consistent. 00:03:40.380 --> 00:03:44.920 To create a visual framework, these are the steps that you should take. 00:03:44.920 --> 00:03:50.260 First, determine what types of content you need to place on different pages of your interface 00:03:50.260 --> 00:03:54.360 and what tasks a user will most likely want to perform often. 00:03:54.360 --> 00:04:01.020 Then, based on type of content and task, determine what user interface design patterns will be present across all pages 00:04:01.020 --> 00:04:06.810 – for example, a top-left navigation bar, a search box, a list or a dropdown menu of categories. 00:04:06.810 --> 00:04:12.240 Next, you should organize all returning visual elements on the page and indicate where content should go. 00:04:12.240 --> 00:04:15.980 Think about what element should go into the header area – most important – 00:04:15.980 --> 00:04:18.740 what, if anything, could be made accessible in sidebar, 00:04:18.740 --> 00:04:21.200 and what is more suitable for a footer area. 00:04:21.200 --> 00:04:25.020 Also, depending on the types of content, determine if you want to use multiple columns or not. 00:04:25.020 --> 00:04:29.480 Ensure that content has sufficient space to attract attention. 00:04:29.480 --> 00:04:33.700 When all elements have found a place on your page, you can decide on a more detailed level what colors and 00:04:33.700 --> 00:04:39.880 fonts you want to use. This is where the framework becomes personalized to the brand or company you're designing for. 00:04:39.880 --> 00:04:44.240 You can have some fun here, but you can also use color and fonts to guide people in the right direction, 00:04:44.240 --> 00:04:49.420 as we will see in a few minutes when we dive into the topic of visual hierarchy. 00:04:49.420 --> 00:04:53.278 But let's first finish the topic of implementation of the visual framework. 00:04:53.278 --> 00:04:59.040 While you're taking the first couple of steps in creating this framework, it's very useful to make wireframes 00:04:59.040 --> 00:05:04.600 to position the various elements in a consistent layout. 00:05:04.600 --> 00:05:10.160 Without emphasizing the visual appeal of color and images at first, it's much easier to 00:05:10.160 --> 00:05:14.760 shuffle design elements such as blocks of content and other design patterns around 00:05:14.760 --> 00:05:17.960 to create a good overview and focus on usability. 00:05:17.960 --> 00:05:23.160 In wireframes, you simply create placeholders for pieces of content and visual elements. 00:05:23.160 --> 00:05:28.400 It's a great way to do some early user testing by creating a paper prototype or creating a clickable prototype 00:05:28.400 --> 00:05:31.000 with wireframing software such as Balsamiq. 00:05:31.000 --> 00:05:33.500 The example you see here is actually created in Balsamiq, 00:05:33.500 --> 00:05:36.360 but many other wireframing applications are available. 00:05:36.360 --> 00:05:40.340 Of course, you might just prefer the old-fashioned paper-and-pencil way to get the creative juices flowing, 00:05:40.340 --> 00:05:43.480 which is perfectly OK. 00:05:43.480 --> 00:05:48.560 After creating the wireframes in the first couple of steps of implementing a visual framework and focusing on 00:05:48.560 --> 00:05:52.190 more graphic design elements such as color and typography, you may want to consider 00:05:52.190 --> 00:05:56.300 creating a style guide to report the design decisions you made here. 00:05:56.300 --> 00:05:59.720 Style guides give all the visual elements and rules for implementing them. 00:05:59.720 --> 00:06:03.440 It increases the uniformity and consistency you're looking for with a visual framework, 00:06:03.440 --> 00:06:06.740 but enables future extensions of your framework by others. 00:06:06.740 --> 00:06:10.850 This way, you ensure that when a client will not hire you five years from now to add to the 00:06:10.850 --> 00:06:15.140 website you designed for them, your efforts will not have been in vain and the new 00:06:15.140 --> 00:06:19.660 additions will remain consistent with your original intentions. 00:06:19.660 --> 00:06:24.440 As you can see here, major companies like Yelp provide their style guide as a resource for 00:06:24.440 --> 00:06:28.620 designers, product managers and developers. 00:06:29.180 --> 00:06:36.800 It serves as a common language to create brand consistency and a good user experience. 00:06:37.040 --> 00:06:41.240 Now, the main problem with visual frameworks is that when the initial design 00:06:41.240 --> 00:06:45.720 isn't very good, it will continue to bite you in the behind throughout all of the pages. 00:06:45.720 --> 00:06:48.721 So, how do you get the initial framework just right? 00:06:48.721 --> 00:06:53.380 Let's start by deciding what we consider a good page layout. Here's what I think: 00:06:53.380 --> 00:06:57.060 First of all, a page should invite and enable the user to accomplish the task they want 00:06:57.060 --> 00:06:59.140 in a way that doesn't take too much effort. 00:06:59.140 --> 00:07:03.380 Secondly, it should allow the page owner to effectively communicate what they want 00:07:03.380 --> 00:07:06.980 whether it is who they are or what the latest addition to the collection is. 00:07:06.980 --> 00:07:12.720 So, there's two sides of the coin, but they both revolve around seeing what you need to see to achieve a goal. 00:07:12.720 --> 00:07:17.520 Let's take a look at an example of a page that *doesn't* use visual hierarchy to achieve these results. 00:07:17.520 --> 00:07:20.200 It's actually a newspaper page from many years ago. 00:07:20.200 --> 00:07:23.770 Notice how all visual elements seem to be *equally important*. 00:07:23.770 --> 00:07:25.780 This was very common back in the day. 00:07:25.780 --> 00:07:31.140 But now, we're used to having things displayed in a much more *supportive* way. 00:07:31.140 --> 00:07:35.750 Now, take this example. Here, some blocks of content instantly stand out to you 00:07:35.750 --> 00:07:38.520 and some seem to be more in the background. 00:07:38.520 --> 00:07:42.780 I imagine that if you're looking for a specific piece of information, 00:07:42.780 --> 00:07:48.360 this newspaper will help you do that much faster than the previous one. 00:07:48.360 --> 00:07:53.780 The designers of this page have played with visual elements to make some bits stand out more than others. 00:07:53.780 --> 00:07:58.240 Can you identify what design decisions they've made to achieve this? 00:07:58.240 --> 00:08:01.240 First, they've played with *size*. 00:08:01.240 --> 00:08:06.720 Take a moment to see all of the different sizes they used to create hierarchy in the content. 00:08:06.720 --> 00:08:09.740 They also used *color* to make some text stand out more than others. 00:08:09.740 --> 00:08:11.700 Do you see how they did that? 00:08:11.700 --> 00:08:16.000 Let's have a closer look at how this works in the next slide. 00:08:16.000 --> 00:08:19.600 Visual hierarchy is all about *setting priorities*. 00:08:19.600 --> 00:08:22.960 What do you want people to see first, while they're merely glancing over your design? 00:08:22.960 --> 00:08:25.860 And then, when they *like* what they see, people will start *skimming*. 00:08:25.860 --> 00:08:28.797 This will make another level of the hierarchy stand out to them. 00:08:28.797 --> 00:08:33.299 This is often a bit smaller with less energizing colors or less contrast in the background 00:08:33.299 --> 00:08:36.199 like the second line of gray text you see in this image. 00:08:36.200 --> 00:08:39.750 Only when people *consciously* take the time to start reading the text will text that is 00:08:39.750 --> 00:08:42.860 thinner, smaller and less contrasted be noticed. 00:08:42.860 --> 00:08:47.700 Now, where it becomes fun for you as a designer is when you start playing with these visual elements 00:08:47.700 --> 00:08:50.060 to attract attention to the right places. 00:08:50.060 --> 00:08:55.440 Using an *anomaly* to the standard visual hierarchy of a page layout, like the bullet text in this example, 00:08:55.440 --> 00:08:58.800 will give you control over the users' path of attention. 00:08:58.800 --> 00:09:01.980 It really draws the eye of the user to this text. 00:09:01.980 --> 00:09:07.003 In this case, we say that the bold text has more *visual weight* than the regular text. 00:09:07.003 --> 00:09:13.740 Generally speaking, more visual weight attracts more attention when combined with less heavy elements. 00:09:13.740 --> 00:09:16.690 Let's have a look at some examples of visual frameworks to see if 00:09:16.690 --> 00:09:20.220 we can recognize how the designers have used visual hierarchy. 00:09:20.220 --> 00:09:24.080 Here, we're looking at a screenshot from the Dropbox website. 00:09:24.080 --> 00:09:28.980 Some visual hierarchy is achieved by making the heading bigger or bolder than the remaining text and by 00:09:28.980 --> 00:09:36.760 using blue as a contrast color. But all in all, I think this is rather a flat design without big differences in visual weight. 00:09:36.760 --> 00:09:41.180 When we turn to this example, which is comparable in that it shows a pricing scheme for 00:09:41.180 --> 00:09:45.580 cloud-based storage subscriptions, we see that a stronger visual hierarchy is used. 00:09:45.580 --> 00:09:50.020 The most popular pricing option stands out more, not just because it's labeled "most popular", 00:09:50.020 --> 00:09:55.340 but also because the most popular option seems to burst out of the visual structure that the others abide by. 00:09:55.340 --> 00:09:57.740 To achieve this, the designs have used brighter colors 00:09:57.740 --> 00:10:00.920 and they allow the best option to take up more space in the layout of the page. 00:10:00.920 --> 00:10:06.320 And as you can see, they do this *consistently* as it's not just the boxed area at the top of the page 00:10:06.320 --> 00:10:11.740 but also the features description which seems to grow heavier for each step it takes. 00:10:11.740 --> 00:10:15.080 The previous examples were both based on visual frameworks that depend heavily on 00:10:15.080 --> 00:10:18.400 a white background and fairly minimalist text options. 00:10:18.400 --> 00:10:21.240 Here, we take a different turn 00:10:21.240 --> 00:10:25.660 and show you an example that uses many more images and colors to present the content. 00:10:25.660 --> 00:10:30.840 A visual framework is implemented with a top navigation bar, a large area to showcase highlighted talks 00:10:30.840 --> 00:10:35.140 and a row system with room for six talks per category. 00:10:35.140 --> 00:10:39.280 The visual hierarchy that is used to support this framework uses *size* 00:10:39.280 --> 00:10:41.829 – so, the biggest talk is perceived as the most important, 00:10:41.829 --> 00:10:45.840 especially since the title of this talk has the biggest font size – 00:10:45.840 --> 00:10:47.980 and *contrast*. 00:10:47.980 --> 00:10:51.660 The two other talks in the talk area really stand out from the background, 00:10:51.660 --> 00:10:54.040 making it look quite important as well. 00:10:54.040 --> 00:10:59.080 Since most users will visit this website to browse for interesting talks to watch and to get inspired, 00:10:59.080 --> 00:11:02.940 it's perfectly fine to have size and contrast *competing* with each other. 00:11:02.940 --> 00:11:07.840 When users would visit a website with a *single purpose*, you might want to combine size and contrast 00:11:07.840 --> 00:11:11.100 to give a certain element *all* of the visual weight. 00:11:11.100 --> 00:11:13.960 Now, let's analyze this example together. 00:11:13.960 --> 00:11:18.260 Which element is the highest in the visual hierarchy and what stands out to you first? 00:11:18.260 --> 00:11:21.120 In this case, it's a combination of contrast and color. 00:11:21.120 --> 00:11:24.940 The block of content on the top-left side has the most visual weight. 00:11:24.940 --> 00:11:28.400 So, what is then the element *lowest* in the hierarchy in the screenshot and 00:11:28.400 --> 00:11:33.340 what has the lowest visual weight is in that respect the absolute opposite of the heavy black-and-yellow box 00:11:33.340 --> 00:11:37.940 in my opinion is the category bar that says "Entertainment, Products, People, Fashion, Music" and so on. 00:11:37.940 --> 00:11:42.840 It has a small font size and is grey on a white background. It attracts the least attention. 00:11:42.840 --> 00:11:48.800 In this video, we had a look at a very powerful way to create consistency in your designs: the visual framework. 00:11:48.800 --> 00:11:52.560 We've seen that consistency helps users to find their way on a website or application 00:11:52.560 --> 00:11:54.620 and increases the usability. 00:11:54.620 --> 00:11:58.090 To create a good visual framework, you need to determine all of the elements that you need to 00:11:58.090 --> 00:12:01.040 place on the page and find the right location for them. 00:12:01.040 --> 00:12:05.290 You can start out by drawing wireframes that focus on the placement before continuing with the 00:12:05.290 --> 00:12:10.780 style guide, which also describes the colors and fonts that need to be used consistently. 00:12:10.780 --> 00:12:14.960 When a visual framework is well documented, it helps future designers to 00:12:14.960 --> 00:12:18.180 continue the look and feel in new pages or products. 00:12:18.180 --> 00:12:22.140 A good visual framework also takes into account the visual hierarchy of a page. 00:12:22.150 --> 00:12:27.300 By using colors and sizes, you can give certain elements on a page more visual weight than others 00:12:27.300 --> 00:12:32.500 – which makes them attract more attention and appear more important. 00:12:32.500 --> 00:12:37.360 The visual framework and visual hierarchy give you as a designer great input 00:12:37.360 --> 00:12:40.300 to play around and have some fun with visual elements 00:12:40.300 --> 00:12:45.340 while ensuring that you create high-quality designs.