Design Terminologies: Glossary of Design Terms

Design is an intriguing subject for a lot of people. The process of designing something either old or new can be extremely time-consuming and takes years of practice to master the art. There are a myriad of kinds of design projects, such as graphic design, architecture and even graphic.

The term “design” refers to the design process. Terminologies are the many terms and concepts employed in the field of design. They may include, but not be restricted to texturing, color, typography composition, perspective, and more. Design Terminology is described as a term or phrase used by someone who doesn’t have the knowledge of how to use the language of design. Design Terminologists are those who are knowledgeable about terms in their field and apply the term with a great deal of expertise.

There are numerous terms used in the field of design employed in the design field that might be unfamiliar to you. Understanding these terms and their definitions will enable you to more effectively communicate with the designer and also know what he or she is discussing when they employ them.

Designers make use of a variety of words and phrases in order to convey their ideas. Knowing what they mean is essential to effectively communicate with designers. Below is a list commonly used design terms and definitions:

• Wire–frame A wire-frame is the layout in the way it appears on a monitor without text, color and other formats. It’s an image representation of the website like an uncolored sketch with no shadows or textures. A first design was created to demonstrate how the elements connect in a web page.
• User Flowchart The user flowcharts provide insights into how visitors interact with your website. It will give you useful details on where to put information and best way to phrase it in a way that visitors can quickly comprehend the message you’re trying to convey to them.
• Front-end development The moment when the actual code is developed for your site or application interface. This is the place where all of our visual designs are translated to HTML, CSS, and any other programming language to be used to create the final product.
• Content Inventory The Content Inventory is basically a list of all the content that was compiled to be used on your site or application. It is compiled by conducting searches on rival websites to determine what other companies have to say about specific topics, or by interviewing employees, asking for feedback from customers, or using analytics data to identify the most popular pages on your website.
• Layout: The location as well as the arrangement and arrangement of the elements on a webpage.
• Balance: A general concept of equilibrium that is created by the use of asymmetrical or symmetrical arrangement of elements on a webpage.
• Proximity Proximity refers to the relative closeness or distance between objects that are displayed next to each adjacent on the webpage. Proximity is used to signal the importance (groups that are larger together) or connections (linking objects by drawing lines).
• Alignment All things are correctly aligned. Align your borders or align the edges of your text box using this tool, and so on…
• Repetition The process of repeating an element’s dimensions or shape, color or pattern, or pattern over and over (a technique that is often employed to create unity).
• Contrasting: Making a distinct distinction between elements through contrasting scales or colors.
• White Space The space which is left around the elements on the page, such as gutters and margins. Sometimes it’s referred to “negative space” because it’s not filled with any type of content.
• Rule of Thirds is a technique that allows you to divide a webpage into thirds both horizontally and vertically making an invisible grid linking the points at which vertical and horizontal lines intersect. Generally speaking, crucial visual content should be placed close to the intersection of one or more points, rather than right in the middle of the layout (so it doesn’t look too static). It can also be helpful to put things off-center in order to create visually appealing compositions, which are frequently used in advertising.
• 8-bar greyscale A technique for showing your client the design’s appearance when they work on it, instead of showing them the the final art. Since color may cause issues with communication, the 8-bar gray scale lets the client know where components of your layout are without being distracted by color choices or the font’s design.
• Line art Line art is an image that was created using lines alone . The vector graphics (SVG) or Flash files are considered line art due to the fact that they don’t contain pixels. Instead, the forms and pathways are filled in with directions for creating smooth curves and angles.
• Grid The term is used to describe when objects are placed on a webpage in symmetry lines that are reminiscent of the grid lines that are found in printed media.
• Hierarchy An approach to determining what’s essential by placing specific elements higher or lower , with space between them to emphasize the importance of it. It also helps to guide users within your designs.
• Scale as the size grows the importance increases too. Designers employ this principle to create hierarchy by incorporating sizes that differ (large titles can be considered more valuable than smaller titles for instance). If you can read all the words with no difficulty, they’re probably roughly the same size…which creates a layout that looks boring. Make sure your text isn’t too tiny!
• Sketch of a Thumbnail: A tiny version of layout design that can be used to quickly display to clients the design layout of their design.
• mock-ups: A visual representation of what the actual product will look like , based on the other products of the same type (i.e. the way Coca Cola displays their product). Mock-ups can be utilized to serve as “proofs” to get final approval from the client prior to beginning designing the product.
• Resolution The amount or density of pixels that are available within each inch of the display space; it is also a reference to how many pixels can be found within a particular area and/or distance (i.e. 50 pixels per inch).
• DPI Dots per inch that is used to talk about printing equipment such as scanners, printers and screens. It’s a method of determining the amount of detail that can be printed on a printed sheet however it’s not always identical to PPI (see PPI definition).
• PPI pixels per inch that is used to talk about computer screens or digital images. It is a measure of the number of pixels that can be found within an area. It is generally accepted that making an image with 100 Pixels by 100 Pixels can give sharp edges. However, 200×200 gives more of a smooth edge (assuming that you’re working with less visual complexity and normal screen resolutions, like 96).
• Pixels is the smallest element in an image in digital format. Pixel is derived directly from “picture element.” Each pixels is composed of three components that are assigned distinct colors (red green, blue and red).
• Crop An easy way to reduce the size of your artwork by removing background space surrounding it. The process of cropping directly impacts the resolution you can get for your end-to-end output (i.e. printing or downloading). If you decide to cut something away, you’ll have to alter the size so that everything falls within the boundaries of the preset you’ve chosen for yourself (example 300 250 pixels)
• Stock photo/art Photos found on the internet that are available for no cost (no copyright concerns) in the event that appropriate credit is given. according to the source of their origin the stock photos are royalty-free or rights-managed. Royalty free implies that the copyright is transferred to you while rights managed means that the specific restrictions to usage are stated with every photo.
• Font A typeface (i.e. Helvetica) along with its variations styles (bold italic, bold, etc.) Also, it refers to the typeface “family” consisting of all variations of a specific typeface (i.e. Helvetica Neue).
• Tint The addition of white or tinting some thing lighter will make it look lighter while adding black or tinting something darker can make it darker. Also referred to as shade.
• Monochromatic A combination that consists of just one hue that has different shades of gray, or a neutral color that is added to create tones, tints or shades. Most often, monochromatic use shades, tints, or shadows in order to give the impression of various shades.
• Grayscale The range that includes different colors within the black and white. In the absence of colors, it can also be known as tone or shade.
• Analogous Three colors which are located next to one another within the color wheel i.e red-orange-red. Two analogous colors are in direct opposition to one another on the wheel of color (i.e orange-green)
• Complementary colors that are exactly opposite from one another within the circle of colors (i.e. i.e orange and blue or yellow and purple). Numerous designers employ triadic or complementary schemes in their designs to provide an additional choice when choosing the right palette. Triadic schemes are composed of three colors that are equal on the wheel of color (i.e blue-green-yellow)
• Gradient Gradual or graduated changes in shade, hue, intensity, tone or the brightness of two or more hues. Blends or fades like a gradient (color blends to another hue).
• Opacity The degree to which the design appears (or how much it obscures what’s beneath it). Higher transparency = lower opacity 100% opacity means invisibility, whereas zero opacity is solid or not transparent in any way.
• CMYK The standard four-color model that is used in printing inks to create most printed materials you see nowadays (newspaper magazines, newspapers and more.). CMYK is a shorthand as Magenta Yellow black and Cyan (the K is for key, since it is the symbol for black when printing in four colors; without it, we’d only need only three hues instead of four colors).).
• landing page is a specific website page that directs users to click the link to your website so they can complete your action(s) you would like them to complete. The content of this page should be focused on convincing people to take this desired task, for example “sign up,” “order now,” or similar .
• The user’s interface (UI): Refers to the components and elements on a screen that aid users navigate their way through an interface.
• Render graphics Also known as bitmap images, or pixel images. they are composed of tiny pixels that are not able to be changed after being created with any editing software that you can employ in order to make vectors. Use raster formats for photos. Avoid using these for illustrations or logos since you’ll not have the flexibility to modify it in the future if you need to.