{"id":67,"date":"2023-12-19T22:54:08","date_gmt":"2023-12-19T22:54:08","guid":{"rendered":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/?post_type=chapter&#038;p=67"},"modified":"2024-02-03T18:47:11","modified_gmt":"2024-02-03T18:47:11","slug":"basic-design-principles","status":"publish","type":"chapter","link":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/chapter\/basic-design-principles\/","title":{"raw":"Basic Design Principles","rendered":"Basic Design Principles"},"content":{"raw":"<p class=\"import-pf\">An important concept in the world of digital writing is the user experience (UX), which the <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId792\" href=\"https:\/\/www.nngroup.com\/articles\/definition-user-experience\/\"><span class=\"import-url\">Nielsen Norman Group<\/span><\/a><\/span> defines as \u201call aspects of the end user\u2019s interaction with the company, its services, and its products\u201d (Norman and Nielsen). This is obviously a broad area that extends beyond content writing. It includes things like market research, product design, price structures, customer service, and even the larger organizational structure in place to optimize workflow and attend to specific customer needs. However, as we\u2019ve discussed in previous chapters, the user experience usually <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">begins<\/em><\/span> online when someone in the target market first lands on the organization\u2019s website. There are lots of things that have attracted them to the site\u2014a social media ad, a flier they received the mail, a meta description on their search engine results page (SERP). Whatever it might have been, it sparked an interest, probably related to some sort of problem or desire that this person wants to address. And as we\u2019ve also discussed previously, once they are on the website, it takes only a few seconds for them to judge whether or not the potential reward is worth their effort. (See System 1 and System 2 discussion in chapter 12). And while this snap decision happens quickly, it\u2019s actually a pretty nuanced decision-making process based on a number of visual cues\u2014colors, pictures, navigation menu, page layout and readability, and so on. Several design elements come together to create an impression in the user\u2019s mind about the company itself, about how relevant their offerings are to the user\u2019s needs, and about how easy or difficult it will be to get the information they are looking for.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">All of this relates to design\u2014how things are organized to enhance the user experience and create a positive impression, which in turn increases their chances of staying on the page longer, navigating through other pages of the website, and progressing through the various stages of the customer journey. (Hopefully, you are making the connection back to our unit on rhetoric: purpose, audience, message.) Not every person who lands on a web page will fit into the target audience, primarily because the service, product, or experience being offered doesn\u2019t match their needs; but for those who <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">are<\/em><\/span> in the target audience, engaging their attention is directly related to rhetorical strategy. Yes, this is about word choice and organization of written content, but it\u2019s also so much more. In fact, the concept of \u201cdesign\u201d could be taken a couple of different ways. On the one hand, web design encompasses the organizational structure and functionality of a website\u2014how pages are organized in similar groupings on the navigation menu, how easy it is to navigate from one page to the next, how hyperlinks and buttons are used to direct users to specific information. It also relates to the usability of the website so that pages load quickly and so that structures are in place to aid users in specific tasks, whether that be filling out a form or making a purchase. Effective web design makes these processes intuitive for users and provides useful feedback along the way, maybe to show what they have in their shopping cart or to generate a receipt and tracking number for their purchase. Obviously, this type of web design is complex, and it extends outside the scope of this textbook on digital writing; nevertheless, it\u2019s an important topic that directly relates to the overall success of a website. Content writers and web designers often work very closely together to create effective messaging, and it\u2019s helpful for writers to have a sense of this bigger picture. This <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId793\" href=\"https:\/\/xd.adobe.com\/ideas\/principles\/web-design\/web-page-design\/\"><span class=\"import-url\">web design guide from Adobe<\/span><\/a><\/span> (Babich) is a good place to start, as is this <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId794\" href=\"https:\/\/www.linkedin.com\/pulse\/web-design-standards-vs-website-best-practices-our-500-crestodina\/\"><span class=\"import-url\">LinkedIn article by Andy Crestodina<\/span><\/a><\/span>.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">On the other hand, design can also include visual elements and page layout. While this is certainly relevant to the aesthetics of a page, these design considerations go beyond the simple purpose of making something look good. When done well, the visual design of a page adds to the readability of the content, creates emotional connections with the audience, builds trust, and has a significant impact on the user experience. Consider the difference between a simple web page with black font on a white background and a page that has color, bold headings, pictures, buttons, and graphics. Even if the written content were exactly the same, users would be much more likely to engage with the page that has more dynamic design elements because it\u2019s more interesting and readable, and it comes across as more professional.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">This chapter focuses on these visual elements of design that enhance digital writing and facilitate a more positive user experience. In particular, we will look at principles of design that should guide some of your choices when it comes to the overall layout of a page and the way specific visual elements work together to focus the user\u2019s attention and hold their interest. The goal is to be able to apply these principles to your digital writing projects, ranging from the simple structure of an email or social media post to something more advanced like a blog or web page.<\/p>\r\n\r\n<div class=\"textbox textbox--learning-objectives\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Learning Objectives<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li class=\"import-bxul\">Understand how design choices influence the user experience.<\/li>\r\n \t<li class=\"import-bxul\">Relate the concept of page design to foundational concepts of rhetoric.<\/li>\r\n \t<li class=\"import-bxul\">Identify the foundational principles of web design and be able to apply them effectively across a number of digital genres.<\/li>\r\n \t<li class=\"import-bxul\">Consider the importance of page design from the user perspective, considering how certain design strategies will help them process information and easily navigate a web page.<\/li>\r\n \t<li class=\"import-bxul\">Understand the basics of several other prominent design theories, including Gestalt design principles, color theory, and typography.<\/li>\r\n \t<li class=\"import-bxul\">Take a closer look at design considerations and strategies that are unique to digital writing.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h1 class=\"import-ah\">From Content Strategy to Page Design<\/h1>\r\n<p class=\"import-paft\">As always, it\u2019s important to keep in mind two critical aspects of your message as you begin designing the layout: your audience and your purpose. These two things should be at the forefront of your mind as you make design choices. Specifically, what do you want your audience to know after reading this page? What do you want them to do? A successful designer will think carefully about these rhetorical purposes and use basic design principles to engage the audience\u2019s attention, to draw their eyes to certain parts of the page, and to create a sense of order and direction that helps the reader process the information and follow the steps you\u2019ve outlined for them. In this section, we\u2019ll look at the fundamental principles of design and the different ways they might be applied to a web page, blog post, or social media ad. Then in the next sections, we\u2019ll drill down to consider some of the design strategies that are particular to digital writing.<\/p>\r\n\r\n<h2 class=\"import-bh\">Page Structure<\/h2>\r\n<p class=\"import-paft\">Often the first design decision relates to the bigger picture of the overall page structure\u2014which different elements (or <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">modes<\/em><\/span>, if you think back to our chapter on multimodality) will be placed on the page and where they will go. While the layout of a page is partially about aesthetics and creating a positive first impression, it\u2019s also about usability. Your job is to direct the reader\u2019s attention to the most important items on the page and help guide their process for taking in information and responding appropriately to key prompts. Remember that design principles are based on the user experience\u2014how people perceive the meaning of a message based on the selection and arrangement of design elements. In this <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId795\" href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\"><span class=\"import-url\">Elementor blog post<\/span><\/a><\/span>, Alina Khazanova reminds us that design principles are based on research in the areas of psychology and behavioral science (among others), which provide insight into the cognitive process of a user and the design strategies that will increase their likelihood of engaging with your message. With that in mind, there are several design principles that should inform the way that you structure elements on a page:<\/p>\r\n\r\n<ul>\r\n \t<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Limit the amount of information on the page.<\/strong><\/span> Too much information becomes overwhelming for readers and limits their ability to respond appropriately. Think about the key purpose of the page, and highlight the most important information related to that purpose. If there are several pieces of information on the page, then consider how they might be \u201cchunked\u201d together to help readers more easily process the information.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Emphasize the most important information.<\/strong><\/span> This goes hand in hand with the principle of visual hierarchy, discussed below. It\u2019s important to draw readers\u2019 attention to key ideas and action items. Readers are more likely to pay attention to things that are higher up on the page, bigger, and set apart from other information through spacing or color contrast.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Stick with what readers know.<\/strong><\/span> Khazanova suggests using \u201cfamiliar scenarios and logic\u201d that will make a page more intuitive for readers, who are used to certain page structures and design elements. This allows them to focus less on trying to understand how your web page works and more on the information you\u2019ve provided. For instance, most users would expect the navigation menu to be at the top of the page and to be the same from one page to the next. They\u2019d expect appropriate spacing and sizing of information, so it\u2019s easy to tell how things are connected. They\u2019d expect the call to action to be prominent and clearly stated.<\/li>\r\n \t<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Create a page that has balance.<\/strong><\/span> According to Steven Bradley in this <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Smashing Magazine<\/em><\/span> <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId796\" href=\"https:\/\/www.smashingmagazine.com\/2015\/06\/design-principles-compositional-balance-symmetry-asymmetry\/\"><span class=\"import-url\">article<\/span><\/a><\/span>, \u201cBalancing a composition involves arranging both positive elements and negative space [white space] in such a way that no one area of the design overwhelms other areas.\u201d The elements work together to create a page that is visually pleasing and \u201cstable.\u201d While some items on the page might have more \u201cweight\u201d because of their size and visual appeal, a balanced page arranges elements on the page so that, if there were a vertical line down the center of the page, both sides have equal weight, perhaps with several smaller elements on one side to balance a larger element on the other side. Bradley\u2019s article gives examples of both symmetrical and asymmetrical balance, along with some examples.<\/li>\r\n<\/ul>\r\n[caption id=\"\" align=\"alignnone\" width=\"546\"]<img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image10.png\" alt=\"Illustration of page layout\" width=\"546\" height=\"475\" \/> <a href=\"https:\/\/freerangestock.com\/photos\/81625\/ad-layouts.html\">Ad layouts<\/a>, by JuralMin, on Freerange under <a href=\"https:\/\/freerangestock.com\/licensing.php\">Equalicense<\/a>.[\/caption]\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Designers use several different techniques to plan out the overall layout of a page. For instance, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId798\" href=\"https:\/\/websitesetup.org\/website-layouts\/\"><span class=\"import-url\">Paul Boag<\/span><\/a><\/span> says that all websites operate on a grid system, with evenly spaced columns and rows. This grid system helps with the alignment of items on the page, which helps with balance and makes it easy to plan your layout. Similarly, designers also use <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId799\" href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/wireframing.html\"><span class=\"import-url\">wireframes<\/span><\/a><\/span> to plan out the elements on the page (Technology Transformation Services). This typically uses boxes (to represent images) and dummy text to plan the placement of various elements on the page and to get an overall impression of the layout before you invest time in putting it together.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">For some examples of different types of page layouts, take another look at Paul Boag\u2019s article on <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId800\" href=\"https:\/\/websitesetup.org\/website-layouts\/\"><span class=\"import-url\">WebsiteSetup.org<\/span><\/a><\/span>. It not only provides layout options, but it explains how the different options fit with different types of content and purposes.<\/p>\r\n\r\n<h2 class=\"import-bh\">Visual Hierarchy<\/h2>\r\n<p class=\"import-paft\">The visual hierarchy and overall structure of a design go hand in hand. While an effective page structure creates visual appeal and makes the information easier to navigate, visual hierarchy directs readers\u2019 attention to the most important elements on the page, often because of their placement as well as their size. This is why article titles are at the top of the page and the font is much bigger, often set off in bold, colored lettering. Readers will see it first, and it helps frame their perception of everything else on the page. Another thing that will draw readers\u2019 attention to specific elements is contrast\u2014setting an item apart visually using color and negative space. For instance, call-to-action buttons are often set apart from the rest of the text so they are easier to see, often using a button icon in black or some other bright color that stands out against the background.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Setting up a page with a clear visual hierarchy also improves readability because it guides readers through the content, providing cues for what to pay attention to first, second, and so forth, which improves their ability to quickly scan the page. Once again, having a visual hierarchy that draws on familiar patterns will help readers more quickly move through the information. Babich identifies the F-shaped pattern and the Z-shaped pattern as two very common ways to organize information on a page that fits with readers\u2019 \u201cnatural scanning patterns.\u201d<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"401\"]<img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image17.jpg\" alt=\"Illustration of visual hierarchy principle\" width=\"401\" height=\"401\" \/> Visual Hierarchy, by Cara Miller (<a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY<\/a>)[\/caption]\r\n<h2 class=\"import-bh\">Grouping Similar Items<\/h2>\r\n<p class=\"import-paft\">Several of the Gestalt principles of design relate to the way people will naturally group items together based on visual cues, which once again helps them understand how items relate to each other and engage with the content of a page more quickly. Let\u2019s look at some of those principles and how they affect the reader\u2019s perception of content:<\/p>\r\n\r\n<ul>\r\n \t<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Proximity.<\/strong><\/span> According to the Gestalt principle of proximity, readers will naturally group items together if they are close to each other. Take, for instance, a photo caption, which is usually placed directly underneath the photo, close enough to it so that readers will naturally perceive it as being connected with the photo.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Common region.<\/strong><\/span> Similar to proximity, the principle of common region is about the way that items are grouped together because of the way they are set apart in a particular area\u2014often in an enclosed box or with a background that is a different color than the rest of the page. The navigation menu for most websites is usually at the top, and the items are set apart in a different background color. Also many web pages are set up so that as users scroll, they can quickly identify different content areas, which are set apart with different background colors.<\/li>\r\n \t<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Similarity.<\/strong><\/span> Finally, items will be perceived as similar if they have similar design features, perhaps with the same border, color scheme, and font. They would also be the same size so that readers perceive them as having equal weight.<\/li>\r\n<\/ul>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">An example of how similar items might be grouped together might be helpful. The <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId801\" href=\"https:\/\/www.usa.gov\/\"><span class=\"import-url\">USA.gov home<\/span> <span class=\"import-url\">page<\/span><\/a><\/span> uses all of the elements discussed above to make it immediately clear to readers how items relate to one another. The navigation menu at the top is set apart in a white background, separated from the banner graphic below. And because each of the menu items is close together and in the same basic black font, it\u2019s clear right away what their purpose is and how they relate to one another. Similarly, as you scroll down the page, different content items are grouped together, and they are easy to spot because of the background shading (the white box with \u201cHow do I\u2026\u201d for instance). Also, items within each grouping use similar design elements, using the same font style and size as well as color choices. The content section below, for instance, uses three pictures that are all the same size, evenly spaced, and directly below the text that describes what each link is about. This, in tandem with the \u201cLife Events\u201d heading that would naturally draw readers\u2019 attention first, helps readers to clearly see the relationship between the photos, which underscore the different ways the organization helps the community.<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"437\"]<img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image23.png\" alt=\"Screenshot of the USA.gov homepage, which uses color, proximity, and similarity to group together like items and guide users' navigation.\" width=\"437\" height=\"500\" \/> <a href=\"https:\/\/www.usa.gov\/\">USA.gov homepage<\/a>, by USA.gov (<a href=\"https:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/\">CC0<\/a>)[\/caption]\r\n<h2 class=\"import-bh\">Consistency<\/h2>\r\n<p class=\"import-paft\">Many of the design principles we\u2019ve already discussed relate to consistency (also known as <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">repetition<\/em><\/span>) so that readers know what to expect and can easily read and interpret the content provided. This relates to a lot of different choices, from organizational structure to smaller design considerations like color, spacing, and font. Perhaps the best way to think about the importance of consistency is to imagine a page that isn\u2019t consistent\u2014that uses different font shapes and sizes and lots of different colors throughout. Not only would it be unattractive and difficult to determine what to look at first, but it would be harder to understand the relationship between elements, as discussed above, because the similar features that connect elements would be missing. Consistency also relates to the branding of an organization. The website should be strategically designed using a color scheme and design patterns that align with the overall image the organization is trying to create, and using these same structures consistently within a page and from one page to the next helps develop that brand. Below are a few specific ways to develop consistency:<\/p>\r\n\r\n<ul>\r\n \t<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Page structure and organization.<\/strong><\/span> As discussed above, you can create consistency by utilizing organizational patterns that readers are already familiar with, which will make your site more intuitive for users. Once you\u2019ve decided on a structure, then you\u2019d try to be consistent with that structure throughout. For instance, the navigation menu should be the same from one page to the next. If you have a blog with different articles, each article would be laid out in similar patterns.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Color scheme.<\/strong><\/span> Often the color scheme is consistent with other branding elements like the logo and other marketing materials so that everything looks like it goes together. Color is also an important element that can evoke readers\u2019 emotional responses, so it should be used appropriately to build the brand. A kids\u2019 laser tag facility would obviously use bright, electric colors to create a feeling of excitement in the audience. In contrast, a funeral home would obviously use more subtle, soft colors.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Font.<\/strong><\/span> Because readers group similar items together based on design choices, it\u2019s important to be consistent with font\u2014page titles, headings, second-level headings. These would probably all be the same font style and color. Headings of equal importance would be the same font size with the same amount of spacing between.<\/li>\r\n \t<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Other design elements.<\/strong><\/span> Whatever treatment you give to one element, you should apply it to all similar elements. If, for instance, one of your call-to-action buttons is a black rectangle with sharp corners, they should all look like that so they are easier to spot. If one callout box has a drop shadow, they should all have drop shadows.<\/li>\r\n<\/ul>\r\n[caption id=\"\" align=\"alignnone\" width=\"393\"]<img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image26.jpg\" alt=\"Illustration of the consistency design principle\" width=\"393\" height=\"393\" \/> Consistency, by Cara Miller (<a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY<\/a>)[\/caption]\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">While not everything on every page has to be exactly the same (see below about variety), creating consistency between key elements makes the overall design seem more unified, and it creates a more even and intuitive experience for the user.<\/p>\r\n\r\n<h2 class=\"import-bh\">Variety<\/h2>\r\n<p class=\"import-paft\">An effective design uses a variety of design elements to engage readers as well as to clarify information. Chapter 10 in this textbook discussed multimodal messages and the power that various modes\u2014images, text, color, video, sound\u2014have to help clarify and enhance the meaning of a message. For that reason, and because it\u2019s more visually appealing and interesting, you should think about how to use a variety of elements to draw readers\u2019 attention.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Importantly, you can still be consistent while drawing on a variety of design elements. Take color, for instance: a web page would be boring and more difficult to read if it were just one color throughout. However, if you use the same two or three colors consistently\u2014across various types of texts and content areas\u2014then you have a variety of colors that direct readers\u2019 attention without being overwhelming. Another way to use variety is through imagery, breaking up text blocks with photos and other graphics elements (icons, pie charts, tables, cartoons) that are relevant to the overall message and that help inform the readers\u2019 interpretation of the message.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Once again, it\u2019s important not to go overboard. When too many things are happening on a page, it\u2019s overwhelming for readers. Nothing is emphasized because there are too many elements to look at. Being strategic about the elements that should go on a page and how to utilize variety with a couple of different modes of communication will go a long way.<\/p>\r\n\r\n<h2 class=\"import-bh\">Quality<\/h2>\r\n<p class=\"import-paft\">It should probably go without saying that the elements that you do include on a page should be high quality, creating a professional look and feel. This relates to all of the design principles we\u2019ve discussed up to this point, but here let\u2019s focus specifically on pictures and videos. A quality photo, for instance, is one that is in focus and is a high enough resolution so that it isn\u2019t pixelated or blurry. It has a clear focal point with the image positioned appropriately, so that it fits comfortably into the frame. There wouldn\u2019t be anything in the foreground or in the background that would create a distraction. If you\u2019ve taken very many candid photos, you know that this is easier said than done. We often take photos that are slightly out of focus or where the lighting is off, so there isn\u2019t a good view of a person\u2019s face. Fortunately, there are photo editing tools that can help with some of these issues, but it\u2019s better to start with a high-quality image. The main point is to only include the best photos on your website or digital design.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">The same thing can be said for videos, which are an increasingly common way to engage visitors either on a website or through social media. Videos can be an excellent tool because they provide clear visuals that can help viewers see a particular process, event, or product. They can also create emotional connections as viewers see people\u2019s faces and hear their voices. However, there\u2019s a lot that goes into creating an effective video that reduces background noise, that creates interesting and dynamic scenes, that avoids \u201cdead air\u201d or transitions that are too slow as well as camera movements that are too fast or wobbly, that uses effective voice overs and sound effects, that has the appropriate lighting, that effectively integrates text and other visual elements, and so on. Once again, video editing tools have evolved significantly in the last few years, which makes it possible for anyone to enhance the quality of the videos they put online. There are also plenty of YouTube videos\u2014for video editing as well as photo editing techniques.<\/p>\r\n\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\"><span class=\"import-sbhn\">Activity 14.1<\/span><\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nLet\u2019s put some of the design principles listed above into action. Review the <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId802\" href=\"https:\/\/www.fedex.com\/en-us\/open-account\/ag13398602.html?cmp=KNC-1001816-61-10-950-1110000-US-US-EN-BRZ0001Z01ZDR40&amp;gclid=Cj0KCQjwk7ugBhDIARIsAGuvgPaYSfRtTCauFjvPynrF5RT140dXxr-CesMUVNn3EsvpIzes9-NZEiQaAnI0EALw_wcB&amp;gclsrc=aw.ds\"><span class=\"import-url\">FedEx home<\/span> <span class=\"import-url\">page<\/span><\/a><\/span>\u2014or any other website of your choosing. You should go through the design principles listed above and consider how they are applied on the page. Which ones strike you as being the most effective in both engaging readers (both visually and emotionally) and helping them easily navigate the information on the page.\r\n\r\nNow reverse engineer the page by creating your own wireframe of the page structure. You can do this with a pencil and paper and really basic boxes and text blocks to represent the various elements.\r\n\r\nNow consider how the page might have been structured differently. Create a new wireframe that organizes the elements in a different way. Consider how you could utilize some of the other design principles listed above to engage readers in this new page design.\r\n\r\n<\/div>\r\n<\/div>\r\n<h1 class=\"import-ah\">Other Design Theories<\/h1>\r\n<p class=\"import-paft\">While this chapter isn\u2019t intended to be an exhaustive resource on visual design, it would probably be helpful to at least mention some of the other design theories that could be useful in your decision-making process as you put together the visual elements of a web page, blog post, or digital ad. The principles listed above are the most basic and also the most foundational design principles that can be immediately applied to your digital writing and design projects. This section will mention other prominent design theories that may provide a deeper understanding of the audience perception and some of the nuances in your design choices that can have a significant impact.<\/p>\r\n\r\n<h2 class=\"import-bh\">Gestalt Design Principles<\/h2>\r\n<p class=\"import-paft\">Many of the principles identified above draw from <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId803\" href=\"https:\/\/www.britannica.com\/science\/Gestalt-psychology\"><span class=\"import-url\">Gestalt psychology<\/span><\/a><\/span>, which is the study of how people perceive design elements on a page to create meaning (Encyclopedia Britannica). Gestalt theory looks at the entire layout of a design and considers the way that elements work together to create meaning. Thus, elements aren\u2019t viewed in \u201cisolation\u201d but as contributors toward the entire message. There are seven <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId804\" href=\"https:\/\/www.manypixels.co\/blog\/post\/gestalt-principles-in-graphic-design\"><span class=\"import-url\">classic Gestalt principles<\/span><\/a><\/span>, some of which we\u2019ve already mentioned (ManyPixels), but they are listed briefly again here so they can be viewed all together:<\/p>\r\n\r\n<ul>\r\n \t<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Similarity.<\/strong><\/span> As already discussed, the principle of similarity helps readers group items together that have similar features. However, it can be used to make certain items stand apart from the group in some way.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Good figure of simplicity.<\/strong><\/span> Viewers will always reduce a complex design to its simplest form because it\u2019s easier to process. The ManyPixels blog uses the example of the Olympics logo, which most people will perceive as five overlapping circles as opposed to something more complex. This relates directly to the principles discussed above about limiting the amount of information and visual elements on the page. Simpler designs are much easier for readers to process and to remember.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Proximity.<\/strong><\/span> Viewers are more likely to group items together when they are near each other. This is a good way to demonstrate a relationship between these elements and also to make other elements\u2014spaced further away\u2014stand out.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Continuity.<\/strong><\/span> Our minds have the tendency to connect items if they follow the same line or curve. According to this principle, simply lining information up in a line from left to right or top to bottom, sometimes using actual lines or arrows to connect them, will help readers group items together and sequence how they process information.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Closure.<\/strong><\/span> For shapes and images that are disconnected in some way, viewers will automatically fill in the gaps so they can perceive the entire image. A classic example is a circle that is formed along a dotted line. Despite the fact that it isn\u2019t a closed circle, a viewer will automatically close the gaps to see the circle shape, instead of seeing a smattering of random dots.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Figure\/ground.<\/strong><\/span> When looking at a picture or other page layout, we will immediately try to discern what is in the foreground (the figure or focal point of the picture) and what is in the background. Obviously, the more important items that you want viewers to pay attention to should be in the foreground, contrasted in some way from the background.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Common fate.<\/strong><\/span> This principle states that people will tend to group items together that seem to be moving in or pointing in the same direction. A simple example might be italicized text that is all pointing in the same direction. We\u2019d be more likely to see that text as connected together because of the common angle of the font.<\/li>\r\n<\/ul>\r\n[caption id=\"\" align=\"alignnone\" width=\"304\"]<img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image22.jpg\" alt=\"Demonstration of the Gestalt Principles\" width=\"304\" height=\"608\" \/> Gestalt Design Principles, by Cara Miller (<a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY<\/a>)[\/caption]\r\n<h2 class=\"import-bh\">Color Theory<\/h2>\r\n<p class=\"import-paft\">There are lots of different ways to talk about color and the effect it can have on the audience. For starters, there is a difference between hue (what we normally think of as the color of something\u2014e.g., green or blue) and other visual qualities, such as shade (light or dark) and saturation (how pale or bright the color appears). Obviously, colors that are more vibrant\u2014a brighter, more saturated color\u2014will have more visual weight and be more likely to draw the viewer\u2019s attention.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Color theory also relates to the emotions that different colors evoke in the audience. You probably already know that there are \u201cwarmer\u201d colors like red, orange, and yellow and \u201ccooler\u201d colors like blue, purple, and green. These colors can be used strategically to enhance a message or the overall tone of a design. Similarly, different colors are often associated with <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId805\" href=\"https:\/\/www.crowdspring.com\/blog\/small-business-branding-color\/\"><span class=\"import-url\">different meanings<\/span><\/a><\/span> (Bowman). Red is often associated with love, anger, or warmth. Yellow is often connected with happiness and excitement. And so forth. Color choice can have a significant impact on how a message is interpreted and the feelings that the audience associates with that message.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Finally, color theory focuses on the ways that <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId806\" href=\"https:\/\/www.interaction-design.org\/literature\/topics\/color-theory\"><span class=\"import-url\">colors work together<\/span><\/a><\/span> to create an overall visual impression or experience (Interaction Design Foundation). The only way that one element would be emphasized using color is if other items were de-emphasized with contrasting colors that were less vibrant. There are also the dynamics of how different color combinations pair together to create complementary (opposing) or analogous (similar) effects. The main goal is to use a consistent color palette that has a variety of colors that work well together and to use color strategically throughout the design to create emphasis. As always, color choice is one key element in a much larger strategy to convey a particular message, build your brand, engage viewers, and evoke particular responses.<\/p>\r\n\r\n<h2 class=\"import-bh\">Typography<\/h2>\r\n<p class=\"import-paft\">As the name suggests, the study of typography relates to the way that text is designed so that a message is both readable and interesting. While the <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId807\" href=\"https:\/\/www.toptal.com\/designers\/typography\/typography-anatomy-infographic\"><span class=\"import-url\">particulars of typography<\/span><\/a><\/span>\u2014the different classifications of fonts and the different parts of a letter\u2014can be quite detailed and specific (Bowers), here we will focus on the primary considerations of typography, assuming that you will be making font selections instead of creating your own.<\/p>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">The main consideration when it comes to typography is readability. Obviously, the text comprises an important part of the overall message, and you want readers to be able to easily read it, from the largest headings and titles down to the smaller text blocks. There are a few basic strategies that will make the font easier to read:<\/p>\r\n\r\n<ul>\r\n \t<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Size.<\/strong><\/span> Obviously, the bigger the font, the easier it is to read. As previously mentioned, your titles and headings will be larger than some of the other text blocks and will therefore naturally pull readers\u2019 attention, but they should also be able to read the \u201csmaller\u201d print of an article or web page. A good rule of thumb for digital writing is to use 11-point font or larger. Of course, the size will vary depending on the context. If the text is going on a digital screen in an area where readers will be reading it from a distance, the font size will be significantly larger.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Font choice.<\/strong><\/span> As we\u2019ll discuss below, different fonts have different personalities that might enhance the emotional quality of your message, so it\u2019s probably okay to play around with different font styles for titles and ad copy where only a few words are selected and the font is relatively large. However, for larger blocks of text that require more sustained readability, it\u2019s much better to stick with a standard sans serif font, meaning that it doesn\u2019t have additional strokes and projections at the ends of a letter. For example, look at the two F\u2019s below. The one on the left is in a sans serif font, and the one on the right is in a serif font.<\/li>\r\n<\/ul>\r\n<img class=\"alignnone\" src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/02\/image1-1.png\" alt=\"An example of a sans serif font and a serif font.\" width=\"337\" height=\"155\" \/>\r\n<p style=\"padding-left: 40px;\">As you can see, the serif font on the right has extra marks at the base and at the ends. While this might create a more formal look, it is harder to read, particularly for large text blocks in a smaller font. And obviously, the more pronounced and ornate the serfs become, utilizing lots of different swirls and other elements, the more difficult it would be to read.<\/p>\r\n\r\n<ul>\r\n \t<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Contrast.<\/strong><\/span> The final consideration with readability is about contrast, so that the lettering is set apart from the background enough so that it is easy to read. One of the biggest mistakes novice designers make is to use a font color that doesn\u2019t have enough contrast with the background\u2014a light gray font on a white background, for instance, or red font on a black background. There has to be enough contrast so that the text easily stands out. You\u2019d especially want to keep this in mind for text that goes over the top of an image. Once again, without the right contrast, it can be extremely difficult to read the text over an image. That\u2019s why many designers use the negative space of a picture, create drop shadows around the text, or use text boxes\u2014all of which can be used to increase the contrast so that the text stands out.<\/li>\r\n<\/ul>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">The other consideration with typography is about the overall emotional quality personality of various font styles and how they might be used to enhance your message. Again, readability is key, so you wouldn\u2019t use different font treatments for larger chunks of text, but for a title or a short line of ad copy, a unique font can have a significant effect on the audience\u2019s interpretation. It might help if you first consider the overall purpose and tone of the message, the impression that you are trying to create in the mind of the reader, and that will likely guide your font choices. Is the tone of the message serious? In that case, it might make sense to go with a more traditional sans serif font. Are you trying to demonstrate the elegance of a particular product or event? In that case, a more formal script font like Edwardian would be more appropriate. On the other hand, if you want to invite a bunch of children to a kid\u2019s birthday party, then you\u2019d want a font that seems playful and fun\u2014Curlz, for instance. While there are lots of different fonts to choose from that might create the right impression in your audience, there are definitely fonts that would be the wrong choice. Consider, for instance, a wedding invitation that is created in Curlz font. Instead of sending the message that the event would be formal and sophisticated, the invitation would probably create some confusion and maybe even some anxiety about what to expect.<\/p>\r\n\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\"><span class=\"import-sbhn\">Activity 14.2<\/span><\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<p class=\"import-sbaft\">Consider the list of messages below. What type of font do you think would be most appropriate for each one? Give an example for each one:<\/p>\r\n\r\n<ul>\r\n \t<li class=\"import-sbblf\">Job r\u00e9sum\u00e9<\/li>\r\n \t<li class=\"import-sbbl\">Yard sale sign<\/li>\r\n \t<li class=\"import-sbbl\">Graduation open house<\/li>\r\n \t<li class=\"import-sbbl\">Funeral bulletin<\/li>\r\n \t<li class=\"import-sbbl\">Ad for a neighborhood block party<\/li>\r\n \t<li class=\"import-sbbl\">Public service announcement about suicide awareness<\/li>\r\n \t<li class=\"import-sbbl\">Course syllabus<\/li>\r\n \t<li class=\"import-sbbl\">Divorce papers<\/li>\r\n \t<li class=\"import-sbbl\">\u201cCloseout\u201d sale<\/li>\r\n \t<li class=\"import-sbbl\">Feel free to come up with your own<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h1 class=\"import-ah\">Special Considerations for Digital Design<\/h1>\r\n<p class=\"import-paft\">As you put together designs that will be viewed on digital devices, there are a few special considerations that enhance usability:<\/p>\r\n\r\n<ul>\r\n \t<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">File sizes.<\/strong><\/span> We\u2019ve already discussed the fact that you should only use quality images and videos to engage viewers, but the other side of that is that higher-resolution images and high-quality videos are usually really big files that take up precious storage space and often result in longer loading times, which can quickly frustrate impatient users. Fortunately, web graphics don\u2019t need to be as high-resolution as print graphics (72 dpi compared to 300 dpi), which means the files will be significantly smaller. Further, saving the file as a .jpg or .png results in a smaller file than a .tif or a .psd file. For videos, there are online applications you can use to compress video files into something smaller. Alternatively, you might consider uploading video files to YouTube and then embedding the video link on your website, which means that the video will still play on your web page, but the video itself isn\u2019t housed there.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Cascading style sheets.<\/strong><\/span> With so many WYSIWYG (What You See Is What You Get) platforms, it\u2019s no longer necessary for you to know how to code a website in HTML to create one. Cascading style sheets describe a way of coding the elements on a web page so that they are consistent across different pages\u2014so that the title of each page, for instance, has the same font style, font size, color choice, and spacing. Most web platforms have these types of choices built in so that you can make selections that will be consistent across different pages of your website without having to know the HTML code. Utilizing these options will help you more easily create consistency and unity.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Hyperlinks and buttons.<\/strong><\/span> Here\u2019s where your design choices can leverage concepts that your audience is familiar with, and since your hyperlinks and buttons usually accompany your call to action\u2014inviting readers to take some sort of step toward your desired goal\u2014it\u2019s important that they recognize these elements. It\u2019s pretty simple, really. A hyperlink is usually in blue font, underlined. This is the universal signal that the text is a hyperlink to a relevant page, and following this convention will make it much more likely that readers will recognize the hyperlink and click it. Usually, pages are structured so that internal links open in the same screen, whereas external links will open up a new window, making it possible for readers to return to the original page. In that case, it\u2019s helpful to set up your hyperlinks so that they change colors once they have been clicked (maybe from blue to purple) so that readers can visually see where they\u2019ve already been. Similarly, buttons are more often used as the overall call to action\u2014to \u201cread more,\u201d to \u201capply now,\u201d to \u201csubscribe,\u201d and so on. While some of the more subtle style choices might vary, it would be to your benefit to make your buttons look similar\u2014not only from one page to the next but also in comparison to other websites.<\/li>\r\n \t<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Mobile responsiveness.<\/strong><\/span> A <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId808\" href=\"https:\/\/www.constantcontact.com\/blog\/website-mobile-friendly-vs-mobile-responsive\/\"><span class=\"import-url\">mobile-responsive website<\/span><\/a><\/span> is one that reformats for maximum readability and usability depending on the user\u2019s device (Constant Contact). So instead of displaying the same, shrunken-down version of the home page on your cell phone, the overall format changes so that key items are bigger and formatted vertically, so it\u2019s easier to scroll through and click on the items that you want. This is helpful not only when going from a laptop to a cell phone but also when switching from one screen size to the next or one type of browser to the next. It ensures that the items are reformatted appropriately. Once again, many web platforms are mobile responsive and make it possible for you to toggle back and forth between multiple views as you put a page together.<\/li>\r\n \t<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Testing.<\/strong><\/span> One great thing about digital design is that it\u2019s relatively easy to change. Content strategists and web developers are constantly \u201ctesting\u201d the effectiveness of their pages, not just through form feedback but also through various metrics that show how long viewers stayed on a specific page, how many people clicked on the CTA, and so on. Playing around with different versions and monitoring the results lets you gauge how your design choices are landing with your audience and to make improvements along the way.<\/li>\r\n<\/ul>\r\n<p class=\"import-p\" style=\"text-indent: 36pt;\">There is a lot to consider when it comes to the design of your digital projects, and sometimes having so many options can be overwhelming. The good news is that there are lots of online resources that you can draw from as well as successful (and unsuccessful) websites where you can draw inspiration and remind yourself of various pitfalls.<\/p>\r\n\r\n<div class=\"textbox textbox--examples\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Discussion Questions<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ol>\r\n \t<li>What is the user experience (UX) and how does the overall \u201cdesign\u201d of a website influence the user experience? Consider the different types of \u201cdesign\u201d discussed in the introduction.<\/li>\r\n \t<li>How does the design of a message relate to rhetoric? Be specific about how it relates to some of the terms we\u2019ve already discussed: purpose, audience, genre, persuasive appeals, and so on.<\/li>\r\n \t<li>The design principles identified in this chapter are based on research in the area of psychology and behavioral sciences that look closely at how people process and respond to information. Explain this reciprocal relationship between audience perspective and design.<\/li>\r\n \t<li>The chapter lists six foundational principles of web design. Identify each one, and give a brief overview of what each one means and how it might be applied.<\/li>\r\n \t<li>What is a wireframe and how might it be used to help you plan your design?<\/li>\r\n \t<li>Many of the foundational web design principles identified near the beginning of the chapter overlap in some ways. For instance, the principles of page structure and visual hierarchy both relate to the arrangement of elements on the page and strategies to emphasize important ideas. What other ideas overlap across some of the design strategies discussed in this chapter?<\/li>\r\n \t<li>Explain how a digital design can have <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">both<\/em><\/span> variety and consistency.<\/li>\r\n \t<li>What are the Gestalt design principles? How do they relate to some of the principles discussed in the first part of the chapter?<\/li>\r\n \t<li>In what ways do the sections on color theory and typography build on the design principles already discussed?<\/li>\r\n \t<li>Explain some of the special design considerations that are unique to digital writing. Can you think of any others that aren\u2019t specifically mentioned in the chapter?<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\"><span style=\"text-align: initial; font-size: 1em;\">Sources<\/span><\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Babich, Nick. \u201cWeb Page Design: A Comprehensive Guide.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Adobe.com<\/em><\/span>, 24 Nov. 2020, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId809\" href=\"https:\/\/xd.adobe.com\/ideas\/principles\/web-design\/web-page-design\/\"><span class=\"import-url\">https:\/\/xd.adobe.com\/ideas\/principles\/web-design\/web-page-design\/<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Boag, Paul. \u201c10 Good Website Layout Ideas (with Examples).\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">WebsiteSetup.org<\/em><\/span>, 11 Dec. 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId810\" href=\"https:\/\/websitesetup.org\/website-layouts\/\"><span class=\"import-url\">https:\/\/websitesetup.org\/website-layouts\/<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Bowers, Micah. \u201cDissecting the Intricacies of Typography Anatomy (with Infographic).\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Toptal.com<\/em><\/span>, n.d., <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId811\" href=\"https:\/\/www.toptal.com\/designers\/typography\/typography-anatomy-infographic\"><span class=\"import-url\">https:\/\/www.toptal.com\/designers\/typography\/typography-anatomy-infographic<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Bowman, Amanda. \u201cHow to Choose Brand Colors and What Color Says about Your Business.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">CrowdSpring.com<\/em><\/span>, 4 May 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId812\" href=\"https:\/\/www.crowdspring.com\/blog\/small-business-branding-color\/\"><span class=\"import-url\">https:\/\/www.crowdspring.com\/blog\/small-business-branding-color\/<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Bradley, Steven. \u201cDesign Principles: Compositional, Symmetrical, and Asymmetrical Balance.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">SmashingMagazine.com<\/em><\/span>, 10 Mar 2017, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId813\" href=\"https:\/\/www.smashingmagazine.com\/2015\/06\/design-principles-compositional-balance-symmetry-asymmetry\/\"><span class=\"import-url\">https:\/\/www.smashingmagazine.com\/2015\/06\/design-principles-compositional-balance-symmetry-asymmetry\/<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Constant Contact. \u201cMobile-Friendly vs. Mobile-Responsive.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">ConstantContact.com<\/em><\/span>, 22 Dec. 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId814\" href=\"https:\/\/www.constantcontact.com\/blog\/website-mobile-friendly-vs-mobile-responsive\/\"><span class=\"import-url\">https:\/\/www.constantcontact.com\/blog\/website-mobile-friendly-vs-mobile-responsive\/#:~:text=Mobile%2Dresponsive%20%E2%80%93%20Websites%20that%20are,pictures%20are%20resized%20and%20reformatted<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Crestodina, Andy. \u201cWeb Design Standards vs. Website Best Practices: Our Review of 500 Sites [New Research].\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">LinkedIn.com<\/em><\/span>, 27 Apr. 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId815\" href=\"https:\/\/www.linkedin.com\/pulse\/web-design-standards-vs-website-best-practices-our-500-crestodina\/\"><span class=\"import-url\">https:\/\/www.linkedin.com\/pulse\/web-design-standards-vs-website-best-practices-our-500-crestodina\/<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Encyclopedia Britannica. \u201cGestalt Psychology.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Britannica.com<\/em><\/span>, 2 Dec. 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId816\" href=\"https:\/\/www.britannica.com\/science\/Gestalt-psychology\"><span class=\"import-url\">https:\/\/www.britannica.com\/science\/Gestalt-psychology<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">FedEx. <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Fedex.com<\/em><\/span>, 2023, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId817\" href=\"https:\/\/www.fedex.com\/en-us\/open-account\/ag13398602.html?cmp=KNC-1001816-61-10-950-1110000-US-US-EN-BRZ0001Z01ZDR40&amp;gclid=Cj0KCQjwk7ugBhDIARIsAGuvgPaYSfRtTCauFjvPynrF5RT140dXxr-CesMUVNn3EsvpIzes9-NZEiQaAnI0EALw_wcB&amp;gclsrc=aw.ds\"><span class=\"import-url\">https:\/\/www.fedex.com\/en-us\/open-account\/ag13398602.html?cmp=KNC-1001816-61-10-950-1110000-US-US-EN-BRZ0001Z01ZDR40&amp;gclid=Cj0KCQjwk7ugBhDIARIsAGuvgPaYSfRtTCauFjvPynrF5RT140dXxr-CesMUVNn3EsvpIzes9-NZEiQaAnI0EALw_wcB&amp;gclsrc=aw.ds<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Interaction Design Foundation. \u201cWhat Is Color Theory?\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Interaction-design.org<\/em><\/span>, n.d., <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId818\" href=\"https:\/\/www.interaction-design.org\/literature\/topics\/color-theory\"><span class=\"import-url\">https:\/\/www.interaction-design.org\/literature\/topics\/color-theory<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Khazanova, Alina. \u201c20 Principles of Website Design Every Web Professional Should Know.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Elementor.com<\/em><\/span>, 23 Jan 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId819\" href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\"><span class=\"import-url\">https:\/\/elementor.com\/blog\/principles-of-website-design\/<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">ManyPixels. \u201cGestalt Principles in Graphic Design.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">ManyPixels.com<\/em><\/span>, 9 June 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId820\" href=\"https:\/\/www.manypixels.co\/blog\/post\/gestalt-principles-in-graphic-design\"><span class=\"import-url\">https:\/\/www.manypixels.co\/blog\/post\/gestalt-principles-in-graphic-design<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Norman, Don, and Jakob Nielsen. \u201cThe Definition of User Experience (UX).\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Nielsen Norman Group<\/em><\/span>, 2023, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId821\" href=\"https:\/\/www.nngroup.com\/articles\/definition-user-experience\/\"><span class=\"import-url\">https:\/\/www.nngroup.com\/articles\/definition-user-experience\/#:~:text=Summary%3A%20%22User%20experience%22%20encompasses,it<\/span><span class=\"import-url\">s%20services%2C%20and%20its%20products<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Technology Transformation Services. \u201cWireframing.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Usability.gov<\/em><\/span>, 14 Mar 2023, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId822\" href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/wireframing.html\"><span class=\"import-url\">https:\/\/www.usability.gov\/how-to-and-tools\/methods\/wireframing.html#:~:text=A%20wireframe%20is%20a%20two,styling%2C%20color%2C%20or%20graphics<\/span><\/a><\/span>.<\/p>\r\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">USA.gov. \u201cMaking Government Sources Easier to Find.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">USA.gov<\/em><\/span>, n.d., <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId823\" href=\"https:\/\/www.usa.gov\/\"><span class=\"import-url\">https:\/\/www.usa.gov\/<\/span><\/a><\/span>.<\/p>\r\n\r\n<\/div>\r\n<\/div>","rendered":"<p class=\"import-pf\">An important concept in the world of digital writing is the user experience (UX), which the <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId792\" href=\"https:\/\/www.nngroup.com\/articles\/definition-user-experience\/\"><span class=\"import-url\">Nielsen Norman Group<\/span><\/a><\/span> defines as \u201call aspects of the end user\u2019s interaction with the company, its services, and its products\u201d (Norman and Nielsen). This is obviously a broad area that extends beyond content writing. It includes things like market research, product design, price structures, customer service, and even the larger organizational structure in place to optimize workflow and attend to specific customer needs. However, as we\u2019ve discussed in previous chapters, the user experience usually <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">begins<\/em><\/span> online when someone in the target market first lands on the organization\u2019s website. There are lots of things that have attracted them to the site\u2014a social media ad, a flier they received the mail, a meta description on their search engine results page (SERP). Whatever it might have been, it sparked an interest, probably related to some sort of problem or desire that this person wants to address. And as we\u2019ve also discussed previously, once they are on the website, it takes only a few seconds for them to judge whether or not the potential reward is worth their effort. (See System 1 and System 2 discussion in chapter 12). And while this snap decision happens quickly, it\u2019s actually a pretty nuanced decision-making process based on a number of visual cues\u2014colors, pictures, navigation menu, page layout and readability, and so on. Several design elements come together to create an impression in the user\u2019s mind about the company itself, about how relevant their offerings are to the user\u2019s needs, and about how easy or difficult it will be to get the information they are looking for.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">All of this relates to design\u2014how things are organized to enhance the user experience and create a positive impression, which in turn increases their chances of staying on the page longer, navigating through other pages of the website, and progressing through the various stages of the customer journey. (Hopefully, you are making the connection back to our unit on rhetoric: purpose, audience, message.) Not every person who lands on a web page will fit into the target audience, primarily because the service, product, or experience being offered doesn\u2019t match their needs; but for those who <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">are<\/em><\/span> in the target audience, engaging their attention is directly related to rhetorical strategy. Yes, this is about word choice and organization of written content, but it\u2019s also so much more. In fact, the concept of \u201cdesign\u201d could be taken a couple of different ways. On the one hand, web design encompasses the organizational structure and functionality of a website\u2014how pages are organized in similar groupings on the navigation menu, how easy it is to navigate from one page to the next, how hyperlinks and buttons are used to direct users to specific information. It also relates to the usability of the website so that pages load quickly and so that structures are in place to aid users in specific tasks, whether that be filling out a form or making a purchase. Effective web design makes these processes intuitive for users and provides useful feedback along the way, maybe to show what they have in their shopping cart or to generate a receipt and tracking number for their purchase. Obviously, this type of web design is complex, and it extends outside the scope of this textbook on digital writing; nevertheless, it\u2019s an important topic that directly relates to the overall success of a website. Content writers and web designers often work very closely together to create effective messaging, and it\u2019s helpful for writers to have a sense of this bigger picture. This <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId793\" href=\"https:\/\/xd.adobe.com\/ideas\/principles\/web-design\/web-page-design\/\"><span class=\"import-url\">web design guide from Adobe<\/span><\/a><\/span> (Babich) is a good place to start, as is this <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId794\" href=\"https:\/\/www.linkedin.com\/pulse\/web-design-standards-vs-website-best-practices-our-500-crestodina\/\"><span class=\"import-url\">LinkedIn article by Andy Crestodina<\/span><\/a><\/span>.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">On the other hand, design can also include visual elements and page layout. While this is certainly relevant to the aesthetics of a page, these design considerations go beyond the simple purpose of making something look good. When done well, the visual design of a page adds to the readability of the content, creates emotional connections with the audience, builds trust, and has a significant impact on the user experience. Consider the difference between a simple web page with black font on a white background and a page that has color, bold headings, pictures, buttons, and graphics. Even if the written content were exactly the same, users would be much more likely to engage with the page that has more dynamic design elements because it\u2019s more interesting and readable, and it comes across as more professional.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">This chapter focuses on these visual elements of design that enhance digital writing and facilitate a more positive user experience. In particular, we will look at principles of design that should guide some of your choices when it comes to the overall layout of a page and the way specific visual elements work together to focus the user\u2019s attention and hold their interest. The goal is to be able to apply these principles to your digital writing projects, ranging from the simple structure of an email or social media post to something more advanced like a blog or web page.<\/p>\n<div class=\"textbox textbox--learning-objectives\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Learning Objectives<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li class=\"import-bxul\">Understand how design choices influence the user experience.<\/li>\n<li class=\"import-bxul\">Relate the concept of page design to foundational concepts of rhetoric.<\/li>\n<li class=\"import-bxul\">Identify the foundational principles of web design and be able to apply them effectively across a number of digital genres.<\/li>\n<li class=\"import-bxul\">Consider the importance of page design from the user perspective, considering how certain design strategies will help them process information and easily navigate a web page.<\/li>\n<li class=\"import-bxul\">Understand the basics of several other prominent design theories, including Gestalt design principles, color theory, and typography.<\/li>\n<li class=\"import-bxul\">Take a closer look at design considerations and strategies that are unique to digital writing.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h1 class=\"import-ah\">From Content Strategy to Page Design<\/h1>\n<p class=\"import-paft\">As always, it\u2019s important to keep in mind two critical aspects of your message as you begin designing the layout: your audience and your purpose. These two things should be at the forefront of your mind as you make design choices. Specifically, what do you want your audience to know after reading this page? What do you want them to do? A successful designer will think carefully about these rhetorical purposes and use basic design principles to engage the audience\u2019s attention, to draw their eyes to certain parts of the page, and to create a sense of order and direction that helps the reader process the information and follow the steps you\u2019ve outlined for them. In this section, we\u2019ll look at the fundamental principles of design and the different ways they might be applied to a web page, blog post, or social media ad. Then in the next sections, we\u2019ll drill down to consider some of the design strategies that are particular to digital writing.<\/p>\n<h2 class=\"import-bh\">Page Structure<\/h2>\n<p class=\"import-paft\">Often the first design decision relates to the bigger picture of the overall page structure\u2014which different elements (or <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">modes<\/em><\/span>, if you think back to our chapter on multimodality) will be placed on the page and where they will go. While the layout of a page is partially about aesthetics and creating a positive first impression, it\u2019s also about usability. Your job is to direct the reader\u2019s attention to the most important items on the page and help guide their process for taking in information and responding appropriately to key prompts. Remember that design principles are based on the user experience\u2014how people perceive the meaning of a message based on the selection and arrangement of design elements. In this <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId795\" href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\"><span class=\"import-url\">Elementor blog post<\/span><\/a><\/span>, Alina Khazanova reminds us that design principles are based on research in the areas of psychology and behavioral science (among others), which provide insight into the cognitive process of a user and the design strategies that will increase their likelihood of engaging with your message. With that in mind, there are several design principles that should inform the way that you structure elements on a page:<\/p>\n<ul>\n<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Limit the amount of information on the page.<\/strong><\/span> Too much information becomes overwhelming for readers and limits their ability to respond appropriately. Think about the key purpose of the page, and highlight the most important information related to that purpose. If there are several pieces of information on the page, then consider how they might be \u201cchunked\u201d together to help readers more easily process the information.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Emphasize the most important information.<\/strong><\/span> This goes hand in hand with the principle of visual hierarchy, discussed below. It\u2019s important to draw readers\u2019 attention to key ideas and action items. Readers are more likely to pay attention to things that are higher up on the page, bigger, and set apart from other information through spacing or color contrast.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Stick with what readers know.<\/strong><\/span> Khazanova suggests using \u201cfamiliar scenarios and logic\u201d that will make a page more intuitive for readers, who are used to certain page structures and design elements. This allows them to focus less on trying to understand how your web page works and more on the information you\u2019ve provided. For instance, most users would expect the navigation menu to be at the top of the page and to be the same from one page to the next. They\u2019d expect appropriate spacing and sizing of information, so it\u2019s easy to tell how things are connected. They\u2019d expect the call to action to be prominent and clearly stated.<\/li>\n<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Create a page that has balance.<\/strong><\/span> According to Steven Bradley in this <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Smashing Magazine<\/em><\/span> <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId796\" href=\"https:\/\/www.smashingmagazine.com\/2015\/06\/design-principles-compositional-balance-symmetry-asymmetry\/\"><span class=\"import-url\">article<\/span><\/a><\/span>, \u201cBalancing a composition involves arranging both positive elements and negative space [white space] in such a way that no one area of the design overwhelms other areas.\u201d The elements work together to create a page that is visually pleasing and \u201cstable.\u201d While some items on the page might have more \u201cweight\u201d because of their size and visual appeal, a balanced page arranges elements on the page so that, if there were a vertical line down the center of the page, both sides have equal weight, perhaps with several smaller elements on one side to balance a larger element on the other side. Bradley\u2019s article gives examples of both symmetrical and asymmetrical balance, along with some examples.<\/li>\n<\/ul>\n<figure style=\"width: 546px\" class=\"wp-caption alignnone\"><img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image10.png\" alt=\"Illustration of page layout\" width=\"546\" height=\"475\" \/><figcaption class=\"wp-caption-text\"><a href=\"https:\/\/freerangestock.com\/photos\/81625\/ad-layouts.html\">Ad layouts<\/a>, by JuralMin, on Freerange under <a href=\"https:\/\/freerangestock.com\/licensing.php\">Equalicense<\/a>.<\/figcaption><\/figure>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Designers use several different techniques to plan out the overall layout of a page. For instance, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId798\" href=\"https:\/\/websitesetup.org\/website-layouts\/\"><span class=\"import-url\">Paul Boag<\/span><\/a><\/span> says that all websites operate on a grid system, with evenly spaced columns and rows. This grid system helps with the alignment of items on the page, which helps with balance and makes it easy to plan your layout. Similarly, designers also use <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId799\" href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/wireframing.html\"><span class=\"import-url\">wireframes<\/span><\/a><\/span> to plan out the elements on the page (Technology Transformation Services). This typically uses boxes (to represent images) and dummy text to plan the placement of various elements on the page and to get an overall impression of the layout before you invest time in putting it together.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">For some examples of different types of page layouts, take another look at Paul Boag\u2019s article on <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId800\" href=\"https:\/\/websitesetup.org\/website-layouts\/\"><span class=\"import-url\">WebsiteSetup.org<\/span><\/a><\/span>. It not only provides layout options, but it explains how the different options fit with different types of content and purposes.<\/p>\n<h2 class=\"import-bh\">Visual Hierarchy<\/h2>\n<p class=\"import-paft\">The visual hierarchy and overall structure of a design go hand in hand. While an effective page structure creates visual appeal and makes the information easier to navigate, visual hierarchy directs readers\u2019 attention to the most important elements on the page, often because of their placement as well as their size. This is why article titles are at the top of the page and the font is much bigger, often set off in bold, colored lettering. Readers will see it first, and it helps frame their perception of everything else on the page. Another thing that will draw readers\u2019 attention to specific elements is contrast\u2014setting an item apart visually using color and negative space. For instance, call-to-action buttons are often set apart from the rest of the text so they are easier to see, often using a button icon in black or some other bright color that stands out against the background.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Setting up a page with a clear visual hierarchy also improves readability because it guides readers through the content, providing cues for what to pay attention to first, second, and so forth, which improves their ability to quickly scan the page. Once again, having a visual hierarchy that draws on familiar patterns will help readers more quickly move through the information. Babich identifies the F-shaped pattern and the Z-shaped pattern as two very common ways to organize information on a page that fits with readers\u2019 \u201cnatural scanning patterns.\u201d<\/p>\n<figure style=\"width: 401px\" class=\"wp-caption alignnone\"><img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image17.jpg\" alt=\"Illustration of visual hierarchy principle\" width=\"401\" height=\"401\" \/><figcaption class=\"wp-caption-text\">Visual Hierarchy, by Cara Miller (<a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY<\/a>)<\/figcaption><\/figure>\n<h2 class=\"import-bh\">Grouping Similar Items<\/h2>\n<p class=\"import-paft\">Several of the Gestalt principles of design relate to the way people will naturally group items together based on visual cues, which once again helps them understand how items relate to each other and engage with the content of a page more quickly. Let\u2019s look at some of those principles and how they affect the reader\u2019s perception of content:<\/p>\n<ul>\n<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Proximity.<\/strong><\/span> According to the Gestalt principle of proximity, readers will naturally group items together if they are close to each other. Take, for instance, a photo caption, which is usually placed directly underneath the photo, close enough to it so that readers will naturally perceive it as being connected with the photo.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Common region.<\/strong><\/span> Similar to proximity, the principle of common region is about the way that items are grouped together because of the way they are set apart in a particular area\u2014often in an enclosed box or with a background that is a different color than the rest of the page. The navigation menu for most websites is usually at the top, and the items are set apart in a different background color. Also many web pages are set up so that as users scroll, they can quickly identify different content areas, which are set apart with different background colors.<\/li>\n<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Similarity.<\/strong><\/span> Finally, items will be perceived as similar if they have similar design features, perhaps with the same border, color scheme, and font. They would also be the same size so that readers perceive them as having equal weight.<\/li>\n<\/ul>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">An example of how similar items might be grouped together might be helpful. The <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId801\" href=\"https:\/\/www.usa.gov\/\"><span class=\"import-url\">USA.gov home<\/span> <span class=\"import-url\">page<\/span><\/a><\/span> uses all of the elements discussed above to make it immediately clear to readers how items relate to one another. The navigation menu at the top is set apart in a white background, separated from the banner graphic below. And because each of the menu items is close together and in the same basic black font, it\u2019s clear right away what their purpose is and how they relate to one another. Similarly, as you scroll down the page, different content items are grouped together, and they are easy to spot because of the background shading (the white box with \u201cHow do I\u2026\u201d for instance). Also, items within each grouping use similar design elements, using the same font style and size as well as color choices. The content section below, for instance, uses three pictures that are all the same size, evenly spaced, and directly below the text that describes what each link is about. This, in tandem with the \u201cLife Events\u201d heading that would naturally draw readers\u2019 attention first, helps readers to clearly see the relationship between the photos, which underscore the different ways the organization helps the community.<\/p>\n<figure style=\"width: 437px\" class=\"wp-caption alignnone\"><img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image23.png\" alt=\"Screenshot of the USA.gov homepage, which uses color, proximity, and similarity to group together like items and guide users' navigation.\" width=\"437\" height=\"500\" \/><figcaption class=\"wp-caption-text\"><a href=\"https:\/\/www.usa.gov\/\">USA.gov homepage<\/a>, by USA.gov (<a href=\"https:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/\">CC0<\/a>)<\/figcaption><\/figure>\n<h2 class=\"import-bh\">Consistency<\/h2>\n<p class=\"import-paft\">Many of the design principles we\u2019ve already discussed relate to consistency (also known as <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">repetition<\/em><\/span>) so that readers know what to expect and can easily read and interpret the content provided. This relates to a lot of different choices, from organizational structure to smaller design considerations like color, spacing, and font. Perhaps the best way to think about the importance of consistency is to imagine a page that isn\u2019t consistent\u2014that uses different font shapes and sizes and lots of different colors throughout. Not only would it be unattractive and difficult to determine what to look at first, but it would be harder to understand the relationship between elements, as discussed above, because the similar features that connect elements would be missing. Consistency also relates to the branding of an organization. The website should be strategically designed using a color scheme and design patterns that align with the overall image the organization is trying to create, and using these same structures consistently within a page and from one page to the next helps develop that brand. Below are a few specific ways to develop consistency:<\/p>\n<ul>\n<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Page structure and organization.<\/strong><\/span> As discussed above, you can create consistency by utilizing organizational patterns that readers are already familiar with, which will make your site more intuitive for users. Once you\u2019ve decided on a structure, then you\u2019d try to be consistent with that structure throughout. For instance, the navigation menu should be the same from one page to the next. If you have a blog with different articles, each article would be laid out in similar patterns.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Color scheme.<\/strong><\/span> Often the color scheme is consistent with other branding elements like the logo and other marketing materials so that everything looks like it goes together. Color is also an important element that can evoke readers\u2019 emotional responses, so it should be used appropriately to build the brand. A kids\u2019 laser tag facility would obviously use bright, electric colors to create a feeling of excitement in the audience. In contrast, a funeral home would obviously use more subtle, soft colors.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Font.<\/strong><\/span> Because readers group similar items together based on design choices, it\u2019s important to be consistent with font\u2014page titles, headings, second-level headings. These would probably all be the same font style and color. Headings of equal importance would be the same font size with the same amount of spacing between.<\/li>\n<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Other design elements.<\/strong><\/span> Whatever treatment you give to one element, you should apply it to all similar elements. If, for instance, one of your call-to-action buttons is a black rectangle with sharp corners, they should all look like that so they are easier to spot. If one callout box has a drop shadow, they should all have drop shadows.<\/li>\n<\/ul>\n<figure style=\"width: 393px\" class=\"wp-caption alignnone\"><img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image26.jpg\" alt=\"Illustration of the consistency design principle\" width=\"393\" height=\"393\" \/><figcaption class=\"wp-caption-text\">Consistency, by Cara Miller (<a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY<\/a>)<\/figcaption><\/figure>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">While not everything on every page has to be exactly the same (see below about variety), creating consistency between key elements makes the overall design seem more unified, and it creates a more even and intuitive experience for the user.<\/p>\n<h2 class=\"import-bh\">Variety<\/h2>\n<p class=\"import-paft\">An effective design uses a variety of design elements to engage readers as well as to clarify information. Chapter 10 in this textbook discussed multimodal messages and the power that various modes\u2014images, text, color, video, sound\u2014have to help clarify and enhance the meaning of a message. For that reason, and because it\u2019s more visually appealing and interesting, you should think about how to use a variety of elements to draw readers\u2019 attention.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Importantly, you can still be consistent while drawing on a variety of design elements. Take color, for instance: a web page would be boring and more difficult to read if it were just one color throughout. However, if you use the same two or three colors consistently\u2014across various types of texts and content areas\u2014then you have a variety of colors that direct readers\u2019 attention without being overwhelming. Another way to use variety is through imagery, breaking up text blocks with photos and other graphics elements (icons, pie charts, tables, cartoons) that are relevant to the overall message and that help inform the readers\u2019 interpretation of the message.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Once again, it\u2019s important not to go overboard. When too many things are happening on a page, it\u2019s overwhelming for readers. Nothing is emphasized because there are too many elements to look at. Being strategic about the elements that should go on a page and how to utilize variety with a couple of different modes of communication will go a long way.<\/p>\n<h2 class=\"import-bh\">Quality<\/h2>\n<p class=\"import-paft\">It should probably go without saying that the elements that you do include on a page should be high quality, creating a professional look and feel. This relates to all of the design principles we\u2019ve discussed up to this point, but here let\u2019s focus specifically on pictures and videos. A quality photo, for instance, is one that is in focus and is a high enough resolution so that it isn\u2019t pixelated or blurry. It has a clear focal point with the image positioned appropriately, so that it fits comfortably into the frame. There wouldn\u2019t be anything in the foreground or in the background that would create a distraction. If you\u2019ve taken very many candid photos, you know that this is easier said than done. We often take photos that are slightly out of focus or where the lighting is off, so there isn\u2019t a good view of a person\u2019s face. Fortunately, there are photo editing tools that can help with some of these issues, but it\u2019s better to start with a high-quality image. The main point is to only include the best photos on your website or digital design.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">The same thing can be said for videos, which are an increasingly common way to engage visitors either on a website or through social media. Videos can be an excellent tool because they provide clear visuals that can help viewers see a particular process, event, or product. They can also create emotional connections as viewers see people\u2019s faces and hear their voices. However, there\u2019s a lot that goes into creating an effective video that reduces background noise, that creates interesting and dynamic scenes, that avoids \u201cdead air\u201d or transitions that are too slow as well as camera movements that are too fast or wobbly, that uses effective voice overs and sound effects, that has the appropriate lighting, that effectively integrates text and other visual elements, and so on. Once again, video editing tools have evolved significantly in the last few years, which makes it possible for anyone to enhance the quality of the videos they put online. There are also plenty of YouTube videos\u2014for video editing as well as photo editing techniques.<\/p>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\"><span class=\"import-sbhn\">Activity 14.1<\/span><\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>Let\u2019s put some of the design principles listed above into action. Review the <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId802\" href=\"https:\/\/www.fedex.com\/en-us\/open-account\/ag13398602.html?cmp=KNC-1001816-61-10-950-1110000-US-US-EN-BRZ0001Z01ZDR40&amp;gclid=Cj0KCQjwk7ugBhDIARIsAGuvgPaYSfRtTCauFjvPynrF5RT140dXxr-CesMUVNn3EsvpIzes9-NZEiQaAnI0EALw_wcB&amp;gclsrc=aw.ds\"><span class=\"import-url\">FedEx home<\/span> <span class=\"import-url\">page<\/span><\/a><\/span>\u2014or any other website of your choosing. You should go through the design principles listed above and consider how they are applied on the page. Which ones strike you as being the most effective in both engaging readers (both visually and emotionally) and helping them easily navigate the information on the page.<\/p>\n<p>Now reverse engineer the page by creating your own wireframe of the page structure. You can do this with a pencil and paper and really basic boxes and text blocks to represent the various elements.<\/p>\n<p>Now consider how the page might have been structured differently. Create a new wireframe that organizes the elements in a different way. Consider how you could utilize some of the other design principles listed above to engage readers in this new page design.<\/p>\n<\/div>\n<\/div>\n<h1 class=\"import-ah\">Other Design Theories<\/h1>\n<p class=\"import-paft\">While this chapter isn\u2019t intended to be an exhaustive resource on visual design, it would probably be helpful to at least mention some of the other design theories that could be useful in your decision-making process as you put together the visual elements of a web page, blog post, or digital ad. The principles listed above are the most basic and also the most foundational design principles that can be immediately applied to your digital writing and design projects. This section will mention other prominent design theories that may provide a deeper understanding of the audience perception and some of the nuances in your design choices that can have a significant impact.<\/p>\n<h2 class=\"import-bh\">Gestalt Design Principles<\/h2>\n<p class=\"import-paft\">Many of the principles identified above draw from <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId803\" href=\"https:\/\/www.britannica.com\/science\/Gestalt-psychology\"><span class=\"import-url\">Gestalt psychology<\/span><\/a><\/span>, which is the study of how people perceive design elements on a page to create meaning (Encyclopedia Britannica). Gestalt theory looks at the entire layout of a design and considers the way that elements work together to create meaning. Thus, elements aren\u2019t viewed in \u201cisolation\u201d but as contributors toward the entire message. There are seven <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId804\" href=\"https:\/\/www.manypixels.co\/blog\/post\/gestalt-principles-in-graphic-design\"><span class=\"import-url\">classic Gestalt principles<\/span><\/a><\/span>, some of which we\u2019ve already mentioned (ManyPixels), but they are listed briefly again here so they can be viewed all together:<\/p>\n<ul>\n<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Similarity.<\/strong><\/span> As already discussed, the principle of similarity helps readers group items together that have similar features. However, it can be used to make certain items stand apart from the group in some way.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Good figure of simplicity.<\/strong><\/span> Viewers will always reduce a complex design to its simplest form because it\u2019s easier to process. The ManyPixels blog uses the example of the Olympics logo, which most people will perceive as five overlapping circles as opposed to something more complex. This relates directly to the principles discussed above about limiting the amount of information and visual elements on the page. Simpler designs are much easier for readers to process and to remember.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Proximity.<\/strong><\/span> Viewers are more likely to group items together when they are near each other. This is a good way to demonstrate a relationship between these elements and also to make other elements\u2014spaced further away\u2014stand out.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Continuity.<\/strong><\/span> Our minds have the tendency to connect items if they follow the same line or curve. According to this principle, simply lining information up in a line from left to right or top to bottom, sometimes using actual lines or arrows to connect them, will help readers group items together and sequence how they process information.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Closure.<\/strong><\/span> For shapes and images that are disconnected in some way, viewers will automatically fill in the gaps so they can perceive the entire image. A classic example is a circle that is formed along a dotted line. Despite the fact that it isn\u2019t a closed circle, a viewer will automatically close the gaps to see the circle shape, instead of seeing a smattering of random dots.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Figure\/ground.<\/strong><\/span> When looking at a picture or other page layout, we will immediately try to discern what is in the foreground (the figure or focal point of the picture) and what is in the background. Obviously, the more important items that you want viewers to pay attention to should be in the foreground, contrasted in some way from the background.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Common fate.<\/strong><\/span> This principle states that people will tend to group items together that seem to be moving in or pointing in the same direction. A simple example might be italicized text that is all pointing in the same direction. We\u2019d be more likely to see that text as connected together because of the common angle of the font.<\/li>\n<\/ul>\n<figure style=\"width: 304px\" class=\"wp-caption alignnone\"><img src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/01\/image22.jpg\" alt=\"Demonstration of the Gestalt Principles\" width=\"304\" height=\"608\" \/><figcaption class=\"wp-caption-text\">Gestalt Design Principles, by Cara Miller (<a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY<\/a>)<\/figcaption><\/figure>\n<h2 class=\"import-bh\">Color Theory<\/h2>\n<p class=\"import-paft\">There are lots of different ways to talk about color and the effect it can have on the audience. For starters, there is a difference between hue (what we normally think of as the color of something\u2014e.g., green or blue) and other visual qualities, such as shade (light or dark) and saturation (how pale or bright the color appears). Obviously, colors that are more vibrant\u2014a brighter, more saturated color\u2014will have more visual weight and be more likely to draw the viewer\u2019s attention.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Color theory also relates to the emotions that different colors evoke in the audience. You probably already know that there are \u201cwarmer\u201d colors like red, orange, and yellow and \u201ccooler\u201d colors like blue, purple, and green. These colors can be used strategically to enhance a message or the overall tone of a design. Similarly, different colors are often associated with <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId805\" href=\"https:\/\/www.crowdspring.com\/blog\/small-business-branding-color\/\"><span class=\"import-url\">different meanings<\/span><\/a><\/span> (Bowman). Red is often associated with love, anger, or warmth. Yellow is often connected with happiness and excitement. And so forth. Color choice can have a significant impact on how a message is interpreted and the feelings that the audience associates with that message.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">Finally, color theory focuses on the ways that <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId806\" href=\"https:\/\/www.interaction-design.org\/literature\/topics\/color-theory\"><span class=\"import-url\">colors work together<\/span><\/a><\/span> to create an overall visual impression or experience (Interaction Design Foundation). The only way that one element would be emphasized using color is if other items were de-emphasized with contrasting colors that were less vibrant. There are also the dynamics of how different color combinations pair together to create complementary (opposing) or analogous (similar) effects. The main goal is to use a consistent color palette that has a variety of colors that work well together and to use color strategically throughout the design to create emphasis. As always, color choice is one key element in a much larger strategy to convey a particular message, build your brand, engage viewers, and evoke particular responses.<\/p>\n<h2 class=\"import-bh\">Typography<\/h2>\n<p class=\"import-paft\">As the name suggests, the study of typography relates to the way that text is designed so that a message is both readable and interesting. While the <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId807\" href=\"https:\/\/www.toptal.com\/designers\/typography\/typography-anatomy-infographic\"><span class=\"import-url\">particulars of typography<\/span><\/a><\/span>\u2014the different classifications of fonts and the different parts of a letter\u2014can be quite detailed and specific (Bowers), here we will focus on the primary considerations of typography, assuming that you will be making font selections instead of creating your own.<\/p>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">The main consideration when it comes to typography is readability. Obviously, the text comprises an important part of the overall message, and you want readers to be able to easily read it, from the largest headings and titles down to the smaller text blocks. There are a few basic strategies that will make the font easier to read:<\/p>\n<ul>\n<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Size.<\/strong><\/span> Obviously, the bigger the font, the easier it is to read. As previously mentioned, your titles and headings will be larger than some of the other text blocks and will therefore naturally pull readers\u2019 attention, but they should also be able to read the \u201csmaller\u201d print of an article or web page. A good rule of thumb for digital writing is to use 11-point font or larger. Of course, the size will vary depending on the context. If the text is going on a digital screen in an area where readers will be reading it from a distance, the font size will be significantly larger.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Font choice.<\/strong><\/span> As we\u2019ll discuss below, different fonts have different personalities that might enhance the emotional quality of your message, so it\u2019s probably okay to play around with different font styles for titles and ad copy where only a few words are selected and the font is relatively large. However, for larger blocks of text that require more sustained readability, it\u2019s much better to stick with a standard sans serif font, meaning that it doesn\u2019t have additional strokes and projections at the ends of a letter. For example, look at the two F\u2019s below. The one on the left is in a sans serif font, and the one on the right is in a serif font.<\/li>\n<\/ul>\n<div class=\"wp-nocaption alignnone\"><img class=\"alignnone\" src=\"http:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-content\/uploads\/sites\/64\/2024\/02\/image1-1.png\" alt=\"An example of a sans serif font and a serif font.\" width=\"337\" height=\"155\" \/><\/div>\n<p style=\"padding-left: 40px;\">As you can see, the serif font on the right has extra marks at the base and at the ends. While this might create a more formal look, it is harder to read, particularly for large text blocks in a smaller font. And obviously, the more pronounced and ornate the serfs become, utilizing lots of different swirls and other elements, the more difficult it would be to read.<\/p>\n<ul>\n<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Contrast.<\/strong><\/span> The final consideration with readability is about contrast, so that the lettering is set apart from the background enough so that it is easy to read. One of the biggest mistakes novice designers make is to use a font color that doesn\u2019t have enough contrast with the background\u2014a light gray font on a white background, for instance, or red font on a black background. There has to be enough contrast so that the text easily stands out. You\u2019d especially want to keep this in mind for text that goes over the top of an image. Once again, without the right contrast, it can be extremely difficult to read the text over an image. That\u2019s why many designers use the negative space of a picture, create drop shadows around the text, or use text boxes\u2014all of which can be used to increase the contrast so that the text stands out.<\/li>\n<\/ul>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">The other consideration with typography is about the overall emotional quality personality of various font styles and how they might be used to enhance your message. Again, readability is key, so you wouldn\u2019t use different font treatments for larger chunks of text, but for a title or a short line of ad copy, a unique font can have a significant effect on the audience\u2019s interpretation. It might help if you first consider the overall purpose and tone of the message, the impression that you are trying to create in the mind of the reader, and that will likely guide your font choices. Is the tone of the message serious? In that case, it might make sense to go with a more traditional sans serif font. Are you trying to demonstrate the elegance of a particular product or event? In that case, a more formal script font like Edwardian would be more appropriate. On the other hand, if you want to invite a bunch of children to a kid\u2019s birthday party, then you\u2019d want a font that seems playful and fun\u2014Curlz, for instance. While there are lots of different fonts to choose from that might create the right impression in your audience, there are definitely fonts that would be the wrong choice. Consider, for instance, a wedding invitation that is created in Curlz font. Instead of sending the message that the event would be formal and sophisticated, the invitation would probably create some confusion and maybe even some anxiety about what to expect.<\/p>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\"><span class=\"import-sbhn\">Activity 14.2<\/span><\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p class=\"import-sbaft\">Consider the list of messages below. What type of font do you think would be most appropriate for each one? Give an example for each one:<\/p>\n<ul>\n<li class=\"import-sbblf\">Job r\u00e9sum\u00e9<\/li>\n<li class=\"import-sbbl\">Yard sale sign<\/li>\n<li class=\"import-sbbl\">Graduation open house<\/li>\n<li class=\"import-sbbl\">Funeral bulletin<\/li>\n<li class=\"import-sbbl\">Ad for a neighborhood block party<\/li>\n<li class=\"import-sbbl\">Public service announcement about suicide awareness<\/li>\n<li class=\"import-sbbl\">Course syllabus<\/li>\n<li class=\"import-sbbl\">Divorce papers<\/li>\n<li class=\"import-sbbl\">\u201cCloseout\u201d sale<\/li>\n<li class=\"import-sbbl\">Feel free to come up with your own<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h1 class=\"import-ah\">Special Considerations for Digital Design<\/h1>\n<p class=\"import-paft\">As you put together designs that will be viewed on digital devices, there are a few special considerations that enhance usability:<\/p>\n<ul>\n<li class=\"import-blf\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">File sizes.<\/strong><\/span> We\u2019ve already discussed the fact that you should only use quality images and videos to engage viewers, but the other side of that is that higher-resolution images and high-quality videos are usually really big files that take up precious storage space and often result in longer loading times, which can quickly frustrate impatient users. Fortunately, web graphics don\u2019t need to be as high-resolution as print graphics (72 dpi compared to 300 dpi), which means the files will be significantly smaller. Further, saving the file as a .jpg or .png results in a smaller file than a .tif or a .psd file. For videos, there are online applications you can use to compress video files into something smaller. Alternatively, you might consider uploading video files to YouTube and then embedding the video link on your website, which means that the video will still play on your web page, but the video itself isn\u2019t housed there.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Cascading style sheets.<\/strong><\/span> With so many WYSIWYG (What You See Is What You Get) platforms, it\u2019s no longer necessary for you to know how to code a website in HTML to create one. Cascading style sheets describe a way of coding the elements on a web page so that they are consistent across different pages\u2014so that the title of each page, for instance, has the same font style, font size, color choice, and spacing. Most web platforms have these types of choices built in so that you can make selections that will be consistent across different pages of your website without having to know the HTML code. Utilizing these options will help you more easily create consistency and unity.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Hyperlinks and buttons.<\/strong><\/span> Here\u2019s where your design choices can leverage concepts that your audience is familiar with, and since your hyperlinks and buttons usually accompany your call to action\u2014inviting readers to take some sort of step toward your desired goal\u2014it\u2019s important that they recognize these elements. It\u2019s pretty simple, really. A hyperlink is usually in blue font, underlined. This is the universal signal that the text is a hyperlink to a relevant page, and following this convention will make it much more likely that readers will recognize the hyperlink and click it. Usually, pages are structured so that internal links open in the same screen, whereas external links will open up a new window, making it possible for readers to return to the original page. In that case, it\u2019s helpful to set up your hyperlinks so that they change colors once they have been clicked (maybe from blue to purple) so that readers can visually see where they\u2019ve already been. Similarly, buttons are more often used as the overall call to action\u2014to \u201cread more,\u201d to \u201capply now,\u201d to \u201csubscribe,\u201d and so on. While some of the more subtle style choices might vary, it would be to your benefit to make your buttons look similar\u2014not only from one page to the next but also in comparison to other websites.<\/li>\n<li class=\"import-bl\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Mobile responsiveness.<\/strong><\/span> A <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId808\" href=\"https:\/\/www.constantcontact.com\/blog\/website-mobile-friendly-vs-mobile-responsive\/\"><span class=\"import-url\">mobile-responsive website<\/span><\/a><\/span> is one that reformats for maximum readability and usability depending on the user\u2019s device (Constant Contact). So instead of displaying the same, shrunken-down version of the home page on your cell phone, the overall format changes so that key items are bigger and formatted vertically, so it\u2019s easier to scroll through and click on the items that you want. This is helpful not only when going from a laptop to a cell phone but also when switching from one screen size to the next or one type of browser to the next. It ensures that the items are reformatted appropriately. Once again, many web platforms are mobile responsive and make it possible for you to toggle back and forth between multiple views as you put a page together.<\/li>\n<li class=\"import-bll\"><span style=\"border: none windowtext 0pt; padding: 0;\"><strong class=\"import-b\">Testing.<\/strong><\/span> One great thing about digital design is that it\u2019s relatively easy to change. Content strategists and web developers are constantly \u201ctesting\u201d the effectiveness of their pages, not just through form feedback but also through various metrics that show how long viewers stayed on a specific page, how many people clicked on the CTA, and so on. Playing around with different versions and monitoring the results lets you gauge how your design choices are landing with your audience and to make improvements along the way.<\/li>\n<\/ul>\n<p class=\"import-p\" style=\"text-indent: 36pt;\">There is a lot to consider when it comes to the design of your digital projects, and sometimes having so many options can be overwhelming. The good news is that there are lots of online resources that you can draw from as well as successful (and unsuccessful) websites where you can draw inspiration and remind yourself of various pitfalls.<\/p>\n<div class=\"textbox textbox--examples\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Discussion Questions<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<ol>\n<li>What is the user experience (UX) and how does the overall \u201cdesign\u201d of a website influence the user experience? Consider the different types of \u201cdesign\u201d discussed in the introduction.<\/li>\n<li>How does the design of a message relate to rhetoric? Be specific about how it relates to some of the terms we\u2019ve already discussed: purpose, audience, genre, persuasive appeals, and so on.<\/li>\n<li>The design principles identified in this chapter are based on research in the area of psychology and behavioral sciences that look closely at how people process and respond to information. Explain this reciprocal relationship between audience perspective and design.<\/li>\n<li>The chapter lists six foundational principles of web design. Identify each one, and give a brief overview of what each one means and how it might be applied.<\/li>\n<li>What is a wireframe and how might it be used to help you plan your design?<\/li>\n<li>Many of the foundational web design principles identified near the beginning of the chapter overlap in some ways. For instance, the principles of page structure and visual hierarchy both relate to the arrangement of elements on the page and strategies to emphasize important ideas. What other ideas overlap across some of the design strategies discussed in this chapter?<\/li>\n<li>Explain how a digital design can have <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">both<\/em><\/span> variety and consistency.<\/li>\n<li>What are the Gestalt design principles? How do they relate to some of the principles discussed in the first part of the chapter?<\/li>\n<li>In what ways do the sections on color theory and typography build on the design principles already discussed?<\/li>\n<li>Explain some of the special design considerations that are unique to digital writing. Can you think of any others that aren\u2019t specifically mentioned in the chapter?<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\"><span style=\"text-align: initial; font-size: 1em;\">Sources<\/span><\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Babich, Nick. \u201cWeb Page Design: A Comprehensive Guide.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Adobe.com<\/em><\/span>, 24 Nov. 2020, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId809\" href=\"https:\/\/xd.adobe.com\/ideas\/principles\/web-design\/web-page-design\/\"><span class=\"import-url\">https:\/\/xd.adobe.com\/ideas\/principles\/web-design\/web-page-design\/<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Boag, Paul. \u201c10 Good Website Layout Ideas (with Examples).\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">WebsiteSetup.org<\/em><\/span>, 11 Dec. 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId810\" href=\"https:\/\/websitesetup.org\/website-layouts\/\"><span class=\"import-url\">https:\/\/websitesetup.org\/website-layouts\/<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Bowers, Micah. \u201cDissecting the Intricacies of Typography Anatomy (with Infographic).\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Toptal.com<\/em><\/span>, n.d., <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId811\" href=\"https:\/\/www.toptal.com\/designers\/typography\/typography-anatomy-infographic\"><span class=\"import-url\">https:\/\/www.toptal.com\/designers\/typography\/typography-anatomy-infographic<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Bowman, Amanda. \u201cHow to Choose Brand Colors and What Color Says about Your Business.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">CrowdSpring.com<\/em><\/span>, 4 May 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId812\" href=\"https:\/\/www.crowdspring.com\/blog\/small-business-branding-color\/\"><span class=\"import-url\">https:\/\/www.crowdspring.com\/blog\/small-business-branding-color\/<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Bradley, Steven. \u201cDesign Principles: Compositional, Symmetrical, and Asymmetrical Balance.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">SmashingMagazine.com<\/em><\/span>, 10 Mar 2017, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId813\" href=\"https:\/\/www.smashingmagazine.com\/2015\/06\/design-principles-compositional-balance-symmetry-asymmetry\/\"><span class=\"import-url\">https:\/\/www.smashingmagazine.com\/2015\/06\/design-principles-compositional-balance-symmetry-asymmetry\/<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Constant Contact. \u201cMobile-Friendly vs. Mobile-Responsive.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">ConstantContact.com<\/em><\/span>, 22 Dec. 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId814\" href=\"https:\/\/www.constantcontact.com\/blog\/website-mobile-friendly-vs-mobile-responsive\/\"><span class=\"import-url\">https:\/\/www.constantcontact.com\/blog\/website-mobile-friendly-vs-mobile-responsive\/#:~:text=Mobile%2Dresponsive%20%E2%80%93%20Websites%20that%20are,pictures%20are%20resized%20and%20reformatted<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Crestodina, Andy. \u201cWeb Design Standards vs. Website Best Practices: Our Review of 500 Sites [New Research].\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">LinkedIn.com<\/em><\/span>, 27 Apr. 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId815\" href=\"https:\/\/www.linkedin.com\/pulse\/web-design-standards-vs-website-best-practices-our-500-crestodina\/\"><span class=\"import-url\">https:\/\/www.linkedin.com\/pulse\/web-design-standards-vs-website-best-practices-our-500-crestodina\/<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Encyclopedia Britannica. \u201cGestalt Psychology.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Britannica.com<\/em><\/span>, 2 Dec. 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId816\" href=\"https:\/\/www.britannica.com\/science\/Gestalt-psychology\"><span class=\"import-url\">https:\/\/www.britannica.com\/science\/Gestalt-psychology<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">FedEx. <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Fedex.com<\/em><\/span>, 2023, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId817\" href=\"https:\/\/www.fedex.com\/en-us\/open-account\/ag13398602.html?cmp=KNC-1001816-61-10-950-1110000-US-US-EN-BRZ0001Z01ZDR40&amp;gclid=Cj0KCQjwk7ugBhDIARIsAGuvgPaYSfRtTCauFjvPynrF5RT140dXxr-CesMUVNn3EsvpIzes9-NZEiQaAnI0EALw_wcB&amp;gclsrc=aw.ds\"><span class=\"import-url\">https:\/\/www.fedex.com\/en-us\/open-account\/ag13398602.html?cmp=KNC-1001816-61-10-950-1110000-US-US-EN-BRZ0001Z01ZDR40&amp;gclid=Cj0KCQjwk7ugBhDIARIsAGuvgPaYSfRtTCauFjvPynrF5RT140dXxr-CesMUVNn3EsvpIzes9-NZEiQaAnI0EALw_wcB&amp;gclsrc=aw.ds<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Interaction Design Foundation. \u201cWhat Is Color Theory?\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Interaction-design.org<\/em><\/span>, n.d., <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId818\" href=\"https:\/\/www.interaction-design.org\/literature\/topics\/color-theory\"><span class=\"import-url\">https:\/\/www.interaction-design.org\/literature\/topics\/color-theory<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Khazanova, Alina. \u201c20 Principles of Website Design Every Web Professional Should Know.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Elementor.com<\/em><\/span>, 23 Jan 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId819\" href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\"><span class=\"import-url\">https:\/\/elementor.com\/blog\/principles-of-website-design\/<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">ManyPixels. \u201cGestalt Principles in Graphic Design.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">ManyPixels.com<\/em><\/span>, 9 June 2022, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId820\" href=\"https:\/\/www.manypixels.co\/blog\/post\/gestalt-principles-in-graphic-design\"><span class=\"import-url\">https:\/\/www.manypixels.co\/blog\/post\/gestalt-principles-in-graphic-design<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Norman, Don, and Jakob Nielsen. \u201cThe Definition of User Experience (UX).\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Nielsen Norman Group<\/em><\/span>, 2023, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId821\" href=\"https:\/\/www.nngroup.com\/articles\/definition-user-experience\/\"><span class=\"import-url\">https:\/\/www.nngroup.com\/articles\/definition-user-experience\/#:~:text=Summary%3A%20%22User%20experience%22%20encompasses,it<\/span><span class=\"import-url\">s%20services%2C%20and%20its%20products<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">Technology Transformation Services. \u201cWireframing.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">Usability.gov<\/em><\/span>, 14 Mar 2023, <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId822\" href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/wireframing.html\"><span class=\"import-url\">https:\/\/www.usability.gov\/how-to-and-tools\/methods\/wireframing.html#:~:text=A%20wireframe%20is%20a%20two,styling%2C%20color%2C%20or%20graphics<\/span><\/a><\/span>.<\/p>\n<p class=\"hanging-indent\" style=\"padding-left: 40px;\">USA.gov. \u201cMaking Government Sources Easier to Find.\u201d <span style=\"border: none windowtext 0pt; padding: 0;\"><em class=\"import-i\">USA.gov<\/em><\/span>, n.d., <span style=\"border: none windowtext 0pt; padding: 0;\"><a class=\"rId823\" href=\"https:\/\/www.usa.gov\/\"><span class=\"import-url\">https:\/\/www.usa.gov\/<\/span><\/a><\/span>.<\/p>\n<\/div>\n<\/div>\n","protected":false},"author":3,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":51,"_links":{"self":[{"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/pressbooks\/v2\/chapters\/67"}],"collection":[{"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/wp\/v2\/users\/3"}],"version-history":[{"count":14,"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/pressbooks\/v2\/chapters\/67\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/pressbooks\/v2\/chapters\/67\/revisions\/355"}],"part":[{"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/pressbooks\/v2\/parts\/51"}],"metadata":[{"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/pressbooks\/v2\/chapters\/67\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/wp\/v2\/media?parent=67"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/pressbooks\/v2\/chapter-type?post=67"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/wp\/v2\/contributor?post=67"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.palni.org\/writingfordigitalmedia\/wp-json\/wp\/v2\/license?post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}