{"id":2597,"date":"2021-05-13T10:47:18","date_gmt":"2021-05-13T14:47:18","guid":{"rendered":"https:\/\/simplifiedblog.wpengine.com\/?p=2597"},"modified":"2023-08-24T02:55:16","modified_gmt":"2023-08-24T06:55:16","slug":"design-terms-to-get-you-started","status":"publish","type":"post","link":"https:\/\/simplified.com\/blog\/design\/design-terms-to-get-you-started","title":{"rendered":"Design Terms: A Must Read for Beginners!"},"content":{"rendered":"

When you enter the world of design<\/a>, there may be a lot of words and phrases that you are unfamiliar with. Learning these design terms can feel like learning a new language. What does analogous mean? How do you track a font?<\/p>\n

We at Simplified have created a handbook of commonly used terms you need to speak fluent designer!<\/p>\n

<\/span>Composition<\/strong><\/span><\/h2>\n

Composition is the building block of any design. Furthermore, It provides structure and navigational flow. To put it simply, it is the way your content is arranged. Composition follows six basic principles – proximity, white space, contrast, hierarchy, alignment, and repetition.<\/p>\n

<\/span>Proximity<\/strong><\/span><\/h3>\n

Proximity is a design term used to describe how you utilize the components in the visual space. In short, it is how your design elements are grouped together. For example, content that is not related to each other should be separated to increase the readability of your text.<\/p>\n

<\/span>White Space<\/strong><\/span><\/h3>\n

White space means negative space, or the empty space between your content, lines, and outer margins. It helps you define different sections and gives your design room to breathe.<\/p>\n

The example below highlights an excellent use of proximity and white space. The content is well composed, with enough white space in between!<\/p>\n

\"White<\/p>\n

Source: Studio Network\u00a0<\/a><\/p>\n

Related: Your Ultimate Guide to Typefaces: Serif vs. Sans Serif Fonts<\/a><\/p>\n

<\/span>Contrast<\/strong><\/span><\/h3>\n

Contrast points to the difference between two things. It is used to highlight or call attention to certain elements in the design. You can create contrast with colors, fonts, or the size of objects.<\/p>\n

<\/span>Hierarchy<\/strong><\/span><\/h3>\n

It is important to guide your user through your design by using different levels of emphasis. This is what designers call the hierarchy.\u00a0 Furthermore, it can be observed that important elements are usually made bigger, bold, or eye-catching in some way.<\/p>\n

<\/span>Alignment<\/strong><\/span><\/h3>\n

Alignment is a pretty straightforward design term: it is the position of design elements and content. It can be left, right, center, or justified (in which the text is formatted with a clean edge in both margins). A simple way to keep your alignment consistent is to first imagine your design on a grid and then place the components accordingly.<\/p>\n

\"Alignment\"<\/p>\n

Source: GCF Global<\/p>\n

<\/span>Repetition<\/strong><\/span><\/h3>\n

Repetition helps reinforce your brand identity throughout your designs by providing your user a consistent, trustworthy experience.<\/p>\n

Looking to establish your brand identity? Check out our Simplified guide to creating a brand strategy!<\/p>\n

<\/span>Typography<\/strong><\/span><\/h2>\n

\"Typography\"<\/p>\n

Source: Original<\/p>\n

<\/span>Serif Fonts<\/strong><\/span><\/h3>\n

Serif fonts are fonts that feature little strokes called serifs attached to the letters. Their classic look makes serif fonts the preferred choice in traditional designs.<\/p>\n

<\/span>Sans Serif Fonts<\/strong><\/span><\/h3>\n

Sans<\/em> is the French word for without. Hence, sans serif fonts do not have serifs attached to the letters. They\u2019re cleaner than serifs and thus are preferred on devices for their modern look.<\/p>\n

Learn more about the difference between Serif and Sans Serif fonts here!<\/p>\n

Related: 20 Best Fonts For Logos That Tell A Story<\/a><\/p>\n

<\/div>\n

<\/span>Display Fonts<\/strong><\/span><\/h3>\n

Display fonts<\/a> are commonly used in headings and come in various styles such as script, blackletter, all caps, and calligraphy. Their decorative style makes them the go-to choice for logos and titles rather than bodies of text. You can find them on invitations, save the dates, or graphic design posters.<\/p>\n

\"Display<\/p>\n

Source: 99designs\u00a0<\/a><\/p>\n

<\/span>Spacing<\/strong><\/span><\/h3>\n

The goal with spacing your content is to make your text comfortable to read. There are three type of spacing to remember:<\/p>\n

Firstly,<\/strong> Kerning: space between pairs of letters;<\/p>\n

Secondly,<\/strong> Leading: pronounced as ‘ledding’, is the space between lines of text; and<\/p>\n

Thirdly,<\/strong> Tracking: refers to the space between characters; also known as character spacing.<\/p>\n

<\/span>Baseline<\/strong><\/span><\/h3>\n

The baseline is the imaginary line that your text rests on.<\/p>\n

<\/span>Ascender and Descender<\/strong><\/span><\/h3>\n

The ascender is a design term used to describe the part of a lower-case letter that ascends above the word, such as in the letter ‘d’. The descender is the part of a lower case letter that descends below the word, such as in the letter ‘j’.<\/p>\n

\"Ascender<\/p>\n

Source: 99designs\u00a0<\/a><\/p>\n

<\/span>Color<\/strong><\/span><\/h2>\n

\"Color\"<\/p>\n

Source: pngitems\u00a0<\/a><\/p>\n

<\/span>Hue, Tint, Tone, and Shade: What’s The Difference?<\/strong><\/span><\/h3>\n

Hue describes the pure color. The tint is a hue with white added to it. The tone is a hue with grey<\/a> added to it, and the shade is a hue with black added to it.<\/p>\n

Here are some other design terms related to color:<\/p>\n