User Interface Design Fundamentals

Jun 1, 2026 3:00pm UTC (Check your timezone)

Theory

Instructors: Jess, Carmen, and Eda

Design

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

User Interface Design Fundamentals: What Are Common Design Terms to Help You Communicate with Designers?

Understanding basic design terminology is helpful for developers as they may work closely with designers.

Here are some general design concepts:

Layout is the way the visual elements such as text, images, and white space are arranged on the page or screen to convey a message. Designers think about the placement, size, and hierarchy of each element.

Alignment is how elements are placed in relation to one another. It helps the page look organized. Designers align elements along imaginary lines, edges, or a central point.

Composition is the way of arranging elements to create a harmonious design. The difference between layout and composition is that while layout simply focuses on the arrangement of elements, composition is about the artistic effect of this arrangement.

Balance is the distribution of visual weight within a composition. Designers focus on creating a balanced design through arrangement.

Hierarchy is the order of importance of the elements. The most important information should be noticed first, and designers can implement the visual hierarchy with size, color, contrast, alignment, white space.

Contrast helps to create visual distinction between elements and is also helpful for improving readability and overall accessibility.

White space (or, “negative space”) is the empty area surrounding the elements. White space doesn’t necessarily have to be white. Its main purpose is to improve the readability and the visual hierarchy.

Aside from these terms, there are also “user interface” and “user experience” that are more closely related to software development.

User interface (UI) is simply the way humans interact with computers. It includes the visual and interactive elements such as icons, buttons, images, and links.

User experience (UX) is about the feeling the users have when using a product. An intuitive, efficient, easy-to-use, and accessible application has a well-designed user experience.

User Interface Design Fundamentals: How Do You Create Good Background and Foreground Contrast in Your Designs?

Contrast is, simply put, the difference between two colors.

Colors that have higher contrast are more visually distinct, while those with lower contrast are more visually similar. For example, black and white have a high contrast ratio, but light blue and light purple have a low contrast ratio.

Web Content Accessibility Guidelines (WCAG) provide a standard for determining a contrast ratio that is accessible.

The AA standard is the bare minimum, and it requires text that has a contrast ratio of 4.5:1.

The AAA standard is better for accessibility, and it requires text to have a contrast ratio of 7:1.

While browser developer tools provide helpful indicators for contrast, a helpful website we can use is WAIM’s Contrast Checker.

We can also talk about the three aspects that impact the contrast ratio (we’ll talk about them more in the upcoming lessons):

User Interface Design Fundamentals: What Is the Importance of Good Visual Hierarchy in Design?

A clear visual hierarchy is helpful for making sure that the information is conveyed and consumed in the order that is intended.

For example, we can apply different font sizes to headings following the order of hierarchy. We can also use a “callout” to draw attention to a specific section on the page:

 1<h1>Understanding Visual Hierarchy</h1>
 2<p>Visual hierarchy helps users navigate and understand content by guiding their attention.</p>
 3
 4<h2>Heading Tiers</h2>
 5<p>Using different font sizes for headings creates structure and makes content scannable.</p>
 6
 7<h3>Level 3 Heading</h3>
 8<p>This smaller heading further breaks down the section without overpowering it.</p>
 9
10<div class="callout">
11  <strong>Tip:</strong> Use a callout box like this to highlight important notes or key takeaways.
12</div>
 1body {
 2  font-family: sans-serif;
 3  line-height: 1.6;
 4  padding: 20px;
 5  background: #f9f9f9;
 6  color: #333;
 7}
 8
 9h1 {
10  font-size: 32px;
11  margin-bottom: 10px;
12}
13
14h2 {
15  font-size: 24px;
16  margin-top: 20px;
17  margin-bottom: 8px;
18}
19
20h3 {
21  font-size: 18px;
22  margin-top: 15px;
23  margin-bottom: 6px;
24}
25
26p {
27  font-size: 16px;
28  margin-bottom: 12px;
29}
30
31.callout {
32  background-color: #fff3cd;
33  border-left: 5px solid #ffc107;
34  padding: 15px;
35  margin: 20px 0;
36}

We can further add a “call-to-action (CTA) button”, which is probably the element that we want to draw attention to the most:

1<div class="callout">
2  <strong>Don’t wait!</strong> Start your free trial today and see the difference.
3  <br>
4  <a href="#" class="cta-button">Start Free Trial</a>
5</div>
 1.callout {
 2  background-color: #e0f7fa;
 3  border-left: 5px solid #00acc1;
 4  padding: 20px;
 5  margin-top: 20px;
 6  text-align: center;
 7}
 8
 9.cta-button {
10  display: inline-block;
11  background-color: #00acc1;
12  color: white;
13  padding: 12px 20px;
14  font-size: 16px;
15  text-decoration: none;
16  border-radius: 4px;
17  margin-top: 10px;
18}
19
20.cta-button:hover {
21  background-color: #008b9a;
22}

User Interface Design Fundamentals: How Does Scale Work in Design?

The “scale” of something refers to its size.

Scaling is about the size that the elements have in relation to one another, and how they change with different screen sizes.

Using the correct scale is important for visual hierarchy. For instance, larger elements usually draw more attention.

An example: A banner image that’s designed on a desktop layout should be scaled down for mobile layouts if it conveys important information.

 1<img
 2  src="https://placehold.co/1200x400/png?text=Large+Banner+Image"
 3  alt="Banner"
 4  class="banner"
 5>
 6
 7<div class="content">
 8  <p>
 9    This banner image looks great on a large screen, but on smaller devices, it scales down automatically.
10    That way, it still delivers a strong visual impression without pushing the actual content off the screen.
11    Scaling images properly helps maintain balance and accessibility across layouts.
12  </p>
13</div>

(We’ll look at media queries in the upcoming lessons):

 1body {
 2  font-family: sans-serif;
 3  padding: 20px;
 4  background-color: #fefefe;
 5  color: #333;
 6}
 7
 8.banner {
 9  max-width: 100%;
10  height: auto;
11  display: block;
12  margin: 0 auto 20px auto;
13  border-radius: 8px;
14}
15
16.content {
17  max-width: 600px;
18  margin: 0 auto;
19  font-size: 16px;
20  line-height: 1.6;
21}
22
23@media (max-width: 600px) {
24  .banner {
25    max-width: 90%;
26  }
27
28  .content {
29    font-size: 15px;
30  }
31}

Scale is also helpful for interactivity. For example, if input elements in forms are too small for mobile layouts, people will have a difficult time using them.

User Interface Design Fundamentals: How Does Alignment Work in Design?

Alignment helps with the order and organization of elements. It’s also about creating a visual connection between elements such as text and images.

Basic alignment types are:

Left, right, and center alignments align the elements along a horizontal axis. Vertical alignment aligns the elements along a vertical axis.

Left alignment is usually used with text where each element is aligned to the left margin (for left-to-right languages).

1h1, h2, h3, p {
2  text-align: left;
3}

Right alignment is usually used for elements that are aligned to the right margin (for left-to-right languages, this could be displaying additional content like promotional banners).

1h1, h2, h3, p {
2  text-align: right;
3}

Center alignment is used to center elements on the page. It’s useful for headings, logos, etc.

1h1, h2, h3, p {
2  text-align: center;
3}

Justified alignment is when text is aligned to both the left and right margins. It’s usually used for articles to create a clean look.

1h1 {
2  text-align: center;
3  margin-bottom: 20px;
4}
5
6p {
7  text-align: justify;
8  line-height: 1.7;
9}

Vertical alignment is used to align the elements along a vertical axis. For example, it can be used for a contact form to align the form inputs.

(We’ll learn Flexbox in upcoming lessons!)

1form {
2  display: flex;
3  flex-direction: column;
4  gap: 15px;
5}

User Interface Design Fundamentals: What Is the Importance of Whitespace in Design?

White space is important to create a balance between the elements on the page.

For example, white space around a call-to-action (CTA) button separates it from the other elements on the page and helps draw more attention to it.

There are different types of white space:

Macro white space is the space between larger elements such as images, text blocks, and buttons.

Active white space is the space that is intentionally created to draw attention to certain elements on the page.

Passive white space is the space that is left after all the elements have been placed on the page.

Micro white space is the space between individual characters in a line of text. It’s helpful for readability.

In design, there is something called the “law of proximity,” which says:

The elements that are close together are perceived as being related to one another, and the elements that are far apart are perceived as being unrelated to one another.

User Interface Design Fundamentals: What Are Best Practices for Working with Images in Your Designs?

When working with images on our website, there are things that we should consider.

User Interface Design Fundamentals: What Is Progressive Enhancement?

Progressive enhancement ensures that all users can access the essential content and functionality of an application, no matter what browser or device they’re using.

The focus is on providing a core experience for everyone while offering extra features to users with more advanced browsers and better internet connections.

The core principles are:

Progressive enhancement also improves performance as users with less reliable internet connections are still able to access the content.

Since the core content is available in the initial HTML response, progressive enhancement is also good for SEO as search engines will be able to crawl the content.

While some people criticize it as being “unrealistic” for applications that rely too heavily on JavaScript, it’s a good practice to follow when we’re building our websites and applications.