Layout Design Theory - Create Strong Designs

1. Class Preview: layout is the force that holds everything together in a cohesive design. Without a solid understanding of layout, a designer may never know how to block out a design, manage more than one design element of the time, or create a thematic piece that somehow feels like those elements have always fit together . In this class will extensively go over layout for graphic design. Who will review blocking the grid system and will review several examples of great layout design. We will touch on how to design for multiple panels or pages and have a unifying theme throughout. And of course, we'll go over the all important editorial design and layout. Lastly, I will cover UX design and how that plays a part in the overall experience when someone views your design piece. Because great layout design is for both digital and print mediums, including websites. This is a theory course, so no software is required to take the course just your willingness to learn. I encourage anyone who is interested in learning how to use layout to elevate your designs to the professional level to take this course. So let's learn together 2. Layout + Design: lay out and design. What is the experience when you view a design piece? Are you overwhelmed over joyed excited, calmed may be turned off are not sure what to make of it. Often, the layout of design makes the first impression on the viewer. It can decide whether designs worth exploring more for a few additional precious seconds, or whether it should be ignored completely. As a person in charge of communicating a large amount of information to the viewer, your job is to organize it in the manageable, digestible way. You could prioritize certain parts of the layout simply by its position and composition of elements. Do we want a Prioritize the photo? Are we selling a product then? Yes, the photo might become the mainstay of the design. Do we want to deliver a strong stop in your tracks? Message, maybe with a straightforward call to action than the way we lay out. Our type. Without photos might make that message more clear. We see bad examples of lay out all the time. These mostly consists of poorly place photos. Too many photos are awkward, photo cropping, thes bad Examples can also include too much information for the viewer to read, often discouraging them from reading more. What we need to do is entice and lead the viewer on a journey through our design in a planned order. Take, for example, this concert flyer. We want to set the mood and tone for the peace by having the right photo. We also want the photo to be the first thing they see. Next, the band name would be pretty important. So this needs to be the next thing in the priority list in terms of layout. There is no point in the viewer reading this fire if they cannot attend on the concert date . So having that be the next prominent item in the layout is key and showing them what they want to see. So they say, Where do I buy tickets? Let's see right after the date. There is key information there. It is easy to find two. Because of the highlighted box. There is some smaller text that is not so important, but they can still find and read it if they are still missing. Information they're curious about. Layout can communicate emotions just like photos and typography. Having a layout that is uniform and rigid with perfect alignment can communicate a sense of professionalism, cleanliness and tidiness. Perfect for a professional organization or bang, for example, white spaces. The spacing between elements having a large amount of white space can continue this feeling of openness and express a feeling of calm. White space that is tied can spark emotions of anxiety or entice of sense of anger. Urgency. It generally does not work to have a little white space to run your elements. Take, for instance, is graphic. With enough white space, the design has a chance to breathe. It just feels much better when I see a design work that needs to be tweaked to revised most of the time. It's because there's not enough white space or breathing room around the margins of the peace or the outer edges and print design. It's always safe to keep text and important information inside the margin area that goes around a given design peace not only for it to be printed properly before to feel clean and professional. The balance or overall composition of the design is very important and maintaining these emotional responses if the balance of a design is off, it may not evoke your desired response, and that's why it's important to maintain the right balance between photos, type and other design elements. This is known as composition. Take, for example, this poster design. The layout contains five photos and a few lines of type, but I seem a little bit lost trying to find the focal point of the design. Where should my I look? Where should it focus? Which photo is more important, it seems to lack a sense of purpose and meaning and seems disorganized. But with a few tweaks, we can change the design from confusing too simple and striking. With one or two photos, we can change the entire feeling of the design. Now. It's simple, precise, with a clear focal point. It communicates a clear message without overwhelming the viewer. Focal point is an important aspect in the layout of a design maintain one clear focal point . Having two competing focal points makes it hard to digest the information as the viewer does not know which focal point to draw their eye on first. So what makes an effective lay out? How do I know when to make a simple layout simple or complex? How do I know which of motioning to look? We're going to discover that the next lesson, so stay tuned. 3. Effective Layout: the good, the bad and the awful. Sometimes it's easier to learn designed by studying why bad examples or bad than looking at good design? Sometimes. But why is this? Because when we sit down in front of a bad layout or design, we start to discover what we don't like about it. This, in turn, helps us find out what not to do in her own designs. We started developed a viewer empathy. I'm gonna take this disordered, lay out and let you look at it for one minute after viewing it for a little while. What suggestions do you have to make it better? From your perspective, having empathy toward the viewer is highly sought out trait. In a designer, there is a science beyond good layout and look over some of those techniques in the next lesson, like using grids and the golden ratio. But there's also a feeling that you develop on whether layout works or not, and being able to hone that ability. It takes time, and it takes practice, trying out and experimenting with lots of different layout options. For a typical client project, I might develop two or three totally different layouts. I'll then pick to layouts that I think have the strongest potential and send that to the client for review. Giving yourself and the client different layout options helps to spark new ideas. Sometimes the layout that's chosen by the client is one of the later layouts that I developed. After spending an hour or two with the design, it takes time to work out where elements should go. It's a complex puzzle. In your job is to place all the pieces together in the most compelling manner, while still maintaining readability and delivering information. That is the art of design, not the science. So let's take our bad example of the layout design and make it better. First of all, the three dinner courses air divided in this layout, we want to make sure everything that could be grouped together in a logical fashion is grouped together. Also, there's just too much information going on here, and I'm not sure where my I should focus. This needs a clear focal point. Perhaps the use of a photo may help here if we can organize the Texan a better layout and may leave us more room for a photo and right Now there's zero room, the font choices air all over the place, and I don't mind having a San Serif on The Sarah fought in the same design, but these seem to be random and haphazardly chosen. The join us and the fourth to remember lines seem to be competing with each other. I think join us may not need to be, is large and could be a bit smaller, maybe even a part of the four to remember phrasing. So combining those two into one headline and making join us smaller will really help clean this up and give us more room for a photo. The social media icons are an eyesore here. Everyone knows companies have a Facebook page, or at least they should. So let's make the social icons on the same line with the other contact info and make them much smaller. Anyway, we can reduce the focus on so many different elements the better. The dividing bar here does not seem to be doing too much as it's already a solid blue box dividing these content columns, so removing extra stuff like this will be critical to simplifying the design. There's no type hierarchy, no single headliner area of body copy. So we need to make sure we add some type hierarchy while we redo the layout of the poster to add a nice sense of structure. And lastly, there's too many stars competing with the other layout elements. Let's reduce the amount of stars but still have some remaining to go with our Fourth of July theme. Now that we adjust her lay out quite a bit, let's see how the changes have affected the final result. First of all, the courses air Now in Order and Reedus such notice the newly added type hierarchy There is now larger font size for the course number and even smaller size for the course name and the smallest but still readable size for the course descriptions. I noticed the dividing lines between the three courses. This helps break up that large single blue box into different sections. Also notice how the lines air not too thick or too white to take away from the text elements around it. The combining of the two original headlines into one has really helped us give us room for a photo, but has also made those elements the main focal point of the design instead of having so many different focal points. Lastly, the contact and social media icons are all together in one line, making them visible but not taking away from the main theme and call the action of the design. 4. Introduction To Grids: Oh, Grid's air amazing guides for designers, and they can come in many different shapes and sizes. They allow us to set up even spacing between elements. Take, for instance, he's three boxes lining them up with my I I can get kind of close, but lighting it up on the grid system really helps make them look concise and structure. Humans love order. It's oddly satisfying. There are thousands of videos on YouTube that show this is a real reality. There are countless memes and videos on YouTube that outlined the fact there's just one thing of out of order. It just shakes us to the core disorder does not seem to resonate or provide a sense of balance, which we humans often create because their own disordered lives. So how can I, as a designer, help provide this wonderful sense of balance structure and satisfy this craving for perfection? Will grids, Of course I do often what is called blocking. When I try to find the right layout for design, I will turn content into blocks. Then I will roughly arrange those on a canvas of the right size. Take, for instance, is poster. I need to have three blocks of information, each with its own header. I also need to have a website and a call to action somewhere toward the bottom. Most of this content I received from a client, so it's required information that cannot be changed. It's my job to show this all in some sort of nice and pleasing order and structure. I also need to be able to entice people to read this content. I'm going to need a larger headline type, perhaps a photo to I place this rough blocked out design on the grid, and I start to play around with spacing. I make sure there's even spacing between the two columns of information. Also, make sure certain spacing it's consistent throughout the design, including similar spacing between the elements of design. You could see what it looks like before and after the after looks much better, thanks to being able to block this out, using grids and blocking out my design. First blocking is such a helpful tool when creating your layouts. There's also something called the golden ratio in layout design. The golden ratio will be talked about a little bit later in this course in more detail but it's the ratio of 0.6182 point 382 meaning if I had a one inch or one centimeter square and I applied their golden ratio to it, the top portion will be 0.618 and the bottom 0.382 inches centimeters. Whatever measurement you want to use or I can flip these blocks around as long as it maintains that ratio of division, the golden ratio is naturally pleasing to the eye, and it could be seen and echoed throughout nature. Take, for instance, this layout if we apply the golden ratio made the top portion of the design with the photography and headline 0.618 of the total height of the design and the bottom portion 0.38 to the height of the total design. It seems to be a natural and pleasing balance of elements. We could take this a step further still on Replicator ratio to create the classic spiral you see when you Google or research the golden ratio. The spiral is made up of larger and larger rectangles containing the same ratio. We can apply the golden ratio spiral toe layout, designs and place our focal points in our designs and the more densely populated parts of the spiral, the inner spiral portion, and leave less important stuff toward the outside of the spiral. The golden ratio applied. The layout design is pretty neat to study. It's something I use a little less often in my practical real world projects. But I wanted to show you this so you can have just another tool you can use and basis for understanding of why certain layouts work over others. 5. The Guide To Grids: this lesson is dedicated to going into more detail about using grids in layout design. You can download the 11 page grid guide. Pdf resource that contains all of the content will be going over in this lesson and more. Let's first talk about the basic anatomy of a layout grid. First of all, margin. It's the thick border that runs along the outside of a greater document. Wider margins provide more breathing room for edges, bins and folds and provides a nice white space for the overall content. Columns run vertically downwards from the top of the margin to the bottom. These were very helpful and magazine and editorial layouts to find placements for paragraphs. Headlines and text rose contain the areas that run horizontally across the page gutters or areas between the columns and rows. It is nice to keep these the same with throughout to maintain consistency in your design. A more less known term flow lines, flow lines or lines that run horizontally across the grid, and they can help the reader follow. Content. Modules are the boxes or areas created by the vertical and horizontal lines of the grid. You can have big module boxes and have a big loose, open grid. Or it can have very tight module boxes and have a lot of them and have a very tight grid. Spatial zones consist of several modules to create blocks and content areas to give you a guide on placing photos and blocks of text. This could be large or small, depending on the content, so grids come in many different varieties and flavors and will review four of the most popular grid categories. A manuscript grid is great for books and long, continuous placement of text. Manuscript layouts consist of one centre block that divides up the page and creates a clear margin and text area header and footer. This is the most basic form of a grid, and it's found in many word processing documents as basic guides for creating margins. Column Grids are perfect for magazine layouts and spreads, or anything that has a mixture of photos, quotes and text column Grids allow you to create places to break up the type and photos. These could be 234 or even 12 columns, depending on the complexity of your layout. Modular grids The most flexible grid available. Modular grids allow for lots of mixing of type photos and design elements. You can have a lot of variety with which modules air chosen for element placement, these air great for posters and fliers, magazine covers and designs that require more creative arrangements. They can even be used for arranging a list of items and photos that need the same spacing or have the same order. Hi arterial grids. These air mostly used for the Web where fixed grid layouts will not work. The gutters and margins can change in size throughout, depending on the space of the browser. Higher career old comes from the word hierarchy, meaning order. These grids follow in order of importance, with the most important items larger and toward the top, with less important items further below and smaller a perfect fit for a website layout or mobile app design, where the most important items need to be shown higher in the layout. So what are some tips and tricks to properly using a grid and layout design? Well, first of all, headlines use grids to find placement for headlines and design elements. Also make sure to use the margin. Remember to feel free to extend unimportant items off the margins, like parts of photos and non text design elements. This will help the peace feel a little less boxy and feel more alive and make sure that vital tech stays out of the margin. Remember, you can go vertical, and you can go vertical with text to add contrast with other horizontal elements, and you can use the grid as a guide for placement. You can break up large bodies of text. Try adding a quote to break up large text areas. You can also use more contrast to your type by creating smaller headlines at the start of these larger areas and use the grid to find the right placements. Feel free to play around with overlapping elements. Another way to break up a boxy layout is to overlap elements using the grid like this quote box, overlapping the yellow photo. And remember, layout design extends to digital stuff as well, including Social Media Post. So this is a simple social media graphic, and it's a simple modular grid with some margins. I'm using the grid not only to find out where to place the elements, but where to frame certain parts. The elements, like the central part of this logo or the person's face, as seen in this example and beyond. Layout design grids can be applied when you're doing low. Good sign, and we'll be doing lots of this later in the course and in future lessons. It can help you find the right spacing between the symbol and the text. It can help you find the right balance between the text and the symbol, and grits can also be used in branding. Wider margins can create an elegant, ample whitespace, giving the design a very modern, structured look. And grids can be used for brand materials to make sure there's consistent spacing throughout. It could also help with placement and spacing between text and elements. And since we're talking about how to use grids in all aspects of design, we can ignore Web design and grids for Web above. You'll see a classic 12 column grid layout with a small gutter in between each column. This is traditionally seen and desktop website layouts, and this grid is a default grid and the adobe app called Adobe X'd, which is commonly used for website and mobile app, layout design and a slowly replacing Photoshopped as the app of choice. For this task to the left, you'll see a common four grid layout for a mobile APP design. These columns can help guide placement of the beginning and ends of elements, photos and even buttons. They can even assist in helping you know the placement of multiple columns of information like in this example to the right. Remember that grids can be turned diagonally. Who says grids have to be perfect left, right up and down? What about turning him diagonally and creating an interesting spin on the grid? I'll have several lessons later on editorial design layouts, but you can also use it when creating these layouts. Not only do they help keep both sides of the spread of a magazine article, for example, cohesive, they also help keep even spaces between the gutters and provide a professional organization of large amounts of information. Lastly, remember, grids are not a requirement for having a strong layout design, but they can really be helpful in guiding your layout decisions. Make sure to download the grid guy to see helpful examples of grids and action. The projects we work on later will use grids of all types for logo design and layout design . And yes, they'll even be projects that break the grid are not used. The griddle. Remember, these are all just tools to help you make design decisions, but the best decision maker of all is you. 6. Design Theme: So far, we've talked mostly about one side to design pieces. Ah, Flyer, A poster of Social Media Post. But what about a design piece that has different sides? Panels? What about a design for a front and back of a T shirt? We cannot see both sides of the same time. It is essential to have a unifying theme throughout your design piece. Even when that transcend sides or exist on multiple panels, Try folds are great examples to use here. The trifled has a color and design theme on the front that we can carry through on her layout on the inside. This is also a theme we can apply to the back of the trifled as well. It feels like one unified design piece that has consistency and branding throughout. These banner seemed to flow together, even though they do not have the same photo or lay out their consistent and the design style and do not feel like two separate design pieces. But actus, one unifying theme booklet, brochure and flip book designs of the same way you went, the cover and the inside spreads to all look like one design noticed the same bonds used throughout, this piece noticed the same color scheme used in different creative ways. Notice how the cropping of the photos is similar. Notice that there's a bar across the top that maintains a theme throughout the different spreads is the header. If the design is for a client, they will demand this consistency in your designs, especially when it comes to sticking with branding guidelines or requirements. They may require certain fonts to be used, and they may request you to use a certain design element or a color scheme throughout, creating themes across panels and editorial spreads, brochures and layouts. And something will dive into in the next lesson while you get to sit alongside me, creating one for a health magazine, so stay tuned for more. 7. Editorial Spread Design: editorial spreads or big, bold and beautiful. If you ever wanted to see wonderful examples of type higher and blocking of elements, take a look at your local magazine rack their use of white space to their big, bold photography. Editorial design principles can easily be adapted into digital designs and websites, so learning the art of editorial layout design is essential for any aspiring designer. Today. I'm gonna be an end designed to create an editorial spread for a client. I wanted to show you the process of blocking inaction and a little more detail, and showing you an editorial design is a great way to show you that. So let's get started. You will notice I'm using the grid system. When I start to think about this layout, it helps guide me toward places I could put content. Content placement is not random. There's a rhyme and a reason for each placement. In this layout, I'll have three columns of information, each with its own photo and title line. The amount of content will be about this length. I place filler text in the column so it can play around with spacing to see how much room that text will take up in the overall design. With all of this information I am having toward the bottom, I'm wanting to need to Thais and draw in the viewer to read my content. The best way to do that is a nice eye catching headline and perhaps a photo to as long as the photo adds to the theme and does not make the design look too cluttered. I am adding a black background to match the darker background photo. I selected this. You also help me use color as the tension drawing element in my headline, as colors tend a pop out much stronger on darker backgrounds. This does mean I need to switch my body copy from black to white text toe. Add enough readability, in contrast to that that typography and type the headline placement and font choices, or where you should spend most of your time finding the right font. Pairing takes experience and knowing what feels right and what has paired well in the past . There's also a feeling you need to batch this design with Who's your target audience here. If it's a woman that take that in consideration while making your font choices. Perhaps a softer font choice may work better here. When you have large blocks of information, it can help to have a headline or a photo to help the viewer know what type of information is being contained in that long block of copy. Also, finding the right cropping for each photo is essential. You do not want to a photo to have too much detailed or complicated information that takes away from the other main elements. Try zooming into important details the photo and said and cropping it that way. The less information would give the viewer, at one time the easier time they will have to absorb the content. When I have solid colored backgrounds that take up a large space. Sometimes I find it necessary to add a little bit of texture. This can add a richness and complexity to the design, but be careful not to overpower with a texture as it can be easily done. If you're seeking a flat, super clean design, texture may not be needed. It all depends on the desired effect and feeling that you headlines that are longer in use dividers are bars to healthy. I further breakdown wording in this case, I'm using a Ben bar in a graphic element for the top to do just that. Finding ways to make an editorial layout impactful in enticing is your main job is a designer, no matter how much information you have on there. In this case, I'm making a two tone spread with a high contrast black and white side. The key to a great layout designs balance to strike a balance between photos, text and other designers. Blocking out your design ahead of time can help you manage all of this. 8. Editorial Layout: Part 2 : I wanted to show you another layout with a little bit of a different approach. Once again, I start off by blocking out. My content for my blocks of text will go and finally, where I want to place my photo. What is great about having different panels, sides or spreads is you can break the mold and decide to bring that photo across to the next panel on, have a little fun with. Do not feel like a design has to stay on the same page. If there's a spread in this case, I'm bringing my photo across just a little bit. You could do the same of trifle designs and have photos go across multiple pages or panels to create a connected look and feel. Headline in this case is very important. It's the very title of the store you will notice. It takes a while to find the right choice and placement for the headline. Sometimes there's a need for a second, smaller photo. In this case, I'm trying out different ideas. I'm placing the circle inside the columns of copy, but it's always good to experiment. In the end, I went with another placement, but you never know if you might have a happy mistake, and they end up finding a really cool, creative placement for the type of photo. When you do that experimentation, here's the final layout. Noticed the image really takes center stage now that it's spread slightly into the other page. Also noticed. I used a background photo element toward the top to tie in the theme of herbs that the article end up talking about. The second photo does not overpower the main focal point, which would be the salmon photo on the left, so the second photo is tucked away, but it still helps tell the story of seasoning your salmon. I have also added what's called a drop cap to the first letter of the first paragraph. This helps to add something graphically interesting to break up the otherwise dull block of copy. I also made the page number the same. Fonda's My Salmon thought of the headline. This helps to tie in that look in that font. And to make this a unified design theme, notice the color of the salmon word. I brought out that color by taking an eyedropper tool and taking a sample of that pink color from the main salmon photo. This is just another way to further bring out that design theme. Notice the generous amount of white space. I want to avoid making this design look crowded. We have three total photos and a good amount of text here, so making sure there's enough space between elements will help this breathe and look more open. 9. UX Design: Website Review: UX and design. This is a big topic, and their entire careers built on just UX alone. US is short for user experience, and it's now playing the biggest part and successful Web and app designs. I also apply UX to my print designs. It's not just traditional design. That is because you X is all about the experience of viewer goes through when viewing your piece. In the digital world, there's usually a process, and the UX designer wants to make sure they have an easy, happy process that gets you to the call to action quicker and to your end goal quicker. Whether that's buying a product are signing up for an online course, It's all orchestrated. Anyone who will be doing this type of digital design work even with just designing Social media graphics will need to be aware of this process and how it works. I'm gonna take you through a few websites and the process I go through Well, my experience, be pleasant, can ified when I'm looking for quickly. If I need help, how quickly can I find the help placement design color, even your type choices for a website help to highlight areas that drive the user to their desired end goal. Right now, I'm at Airbnb dot com, and if you guys don't know what Airbnb dot com is, it's kind of a place where you can ah, book a room anywhere around the world and you rent from other users. You don't necessarily have to stay at a hotel, and it's much cheaper. So let's go ahead and get started. I'm just popping on the website for the first time, and I'm gonna talk through what I'm thinking about, um, when I'm kind of observing whether they have good UX principles or not, and how they're using type and color and composition to help drive me through the process. They want me to drive me through, which in this case, would be to book a room and have a good experience doing that. So one of the first things I noticed is instead of throwing a bunch of different separated elements out like a lot of websites, do they give me a very simple search box that I can go ahead and type in right away the location of where you want to stay, and they have this very simple sans serif font headline and it's not very long. You notice how it's only two lines long, and so they're not overwhelming me with info when I really like that. And also look at the navigation bar very simple. There's only five different selections. So the less selections that better experience because I'm not overwhelmed with options when they first arrive on here. So I'm gonna go ahead and type in London. That's where I want to stay. So let's see how, um how it does is give me some suggestions, but also a really good UX principle. So sometimes people don't know what they're looking for. So when you type in, you know, maybe the first letter, you're given some different options. So in this case, I'm gonna do London United Kingdom. I'm gonna go ahead and pop up here. And, of course, how quickly your website loads is another UX experience, and that depends on you know, your connection and everything. So this one's taking a little wild load. There we go. So it took a little longer than I'd like, but that could just be my connection. Um, so I'm gonna go here, and we have a couple notice how they have the layout here. They boxed everything out so that the kind of using some blocking techniques and they kind of helped me digest a lot of information easier by blocking things out for me. So explore London. There's homes, there's experiences, and there's restaurants has kind of given me three main options. I could scroll down here and find the different options I have. So you have a nice, big, bold, beautiful photo because, as you know, when you're looking for a room, the photo makes the big difference on whether I'm interested in checking out the room. So they've really done their research with their user experience. They found that the photos important, and I'm also able to have a cover flow or a carousel they call a secure cell. So I'm able to kind of flip through images without having to go into the next page or the detailed page. So this is what's great is I can go ahead, find out if I like the room visually first, and if I like it, I can go ahead and click further so it looks like this listing is no longer available, so that's kind of a little bit of a snag I ran into. So, you know, maybe take take those listings off. If I see that was a bad experience, not a bad experience. But I really liked it and I wanted to book it. I click on it and says it's no longer available. Well, that's kind of disappointing. So making sure all your links work and everything is taken off that that's not available. So let's click on this one. Okay, so this is the landing page for this particular section and noticed this beautiful left alignment on this left grey box. I think that looks really nice. They use a beautiful sand Sarah font. A really simple font. Um, it's kind of like a dark grey. It's beautifully laid out. So it looks like this is a some kind of plus, I guess that's, Ah, premium listing. And so it kind of has this extra logo there for me. So it's and it also shows the reviews at the very top, which is great, because that's another kind of having social proof, which is basically reviews. That's really good, very important for me to feel confident booking. This is having a good review. So nice big, beautiful photo. This is You can almost see the golden ratio even used here. See how the breakdown of the left column and the right column I can almost kind of see maybe the golden ratio is used. Um, here to make that look nice. So very simple. There's not a big long description. So you notice how they're not throwing too much information at me at one time. Just a nice photo us a nice left alignment. You'll notice some type hierarchy have kind of a bold headline. Then you have kind of, ah ah, lighter weight here and a simple learn more, which is a different color. So amenities, instead of listing the amenities and a kind of a boring bullet point format, they've actually made graphical images for each one, and I think that's excellent. So now I can visualize the washer biz, visualize the dryer, and I don't have to see a boring list and and just kind of be overwhelmed by that. So this is another way. I mean, you have a few seconds to capture people's attention, and using photos is a great way to do that. So location. Big, big, bold map. I don't have to click on it to find out more. I know exactly where that is, and I can scroll down. You get reviews, meet your host. So Okay, I want a book. So where? The White book. So it looks like there's a little book icon right down here, and it's there the entire way. So if I scroll all the way back up to the top, it's still there. It's always there, and it's this beautiful kind of reddish pink color, kind of like a maroon, and it matches with the brand of the Airbnb, so that's a wonderful highlighted button. I'm going to click on book and check in, go ahead and fill out some kind of some random dates. So overall I had a pretty positive experience. I was able to find what I was looking for without having to click too many times. Graphically. Everything was beautiful. The front choices were all consistent, and they had a nice colored button for me to be able to easily find out how to book it. I didn't have any troubles finding that button, so you can see how you can use photos and typography blocking the golden ratio alignment, all to make a very nice, concise, clean user experience for me. 10. What's Next? : I hope you enjoy this quick dive of the layout design theory. If you're interested in testing out your knowledge, head over to the project section of this class and try your hand at a layout project. I'd love to see what you come up with. If you're ready for some practical application and you want to work alongside me doing layout design projects, I teach several design classes and skill share that practice the art of layout. If you enjoy graphic design theory, I also teach a theory based class on typography that goes over type history styles and best practices with font and type. If you're interested in checking out the U X Y design process a little further, the last lesson of this layout class. I also teach several classes on that as well as always. I would love it if you took the time to do a quick review. I have a real passion for teaching design and hope to continue to have you as a student. As you explore this world of design further