Layout Treatments2:49 with Hope Armstrong
Let's go beyond plain paragraphs and explore different layout treatments.
Let's go beyond paragraphs. 0:00 Anytime there's a list, 0:02 you can opt to make it more engaging by styling it as a bulleted or numbered list. 0:04 And pull quotes help break up the monotony of long columns of 0:09 text ir bringing emphasis to a message. 0:13 Hanging punctuation requires characters to be positioned outside the margin edge. 0:17 This is commonly used for pull quotes and 0:21 bulleted list to create an event visual edge. 0:24 For example, hanging quotes keep the left alignment balance so 0:27 it increases readability in the text. 0:32 A quotation mark that is flush with a text like we see here can interrupt the left 0:34 margin and disrupt the rhythm for the reader compared to the one that is not. 0:39 To keep quotation marks clear of the edges, 0:43 we can give the text a negative text indent. 0:46 We also have the option to hang the list markers and lists, 0:49 which can help the flow of text because the margin edge is well defined and 0:53 continuous, compared to one that is indented. 0:58 Either one is acceptable, so it's really up to us to go with what feels right. 1:01 Text and list items should also be consistently aligned. 1:06 If a list item runs more than one line of text and isn't aligned well, 1:10 then reading flow can be interrupted because our eyes look for straight lines. 1:15 Make sure the list markers are away from the edges of text, which will make for 1:20 a much cleaner reading experience. 1:25 Another layout trick is using horizontal rules to create clear sections of content. 1:27 A horizontal rule is a divider that can spread across a column. 1:33 It can spread the full width or only cover a portion. 1:37 It can be a simple line or something more innate. 1:41 Check out this example by Jules Forrest. 1:45 The horizontal rule above and 1:48 below the pull quote give the piece visual interest and emphasize the quoted text. 1:50 When combining text with an image, 1:55 play around with how the text wraps around the image. 1:57 In addition to forming rectangular paragraphs around an image, 2:01 you can make the text glide along the edge of the object in the image. 2:05 Check out this design by Jen Simmons. 2:09 The text forms a rounded edge which wraps around the tomato. 2:11 Finally, the last example I want to show you is tables. 2:16 Tables are an excellent way to show tabular data and columns and rows. 2:21 It helps readers compare content as it easily organizes data on the screen. 2:26 The trick with tables is to use borders sparingly. 2:32 Check out the pricing table for a slack. 2:35 The columns are subtle and 2:39 the rows are more defined to help you compare the features. 2:40
You need to sign up for Treehouse in order to download course files.Sign up