Layout Design Guide: 7 Tips for Designing a Layout - 2021

Layout design is the process of arranging visual elements—like text, images, and shapes—on a given page. Layout design is important for any project that conveys a message through eye-catching visuals, like magazine layouts, website design, and advertisements. Good layout design is both dynamic and clear, creating visual points of interest that guide the reader through a piece of content without overshadowing its message. Many layout designers adhere to a set of principles (like alignment, visual hierarchy, and space) when designing a unique and effective layout. Designers may also use a grid to arrange their layout [design elements](https://www.masterclass.com/articles/elements-of-design-explained) in a clear, legible fashion. These are the standard design elements that any designer will use when developing a layout design. 1. __Text__: Blocks of text in layout design include headlines, subheadings, headers, footers, and paragraphs. In web design, text will also include menus and buttons. Whatever style of typography you choose can communicate a different mood, and you can pair different types of [text](https://www.masterclass.com/articles/typeface-guide) to achieve different effects. 2. __Image__: Images in your graphic design can include photographs, illustrations, and infographics that become a part of your layout. Large images can grab the attention of your audience and communicate messages without text. 3. __Line__: Line refers to the way that two points in space are connected. Whether they’re horizontal lines, diagonal lines, or vertical lines, lines can help direct the eye toward a certain point in your composition. They can also draw boundaries between sections or visual elements of your layout. 4. __Shape__: In its most basic form, a shape is a two-dimensional area that is surrounded by an outline. There are three types of shapes: __organic shapes__ which occur naturally in the world, __geometric shapes__ which are angular and mathematically consistent, and __abstract shapes__ that represent things in nature but aren’t perfectly representative. Circles, squares, or any other shape can be used in layout design to add graphic elements to a page, highlight text, or delineate space between other visual elements. 5. __White space__: The blank space between elements in layout design can be as important as the visual elements themselves. The spacing around an element can draw attention to it and make it stand out. Here are some of the layout design principles to consider when working on any project that communicates information. 1. __Alignment__: Alignment refers to the way that a designer arranges the different elements of their design in relation to one another. You can repeat design elements in your image to establish consistency in your image, making it easier on the reader’s eye. For text, designers will typically choose between edged alignment—which aligns text along the left or right margins—or centered alignment—which aligns text along the centerline of your design. 2. __Visual hierarchy__: Good layout design visually organizes a hierarchy of information that places the highest emphasis on the most important focal point in the image. Hierarchy can sequentially guide your user through the intended journey of your image. You can use size, color, contrast, or position to highlight the hierarchy of important elements within your layout. 3. __Contrast__: Contrast is used in tandem with alignment and balance to help your design look unique and eye-catching. Pairing contrasting design elements like colors or different types of typography helps fuse different styles and moods to make an original, distinctive product. 4. __Balance__: Visual balance refers to how the elements of your image balance each other out. In layout design, look for ways to balance the visual information on your page, whether through symmetry or balanced asymmetrical arrangements. 5. __Proximity__: Proximity refers to how close or far the elements of a layout are from one another. Proximity can help users make connections between different visual elements of a project. Designers may choose to use a grid when making a layout design to organize the many visual elements of an image. The most common grid layout is the column grid which organizes an image into equally-sized columns. Other designers opt to arrange their image into a grid of nine equally-sized rectangles which is useful for establishing the focal point of a portrait-style layout. Here is an overview of why using a grid to design layout can be important. - __It can create balance__. Using a grid in layout design is one of the easiest ways to create balance in your image. Placing elements on the vertical and horizontal lines that divide your page into thirds gives your layout design a sense of balance without making everything symmetrical, which can become boring. - __It helps make an image cohesive__. A grid can help a designer arrange the many disparate elements of an image in an easily digestible and cohesive way. - __Creating an appealing image__. A grid gives you a layout template to make an image that is visually appealing to the viewer and guides them through the proper hierarchy of information. Here are some tips to follow if you’re getting started on your own layout design project. 1. __Create a mood board__. Make an inspiration collage or mood board before getting started on your own design. Look for page layouts, color palettes, typographies, and ideas on how information can be arranged. You can always return to your mood board to remind yourself of the effect you want to achieve. 2. __Match your design to your content__. Consider the content and the audience you want to reach with your design. If you're designing for a magazine feature, read the article and see if any design concepts jump out at you. If you're designing a landing page for a brand, consider the brand identity and think of a design concept to match. 3. __Turn to templates to guide yourself__. If you're new to website layout, starting from online templates is a great way to learn how to create balanced and dynamic page designs. You can also plan out a grid to guide yourself. 4. __Create visual contrast__. Look for ways to create visual contrast in your image that can immediately catch your audience’s attention before they've read anything. You can create contrast with color, typography, shape, and balance. 5. __Play around with typography__. Look for typefaces that speak to the brand identity of your page while still creating visual interest. You can pair multiple fonts in the same font family together to keep a sense of cohesion between disparate elements. 6. __Embrace white space__. Thoughtfully applied negative space can create more visual interest than a busy layout. If your mockups are becoming crowded, try the minimalist approach and incorporate more white space. 7. __Experiment with the rules__. The design process will look different for everyone. Design principles and gridding can help guide you, but experimenting can produce exciting and fresh images. Allow yourself to play with and break the rules with your design. Get a [MasterClass Annual Membership](https://www.masterclass.com) and let David Carson be your personal tutor. The prolific and decorated designer—who’s been lauded as the “ art director of the era”—reveals his processes for going off the (design) grid, implementing typography in new and interesting ways, innovative uses of photography and collage, and so much more. Layout design is the process of arranging visual and textual elements on-screen or on-paper in order to grab a reader’s attention and communicate information in a visually appealing way.