 Hello, everyone. Today I'm going to be talking about the principles of content layout. So I'm going to talk about some historical roles of layout and different things that you can do with your content to improve the readability for users and direct people to where you would like them to go. And I am Emily Nouveau, Diane Nova on Drupal.org, Twitter, everywhere. And I'm involved in the Layout Initiative in Drupal. And I got my start in both Drupal and Layout at the same time when I was a college student and worked as the Layout Editor for our university paper. And also began looking for solutions for our university paper website. And since then I've worked for different newspapers and worked on the Layout Initiative for Drupal to build out the Layout Builder that's now in Drupal 8. So sometimes content editors don't think of themselves as designers. And I'd like to say that most content editors are also designers and that you are creating content for someone to read and you need to be aware of every way in which that communicates. And part of that is also design, not just the words that are on the page and not just the images that are on the page, but how everything comes together. So here's a quote, how well we communicate is determined not by how well we say things, but by how well we are understood. And that's why design is important. People notice bad design. And inattentive design is bad design. So if you aren't paying attention to the things that you're doing, then it's just going to be bad as an end result. So here are some principles that are helpful to remember when working on your content and the resulting design and layout. So I'm going to go over each of these and give some historical examples of how they've been applied and then show a modern example of how that works on the web. So the first one is keep it simple. So you want to let your content breathe. So this is the album of Eight Leaves. And you can see that the writing is on the left. And you have plenty of white space between that and the imagery on the right. And you want to think of that whenever you're laying out your content. You want white space that lets the content that people are reading breathe and gives room so that they can really focus. This is a children's poetry book from the 1800s. And this shows white space but also shows repeating patterns. And patterns are helpful for readers to understand what they should be looking at. So if they have a pattern that can move them forward from the text to the imagery and then back again. So then don't overthink it. Sometimes the simplest layout and content design is just exactly what you think it would be. You don't have to complicate things. You can just put one little imagery to convey the important concept. So medium is a good example of a website that keeps it simple. They let things breathe. There's plenty of white space. They let the imagery stand on its own. They repeat patterns. And you can see that everything feels peaceful when looking at there. So the second principle, know your hierarchy. So if you have more important content, then make sure that you're considering the whole page in light of that. So if you start to get bogged down and making sure that you get everything that you want on the page, you don't necessarily accomplish your most important goals. And so it's important when you're working on any bit of content and layout to have in mind the main goal that you have. And we'll walk through some of these later how you can say, OK, this is my most important goal, then a secondary goal and tertiary goal. But you always want to know what you're trying to accomplish with any piece of content. And that's your hierarchy. So to successfully accomplish that, you can use your grid. So hopefully you have a grid. And knowing the ins and outs of it will help you. Because you can just fall back onto that grid at the end. You don't have to really think too hard about what you're doing if you can use your grid effectively. And also, you'll want to scale your content if you have your most important content. And it should be the thing that people are immediately drawn to on your page. So in this case, the World Geographic Atlas, they scaled the planets appropriately. And you can see the sun is really what draws your eye. And that pulls you in. And so if you have content that's very important, that can be the thing that pulls people in. And then you can use it in the same way that this does to lead people to the secondary content. So in this case, the sun pulls you in. And then that draws you in to seeing the secondary content as well. And make sure that everything is in its appropriate place. So in this case, this is a papyrus example from Egypt where they have this secondary bar that runs across many manuscripts. And that is kind of secondary content, the main content. And the reader knows where to expect that. It's always in the same place on every different manuscript. And so they know, OK, I will look at this secondary area if I'm looking for that content. So my most important content is in this main space. So being consistent and keeping everything in its place is an important thing to do for your layout. And so the New York Times effectively uses hierarchy by drawing attention to the center with the only space that really has color, that has depth. They draw immediate attention to their video. And they have their smaller articles with just the headlines. They have an effective hierarchy. There's a lot of thought that's gone into the hierarchy on this page, and you can see that. So the third principle, use symmetry. So symmetry is appealing to people. It's a comforting bit of structure and support. When people see something that's symmetrical, they feel calmer. They feel like they know what to expect. And so if you want to give people a sense of security and safety in a bit of content, then symmetry is helpful. Repetitiveness is helpful for calming. And if you want to really draw attention to something, that's when you can break away from the repetitiveness. So if you want to draw more attention to something, then you could have most of your content be more symmetrical. And the one component that isn't is going to draw people's eye. Symmetry is simple. And that helps people navigate through your site. So if you have a simple layout, then people will know what to expect and know where to go. And symmetry is a plan. So if you are not sure what you're doing, symmetry is a good plan to fall back on. And so this is an example where you just have the four column simple layout on mangaDB.com. And you know to expect each of these components. And it's used elsewhere throughout the site. So you have these little pieces of content. And you know that it will be consistent. And you can hop from one to the other easily. And then you should highlight differences. So if you have, say, an older building and you want to bring in something new, instead of trying to build something that matches that, you might build something that's completely different and in a completely different style. And people will appreciate that more than something that looks similar to what they were expecting that was nice. But not quite, say, good enough or not quite the same. If it looks like if you're using a certain font and you find something that's similar but not quite the same, that will bother people. Because something just seems a little off. But if you use a font that's very different, then it looks intentional and that's understandable. So you can use a different size. But make sure that it really stands out as a different size, that it's not just one or two points different. So in this case, the eye is drawn through the whole text, through this eye that goes next to it. And the text at the beginning is much larger. You can use a different color. And you'll want to use a very different color to highlight. It's not something close, but something that really stands out. And you can also use a different form. So that could be a different shape. That could be a different texture. That can be, if you mostly have text, that could even be adding some imagery in. That can be a different form to draw people's eye. And you want to be careful about how you use those differences to really focus in one place. So here, the difference of the video is also conveyed by it expanding past the text. And including these shapes that aren't used elsewhere in the content and color where the rest of the content is black and white. And so those differences really pull the reader in. And then finally, you can direct the eye. So it's helpful to direct your reader towards what they expect to be interesting. And there are certain clues that tell people that a certain area might be interesting to them. So eyes follow arrows. That's what we expect arrows to be for. So if you see an arrow and a bit of content like in Euclid's geometry here, you are directed to the right-hand content because you see these kind of arrow forms on the left. And you expect that you should look at the content to the right. And so an arrow, in this case, doesn't have to be an incredibly explicit arrow. But it's kind of a vague arrow shape. And that points people towards things. And you can use motion in the same way. And so eyes follow motion. So if we see that something is moving a certain way, it's kind of an innate human feeling that if something is moving a certain way, we should find out why, and we should follow it. And so in this example, you can see the birds moving across the page, and it directs the eye in that direction. And so if you have a page on the right, it's going to direct the reader to the right. And eyes follow eyes. So if you have content with photos of people and they're looking in a certain direction, people will be inclined to look in the direction that that person is looking. So in this case, you have the saint looking to the right. And then you have the moon looking down into the left. And then the people in the bottom left looking to the right. And then finally, it closes with the last person looking back to the left. And so this forms this composition that moves people's eyes along to each of the box. So if you want someone to say, look at your text on the right, then you can have a photo on the left that has a person looking to the right. And people will be more inclined to look to the right and read that content. And so this is an example of a photo looking to the right. And it's better to have that photo of the person looking to the right and looking at content that way to keep them focused on your page rather than looking to the left and off of the screen. So in summary, the five principles keep it simple. Know your hierarchy, use symmetry, highlight differences, and direct the eye. So we're going to hide some of those together and build out a page layout. And so to start, we have a couple of reference point landing pages. So we know that on this website, these other pages already exist. And we want to create a third page using some of the patterns used in these other pages. So in this case, this is a landing page on this site. And you can see that there's a pattern of a full width header. So we want to repeat patterns to keep things simple for people. And you can see that there's a highlight, a call to action with a bright color. So it's using color to pull people into the main thing that you want people to be interested in on that page. So in this case, you want everyone to be interested in this recipe. In our landing page that we're about to build, we may have a different goal. So we'll want to use the same pattern, but for our own goal. And then it has a symmetrical four column grid. And so that's something that we can consider when we're building out our page. Then for our second reference page, we have a featured recipe. And this is secondary content that we may want to direct people to through our landing page. So we may want to follow some of the same patterns that are in use here. So this has a large recipe image to focus the eye on to the most appetizing content and hopefully encourage them to create the recipe that's on this page and find it appealing. It has secondary images that are smaller because that's not the main goal of the page. So we can keep those in mind. So our goals for our landing page are to increase the interest in the newsletter, highlight our featured recipe, and direct readers to some other new content in that order. Since we know that our main goal is to direct people to our newsletter, that's going to fill our top space. And that's going to have the deepest color to pull people in. And it's going to contrast with most of the rest of the site, which is much lighter. So that contrast creates that difference that will pull people's interest in. And we're going to use the same pattern of the call to action that's a different color that's used on the other landing page. And we're going to use that same four column grid, except we're going to mix it up a little bit to create a difference to highlight our larger featured recipe. So we're going to make this use two of those four columns. And then we'll have the smaller secondary stories that were our third goal of the page. So in our hierarchy, these are the least important. And so they're going to be to the right and more out of the way. So putting it all together, this is how you would build out this page in Drupal 8 using Layout Builder. So going to add a landing page, this opens up Layout Builder. And you can add a section, which is essentially a row on the page. And we're going to start with the first content that came to mind. So we're going to add a three column section, which we have for the featured article and the secondary articles. And so this is going to give us our columns. And we're going to then add the content into each of these. And so adding a block. So here you have the search on the right-hand side where you can type in tags for the content. And then select the relevant content for you. And this is based on the Layout Builder that's currently in Drupal 8. And everything that you see in here is planned for 8.6. So then we're going to add our next bit of content. Same with the library. You can search. It's also going to be able to be used for creating new content. So you could create the new content in line for the article and then add it in. And then we're going to finally add our third piece. And so the nice part about sections is that it's really easy to reuse different layouts that you have and use them throughout your sites that you can easily build out your hierarchies or your symmetrical layouts. And we're going to add the remaining newsletter section. And that's going to be a single column section that goes full width. We've added it below as we're building it out. But the nice part about Layout Builder is that after you've added different sections, you can move them around. And so in this case, we can then move it back to the top after we've added it. And if you ended up deciding that your goals were changing for this content, then you could decide that your newsletter is now secondary importance, and you may move it down in the hierarchy and you don't have to create a new page for that. So here, when you click on the section, you'll see that you have a bar for moving to make it easy for you to move the content. Now we have our newsletter at the top. And we're going to add one final bit of interest to our featured content to make it stand out. And so that's accomplished by using settings on the block itself. So scrolling down to that. And the gear will take you to any extra settings for that content, which will open up in the right. And in this case, the extra settings that we have available are styles. And so we will change this from a plain style to a green. Now we have our page built out. So we just need to go to the top and save it. So we followed our patterns for our site. We have our full width header to draw someone's eye in. And then if they're interested in further content, we have featured our recipe. And we have our secondary recipes and features on the page. So that was building out a page and creating it in Layout Builder. And now I'm just wondering if anyone has any questions. Taking over the main content area is available. Right now there is not control of the header and footer regions or things like that, but main content. So those are blocks. That are content blocks, essentially inline content blocks. Going back to some of the principles, are there rules of thumb that guide us in a direction of choosing odd or even numbers of things, especially in columns like the sort of card display 3 versus 4? Yes. So any odd number is going to feel more dynamic and even numbers are going to feel more stable. So if you want a sense of stability for people, then you would use an even number and odd numbers will feel more exciting. So right now you can create a default layout for a certain content type. But if you have multiple kind of variants for content type, then that's something that's in the works. So that doesn't exist right now, but we have it in the plan. This might be a little bit outside scope, but going back to some of the principles of layout, you seem to be mostly focusing on a particular page and the content of that page. Do you have any examples or any comments on applying those layout principles to the navigation of the site or the structural elements of the site? I think some of the same rules can apply, keeping things clear and simple. You want fewer items in your navigation. A good role of thumb is to not have more than five items in your navigation. But this is mostly for content layout. I think for some inspiration in overall design, there's a book called Meg's Graphic Design History. That one is a wellspring of ideas for overall design history, if that's what you'd like. But that's mostly before web design. There are a bunch of different sites I use for looking at different websites, but none of them are springing to mind at the moment. You'll find that the more you start paying attention to design, the more you'll really see it everywhere. It's really fun to actually start noticing these things the more you start looking at them. Sure. I think in Facebook and Twitter, there are more tools, like applications. I think this is more useful if you're working on content and you're trying to get someone to really spend a lot of time reading and getting excited about the words that you have on the page. Each of those areas that had content can also be dynamic content. You could have a view there that showed the newest content coming in, and it can exist in the same place that you would have had a recipe. Yup, a view block. I think keeping the same principles in mind works. I think you'll probably have less use of symmetry because you don't have much space, but you'll have still ample use of white space. You still want to make things bolder if you want to draw someone's eye to them. So I think a lot of the same principles apply, but it definitely is harder for the phone. Yup, yup, so all of the columns that exist in Core, they automatically resize. So right now those columns for each row, they condense down on top of each other. So if you have three in one row, then the three will be on top of each other, and then the next section will be below that. But people are talking about what we could do to allow people to specify different layouts per different responsive breakpoints. So I think it depends on how it's done. It can feel to a person reading a bit like a person poking them, so it will draw the attention, but it might also irritate a reader, and so it kind of depends on how much you want to poke your reader while they're reading. Well, if no one else has any questions, I will let everyone go and get to dinner and things early because I know that's always a thing at DrupalCon.