You have a set of objects: different types, shapes, and data. And at some point, someone asks you to perform an operation on all of them, like exporting them them to PDF, sending them a notification, generating a report, or calculating their fees.

Your first instinct might be to write a function that checks the type and branches accordingly, like an if-else block or switch statement. Something that says: if this is a NewUser, do this. If this is a JointAccountUser, do that. It works, you ship it, and everyone is happy.

Then another operation comes in. And another. Every single time, you go back to the same place and add another branch. The function grows. The class grows. The test surface grows. What started as a clean model is now a god object that knows how to do everything for everyone.

The Visitor Design Pattern exists to break this cycle completely.

Table of Contents

• What is the Visitor Design Pattern?

• The Problem the Visitor Pattern Solves

• Core Components

• Real World Example One: Document Export

• Real World Example Two: Notification System

• Real World Example Three: Fee Calculation

• The Power of Combining All Three Operations

• When to Use the Visitor Pattern

• When Not to Use It

• Conclusion

What is the Visitor Design Pattern?

The Visitor pattern is a behavioral design pattern that lets you define a new operation on a family of objects without changing the objects themselves.

The key word there is behavioral. Behavioral patterns are about how objects communicate and distribute responsibility. Where creational patterns deal with how objects are created and structural patterns deal with how they are composed, behavioral patterns deal with how they interact and who is responsible for what.

The Visitor pattern specifically deals with the question of who should own an operation when that operation needs to work differently across multiple object types.

The classic answer is: put the operation on each object. Give each class a method that handles the operation for its own type. But this breaks down the moment you have multiple operations, because now every new operation means touching every class. You're spreading one concern across your entire object hierarchy.

The Visitor pattern flips this. Instead of spreading the operation across the objects, you collect it into one place called a Visitor. The objects simply accept the visitor and let it do its work. Adding a new operation means creating a new Visitor. The existing objects don't change at all.

This is the Open/Closed Principle working exactly as intended: open for extension, closed for modification.

The Problem the Visitor Pattern Solves

Let me show you exactly what this looks like without the Visitor pattern.

Say you have a fintech platform with four types of users: existing customers, new customers, minor account holders, and joint account holders. Your product manager comes in and asks you to add document export. Every user type should be exportable to PDF, Excel, and CSV.

Without Visitor, the natural approach looks something like this:

class ExistingUser {
  final int id;
  final String firstName;
  final String lastName;
  final DateTime lastPaymentDate;
  final num accountBalance;

  String exportToPdf() {
    return '$firstName\n$lastName\n$lastPaymentDate\n$accountBalance';
  }

  String exportToExcel() {
    return '$firstName,$lastName,$lastPaymentDate,$accountBalance';
  }

  String exportToCsv() {
    return '"$firstName","$lastName","$lastPaymentDate","$accountBalance"';
  }
}

And you repeat this for NewUser, MinorAccountUser, and JointAccountUser. Twelve methods spread across four classes just for document export.

Now the product manager comes back. They want notifications: email, SMS, and Push. Back you go to all four classes, adding three more methods each. Twelve more methods spread across the same four classes.

Then they want fee calculation. Then they want KYC status checks. Every new operation multiplies across every user type. The classes grow, the reasons to change multiply, and testing becomes painful.

This is the exact problem the Visitor pattern was built to solve.

Core Components

The Visitor pattern has four core components. Understanding each one before looking at code makes the implementation much easier to follow.

The Visitor Interface

This is the contract that every visitor must implement. It declares one method per object type it needs to visit. A visitor that handles four user types declares four visit methods, one for each type.

The Concrete Visitors

These are the real implementations of the Visitor interface. Each one represents a single operation and knows how to handle every object type. A PdfHandler is a concrete visitor. An ExcelHandler is a concrete visitor. A SmsNotificationHandler is a concrete visitor. Each one has one job and knows how to do that job for every user type.

The Consumer Interface (also called Element or Acceptor)

This is the contract that every object in the hierarchy must implement. It declares a single accept method that takes a Visitor and calls the right visit method on it. This is the double dispatch mechanism that makes the pattern work.

The Concrete Consumers

These are the real objects in the hierarchy: ExistingCustomers, NewCustomers, MinorCustomer, and JointCustomer. Each one implements accept by calling the specific visit method that corresponds to its own type.

Think of it this way. The Visitor interface is implemented by every operation you want to perform: PdfHandler, ExcelHandler, and CsvHandler. Each of these knows how to handle all four user types.

The Consumer interface is implemented by every object in the hierarchy: ExistingCustomers, NewCustomers, MinorCustomer, and JointCustomer. Each of these knows how to receive a visitor and route it to the correct method.

When you call existingCustomer.accept(pdfHandler), ExistingCustomers calls pdfHandler.visitExistingCustomer(this) and passes itself as the argument. The right method fires automatically. There's no type checking, if-else, or switch. The object tells the visitor who it is, and the visitor knows exactly what to do with that information.

Real World Example One: Document Export

This is a real scenario from a fintech platform. There are four user types with different data structures, all needing to export their information to three document formats: PDF, Excel, and CSV.

Step 1: Define the User Models

class ExistingUser {
  final int id;
  final String firstName;
  final String lastName;
  final DateTime lastPaymentDate;
  final num accountBalance;

  const ExistingUser({
    required this.id,
    required this.firstName,
    required this.lastName,
    required this.lastPaymentDate,
    required this.accountBalance,
  });
}

class NewUser {
  final String firstName;
  final String lastName;

  const NewUser({
    required this.firstName,
    required this.lastName,
  });
}

class MinorAccountUser {
  final int age;
  final int guardianId;
  final String firstName;
  final String lastName;
  final String guardianName;

  const MinorAccountUser({
    required this.age,
    required this.guardianId,
    required this.firstName,
    required this.lastName,
    required this.guardianName,
  });
}

class JointAccountUser {
  final int jointAccountId;
  final List<String> accountHoldersInfo;
  final num accountBalance;

  const JointAccountUser({
    required this.jointAccountId,
    required this.accountHoldersInfo,
    required this.accountBalance,
  });
}

We have four models. Each one owns its own data and nothing else. There's no export logic or notification logic. And no business operations of any kind. Just clean data structures.

This is exactly how it should be. The model's job is to hold data. The visitor's job is to operate on it.

Step 2: Define the Visitor and Consumer Interfaces

abstract class UserVisitor<T> {
  T visitExistingCustomer(ExistingUser user);
  T visitNewCustomer(NewUser user);
  T visitMinorCustomer(MinorAccountUser user);
  T visitJointCustomer(JointAccountUser user);
}

abstract class UserConsumer {
  T accept<T>(UserVisitor<T> visitor);
}

UserVisitor<T> is generic. The type parameter T represents what the visitor returns. A document export visitor returns a String. A fee calculation visitor might return a double. A validation visitor might return a bool. The same pattern works for any return type.

UserConsumer declares the accept method. Every object in the hierarchy must implement this. The accept method is what makes the double dispatch work. The object receives the visitor and immediately calls the right visit method on it, passing itself as the argument.

Step 3: Implement the Concrete Consumers

class ExistingCustomers implements UserConsumer {
  final ExistingUser user;
  ExistingCustomers({required this.user});

  @override
  T accept<T>(UserVisitor<T> visitor) {
    return visitor.visitExistingCustomer(user);
  }
}

class NewCustomers implements UserConsumer {
  final NewUser user;
  NewCustomers({required this.user});

  @override
  T accept<T>(UserVisitor<T> visitor) {
    return visitor.visitNewCustomer(user);
  }
}

class MinorCustomer implements UserConsumer {
  final MinorAccountUser user;
  MinorCustomer({required this.user});

  @override
  T accept<T>(UserVisitor<T> visitor) {
    return visitor.visitMinorCustomer(user);
  }
}

class JointCustomer implements UserConsumer {
  final JointAccountUser user;
  JointCustomer({required this.user});

  @override
  T accept<T>(UserVisitor<T> visitor) {
    return visitor.visitJointCustomer(user);
  }
}

Each consumer wraps one user model and implements accept by forwarding to the correct visit method. This is the entire job of a concrete consumer. It knows who it is, and it tells the visitor by calling the right method.

Notice that none of these classes know anything about PDF, Excel, CSV, email, SMS, or any operation. They're completely decoupled from every operation that will ever be performed on them.

Step 4: Implement the Concrete Visitors

class PdfHandler implements UserVisitor<String> {
  @override
  String visitExistingCustomer(ExistingUser user) {
    return '${user.firstName} ${user.lastName}'
        '\nBalance: ${user.accountBalance}'
        '\nLast Payment: ${user.lastPaymentDate}';
  }

  @override
  String visitNewCustomer(NewUser user) {
    return '${user.firstName} ${user.lastName}';
  }

  @override
  String visitMinorCustomer(MinorAccountUser user) {
    return '${user.firstName} ${user.lastName}'
        '\nAge: ${user.age}'
        '\nGuardian: ${user.guardianName} (ID: ${user.guardianId})';
  }

  @override
  String visitJointCustomer(JointAccountUser user) {
    final holders = user.accountHoldersInfo.join(', ');
    return 'Joint Account ID: ${user.jointAccountId}'
        '\nHolders: $holders'
        '\nBalance: ${user.accountBalance}';
  }
}

class ExcelHandler implements UserVisitor<String> {
  @override
  String visitExistingCustomer(ExistingUser user) {
    return '${user.firstName}\t${user.lastName}'
        '\t${user.accountBalance}\t${user.lastPaymentDate}';
  }

  @override
  String visitNewCustomer(NewUser user) {
    return '${user.firstName}\t${user.lastName}';
  }

  @override
  String visitMinorCustomer(MinorAccountUser user) {
    return '${user.firstName}\t${user.lastName}'
        '\t${user.age}\t${user.guardianName}\t${user.guardianId}';
  }

  @override
  String visitJointCustomer(JointAccountUser user) {
    final holders = user.accountHoldersInfo.join('\t');
    return '${user.jointAccountId}\t$holders\t${user.accountBalance}';
  }
}

class CsvHandler implements UserVisitor<String> {
  @override
  String visitExistingCustomer(ExistingUser user) {
    return '"${user.firstName}","${user.lastName}"'
        ',"${user.accountBalance}","${user.lastPaymentDate}"';
  }

  @override
  String visitNewCustomer(NewUser user) {
    return '"${user.firstName}","${user.lastName}"';
  }

  @override
  String visitMinorCustomer(MinorAccountUser user) {
    return '"${user.firstName}","${user.lastName}"'
        ',"${user.age}","${user.guardianName}","${user.guardianId}"';
  }

  @override
  String visitJointCustomer(JointAccountUser user) {
    final holders = user.accountHoldersInfo.map((h) => '"$h"').join(',');
    return '"${user.jointAccountId}",$holders,"${user.accountBalance}"';
  }
}

Each handler implements the visitor interface and knows exactly how to format each user type for its specific document format. PdfHandler uses newlines and labels. ExcelHandler uses tabs. CsvHandler wraps values in quotes and separates with commas.

The formatting logic for each document type lives in exactly one class. If the PDF format changes, you touch only PdfHandler. If the CSV format changes, you touch only CsvHandler. The user models never change.

Step 5: Use It

void existingUserLogic() {
  final customer = ExistingCustomers(
    user: ExistingUser(
      id: 10,
      firstName: 'Oluwaseyi',
      lastName: 'Fatunmole',
      lastPaymentDate: DateTime.now(),
      accountBalance: 7373773.39,
    ),
  );

  final pdf = customer.accept(PdfHandler());
  final excel = customer.accept(ExcelHandler());
  final csv = customer.accept(CsvHandler());

  print('PDF:\n$pdf\n');
  print('Excel:\n$excel\n');
  print('CSV:\n$csv\n');
}

void newUserLogic() {
  final customer = NewCustomers(
    user: NewUser(
      firstName: 'Oluwaseyi',
      lastName: 'Fatunmole',
    ),
  );

  customer.accept(PdfHandler());
  customer.accept(ExcelHandler());
  customer.accept(CsvHandler());
}

void minorUserLogic() {
  final customer = MinorCustomer(
    user: MinorAccountUser(
      age: 15,
      guardianId: 82882,
      firstName: 'Oluwaseyi',
      lastName: 'Fatunmole',
      guardianName: 'Inioluwa',
    ),
  );

  customer.accept(PdfHandler());
  customer.accept(ExcelHandler());
  customer.accept(CsvHandler());
}

void jointUserLogic() {
  final customer = JointCustomer(
    user: JointAccountUser(
      jointAccountId: 92,
      accountHoldersInfo: [
        'Oluwaseyi',
        'Aderonke',
        'Inioluwa',
        'Tiwaloluwa',
      ],
      accountBalance: 9200020202.22,
    ),
  );

  customer.accept(PdfHandler());
  customer.accept(ExcelHandler());
  customer.accept(CsvHandler());
}

The same customer object accepts any visitor with the same call. The type dispatch happens automatically through the accept method. There's no type checking anywhere in the calling code, and no if-else or switch. Just customer.accept(handler) and the right method fires.

Now think about what happens when you need to add an XML export. You create one new class, XmlHandler, implement the four visit methods, and that's it. You don't touch ExistingUser, NewUser, MinorAccountUser, JointAccountUser, or any of the existing handlers. The system is genuinely open for extension and closed for modification.

Real World Example Two: Notification System

Here we have the same four user types and the same pattern. But it's a different operation entirely.

Your platform needs to notify users about account events. But not every user type should be notified the same way.

Existing users get email and push notifications. New users only get email because they haven't fully set up their profile yet. Minor account users get SMS to their guardian's number. Joint account users get notified on all channels because multiple people share the account.

Without the Visitor pattern, this logic would spread across all four user models or collapse into one enormous function full of type checks. With Visitor, it lives in three focused classes.

The Notification Visitor Interface

abstract class NotificationVisitor {
  void visitExistingCustomer(ExistingUser user);
  void visitNewCustomer(NewUser user);
  void visitMinorCustomer(MinorAccountUser user);
  void visitJointCustomer(JointAccountUser user);
}

This visitor returns void because notifications are side effects. They send messages, they don't return values.

The Concrete Notification Visitors

class EmailNotificationHandler implements NotificationVisitor {
  @override
  void visitExistingCustomer(ExistingUser user) {
    print('Sending email to existing customer: ${user.firstName}');
    // email service call with full account details
  }

  @override
  void visitNewCustomer(NewUser user) {
    print('Sending welcome email to new customer: ${user.firstName}');
    // welcome email with onboarding steps
  }

  @override
  void visitMinorCustomer(MinorAccountUser user) {
    print('Sending email to guardian: ${user.guardianName}');
    // email goes to guardian, not the minor
  }

  @override
  void visitJointCustomer(JointAccountUser user) {
    for (final holder in user.accountHoldersInfo) {
      print('Sending email to joint holder: $holder');
      // all account holders get notified
    }
  }
}

class SmsNotificationHandler implements NotificationVisitor {
  @override
  void visitExistingCustomer(ExistingUser user) {
    print('Sending SMS to existing customer: ${user.firstName}');
  }

  @override
  void visitNewCustomer(NewUser user) {
    // new users are not SMS-verified yet, skip
    print('New customer ${user.firstName} not SMS-eligible yet');
  }

  @override
  void visitMinorCustomer(MinorAccountUser user) {
    print('Sending SMS to guardian ${user.guardianName} for minor ${user.firstName}');
    // SMS goes to guardian's registered number
  }

  @override
  void visitJointCustomer(JointAccountUser user) {
    for (final holder in user.accountHoldersInfo) {
      print('Sending SMS to joint holder: $holder');
    }
  }
}

class PushNotificationHandler implements NotificationVisitor {
  @override
  void visitExistingCustomer(ExistingUser user) {
    print('Push notification to existing customer: ${user.firstName}');
  }

  @override
  void visitNewCustomer(NewUser user) {
    print('Push notification to new customer: ${user.firstName}');
  }

  @override
  void visitMinorCustomer(MinorAccountUser user) {
    // minors do not have the app installed yet, guardian gets push
    print('Push notification to guardian: ${user.guardianName}');
  }

  @override
  void visitJointCustomer(JointAccountUser user) {
    for (final holder in user.accountHoldersInfo) {
      print('Push notification to joint holder: $holder');
    }
  }
}

Each handler knows the specific rules for each user type. SmsNotificationHandler knows that new users aren't SMS-verified yet. PushNotificationHandler knows that minor account notifications go to the guardian. EmailNotificationHandler knows that joint account holders all need to be notified individually.

This business logic lives in exactly one place per notification channel. When the rules change (and they always change), you update one class.

Using the Notification Visitors

void notifyExistingUser() {
  final customer = ExistingCustomers(
    user: ExistingUser(
      id: 10,
      firstName: 'Oluwaseyi',
      lastName: 'Fatunmole',
      lastPaymentDate: DateTime.now(),
      accountBalance: 7373773.39,
    ),
  );

  customer.accept(EmailNotificationHandler());
  customer.accept(SmsNotificationHandler());
  customer.accept(PushNotificationHandler());
}

void notifyMinorUser() {
  final customer = MinorCustomer(
    user: MinorAccountUser(
      age: 15,
      guardianId: 82882,
      firstName: 'Oluwaseyi',
      lastName: 'Fatunmole',
      guardianName: 'Inioluwa',
    ),
  );

  // all three channels fire, each with minor-specific rules
  customer.accept(EmailNotificationHandler());
  customer.accept(SmsNotificationHandler());
  customer.accept(PushNotificationHandler());
}

void notifyJointUser() {
  final customer = JointCustomer(
    user: JointAccountUser(
      jointAccountId: 92,
      accountHoldersInfo: [
        'Oluwaseyi',
        'Aderonke',
        'Inioluwa',
        'Tiwaloluwa',
      ],
      accountBalance: 9200020202.22,
    ),
  );

  customer.accept(EmailNotificationHandler());
  customer.accept(SmsNotificationHandler());
  customer.accept(PushNotificationHandler());
}

The calling code is identical regardless of the user type or the notification channel. The dispatch is automatic. The rules live inside the visitors.

When WhatsApp notifications become a requirement (and they will), you create one WhatsAppNotificationHandler class with four visit methods. Nothing else changes.

Real World Example Three: Fee Calculation

Again, we have the same four user types and the same pattern. And once again, we have a completely different operation.

Your platform needs to calculate monthly maintenance fees. But each user type has different rules.

Existing customers pay a flat monthly fee based on their account balance. New customers are fee-exempt for their first three months. Minor account holders pay a reduced fee because their accounts have restricted features. Joint account holders have their fee split equally across all account holders.

Without Visitor, this logic ends up as a giant method somewhere with four branches, or worse, it leaks into the user models themselves. With Visitor, it lives in one focused class.

The Fee Visitor Interface

abstract class FeeVisitor {
  double visitExistingCustomer(ExistingUser user);
  double visitNewCustomer(NewUser user);
  double visitMinorCustomer(MinorAccountUser user);
  double visitJointCustomer(JointAccountUser user);
}

This visitor returns a double because fee calculation produces a numeric value.

The Concrete Fee Visitor

class MonthlyFeeCalculator implements FeeVisitor {
  @override
  double visitExistingCustomer(ExistingUser user) {
    // 0.5% of account balance, minimum 500, maximum 5000
    final fee = user.accountBalance * 0.005;
    return fee.clamp(500, 5000).toDouble();
  }

  @override
  double visitNewCustomer(NewUser user) {
    // new customers are fee-exempt for the first 3 months
    return 0.0;
  }

  @override
  double visitMinorCustomer(MinorAccountUser user) {
    // flat reduced fee for minor accounts
    return 150.0;
  }

  @override
  double visitJointCustomer(JointAccountUser user) {
    // standard fee split equally across all holders
    const standardFee = 2000.0;
    return standardFee / user.accountHoldersInfo.length;
  }
}

Every fee rule for every user type lives in this one class. When the fee structure changes for existing customers, you touch one method in one class. When minor account fees are updated, same thing. None of the user models change, and no other visitor changes.

Using the Fee Visitor

void calculateFees() {
  final existingCustomer = ExistingCustomers(
    user: ExistingUser(
      id: 10,
      firstName: 'Oluwaseyi',
      lastName: 'Fatunmole',
      lastPaymentDate: DateTime.now(),
      accountBalance: 7373773.39,
    ),
  );

  final newCustomer = NewCustomers(
    user: NewUser(
      firstName: 'Aderonke',
      lastName: 'Fatunmole',
    ),
  );

  final minorCustomer = MinorCustomer(
    user: MinorAccountUser(
      age: 15,
      guardianId: 82882,
      firstName: 'Inioluwa',
      lastName: 'Fatunmole',
      guardianName: 'Oluwaseyi',
    ),
  );

  final jointCustomer = JointCustomer(
    user: JointAccountUser(
      jointAccountId: 92,
      accountHoldersInfo: [
        'Oluwaseyi',
        'Aderonke',
        'Inioluwa',
        'Tiwaloluwa',
      ],
      accountBalance: 9200020202.22,
    ),
  );

  final calculator = MonthlyFeeCalculator();

  final existingFee = existingCustomer.accept(calculator);
  final newFee = newCustomer.accept(calculator);
  final minorFee = minorCustomer.accept(calculator);
  final jointFee = jointCustomer.accept(calculator);

  print('Existing customer fee: NGN $existingFee');
  print('New customer fee: NGN $newFee');
  print('Minor account fee: NGN $minorFee');
  print('Joint account fee per holder: NGN $jointFee');
}

The output:

Existing customer fee: NGN 5000.0
New customer fee: NGN 0.0
Minor account fee: NGN 150.0
Joint account fee per holder: NGN 500.0

When a PremiumFeeCalculator is needed for a new tier of customers, you create one new class that implements FeeVisitor. The user models stay exactly as they are. The MonthlyFeeCalculator stays exactly as it is. The accept methods on all four consumers stay exactly as they are.

The Power of Combining All Three Operations

Here's what makes the Visitor pattern truly shine in a system like this. You have the same four user types, and you can run any combination of visitors on any of them in the same call chain.

void processUser(UserConsumer customer) {
  final pdf = customer.accept(PdfHandler());
  final csv = customer.accept(CsvHandler());

  customer.accept(EmailNotificationHandler());
  customer.accept(PushNotificationHandler());

  final fee = customer.accept(MonthlyFeeCalculator());

  print('Fee: NGN $fee');
  print('Documents generated and notifications sent');
}

One function, any user type, any combination of operations. The consumer doesn't care which visitors it receives. The visitors don't care which consumers call them. They speak to each other through the interface, and the interface guarantees everything works correctly.

We have three completely different operations (document export, notifications, and fee calculation) all applied to the same object with the same call pattern. None of these operations know about each other. None of them touch the user models. Each one lives in its own focused class with its own single reason to change.

When to Use the Visitor Pattern

Use Visitor when you have a stable set of object types and a growing set of operations on them.

The pattern shines when the object hierarchy is unlikely to change frequently. It's optimized for adding new operations, not new types. Adding a new user type means updating every existing visitor. If your object types change constantly, Visitor creates more work than it saves.

It's also very effective when you need to perform multiple unrelated operations on a family of objects without polluting their classes with that logic. Document export, notification handling, fee calculation, and KYC validation are all unrelated operations. Each belongs in its own visitor, not scattered across the user models.

Visitor also works well when you want clean separation between data and behavior. The models hold data and the visitors define behavior. This makes both easier to understand, easier to test, and easier to maintain independently.

When Not to Use It

Avoid Visitor when the object hierarchy changes frequently. Every time you add a new type, you must update every existing visitor. In a system where new user types appear regularly, this becomes painful quickly.

It's also not helpful when you only have one or two operations. For simple cases, the overhead of creating visitor interfaces, consumer interfaces, and multiple classes is not worth the benefit.

And avoid it when the operations are tightly coupled to the object's internal state in ways that make sense to keep together. Some behavior naturally belongs on the object itself.

Conclusion

The Visitor Design Pattern solves a problem that most developers only recognize after they've already made a mess of it. You have a family of objects with different types and different data. Operations come in one after another. Without a deliberate structure, those operations spread everywhere: into the models, utility classes, and massive switch statements that nobody wants to touch.

Visitor collects each operation into one focused class. The models stay clean and the operations stay isolated. Adding a new operation means creating one new class. The existing code doesn't change.

In the fintech examples above, we have three entirely different concerns: document export, notifications, and fee calculation. All are handled by handled by focused classes, none of which know anything about each other. The user models don't know about PDF or email or fees. The PdfHandler doesn't know about SMS. The MonthlyFeeCalculator doesn't know about push notifications. Each class has exactly one reason to exist and exactly one reason to change.

That s what a well-applied Visitor pattern looks like in practice. Clean, focused, and genuinely extensible.

Happy coding!

But data privacy regulations are tightening globally, and users are growing increasingly conscious of their digital footprints. Treating privacy as a "legal afterthought" or something to fix later in production is no longer sustainable.

This is where Privacy by Design comes in.

Coined as a framework to integrate privacy proactively into the engineering lifecycle, Privacy by Design means your system architecture should naturally protect user data by default.

In this comprehensive guide, we'll walk through how to structurally build data privacy into your backend APIs using modern engineering patterns, code concepts, and intentional database designs.

Table of Contents

• Prerequisites

• The Principles of Privacy by Design for Developers

• Project Directory Structure

• Implement Strict Data Minimization at the Endpoint Layer

• Decouple PII with the Pseudonymization Token Pattern

• Beyond RBAC: Implementing Policy-Based Access Control (PBAC)

• Automate Data Retention with Database TTLs and Hooks

• Trust is the Ultimate Developer Metric

Prerequisites

Before diving into this tutorial, you should have the following:

• A foundational understanding of Node.js and JavaScript (ES6+).

• Familiarity with building basic RESTful APIs using Express.

• Essential knowledge of database interactions (SQL or NoSQL concepts).

  

Figure 1: The four pillars of Privacy by Design for backend APIs.

Diagram Breakdown:

• Center: Core security shield representing privacy-first system design.

• Top-Left (Data Minimization): Payload filtering at the endpoint layer.

• Top-Right (Pseudonymization): Decoupling PII via tokenization.

• Bottom-Left (PBAC): Purpose-driven, context-aware authorization rules.

• Bottom-Right (Retention & TTL): Automated data expiration via database hooks.

The Principles of Privacy by Design for Developers

Before writing code, we need to shift our mindset. Privacy by Design isn't about writing a better "Privacy Policy" page on a website. It means translating structural abstractions into practical engineering boundaries.

For an API engineer, this boils down to four distinct execution pillars:

• Proactive, not reactive: Preventing privacy data leaks before they happen rather than managing breaches after the fact.

• Privacy as the default: The user doesn't have to opt-in to remain private. The ecosystem protects them out of the box.

• End-to-end security: Data remains secure, structured, and minimized from ingestion to permanent deletion.

• Visibility and transparency: Keeping clean logs of what data is handled, where it lives, and why it is being used.

Let's look at how we can implement these four foundations directly inside our codebases.

Project Directory Structure

To give you a technical perspective of how these privacy patterns fit together cleanly inside a modular production application, we'll be referencing code across the following project layout:

api-privacy-design/
├── config/
│   └── database.js
├── middleware/
│   ├── auth.js
│   └── privacyPolicy.js
├── models/
│   ├── auditLog.js
│   └── user.js
├── services/
│   └── piiVault.js
├── validators/
│   └── userValidator.js
├── app.js
├── package.json
└── README.md

Implement Strict Data Minimization at the Endpoint Layer

The fundamental rule of data privacy is simple: If you don’t have it, you can't lose it.

The Payload Over-Inclusion Anti-Pattern

Many APIs accept massive, generic JSON payloads from frontend clients and save everything straight to the database. Developers often do this for convenience, using spread operators like ...req.body to quickly insert records without explicitly mapping variables.

// A poorly designed registration endpoint that grabs everything indiscriminately
app.post('/api/register', async (req, res) => {
  const userData = req.body; // Accepts full profile, tracking tokens, internal metadata, etc.
  const user = await Database.save('users', userData);
  res.status(201).json(user);
});

If an attacker manipulates the client-side request to pass an administrative flag like {"isAdmin": true, "internalDeviceID": "123"} within the payload, a naïve endpoint will process it.

Architectural View: Schema Validation

Data minimization means configuring endpoints to accept and store only what is strictly necessary for immediate business operations. To enforce this, explicit schema validation must occur right at the API gateway or controller boundary. This process ensures that only predefined, safe fields enter your internal system, and everything else is structurally ignored.

The Code Solution: Schema Hardening

By implementing strict verification models (using validation libraries like Joi, Zod, or Yup), any unmapped field injected by a client is dropped or triggers a validation block.

Under our validators/userValidator.js configuration file, we can define our schema parameters.

If your validation provider is Joi-compatible, you can leverage native options like { stripUnknown: true } to automatically clean incoming objects. If you choose to use an alternate validation framework like Zod, you can achieve an identical outcome by chaining the .strict() modifier to block requests that contain unmapped fields entirely.

Here's how we use Joi to drop non-explicit fields instantly at our router boundary:

const Joi = require('joi');

// Explicitly define the bare minimum schema required for validation
const registrationSchema = Joi.object({
  email: Joi.string().email().required(),
  password: Joi.string().min(8).required()
  // Any extra tracking metadata or unauthorized attributes injected here are dropped automatically
});

app.post('/api/register', async (req, res) => {
  try {
    // stripUnknown: true drops any properties not explicitly defined in the schema
    const validatedData = await registrationSchema.validateAsync(req.body, { stripUnknown: true });
    
    const user = await Database.save('users', validatedData);
    
    // Privacy Safeguard: Never return raw internal properties back to the client response
    res.status(201).json({ id: user.id, email: user.email }); 
  } catch (err) {
    res.status(400).json({ error: err.details[0].message });
  }
});

Decouple PII with the Pseudonymization Token Pattern

When handling Personally Identifiable Information (PII) like real names, phone numbers, or physical home addresses, storing them in plain text inside your primary application tables is a massive security liability.

Why Simple Encryption Isn't Enough

While encrypting columns at rest (using AES-256) is standard practice, application systems still face risks. If developers run analytical reporting, dump operational data into debugging environments, or accidentally output database rows to application logs (for example, console.log(userObject)), raw sensitive data can quickly spill across unauthorized environments.

The Tokenization Architecture

Instead of keeping PII alongside business tables, use a Pseudonymization Token Pattern. This separates identity from transactional records. This isn't just encryption anymore; it's an architectural separation of duties.

Implementing a Pseudonymized Data Flow

Let's trace how the processing layer functions. In our isolated services/piiVault.js module, we manage the interaction between our primary app controller and our secure token storage vault. When a record initialisation occurs, we isolate the raw PII elements, exchange them for an opaque reference token, and use that reference token as our relational key.

// services/piiVault.js
// Conceptual abstraction of a decoupled user account initialization
async function createUserProfile(incomingPayload) {
  const { email, phoneNumber, ...transactionalData } = incomingPayload;

  // 1. Dispatch the raw PII elements directly to an isolated, encrypted Vault Service
  const vaultResponse = await PiiVaultService.tokenize({
    email: email,
    phone: phoneNumber
  });

  // 2. The Vault returns a uniquely structured reference UUID token (non-reversible string)
  const piiToken = vaultResponse.token; // e.g., "pii_token_83912x"

  // 3. Save the primary application record using ONLY the token link
  const operationalRecord = {
    ...transactionalData,
    piiRefToken: piiToken,
    accountStatus: 'active',
    createdAt: new Date()
  };

  await Database.save('primary_users_table', operationalRecord);
  return { success: true, reference: piiToken };
}

If internal developers run analytical operations or debug logs on the primary backend database, they'll only ever see non-identifiable reference strings rather than actual user credentials.

Beyond RBAC: Implementing Policy-Based Access Control (PBAC)

Traditional Role-Based Access Control (RBAC) (checking patterns like if (user.role === 'admin')) is no longer granular enough for complex software architectures. Privacy engineering demands that access control systems evaluate not just who is trying to view a resource, but the purpose of the access request.

The Core Vectors of PBAC

By transitioning to Policy-Based Access Control (PBAC), your authorization system dynamically maps rules along three parameters:

• The Actor/User: Who is making the API call and what are their active permissions?

• The Resource: What specific classification of data is being requested?

• The Purpose: Why does the business logic need to process this data, and did the data owner explicitly give consent for it?

Building Contextual Privacy Governance Middleware

Let's see how this works in practice. To set the context for our route execution, we'll build a dedicated authorization middleware file under middleware/privacyPolicy.js. This middleware intercepts the incoming request vector, checks the destination resource owner's privacy choices, and matches it against the application's processing target context.

// middleware/privacyPolicy.js
// Middleware pattern verifying purpose-bound consent parameters
const verifyDataAccessPolicy = (requiredPurpose) => {
  return (req, res, next) => {
    const actor = req.user; // Instantiated from a previous authentication layer
    const resourceOwner = req.resourceOwner; // The target data record context
    
    // Extract the explicit consent array configured by the user
    const userConsentPolicies = resourceOwner.consents || []; // e.g., ['essential_auth', 'marketing_emails']

    // Check if the code execution purpose matches what the user explicitly consented to
    const hasExplicitConsent = userConsentPolicies.includes(requiredPurpose);
    
    // Elevate override permissions ONLY to specialized audit actors if explicitly tracked
    if (!hasExplicitConsent && actor.role !== 'System_Auditor') {
      return res.status(403).json({ 
        error: "Access Denied: The operation requested exceeds your current purpose-bound user consent profiles." 
      });
    }
    
    // Access authorized; proceed down the middleware track
    next();
  };
};

// Application Execution Target Route within app.js
app.get('/api/analytics/user-behavior/:userId', 
  fetchResourceOwnerMiddleware, 
  verifyDataAccessPolicy('analytics_tracking'), // Will throw a 403 if user opted out of tracking
  (req, res) => {
    res.json({ status: "Success", data: "Contextual processing executed." });
  }
);

Automate Data Retention with Database TTLs and Hooks

Data privacy frameworks emphasize that user data shouldn't sit inside database storage indefinitely. If a temporary log has fulfilled its purpose, or an account lifecycle ends, that data needs to disappear entirely.

The Automated Retention Lifecycle

Relying on teams to run manual script updates or cron cleanup commands is prone to failure. Privacy-by-design systems build data expiration rules directly into their data models.

Document Stores: Native TTL Indexes

If you're managing unstructured payload layers or tracking sessions in NoSQL document collections (like MongoDB), you can leverage Time-To-Live (TTL) index configurations to wipe records automatically down to the second.

We write this logic directly into our schemas inside models/auditLog.js:

// models/auditLog.js
const mongoose = require('mongoose');

const auditLogSchema = new mongoose.Schema({
  userId: mongoose.Schema.Types.ObjectId,
  apiAction: String,
  ipAddress: String,
  createdAt: { 
    type: Date, 
    default: Date.now, 
    expires: '90d' // MongoDB background threads automatically drop this document after 90 days
  }
});

const AuditLog = mongoose.model('AuditLog', auditLogSchema);

Relational Databases: Safe Masking with ORM Hooks

In relational database systems (such as PostgreSQL or MySQL using Sequelize/Prisma), cascading relationships make immediate hard deletions tricky.

To avoid breaking database foreign keys while still respecting user privacy, we implement a two-step pattern: an instantaneous lifecycle hook handles data anonymisation and masking, while a native database scheduled script handles data cleansing asynchronously.

We can implement this hook inside our relational schema files under models/user.js:

// models/user.js
const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize('sqlite::memory:');

const OperationalUser = sequelize.define('OperationalUser', {
  username: DataTypes.STRING,
  email: DataTypes.STRING,
  fullName: DataTypes.STRING,
  isDeleted: { type: DataTypes.BOOLEAN, defaultValue: false }
});

// Anonymize records on the fly before a soft-deletion hook runs
OperationalUser.addHook('beforeUpdate', async (user, options) => {
  if (user.isDeleted && user.changed('isDeleted')) {
    // Mask and overwrite confidential fields to protect privacy while keeping non-PII metrics intact
    user.email = `anonymized_user_${Date.now()}@privacy-protected.org`;
    user.fullName = "Anonymized Profile Data";
    user.username = `archived_node_${Math.floor(Math.random() * 100000)}`;
  }
});

Trust is the Ultimate Developer Metric

Building high-throughput applications quickly is a fantastic skill, but engineering architectures that stand the test of time requires building for trust.

When you embed consent boundaries, strict payload validation schema controls, decoupled identifier vaults, and automated database retention routines into your backend services from day one, you aren't just checking boxes off a security compliance form. You're building reliable, loosely coupled code systems that mitigate data breach risks and treat user privacy as a first-class citizen in application design.

A hero section, feature grid, testimonials, pricing, FAQ, and footer are common building blocks, yet developers often spend hours recreating them for every new project.

In this guide, you'll learn how to build a modern marketing landing page using Next.js, shadcn/ui, Tailwind CSS, and reusable Shadcn blocks. Instead of building every section from scratch, you'll assemble a production-ready page, customize it to match your brand, and finish with a foundation that's ready for real-world projects.

Table of Contents

• Prerequisites

• What Are We Building?

• Project Setup with Base UI Using the Shadcn Preset

• Two Ways to Build Your Marketing Landing Page

• Option 1: Build Using the CLI

• Option 2: Build Using the MCP Server

• How to Optimize Your Landing Page

• How to Expand Your Marketing Website

• Live Preview:

• Conclusion

Prerequisites

Before you start, make sure you have:

• Node.js 18 or higher installed

• shadcn/ui initialized in your project (npx shadcn@latest init)

• Basic knowledge of React and TypeScript

If you haven't initialized shadcn/ui yet, run npx shadcn@latest init in your project root and follow the prompts before continuing.

What Are We Building?

In this tutorial, we'll build a modern marketing landing page using production-ready blocks from Shadcn Space. Instead of designing and developing every section from scratch, we'll assemble a complete landing page using reusable shadcn/ui blocks and customize them to fit our brand and product.

You can use the same approach to create landing pages for SaaS products, AI tools, startups, agencies, developer tools, portfolios, and many other types of websites. Since every block is built with React, Tailwind CSS, and shadcn/ui, you have full control over the code and can easily modify the content, layout, and styling.

Why Build with Shadcn Space?

Creating a professional marketing website typically involves designing multiple sections that work together to tell your product's story and guide visitors to take action.

But instead of building every section from scratch, you can start with production-ready blocks that are easy to customize.

This lets you build marketing websites faster with reusable blocks (and you can also mix and match blocks to create unique page layouts). It also gives you full ownership of your clean React and Tailwind CSS code. And overall, you save development time without sacrificing flexibility.

Sections We'll Build

We'll build our marketing landing page using the following sections:

• Hero section with a compelling headline, call-to-action, and trusted-by logos.

• Features section to highlight your product's key capabilities.

• Product Showcase & Benefits section to demonstrate your product and communicate its value.

• Testimonials section to build credibility with customer feedback.

• Pricing section to present your plans clearly.

• FAQ section answers common questions and reduces friction.

• Call-to-Action section to encourage visitors to get started.

• Footer with navigation and important links.

Final Page Structure

Our landing page will have this structure:

<main>
  {/* 1. Hero section + Trusted by / Logo cloud */}
  <AgencyHeroSection />

  {/* 2. Features section */}
  <Feature01 />

  {/* 3. Product showcase & Benefits */}
  <AboutAndStats01 />

  {/* 4. Testimonials */}
  <Testimonials />

  {/* 5. Pricing section */}
  <Pricing />

  {/* 6. FAQ section */}
  <Faq />

  {/* 7. Call-to-action section */}
  <CTA />

  {/* Footer */}
  <Footer />
</main>

Each section will be installed from the Shadcn Space registry and customized directly inside our project. By the end of this tutorial, you'll have a fully responsive marketing landing page built with Next.js, Tailwind CSS, and shadcn/ui that you can adapt for your own product or business.

Project Setup with Base UI Using the Shadcn Preset

Since Shadcn Space blocks are built using Base UI primitives, we'll create our project using the Base UI preset instead of the default Radix setup.

This ensures that our landing page uses the same foundation as the blocks we're going to install.

1. Create the Project with Base UI

Run the following command:

pnpm dlx shadcn@latest init --preset b0 --template next

This command does a few important things:

• Creates a Next.js project

• Configures Tailwind CSS

• Sets up Base UI as the component foundation

• Uses the Nova style preset

• Configures Lucide icons

• Uses Inter font

• Applies neutral theme tokens

You now have a Base UI-powered Next.js project ready for building your landing page.

2. Add the Shadcn Space Registry

Open your components.json and add the following registry configuration:

{
  "registries": {
    "@shadcn-space": {
      "url": "https://shadcnspace.com/r/{name}.json",
    }
  }
}

This tells the CLI where to fetch components and blocks from the registry.

For more information about how to use it in your project, check out the docs.

Two Ways to Build Your Marketing Landing Page

Now that your project is set up with shadcn/ui, it's time to start building the marketing landing page.

You can install production-ready blocks directly into your project in two different ways:

• Using the CLI

• Using the MCP Server inside your AI-powered editor

Both approaches install the actual React and Tailwind CSS source code into your project, giving you complete control over customization. The only difference is how you discover and install the blocks.

Option 1: Build Using the CLI

The CLI is the fastest way to browse the registry and install individual blocks into your project. It gives you full control over which sections you want to use and how you customize them.

Step 1: Browse Marketing Blocks

Visit the block registry and explore the available marketing blocks.

Let's review the sections we'll use for this tutorial:

• Hero section with a call-to-action and trusted-by logos

• Features section

• Product showcase & benefits section

• Testimonials section

• Pricing section

• FAQ section

• Call-to-action section

• Footer

Choose the blocks that best match the design and style of your website. Since every block is fully customizable, you can easily update the content, colors, spacing, and layout to match your brand.

In the following sections, we'll install each block and customize them.

Step 2: Install Selected Blocks

Once you find a block you like, install it using the CLI:

npx shadcn@latest add @shadcn-space/{block-name}

Each command downloads the block, places it inside components/shadcn-space/blocks, and installs the required dependencies.

Now your folder might look like this:

components/
  shadcn-space/
    blocks/
      about-us-section-01/
      hero-01/
      features-01/
      pricing-01/
      testimonial-01/
      faq-01/
      cta-01/
      footer-01/

Note: I've used the first block from each section in this tutorial. You can choose any other shadcn block that suits best according to your needs.

Step 3: Add a Hero Section

Every great marketing landing page starts with a strong hero section. It's the first thing visitors see, so it should clearly communicate what your product does, who it's for, and encourage users to take action.

Instead of building the section from scratch, we'll install a production-ready Hero block and customize it to match our landing page.

1. Install the Hero Block

Run the following CLI command to add the Hero block to your project:

npx shadcn@latest add @shadcn-space/hero-01

The CLI will automatically download the Hero block source code, add the component to your project, and install any required dependencies.

After the installation completes, you should see the following directory structure:

components/
  shadcn-space/
    blocks/
      hero-01/
        index.tsx

You can now open the component and customize the heading, description, call-to-action buttons, images, and other content to match your product and branding.

2. Understand the Hero Block Structure

Once the installation is complete, open the Hero block located at:

components/shadcn-space/blocks/hero-01/index.tsx

You'll see a component similar to the following:

import HeroSection from "@/components/shadcn-space/blocks/hero-01/hero";
import type { NavigationSection } from "@/components/shadcn-space/blocks/hero-01/header";
import Header from "@/components/shadcn-space/blocks/hero-01/header";
import BrandSlider, { BrandList } from "@/components/shadcn-space/blocks/hero-01/brand-slider";
import type { AvatarList } from "@/components/shadcn-space/blocks/hero-01/hero";

export default function AgencyHeroSection() {
  const avatarList: AvatarList[] = [...];
  const navigationData: NavigationSection[] = [...];
  const brandList: BrandList[] = [...];

  return (
    <div className="relative">
      <Header navigationData={navigationData} />
      <main>
        <HeroSection avatarList={avatarList} />
        <BrandSlider brandList={brandList} />
      </main>
    </div>
  );
}

What Should You Notice?

Before making any changes, take a moment to understand how the block is organized. Rather than being a single large component, it's composed of smaller, reusable components that work together.

In this example:

• The Header component renders the navigation and receives its menu items through the navigationData array.

• The HeroSection component contains the main headline, description, call-to-action buttons, and social proof, while the avatarList provides the data displayed in the hero.

• The BrandSlider component displays the company logos using the brandList array.

This separation keeps the code modular and makes each part of the landing page easier to customize or replace independently.

Why This Matters?

Because the block is copied directly into your project, you're working with standard React components instead of a compiled package. Every file is fully editable, allowing you to understand how the section is built and modify it to suit your own requirements.

For example, you can update the navigation links, replace the placeholder content with your own branding, add additional sections, integrate custom functionality, or adjust the styling using Tailwind CSS classes. Since everything lives inside your codebase, you're free to restructure the component however you like without being locked into predefined APIs or abstractions.

3. Render the Hero Section

Now that the Hero block has been installed, it's time to display it on the page.

Import the component into your app/page.tsx file:

import AgencyHeroSection from "@/components/shadcn-space/blocks/hero-01";

export default function Page() {
  return (
    <AgencyHeroSection />
  );
}

Save the file and start your development server if it isn't already running. When you open the application in your browser, you'll see the Hero section rendered as the first part of your marketing landing page.

With the Hero section in place, we've completed the first building block of our landing page. Next, we'll continue by adding the remaining sections to create a complete marketing website.

Install the Remaining Blocks

Now that you've added and rendered the Hero section, let's install the remaining blocks required for our marketing landing page.

Run the following command to install all the remaining sections at once:

npx shadcn@latest add @shadcn-space/feature-01 @shadcn-space/about-us-section-01 @shadcn-space/testimonial-01 @shadcn-space/pricing-01 @shadcn-space/faq-01 @shadcn-space/cta-01  @shadcn-space/footer-01

Note: If you're using Windows Command Prompt or PowerShell, run the command on a single line instead of using \ for line continuation.

After the installation is complete, update your app/page.tsx by importing the newly added blocks and rendering them in the following order:

import AgencyHeroSection from "@/components/shadcn-space/blocks/hero-01";
import AboutAndStats01 from "@/components/shadcn-space/blocks/about-us-01";
import Feature01 from "@/components/shadcn-space/blocks/feature-01";
import Pricing from "@/components/shadcn-space/blocks/pricing-01/pricing";
import Testimonials from "@/components/shadcn-space/blocks/testimonial-01/testimonial";
import Faq from "@/components/shadcn-space/blocks/faq-01/faq";
import CTA from "@/components/shadcn-space/blocks/cta-01/cta";
import Footer from "@/components/shadcn-space/blocks/footer-01/footer";


export const metadata = {
  title: "Acme Agency – Innovative Digital Solutions",
  description:
    "We craft immersive digital experiences for bold brands. Explore our services, pricing, and success stories.",
};


export default function Page() {
  return (
    <main>
      {/* 1. Hero section + Trusted by / logo cloud */}
      <AgencyHeroSection />


      {/* 2. Features section */}
      <Feature01 />


      {/* 3. Product showcase & Benefits section (Using About/Stats as a placeholder for these) */}
      <AboutAndStats01 />


      {/* 4. Testimonials */}
      <Testimonials />


      {/* 5. Pricing section */}
      <Pricing />


      {/* 6. FAQ section */}
      <Faq />


      {/* 7. Call-to-action section */}
      <CTA />


      {/* Footer */}
      <Footer />
    </main>
  );
}

That's it! Your complete marketing landing page is now assembled. You can start customizing the content, images, colors, and layout of each section to match your product and brand.

Customize the Marketing Landing Page

At this point, the overall structure of your marketing landing page is complete. The next step is to personalize each section so it reflects your product, brand, and messaging instead of the default placeholder content.

One of the biggest advantages of working with reusable React components is that every section can be customized independently. You can update the content, replace images, adjust layouts, and refine the styling without rebuilding the page from scratch.

The following examples show how the default blocks can be transformed into a polished marketing website.

Customize the Hero Section

The Hero section is the first thing visitors see, so it's the most important place to communicate your product's value. Replace the placeholder headline, supporting text, call-to-action buttons, and trusted brand logos with content that represents your own business.

Before:

After:

Notice how the customized version immediately establishes the product's identity through updated messaging, branding, imagery, and call-to-action buttons.

Customize the Features Section

The Features section should explain what your product offers and why it stands out. Replace the sample feature cards with capabilities that highlight your product's most valuable functionality.

Before:

After:

Updating the feature titles, descriptions, and icons makes the section more relevant to your audience while reinforcing your product's key selling points.

Customize the Pricing Section

Your pricing section should clearly communicate the plans you offer and help visitors choose the option that best fits their needs. Replace the default plans, pricing, feature lists, and button labels with information that matches your business model.

Before:

After:

A customized pricing section builds trust by presenting accurate information while making it easier for potential customers to compare plans.

Customize the FAQ Section

The FAQ section is a great opportunity to answer common questions before visitors contact your team. Replace the placeholder questions with answers related to your product, pricing, integrations, support, or onboarding process.

Before:

After:

Tailoring the FAQ to your product helps reduce uncertainty, improves the user experience, and can answer many questions before a customer reaches out.

The Result

With just a few content updates, the default blocks evolve into a professional marketing landing page tailored to your brand. Since every section is built with reusable React components, you can continue refining the design, adjusting layouts, and adding new content as your product grows without changing the overall page structure.

Option 2: Build Using the MCP Server

If you prefer a faster workflow, you can use the MCP Server to generate your landing page directly inside your editor. Instead of manually browsing and installing individual blocks, you simply describe the page you want to build, and the MCP Server assembles an initial version for you.

The MCP Server works with supported editors like Antigravity, VS Code, Cursor, Windsurf, and other MCP-compatible editors.

Step 1: Install the MCP Server

Quick Installation:

The fastest way to get started. Choose your package manager and run the command corresponding to your client:

For Claude Code:

claude mcp add shadcnspace-mcp -- npx -y shadcnspace-mcp@latest

For Others:

npx shadcnspace-cli install <client>

Replace <client> with cursor, antigravity, vscode, or windsurf.

Manual Installation For VS Code:

{
  "servers": {
    "shadcnspace-mcp": {
      "command": "npx",
      "args": ["-y", "shadcnspace-mcp@latest"]
    }
  }
}

• Open .vscode/mcp.json.

• Click Start next to the Shadcn Space MCP server

For a detailed guide, follow the MCP Server documentation to install it for your preferred editor.

Once the installation is complete, restart your editor to enable the MCP connection.

Step 2: Open the AI Chat

Open the AI chat panel inside your editor and describe the landing page you'd like to create.

For example:

Create a modern marketing landing page for an AI SaaS product.

Use Shadcn Space blocks and include:

- Hero section
- Features section
- Product showcase & benefits
- Testimonials
- Pricing
- FAQ
- Call-to-action
- Footer

Use a clean, modern, and responsive design.

Feel free to replace the product description with your own and customize as you like.

Step 3: Generate the Landing Page

After receiving your prompt, the MCP Server analyzes your requirements and selects the most suitable blocks for your landing page. It automatically assembles the page using a combination of reusable sections, giving you a working layout in just a few moments.

The generated sections are added directly to your project as standard React components. Since everything is real source code, you can customize every part of the page: update the content, replace images, modify the layout, adjust spacing, or restyle components using Tailwind CSS.

The MCP Server simply speeds up the initial setup, while giving you complete control over the final implementation.

How to Optimize Your Landing Page

Building a visually appealing landing page is only the first step. Before publishing your website, it's worth spending some time optimizing it for performance, search engines, and user experience.

A fast, responsive landing page not only feels more polished but also helps improve engagement and conversion rates. Fortunately, Next.js provides several built-in features that make these optimizations straightforward.

Optimize Images with Next.js

Images are often the largest assets on a marketing website, so optimizing them can significantly improve loading performance. If you're using Next.js, prefer the built-in next/image component instead of the standard HTML image tag. It automatically serves appropriately sized images, supports modern image formats, and reduces layout shifts as the page loads.

Before adding screenshots or illustrations to your project, make sure they're compressed and sized appropriately. Well-optimized images create a smoother browsing experience across desktop and mobile devices while also contributing to better Core Web Vitals.

Improve SEO for Your Landing Page

A well-designed landing page is only effective if people can discover it. Search engine optimization starts with creating meaningful content that clearly communicates what your product offers. Choose a descriptive page title, write a concise meta description, and organize your content using logical headings.

Your primary keyword should appear naturally throughout the page without forcing it into every paragraph. Focus on writing for your audience first, then structure the content in a way that search engines can easily understand. Combining valuable content with a clear page hierarchy gives your landing page the best chance of ranking for relevant searches.

Add Metadata and Open Graph Images

When someone shares your landing page on social media or in a messaging application, the preview is generated from your page's metadata. Configuring Open Graph and Twitter metadata allows you to control the title, description, and preview image that appear when your website is shared.

A custom preview image that reflects your branding makes your links look more professional and can encourage more people to click through. Taking a few minutes to configure these settings helps create a more polished experience whenever your content is shared online.

Optimize Performance

Performance plays a major role in how visitors perceive your website. A page that loads quickly feels more responsive and encourages users to continue exploring your content. As you customize your landing page, keep unnecessary JavaScript to a minimum, optimize static assets, and avoid loading resources that aren't immediately needed.

Even small improvements, such as reducing image sizes or simplifying animations, can noticeably improve loading speed. Before deploying your project, test the page under different network conditions to ensure it performs well for all visitors.

Improve Core Web Vitals

Core Web Vitals are Google's metrics for measuring real-world user experience. They evaluate how quickly your main content appears, how responsive the page feels during interactions, and whether elements remain stable as the page loads. Monitoring these metrics throughout development helps identify potential issues before they affect users.

Tools such as Lighthouse and PageSpeed Insights provide detailed reports that can help you improve loading performance and responsiveness. A landing page with strong Core Web Vitals not only creates a better experience for visitors but can also contribute to improved search rankings.

How to Expand Your Marketing Website

A landing page is often just the beginning of a complete marketing website. As your product grows, you'll likely need additional pages that provide more information, improve navigation, and create a better experience for your visitors. Common additions include Blog, Blog Details, Pricing, FAQ, Changelog, Contact, Integration, Error, and About Us pages.

Building these pages with a consistent design system helps maintain a unified look and feel across your entire website while reducing development time. Reusing layouts and components also makes your project easier to maintain as it evolves.

If you're looking to expand your website beyond a single landing page, explore the collection of production-ready Shadcn website pages, built with React, Next.js, Tailwind CSS, and shadcn/ui.

Live Preview:

Conclusion

In this tutorial, we built a complete marketing landing page using Next.js, shadcn/ui, Tailwind CSS, and reusable Shadcn Space blocks. Starting from a fresh project, we assembled a production-ready page by combining sections such as the Hero, Features, Product Showcase, Testimonials, Pricing, FAQ, Call-to-Action, and Footer.

Because every block is added as standard React source code, you're free to customize the content, layout, styling, and functionality to match your own product and branding. Whether you're building a SaaS application, a startup website, an AI product, an agency site, or a developer tool, the same approach can be adapted to your requirements.

A marketing landing page is just the foundation of your online presence. As your product grows, you can continue expanding your website with additional marketing pages while maintaining a consistent design system and development workflow.

I hope this guide has helped you understand how to quickly build a modern, responsive marketing landing page using reusable components. Feel free to experiment with different block combinations, personalize the design, and create a website that best represents your product.

Appreciation: I wrote this article with the help of Mihir Koshti (Sr. Full Stack Developer) – Connect on LinkedIn.

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.