Behind these experiences, front-end developers play a pivotal role. They don’t just turn mockups into functioning code – they shape the bridge between design and functionality, making user experiences come to life.

To do this effectively, front-end developers need to understand UI (User Interface) and UX (User Experience) design.

• UI focuses on the look and feel of the product, including colors, typography, buttons, layouts, and visual consistency.

• UX focuses on how users interact with the product, including ease of use, accessibility, responsiveness, and overall satisfaction.

In today’s competitive digital landscape, knowing only code isn’t enough. Let’s explore why UI/UX knowledge is crucial for front-end developers and how it impacts both the developer’s career and the end-user experience.

Table of Contents:

• Why Front-End Devs Should Understand UX/UI

• Key UI/UX Principles Every Front-End Developer Should Know

• Benefits of UI/UX Knowledge for Front-End Developers

• How Developers Can Learn UI/UX

• What to Keep in Mind about UX/UI

• Conclusion

Why Front-End Devs Should Understand UX/UI

Front-end development is not just about writing clean code. It’s also about creating experiences. A developer might know every JavaScript framework and CSS trick, but if they don’t understand UI (User Interface) and UX (User Experience) principles, their work risks feeling clunky, confusing, or unappealing.

Why UI/UX Knowledge Matters

1. Bridging the gap between design and development: Front-end developers act as the bridge between design mockups and functional applications. By understanding UI/UX principles, developers can implement designs more accurately, while also identifying potential improvements in usability or accessibility.

2. Improving usability: UI/UX knowledge helps developers think beyond visuals. They consider user flow, navigation, responsiveness, and accessibility. For example, a button’s size, contrast, and placement affect how easily users interact with it.

3. Creating consistent experiences: Without consistency, users get frustrated. Developers who understand design systems and UX patterns ensure that spacing, typography, colors, and interactions feel uniform across the app.

4. Boosting collaboration with designers: Developers who know UI/UX can speak the same language as designers. This leads to smoother handoffs, fewer revisions, and faster delivery. Instead of just “coding what’s given,” they can proactively suggest alternatives when something won’t scale well.

5. Improving user satisfaction and business goals: Ultimately, great UI/UX translates to happy users. An application that is visually appealing, easy to navigate, and responsive encourages engagement, reduces bounce rates, and drives conversions.

Key UI/UX Principles Every Front-End Developer Should Know

A website or application may be powered by complex logic in the background, but what users truly experience is the interface. This is where understanding UI/UX principles becomes essential. Let’s explore some of the core ideas every developer should master.

Consistency Builds Trust

One of the most fundamental principles of good UI/UX is consistency. When layouts, typography, buttons, and navigation behave the same way across an application, users instantly feel more confident.

Imagine a scenario where a “Sign Up” button looks completely different on each page – one rounded, another outlined, another square. This inconsistency doesn’t just look unprofessional, it breaks trust and forces users to pause and think. A consistent interface, on the other hand, feels reliable and predictable.

Example:

The image below compares two sets of buttons to highlight the importance of design consistency. On the left, the "Consistent Buttons" example shows "Sign Up" and "Login" buttons that look identical in color, shape, and style, making the user interface appear clear and professional. On the right, the "Inconsistent Buttons" example displays the same buttons but with different colors, shapes, and text styles, which can make the interface confusing and visually unappealing.

Guiding Users with Visual Hierarchy

Users rarely read web pages word by word. Instead, they scan for what matters. That’s why visual hierarchy is so important. By adjusting size, contrast, color, and spacing, developers can subtly guide attention. Headlines should naturally stand out from body text, and primary actions like “Buy Now” or “Sign Up” should be visually stronger than secondary options.

A great example of this is a pricing page where the recommended plan is highlighted with a brighter color and a slightly larger card, drawing the eye instantly.

Example:

The image below shows three pricing plans Base, Pro, and Enterprise, with the Pro plan visually highlighted in the center. The design uses size, color contrast, and placement to guide users attention toward the Pro plan, illustrating the concept of visual hierarchy for easier decision-making.

Accessibility for Everyone

A beautiful interface is meaningless if it’s not usable by all. Accessibility ensures that people with disabilities can interact with your site just as easily as others. This means paying attention to color contrast so text remains readable, using semantic HTML so screen readers can interpret content, and adding descriptive alt text to images.

Even small improvements – like ensuring forms have proper labels – can transform usability. A login form without labels may look clean, but it excludes users who rely on assistive technology.

Example:

The picture below compares two login forms to show the difference between poor and good form design. The "Bad Form" on the left lacks clear labels for its input fields and has a dull, hard-to-see login button, making it less user-friendly. The "Good Form" on the right uses visible labels for each field and a prominent, easy-to-find login button, which improves clarity and usability for users.

Designing for All Screens

With most traffic now coming from mobile devices, responsive design is no longer optional. A layout that looks perfect on desktop but breaks on mobile will drive users away.

Mobile-first thinking encourages developers to start small and then expand layouts for larger screens. This ensures that buttons are touch-friendly, text remains readable, and navigation adapts naturally. A dashboard that stacks neatly into a single column on mobile but expands gracefully on desktop provides a consistent experience everywhere.

Example:

The image below shows how pricing plans are tailored for various screen sizes. On the left, the "Desktop Design" displays multiple plans side by side, allowing easy comparison. On the right, the "Mobile Design" stacks the plans vertically, making them easy to read and navigate on smaller screens.

Clear Feedback and Interaction

Users should never be left guessing. Every interaction must provide feedback – whether that’s a hover animation on a button, a loading indicator when submitting a form, or a success/error message after an action.

Consider a “Submit” button: if it does nothing after being clicked, the user may think the site is broken. But if it shows a spinner followed by a success message, the experience feels reassuring and complete.

Example:

The gif below demonstrates clear user feedback during a button interaction. When the "Submit" button is clicked, a loading spinner appears to show that the action is being processed, followed by a success message once the process is complete. This ensures users know their action is registered and provides reassurance, preventing confusion or uncertainty.

Designing with the User in Mind

At the heart of UI/UX is empathy. A developer must always ask: “Is this intuitive for someone seeing it or using it for the first time?”

Placing the search bar at the top of a page makes sense because that’s where users expect it. Hiding it deep inside a menu might seem clever, but it often frustrates users. The best interfaces are designed around user expectations, not developer preferences.

Example:

The GIF image below demonstrates the impact of user-centered design in UI/UX. The "Good UX" example places the search bar at the top of the page, making it immediately visible and easy for users to find. In contrast, the "Bad UX" example hides the search bar inside a menu, which makes it harder to access and can frustrate users.

Benefits of UI/UX Knowledge for Front-End Developers

Front-end developers often see themselves as the builders, the ones who transform design files into functional web pages and applications. But those who also understand UI and UX principles unlock a significant advantage. Their work doesn’t just “look like the design” – it feels intuitive, efficient, and enjoyable for the end user.

Bridging the Gap Between Design and Code

Designers create mockups with a vision in mind, but many of those details get lost when moving into code. A developer with UI/UX knowledge understands why spacing is generous, why a button changes color on hover, or why a particular layout improves navigation.

Instead of copying pixels mechanically, they preserve the intent of the design. Without this understanding, designs may look “close enough” but feel awkward in practice.

Example:

The image below compares bad versus good UI design. The left side shows a messy header with mismatched buttons that have different shapes, sizes, and colors, demonstrating poor design consistency. The right side shows the same header redesigned properly with uniform blue buttons that are consistently sized and aligned, creating a much cleaner and more professional appearance.

Building for Usability, Not Just Functionality

Functionality answers the question: Does this work? Usability asks: Does this feel natural to use? Developers who understand UI/UX instinctively add helpful touches like loading indicators, clear error messages, and accessible labels.

Without this mindset, users encounter confusing flows, tiny buttons, hidden actions, or forms with no feedback. The product works, technically, but it doesn’t work well.

Example:

The image below shows a login form comparison between poor and improved UX design. The left side demonstrates bad UX with empty input fields that have no placeholder text, a bland gray login button, and unclear help text that says "Forgot password? Not obvious." The right side shows the improved version with helpful placeholder text like "Enter your email" and "Enter your password," a prominent blue login button that's more visually appealing, and clearer, actionable help text that says "Forgot password? Click here to reset."

Faster Collaboration and Fewer Iterations

When developers understand design language, they can talk specifics, “The spacing here should follow the 8px grid,” instead of vague complaints like “This looks off.” This cuts down on revisions, keeps teams aligned, and builds trust between designers and developers.

Without this shared language, collaboration slows. Misinterpretations multiply, feedback loops drag on, and projects risk missing deadlines.

Stronger Problem-Solving and Adaptability

Projects rarely stick to the original plan. Edge cases and new requirements always emerge. Developers with UI/UX insight can make smart, user-centered choices on the fly, selecting layouts, typography scales, or navigation patterns that enhance the experience.

Without this knowledge, fixes tend to be purely technical, functional, but clunky, leaving users to struggle through awkward flows.

Example:

The image below demonstrates dashboard navigation design. The left side shows a "Cluttered Dashboard" with nine separate menu items scattered randomly (Users, Settings, Reports, Analytics, Notifications, Billing, Integrations, Logs, Support), making it overwhelming and difficult to navigate. The right side shows a "UX-Improved Dashboard" that organizes the same options into three logical categories: "User Management" (Users, Roles), "Settings" (General, Billing, Integrations), and "Analytics & Support" (Reports, Analytics, Support). The improved version reduces cognitive load by grouping related functions, making the interface much easier to understand and navigate.

Competitive and Professional Advantage

In today’s job market, many developers can code a responsive layout. What makes someone stand out is their ability to think about both aesthetics and usability. Employers and clients value these hybrid professionals who bridge two traditionally separate worlds.

Without UI/UX awareness, developers risk blending into the crowd. Their work may be solid, but it lacks the polish and empathy that win user trust and give products a competitive edge.

Missed Opportunities for User Trust

Users form judgments about applications within seconds. If the interface looks clunky or confusing, it signals to them that the product may not be reliable. Developers who overlook UI/UX miss this psychological layer of trust. An intuitive, visually consistent interface not only helps users accomplish their tasks but also assures them that the product is worth relying on.

Without UI/UX, developers often:

• Push out features that confuse rather than guide.

• Create inconsistent layouts that erode confidence.

• Overwhelm users with unnecessary complexity.

Example:

The image below illustrates how UI/UX design affects user trust. The left side shows "Missed Trust" with a poorly designed interface that has inconsistent styling - a basic input field, a small gray "Continue" button, and a confusing pink "Next Step?" button that creates uncertainty about what action to take. The right side shows "Built for Trust" with a clean, professional design featuring a well-styled input field with placeholder text and a prominent, clear "Continue" button that gives users confidence in their actions.

Inclusivity and Accessibility

Accessibility is a core part of good UX. Developers with this awareness naturally consider screen reader support, keyboard navigation, and high-contrast modes. This ensures products welcome all users.

Without it, developers unintentionally exclude large groups of people and may even face compliance issues. The result isn’t just a less usable product, it fails to respect and include its audience.

How Developers Can Learn UI/UX

For a long time, developers and designers were seen as working on two separate islands. Developers wrote code, designers crafted interfaces, and the two worlds met somewhere in the middle. But today, the line is much blurrier. Employers and teams increasingly expect developers to have at least a foundational understanding of UI/UX.

The good news is that UI/UX isn’t a mysterious art that only designers can master. Developers can learn it step by step, much like they learned programming languages or frameworks. It requires observation, practice, and empathy for the end user.

Start with Observation

One of the simplest ways to begin learning UI/UX is by observing products you already use every day. Pay attention to how you navigate your favorite apps or websites. Notice how buttons are placed, how forms are structured, or how feedback is given when you complete an action. Ask yourself: Why does this feel easy to use? Why does this frustrate me?

Observation builds awareness. Once you start noticing design decisions in your daily digital life, you’ll begin to understand the invisible rules that shape user experiences.

Understand the Basics of UX Principles

Before diving deep, you should familiarize yourself with some core UX principles. These aren’t abstract theories but practical guidelines for making products usable. To review them:

• Consistency: Users expect familiar patterns. A back button should always go back, not do something unpredictable.

• Clarity: Every element should serve a purpose. If it confuses, it doesn’t belong.

• Feedback: Users need to know when an action has been registered, whether it’s a loading spinner, a success message, or an error prompt.

• Accessibility: Interfaces should be usable by everyone, including people with disabilities.

Learning these basics gives you a strong foundation for evaluating and improving your work.

Practice Through Side Projects

Theory alone won’t help – as a dev, you need to practice. A simple way to start is by taking small side projects and focusing not just on functionality but also on experience. Build a to-do app, for instance, but pay attention to how tasks are added, how the interface responds, and how information is displayed.

Treat each project as a learning ground for experimenting with usability, not just coding. You’ll begin to notice where users get stuck and how small tweaks can create big improvements.

Learn Design Tools, But Don’t Get Overwhelmed

You don’t need to become a master of Figma or Sketch overnight, but learning the basics of design tools can help you bridge the gap between development and design. Being able to open a Figma file, understand layout grids, or inspect spacing gives you a significant advantage when collaborating with designers.

The goal isn’t to replace designers but to communicate better with them and reduce misinterpretations.

Follow Real-World UI/UX Examples

Another powerful way to learn is by studying existing products. Look at how popular apps like Spotify, Airbnb, or Notion structure their interfaces. Read UX case studies where designers explain their decisions. These real-world examples give context to abstract principles and help developers see how theory translates into practice.

Seek Feedback from Designers and Users

Learning UI/UX isn’t just about self-study. It’s also about listening. Share your projects with others, especially designers or actual users, and ask for feedback. What felt easy? What was confusing? As a developer, you may overlook usability issues because you’re too close to the code. External feedback helps you see the product with fresh eyes.

Build Empathy Through Testing

Nothing teaches UI/UX faster than watching someone use your product. Conduct informal usability tests with friends, colleagues, or even strangers. Observe where they hesitate, where they click instinctively, and where they get frustrated. This direct exposure helps developers understand that design isn’t just about what looks good, it’s about what feels natural in practice.

Keep Learning from Design Communities

UI/UX is a constantly evolving field. You can grow by engaging with design communities, reading blogs, or following design challenges. Platforms like Dribbble, Behance, and UX Collective provide inspiration and practical lessons. Over time, this exposure sharpens your design instincts and keeps you aligned with industry trends.

Some Helpful Resources to Learn UI/UX:

📚 Books:

• Refactoring UI (Adam Wathan & Steve Schoger): https://refactoringui.com/book (I’ve read this book, and the feedback is awesome)

• The Design of Everyday Things (Don Norman): https://jnd.org/the-design-of-everyday-things/

• Laws of UX (Jon Yablonski): https://lawsofux.com/

🌐 Blogs & Guides:

• Smashing Magazine: https://www.smashingmagazine.com/category/uxdesign/

• UX/UI Design Tutorial: https://www.freecodecamp.org/news/ui-ux-design-tutorial-from-zero-to-hero-with-wireframe-prototype-figma/

• UX Collective: https://uxdesign.cc/

• Nielsen Norman Group (NNG): https://www.nngroup.com/articles/

🎥 YouTube:

• DesignCourse (Gary Simon): https://www.youtube.com/c/DesignCourse

• Flux Academy: https://www.youtube.com/c/FluxWithRanSegall

• Steve Schoger (Design Tips): https://www.youtube.com/c/SteveSchoger

• Kevin Powell: https://www.youtube.com/kepowob

🛠️ Tools & Practice:

• Figma: https://www.figma.com/

• Dribbble: https://dribbble.com/

• Behance: https://www.behance.net/

• Mobbin: https://mobbin.com/

What to Keep in Mind about UX/UI

Some of these tips might feel counterintuitive to anyone who lives in code all day. Yet they explain why users behave the way they do, and why some products succeed where others fail. Here are some of the weird but true things about UI/UX that every developer should know.

Users Rarely Read. They Scan….

You may spend hours ensuring error messages, tooltips, or onboarding text are written clearly. But here’s the strange reality: most users don’t actually read them. They scan. Their eyes dart across headings, buttons, and visuals, often skipping over entire paragraphs.

This means your beautifully worded instructions may never be read. Instead, design needs to be built around visual cues and intuitive flows that guide users without relying on text.

Example:

The image contrasts verbose versus concise user instructions. The left side shows "Wordy Instructions" with a lengthy paragraph that overwhelms users with unnecessary details about clicking settings, navigating tabs, selecting preferences, and remembering to save changes. The right side demonstrates "Quick Setup" with a clean, numbered three-step process: "1. Open Settings, 2. Choose Preferences, 3. Click Save" followed by a clear "Save & Continue" button. The improved version eliminates cognitive overload by presenting the same information in a scannable, actionable format that's much easier for users to follow and complete successfully.

A Button’s Size Can Outweigh Its Functionality

From a developer’s perspective, a button either triggers a function or it doesn’t. But in UX, the size, placement, and color of that button can matter more than the functionality behind it.

For example, two buttons may perform the same action, but if one is too small, hidden, or styled poorly, users might not notice it at all. The function exists in code, but in practice, it doesn’t exist for the user.

Example:

The image shows how button size and design affect usability. The left side has a small, gray "Save" button that's hard to notice and might be missed by users. The right side has the same "Save" button but larger, darker, and more prominent, making it much more likely that users will see and click it. Same function, but better design leads to better user interaction.

More Features Often Mean Less Usability

It feels logical to think that giving users more options and features adds value. But weirdly, the opposite is often true. The more you add, the harder the product becomes to use.

This is called the paradox of choice: too many options create decision fatigue. Developers love shipping features, but good UX often means stripping things away until only the essentials remain.

“Ugly” Designs Sometimes Work Better

Developers may assume a slick, modern UI always wins, but there are cases where “ugly” or “dated” designs perform better because they feel familiar and trustworthy. Think of Craigslist: it hasn’t changed much in decades, but people use it because it feels simple. This shows that usability can beat aesthetics when it comes to building trust.

Example:

The image illustrates that modern aesthetics don't always equal better usability. The left side shows a "Modern & Slick" design with a sleek, dark "Explore" button that looks impressive and cutting-edge but might feel unfamiliar or untrustworthy to some users. The right side shows an "Old-School & Familiar" design with a simple gray "Continue" button that appears outdated but feels trustworthy and familiar to users.

Users Don’t Think Like Developers

This might be the weirdest truth of all: users don’t care about code efficiency, data structures, or the elegant architecture behind the app. They only care about what’s on their screen and whether it makes sense.

For example, a developer might proudly optimize a search algorithm, but if the search bar is hidden in a menu instead of being front and center, users will complain that “the app doesn’t have search.” The feature exists, but in their minds, it doesn’t.

Example:

The GIF image demonstrates the impact of user-centered design in UI/UX. The "Good UX" example places the search bar at the top of the page, making it immediately visible and easy for users to find. In contrast, the "Bad UX" example hides the search bar inside a menu, which makes it harder to access and can frustrate users.

Small Delays Feel Bigger Than They Are

From a technical side, shaving 300 milliseconds off a request may not feel like a huge deal. But to a user, even slight delays feel magnified. A loading spinner that lingers for a second can feel like forever. UX research shows that anything beyond 2–3 seconds risks losing the user’s attention.

This means developers must think not only about raw performance but also about perceived performance using skeleton screens, micro-animations, or progress indicators to make waits feel shorter.

Example:

The image compares the loading experience design. The left side shows "Feels Slow" with just a basic spinner and "Loading..." text that makes even short delays feel endless to users. The right side shows "Feels Faster" using skeleton screens - gray placeholder blocks that mimic the content structure while loading, making the same delay feel much shorter because users can see that progress is happening and get a preview of what's coming.

Accessibility Isn’t Just for “Some” Users

Developers sometimes assume accessibility features (like screen reader support, keyboard navigation, or high-contrast modes) are niche concerns. But here’s the reality: everyone benefits.

Captions help people in noisy environments, large touch targets help on small screens, and good color contrast improves readability for everyone. Accessibility isn’t just about inclusivity – it’s about creating universally better experiences.

Conclusion

In modern web development, understanding UI/UX isn’t optional. It’s essential. Front-end developers aren’t just programmers – they are the architects of user experience. By learning design principles, developers improve collaboration, write smarter code, and create products that truly serve users.

Whether you’re just starting or already experienced, investing time in UI/UX knowledge will set you apart and open new opportunities. Explore design resources, collaborate closely with designers, and experiment with small design tasks in your projects.

At the end of the day, the best front-end developers don’t just write code, they create experiences users love.

In this article, I'll share some ways CSS can support accessibility so you can start using these techniques in your own projects.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and a little bit of Javascript.

Update Focus Styles

The browser provides default focus styles for interactive elements like buttons or input fields. But sometimes these default focus styles might not be ideal for your design system – especially if the colors used in your design are too close to the default colors. This might make it difficult to notice.

Also, different browsers have different default focus styles and you might want to standardize the focus styles to ensure uniformity.

You can change the default focus style of an element in CSS using the :focus pseudo-class. For example, the default focus style for an input element is a blue outline in Chrome and a blue outline with outline offset in Firefox, to update the default focus styles of an input element you can do this:

input:focus {
  outline: 2px solid #007BFF;
  outline-offset: 2px;
  border-radius: 1rem;
}

Avoid Content Shifts

Content shifts can happen when you’re lazy loading images, where images load progressively as the user scrolls down the page. Sometimes the image pushes the content around it downwards, shifting the text you're reading out of place.

Content shifts can also happen during dynamic content fetching, especially when new content like text, images, or ads is added to the page without reserving space for it in advance.

Content shifts can be frustrating, especially for users:

• With cognitive disabilities who may lose track of where they are in the content.

• Using screen magnifiers, where the shift can cause them to lose their zoomed-in focus.

• Navigating with a keyboard, as it can mess up the natural tab order and make navigation confusing.

You can pre-allocate space for content to prevent shifts by using the min-height or aspect-ratio properties. Here's how you can allocate space for an image to prevent content shift before the image has fully loaded.

img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover; /* Ensures the image fits well within the allocated space */
}

You can also use animations or transitions when dynamically loading content to add smooth transitions for new content. So, instead of a sudden shift, the content slides in gracefully, reducing the perception of disruption.

.new-content {
    transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

Reduce Motion

Rapid animations or really complex transitions can be disorienting for users with motion sensitivity, which could lead to discomfort like headaches, dizziness, or vertigo (for users with vestibular disorders).

You can use CSS’s prefers-reduced-motion media query to reduce or disable animations for users.

Personally, instead of disabling animations completely, I replace complex, distracting animations with more subtle ones to maintain functionality while respecting user preferences.

Here's how to use prefers-reduced-motion to create a simpler animation:

/* Default animation */
@keyframes complexAnimation {
    0% { transform: translateX(0); opacity: 0; }
    50% { transform: translateX(100px); opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}

.element {
    animation: complexAnimation 2s ease-in-out;
}

/* Simpler animation for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    @keyframes simpleAnimation {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    .element {
        animation: simpleAnimation 1s ease-in-out;
    }
}

Here’s an example from the code above. If you have reduced motion enabled you’ll see a fading ball instead of a moving ball:

Note: If you want to see the reduced motion in action, you can enable it in the rendering tab on Google Chrome.

Focus Within for Nested Elements

You can highlight or style a parent element when any of its child elements receive focus to make it clear which group (like form inputs or dropdown menus) is currently being interacted with.

To do this, you can use CSS’s :focus-within pseudo-class which is used to style an element when any of its descendants receive focus either through keyboard navigation or user interaction.

For example, to highlight a fieldset when any item in the group is focused in a grouped control, you can do this:

<style>
 fieldset {
   padding: 10px;
   border: 1px solid #ccc;
 }

 fieldset:focus-within {
   border-color: #007BFF; /* highlight the fieldset when a user focuses on any input */
 }
</style>

<fieldset>
  <legend>Choose a color:</legend>
  <label><input type="radio" name="color" value="red"> Red</label>
  <label><input type="radio" name="color" value="green"> Green</label>
  <label><input type="radio" name="color" value="blue"> Blue</label>
</fieldset>

Customize Contrast Options

Sometimes you may be working on a design that uses lots of colors and might not maintain high contrast between text and background to fit an aesthetic. Or perhaps you're working on a design with lots of bright colors. In these cases, you should consider how your application renders for different users.

Some users with low vision or certain types of color blindness might need high contrast mode to differentiate text from the background more clearly. Other users sensitive to bright colors might prefer a softer, less jarring visual experience.

Some of these users might have their systems set to high or low contrast to help improve their experience. To customize their experience, you can use the CSS prefers-contrast media query.

The prefers-contrast media query allows you to tailor the contrast of your website or application based on the user's system settings.

Here's an example of using prefers-contrast:

/* default styling preference */
body {
    background-color: white;
    color: black;
}

/* high contrast preference */
@media (prefers-contrast: more) {
    body {
        background-color: black;
        color: white;
    }
    a {
        color: yellow;
    }
}
/* low contrast preference */

@media (prefers-contrast: less) {
    body {
        background-color: #f0f0f0;
        color: #333;
    }
    a {
        color: #555;
    }
}

In the example above, the prefers-contrast: more option ensures that when a user prefers high contrast, the background is black and the text is white, with yellow links for better visibility.

The prefers-contrast: less adjusts the color scheme to a softer color for users who prefer less contrast. The default style is used if the user has no specific contrast preference or if their preference is not detected.

Note: If your design uses minimal colors and maintains high contrast between text and background or you're working with a design where text is minimal and the focus is on visual content (like image galleries or video players), you might not need prefers-contrast as much. But it's still good practice to consider contrasts.

Enable Dark Mode

You can use CSS to accommodate users’ preferences for dark or light modes. You can achieve this through the CSS prefers-color-scheme media query. The browser can detect the user's color preference and apply the style if provided in CSS.

Here's an example of how you can add a dark mode style to your site using CSS variables:

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000000;
    --text-color: #ffffff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

In the example above, the variables get updated if the browser detects a dark color scheme preference.

If you want to allow users to toggle between modes manually, you can use JavaScript for this:

<style>
 /* Default light mode styles */
  body {
   background-color: #ffffff;
   color: #000000;
  }
 /* Dark mode styles */
  body.dark-mode {
   background-color: #000000;
   color: #ffffff;
  }
</style>

<button id="toggle-theme">Toggle Theme</button>

<script>
  const toggleButton = document.getElementById('toggle-theme');
  toggleButton.addEventListener('click', () => {
   document.body.classList.toggle('dark-mode');
  });
</script>

Use rem Units for Responsive Typography

Using rem units for responsive typography can help enhance accessibility to adapt more dynamically to a user's preference. Since rem is relative to the root font size (typically set by the browser or user), it scales with changes in the base font size. This helps ensure that text remains readable without breaking layouts.

Users can set a preferred font size in their browser or operating system for better readability. When you use rem, the website content scales according to this setting which ensures that the text is not too small or too large for the users (which can happen when using fixed units like px).

When users zoom in using browser settings or increase their preferred text size, the rem-based text will scale appropriately.

The default root font size (usually 16px) is typically inherited from the browser, but you can set it explicitly if needed:

html {
  font-size: 100%; /* Default 16px */
}

After setting the root font size, you can use rem unit for the rest of your content. For example:

h1 {
  font-size: 2.5rem; /* Equivalent to 40px if root is 16px */
}

p {
  font-size: 1rem; /* Equivalent to 16px */
}

Use Animations to Enhance UX

CSS animations can enhance accessibility when used thoughtfully. They can help create an engaging and understandable experience for users.

Here are some ways that animations can help improve accessibility:

• You can use animations to indicate loading state to visually communicate to users that the system is working on a task.

• Using animated text effects, like fades or scaling on headlines or important sections, can help guide users' eyes to important content. This can be useful for people with cognitive disabilities who benefit from clear visual hierarchies.

• Subtle transitions for state change instead of having abrupt changes (like a modal popping up instantly) can create smoother transitions between different interface states.

• Using animated highlights or shaking effects on form fields can provide visual feedback to users about input errors. You should pair these animations with labels or ARIA attributes to make it clear what the user needs to correct.

• Animations can help users track focus, especially keyboard users or those with visual impairments. CSS transitions that highlight focused elements (for example by enlarging buttons or changing the border) assist users in understanding where they are within the page.

Best Practices:

• Ensure animations are used purposefully, not just for aesthetic reasons.

• Avoid overly long or continuous animations that can distract or annoy users.

• Combine animations with other accessible features, such as screen reader announcements, to ensure all users understand content changes.

Conclusion

When considering accessibility, well-structured HTML forms the foundation of an accessible page – but CSS also plays a vital role in enhancing that structure.

CSS alone cannot fix poorly structured HTML. But when it’s applied thoughtfully to a solid foundation, it ensures a more inclusive and engaging experience by improving visual hierarchy, readability, and interaction for users of all abilities.

Combining accessible HTML with CSS not only improves the user interface but also provides support for assistive technologies.

Thank you so much for reading this article. If you found it helpful, consider sharing. Happy coding!

You can connect with me on LinkedIn.

We talk about:

• What it's like to work in fashion. "You're surrounded by exhausted, unhappy people."

• How she used freeCodeCamp and the 100DaysOfCode challenge to learn to code and start her software development career

• How she learned English and how to work on engineering teams in the UK.

• How she's leading the Korean translation effort for the freeCodeCamp community, with 10,000s of people now reading Korean articles each month

Can you guess what song I'm playing on my bass during the intro? It's from a 1985 song.

Also, I want to thank the 9,779 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate

You can watch the interview on YouTube:

Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. You can also listen to the podcast below, right in your browser:

Links we talk about during our conversation:

• freeCodeCamp's Korean edition, including Quincy's "Learn to code and get a developer job" book translated into Korean: https://www.freecodecamp.org/korean/news/learn-to-code-book/

• Alison on Twitter: https://twitter.com/aliyooncreative

• Devil Wears Prada trailer: https://www.youtube.com/watch?v=6ZOZwUQKu3E

We talk about:

• Colby's early days doing design work for local bands

• How Colby went to art school, then pivoted that into a software development

• His early career at ThinkGeek where he not only did web dev but also worked as a male model for their products.

• Colby's day-to-day work as a developer experience engineer, building demo applications and SDKs

• How Colby uses AI tools in his day-to-day work, and what he thinks its current limits are.

Can you guess what song I'm playing on my bass during the intro? It's from a 1995 punk song.

Also, I want to thank the 9,771 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate

You can watch the interview on YouTube:

Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. You can also listen to the podcast below, right in your browser:

Links we talk about during our conversation:

• Colby's freeCodeCamp course on building a clone of Google Photos using AI tools and Next.js: https://www.freecodecamp.org/news/create-a-google-photos-clone-with-nextjs-and-cloudinary/

• Colby's Trailer and web design work: https://photowall-colbyfayock.vercel.app/wall/design

• Colby's ThinkGeek Modeling. He's legit a male model: https://photowall-colbyfayock.vercel.app/wall/thinkgeek

• Colby's music from his band years: https://soundcloud.com/colby-fayock/sets/day-late-hero

• The XKCD comic I mention about how the scope of developer work can be non-intuitive: https://xkcd.com/1425/

This is because everyone has a particular way they process information. In design, this is called viewing (or reading) patterns. As a designer, it's important to understand how your users (including potential ones) consume information, and how best to place the most crucial information so nobody misses it.

In this article, we'll talk about different viewing patterns, how to choose the best ones for your project, and we'll also see real-life examples of these patterns.

Here's what we'll cover:

1. What you need to know before reading
2. The origin of viewing patterns
3. Common viewing patterns
4. Why are viewing patterns important?
5. How should I choose a viewing pattern for my design project?
6. Conclusion

Prerequisites:

Before we go into the article proper, please note that it'll be helpful if you have basic knowledge of core design principles and the importance of these principles in guiding users' attention and organizing information effectively.

But this is not necessary, as I wrote this article for everyone, including absolute beginners.

The Origin of Viewing Patterns

The concept of viewing patterns can be traced to the field of psychology, specifically the study of eye movements and visual perception.

While people have been reading and consuming visual information for a long time, proper observation and analysis of reading behaviors emerged with the development of eye-tracking technology and scientific research methodologies in the late 19th and early 20th centuries.

A lot of pioneers and researchers such as Louis Emile Javal, Edmund Huey, Alfred L. Yarbus, and Charles H. Judd conducted experiments to observe eye movemts and behaviours in the late 19th century and early to mid-20th century.

The formalization of viewing/reading patterns as design principles in the context of graphic design and information architecture began to gain traction in the latter half of the 20th century. Designers and usability experts started applying insights from eye-tracking studies to optimize layouts for print media, signage, and digital interfaces.

Over time, the study of viewing patterns expanded beyond text-based reading to include diverse media formats, such as web pages, multimedia presentations, and interactive interfaces.

Today, viewing patterns continue to evolve with advancements in technology and changes in user behaviors, guiding the way designers approach layout, navigation, and content presentation.

Common Viewing Patterns

Now that we know how viewing patterns came about, let's talk about some common viewing patterns in existence.

The F-pattern

This is a common viewing pattern observed in online content consumption. According to this pattern, users scan the page in a horizontal movement across the top, then move down the page, scanning shorter horizontal sections. They continue to read less of the content, until they finally start reading vertically, forming the F-shape.

Diagram illustrating how the F-pattern works on a wireframe. Image Credit: Nielsen Norman Group

To capitalize on the F-pattern, you can place important information such as headlines, key points, and CTAs along the top and the left-hand side of the page to ensure maximum visibility.

Some examples of real-life platforms that utilize the F-pattern include:

• Shopify
• LinkedIn
• The New York Times

The Z-Pattern

The Z-pattern is another common viewing pattern. This pattern can be noticed in designs where the user is expected to move their eyes in a zig-zag pattern across the page.

This pattern typically starts with a horizontal movement across the top of the page (forming the first stroke of the "Z"), followed by a diagonal movement from the top-right to the bottom-left (forming the second stroke), and finally, another horizontal movement across the bottom of the page (completing the "Z").

Diagram illustrating the Z-pattern. Image Credit: UX Planet

To capitalize on this pattern, you can align information on the predicted path of the Z-pattern to guide users' attention more effectively, especially in designs like landing pages and presentations.

Some examples of real-life platforms that utilize the Z-pattern include:

• Artykul
• Mohash
• Des Climbing

The Gutenberg Diagram

The Gutenberg diagram outlines a viewing pattern based on the natural eye movement of Western readers, and is influenced by cultural and linguistic factors.

The Gutenberg Diagram divides the page into four quadrants: the primary optical area (top-left), the strong fallow area (top-right), the weak fallow area (bottom-left), and the terminal area (bottom-right).

The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area... – Stephen Bradley (Vanseo Design)

Image illustrating Gutenberg diagram divided into 4 quadrants. Image Credit: Techwala

You can strategically place content based on the Gutenberg diagram to optimize visual hierarchy and readability, ensuring that important information receives the most attention.

Some examples of real-life platforms that utilize the Gutenberg diagram include:

• Wikipedia
• BBC News

Layer-Cake Pattern

The layer-cake pattern involves stacking multiple layers of content vertically, with each layer containing distinct information or visual elements.

Image illustrating the layer-cake pattern on a layout. Image Credit: Chip Cullen

Users typically engage with this pattern by scanning the top layer first, then sequentially exploring deeper layers based on their interest or curiosity. You can use this pattern to present complex information in a more structured format, allowing users to navigate through layers of content at their own pace.

Some examples of real-life platforms that utilize the Layer-Cake pattern include:

• Medium
• Squarespace

Why are Viewing Patterns Important?

Viewing patterns help you guide how users view and consume information on your designs. They help you arrange content in a way that naturally aligns with your users' reading habits. By placing information where users are most likely to look first, you're ensuring that key messages are effectively communicated.

Also, understanding viewing patterns help you cater to the needs of a diverse group of users. Different people process information in different ways and understanding these habits ensure that you design with accessibility in mind.

What's more, designs that align with existing viewing patterns provide a more intuitive and less stressful user experience.

How Should I Choose a Viewing Pattern for my Design Project?

Choosing a viewing pattern for your design depends on a number of factors including, the context of your project, users' preferences, goals of the project, and so on.

Here's a step-by-step guide to help you select the best reading pattern for your project:

1. Know your Users: You have to first understand the demographics of your target or potential users. What do they prefer? What are their goals? In what situations would they use your project? Gather insights into how they interact with content and their technical proficiency.
2. Define your Project Goals: Make sure to clarify the objectives and desired outcomes of the project you're working on. Are you trying to inform or facilitate a specific action? Should your design be very serious or a little playful? You need to identify the key messages you want to pass across to your users, and prioritize them based on importance.
3. Evaluate Context and Platform: Take into account how your users would view your product. Will they view your content on a website, application or a print medium? Consider the device types and screen sizes that your users are likely to use.
4. Select Viewing Pattern: Considering the available data and the insights you've gathered, you can go ahead to choose a viewing pattern that best aligns with your project objectives.

Now that you've selected a viewing pattern for your design, make sure to constantly monitor it's effectiveness through testing and feedback.

Note: You can interchange these steps or even skip some. Just make sure to do whatever works best for your users.

Let's do a little practical exercise:

Say you're working on a hero section for a new e-commerce website selling outdoor gear. Some things you need to consider for this project include:

• The primary goal: to showcase the latest product offerings on the hero section and entice visitors to visit the website further. You'll want to highlight key features, products, and calls-to-action (CTAs) to encourage conversion such as making a purchase or signing up for a newsletter.
• Your target users: likely outdoor enthusiasts, including hikers, campers, and adventure seekers. They'll likely be people with limited time to spend on each webpage.
• Context and platform: Users will likely access the page on several devices, including desktop computers, laptops, tablets, and smartphones. You'll want to consider how the design will adapt responsively across different screen sizes and orientations, priortizing mobile optimization for on-the-go users.

Due to the time constraints of your users, and the need to capture attention quickly, the F-pattern may be a suitable choice. Place high-priority content, such as featured products, top deals, and prominent CTAs, along the top and left-hand side of the page, where users are most likely to look first.

You can use visual cues such as arrows, bold typography, and contrasting colors to draw attention to key elements and guide users' eye movements down the page.

Here's what I came up with from the practical design:

Hero section I designed using the F-pattern.

In the design above, in sequential order, there's:

• a top navigation containing the logo, links to other sub-pages, and the log-in and sign up CTAs(call-to-actions).
• a main heading, description, and call-to-action (Shop Now) on the left-hand side of the page.
• a section showing latest arrivals on the website.

Image showing how the F-pattern is depicted on the design.

I would love to see the results of this practical exercise on your end.

Conclusion

Viewing patterns are very important as I mentioned earlier. They are invaluable for designers across different disciplines, and are easy to understand and incorporate into your designs.

You just need to be sure of what works best for your users, and design with that in mind. Also make sure to experiment with different viewing patterns so you can discover your own unique style. Have fun experimenting!

We talk about:

• Growing up in rural Ohio, marrying young, and staying out there despite his success as a developer and entrepreneur

• Early client work, and how he designed thousands of logos for clients before becoming an all-out web developer

• Using his skills to help his wife start her own lactation consultant business online

• Gary's guitar shredding chops

I recorded this podcast live and I haven't edited it at all. I want to capture the feel of a real live conversation, with all the human quirks that entails.

Can you guess what song I'm playing on my bass during the intro? It's from a 1995s Nintendo game.

Be sure to follow The freeCodeCamp podcast in your favorite podcast app. And share this podcast with a friend. Let's inspire more folks to learn to code and build careers for themselves in tech.

You can watch the interview on YouTube:

Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. You can also listen to the podcast below, right in your browser:

Also, I want to thank the 9,331 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate

Links we talk about during the interview:

• Gary's Learn UI Fundamentals course on freeCodeCamp: https://www.freecodecamp.org/news/learn-ui-design-fundamentals-with-this-free-one-hour-course/

• Gary's freeCodeCamp live stream series: https://www.freecodecamp.org/news/design-course/

• Gary's tool for memorizing the Guitar fretboard and it's 49 notes: https://fretastic.com/

• Gary's Retrowave Guitar music video: https://www.youtube.com/watch?v=yDc2OvReYh0

On this week's episode of the podcast, I interview Gary Simon, a developer and designer who started DesignCourse and has published several courses on freeCodeCamp.org over the years.

We talk about:

• Growing up in rural Ohio, marrying young, and staying out there despite his success as a developer and entrepreneur

• Early client work, and how he designed thousands of logos for clients before becoming an all-out web developer

• Using his skills to help his wife start her own lactation consultant business online

• Gary's guitar shredding chops

I recorded this podcast live and I haven't edited it at all. I want to capture the feel of a real live conversation, with all the human quirks that entails.

Can you guess what song I'm playing on my bass during the intro? It's from a 1995s Nintendo game.

Be sure to follow The freeCodeCamp podcast in your favorite podcast app. And share this podcast with a friend. Let's inspire more folks to learn to code and build careers for themselves in tech.

You can watch the interview on YouTube:

Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. You can also listen to the podcast below, right in your browser:

Also, I want to thank the 9,331 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate

Links we talk about during the interview:

• Gary's Learn UI Fundamentals course on freeCodeCamp: https://www.freecodecamp.org/news/learn-ui-design-fundamentals-with-this-free-one-hour-course/

• Gary's freeCodeCamp live stream series: https://www.freecodecamp.org/news/design-course/

• Gary's tool for memorizing the Guitar fretboard and it's 49 notes: https://fretastic.com/

• Gary's Retrowave Guitar music video: https://www.youtube.com/watch?v=yDc2OvReYh0

In this article, we'll delve into the origins, rise, and practical implementation of the bento grid trend, exploring how it intersects aesthetics with functionality in modern web design.

Prerequisites

• Fundamentals of HTML and CSS (CSS Grid)
• Basics of Web Design

The Philosophy Behind Bento Grids

The concept of bento grids traces back to the Japanese tradition of serving a variety of dishes in a single, segmented container known as a bento box. This method of presentation not only ensures a balanced meal but also pleases the eye with its organization and simplicity.

Bento Japanese Box

Translated into web design, bento grids offer a similar experience: diverse content segmented into distinct areas, making it both accessible and aesthetically balanced.

The bento grid philosophy hinges on compartmentalization and organization. It creates a predictable rhythm that users can follow, reducing cognitive load and enhancing the overall user experience. The design's symmetry and order offers a sense of calm and control, appealing to users' desire for simplicity and structure amidst the chaos of the internet.

The Rise of Bento Grids

While the use of grids in design is not new, the specific trend of bento grids began to gain traction as designers sought to create more organized and mobile-responsive layouts.

Powerhouses like Apple use this design pattern in promotional videos for their products as well.

Apple mac promotional infographic

The trend also saw a surge in popularity with the advent of CSS Grid Layout and the growing focus on minimalist design that doesn't sacrifice functionality for form.

Platforms that emphasize content, such as online magazines, educational sites, and portfolios, were among the early adopters of bento grids. Their adoption highlighted the grid's ability to present diverse content types in a harmonious layout, thereby improving navigation and readability.

Examining the Trend

Clean lines, geometric shapes, and a clear space division often characterize modern bento grids. They usually consist of:

• The title of a feature
• A short description of the feature
• Some infographic or interactive content.

This trend has been propelled by its positive impact on user experience. A well-implemented bento grid guides users through the website with ease, allowing quick access to information without overwhelming them with choices.

Pros of Using Bento Grids

1. Enhanced Organization and Cohesion: Bento grids bring a high level of organization to web design, allowing for a cohesive presentation of varied content. This segmentation makes it easier for users to digest information in a structured manner.
2. Aesthetic Appeal: The symmetry and clean lines inherent in bento grids are visually appealing, providing a neat and professional look that can enhance the visual identity of a website.
3. Reduced Scroll Fatigue: By efficiently utilizing space within a single viewport, bento grids can display a significant amount of content, which can reduce the need for excessive scrolling.
4. Metaphorical Clarity: The bento box metaphor effectively communicates the concept of a complete and balanced experience, which can be particularly useful for showcasing product features or a portfolio of work.
5. Improved Navigation: The predictability and order of bento grids aid in straightforward navigation, as users can easily move from one compartmentalized section to another.
6. Compatibility with Responsive Design: Bento grids seamlessly integrate with responsive design principles, facilitating effortless adjustment of a website's layout to accommodate diverse screen sizes and devices.
7. Focus on Content: The grid layout emphasizes content without unnecessary distractions, which can be crucial for sites where content is important, such as online galleries or information-driven platforms.
8. Facilitates Comprehensive Product Capture: In the context of showcasing products, bento grids offer users the convenience of capturing all essential information at once. With content neatly organized within distinct compartments, users can easily screenshot or save a single view of the grid, ensuring they capture all relevant details without the need for multiple interactions or navigating through various pages.

Cons of Bento Grids

1. Potential Information Overload: While bento grids can reduce cognitive load through organization, there's a risk of cramming too much information into a single screen, potentially overwhelming users.
2. Limited Visual Hierarchy: The uniform structure of bento grids can sometimes lead to a lack of visual hierarchy, making it harder for users to determine the importance of certain content over others.
3. Considerations Regarding Hick's Law: A densely packed grid presents users with a multitude of options, potentially prolonging their decision-making process. This abundance of choices can result in the paradox of choice, where users experience indecision or slower navigation due to the overwhelming array of options available.
4. Design Rigidity: The structured nature of bento grids can sometimes restrict creative design elements and lead to a monotonous user experience if not implemented with variation and dynamic content.
5. SEO Challenges: Search engines may have difficulty parsing the relevance of content when it's distributed across numerous grid compartments, potentially impacting SEO if not structured properly.
6. Accessibility Concerns: The compartmentalized nature of bento grids might present accessibility challenges, particularly for users who rely on screen readers or keyboard navigation, if not designed with accessibility standards in mind.

Bento Grids in Practice

Creating bento grids typically involves CSS grid layout and flexbox, which offer robust solutions for creating complex layouts with ease. Bento grids are favored for their flexibility and responsiveness, allowing content to reflow seamlessly across different screen sizes.

For this article, here’s the design we’re going to create the interface below:

desktop design to recreate

To begin, create a couple of divs in your markup.

<body>
    <div class="grid">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>

Then utilize the grid property, grid-template-columns, and grid-template-rows to define the number of rows and columns you desire.

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}

The final ingredient to achieving a bento-style grid lies in the use of the grid-template-areas property which is used to name grid areas according to the position you want them to occupy on the page.

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "aside3 aside3 aside4 aside4 aside5 aside5 ";
}

Finally, assign those names to the exact element you want to take up that space.

.item {
  border: 2px solid #464545;
  border-radius: 5px;
}

.grid .item:nth-child(1) {
  grid-area: hero;
}
.grid .item:nth-child(2) {
  grid-area: aside2;
}

.grid .item:nth-child(3) {
  grid-area: aside3;
}
.grid .item:nth-child(4) {
  grid-area: aside4;
}

.grid .item:nth-child(5) {
  grid-area: aside5;
}

You should have this result:

Bento structure achieved

All that’s left is to fill the boxes with their appropriate content and assets. You can some assets/content in this repo.

Bento Grid with its content filled

Another usefulness of the grid-template-areas property is the ease by which you can achieve responsiveness with it. In our example, to make the page responsive, you pass in a new string pair on your preferred threshold.

On tablet screens:

@media screen and (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "hero   hero   hero   hero"
      "hero   hero   hero   hero"
      "aside2 aside2 aside2 aside3"
      "aside4 aside4 aside5 aside5";
  }
}

Tablet Screens

And on smaller screens:

@media screen and (max-width: 750px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "hero   hero   hero"
      "hero   hero   hero"
      "aside2 aside2 aside2"
      "aside3 aside3 aside3"
      "aside4 aside4 aside4"
      "aside5 aside5 aside5";
  }
}

Smaller screens

Common Rules of Bento Grids

Here are some good rules of thumb when building bento grids:

• Group Related Content: One of the fundamental principles of bento grids is to group related content together within each segment. This enhances the user's ability to quickly locate and understand the information they're seeking. By organizing content logically, designers can improve user engagement and satisfaction.
• Vary Box Sizes: Avoid using the same size for every box within the grid. Varying box sizes can create visual interest and hierarchy, drawing attention to key elements while maintaining overall balance. This variation can help guide users through the content and highlight important information effectively.
• Establish Visual Hiererchy: Although varying box sizes contribute to visual hierarchy, establishing visual hierarchy encompasses a broader range of design elements. In addition to box sizes, designers should consider factors such as colour, typography, and placement to prioritize certain elements over others.
• Prioritize Center Square: In traditional bento grids, the center square often holds a special significance and acts as a focal point. Designers can use this central square to showcase critical information or highlight key features, effectively punctuating the grid and drawing users' attention to its core elements.
• Limit the Number of Boxes: To maintain clarity and avoid overwhelming users, it's recommended to use nine or fewer boxes within the bento grid. Limiting the number of boxes ensures that the layout remains manageable and facilitates easier navigation and comprehension for users.
• Consider Swirl Pattern: While not a strict rule, considering a swirl pattern can add an extra layer of visual interest to the bento grid design. This involves arranging content in a curved or swirling pattern within the grid, creating a dynamic and engaging layout that encourages exploration.

Additional Information

I’d like to point out a couple of things in the article not highlighted.

• First and foremost, the article was inspired by Tom Geoco’s video on bento grids.
• BentoGrids is an excellent resource for finding design inspiration if you’re interested. If you’re interested in the full code, here’s the repo, GitHub, and the Live version. Demo.
• The design inspiration for the grid we built was gotten from FrontEnd Mentor.

Conclusion

Bento grids stand out as a significant trend in the modern web design landscape, offering a blend of aesthetic appeal and functional clarity. They represent a design ethos that values order, beauty, and user-centricity.

As web technologies evolve, the principles underlying bento grids will continue to inform best practices, encouraging designers to create experiences that are not only visually compelling but also intuitively navigable.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

In this tutorial, you'll learn what variables in Figma are, and how to create and implement different types of variables while designing in Figma.

Prerequisites:

To get the most out of this handbook, it'll be helpful to have basic knowledge of how to use Figma and its features. But note that this is not necessary, as I wrote this handbook for everyone – irrespective of their individual level of knowledge.

This handbook is for everyone who is interested in learning more about variables, Figma, and design in general.

Table of Contents:

• What are variables?
• Differences between Variables and Styles in Figma
• Why are Variables Important to the Design Process?
• How to Create Variables in Figma
  • How to Create Colour Variables in Figma
    • How to Create Colour Variables for Tokens
    • How to Implement Colour Variables in Your Designs
    • How to Create Different Modes with Variables
  • How to Create Number Variables in Figma
  • How to Create String Variables in Figma
  • How to Create Boolean Variable in Figma
• How to Use Variables for Advanced Prototyping
  • Advanced Prototyping with Number Variables
  • Advanced Prototyping with Boolean Variables
• How to Use Variables for Developers- Using APIs
• Conclusion

What Are Variables?

The word "variable" has a lot of definitions. The Oxford Dictionary defines the word variable as "not consistent or having a fixed pattern; liable to change." Another definition says "an element, feature, or factor that is liable to vary or change."

The definitions above simply tell us that variables are elements which are dynamic and prone to change. With these definitions, we can now define what a variable is in Figma.

In Figma, a variable stores reusable values like colour and text values that you can apply to different kinds of design properties and prototypes.

Differences between Variables and Styles in Figma

Given the definition of variables above, you might have begun to see some similarities between variables and style guides. Although both features exist to make your work better, there are a few key differences to keep in mind:

• Variables are a more advanced feature, and they allow you to define and reuse values like colours, text, and spacing across your designs. On the other hand, styles are predefined sets of design properties such as text styles, colour styles, and effect styles.
• Variables allow designs to change when used in various contexts, because of their dynamic nature, unlike styles. For example, you can change your designs from light mode to dark mode or have padding values change when designing for different devices. This makes variables useful for creating design systems with adaptable components.
• Variables offer a more flexible design process in creating flexible design components, especially where you want to change values like button text or color on different instances of the same component. Styles are typically used for maintaining consistent design elements like button styles, text headings, or colour palettes.
• Variables can store raw, single values, while styles store sets of values.

Why are Variables Important to the Design Process?

Using variables is quite important for a number of reasons.

First, variables help maintain consistency across a design system. By defining variables for colors, typography, spacing, and other design elements, you ensure that these elements have a uniform appearance throughout your project. This consistency is crucial for branding and user experience.

Variables also make designs adaptable. Designers can quickly experiment with different values such as colour schemes or font sizes by adjusting the variables. This adaptability is valuable when creating designs for different platforms or devices.

Variables are also quite efficient. When a variable is updated, all instances of that variable in the design updates automatically. This saves time and effort, and eliminates the need to manually update every instance of a specific element.

Variables are particularly useful in large projects or design systems because of their scalability and ease of maintenance. They allow designers to scale their designs without losing control.

Since projects grow and design systems evolve over time, variables can be adjusted globally to accommodate new requirements. Variables also provide a central place to update these changes, ensuring that all design elements are consistently modified.

And finally, variables can be beneficial to developers during the hand-off process. Designers can provide developers with precise values for design elements, reducing the chances of misinterpretation and streamlining the implementation process.

How to Create Variables in Figma

Variables are quite easy to create in Figma. Below, I'll walk you through the steps for creating different kinds of variables in Figma.

At the moment, we have four types of variables in Figma:

• Color: used for colour fills.
• Number: used for dimensions, corner radius, and auto layout properties.
• String: used for text layers and variant properties.
• Boolean: used to toggle layer visibility.

We'll create and implement each of these variables in Figma, and also use them for advanced prototyping.

How to Create Colour Variables in Figma

The first type of variable we'll be creating is a colour variable. As a designer or developer, you have likely used colours in your projects. So, the concept of colour shouldn't be unfamiliar to you from a design standpoint.

Step 1: Open a new Figma file

Let's assume that you want to create colour variables for a new design project you're going to start working on, like a magazine website for example. The first thing you need to do is open a new Figma file.

Blank Figma file

Step 2: Choose a colour palette

The next step is to choose a colour palette for the project. Every design project has a set of colours used repeatedly to establish consistency – for example, for headers and backgrounds, to call attention to a primary button, and so on.

You'll want to choose colours which complement each other for your design. If you need some help here, you can read my article on the 60-30-10 rule in design.

Creating a colour palette

Step 3: Create variables for each colour

Next, we'll create variables for each colour code in the palette. Go to the panel on the right-hand side and click on local variables.

Local variables means all the variables located in the design file.

Click on local variables

Click on create variable to create the first variable in the file.

A dropdown will appear containing the four types of variables I explained earlier. Since we're trying to create colour variables in this section, we'll choose color.

Create a colour variable

A created variable section will come up, with two columns: the title of the variable (Color), and the value of the variable (the colour code-FFFFFF).

Choose colour variables

Give your new variable a name – you can use the role of the colour, primary background for instance. In the next column, type the colour code or use a colour picker.

Rename variable & type in colour code

And there you go – you just created your first colour variable!

To see more editing options, hover over the variable's row. An edit variable icon will pop up.

Edit variable

Click on it to edit the colour variable to your taste.

Edit the colour variable/add a description

In the editing section, you can add a description on how to use the variable, hide from publishing, and so on.

Having done that, follow the steps above to create variables for the remaining colours in the colour palette.

Create variables for other colours

You can also organise your variables into groups. To do this, select the colour variables you want to group (hold down SHIFT key), and right-click.

Group the colour variables

This will bring out some options:

• New group with selection
• Edit variables
• Duplicate variables
• Delete variables

New group with selection

Choose New group with selection, double-click on the group name, and rename it to color/blue.

Rename group

You can group your colour variables anyway you'd like to – for example, background colours, header colours, different shades of a particular colour, and so on.

Colour blue variables grouped.

Violà! You just created a colour variable group in Figma. Click on the collection drop-down and choose rename collection.

Rename collection

You can rename this collection primitives.

Primitives means basic. Also, you can decide to rename your collections or not. The choice rests on you.

Renamed primitives collection

How to Create Colour Variables for Tokens

Now, we'll create colour variables for the text, surfaces (such as backgrounds), and borders we need for the project. We want to assign different functions to the colour palette (variables) we created earlier.

Click on local variables and create a new collection. You can name this tokens.

New collection

Create a new colour variable and rename it "primary text".

In order to save yourself time, and group your variables as you're naming them, rename the variable as text/primary. This will automatically form a group.

Creating and grouping text variables

Click on the fill box and go to Libraries to see all colour variables created.

Assigning colour from libraries

We'll choose Main Black which is under color/greys.

Choosing colour black

We can go ahead and assign other colour variables for different text functions, as much as we want to. Remember to add text/ before the actual name of the variable, so it'll form a group automatically.

Assigning colour variables for text

Next, we'll create colour variables for surfaces such as backgrounds, and for borders as well.

Colour variables for surfaces and borders

Some of the colour variables might bear the same colour code, but they have different functions, so that's totally fine. For example, the colour code for button text is the same as the colour code for main background.

How to Implement Colour Variables in Your Designs

Next, we're going to implement these colour variables in our design.

In the image below, there are four mobile wireframes with no colour and images (I created these previously).

You can read about how to create wireframes in this article: What is Wireframing? How to move from Paper Sketches to High Fidelity Wireframes.

We'll use the colour variables we've created to add colour to the buttons and text, making sure all elements are consistent.

Low-fidelity wireframes

Starting with the first screen, let's add colour to the button. Click on the button, and go to to Fill on the right-hand side of your screen.

Click on button

In the Fill section, click on style (the four dot icon by the side). Selecting style will bring up a list of colours in your libraries. Select the colour you've assigned for the primary button in order to implement it.

Select a fill colour from the colour variables in libraries

Implemented button colour

Next, give the button text a white colour following the same steps.

Implementing colour variable for button text

Implemented button text colour

You can go ahead and do the same for the other screens, following the steps above. Don't forget to update the text and colours as well.

Updating colour variables for other screens

You can also add some images or illustrations to complete the look.

Adding illustrations to updated design

Note: You can get your illustrations from plugins in Figma like Storyset by Freepik, Artify Illustrations, and so on, as well as from illustration libraries like Freepik, Lapa Ninja, and others.

How to Create Different Modes with Variables

Next, we'll create different modes for our design. For instance, if you're working on a project that requires light and dark modes, instead of changing all the design elements manually to accommodate the modes, you can simply use variables to implement that.

To start with, click on Local variables to create a new variable. A list of all variables in the file and their groups will come up:

color/blue:

• Primary Button
• Main Blue

color/greys:

• Main Black
• Main Background

Opening "Local variables"

Next, I'll create a new collection so I can just focus on the modes I am about to create. To create a new collection, simply click on the menu icon on the variables header.

Note that creating a new collection isn't mandatory. It's just to help take your focus away from other variables you have already created.

Creating a new collection

Next, I'll rename the collection to Modes. To rename a collection, simply double-click on the title, and input your preferred title.

Renaming a collection

Renamed collection "Modes"

Next, click on Create variable to create a new variable. I'll choose Color because that's the variable we're working with.

Creating a variable called Color

The created colour variable will come up with a default colour code: FFFFFF.

Created color variable with default colour code: FFFFFF

Next, I'll rename the variable Background because I'm trying to set the background colours for each mode (light and dark).

Renamed color variable: Background

Now, we've been working with only the name and value of the variables we've created, but we can add another column when we want to create modes. To do this, simply click on the plus icon on the header to add a new variable mode.

Clicking on the plus icon

The new mode will come with three columns:

• Column 1 (the title of the variable – Background)
• Mode 1 (the first value of the variable – colour code FFFFFF)
• Mode 2 (the first value of the variable – colour code FFFFFF)

Created new mode

Next, I'll rename the modes to light and dark. To do this, simply double-click on the title and edit the name.

Renamed modes: Light & Dark

Now, we'll assign a value to the background for dark mode. To do this, simply input the colour code/value you prefer for the background. I'll use #0C3272 as my background colour for dark mode.

Changed value for dark mode background

Next, we'll create other colour variables for other elements like, text, button colour, button text colour, and so on for the two modes. I''ll list out the specifications to make it easier:

Light/Dark:

• Body text: 1A1A1A/FFFFFF
• Button: 0C3272/FFFFFF
• Button text: FFFFFF/0C3272
• iPhone header: 1A1A1A/FFFFFF

Next, we'll go ahead to create the variables. Just follow the steps we followed earlier to create the variables and assign values for each of the modes.

Created variables for other elements

Next, we make sure the design is connected to the variables we created. To do this, simply hold the element and use Fill to tie it to the colour variable.

For the Button text for instance, select the text, and click on the style icon in Fill.

Clicking on style icon in the "FFill" section

Next, scroll down the list that comes up, to the specific variable you want to tie the variable to (in this case Body text).

Selecting Body text variable.

Do the same for the other elements in the design, including the background.

Note that I'll be leaving the illustrations the way they are.

Screens connected to the variable modes.

To check if the modes actually work, click on the change variable mode icon on the Layer section on the right-hand panel of your screen.

Clicking on the "change variable mode" icon

A list of all modes (Light & Dark) will come up and you can switch the screen to whatever mode you choose.

Switching modes

A section named Modes will appear on the Layer section, indicating that one of the screens is in dark mode.

One dark mode & one light mode screen.

How to Create Number Variables in Figma

Next, I'll show you how to create number variables in Figma.

Number variables are defined by number values, and they can be applied to corner radius, width or height padding, and so on. Here are the steps to follow to create your own:

Step 1: Choose a variable

Just like we did when creating color variables, click on the local variables panel to select the kind of variable you're trying to create. Here, you'll select number.

Choosing variable to create

Selecting "number"

When you select number, it appears on the list of variables with a value, in this case 0.

Number variable showing Number with a default value of 0

Now, you can rename the number variable to whatever you decide. To rename the variable, double click on number, and change it to whatever name you want.

Renaming number variable

I'll rename mine to OrderCount, because I'm trying to implement a function that allows a user to increase the number of portions of food they're trying to order.

Renamed number variable

Next, we'll set the default number value to 1.

Setting default number value

Now we'll tie the number on the design to the number variable (OrderCount). To do this, click on the number in the design.

Implementing the number variable

Then go to Text on the left hand side of your screen. Click on the Apply variable icon to apply the variable.

Note: The apply variable icon will only appear on the Text section when a variable has been created.

Clicking on the "appy variable" icon

Clicking on the icon will bring up a list of all number variables available in the file. Next, you'll select the variable you're trying to implement. I'll choose OrderCount.

Selecting a number variable

When the variable has been implemented (tied to the number), it'll appear on the text section, indicating that a number variable has been implemented.

Implemented number variable

Now, we'll also need two more number variables for the other number values in the design (cost of food and total cost). This is so that these values will also change when a user increases the number of portions they're ordering.

We won't include delivery fee, because it remains the same way irrespective of the number of portions a user orders.

Next, we'll follow the same process as we did above to create number variables for these.

Creating other number variables

Next, we'll tie the numbers in the design to their respective number variables, just as we also did earlier.

Note: In the main design, I gave the actual number (25) a different frame from the dollar sign (which is in text). This is because when creating the number variable, the dollar sign will not be attached, because it's a word, not a number.

Consequently, when I tie the number variable to the design, I'll be applying it to the frame containing the number alone.

Give the number a different frame from the dollar sign

So, when I tied the first number to the number variable I created (Cost-Portion), something interesting happened. The number in the design took on the value of the variable. Instead of 25.00 which was in the screen earlier, it changed to just 25 because that's what the number variable was set to.

Number variable changing the number in the design

Now, to avoid any unpleasantness, I'll change the values of the other numbers, and realign them.

Changed and realigned number values in the design

We've just created number variables for our design. In the section for advanced prototyping, we'll check to see if these number variables actually work.

How to Create String Variables in Figma

Next, you'll learn how to create string variables in Figma.

As I wrote earlier, string variables are used for text layers and variant properties. With string variables, you can change the headings in your design, flip text on different screens, change language modes, and so on.

For this article, we'll use string variables to change the headings on the screens for each mode we created earlier (light and dark).

As usual, our first step is to click on Local variables and select the type of variable we want to create.

Going to local variables to create a new variable

I'll choose String.

Choosing "String" out of a list of all variables

When I do that, the string variable I just created will appear on the list of variables.

Created String variable

If you noticed, the string variable has two columns for "string value", because I created the variable in the Modes collection. Following that, let's see if we can change the headings for each mode.

Note: The string value is the actual text you're trying to change.

So, for the first screen whose heading is "Transactions Made Easy", I want it to change to "Easy Transactions, Less Stress" for dark mode. For the second screen whose heading is "Pay Bills with Ease", I want it to change to "Paid Bills, Easier Life" for dark mode.

Since we're changing the headings for two different screens, we'll create another string variable.

Creating another string variable

Next, we'll input the different values for the different modes. To do this, just input the different texts for the two screens in both modes.

Inputing string value

Next, we'll tie the headings to the string variables we just created. To do this, click on the particular heading, and go to the Apply variable icon on the Text section.

Applying string variable

Next, scroll down and choose the string you're applying it to.

Choosing string variable

Once you're done, a string icon will come up, indicating that a string variable was applied to the text.

Applied string variable

Do the same for the second string:

Applying string variable to the second screen

Next, let's test to see if the string variable works. Select the screens which have the applied variable, go to Layers, and change the mode from light to dark.

Selecting screens which have the applied variables

Selecting dark mode

Mine works:

Screens changed to dark mode

How to Create Boolean Variables in Figma

Next up, we'll learn how to create Boolean variables.

Generally, boolean variables are variables that can only have two possible values – true or false. In Figma, boolean variables have the same function: they are used for variant properties or components with two values: true or false.

Remember the toggle in the design above?

Toggle in the design used for implementing number variables

I'll change that to a checkbox and use boolean variables to make it work.

To do this, I'll copy out the component and paste it on another frame. I'll then add the checkbox (and replace it in the main design screen later).

Checkbox on a blank frame.

Next, we'll make the selection a variant. To do this, double-click on the Create component icon on your Figma file header.

Double-clicking on "create component" icon

A variant will automatically appear:

Variant of the component

Next, I'll create different states for the checkboxes: default, hover, and filled.

Different states for the chechboxes: Default, hover and filled.

Now, we'll create the boolean variable.

To do this, go to Local variables as usual and select Boolean.

Opening local variables

Click on Create variable.

Next, we'll choose Boolean from the list.

Choosing "boolean" from the list

Created boolean variable

Next, we'll rename the boolean variable SaveFood since we're trying to create a function for saving a food choice for subsequent orders.

Renamied boolean variable

Next, we'll make the variable True by default. To do this, just click on the toggle icon by the side of the variable.

You've created a boolean variable!

We'll create an interaction for this boolean variable in the advanced prototyping section and check if it works.

How to Use Variables for Advanced Prototyping

In this section, we'll learn how to use variables for advanced prototyping in Figma, using the colour, number, string, and boolean variables we implemented earlier in the design.

N.B: You can only use advanced prototyping features on Figma if your file is on a paid team file. If you don't have a paid team version, you can apply for the Figma for Education plan. It's a way Figma helps learners and educators by giving them access to resources, and all benefits of a paid version, for free.

You can use advanced prototyping when you have a lot of screens to work on, and to simply make prototyping easier.

Advanced Prototyping with Number Variables

Starting with the number variables we created above, let's try to check if it actually works. But before we do that, we'll have to actually prototype the design.

Note that you can prototype number variables for designs where your user can increase or decrease the number of an item on the screen. Prototyping helps to show the functionality and how that particular feature would work.

To start with, I'll make the frame where the order count is a component. To do this, select the frame, and click on the component icon on your Figma file header.

Selecting the order count frame

Clicking on the component icon

The order count component

Click on the component icon again to make it a variant.

Making the order count component a variant

I'll make a frame outside the screen and drag the variant there, so I'll be able to work on the interactions well.

Making a frame outside the screen

Remember that we want to implement a function where the number of portions increases when the user clicks on the plus icon.

We'll start prototyping from here.

Now, click on the plus icon in the default variant and move to the prototype tab.

Clicking on the plus icon in the default variant

Next, click on the plus icon in the interactions area to add an interaction.

Adding an interaction

A tab will come up showing interactions. In this case, it's set to default On click, and no interaction has been added yet (None).

Adding an interaction

Now, click on the dropdown icon that says None.

Clicking on the dropdown icon

It'll bring up a list:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

List following the dropdown

Choose Set variable.

A list of all variables in the file will come up, and you can then select the particular variable you want to implement. I'll click on OrderCount.

Choosing "set variable"

Clicking on Order Count (the first time)

Next, I'll click on OrderCount again to write a mathematical expression, and all the available mathematical expressions will appear:

Clicking on Order Count (the second time) and showing all mathematical expressions

I'll select Addition, because that's what we're trying to do.

Choosing the "addition" expression

You'll notice that an addition icon popped up to signify that the addition expression was given.

Next, I'll input 1 by the side of the addition icon to show that it's plus 1.

Adding number 1 to the expression

Done!

Now, we'll follow the same steps to do the same for the minus icon, making the expression subtraction instead of addition.

Added interactions for the minus icon

Done!

Note: We don't really need the variant we created earlier. You might only use the variant in cases where you want to create a hover state. I just wanted to show you how easy it would be to create a variant while doing this.

Next, we'll just copy the prototyped component and put it back in the main design.

Frame containing the prototyped variable

To put the prototyped component in the main design, click on Assets at the top of the left hand panel.

This section will show all the assets in the page you're currently on.

Showing all assets on the page

Next, I'll drag the frame to the design.

Dragged asset to main design

Note: If you don't want to follow the process above to place the prototyped component in the design, simply copy the component (CTRL + C), and paste to replace the frame on the main design.

Now, let's check our prototype out. To do this, you don't need to open the prototype on another tab. You can simply click on the asset and press SHIFT + space bar.

Clicked asset

Another frame will appear on your screen. It's interactive and you can test your prototype on it.

Interactive frame on your Figma screen.

Try clicking on the minus and plus icons on the frame to see if it carries out its function.

After checking the prototype, I'd like to implement some logic.

We don't want a scenario where the clicking on the minus icon continues till after 0 and now gives us a negative sign like -1 as you can see in the image below.

Minus icon giving us negative values

That wouldn't make sense, so we'll add a conditional.

A conditional is simply a condition that sets rules about how the interaction should work.

To do this, I'll move to the frame containing the component I made earlier.

Frame containing prototyped component

I'll be adding the conditional to the minus icon since that's the area that would give us negative values. So, I want the values to stop at 1 since that's the least a user can order (they can't order half or 0, for example).

So, we'll just zoom into the component to add our conditional. Make sure you're on the prototype tab as well.

Moving to prototype tab and zooming in on the prototyped component

I'll click on the variable icon by the minus frame.

Selecting the variable icon close to the minus icon frame

This will bring up the already set interactions:

Already made interactions on the minus frame

Next, I'll click on the plus icon by the 'x' on the interactions header.

Clicking on the plus icon in the interaction header

I'll choose conditional from the list of options which will appear:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

Choosing conditional from the list of options

We'll then write the condition. To do this, click on Write condition by the if else statement.

Writing a condition for the interaction

When we click on Write condition, a list of all number variables will come up. I'll choose OrderCount.

Selecting ordercount

This will bring up a list of all available conditions:

• Equal to
• Not equal to
• Greater than
• Greater than or equal to
• Less than
• Less than or equal to

I'll choose Not equal to.

Choosing "Not equal to" condition

Next, the icon for the condition I chose will appear on the input field for writing the condition.

Condition appearing on the input field

Next, I'll input 0, which means the interaction is not equal to 0.

Inputing 0 (zero)

Next, I'll close the frame and try moving the Set variable section under the conditional section in the interaction. To close the Set variable section, click on the little dropdown icon.

Clicking on the dropdown icon to close set variable

When you click on the little dropdown icon, the Set variable section will be minimized, allowing you move the section under the Conditional section.

Closed set variable section

Next, I'll drag the set variable section under the conditional section. To do this, just hover on the set variable section and use your trackpad or mouse to drag it.

Dragging set variable under conditional

We just added a conditional to our interaction! The icon for the minus frame will change to a condition icon, showing that a conditional has been added.

Added a conditional to minus interaction

Now, you can test this new interaction to see how it works.

Mine certainly does! It doesn't go lower than 0 anymore.

How to implement cost per portion variable

Now, we want the other number values (cost per portion and total cost) to increase in response to the number of portions a user orders.

We'll start with the Plus icon frame:

Going back to the component we've been working on...

Frame with prototyped component

I'll click on the plus frame and go ahead to set variable.

Opening the interactions for plus frame

I'll click on the plus icon on the interactions header.

Clicking on the plus icon on the interactions header

Next, I'll select set variable.

Selecting set variable

A list of all variables that have been created in the file will come up:

• The color variables for text, buttons, headings, and so on.
• Number variables – OrderCount, Cost-Portion, and so on.

A list of all variables in the file

I'll scroll down to choose cost-portion, which is the cost per food portion a user orders.

Choosing "Cost-portion" (the first time)

An input field to write an expression for the variable will come up.

Write expression input filed

To write an expression, click on Cost-Portion again and select Addition.

Choosing cost-portion (the second time) and selecting addition

Addition icon coming up on input field

Next, I'll input 25, meaning that +25 should be added for every portion of food a user orders.

Inputing 25

Having added the interaction for the plus frame, we'll follow the same process for the minus frame. When you're done, the Set variable section should be under the Conditional section.

Adding interaction for the minus frame

Remember there's a conditional for the minus frame, so I'll just drag the new interaction inside the conditional.

Dragging the new "set variable" interaction inside the conditiona;

Now, try testing the new interaction you just added. Mine certainly works!

Testing the new interaction

Next, we still have one last variable to add (Total Cost).

Follow the steps above to recreate this interaction. Starting with the plus frame, implement the variable to make sure $25 adds when the order increases. It should show a placeholder – Total Cost + 25.

Implementing Total Cost variable

Now, do the same for the minus frame and test the interaction. Don't forget to add the new interaction inside the conditional.

Mine works!

Testing the interactions

You just learnt how to implement number variables with advanced prototyping in Figma. Congrats!

Advanced Prototyping with Boolean Variables

Next, we'll create an interaction for the boolean variable we created earlier in the article.

Note that you can prototype your boolean variables in designs where you have features like checkboxes and toggles. The prototype would show how the checkbox is supposed to function.

To create the interaction, move to the prototype tab and focus on the frame containing the boolean components.

Frame containing boolean components

Now, our main interaction will start from the hover state because that's when a user tries to click on the checkbox. But we still need to add an action that will take the user from the default state to the hover state.

To do this, I'll just click on the first variant and drag it to the second variant.

Connecting first variant to the second variant

I'll change On-click to While Hovering. To do this, just click on the On-click dropdown and select from the list that pops up:

• On click
• On drag
• While hovering
• While pressing
• Key/Gamepad
• Mouse enter
• Mouse leave
• Mouse down
• Mouse up
• After delay

Clicking on the on-click dropdown

Selecting "while hovering" from the list

Selected "while hovering"

I also want to change Instant to Smart Animate, so I'll click on the dropdown icon by Instant, and select from the list that appears:

• Instant
• Dissolve
• Smart animate

Changing "Instant" to "Smart Animate"

How the interaction looks

So, we're done with the first interaction and we'll get started on connecting the second variant to the third variant (Hover - Filled).

Just as we did earlier, we'll just drag the second variant to the third variant.

Connecting the second to the third variant

How the interaction looks

Like I said earlier, the main interaction starts from the second variant so we'll not be following the same steps we took to add the first interaction.

To continue, I'll click on the plus icon on the interaction header to add an action, and select Set variable from the list that pops up:

• Navigate to
• Change to
• Back
• Set variable
• Conditional
• Scroll to
• Open link
• Open overlay
• Swap overlay
• Close overlay

Clicking on the plus icon on the interaction

Choosing "set variable" from the list

Next, I'll click on Pick target variable to select the boolean variable.

Clicking on "pick target variable"

I'll scroll down the list of variables to choose the variable I want: SaveFood.

Selecting "SaveFood" variable

Now, to write the expression for this variable, we're going to say the value will be equal to true. So, I'll select True.

Writing the expression and selecting "true"

Having selected True, the expression (true) will go under the SaveFood variable, indicating that an expression was applied.

How the interaction looks

Next, we'll just copy the original component and paste it in our design so it can sync when we're checking the prototype.

Pasting the default component in the main design

To check the prototype directly on your Figma page, click on Shift + space bar.

Mine works!

But I noticed something; I can't un-check the checkbox. No interaction was provided for that. Now, we'll quickly add that interaction so our component works perfectly.

To do this, we'll go back to our components, making sure we're in prototype mode, and drag the connection from filled all the way back to default.

Dragging the connection from filled state to default state

Now, it's works perfectly!

How to Use Variables for Developers – Using APIs

Variables are very helpful for teams consisting of developers and/or designers.

Variables are now supported in Figma’s Plugin API—for building plugins and widgets—and in the REST API. Since variables is currently in open beta, features and functions may change as we respond to feedback. – Figma Docs

There are three documentations which contain support for variables for developers on Figma:

• For the REST API:

This API includes endpoints for querying, creating, updating, and deleting variables. – Figma docs

To be able to use this API, you must be a member of an enterprise.

• For the plugin API:

This API provides support for creating and reading variables, and binding variables to components. – Figma docs

• For the widget API: This API is connected to the plugin API. It is available to widgets by using the Plugin API the widget contains.

Widgets are interactive elements that can be used to create interactive prototypes. Widgets extend the functionality of design files and FigJam boards and are often part of the larger design system, which is a collection of reusable components.

Conclusion

Variables exist in Figma to make your designs better. They are easy to use and create, and are helpful in every design project. In order to save yourself time, make sure to incorporate variables into your design process.

The key is to practice and explore, and you'll get better as you go.

Thank you for reading this article, I hope you enjoyed it!

Now, this article aims to help you go back to the basics and remind you of the meaning and importance of IA. So if you don't really understand the concept of Information Architecture, this is the best place to be.

We'll also explore how to do a userflow and a sitemap later in the article. Let's get started!

What is Information Architecture?

Information Architecture (IA) is the process of planning and designing how information is organized in websites and applications. It focuses on meeting user needs and business goals by creating a logical and user-friendly information structure.

Information Architecture is mostly used by designers to structure the layout of their designs, especially during the sketching/low-fidelity stage.

Importance of Information Architecture

I can't overstate the importance of Information Architecture. Below, I'll share some reasons why every UX Designer should learn what IA means and how to implement it effectively:

• Organization and Structure: Information Architecture provides a framework for organizing and structuring information. It helps you make sure your designs are logically grouped and categorized.
• Content Prioritization and Hierarchy: Hierarchy is one of the basic principles of design, and IA helps you achieve that. It enables designers to highlight key information and arrange content based on its relevance and importance to users.
• User-Centric Design: Information Architecture helps designers think of their users during the design process, by considering how users typically think, behave, and search for information. Everyone has mental models, including users, and IA helps to make sure that information is presented in a way that matches the mental models of your already existing/target users.
• Navigation: Information Architecture provides a clear way to navigate a design. It allows users to understand intuitively where they are in a site and how to move between different sections of a design.
• Business Goals: Information Architecture helps to make sure the information presentation of your design aligns with the goals and objectives of the business/firm/company.

Types and Forms of Information Architecture

There are so many types and forms of Information Architecture, especially since it's used in a lot of fields. But here we'll be looking at Userflows and Sitemaps, which are the most common ones in design.

What is a Userflow?

A userflow refers to a diagram that shows the step-by-step journey of a user through a website, application, or system.

Imagine trying to order food online. Some steps you might take include: opening the food ordering application on your phone, signing up/logging in, choosing from the list of available food, choosing how many portions you'd like, and finally making payment online.

That's a typical example of how a user flow might be structured.

Userflows illustrate the paths, interactions, and decision points users encounter as they navigate and complete specific tasks or goals. They help designers and stakeholders understand and optimize the user journey.

An example of a Userflow

What is a Sitemap?

Sitemaps are diagrams that display the layout and organization of content within a website or application.

Imagine a 2 bedroom apartment. The apartment could contain a sitting room, a kitchen, 2 bedrooms, a bathroom, and a dining room. The sitemap simply tells us how we can get to the kitchen from the sitting room/the bedroom/any place in the apartment.

In design, sitemaps provide an overview of the pages, menus, and sub-pages, helping us plan and visualize the information architecture and user experience of the system. They aid in content planning, navigation design, and website development.

An example of a Sitemap

Differences Between Userflows and Sitemaps

1. Focus and Perspective: Userflows primarily focus on the step-by-step actions and interactions a user takes within an app or website, to accomplish a task or goal. Sitemaps focus on the overall structure and organisation of a website or an application, depicting the hierarchical relationship between different pages or sections.
2. Level of Detail: Userflows provide more detailed information about each step of the user's journey, including specific actions, decisions, and possible outcomes at each stage. Sitemaps provide a high-level overview of the app's or website's structure, showing the main pages or sections, without diving into the specific interactions within each page.
3. User-Centric vs Architectural: Userflows are user-centric and primarily represents the user's perspective and actions within the app or website. Sitemaps are more architectural in nature, representing the overall structure and organisation of an app or a website from a high-level viewpoint.
4. Interactivity and Decision-points: Userflows highlight interactive elements within the app or website, illustrating the choices and options available to the user at each step. Sitemaps do not explicitly showcase interactivity or decision points.

When to Use Information Architecture

You might be wondering when knowledge about Information Architecture will come in handy.

You can use Information Architecture in any or situation at all, really – like designing a mobile app, a website, a pitch deck, and more. Information Architecture is always helpful because it helps you decide what content/information comes first, what follows and how, and so on.

Typically, you'll think about Information Architecture after conducting user research. This is because research can help you understand the goals and needs of your users, and what they would likely do when they're trying to accomplish a goal on your site.

Also, userflows usually come before sitemaps, because you have to understand how a typical user would journey through your site, before deciding on how the layout or organization of that site would look like.

How to Create Userflows and Sitemaps

You can use the same methods and tools to create userflows and sitemaps. You just need to understand the differences between them and bear in mind that the purpose of each one is different.

How to Create a Userflow

Step 1: Define your Goals and Identify Tasks

The first step is to define your goals and objectives for the project, stating what kind of Information Architecture you're trying to create (a userflow or a sitemap). You can just write this down on paper before digitalizing it.

For example: I'm working on a food ordering app, and I'd like to make a userflow showing how a typical user would order food using the app.

I would write down the typical/possible steps the user would have to go through to achieve the task of ordering food. These steps could be:

• The user opens the application on their phone.
• The user signs up or logs into the application.
• The user goes to the homepage.
• The user chooses from restaurants close to them.
• The user selects from the menu and adds food to cart.
• The user pays for the food and waits for delivery.
• The user exits the application.

Step 2: Choose a Tool

The next step is to choose a tool you want to use to create your userflow. There are lots of tools available for this, like Figjam, Miro, Whimsical, and others. I use Figjam since it's so easy to understand.

Here's what it looks like:

Figjam interface

Step 3: Sketch your design

The next thing is for you to sketch your actual flow on Figjam. Before this, you should note that every shape for a userflow has a specified meaning. You can see some shapes, flows and associations, and their meanings below.

Shapes, flows, and associations for a userflow.

The First Shape (Rounded edge rectangle): This shape represents the start/end of a userflow. It's typically used when you want to start or end a userflow. If you notice, there's also an end tag with a similar shape in the image above. Some people also use a circle to represent this.

The Second Shape (Rhombus): This shape represents a decision. It's used to show when a user has to make a decision like "login", "signup", and so on.

The Third Shape (Rectangle with dotted lines): This represents a group. A group in a userflow can contain process and data, showing that an action has been submitted to the database, and it's expecting feedback from the site.

The Fourth Shape (Parallelogram): This shape shows when the user has to make an input, like "choose how many portions of food they want to order, and so on.

The Fifth Shape (Rectangle with solid lines): This shape shows the process of the user going through the application or website. It might also include screens the user needs to pass through in order to achieve their goal.

The Sixth Shape (Cylinder): this shape represents the data running in the system, which feedback is required from.

Now that you know the different shapes and their uses, you'll need to first draw the shape for 'start':

Choosing a Shape

Next, you'll want to resize the shape if necessary, and input your text.

Resizing shape and adding text

Up next, you'll need to add another shape and draw a connector. To add a connector, you can either click on the edge of the previous shape and drag, or draw the connector directly from the Figjam tools.

Drawing a connector to the next shape.

Drawing a Connector from Figjam tools

When you do that, you then input your text. (Remember to take note of the meanings/roles of each particular shape).

You continue this way until you're done adding all the steps in your userflow diagram.

Example userflow diagram with multiple steps

Step 4: Validate and finalize

Once you're done with your userflow, the next thing is to validate the diagram. This just means reviewing the userflow to make sure it's accurate, usable, and aligns with the users' needs.

Basically just go through the diagram and consider whether it represents the intended user journey, and whether all necessary steps and decision points are included.

How to Create a Sitemap

Earlier in the article, I mentioned that the processes for creating a sitemap and a userflow are similar. The difference lies in the purpose of the two diagrams. We'll be exploring how to create a sitemap using Miro, a diagramming tool.

Step 1: Open the tool

The first step obviously, is to open your tool. If you don't have an account already, sign up at Miro and it should display your dashboard.

Miro Dashboard

Next, click on "New Board" to open a blank canvas.

Step 2: Start drawing the sitemap

Next, you start drawing your sitemap. You should already know what screens you'll be designing, and how these screens connect to each other. Your userflow might help inform this.

Click on the Shapes tool from the toolbar on the lefthand side of your screen, to bring up all available shapes.

Note that, unlike Userflows where every shape has a meaning, you can use any shape for your sitemaps. Most designers make use of rectangles when doing sitemaps. It's very easy to build and stack, especially when you have lots of pages to represent.

Choosing a shape

A plus icon will appear, and you just have to drag till the shape is to your satisfaction.

Step 3: edit the shapes

Next, you edit the shape to add colour, and your text. This could be "Homepage", "Log-in", "Signup", and so on – whatever is the first screen of your design.

When you click on the button, a sub-menu comes up. Here, you can switch your shape type, change text font and size, add text colour, align it, add a border or fill colour for the shape, and more.

Typing inside a shape

Editing a shape

Step 4: add shapes for the next screens

Next, you need to draw shapes for the next screens which the homepage branches into. This could be major items on the navigation bar, where you have to click on CTAs (Call To Actions) to open them.

To draw the next shape, you can simply click on the edges of the first one, and the outline of the shape will be displayed.

Sketching the next shape

Click on the outline to indicate that you want the shape to stay, and basically edit just like you did the first one.

Editing the second shape

Next, you need to add other shapes that represent the subpages which the homepage branches out into. Just click on the first shape like you did when making the first sub-page shape.

Adding other sub-pages

You can also change their colours to differentiate from the homepage and show hierarchy.

Step 5: draw more pages

Next, you draw shapes for the pages under the first set of sub-pages.

You just continue that way until you're done with your sitemap, and all the screens you want to design have been represented in it.

When you're done making your userflow and sitemaps, you can move on to your low-fidelity wireframes or your main design proper. The IA you've done informs your next step and decides what screens you should be designing in particular.

Conclusion

Information Architecture is very important for you to be able to organize the layouts of your designs and arrange them. This is helpful because it can really help improve the quality of your designs.

There are even templates on some softwares that could help you do your Information Architecture diagrams. Remember to practice as often as you can.

Thank you for reading!

In this article, you will learn about the 60-30-10 colour rule, how it's used, and see a practical example of it.

What is the 60-30-10 rule?

In the design world, the 60-30-10 rule is a rule that helps to guide designers on choosing and pairing colours for their designs.

To put it simply, this rule says that the dominant/primary colour should take up 60% of your design, the secondary colour should take up 30%, while an accent colour should take up 10% of your design.

Why is This Rule so Important?

• Emphasizing Key Elements: The 60-30-10 rule is great at emphasizing key elements in your design. The dominant colour draws attention to large surfaces and establishes the overall mood of the design. The secondary colour supports it, while the accent colour at 10% highlights specific features or parts of the design.
• Visual Balance: To achieve visual balance in a design, one colour/element should not overpower the others. The 60-30-10 rule ensures that there is a sense of equilibrium and balance, by allocating percentages to each colour.
• Simplicity and Consistency: Having 3 established colours simplifies the design process. It narrows down your choices and prevents overwhelming combinations of colours.

How to Choose Colours for Your Designs

The 60-30-10 rule has three components:

• The Primary Colour: This is the dominant colour of the design. It forms the foundation of the colour scheme and covers the majority of the design (60%). The primary colour is typically a neutral colour and is often used as the background of the design. Colours like white, blue, beige, and so on can be used as primary colours.
• The Secondary Colour: This colour supports the dominant colour and adds more visual interest to the design. It covers about 30% of the design. The secondary colour can be used for typography, icons, and subheadings/subtitles in a design. Colours like teal, black, dark blue, and others can be used as secondary colours.
• The Accent Colour: This colour usually covers about 10% of the design. It helps highlights specific sections of the design like buttons, call-to-action elements, or any element that needs emphasis in a design. Accent colours are usually colours that have high contrast. Colours like yellow, orange, light green, and others make good accent colours.

Illustration of the 60-30-10 rule

It's important to choose colours that complement each other for your designs. This will contribute to the overall aesthetics and create a dynamic and engaging visual experience.

If you are worried about what colours to use while designing, you can always check out free colour palette generators. Some colour palette generators you try out include:

• Coolors.co
• Color Space
• Adobe Color

Example Hero Page Using the 60-30-10 Rule

I designed an hero page to give an illustration of how the rule works.

Step 1- Choosing a Frame

I had to choose what desktop frame I wanted to use for the hero page. I chose Macbook Air.

Macbook Air Desktop frame

Step 2- Adding a Grid

Next, I added a grid to the frame. I used these specifications: Columns-12, Margin-100.

Adding the Grid

Step 3- Adding Content

Next up, I added the logo and the navigation bar.

Adding the logo and nav bar

I already knew how I wanted the structure of my hero page to look like, so I just added the rest of my design content.

My Completed Hero Page Illustrating the 60-30-10 Rule.

For the design above:

• My primary colour is white. It covers the background of the design. It enhances readability and legibility of other elements in the design. Also, I chose white because it's a neutral colour, as I mentioned earlier.
• My secondary colour is a saturated black. It supports the primary colour, and is used for text and typography.
• My accent colour is a shade of brown. It adds some pop, and provides some contrast in the design.

Conclusion

The 60-30-10 rule is used in different design sectors because of how useful it is to designers. Also, it is not a strict requirement and can be adjusted to suit individual preferences and design goals.

By following the 60-30-10 rule, you can achieve a well-balanced color scheme that ensures visual interest and coherence in your design. Basically, just choose:

• Your primary colour – a neutral colour,
• Your secondary colour – a colour that supports the primary colour, and
• Your accent colour – a colour that pops!

Whatever colours you decide to use for your design depend on the design objectives and the overall aesthetic you want to achieve. Remember that mastery of colours come with adequate practice. So make sure to practice more and you will see a lot of improvement in your usage of colours.

Wireframes are visual representations of the structure, layout, and functionality of a website, application, or other digital product.

You typically create them during the early stages of the design process, and they provide a simplified and focused view of the user interface and user experience.

You can create a wireframe using a variety of tools, including paper and pencil, whiteboards, or specialized digital software. They usually consist of basic shapes, lines, and text, and aim to communicate the hierarchy of information, the placement of interactive elements, and the flow of user interactions.

Wireframes serve as a blueprint for the design process. They allow designers and stakeholders to quickly iterate and refine ideas before investing time and resources into creating a fully functional prototype or final product. They are an essential tool for creating effective and user-friendly digital experiences.

Why is Wireframing Important?

Wireframing is an important process in web and app design because it helps designers to plan and communicate the layout and functionality of a website or application before it is built. Here are some reasons why wireframing is important:

1. Wireframing helps stake holders visualize the structure of the design: Wireframing allows designers to create a visual representation of the website or application's structure. This includes the layout of pages, navigation, and the placement of various elements.
2. It helps designers focus on functionality: With wireframing, designers can focus on the functionality of the website or application without getting distracted by colors, typography, and other design elements.
3. It saves time and money: Wireframing can save time and money in the long run by identifying potential problems and making necessary changes early on in the design process, rather than during the development phase.
4. It's an easy way to gather feedback: Wireframes are a great way to gather feedback from stakeholders and users, as they provide a clear and simple representation of the design without distracting visual elements.
5. Plan for responsive design: Wireframing is essential when designing for different screen sizes and devices. It allows designers to plan for responsive design and ensure that the website or application works well on all devices.

Types of Wireframes

Everyone has a specific way of doing wireframes. Some designers go from paper sketches to high fidelity wireframes or from low-fidelity wireframes to high-fidelity wireframes.

It all depends on the particular project the designer is working on, what they intend to achieve, and the timeframe they have.

Paper Sketches

I begin my wireframing process by doing paper sketches first, because it allows me put out my ideas really fast without having to bother about neatness and quality. It also saves time when designing – you just think of quick solutions and put them on paper.

Some Techniques for Paper Sketching

• Crazy Eights

In the design world, "Crazy Eights" is a quick sketching exercise that helps designers to quickly generate a variety of design ideas and explore different solutions to a problem, in a short amount of time.

Here's how to do Crazy Eights in design:

1. Start with a blank sheet of paper and fold it in half, then in half again, and one more time so that you end up with 8 rectangles on the page.
2. Set a timer for 8 minutes.
3. Within the first rectangle, sketch out an idea for the design problem you're working on. It doesn't need to be perfect, just get the basic idea down on paper.
4. When the timer goes off, move on to the next rectangle and sketch a new idea. Keep going until you've filled all 8 rectangles.
5. Once you've completed all 8 sketches, take a few minutes to review your ideas and identify the strongest ones.
6. Use the strongest ideas as a starting point for your design, and continue refining and iterating until you have a final product.

You'll see an example of this in a bit when I walk you through my wireframing process.

• 20 Second Sketches

Set a timer for 20 seconds and sketch a simple object or scene. Repeat this exercise multiple times, trying to capture as much detail as possible in each sketch.

• Collaborative Sketching

Pair up with another person and take turns adding to a sketch. Each person has a set amount of time to add their own unique element to the drawing. This exercise encourages collaboration and improvisation.

Low-Fidelity Wireframing

Low-fidelity wireframing is a technique of creating a rough visual representation of a design using simple shapes, lines, and text. Low-fidelity wireframes are the most basic of wireframes. This type of wireframing is typically done with pen and paper, or with a digital tool that allows for quick, low-detail sketches.

Mostly, they focus on the core content and structure of the interface, and are simple and straightforward. Low-fidelity wireframes are a useful tool for designers to quickly explore and iterate on different layout and content options, without getting bogged down in details that can distract from the overall design direction.

Advantages of Low Fidelity Wireframing

• Speed: Low-fidelity wireframes can be created quickly and easily, allowing designers to explore multiple ideas in a short amount of time.
• Flexibility: Low-fidelity wireframes are easy to modify and change as the design evolves, allowing designers to iterate quickly.
• Focus: By focusing on the structure and layout of a design, low-fidelity wireframing helps designers avoid getting distracted by details that may not be relevant.
• Collaboration: Low-fidelity wireframes can be easily shared and discussed with other team members, allowing for greater collaboration and feedback.

Disadvantages of Low Fidelity Wireframing

• Lack of Detail: Low-fidelity wireframes may not provide enough detail to fully convey the intended design, which can lead to misunderstandings and miscommunications.
• Limited Interactivity: Low-fidelity wireframes are static and do not allow for interaction, which can make it difficult to test usability and user flow.
• Limited Realism: Unlike high fidelity wireframes, low-fidelity wireframes may not accurately represent the final product, which can make it difficult to communicate the design to stakeholders who may not be familiar with wireframes.

Why You Might Want to Use Low-Fidelity Wireframes

• For early-stage conceptualization: Low-fidelity wireframes are great for early-stage conceptualization. Because they allow you to quickly iterate and experiment with different layout options without getting caught up in the visual details, low-fidelity wireframes are extremely useful during the initial stages of your design.
• For Time and Resource Efficiency: In situations where time is of great essence, low-fidelity wireframes helps to make changes more rapidly, saving time when needed. Also, it requires fewer resources, which is ideal for situations where resources are scarce.
• For User Testing and Feedback: Low-fidelity wireframes provide a clear representation of the overall structure of your design, allowing for easier feedback from stakeholders and team members. Low-fidelity wireframes are also important during user testing sessions, as it helps you collect valuable insights on the fundamental structure and functionality of a design, before investing significant effort in visual design.

Mid-Fidelity Wireframing

Mid-fidelity wireframing refers to wireframes that are created with a moderate level of detail and design elements. These wireframes typically focus on the overall structure of a product and may include basic typography and design elements.

Advantages of Mid-Fidelity Wireframing

• Efficient Design Process: Mid-fidelity wireframing can be completed quickly and efficiently, allowing designers to iterate and test their designs faster.
• Cost-effective: Mid-fidelity wireframes are less expensive to create than high fidelity wireframes, making them a more cost-effective option for design projects.
• Usability Testing: Mid-fidelity wireframes can be used for usability testing, providing insights into user behaviour and interaction with the product.
• Flexibility: Definitely one of the most importnat advantages of mid-fidelity wireframes. Mid-fidelity wireframes are less detailed than high fidelity wireframes, making it easier to make changes and pivot design direction during the design process.

Disadvantages of Mid-Fidelity Wireframing

• Less Realistic: Mid-fidelity wireframes may not accurately represent the design's final look, which can impact stakeholder and client expectations.
• Limited Visual Details: Mid-fidelity wireframes do not provide as much detail as high fidelity wireframes, making it difficult to communicate the final design vision to stakeholders.
• User Experience Limitations: Because mid-fidelity designs do not have enough visual details to test the user experience effectively, leading to potential usability issues.

You'll see an example of this below when we walk through my process.

Why You Might Want to Use Mid-Fidelity Wireframes

• For Refining Structure and Content: When you need to refine the structure, content and layout of your design, mid-fidelity wireframes are beneficial. They allow you add more detail to your wireframes while being relatively quick to create and modify.
• Information Architecture: Mid-fidelity wireframes provide a clearer structure and visual representation of the design, showing off the userflow better than low-fidelity wireframes.
• Stakeholder Presentation and Approvals: Mid-fidelity wireframes are more polished and appealing than low-fidelity wireframes. This makes them a more effective tool when presenting design ideas to stakeholders and clients.
• Design Consistency: By adding more visual details to the wireframes, a consisent design language can be established across multiple screens or pages.

High-Fidelity Wireframing

High fidelity wireframing refers to the creation of detailed, visually-rich wireframes that closely resemble the final product or website.

These wireframes are often created using tools like Adobe XD or Figma and include elements like typography, color schemes, and detailed user interface elements.

Advantages of High-Fidelity Wireframing

Some advantages of high-fidelity wireframes include:

• Detailed Representation: High fidelity wireframes provide a more detailed representation of the final product, making it easier to communicate the design vision to stakeholders.
• Efficient Testing: High fidelity wireframes can be used for testing purposes, helping designers identify any usability issues before the development phase begins.
• Better Visuals and User Experience: High fidelity wireframes are aesthetically pleasing and provide a more realistic view of the final product which helps users visualize the design better. It gives the users better understanding of how to interact with the product.

Disadvantages of High-Fidelity Wireframing

• Time-consuming: High fidelity wireframes take longer to create than low-fidelity wireframes. It can be challenging to complete high fidelity wireframes withing tight project timelines.
• Cost: High fidelity wireframes can be expensive to create, as it requires a significant amount of skill and effort from the design team.
• Limited Flexibility: High fidelity wireframes are not as flexible as low-fidelity or mid-fidelity wireframes. They are detailed and specific, which makes it challenging to change the design direction once they are completed.

You'll see an example of this in a moment during my process walkthrough.

Why You Might Want to Use High-Fidelity Wireframes

• Hand-off to Development: High-fidelity wireframes provide accurate visuals, detailed specifications, and design assets that facilitate the handoff process to developers.
• High Visual Realism: High-fidelity wireframes closely resemble the final visual design and provides a realistic representation of the user interface, to potential users and stakeholders.
• User Experience Validation: High-fidelity wireframes allow you to test and validate the user experience more accurately. With realistic visuals, you can simulate user interactions, flows and transitions, enabling users to provide meaningful feedback and uncover potential usability issues before development.
• Design Consistency: By including more visual elements than the mid-fidelity wireframes, high-fidelity wireframes helps establish a consistent visual hierarchy and design language that can be carried over to the final product.
• Style Guide Creation: High-fidelity wireframes play a crucial role in developing a style guide for your design. They establish the visuals and design assets that will be used till the launch of the product.

My Wireframing Process

I worked on a mobile app to help pregnant mothers through their pregnancy journey. I started with paper sketches, moved on to mid fidelity wireframes, and then did my high fidelity wireframes.

Step 1 – Paper Sketches

For my paper sketches, I used the Crazy Eights(8s) method, which is a very quick way to put out ideas and inspirations.

Basically, I took out my drawing book, drew 8 identical phone frames and sketched out how I wanted my design to look using a pen. The sketches were more elaborate than usual, because I wanted to move straight to doing mid-fidelity wireframes.

Crazy Eights sketches

Step 2 – Moving to Mid Fidelity Wireframes

Next up, I opened a new Figma file on my laptop and transferred my sketches on paper to phone mockups on Figma.

First, I chose the frame I wanted to use for the designs – Iphone 13 pro.

Choose the phone you want to use

Then I used my sketches as a guide. It was mostly replicating what I already had on paper, digitally.

Next I used rectangles to denote images, and lorem ipsum (dummy text) for parts of the design which needed long texts.

Adding rectangles and dummy text

Prior to this, I had created a style guide. So I just got the icons from the style guide.

My Mid-fidelity Wireframes

Step 3 – Creating High Fidelity Wireframes

This was the last phase of my wireframing. Here, I added colours, images, and real text to my designs.

1. I started by adding colours to the mid-fidelity screens.
2. I also wrote out real text for the screens, making sure the copy matched the branding and purpose of the app.
3. Lastly, I added illustrations and images where needed, helping users relate to the design.

Example of high fidelity wireframing

In high-fidelity wireframing, once the overall structure is in place, you can start adding more details and refining the design. This includes adding visual elements such as images, icons, and typography, as well as defining interactions and transitions.

Share the high-fidelity wireframe with stakeholders, users, or other team members, and gather feedback. Use this feedback to refine the design and make any necessary changes.

Once the wireframe has been approved and refined, finalize it by adding annotations, notes, and any other necessary documentation. The wireframe should be detailed enough to provide a clear understanding of the design to developers, but not so detailed that it hinders the design process.

Completed High Fidelity Wireframes

Note that you can use any type of wireframe you would like to, depending on the specific project you're working on, the stage of the project and your objectives. You should also consider the complexity of the design, the available time and resources, and the needs of the stakeholders and users when determining the appropriate fidelity level for your wireframes.

Conclusion

Wireframing is an essential step in the design process that helps ensure a successful outcome. It enables designers to visualize the layout and functionality of a platform before investing significant time and resources into coding and development.

Incorporating wireframing into your design process can lead to more efficient, effective, and user-friendly designs.

Only a few of us come naturally to self-marketing. Most of us prefer making the thing and enjoy showing it off (at least a little!), but hope it’ll be appreciated on its own merits – or that someone else will champion it.

Deliberate marketing and sales makes people uncomfortable, and understandably so, because asking for money is like asking for love.

But if you worked hard on something thoughtful, it deserves to be noticed! And that means you’ll have to market it.

I spent years resisting marketing. Self-promotion is vulgar and sales seemed unseemly. And so I learned the hard way:

1. Your friends and colleagues aren’t a channel (a conduit to the people who want your goods). They might not even have your customers as part of their network or audience. You can ask, but don’t rely on the people you know. Go find the people you want to help!
2. If no one knows about your service or product, you don’t have a business, you have a hobby. So start marketing, and if you can’t find sales, it’s still a hobby, but at least you’ll be aware of its potential.
3. The things that annoy you about others, or fear doing yourself, are probably things you should learn how to do. Just do them in a way that wouldn’t annoy you if you were a customer.

I’ve written this to break down what I learned-while-doing about creating a product or service for people. Specifically, it’s about the landing pages and channels you’ll use to promote your product or service, and the basics of having an email list.

Here’s what we'll cover:

1. How to Design to Serve Real People (Not Just Your Creativity)
2. How to Communicate What You’re Offering While You Develop it
3. Why Email Marketing is Necessary
4. How to Integrate a Mailing List with Your Website
5. What Landing Pages Are About
6. Writing, Rewriting, and Sharing Your Content
7. Different Landing Pages and Their Analytics
8. How to Avoid the Free = Ick Factor
9. Multiple Offerings and List Groups
10. Final Advice for Beta Testers, and the Video Intro
11. Conclusion

How to Design to Serve Real People (Not Just Your Creativity)

You are likely working on an idea based on a need you identified and a thing you are able to do. Now you’re trying to make it fit for other people. That’s one way to approach design, and that’s okay. Design is about elegantly fulfilling a need:

1. The customer is experiencing pain in getting from state A to A’ or B : an obstruction or a gap that they are having trouble negotiating.
2. The customer is getting around the obstruction or gap in a habitual or work-around kind of a way, but there’s frustration: inefficiency, extra steps, aesthetics, approvals. (There could be a whole other way of doing things, but they don’t know it yet.) And lastly (or alternatively):
3. The customer is seeking an emotional reward like security, status, identity, love, beauty, harmony, health, self-expression, self-actualization, or the attainment of a dream.

Figure out what you’re trying to respond to with your idea. (If it’s item #3, tread carefully. Purveyors in this category are consumer brands, artists, and charlatans. If this was the category you fell into when being marketed to, you wouldn’t want to be duped!)

Before you do anything else, you have to do the hard part: go out and ask people non-leading questions about the problem. Don’t propose your solution in any way; listen for what they say would be their solution.

If you get out of your own head and listen to what’s in other people’s heads, you’ll come up with some a-ha moments that will help you in two ways:

1. You can design your product or service to better respond to their actual needs, or
2. You can communicate to this exact need and demonstrate how your product will help them.

The research you’re doing for the design and the communication is your value proposition. The features you build will correspond to your value proposition, and it will all evolve accordingly.

How to Communicate What You’re Offering While You Develop It

Too many people wait until a product is well underway before they start talking about it. Why?

There are a lot of reasons, many of which stem from “impression management” that range from seeming boring (your idea is a knock-off) or flaky (it changes all the time), to inducing the kind of envy that courts competition and controversy.

People implicitly know both the need and the catch-22 of building “social proof.” But know this: the world will be utterly indifferent to your ideas until you have an audience!

There are many ways—channels—to reach your customers, and only some of them are online.

As explained in Traction, you need to start developing and communicating with your marketing channels at the same time as you develop the product. You may even need to add or shut down a channel to find and focus on your customers.

If all goes well, by the time your product is ready, your audience will be, too.

So one of the necessary parts of those channels—for almost all of them, and certainly when it comes to a code-based product—are landing pages and the email list.

Why Email Marketing is Necessary

If you already engage with the folks in your topic area on social media, then you’ve got an opportunity to shine. But places you hang out on also have a culture, and through this, you’re at risk of being distracted or seduced and misdirected.

Your attention is precious, and you should use social media only to glean and boost what’s worthy of it. If social media is costing you time, focus, equanimity, or social capital (status is a zero-sum game!), then it’s working against you.

Which brings us down to email. Even with the rise of Slack and Microsoft Teams, email is how we get work done and find out about things in our communities.

In all honesty, the high-frequency repeat demand of email is not enjoyable, and you have to be aggressive with how you keep your Inbox working for you.

Most of us subscribe to too many newsletters, and too many email marketers have been abusive of our attention. The sheer volume buries good email habits, along with what’s actually needed in your inbox, because who can keep up? And then we rely on extensions and AI to substitute for a reasonable attention-load.

Yet despite all that, there are emails that I love getting (though I wish just a little less frequently). When I sit down to read my Inbox or folders, I share the articles I like, regardless of their date.

Email is private communication. Barring any forwards, bcc:, or abuse of privacy (which you shouldn’t expect from recipients of a broadcast list), it’s simply a message from the list owner to you, or you to your list members. Readers can ignore it, engage with it, or simply read and archive it.

Unlike other channels, where you don’t know who’s-seen-what unless they engage with it, you own this connection to your audience. It can’t be reduced or taken away by the social platform; you only lose them if their emails bounce or they unsubscribe.

Email isn’t subject to the algorithms that bump you up or down in visibility and priority, depending on engagement.

It’s also not subject to the dampening influence of observers who pay attention to the online behaviour of their connections. We all want group interactions to go in our favour, so people are careful what bandwagons they join.

Email, being private, doesn’t have these meta-filters, so it’s a way to get to know your customer, while letting them get to know you. How refreshingly old-fashioned and well-behaved!

And the truth remains: if people let into your email box, and you make yourself a good guest, you’re welcome to continue to talk about your mutual interests. Your audience will come to like, respect, share, and buy from you.

So before you start communicating with people on your list, decide how you’re going to make yourself a good guest.

Best practices for an email list

First, email hygiene:

1. Their inbox isn’t free real estate for advertising. Always provide information of value that they don’t have to click for.
2. Their priorities in life aren’t yours. Do not abuse them with frequency or urgency. Set a schedule of quarterly or every six weeks (ideal for charities; startups, too), monthly (professional events and news round-ups), or bi-weekly or weekly (for local events or lots of relevant news). More than once a week? That’s pestering.
3. Tell them when to expect you: either a consistent date (e.g. the 14th; the second Thursday of the month; Wednesday afternoons), or an anticipation of when the next newsletter will be.
4. Do not resend-to-unopened. So what if people aren’t opening your email? It might be because they’re backlogged or doing other things. You resending it (even with a different subject line, such as A/B testing) double-taxes their attention. They don’t need it. Don’t use this self-serving email tool (your provider will suggest you try it!). If it’s really that important, you take the hit and write them a new message.

Next, style and personality (yes, including for projects and brands):

1. Create a simple, consistent, and personalized (to them by name, not “hey, everybody!”) template to make your efforts easier and your message readable.
2. Give readers a reason to open it (a good headline and lede every time!). Write from a point of view. You want them to enjoy your message, or at least understand why it’s pertinent.
3. People respect it when your message is complete and not trying to get something out of them. If you tease them a little—curiosity gets clicks—this is doubly important. Do you need that click (for your advertising model)? Or is it FYI?
4. Is the click where the value lies for them? Then be succinct, but not too brief. Give them more than a headline and an image. Give them enough that will jog their memory after they have clicked through. If it’s that good, they’ll look for it again in their archive.
5. Don’t make an image in an email clickable, unless it’s to zoom the image! Accidental clicks are sneaky and annoying. Make every click obvious and intentional.
6. Even if your company is big, monitor the email address you send from. Let people get in touch with you! When I encounter a “noreply—go to knowledgebase/tech support,” I feel like they don’t have much concern for how their output impacts me or my input impacts them.

How to Integrate the Mailing List with Your Website

How? Easy. Email marketing service providers give you an API key and a plugin for your website. (These aren’t shown on the accompanying video, so I’m bridging this very small gap.)

If you haven’t already, sign up for MailChimp (or ConvertKit, Blackbaud, Ontraport, MadMimi, ConstantContact, AWeber, or others). Then download and install the corresponding plugin, such as this one here (I’m using MailChimp and WordPress). Find your API key, and enter it in the plugin. These are (typically) the only two screens you need.

The Mailchimp plugin to integrate with WordPress and WooCommerce.

• Alternatively, the “Mailchimp for WP” plugin will do the same with your API key, and it helps you make prettier forms for your website. It also lets you update them globally (across all pages) that use its shortcode. I talk about this later, and you‘ll see it in action in the accompanying video.
• Plugins are not only for subscribing! They can also help you get information about what page induced someone to sign up, and sort them into groups. Your email provider will have documentation about that.

This article isn’t going to discuss pop-ups, slide-ins, or lightbox (modal) email opt-ins. The learning curve for implementing them isn’t fast or easy. Swearing will be involved, and possibly some tears. When it’s time for you to make a pop-up, dedicate time and money for learning, creation, and repeated testing.

Once you’ve connected your website to your email service provider, it’s time to build a landing page.

What Landing Pages Are About

A landing page is a webpage that informs the reader of your offering and obliges them to do one thing: download your app, subscribe to your email list, register their interest in your course, event, book, product, or other development.

The landing page is about removing as much friction as possible between the customer and their goal, by your means. It contextualizes their pain, their frustration, or their desire, and how you’re solving it for them.

People’s patience, interest, and attention spans are short. Get out of their way. It’s the “main focus, explain, Call to Action.” Landing pages are going to be very useful to you, because they gauge people’s interest in at least committing the time to know more.

Be clear about your idea, about what you’re doing, its benefits, and what to expect of email from you. Strip out any extraneous stuff—your social links or any other menu navigation. When you give people a path out of the action you want them to take, even “more information,” they take it, and almost never commit (convert).

If they’re determined to know more, they’ll truncate your URL back to your domain and poke around, which is why some marketers buy a unique domain for every product or campaign. With this in mind, I resisted putting any navigation on my WordPress site until I had to have it, and then I put it at the bottom of the page.

So let’s build it:

• Write out your offering—your value proposition—in 250 words or less (see below for writing tips).
• Pull five of those sentences—the most powerful, clear ones that can make a semblance of a complete argument—and use those in your landing page. (You can use more than 5 sentences, just, those are the anchors.)
• Place one call-to-action (CTA)—generally, Sign Up to the email list (“waitlist” until you have something to announce)—within the first screen of the landing page (see “Opt-in form submission how-to,” below).
• Then, use an explainer video, an image, and other persuasive writing such as storytelling and testimonial quotes. These ensure that the reader understands the use case and how it can help them.
• Provide a final CTA with the opt-in form, and make it central, obvious, and compelling. In one talk I attended on this topic, they mentioned having a cartoon or an image of a person looking directly at the CTA, and how well it “converted” people.

Conversion simply means people believe your copy enough to want to provide something of value—that is, their email address—in exchange for learning or obtaining more.

To take advantage of the chance that someone searches for your value proposition, use SEO keywords in the landing page. Use a three-word phrase in the page’s keyword meta data, based on the seeker's likely search term for their need. This is often the most similar idea out there. Use a short URL that matches your headline and a keyword.

Don’t worry about how your page compares to slick landing pages from bigger companies. They can afford an agency or a landing page provider.

Once you’ve learned how to do this the from-scratch way, you’ll better evaluate the many landing page solutions that’ll do the same for you. MailChimp even provides unique campaign landing pages on your account. (This is covered in the accompanying video.)

Writing, Rewriting, and Sharing Your Content

Here are a few tips that will make any writing better:

• Get out of your own way and just dump it. Tell it like you would to someone you know. If you’ve met someone like your ideal customer in real life, write to that person.
• If your project has you and someone else working on it, say we. If it’s just you, say I, unless it’s a statement that empathizes and identifies with the customer’s situation. Honesty disarms and connects.
• Make long sentences short. (Then, decide if you need that sentence after all.)
• Chop long paragraphs into two or three short paragraphs, but do not chop paragraphs into single sentences unless it makes sense in the context of what you're writing.
• Paste it into the Hemingway app and make sure that it’s no higher than Grade 9. Grade 6 is even better.
• Read it aloud. Does it sound like you? How about like talking to your mom? Fix it ‘til it does.
• Make a headline for the landing page—and a matching social media lede, and email subject line—that is clear, curious, and bold. This is super-important. Try to write ten different headlines. Read up on headline writing; it will always inspire you to come up with phrases you’d never think up on your own. If you write a bunch, you’ll find a great one.
• Show your page to someone else.*
• The next day: one final check, and then publish it.

• If you need to edit it again later, that’s to be expected. The days of frozen content are long gone.

• If someone uses the word “confusing” about your writing (usually with a gravity that judges you), don’t take it personally. Ditto for any other critical comment that deflates you when you’re putting a lot of heart and anxiety into it. (You should be writing from the heart, and anxiety, properly understood, keeps you sharp.)

You just need to tighten up your writing and layout. You could also be hearing from someone who isn’t part of your audience, and there are a lot of people who won’t understand what isn’t written exactly for them.

Take the useful feedback and make a change.

Tailor the message for each type of share you do, and be savvy about matching the headline or the lede to the content of the landing page, so that it meets their expectations.

If this sounds like a lot of work, it is! And there’s more to it yet, so schedule it and pace yourself.

Different Landing Pages and Their Analytics

From your customer interviews, you should have a decent idea of your “Ideal Customer” (also called a persona). You should also have a good idea where they might be on other channels: where on social media; which other businesses have them on their email lists. You might then want to know how they found you, when they do come.

A multi-channel approach to landing pages

If you know your market well, you will have one primary “Ideal Customer” and up to two secondary. (Know what they have in common, and any powerful difference.) Also know if you have different goals, for example: buy the product, beta-test the app, or hand over their email (also known as lead generation).

The overlap, the difference, and the goals you have for each is the number of landing pages you should have. So if you have two goals for your landing pages, and two segments with an overlap, then you have at least three and up to six landing pages.

But start with the main segment and its goal, which would be lead generation (once you can send them a message, they can choose to download/buy from there).

After that landing page “engine” is working for you, if you want to broaden your reach, you can start creating the secondary landing pages.

There are different ways to get them to click through your landing page:

• Put the link in your personal/business email footer.
• Mention it in a forum or a community Slack channel, if the conversation is relevant, you’ve already introduced yourself, and you’re participating in other ways.
• Obviously, share it over social media (e.g. Facebook, Twitter, Reddit, Instagram)—this is a well-known route, but ditto above.
• Use Facebook ads to broaden your campaign’s reach.
• Create a QR code for the landing page and put it on a sticker, poster, flyer, or a sample of your work. Then pursue opportunities to get them noticed and into other people’s hands.
• This is intimidating, but it can help your reach: Talk to relevant blogs and related business owners and ask them if they’ll let you write some content (or some other thing you can do for their customers), in exchange for a mention of your service on their website, linking to your landing page. Do not baldly ask them to link to you, and don’t accept merely a post on social media. SEO content and back-link strategies and social media posts are a trade in unequal goods. If you offer something of value that persists, you should get something in return that persists.

If your product/service is ready for traction

After the initial campaign (the first set of visitors) where you’ve caught and ironed out any technological or copy glitches for conversions, start submitting your project to prospective promoters and content aggregators.

Aggregate audiences are enthusiastic about tech, and you might find helpful people there. Concentrate on those closest to your target market. As a coder, one that you probably should have in mind is ProductHunt.

Delay this step if you’re early in the design/build process. Do it when you’re about a month away from being ready, when you’ve got real features to whet their appetite, and an audience you can ask to support you. The reason is that you don’t own that channel or platform, and you might not be able to change or remove it once it’s announced.

Analytics

After setting up more than one landing page, and more than a couple of channels, it helps to create a unique URL for each landing page (which is obvious) and the channel through which it gets seen, so you know what channel is working for you and which one is not. These are called campaign URLs, or UTMs.

Google Analytics has both advice and a tool for creating UTMs. You could also use a social media scheduling tool (like HootSuite, Buffer, SproutSocial, or MeetEdgar) that creates UTMs for each share. Kissmetrics is one that works within apps, if you’re offering an online service.

For all this to have meaning, it assumes your Google Analytics is set up.

You can skip Google Analytics and just rely on WordPress’s JetPack Stats to tell you the basics about your traffic. You could even skip the UTM stuff if you don’t care about the finer details of your sources (JetPack tells you the source of your traffic by domain and country). But it doesn’t hurt to set up your basic Google Analytics anyway, because then at least you’ll have data when you’re ready to learn more.

I once had a conversation with a non-profit webmaster who was quite busy with weekly, sometimes daily, blog postings and events. She had no idea about her reach and traffic, aside from on-forum and in-person group conversations, because she’d never set it up. This was a popular group, and surely she had a much bigger reach than she realized.

Setting up your analytics requires (less than!) a morning or an afternoon to get yourself in, oriented, and get the bits verified. After that, you can let it run without much intervention, and it will give you a wealth of information over time.

So don’t faff around and waste that opportunity, even if most of your traffic is driven by, for example, group members (like the non-profit). Everything is a learning process, so set yourself up to learn. (I would have loved to have known what their demographics were, as we share a customer persona, but she couldn’t tell me.)

Coupled, but not really, with Google Analytics is Search Console. You have to separately submit your root domain URL along with its XML map (you’ll find a WordPress plugin for that). It’s Search Console, not Google Analytics, that tells you the search terms a visitor used to end up on your site. You want to know these keywords, which are particularly useful if you’ll be writing a blog.

The campaign URLs (UTMs) I mentioned above help you see your best communication channels and your conversions. You can check conversions two ways:

• Good: Look at each Landing-page-Channel UTM that registers a hit in your Google Analytics, and then check Mailchimp to see if it resulted in a subscribe. Actually, reverse that: check your Subscribers and then go see their analytics.*

• Better: Set up an Analytics “Behaviour Goal” for when they land on your “Thank You” page (next section). Then you’ll see who (OS, country, demographics) made it through the landing page to actually sign up, and from whence they came.

• with a little digging and the right plug-in, you can make the Signup page part of the subscriber’s info, demonstrating when a campaign worked.

What’s this about a Thank You page?

To entice someone to enter into this email/product/service relationship with you, you may have offered them something more than just notification of when your project is ready.

If so, make it a show of goodwill that they’ll either benefit from now or in the future, or something they’ll truly enjoy. It could be an article, an eBook, access to your list’s previous emails (through a public archive), an event invitation, or something more whimsical.

With or without a freebie, thanking them for subscribing is the proper thing to do. It’s polite. It confirms the action they took succeeded. The fact that it gives you metrics is a convenient bonus.

One of my mailing lists offers an action-packed newsletter (DIY projects, advice Q&A, and resource links), but only after a certain threshold of subscribers have joined. On some of my pop-ups and blog posts, I mention in the CTA that there’s also a freebie. Once they subscribe, the form redirects to my “Thank You” page. Where they see a very large, cute picture of a red squirrel.

Here, this article is long! You deserve a break. Stop and gaze for a moment. I certainly do. Gaze, that is. I have a squirrel house on my property and a range of grey and black squirrels for endless entertainment.

“Well… this is embarrassing. I don’t know quite how to thank you with a freebie yet for joining my mailing list…Oh, wait. Yes, I do.” (Photograph: Steward Ellet/Natural England/PA)

OK, enough gazing.

The Thank You page is also a very opportune place to tell them what to expect from the list: “I’ll/We’ll send you an email…” “once a month, on or around the 14th.” “Somewhere in between two blog posts.” “Every Wednesday.” “Every six weeks.” “On a quarterly basis.” “When we have something big to announce.” Knowing when to expect your mail helps them anticipate the time they’ll spend reading it.

And finally, because of double-opt-in confirmations being a good practice, it should tell them that once they confirm their subscription by email, they’ll receive their freebie in a separate email.

For example, in the copy below the squirrel, I tell them “If you reply to the confirmation email with your postal address, I’ll send you a packet of milkweed seeds.” My particular audience would find this delightful.

Opt-in form submission how-to

Go back to your list integration module or plugin on your WordPress. Each mailing list provider provides HTML code for the opt-in form that you put into your Landing Page. The form submits the data to the mailing list service.

You must set it up at your email service provider (AKA mailing service) that a successful opt-in form submission redirects to a page on your site that says Thank You. Otherwise, a module may (or may not) appear saying “success.”

The Thank You freebie shouldn’t be available for direct download from the Thank You page, because even if you block the URL from being crawled by search engines, it opens you up to diluting the value of your freebie by making it too shareable (consider the effort of forwarding your email to a friend, versus posting the download page in Facebook group. Yeah, that!).

This means you’ll be creating your first Welcome/Onboard automation at your mailing service, that triggers when the subscriber confirms their opt-in.

Note: You could send the freebie without the confirmation step, if you really want to skip it! But that’s not good practice, as Canadian and European legislation mandates clear opt-ins. If you’re marketing to the whole world, make sure your list is compliant. (The United States legislation is opt-out only, which makes people hesitant to share their email addresses.)

The Onboard automation could also ask them for more info about themselves so you can better respond to their interests. Examples I’ve used:

• “I’m interested in what you’re interested in, so if you update your list profile, tell me your hobbies, as well as your region.”
• “We’re designing the software right now, and we have a few questions about where to focus our attention for the greatest impact. Would you kindly answer a short survey?”

How to Avoid the Free = Ick Factor

People expect a little bit of free these days, especially when trying software or information sources. But giving something away for free is still an issue for those of us who need a self-protective way of doing business.

People rightfully hesitate at these “free!” offers. You can’t get the download without the transaction, and so much of what’s “free” ends up being costly in time and attention or worse.

For example, most of us have made the mistake of opting in, then being hit with an email every day for the next two weeks, with an insinuation that we’re holding ourselves back (an insulting form of missing out) if we don’t buy before their deadline. Hard sells are never worth it.

You don’t want to be lumped in with those marketers when you’re offering something out of generosity or curiosity about your target market. And they can be very good at feigning generosity and curiosity towards their targets until time to cash in with a scarcity trap.

If you’re uncomfortable with sharing something of value straight off, try this: Develop a low-commitment preview or freebie, and then offer a promotion for those who are engaged.

E-commerce stores universally offer promo codes. Only give it to the people who are opening your emails, or communicating with you over your other channels. (Keep in mind that people who have iPhones will be “open” by default, even if they aren’t reading your mail. This came with Apple’s iOS 15 email security.)

If your list was a waitlist, don’t cold-announce the launch (“It’s here!”). Talk about the lead-up once or twice in the month before it happens. This will show you who’s engaged. (They don’t need to attend your webinar or launch party to be considered “engaged.” It’s nice, but be reasonable.) Don’t give away promos unless they’ve shown they’re warm.

For casual observers, including the subscribers who don’t open their emails, create or update the landing page on your website that offers it at the price that you think it’s worth. The CTA here would be “Buy” without the promo code.

Then, if you still want to use that page for lead generation, have a delayed pop-up: “Want this at the Friends-and-Family rate? Join us. (Next spaghetti dinner at your house!)”

Avoiding time-wasters (sales prevention)

When using free products as an incentive to join your alpha, beta, or general list, sometimes you have to not get it out there. There are bystanders who enjoy getting freebies, satisfying curiosity, feeling informed. They’re well intentioned, but they’re not your market. At $5 of value, you can afford the publicity and community goodwill, but if it’s something of real cost and value, you’ll need to learn sales prevention.

Imagine you threw a party, and a stranger strolled in and headed right on over to the buffet. At a public event, you might expect that. Party crashers can sometimes be delightful, but their intentions and manners (e.g. zero interest in conversation) quickly show you who’s not.

So we’re back at the beginning again: who is your customer? You have to know you’re serving the people who need it (don’t assume, do customer interviews, and leave some room for surprises).

If you give your stuff away without vetting, you’ll get very little feedback. Fuzzy feedback will result in a product that doesn’t actually serve anyone, or a product they’ll play with, but not buy.

Here’s my case study: I was bored of seeing life-advice-on-the-internet and 300+ page bestsellers of writing prompts. Endless ponderous nonsense, only some of it good. I thought it would be a lot more action-oriented if I designed a life-planning workbook with 3 monthly agendas. I had a budget of $1000, so it was a limited print run. And I gave it away in exchange for a promise of design feedback.

But people who don’t use agendas, or who’ve tried but never stuck with one, ordered it anyway, out of curiosity or sheer impulsivity. They didn’t provide any feedback, so I’m sure several hundred dollars of paper went into the recycling. That was my fault for not filtering them out.

What I should have done for those people, which I later did, was an automated email series to walk them through the workbook without having the workbook. A motivated journaller would have gotten value out of it.

So what’s a reasonable sales prevention technique?

That’s relatively easy: it’s copy written to tell the reader the exact problem they’re having and how you’re solving it, that doesn’t try to alleviate any reasonable doubt that they’re the intended customer, so they can self-select out.

That kind of specificity is strangely absent from catch-all high-ticket marketing (who also distract by offering money-back guarantees that are often more specific than what they’re promising).

You could use a survey for this purpose, where the end of the survey is either an opt-in or a polite “no thanks” on either side.

If they’re design targets or beta testers, you can send them a final step (e.g. to join a Slack community, or a GitHub project for the code) in their List Confirmation email. This can ascertain they’re ready for the two-way street of communication (giving access to the project specifically so you can observe or solicit feedback).

Build in obstacles. If they’re ordering a free product, then at least charge the shipping. (Or invert that: sell the product, ship for free!) If what you’re offering for free isn’t worth the $10 shipping, they’re not gonna take it seriously. Lesson learned.

A customer that has to invest in trying your solution will efficiently provide feedback about how it works, if it works at all. And if it really works? This is the customer who’ll buy and provide testimonials—and future customers.

Also keep in mind: people pay for things they don’t use all the time. Building a revenue model for your product is important for your business.

Multiple Offerings and List Groups

Hopefully, your new product or project is a stand-alone and you won’t need to group your subscribers. But if you work on multiple projects at a time, you may be juggling different groups.

I had two mailing lists for two different websites. One list was segmented into groups. One group was onboarded into a course-by-email, and another got a monthly PDF (the example I show in the accompanying video). Another group only heard from me when I made progress on a separate project.

Your landing pages have to be simple and targeted, so don’t batch the subscribers all together in your emails, talking about all the things you do. It confuses readers more than it helps anyone. Write to the groups separately (or, once your skills are advanced, use merge fields to show or hide email content depending on their group).

It can be difficult to assign new subscribers into the appropriate groups. You could do so based on the page that they opted in on. You can also ask them if they’re interested in more than one type of email.

Explore your email service provider to see how they recognize the page source of the signup, and how you can automate to put that subscriber into one of your groups.

A good multi-purpose plugin will make it as easy as possible for someone to sign up and get in the right group the first time.

In the accompanying video, I use the "MailChimp for WordPress" plugin to create a simple form for a landing page:

MC4WP's forms builder. You can see it in the accompanying video.

I then updated the form to one that has the list groups by project. I made it obvious which one they were about to join:

A group-sorting opt-in form, with the default group highlighted

If the short code (…id="220") for this form is in multiple places in the website, they will all update upon saving the changes.

Test your form on multiple devices and browsers after every plugin or WordPress update. If your form doesn’t work, they’ll bounce.

Final Advice for Beta Testers, and the Video Intro

Before we get to the (optional: WordPress-Mailchimp-oriented) video, there’s a last bit of context that you might need.

If you’re using lead generation to find and stay in touch with alpha/beta testers of your project, the mailing list is necessary, but it is not enough. You’ll want to be in touch with them for design feedback.

If it’s a product, make sure they order it through your e-commerce module (one final obstacle that anyone can manage), and not via private communication (why would they evade the transaction? Red flag!). Collect and pass their information from the module through to Mailchimp.

And keep their details in a notebook, spreadsheet, email folder, etc. Reach out to them and set up phone, Skype, and Facetime conversations. Why? Because for real issues that affect your work, you have to interview these collaborative customers, sometimes more than once.

The video (from 2018) illustrates how you can set up a landing page, set up the welcome automations, and these attendant features:

• how WooCommerce integrates with MailChimp (for ecommerce orders for physical products or for downloads where you get paid)
• what MailChimp looks like when you’re using groups or segments for automating messages and campaigns,
• a demonstration of creating a landing page, using a MailChimp plugin to generate forms that use shortcodes (which can update changes across your site)
• MailChimp’s own landing page generator
• and finally, an intro to email automation.

In Conclusion

My dear fellow idea/product creators and web developers, I now present you with the summary of the things I just explained.

This article was about getting to know the people who are going to try out and adopt your idea, by getting them into a relationship with you. You’ll not only be learning how to address their needs with the thing you’re developing, but also where you can find them, and how they want to be communicated with.

Your communication is part of your Value Proposition as much as your product at this point. Everything is iterative, and you’ll learn as you go. Fortunately, a landing page is something people expect for just about any endeavour.

Create a landing page connected to your mailing list (not your social, not your home page) that tells people about the project and how it will help them. Induce them to get on the list— unless it’s not for them. Make sure your opt-ins are clear and, depending on the value you’re proposing, pre-qualified.

To increase your opt-ins, offer people something useful or delightful right now. Those bonuses or previews, and the mail you send after opt-in, creates and builds a relationship with them. In that light, make sure you can be reached by the lists’ reply-to address.

Use other channels such as partnership opportunities and events to raise your profile and direct people to your landing page. Use different copywriting for different channels.

Use different landing pages for different “Ideal Customer” personas and different goals (for example: sign up to the waitlist; download the app; beta-test; buy).

Set up your analytics so that once you start gaining traction–especially when aggregators and others promote your work–you’ll be able to know where they came from, what their demographics are, and what campaigns are working.

Treat your subscribers like clients and friends: be available to them, write to them in a personable manner, and keep it concise, helpful, meaningful, and enjoyable. Do not chase click metrics: chase providing value.

If they’re alpha or beta testers, reach out to them in person, ask non-leading questions, and follow up on any issues raised.

Finally, if you’re in the channels where your customers can be found, and these methods don’t get you the traction your project needs, that’s incredibly valuable information. Quit it sooner rather than later! You can pivot, or abandon it and start over again. You now know how.

Jane Sorensen has always been a multi-disciplinarian. She writes the words, takes the pictures, handles the money, and drives the emergency backup Zamboni. If you’d like a dose of practical low-carbon lifestyle, DIY projects, and ecological gardening and wildlife enthusiasm, check out her blog at bigcitylittlehomestead.ca.

The Design industry is rapidly evolving, and there are many career choices in the space. You've got UI/UX Design, Product Design, Interaction Design, Motion Design, and more.

In this article, I will discuss a roadmap that will show you how to become a self-taught Digital Product Designer without a college degree. It will also help you prepare to land an entry-level role in Product Design.

This post was greatly inspired by the AJ&Smart. 👋

What is Product Design?

According to the Interaction Design Foundation,

"Product Design is the process designers use to blend user needs with business goals to help brands make consistently successful products.

Product designers work to optimize the user experience in the solutions they make for their users—and help their brands by making products sustainable for longer-term business needs."

What is the Difference between UX Design and Product Design?

This is a tricky question because these two roles are often talked about interchangeably. Some companies even combine the job descriptions of these two roles into one because of their significant similarities.

Let’s look at the definition of User Experience (UX) Design.

Interaction Design Foundation defines User experience (UX) design as

"The process design teams use to create products that provide meaningful and relevant experiences to users.

This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function."

I will be using the terms Product Design and UX Design interchangeably in this post.

How to Get Started with Product Design

Let's go through the steps to get you started.

Figure Out your "Why"

Whether you are switching careers or are getting started in your career, figuring out your "Why" is a crucial step.

A popular misconception about design is that designers are born not made – but this is not the case. Design is a skill that you can learn, but you have to do the proper research to know if it's something you really want to do.

A great way to find out if UX Design is something you would love to do is by taking a 6-day free UX Design from Career Foundary. This is an email-based course, and you will receive course content daily for six days.

From it, you will learn what you will be doing as a Product Designer, what job opportunities are out there, and salary expectations in the field. And if you have further questions, you can email them directly.

If your answer is yes, let’s move to the next step.

Take a Course

I recommend enrolling in a structured course to learn the principles, theory, and fundamentals of design. I will link to some great free courses below.

1. Introduction to User Experience Design: This is a 4 week beginner-friendly course by Coursera. The syllabus includes an overview of UX Design, requirement gathering, designing alternatives, and prototyping. It’s totally free (except if you want to get a certificate after completing the course).

2. Digital Skills: User Experience: This is a 3 week introductory course by Accenture. They take you through the foundations of UX Design, UX basics such as visual design and interactive prototyping, tools, and testing.

3. UI Design with Figma: This is a self-paced 10-hour Figma course that will teach you how to use the tool for UI design. You'll learn everything from creating shapes to using drawing tools, creating websites, and more.

You don't have to take to take all three courses – one is okay.

Paid Courses

• Coursera – Google UX Design Professional Certificate

• Udemy – Master Digital Product Design: UX Research & UI Design

Learn the Major Design Tools

The next phase is to learn some industry-standard design tools. Two of the most popular and cross-platform tools are Figma and Adobe XD.

• Figma: This is a web-based tool that is free for individuals. It also has a desktop version you can download on your machine.

• Adobe XD: This is a paid tool, I believe, but you have a free trial period of 7 days.

Some resources on tools:

• Learn how to use Figma to design websites

• UX/UI Design tutorial in Figma

• The Figma 2021 Crash Course by Example

• Learn Adobe XD in 2021 by Example (Crash Course)

Read Books about Design

Reading books about design is a great way to gain more insight into design principles, design patterns, design guides, and generally in-depth knowledge of the psychology of design.

Here is a list of recommended design books:

• The Design of Everyday Things ~ Don Norman

• Don’t Make Me Think ~ Steve Krug

• Refactoring UI ~ Adam Wathan & Steve Schoger

• Sprint ~ Jaka Knapp

Build a Solid Portfolio

An impressive portfolio is an excellent way to document your work and show your competence in the design industry.

Your portfolio should be well organized and should feature your best work. Your work should show your design process and problem-solving skills.

Here is a guide on how to create a product design portfolio in 8 steps to get you started.

And here are some tips about how to create portfolio-worthy work so you can showcase your best stuff.

Note: It's best not to include course projects in your portfolio.

Another good project idea to add to your portfolio is to take an existing poorly designed product and do your research to discover the users’ pain points. Then rebuild the product and write about your entire design process.

Check out this tweet for ideas on how to build your own portfolio.

Write Articles

Writing an article about your work and how you were able to solve a particular problem is an excellent way of showing your skills, documenting your journey, explaining your struggles, and helping others learn in the process.

And you don’t even need to build a blog from scratch – you can leverage platforms like Hashnode, Medium, and Dev.to to publish your articles.

Practice Practice Practice!

This is the only to get better and get ahead in your career, regardless of your field. Be creative with the knowledge you’ve gained and build solutions. We get better by doing – remember, practice makes better, not perfect. Strive to be better.

A good way to practice is to redo existing products that you think are poorly designed and make them better.

Join Design Communities

A design community is where you get to connect with people who share your interests. A design community is there to provide support at every stage of your career.

Some of the perks of joining a design community include:

• You get to attend meetups and conferences

• You get access to resources and job opportunities

• You get to share your work and receive valuable feedback from senior designers

• You can get recommendations from community members

Design communities are not all perfect, so you should be mindful of the communities you join. Here are some great design communities you can join.

• Friends of Figma

• Adobe Creative Career Discord

• Designer Hangout

• And other local design communities that are close to you.

Start Applying for Jobs

At this stage, you are ready to start applying for entry-level roles or internships. This is not to say that you must follow the aforementioned step chronologically before you start applying for entry-level jobs. I mean you can start applying for roles when you have a couple of impressive projects in your portfolio and are confident in your skills.

Here are some UX Design jobs on Glassdoor.

Resources

The following are some of the best YouTube channels that focus on everything design.

• The Futur

• AJ&Smart

• Awwwards

• Design Course

• Curated list of awesome product design resources.

Conclusion

And that's a wrap! In this post, we covered the steps to get you started in your Product Design journey.

If you found this post valuable give it a share. And if you have any questions or suggestions please feel free to shoot me a DM on Twitter or LinkedIn.

See you in the next one.

Happy Designing!

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. 

Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. 

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 

Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? 

At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. 

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. 

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

This original Lorem Ipsum Latin text is 249 words long (1,740 characters). Note that the famous paragraph from this text is actually this series of words cut out and re-arranged from the above text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Most designers will just repeat the text throughout their designs as needed.

There are a lot of Lorem Ipsum text generators online. But they all use this text as their source.

There are also lots of variations of the Lorem Ipsum text out there that have been modified to contain humorous words. Here's a version I'm particularly fond of, Kitty Ipsum:

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

I've even seen versions of Lorem Ipsum where the authors sneak in hyperlinks. (I guess tricking tons of web designers into accidentally linking to your website is a viable SEO strategy.)

Anyway, if you just want to have access to the raw Lorem Ipsum text itself in an easy copy-paste format, this is it. I recommend bookmarking this page. 😉

Where does Lorem Ipsum text come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC. This makes it more than 2000 years old.

Typesetters started using Lorem Ipsum in the 1500s. Fast forward to today, designers and developers still use this same placeholder text in their web designs.

Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, wanted to find the original source for Lorem Ipsum text. He looked up one of the more obscure Latin words from the passage: "consectetur". This helped him discover the original source.

It turns out Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet" comes from a line in section 1.10.32.

Note that the original text included some typos. (I suppose they didn't have spellcheck back in 45 BC.) Since this is a tradition, and very few people can even read Latin today, I've chosen to use the original version above that includes those typos, rather than one of the corrected versions.

Is lorem ipsum copyrighted?

No. It is public domain (copyright-free) so no one owns the rights to it. You can use Lorem Ipsum text freely.

Should I use a Lorem Ipsum Generator?

I personally don't bother with these. You can just use the original Lorem Ipsum text.

Some design tools may already have Lorem Ipsum text built-in, and you can just use those.

Have fun designing your layout. And if you want to learn some more coding, check out freeCodeCamp's core curriculum.

Those rules are known as design principles, and in this article, you will learn the basics of the 13 design principles.

Knowing what design principles are will give you a better understanding of how to go about creating more harmonious designs and better user experiences.

Here is what we will cover in this guide:

1. What are design principles?
2. The 13 principles of design
   1. Balance
   2. Variety
   3. Emphasis
   4. Contrast
   5. Hierarchy
   6. Repetition
   7. Pattern
   8. Movement
   9. Rhythm
   10. Proportion
   11. Alignment
   12. Unity
   13. White space

What Are Design Principles?

Design principles are a strict set of rules.

Designers adhere to those rules to create pleasant user experiences and visually appealing end products.

These rules are tools and guidelines that help the designer create a sense of harmony and balance in their designs.

They guarantee usability and an overall pleasing effect for viewers and users.

The 13 Principles Of Design

Balance

Every design element on a page has a different weight, depending on its size, shape, or color.

That weight is known as visual weight.

Balance in design is how you arrange and position elements in a composition, and it's about distributing the weight of those elements.

A composition lacking in balance means that one element overpowers all the rest.

To create balance, you need to position elements properly.

For example, this could be that an element on one side is much 'heavier' than the rest and is overpowering, thus making the design look unstable.

There are two types of balance:

• Symmetrical balance
• Asymmetrical balance

With Symmetrical balance, think of drawing an invisible, vertical line down the center of the page and splitting the page into two sides.

The items on both sides of the line have evenly distributed visual weight and create a mirrored image.

The order, the position, and the alignment of elements are equal on both sides, creating consistency in the design.

Asymmetrical balance is the opposite of symmetrical balance.

Elements on both sides have different arrangements, as they also have an order and positioning that varies in the composition.

Even though each side has a different visual weight, the overall design maintains an equal visual weight on both sides.

There is no mirrored image, and both sides look different, but the design is still stable.

For example, asymmetrical design can be when three lighter elements stacked on top of one another on one side balance out one single heavier item on the opposite side.

Asymmetrical balance creates visual interest and adds a modern feel to the design.

Variety

Variety creates visual interest and prevents the design from becoming monotonous and predictable.

Variety is created by using elements that are not similar to one another.

With the use of the variety, you have a good chance of maintaining the interest and engagement of viewers.

Variety in design is achieved with the use of many different things, a few of which are:

• Varying sizes,
• Varying shapes,
• Varying colors,
• Varying textures,
• Varying typography.

Emphasis

The purpose of emphasis is to create a focal point.

A focal point is an object that stands out instantly and grabs the viewer's or user's attention at first sight.

When there is an emphasis on a design element, it means that the specific object is highlighted from the rest and is therefore of great significance and importance.

For example, you can think of emphasis as some text with all-caps and a bold type.

Emphasis can be the main heading on a website.

It can also be a message of some kind.

You may want to convey something crucial or cautionary to your viewers and need to make sure that your audience is aware of it and focuses on that first.

Emphasis can also be a large button with a bright color under an item for purchase - this can act as a call to action for visitors.

It's what you want others to notice first - the essential information someone needs to be aware of and pay attention to upon first viewing your work.

It's a specific piece of content that needs to stand out from the rest of the design.

Besides text and color, emphasis is achieved with size, shape, weight, texture, and position, to name a few.

When creating emphasis, make sure that you do it without disturbing the overall balance of the composition and without creating an overpowering and jarring effect.

Contrast

While emphasis is about accentuating one single element, contrast has to do with the apparent, stand-out degree of difference between two or more design elements that are close together.

This difference can be that one element has a dark background color, and the other has a light one.

It can also be that one element has a cooler tone, whereas the other has a warmer tone. Or that one element is larger and the other is smaller in size. Or using a serif font on some text and a sans-serif text on another piece of text.

For example, take this webpage.

When browsing the page from a desktop computer or a laptop, you will see that at the top right corner, there are two buttons you can click on:

• the 'Forum' button has a dark background color that is the same as the rest of the navigation bar,
  • the 'Donate' button has a bright yellow background color that makes it stand out.

That is considered contrast. There are two very different elements next to one another, but one catches the eye the most and demands your attention.

All-in-all, contrast highlights two totally opposing elements with highly different characteristics. The difference has to be a noticeable one.

There are different types of contrast, such as color contrast or size, shape, or texture contrast.

The purpose is to create variation and interest and therefore create focus and emphasis while maintaining balance in the design.

Good contrast goes hand in hand with accessibility best practices and creating usable products and services for everyone. It's necassary to take into consideration people with visual impairments.

Think of another example.

Say there is an element with a light grey background and some dark grey text. Then, there is another element with the same background color, but there is some black text.

Which one is easier to read? The second one with the black text.

There is a higher color contrast between the background color and foreground (text) color.

There is a lack of contrast in the first element - this makes reading the text much harder.

Hierarchy

Hierarchy organizes visual elements in order of importance.

The role of hierarchy in design is to create a visual ranking system according to the logical priority of content. It helps guide viewers from the most important information to the least important by creating a logical flow and arrangement of that content.

Think of the typical order of elements on a webpage.

We read from top to bottom, so the viewer's eye must be first drawn immediately to essential information before they start scrolling down the page.

So this means that the crucial information needs to be at the top of the page - it needs to be the most prominent and rank the highest on the page.

Take the following example.

At the top of a webpage, there is typically the company logo first.

Then, there is a navigation bar or dropdown menu, which helps users decide the area of the site they want to interact with.

There can also be a search bar for users to enter keywords to search for a specific topic and save time.

Then, there can be a call to action or the main heading that reinforces the purpose of the page and its content.

Then, there can be the main area that would contain a subheading with some text, then another subheading with more text, and so on.

This order creates visual organization and helps viewers distinguish what content appears to be the most important and deserves their attention.

It guides viewers from the start of the content to the end - from highest priority to least priority.

The position of elements signifies importance - the most important information is always higher on a page, whereas if something is at the bottom, it is not as important.

Other ways to create hierarchy in design are using colors to create contrast and alternate the sizing of elements in different ways.

Without hierarchy, all content would appear the same, and nothing would stand out and signal importance, which would lead to confusion for viewers.

Repetition

Repetition is when a specific element is repeated multiple times throughout the design.

The role of repetition in design is to create consistency and unity.

Repetition creates relationships and associations between seemingly separate and different elements and creates a bond between them - a common link that ties everything together.

To achieve repetition, you use the same particular color or the same color scheme multiple times throughout the design.

Or stick to a specific font type or use a recurring phrase throughout the page.

A commonly repeated element in designs is a logo, which plays a critical part in creating a brand identity.

A logo will make viewers and users familiar with the brand. They will recognize and distinguish its voice and tone from other brands.

Users will memorize and identify the logo with the company's vision and mission.

They will know what the brand is all about.

Pattern

Pattern at first glance appears to be very similar to repetition since it implies that elements reoccur multiple times throughout the page.

However, they have significant differences.

While repetition deals with the same element repeating throughout the design, a pattern focuses on multiple and different design elements repeating in the same way throughout the composition.

A pattern in design is all about the repetition of more than one element.

An example of a pattern in everyday life is floor tiles and wallpapers.

An example of a pattern on the web is the use of backgrounds in websites and applications to create harmony and a cohesive feel.

Movement

Movement is how the eyes move when viewing and interacting with a composition.

Movement refers to the way the viewer's eye travels and the path it takes throughout a design.

The designer uses movement to guide the viewer around different design elements.

They create different focal areas for each point in time to effectively capture the viewer's attention, moving from one element to another in a well-thought-out directed sequence.

Typically, the viewer's eye first sees the most important element, then the second most important, then the third one, and so on.

An example of movement can be viewing a spiraling staircase when you are standing at the top - your eye will move along the different lines and edges.

Movement on the web can be created by:

• The use of animated effects,
• The use of blurring effects,
• The use of spiraling effects,
• The use of lines and edges,
• The use of different direction signs that provide guidance, indicating to the viewer to move their focus to the left, right, or look downwards or upwards.

Rhythm

Rhythm involves the combination of repetition, variety, and movement.

Rhythm is how multiple design elements that are different from each other repeat in a particular order.

Repeating or alternating a group of different elements in the same order and at specific intervals is a way to create rhythm in design.

There are five different types of rhythm in design, depending on the type of interval:

• Random rhythm,
• Regular rhythm,
• Flowing rhythm,
• Progressing rhythm,
• Alternating rhythm.

The elements follow a tempo and move and flow in an organized way.

It resembles the feeling of following a dance choreography or moving to the beat of some music.

Instead of bringing the attention to only one area of the design or guiding the viewer from one different part to another, rhythm focuses on moving the viewer's eyes across the whole composition.

Proportion

Proportion in design refers to the size and visual weight of two or more visual elements.

Proportion is also the relationship between those visual elements.

The relationship is based on size. It's how the size of one object compares and is correlated to the size of the other object.

Essentially, it is how elements scale in size in relation to each other.

For example, proportion compares and measures the importance of elements to one another.

Say there are two objects - one is bigger and the other is much smaller.

The bigger element will be more noticeable, which indicates that it is more important than the smaller one.

A well-proportioned design means that the size of all the elements preserves balance, unity, and harmony for the whole design.

Good proportion means that all elements relate well to each other.

Alignment

Alignment refers to how visual elements are lined up, ordered, and structured in comparison to one another and in comparison to the whole design.

It is a way to create a connection and visual flow between related objects and create a more unified result in the design.

By aligning the different visual objects, you help guide your viewer throughout the design.

The most common forms of alignment are left-aligned, right-aligned, and center-aligned.

Unity

Unity in design is how different visual elements come together to create cohesion and completeness in the design and a harmonious effect.

With unity, seemingly different items create a sense of 'oneness'. This can be achieved in a few different ways.

For example, elements of different sizes can all have the same color and be near one another.

This makes them appear as if they belong together or as if they are related and are similar in some way.

White Space

White space is also known as negative space.

Essentially, white space refers to areas that lack visual elements, and areas with unused, empty space around already existing elements in a design.

White space doesn't necessarily mean that the empty space is white in color - it can be any color. It more so refers to the emptiness and available room in your design and the fact that some areas don't contain anything.

White space is about not adding any elements to the composition and takes a more minimalistic and simplistic approach to design. Sometimes, less is indeed more.

White space creates breathing room in the design.

When a lot is going on on a page, viewers can easily become overwhelmed with all the information they need to take in. White space helps to prevent that from happening. It makes any available text more readable and creates an all-around better user experience.

White space eliminates any unnecessary clutter and creates a focal point. So, use white space around important elements to make them stand out.

Conclusion

Hopefully, now you have a high-level understanding of design principles and have a better idea of how to implement them in your future designs.

Thanks for reading!