Simplifying technical language for UI/UX Designers

If you have worked closely with web developers, you may have experienced their use of technical terms that might seem like a foreign language.

But don’t worry, I’m here to explain some of the most common terms that you, as a UI/UX designer, should be familiar with.

Understanding these terms will enhance your skills as a designer and improve your collaboration with developers.

Let’s get started!

1. Margin

Margin is the space outside the boundary of an element. It creates distance between that element and other elements around it.

Example: When arranging elements such as buttons or images on your canvas, maintain consistent spacing between them.

You can adjust the margin by dragging the elements apart or using alignment tools for consistent spacing.

For example, when designing a navigation bar or banner section, include margins for space around the elements to prevent them from appearing too close to each other or near the edge of the screen.

2. Padding

Padding is the space inside the boundary of an element, between the content (like text or an image) and the edge of that element.

Example: When working with a navigation bar that includes text elements, a logo, and icons, consider adjusting the padding to improve its appearance.

Increasing the inner spacing within the navbar can create a more balanced and easily readable look.

For example, setting a 24px padding on the top and bottom, and adding a 36px padding on the left and right, will create balanced spacing around the nav element.

3. Border

A border is a line that goes around the edge of an element, helping to define its boundaries.

Borders can vary in thickness, style, and color.

Example: When designing a card or input field component, you might want to add a border to make it stand out against the background.

This border provides a clear boundary for the input field, making it easier for users to recognize where they need to click or type.

You can easily add a border by selecting the rectangle and applying a stroke, setting the thickness, color, and style (solid, dashed, etc.).

For example, adding a 2px solid black border will create a clear outline around the input field, making it visually distinct.

4. Border-Radius

Border-radius is a property that allows you to round the corners of an element, making them less sharp and giving your design a softer look.

It’s a small detail, but it can make your designs feel more modern and friendly.

Example: If you’re designing a rectangular button or card, by default, its corners are sharp and right-angled. To soften the look, you can apply a border-radius.

For example, setting the border-radius to 20px will round the button’s corners, giving it a more modern and friendly appearance.

5. Font Family

A font family is defined by the specific typeface you choose, such as Arial, Times New Roman, or Helvetica.

Example: When working on a design, you need to select a font family for different text elements to maintain consistency in your design.

For example, opt for a clean and modern font like Inter Tight for the body text to ensure readability and style.

This choice of font family ensures that all the text on the site has a unified look and feel. You can set this font as a global style in Figma or XD, which makes it easy to apply across multiple text layers.

6. Grid System:

A grid system is a framework that divides a webpage into a series of columns and rows to help align and organize content consistently.

When you use a grid in your design tool, you’re organizing elements within a structured framework.

Example: When designing a finance website, you may use a 12-column grid system to help you arrange elements such as text, images, and buttons in a balanced and visually appealing way.

For example, you could align a header to span across 6 columns while placing images in a 4-column width to ensure everything lines up perfectly.

7. Flexbox

Flexbox is a CSS layout model that allows elements to align and distribute space within a container, making it easier to create flexible and responsive layouts.

Example: In Figma or XD, you can use auto-layout (Figma) or stacks (XD) to simulate Flexbox behaviour.

For example, if you’re designing a row of buttons, you can use auto-layout to space them evenly across the container. As you resize the container, the buttons adjust their spacing automatically, just like Flexbox.

This is especially useful for designing responsive components that need to look good on any screen size.

GIF by Azubuike Duru

8. SVG

SVG (Scalable Vector Graphics) is a file format that uses XML to define vector-based graphics, which can scale without losing quality.

Example: Imagine you have created a logo for a website. If you save it as an SVG (Scalable Vector Graphics) file, it can be resized to any scale without losing its quality.

This means that the SVG logo can be used on your website at any size, whether it’s for a tiny favicon or a large hero image, without appearing blurry or pixelated.

This ensures that your logo will appear sharp and clear on all devices, ranging from big monitor displays to small mobile screens.

9. Rem and Em

Rem and Em are relative units in CSS used for sizing elements like fonts, paddings, and margins. Rem is based on the root element’s font size, while Em is relative to the font size of its parent element.

Example: Although Figma and XD don’t use rem or em directly, you can achieve a similar effect by maintaining consistent font sizes and scaling them uniformly throughout your design.

For example, if you set a base font size (e.g., 16px) and proportionally scale headings or buttons, you are essentially replicating the behaviour of rem or em in code.

This method helps maintain design consistency across various components and screens.

Conclusion

Knowing how terms like margin, padding, and responsive design apply to your work in Figma or Adobe XD can help bridge the gap between design and development.

This makes collaboration smoother and ensures that your designs are practical and easier to implement in the real world.

Keep learning, experimenting, and pushing the boundaries of what you can create.

Hi there! 👋🏻 I’m Bryson — a freelance UI designer sharing my freelancing journey and writing about UI Design topics

Need help with your design project? You can reach out via email or schedule a call with me here.

You can find me on LinkedIn, Instagram and Dribbble.

Don’t miss out on my weekly substack newsletter where I share freelancing tips and creative ideas.

Stay awesome, and bye for now! 👋

Check out my other articles:

9 Developer Terms That All UI/UX Designers Need To Know was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.