Are you new to the world of website design for business? Want to get up to speed with the terminology used by those in the industry?

Pagemodo share the terminology you need to know in this infographic.

Here are some of the terms they cover:

• Below the fold
• Responsive
• Resolution
• Web colours
• Web safe fonts

Check out the infographic for more.

 

In the world of design, effective communication is key. Whether you’re working with a team of designers or collaborating with clients, knowing the right design terminology can make discussions smoother and help you express your ideas clearly.

In this blog post, we’ll explore the essential design terms you need to know to talk like a designer confidently. From the design process and the visual elements to web-related concepts and common acronyms, we’ve got you covered.

 

Wireframes

Wireframes are skeletal, low-fidelity representations of a design layout, often in black and white or grayscale. They serve as a blueprint for the structure and layout of a design, showcasing the placement of elements like buttons, images, and text without focusing on the visual details.

Wireframes are instrumental in the early stages of the design process, as they help designers and stakeholders conceptualize and refine the user experience.

 

Comps

Comps, short for comprehensive layouts, are high-fidelity design mockups that show how the final product will look. Unlike wireframes, comps feature detailed visuals, colors, typography, and images, providing a more accurate representation of the final design.

Comps are crucial when presenting design ideas to clients or team members for feedback and approval.

 

Prototype

A prototype is a working model or interactive representation of the final design. Prototyping allows designers to test the usability and functionality of their designs before development. It helps identify potential issues and provides an opportunity to refine the user experience.

Prototypes can range from simple click-through demos to fully interactive simulations.

 

Bleed

Bleed is the extra area beyond the edge of a printed design that allows for a margin of error during the printing and trimming process. Design elements extending to the bleed ensure that there are no unwanted white borders when the design is trimmed to its final size.

 

Grid

The grid is a foundational design tool that provides a framework for organizing elements on a page. It is a system of horizontal and vertical lines that create a series of intersecting points, guiding the placement of content and ensuring visual harmony.

Grids help maintain consistency and balance in a design.

 

White Space

White space, also known as negative space, refers to the empty areas between design elements. It is a crucial aspect of design, as it improves readability, enhances visual appeal, and gives content room to breathe.

Properly using white space can significantly impact the overall aesthetic and user experience.

 

Gradient

A gradient is a gradual blend of two or more colors, transitioning smoothly from one to the other. Designers use gradients to add depth, dimension, and visual interest to elements like backgrounds, buttons, and icons. Gradients can be subtle or bold, depending on the design’s intent.

 

Padding

Padding is the space between the content of an element and its border. It helps create visual separation and breathing room around elements, contributing to better readability and a more organized layout.

 

Margin

Margin refers to the space between elements on a page or within a container. It defines the distance between different sections or elements, helping to establish a sense of hierarchy and order.

 

Leading

Leading is the vertical space between lines of text. It determines the distance from one baseline to the next and plays a vital role in text legibility and readability. Adjusting leading can influence the overall feel and appearance of the text.

 

Kerning

Kerning is the process of adjusting the space between individual characters in a piece of text. Proper kerning ensures a visually pleasing and balanced presentation of the text.

 

Typography

Typography encompasses the art and technique of arranging type to make written language legible, readable, and visually appealing. It involves selecting fonts, setting font sizes, line lengths, and choosing typographic hierarchy to create effective communication.

 

Font

A font is a specific style of typeface within a type family. It includes variations such as bold, italic, and regular. Selecting the right font is crucial as it sets the tone and personality of the design.

 

Below the Fold

“Below the fold” refers to the portion of a web page that is not initially visible on the screen without scrolling. Designers need to consider placing important content and calls-to-action above the fold to capture users’ attention quickly.

 

Responsive

Responsive design is an approach that ensures a website or application adapts and displays appropriately on various devices and screen sizes, such as desktops, tablets, and smartphones.

 

Resolution

Resolution refers to the clarity and sharpness of images on screens or in print. It is usually measured in pixels per inch (PPI) for screens or dots per inch (DPI) for print.

 

Web Colours

Web colors are colors specified using hexadecimal values (#RRGGBB). They are widely used in web design and development, allowing consistency across different platforms and browsers.

 

Web Safe Fonts

Web safe fonts are fonts that are commonly available on most operating systems and browsers. Using web safe fonts ensures that the chosen typeface will display correctly for all users.

 

CMYK

CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a color model used in printing, where different percentages of these colors are combined to create a full spectrum of hues.

 

RGB

RGB stands for Red, Green, and Blue. It is a color model used in digital media, where different combinations of these colors create a wide range of colors on screens.

 

DPI

DPI stands for Dots Per Inch and refers to the resolution of images in printed materials. Higher DPI values result in more detailed and crisper prints.

 

UI

UI stands for User Interface. It encompasses the visual elements and layout of a digital product that users interact with, including buttons, icons, and menus.

 

UX

UX stands for User Experience. It focuses on designing products and interfaces that provide meaningful and satisfying experiences for users, considering factors like usability, accessibility, and user satisfaction.

 

JPEG

JPEG (Joint Photographic Experts Group) is a common file format for images, widely used on the web and in digital photography. It uses lossy compression to reduce file size while maintaining decent image quality.

 

GIF

GIF (Graphics Interchange Format) is a file format commonly used for short animations and low-resolution graphics with a limited color palette. GIFs are widely shared on social media and messaging platforms.

 

PSD

PSD stands for Photoshop Document. It is the native file format of Adobe Photoshop, allowing designers to save their work with layers, masks, and other editing capabilities intact.

 

PDF

PDF (Portable Document Format) is a file format designed to display documents consistently across various platforms and maintain the intended layout and design.

 

PNG

PNG (Portable Network Graphics) is a lossless image format that supports transparency, making it ideal for graphics and images with sharp edges or text.

 

WEBP

WEBP is a modern image format developed by Google that offers both lossy and lossless compression options. It provides high-quality images with smaller file sizes, improving web page loading times.

 

Conclusion

Understanding the terminology used in the world of design is essential for effective communication and collaboration with designers, clients, and other stakeholders. By familiarizing yourself with the process, visual elements, typography, web-related concepts, acronyms, and file formats mentioned in this blog post, you’ll be better equipped to talk like a designer and express your ideas clearly and confidently.

Whether you’re discussing wireframes, gradients, kerning, responsive design, or PDF files, this knowledge will empower you to be an effective communicator in the world of design. Happy designing!