UI / UX tips

Quick and easy-to-implement tips to improve your design.

Subscribe to our newsletter to receive more UI / UX tips.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Policy


    Note: All the examples below are built with MDB UI KIT - a free component library. You can download it by clicking on the button below.

    Download MDB UI KIT

    Tip 1

    Don't

    Avoid presenting too much information to the user at once, especially when it lacks a clear hierarchy and all actions seem equally important. In the example below there is a navbar with 4 links that look identical, although only one is really crucial. It takes extra effort on the part of the user to find it.

            
                
    
                        <!-- Navbar -->
                        <nav class="navbar navbar-expand-lg navbar-light bg-white rounded-5">
                          <!-- Container wrapper -->
                          <div class="container-fluid  d-flex align-items-center">
                            <!-- Navbar brand -->
                            <a class="navbar-brand me-2" href="https://mdbgo.com/">
                              <img src="https://easy-data.mdbgo.io/img/logo.png" height="27" alt="" loading="lazy" style="margin-top: -1px" />
                            </a>
                        
                            <!-- Left links -->
                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                              <li class="nav-item">
                                <a class="nav-link mt-1" href="#"><strong>Your due:</strong> <u>$100</u></a>
                              </li>
                            </ul>
                            <!-- Left links -->
                        
                            <div class="d-flex align-items-center">
                              <button type="button" class="btn btn-link px-3 me-1">
                                Dashboard
                              </button>
                              <button type="button" class="btn btn-link px-3 me-1">
                                Pay
                              </button>
                              <button type="button" class="btn btn-link px-3 me-1">
                                Account history
                              </button>
                              <button type="button" class="btn btn-link px-3 me-1">
                                Settings
                              </button>
                            </div>
                            <!-- Collapsible wrapper -->
                          </div>
                          <!-- Container wrapper -->
                        </nav>
                        <!-- Navbar -->
    
                      
            
        

    Do

    Hierarchy is fundamental. The user should always know what the main action is expected of him. Don't add more than one key action per view and make it stand out from other interface elements.

    In this case, such a key action is the "pay" option, which has been changed from a simple link into a distinctive button. The remaining links have been placed in the dropdown menu ("more") as additional options.

            
                
    
                        <!-- Navbar -->
                        <nav class="navbar navbar-expand-lg navbar-light bg-white rounded-5">
                          <!-- Container wrapper -->
                          <div class="container-fluid  d-flex align-items-center">
                            <!-- Navbar brand -->
                            <a class="navbar-brand me-2" href="https://mdbgo.com/">
                              <img src="https://easy-data.mdbgo.io/img/logo.png" height="27" alt="" loading="lazy" style="margin-top: -1px" />
                            </a>
                        
                            <!-- Left links -->
                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                              <li class="nav-item">
                                <a class="nav-link mt-1" href="#"><strong>Your due:</strong> <u>$100</u></a>
                              </li>
                            </ul>
                            <!-- Left links -->
                        
                            <div class="d-flex align-items-center">
                              <div class="dropdown">
                                <button class="btn btn-link btn-rounded dropdown-toggle" type="button" id="dropdownMenuButton"
                                  data-mdb-toggle="dropdown" aria-expanded="false">
                                  More
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                                  <li><a class="dropdown-item" href="#">Dashboard</a></li>
                                  <li><a class="dropdown-item" href="#">Account history</a></li>
                                  <li><a class="dropdown-item" href="#">Settings</a></li>
                                </ul>
                              </div>
                        
                              <button type="button" class="btn btn-primary btn-rounded ms-1">
                                Pay
                              </button>
                            </div>
                            <!-- Collapsible wrapper -->
                          </div>
                          <!-- Container wrapper -->
                        </nav>
                        <!-- Navbar -->
    
                      
            
        

    Tip 2

    Don't

    Don't overuse the borders. While they seem like a natural solution for separating individual elements, they nevertheless give the interface some heaviness. As a result, the card below seems messy and bulky.

    Team
            
                
    
                    <!-- Card -->
                    <div class="border rounded-6 bg-white">
                      <!-- Header -->
                      <div class="p-3 border-bottom">
                        <h5 class="mb-0">Team</h5>
                      </div>
                    
                      <!-- Search -->
                      <div class="px-3 py-3 border-bottom">
                        <div class="input-group flex-nowrap">
                          <span class="input-group-text"><i class="fas fa-search"></i></span>
                          <input type="search" class="form-control" placeholder="Search" aria-label="Search"
                            aria-describedby="addon-wrapping" />
                        </div>
                      </div>
                    
                      <!-- List -->
                      <ul class="
                              list-group list-group-flush
                              border-bottom
                              list-group-item-action
                              ">
                        <!-- Item -->
                        <button type="button" class="
                                    list-group-item
                                    list-group-item-action
                                    ">
                          <span>Michal Szymanski</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                    list-group-item
                                    list-group-item-action
                                    ">
                          <span>Dawid Adach</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                    list-group-item
                                    list-group-item-action
                                    ">
                          <span>Filip Kapusta</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                    list-group-item
                                    list-group-item-action
                                    ">
                          <span>Adam Jakubowski</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                    list-group-item
                                    list-group-item-action
                                    ">
                          <span>Mateusz Leciejewski</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                    list-group-item
                                    list-group-item-action
                                    ">
                          <span>Marta Szymanska</span>
                        </button>
                      </ul>
                      <!-- Footer -->
                      <div class="p-3 text-end">
                        <button type="button" class="btn btn-primary btn-rounded">Add</button>
                      </div>
                    </div>
                    <!-- Card -->
    
                  
            
        

    Do

    Instead, use a combination of shadows and gray backgrounds. Additionally, increase the space between the elements, thanks to which the design will be able to "breathe".

    Team
            
                
    
                    <!-- Card -->
                    <div class="shadow-4 bg-white rounded-6 overflow-hidden">
                      <!-- Header -->
                      <div class="p-3 py-4">
                        <h5 class="mb-0">Team</h5>
                      </div>
                    
                      <!-- Search -->
                      <div class="px-3 pb-2">
                        <input type="search" class="form-control border-0 rounded-3 py-2 px-3" style="background-color: hsl(0, 0%, 95%)"
                          placeholder="Search" aria-label="Search" aria-describedby="addon-wrapping" />
                      </div>
                    
                      <!-- List -->
                      <ul class="list-group list-group-flush list-group-item-action bg-white px-3 my-3">
                        <!-- Item -->
                        <button type="button" class="
                                                    list-group-item
                                                    rounded-4
                                                    list-group-item-action
                                                    border-0
                                                    mb-2
                                                    ">
                          <span>Michal Szymanski</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                                    list-group-item
                                                    rounded-4
                                                    list-group-item-action
                                                    border-0
                                                    mb-2
                                                    ">
                          <span>Dawid Adach</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                                    list-group-item
                                                    rounded-4
                                                    list-group-item-action
                                                    border-0
                                                    mb-2
                                                    ">
                          <span>Filip Kapusta</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                                    list-group-item
                                                    rounded-4
                                                    list-group-item-action
                                                    border-0
                                                    mb-2
                                                    ">
                          <span>Adam Jakubowski</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                                    list-group-item
                                                    rounded-4
                                                    list-group-item-action
                                                    border-0
                                                    mb-2
                                                    ">
                          <span>Mateusz Leciejewski</span>
                        </button>
                        <!-- Item -->
                        <button type="button" class="
                                                    list-group-item
                                                    rounded-4
                                                    list-group-item-action
                                                    mb-2
                                                    ">
                          <span>Marta Szymanska</span>
                        </button>
                      </ul>
                      <!-- Footer -->
                      <div class="p-3 text-end" style="background-color: hsl(0, 0%, 98%)">
                    
                        <button type="button" class="btn btn-primary btn-rounded">
                          Add
                        </button>
                      </div>
                    </div>
                    <!-- Card -->
    
                  
            
        

    Tip 3

    Don't

    Avoid having more than one action button having the same color and weight. This makes it difficult for the user to easily identify the most important action.

    Do

    User should be able to easily identify which button is the most important (primary button), which is less important (secondary button) and which presents completely additional information (tertiary button).

    Elements with strong, filled backgrounds and shadows attract attention the most, which is why button primary is built in this way.

    A delicate background without shadows is less engaging, so it is well suited for button secondary.

    The lack of background and shadow makes the element the least visible. These features characterize the button tertiary.


    Tip 4

    Don't

    Non-rectangular, unlabeled buttons are more difficult to process and take longer for the user to understand what they mean.

            
                
      
                  <div class="card">
                    <div class="card-body">
                      <form>
                        <!-- 2 column grid layout with text inputs for the first and last names -->
                        <div class="row mb-4">
                          <div class="col">
                            <div class="form-outline">
                              <input type="text" id="form3Example1" class="form-control" />
                              <label class="form-label" for="form3Example1">First name</label>
                            </div>
                          </div>
                          <div class="col">
                            <div class="form-outline">
                              <input type="text" id="form3Example2" class="form-control" />
                              <label class="form-label" for="form3Example2">Last name</label>
                            </div>
                          </div>
                        </div>
                      
                        <!-- Email input -->
                        <div class="form-outline mb-4">
                          <input type="email" id="form3Example3" class="form-control" />
                          <label class="form-label" for="form3Example3">Email address</label>
                        </div>
                      
                        <!-- Password input -->
                        <div class="form-outline mb-4">
                          <input type="password" id="form3Example4" class="form-control" />
                          <label class="form-label" for="form3Example4">Password</label>
                        </div>
                      
                        <div class="text-center">
                          <!-- Submit button -->
                        <button type="submit" class="btn btn-primary btn-floating btn-lg mb-4"><i class="fas fa-sign-in-alt"></i></button>
                        </div>
          
                      </form>
                    </div>
                  </div>
      
                  
            
        

    Do

    Classic, rectangular buttons with appropriate text are simply the best solution.

            
                
      
                  <div class="card">
                    <div class="card-body">
                      <form>
                        <!-- 2 column grid layout with text inputs for the first and last names -->
                        <div class="row mb-4">
                          <div class="col">
                            <div class="form-outline">
                              <input type="text" id="form3Example1" class="form-control" />
                              <label class="form-label" for="form3Example1">First name</label>
                            </div>
                          </div>
                          <div class="col">
                            <div class="form-outline">
                              <input type="text" id="form3Example2" class="form-control" />
                              <label class="form-label" for="form3Example2">Last name</label>
                            </div>
                          </div>
                        </div>
                      
                        <!-- Email input -->
                        <div class="form-outline mb-4">
                          <input type="email" id="form3Example3" class="form-control" />
                          <label class="form-label" for="form3Example3">Email address</label>
                        </div>
                      
                        <!-- Password input -->
                        <div class="form-outline mb-4">
                          <input type="password" id="form3Example4" class="form-control" />
                          <label class="form-label" for="form3Example4">Password</label>
                        </div>
                      
                        <div class="text-center">
                          <!-- Submit button -->
                        <button type="submit" class="btn btn-primary btn-block mb-4">Sign up</button>
                        </div>
          
                      </form>
                    </div>
                  </div>  
      
                  
            
        

    Tip 5

    Don't

    Don't overdo the labels. A database-like schema can be tempting because it uses a simple label: value formula. However, such a UI makes it impossible to apply a clear hierarchy because all the elements seem to be equally important.

    ...
    Product name Mountain bike
    Manufacturer Cannondale Bikes
    Year of production 2010
    Price $920
    Color Black
    Weight 27 kg
    Gender Men
    Seller Sandra C Stuart
    Contact 503-396-0094
            
                
      
                  <div class="card">
                    <img
                      src="https://mdbootstrap.com/img/new/ecommerce/horizontal/062.jpg"
                      class="card-img-top"
                      alt="..."
                    />
          
                    <div class="card-body">
          
                      <table class="table">
                        <tbody>
                          <tr>
                            <td class="fw-bold">Product name</td>
                            <td>Mountain bike</td>
                          </tr>
                          <tr>
                            <td class="fw-bold">Manufacturer</td>
                            <td>Cannondale Bikes</td>
                          </tr>
                          <tr>
                            <td class="fw-bold">Year of production</td>
                            <td>2010</td>
                          </tr>
                          <tr>
                            <td class="fw-bold">Price</td>
                            <td>$920</td>
                          </tr>
                          <tr>
                            <td class="fw-bold">Color</td>
                            <td>Black</td>
                          </tr>
                          <tr>
                            <td class="fw-bold">Weight</td>
                            <td>27 kg</td>
                          </tr>
                          <tr>
                            <td class="fw-bold">Gender</td>
                            <td>Men</td>
                          </tr>
                          <tr>
                            <td class="fw-bold">Seller</td>
                            <td>Sandra C Stuart</td>
                          </tr>
                          <tr>
                            <td class="fw-bold">Contact</td>
                            <td>503-396-0094</td>
                          </tr>
                        </tbody>
                      </table>
          
                    </div>
                  </div>
      
                  
            
        

    Do

    Usually, it's not the labels that are most important, but the data. And in the vast majority of cases, the data does not require a label because it is clear enough on its own.

    Take advantage of this trait and give up labels wherever possible. At the same time, impose a clear hierarchy so that the user can easily identify the most important information.

    ...

    Mountain bike - 12 years old

    $920

    Cannondale Bikes


    27 kg Black For men

    Seller

    Sandra C Stuart

    503-396-0094

            
                
      
                  <div class="card">
                    <img
                      src="https://mdbootstrap.com/img/new/ecommerce/horizontal/062.jpg"
                      class="card-img-top"
                      alt="..."
                    />
          
                    <div class="card-body pb-2">
                      <p class="fw-bold text-muted small text-uppercase mb-1">
                        Mountain bike - 12 years old
                      </p>
                      <p class="fw-bold h1 mb-1">$920</p>
                      <p class="text-muted mb-0">Cannondale Bikes</p>
                    </div>
          
                    <hr class="hr my-4">
          
                    <div class="card-body d-flex justify-content-around pt-2">
                      <span
                        ><i class="fas fa-weight-hanging me-2 text-muted"></i>
                        <strong class="me-1 text-muted">27 kg</strong
                        ></span
                      >
          
                      <span
                        ><i class="fas fa-palette me-2 text-muted"></i>
                        <strong class="me-1 text-muted">Black</strong
                        ></span
                      >
                      <span
                        ><i class="fas fa-male me-2 text-muted"></i>
                        <strong class="me-1 text-muted">For men</strong
                        ></span
                      >
                    </div>
                    <div class="card-body bg-light">
                      <p class="text-uppercase text-muted small fw-bold">Seller</p>
                      <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                          <img
                            src="https://mdbootstrap.com/img/new/avatars/6.jpg"
                            class="rounded-circle"
                            alt=""
                            style="width: 45px; height: 45px"
                          />
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <p class="fw-bold mb-1">Sandra C Stuart</p>
                          <p class="text-muted mb-0">503-396-0094</p>
                        </div>
                      </div>
                    </div>
                  </div>
      
                  
            
        

    Tip 6

    Don't

    Tables and data do not have to be presented in a monotonous and boring way. If possible, avoid the painfully standardized appearance as in the example below.

    Name E-mail Title Department Status Position Actions
    John Doe john.doe@gmail.com Software engineer IT department Active Senior
    Alex Ray alex.ray@gmail.com Consultant Finance Onboarding Junior
    Kate Hunington kate.hunington@gmail.com Designer UI/UX Awaiting Senior
            
                
      
                  <table class="table">
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>E-mail</th>
                        <th>Title</th>
                        <th>Department</th>
                        <th>Status</th>
                        <th>Position</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>John Doe</td>
                        <td>john.doe@gmail.com</td>
                        <td>Software engineer</td>
                        <td>IT department</td>
                        <td>Active</td>
                        <td>Senior</td>
                        <td>
                          <button type="button" class="btn btn-primary btn-sm">
                            Edit
                          </button>
                        </td>
                      </tr>
                      <tr>
                        <td>Alex Ray</td>
                        <td>alex.ray@gmail.com</td>
                        <td>Consultant</td>
                        <td>Finance</td>
                        <td>Onboarding</td>
                        <td>Junior</td>
                        <td>
                          <button type="button" class="btn btn-primary btn-sm">
                            Edit
                          </button>
                        </td>
                      </tr>
                      <tr>
                        <td>Kate Hunington</td>
                        <td>kate.hunington@gmail.com</td>
                        <td>Designer</td>
                        <td>UI/UX</td>
                        <td>Awaiting</td>
                        <td>Senior</td>
                        <td>
                          <button type="button" class="btn btn-primary btn-sm">
                            Edit
                          </button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
      
                  
            
        

    Do

    While this is not always achievable, it is a good idea to present your data in a variety of ways that will additionally dictate a hierarchy of the individual items.

    However, be careful not to overdo it with diversity. The individual elements should be consistent with each other and not cause confusion for the user.

    Name Title Status Position Actions

    John Doe

    john.doe@gmail.com

    Software engineer

    IT department

    Active Senior

    Alex Ray

    alex.ray@gmail.com

    Consultant

    Finance

    Onboarding Junior

    Kate Hunington

    kate.hunington@gmail.com

    Designer

    UI/UX

    Awaiting Senior
            
                
      
                  <div class="shadow-4 rounded-7 table-responsive">
                    <table class="table align-middle mb-0 bg-white">
                      <thead class="bg-light">
                        <tr>
                          <th>Name</th>
                          <th>Title</th>
                          <th>Status</th>
                          <th>Position</th>
                          <th>Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <img
                                   src="https://mdbootstrap.com/img/new/avatars/8.jpg"
                                   alt=""
                                   style="width: 45px; height: 45px"
                                   class="rounded-circle"
                                   />
                              <div class="ms-3">
                                <p class="fw-bold mb-1">John Doe</p>
                                <p class="text-muted mb-0">john.doe@gmail.com</p>
                              </div>
                            </div>
                          </td>
                          <td>
                            <p class="fw-bold mb-1">Software engineer</p>
                            <p class="text-muted mb-0">IT department</p>
                          </td>
                          <td>
                            <span class="badge badge-success rounded-pill">Active</span>
                          </td>
                          <td>Senior</td>
                          <td>
                            <button type="button" class="btn btn-link btn-sm btn-rounded">
                              Edit
                            </button>
                          </td>
                        </tr>
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <img
                                   src="https://mdbootstrap.com/img/new/avatars/6.jpg"
                                   class="rounded-circle"
                                   alt=""
                                   style="width: 45px; height: 45px"
                                   />
                              <div class="ms-3">
                                <p class="fw-bold mb-1">Alex Ray</p>
                                <p class="text-muted mb-0">alex.ray@gmail.com</p>
                              </div>
                            </div>
                          </td>
                          <td>
                            <p class="fw-bold mb-1">Consultant</p>
                            <p class="text-muted mb-0">Finance</p>
                          </td>
                          <td>
                            <span class="badge badge-primary rounded-pill">Onboarding</span>
                          </td>
                          <td>Junior</td>
                          <td>
                            <button
                                    type="button"
                                    class="btn btn-link btn-rounded btn-sm fw-bold"
                                    data-mdb-ripple-color="dark"
                                    >
                              Edit
                            </button>
                          </td>
                        </tr>
                        <tr>
                          <td>
                            <div class="d-flex align-items-center">
                              <img
                                   src="https://mdbootstrap.com/img/new/avatars/7.jpg"
                                   class="rounded-circle"
                                   alt=""
                                   style="width: 45px; height: 45px"
                                   />
                              <div class="ms-3">
                                <p class="fw-bold mb-1">Kate Hunington</p>
                                <p class="text-muted mb-0">kate.hunington@gmail.com</p>
                              </div>
                            </div>
                          </td>
                          <td>
                            <p class="fw-bold mb-1">Designer</p>
                            <p class="text-muted mb-0">UI/UX</p>
                          </td>
                          <td>
                            <span class="badge badge-warning rounded-pill">Awaiting</span>
                          </td>
                          <td>Senior</td>
                          <td>
                            <button
                                    type="button"
                                    class="btn btn-link btn-rounded btn-sm fw-bold"
                                    data-mdb-ripple-color="dark"
                                    >
                              Edit
                            </button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
      
                  
            
        

    Tip 7

    Don't

    In "Call to action" buttons, too general phrases such as "Next" or "OK" can be confusing to the user and are better avoided.

    Sign up for free

            
                
      
                  <div class="card">
                    <div class="card-body">
                      <h4 class="mb-4 fw-bold">Sign up for free</h4>
                      <form>
                      
                        <!-- Email input -->
                        <div class="form-outline mb-4">
                          <input type="email" id="formExampleTip7Bad" class="form-control" />
                          <label class="form-label" for="formExampleTip7Bad">Your email address</label>
                        </div>
                      
                        <div class="text-center">
                          <!-- Submit button -->
                        <button type="submit" class="btn btn-primary w-100">Next</button>
                        </div>
          
                      </form>
                    </div>
                  </div>
      
                  
            
        

    Do

    "Call to action" should contain precise information for the user what to expect as a result of clicking the button. Thanks to this, you will minimize the user's mental effort, who will not have to wonder what should happen next.

    Sign up for free

            
                
      
                  <div class="card">
                    <div class="card-body">
                      <h4 class="mb-4 fw-bold">Sign up for free</h4>
                      <form>
                      
                        <!-- Email input -->
                        <div class="form-outline mb-4">
                          <input type="email" id="formExampleTip7Good" class="form-control" />
                          <label class="form-label" for="formExampleTip7Good">Your email address</label>
                        </div>
                      
                        <div class="text-center">
                          <!-- Submit button -->
                        <button type="submit" class="btn btn-primary w-100">Create account</button>
                        </div>
          
                      </form>
                    </div>
                  </div>
      
                  
            
        

    Tip 8

    Don't

    Get creative even with boring components like radio buttons. It does not always have to be a list like in the example below.

    Choose an option


            
                
      
                  <div>
                    <p>Choose an option</p>
                    <hr>
                    <div class="form-check mb-2">
                      <input class="form-check-input" type="radio" name="defaultGroup" id="radioDefault1" />
                      <label class="form-check-label" for="radioDefault1"> Basic - 1 item ($279/year) </label>
                    </div>
                  
                    <div class="form-check mb-2">
                      <input class="form-check-input" type="radio" name="defaultGroup" id="radioDefault2" checked />
                      <label class="form-check-label" for="radioDefault2"> Essential - 3 items ($499/year) </label>
                    </div>
                    <div class="form-check mb-2">
                      <input class="form-check-input" type="radio" name="defaultGroup" id="radioDefault3" />
                      <label class="form-check-label" for="radioDefault3"> Advanced - 7 items ($799/year) </label>
                    </div>
                    <div class="form-check mb-2">
                      <input class="form-check-input" type="radio" name="defaultGroup" id="radioDefault4" />
                      <label class="form-check-label" for="radioDefault4"> Entreprise - 20 items ($999/year) </label>
                    </div>
                  </div>
      
                  
            
        

    Do

    A bit of creativity with a little help from CSS can turn a monotonous list of options into aesthetically pleasing and interesting selection cards.

    Choose an option


            
                
      
                  <div id="radio-cards">
                    <p class="h4">Choose an option</p>
                    <hr class="my-5" style="background-color: hsl(0, 0%, 65%)" />
                    <div class="row gx-lg-5">
                      <div class="col-md-3 mb-4">
                        <label>
                          <input id="radioDefault1" type="radio" name="defaultGroup" class="card-input-element" />
                    
                          <div class="card card-input">
                            <div class="card-body">
                              <p class="text-uppercase fw-bold text-muted">Basic</p>
                              <p class="h2 fw-bold">1 item</p>
                              <p class="mb-0">$279 / year</p>
                            </div>
                          </div>
                        </label>
                      </div>
                      <div class="col-md-3 mb-4">
                        <label>
                          <input id="radioDefault2" type="radio" name="defaultGroup" class="card-input-element" checked />
                    
                          <div class="card card-input">
                            <div class="card-body">
                              <p class="text-uppercase fw-bold text-muted">Essential</p>
                              <p class="h2 fw-bold">3 items</p>
                              <p class="mb-0">$499 / year</p>
                            </div>
                          </div>
                        </label>
                      </div>
                      <div class="col-md-3 mb-4">
                        <label>
                          <input id="radioDefault3" type="radio" name="defaultGroup" class="card-input-element" />
                    
                          <div class="card card-input">
                            <div class="card-body">
                              <p class="text-uppercase fw-bold text-muted">Advanced</p>
                              <p class="h2 fw-bold">7 items</p>
                              <p class="mb-0">$799 / year</p>
                            </div>
                          </div>
                        </label>
                      </div>
                      <div class="col-md-3 mb-4">
                        <label>
                          <input id="radioDefault4" type="radio" name="defaultGroup" class="card-input-element" />
                    
                          <div class="card card-input">
                            <div class="card-body">
                              <p class="text-uppercase fw-bold text-muted">Entreprise</p>
                              <p class="h2 fw-bold">20 items</p>
                              <p class="mb-0">$999 / year</p>
                            </div>
                          </div>
                        </label>
                      </div>
                    </div>
                  </div>
      
                  
            
        
            
                
      
                  #radio-cards label {
                    width: 100%;
                  }
        
                  #radio-cards .card-input-element {
                    display: none;
                  }
        
                  #radio-cards .card-input:hover {
                    cursor: pointer;
                    background-color: hsl(144, 60%, 95.9%);
                    -webkit-transition: 0.5s;
                    -o-transition: 0.5s;
                    transition: 0.5s;
                  }
        
                  #radio-cards .card-input-element:checked + .card-input {
                    border: 1px solid hsl(144, 100%, 35.9%);
                  }
      
                  
            
        

    Tip 9

    Don't

    It is true that the CTA buttons are the most important element of the interface, but you still need to be moderate in emphasizing their importance.

    For example, by exaggerating the size, we can easily disrupt the hierarchy, which will make the user's attention completely absorbed by the absolutely dominant element (in the example below by the huge CTA button). This can create a so-called "banner blindness" effect that will make your heading and its message not noticeable anymore.

    We can offer you the best price in the market

    But you probably won't notice it because the big button below grabs your attention.

            
                
      
                  <div class="card rounded-6">
                    <div class="card-body text-center">
          
                      <h5>We can offer you the best price in the market</h5>
                      <p>But you probably won't notice it because the big button below grabs your attention.</p>
                      <button type="button" class="btn btn-primary btn-lg py-4 px-5">Look at me now!</button>
          
                    </div>
                  </div>
      
                  
            
        

    Do

    Look for the golden mean and keep in mind the hierarchy of elements. Thanks to this, the user looking at your interface will easily find the path he should follow.

    We can offer you the best price in the market

    And you will notice it because nothing distracts you.

            
                
      
                  <div class="card rounded-6">
                    <div class="card-body text-center">
          
                      <h3 class="mb-3">We can offer you <span class="text-primary">the best price</span> in the market</h3>
                      <p class="mb-4">And you will notice it because nothing distracts you.</p>
                      <button type="button" class="btn btn-primary">Learn more</button>
          
                    </div>
                  </div>
      
                  
            
        

    Tip 10

    Don't

    If you want to maintain adequate contrast, white text on a dark background is not the only solution. This way you will make the elements look really heavy.

    Additionally, due to a very dark background, they can attract more user attention than you planned. In the example below, you can see badges, which by definition are a secondary elements, but because of their dark and heavy colors, they attract more attention than they should.

    Contrast ratio
    John Doe
    john.doe@gmail.com
    Active 5.35 (AA)
    Alex Ray
    alex.ray@gmail.com
    Onboarding 5.94 (AA)
    Kate Hunington
    kate.hunington@gmail.com
    Awaiting 6.27 (AA)
    Bob Dorsley
    bob.dorsley@gmail.com
    Removed 6.07 (AA)
            
                
      
                  <table class="table">
                    <thead>
                      <tr>
                        <th scope="col"></th>
                        <th scope="col"></th>
                        <th scope="col">Contrast ratio</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="fw-bold">John Doe</div>
                          <div class="text-muted">john.doe@gmail.com</div>
                        </td>
                        <td><span class="badge rounded-pill" style="background-color: #1a7958;">Active</span></td>
                        <td><span>5.35 (<strong>AA</strong>)</span></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="fw-bold">Alex Ray</div>
                          <div class="text-muted">alex.ray@gmail.com</div>
                        </td>
                        <td><span class="badge rounded-pill" style="background-color: #3263ae;">Onboarding</span></td>
                        <td><span>5.94 (<strong>AA</strong>)</span></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="fw-bold">Kate Hunington</div>
                          <div class="text-muted">kate.hunington@gmail.com</div>
                        </td>
                        <td><span class="badge rounded-pill" style="background-color: #845702;">Awaiting</span></td>
                        <td><span>6.27 (<strong>AA</strong>)</span></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="fw-bold">Bob Dorsley</div>
                          <div class="text-muted">bob.dorsley@gmail.com</div>
                        </td>
                        <td><span class="badge rounded-pill" style="background-color: #c6042e;">Removed</span></td>
                        <td><span>6.07 (<strong>AA</strong>)</span></td>
                      </tr>
                    </tbody>
                  </table>
      
                  
            
        

    Do

    We can resolve this conflict by inverting the contrast. By using a similar hue but in different shades (lighter for background and darker for text) we can achieve an effect that is both light and visually attractive, while at the same time providing a strong enough contrast.

    Contrast ratio
    John Doe
    john.doe@gmail.com
    Active 5.73 (AA)
    Alex Ray
    alex.ray@gmail.com
    Onboarding 5.6 (AA)
    Kate Hunington
    kate.hunington@gmail.com
    Awaiting 6.33 (AA)
    Bob Dorsley
    bob.dorsley@gmail.com
    Removed 5.41 (AA)
            
                
      
                  <table class="table">
                    <thead>
                      <tr>
                        <th scope="col"></th>
                        <th scope="col"></th>
                        <th scope="col">Contrast ratio</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="fw-bold">John Doe</div>
                          <div class="text-muted">john.doe@gmail.com</div>
                        </td>
                        <td><span class="badge badge-success rounded-pill">Active</span></td>
                        <td><span>5.73 (<strong>AA</strong>)</span></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="fw-bold">Alex Ray</div>
                          <div class="text-muted">alex.ray@gmail.com</div>
                        </td>
                        <td><span class="badge badge-primary rounded-pill">Onboarding</span></td>
                        <td><span>5.6 (<strong>AA</strong>)</span></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="fw-bold">Kate Hunington</div>
                          <div class="text-muted">kate.hunington@gmail.com</div>
                        </td>
                        <td><span class="badge badge-warning rounded-pill">Awaiting</span></td>
                        <td><span>6.33 (<strong>AA</strong>)</span></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="fw-bold">Bob Dorsley</div>
                          <div class="text-muted">bob.dorsley@gmail.com</div>
                        </td>
                        <td><span class="badge badge-danger rounded-pill">Removed</span></td>
                        <td><span>5.41 (<strong>AA</strong>)</span></td>
                      </tr>
                    </tbody>
                  </table>
      
                  
            
        

    Tip 11

    Don't

    Avoid mixing filled icons with outlined icons as this creates the impression of inconsistency and clutter.

            
                
      
                    <!-- Navbar -->
                    <nav class="navbar navbar-expand-lg navbar-light bg-white rounded-5 py-3">
                      <!-- Container wrapper -->
                      <div class="container-fluid">
                        <!-- Toggle button -->
                        <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExampleTip11Bad"
                          aria-controls="navbarExampleTip11Bad" aria-expanded="false" aria-label="Toggle navigation">
                          <i class="fas fa-bars"></i>
                        </button>
                    
                        <!-- Collapsible wrapper -->
                        <div class="collapse navbar-collapse" id="navbarExampleTip11Bad">
                          <!-- Navbar brand -->
                          <a class="navbar-brand mt-2 mt-lg-0" href="#">
                            <img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height="20" alt="MDB Logo"
                              loading="lazy" />
                          </a>
                        </div>
                        <!-- Collapsible wrapper -->
                    
                        <!-- Right elements -->
                        <div class="d-flex align-items-center">
    
                          <a class="text-reset me-3" href="#">
                            <i class="fas fa-shopping-cart"></i>
                          </a>
                          
                          <a class="text-reset me-3" href="#">
                            <i class="far fa-bell"></i>
                          </a>
                          
                          <a class="text-reset me-3" href="#">
                            <i class="fas fa-user"></i>
                          </a>
                          
                          <a class="text-reset me-3" href="#">
                            <i class="far fa-flag"></i>
                          </a>
                    
                    
                        </div>
                        <!-- Right elements -->
                      </div>
                      <!-- Container wrapper -->
                    </nav>
                    <!-- Navbar -->
      
                  
            
        

    Do

    Always be consistent in your design and use the same style throughout the project.

            
                
      
                    <!-- Navbar -->
                    <nav class="navbar navbar-expand-lg navbar-light bg-white rounded-5 py-3">
                      <!-- Container wrapper -->
                      <div class="container-fluid">
                        <!-- Toggle button -->
                        <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExampleTip11Good"
                          aria-controls="navbarExampleTip11Good" aria-expanded="false" aria-label="Toggle navigation">
                          <i class="fas fa-bars"></i>
                        </button>
                    
                        <!-- Collapsible wrapper -->
                        <div class="collapse navbar-collapse" id="navbarExampleTip11Good">
                          <!-- Navbar brand -->
                          <a class="navbar-brand mt-2 mt-lg-0" href="#">
                            <img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height="20" alt="MDB Logo"
                              loading="lazy" />
                          </a>
                        </div>
                        <!-- Collapsible wrapper -->
                    
                        <!-- Right elements -->
                        <div class="d-flex align-items-center">
    
                          <a class="text-reset me-3" href="#">
                            <i class="fas fa-shopping-cart"></i>
                          </a>
                          
                          <a class="text-reset me-3" href="#">
                            <i class="fas fa-bell"></i>
                          </a>
                          
                          <a class="text-reset me-3" href="#">
                            <i class="fas fa-user"></i>
                          </a>
                          
                          <a class="text-reset me-3" href="#">
                            <i class="fas fa-flag"></i>
                          </a>
                    
                    
                        </div>
                        <!-- Right elements -->
                      </div>
                      <!-- Container wrapper -->
                    </nav>
                    <!-- Navbar -->
      
                  
            
        

    Tip 12

    Don't

    Bullets are useful, but can also seem dull and bland.

    Top quality
    open-source UI Kits

    • 700+ UI components & templates
    • Super simple, 1 minute installation
    • All consistent, well-documented, reliable
    • MIT license - free for personal& commercial use
    Get started
            
                
      
                    <div class="card p-4 rounded-7">
                      <div class="card-body">
                        <h1 class="fw-bold">
                          Top quality <br />
                          <span class="text-primary">open-source UI Kits</span>
                        </h1>
                    
                        <ul class="my-5 text-muted">
                          <li class="mb-3">
                            700+ UI components & templates
                          </li>
                          <li class="mb-3">Super simple, 1 minute installation</li>
                          <li class="mb-3">All consistent, well-documented, reliable</li>
                          <li class="">MIT license - free for personal& commercial use</li>
                        </ul>
                    
                        <a
                          class="btn btn-primary btn-lg me-3"
                          href="/docs/standard/getting-started/installation/"
                          role="button"
                          style="width: 202px"
                          >Get started</a
                          >
                      </div>
                    </div>
      
                  
            
        

    Do

    Use icons to add some life to your design. Also, make sure that the icons are color consistent with the rest of the surrounding interface.

    Top quality
    open-source UI Kits

    • 700+ UI components & templates
    • Super simple, 1 minute installation
    • All consistent, well-documented, reliable
    • MIT license - free for personal& commercial use
    Get started
            
                
      
                  <div class="card p-4 rounded-7">
                    <div class="card-body">
                      <h1 class="fw-bold">
                        Top quality <br />
                        <span class="text-primary">open-source UI Kits</span>
                      </h1>
                  
                      <ul class="list-unstyled my-5 text-muted">
                        <li class="mb-3">
                          <i class="fas fa-check text-primary me-3"></i>700+ UI components & templates
                        </li>
                        <li class="mb-3"><i class="fas fa-check text-primary me-3"></i>Super simple, 1 minute installation</li>
                        <li class="mb-3"><i class="fas fa-check text-primary me-3"></i>All consistent, well-documented, reliable</li>
                        <li class=""><i class="fas fa-check text-primary me-3"></i>MIT license - free for personal& commercial use</li>
                      </ul>
                  
                      <a
                         class="btn btn-primary btn-lg me-3"
                         href="/docs/standard/getting-started/installation/"
                         role="button"
                         style="width: 202px"
                         >Get started</a
                        >
                    </div>
                  </div>
      
                  
            
        

    Tip 13

    Don't

    Tooltips are useful, but don't use them for information that should be immediately visible to the user.

            
                
      
                  <div class="card rounded-7">
                    <div class="card-body">
                  
                      <form>
                        <!-- Email input -->
                        <div class="form-outline mb-4">
                          <input type="email" id="formExampleEmailTip13Bad" class="form-control" />
                          <label class="form-label" for="formExampleEmailTip13Bad">Email address</label>
                        </div>
                      
                        <div class="d-flex align-items-center mb-4">
                          <!-- Password input -->
                          <div class="form-outline w-100">
                            <input type="password" id="formExamplePasswordTip13Bad" class="form-control" />
                            <label class="form-label" for="formExamplePasswordTip13Bad">Password</label>
                          </div>
                          <i class="fas fa-question-circle fa-lg ms-3"  data-mdb-toggle="tooltip" title="Password must be at least 10 characters long and contain a number or special character"></i>
                        </div>
                      
                        <!-- Submit button -->
                        <button type="submit" class="btn btn-primary btn-block">Sign up</button>
                      </form>
          
                    </div>
                  </div>
      
                  
            
        

    Do

    Important information should be visible immediately, without the need to perform any additional actions, such as hovering over the icon with the tooltip.

    Password must be at least 10 characters long and contain a number or special character
            
                
      
                  <div class="card rounded-7">
                    <div class="card-body">
                  
                      <form>
                        <!-- Email input -->
                        <div class="form-outline mb-4">
                          <input type="email" id="formExampleEmailTip13Good" class="form-control" />
                          <label class="form-label" for="formExampleEmailTip13Good">Email address</label>
                        </div>
                      
                        <!-- Password input -->
                        <div class="form-outline mb-2">
                          <input type="password" id="formExamplePasswordTip13Good" class="form-control"
                            aria-describedby="formExampleTextTip13Good" />
                          <label class="form-label" for="formExamplePasswordTip13Good">Password</label>
                        </div>
                        <div id="formExampleTextTip13Good" class="form-text mb-4">
                          Password must be at least 10 characters long and contain a number or special character
                        </div>
                      
                        <!-- Submit button -->
                        <button type="submit" class="btn btn-primary btn-block">Sign up</button>
                      </form>
          
                    </div>
                  </div>
      
                  
            
        

    Tip 14

    Don't

    Gray is the most important and commonly used color in UI design because it is the most user-friendly. However, this does not mean that it always has to be the same. You definitely shouldn't limit yourself to just one shade of gray.

    Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Button
    Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Button
    Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Button
            
                
      
                    <div class="container-fluid">
                      <div class="row">
                        <!-- First column -->
                        <div class="
                                        col-lg-4 col-md-12
                                        mb-4 mb-lg-0
                                        p-5
                                        h-100
                                        d-flex
                                        align-items-center
                                        " style="
                                        background-color: hsl(0, 0%, 93%);
                                        border-right: 2px solid #fff;
                                        ">
                          <div class="card text-center">
                            <!-- Header -->
                            <div class="card-header border-0" style="background-color: hsl(0, 0%, 96%)">
                              Featured
                            </div>
                            <div class="card-body">
                              <h5 class="card-title">Special title treatment</h5>
                              <p class="card-text">
                                With supporting text below as a natural lead-in to additional
                                content.
                              </p>
                              <a href="#" class="btn btn-primary">Button</a>
                            </div>
                            <!-- Footer -->
                            <div class="card-footer border-0 text-muted" style="background-color: hsl(0, 0%, 96%)">
                              2 days ago
                            </div>
                          </div>
                        </div>
                        <!-- First column -->
                    
                        <!-- Second column -->
                        <div class="col-lg-4 mb-4 mb-lg-0 p-5 d-flex align-items-center" style="
                                        background-color: hsl(0, 0%, 93%);
                                        border-right: 2px solid #fff;
                                        ">
                          <div class="card text-center">
                            <!-- Header -->
                            <div class="card-header border-0" style="background-color: hsl(0, 0%, 96%)">
                              Featured
                            </div>
                            <div class="card-body">
                              <h5 class="card-title">Special title treatment</h5>
                              <p class="card-text">
                                With supporting text below as a natural lead-in to additional
                                content.
                              </p>
                              <a href="#" class="btn btn-primary">Button</a>
                            </div>
                            <!-- Footer -->
                            <div class="card-footer border-0 text-muted" style="background-color: hsl(0, 0%, 96%)">
                              2 days ago
                            </div>
                          </div>
                        </div>
                        <!-- Second column -->
                    
                        <!-- Third column -->
                        <div class="col-lg-4 mb-4 mb-lg-0 p-5 d-flex align-items-center" style="background-color: hsl(0, 0%, 93%)">
                          <div class="card text-center">
                            <!-- Header -->
                            <div class="card-header border-0" style="background-color: hsl(0, 0%, 96%)">
                              Featured
                            </div>
                            <div class="card-body">
                              <h5 class="card-title">Special title treatment</h5>
                              <p class="card-text">
                                With supporting text below as a natural lead-in to additional
                                content.
                              </p>
                              <a href="#" class="btn btn-primary">Button</a>
                            </div>
                            <!-- Footer -->
                            <div class="card-footer border-0 text-muted" style="background-color: hsl(0, 0%, 96%)">
                              2 days ago
                            </div>
                          </div>
                        </div>
                        <!-- Third column -->
                      </div>
                    </div>
      
                  
            
        

    Do

    You can mix gray with other colors to create interesting shades of gray subtly brushed with red, blue, or any other color. Thanks to this, your design will literally take on colors, while not losing the clarity and usability that gray provides.

    Use the Color scheme generator to find the perfect shades.

    Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Button
    Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Button
    Featured
    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    Button
            
                
      
                    <div class="container-fluid">
                      <div class="row">
                        <!-- First column -->
                        <div class="
                                            col-lg-4 col-md-12
                                            mb-4 mb-lg-0
                                            p-5
                                            h-100
                                            d-flex
                                            align-items-center
                                            " style="
                                            background-color: hsl(200, 20%, 96%);
                                            border-right: 2px solid #fff;
                                            ">
                          <div class="card text-center shadow-3-strong">
                            <!-- Header -->
                            <div class="card-header border-0" style="background-color: hsl(200, 30%, 93%)">
                              Featured
                            </div>
                            <div class="card-body">
                              <h5 class="card-title">Special title treatment</h5>
                              <p class="card-text">
                                With supporting text below as a natural lead-in to additional
                                content.
                              </p>
                              <a href="#" class="btn btn-primary">Button</a>
                            </div>
                            <!-- Footer -->
                            <div class="card-footer border-0 text-muted" style="background-color: hsl(200, 30%, 93%)">
                              2 days ago
                            </div>
                          </div>
                        </div>
                        <!-- First column -->
                    
                        <!-- Second column -->
                        <div class="col-lg-4 mb-4 mb-lg-0 p-5 d-flex align-items-center" style="
                                            background-color: hsl(24, 30%, 93%);
                                            border-right: 2px solid #fff;
                                            ">
                          <div class="card text-center">
                            <!-- Header -->
                            <div class="card-header border-0" style="background-color: hsl(24, 30%, 96%)">
                              Featured
                            </div>
                            <div class="card-body">
                              <h5 class="card-title">Special title treatment</h5>
                              <p class="card-text">
                                With supporting text below as a natural lead-in to additional
                                content.
                              </p>
                              <a href="#" class="btn btn-primary">Button</a>
                            </div>
                            <!-- Footer -->
                            <div class="card-footer border-0 text-muted" style="background-color: hsl(24, 30%, 96%)">
                              2 days ago
                            </div>
                          </div>
                        </div>
                        <!-- Second column -->
                    
                        <!-- Third column -->
                        <div class="col-lg-4 mb-4 mb-lg-0 p-5 d-flex align-items-center" style="background-color: hsl(0, 0%, 93%)">
                          <div class="card shadow-3-strong text-center">
                            <!-- Header -->
                            <div class="card-header border-0" style="background-color: hsl(0, 0%, 96%)">
                              Featured
                            </div>
                            <div class="card-body">
                              <h5 class="card-title">Special title treatment</h5>
                              <p class="card-text">
                                With supporting text below as a natural lead-in to additional
                                content.
                              </p>
                              <a href="#" class="btn btn-primary">Button</a>
                            </div>
                            <!-- Footer -->
                            <div class="card-footer border-0 text-muted" style="background-color: hsl(0, 0%, 96%)">
                              2 days ago
                            </div>
                          </div>
                        </div>
                        <!-- Third column -->
                      </div>
                    </div>
      
                  
            
        

    Tip 15

    Don't

    If you leave the same spacing between the labels for a given input and the input above, the user will be confused, not being able to easily assign which label belongs to which field.

    Sign up

            
                
      
                  <div class="shadow-4 rounded-7 p-5 bg-white" style="width: 420px;">
                    <h4 class="mb-2 fw-bold">Sign up</h4>
                    <label class="form-label" for="formExampleTip15BadFirstName">First name</label>
                    <div class="form-outline mb-2">
                      <input type="text" id="formExampleTip15BadFirstName" class="form-control" />
                    </div>
                    <label class="form-label" for="formExampleTip15BadLasttName">Last name</label>
                    <div class="form-outline mb-2">
                      <input type="text" id="formExampleTip15BadLasttName" class="form-control" />
                    </div>
                    <label class="form-label" for="formExampleTip15BadEmail">Email address</label>
                    <div class="form-outline mb-2">
                      <input type="email" id="formExampleTip15BadEmail" class="form-control" />
                    </div>
                    <label class="form-label" for="formExampleTip15BadPassword">Password</label>
                    <div class="form-outline">
                      <input type="password" id="formExampleTip15BadPassword" class="form-control" />
                    </div>
                  </div>
      
                  
            
        

    Do

    Provide sufficient distance so that the user has no doubts about which label belongs to which input field.

    Sign up

            
                
      
                    <div class="shadow-4 rounded-7 p-5 bg-white" style="width: 420px;">
                      <h4 class="mb-4 fw-bold">Sign up</h4>
                      <label class="form-label" for="formExampleTip15GoodFirstName">First name</label>
                      <div class="form-outline mb-3">
                        <input type="text" id="formExampleTip15GoodFirstName" class="form-control" />
                      </div>
                      <label class="form-label" for="formExampleTip15GoodLasttName">Last name</label>
                      <div class="form-outline mb-3">
                        <input type="text" id="formExampleTip15GoodLasttName" class="form-control" />
                      </div>
                      <label class="form-label" for="formExampleTip15GoodEmail">Email address</label>
                      <div class="form-outline mb-3">
                        <input type="email" id="formExampleTip15GoodEmail" class="form-control" />
                      </div>
                      <label class="form-label" for="formExampleTip15GoodPassword">Password</label>
                      <div class="form-outline">
                        <input type="password" id="formExampleTip15GoodPassword" class="form-control" />
                      </div>
                    </div>
      
                  
            
        

    Tip 16

    Don't

    Avoid situations where important interface elements blend together instead of standing out (like the logos in the example below).

    What technology
    is the best in the world?

            
                
      
                  <div class="text-center">
                    <h2 class="fw-bold">
                      What technology <br />
                      <span style="color: #0e65f1">is the best in the world?</span>
                    </h2>
                  
                    <div class="d-flex justify-content-center mt-4">
                      <a href="https://mdbootstrap.com/docs/standard/" class="me-2">
                        <img
                          src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/bootstrap.png"
                          alt="" height="27px" />
                      </a>
                  
                      <a href="https://mdbootstrap.com/docs/b5/angular/" class="me-2">
                        <img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/angular.png"
                          alt="" height="27px" />
                      </a>
                  
                      <a href="https://mdbootstrap.com/docs/b5/react/" class="me-2">
                        <img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/react.png"
                          alt="" height="27px" style="filter: saturate(200%) brightness(70%)" />
                      </a>
                  
                      <a href="https://mdbootstrap.com/docs/b5/vue/" class="me-2">
                        <img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/vue.png"
                          alt="" height="27px" />
                      </a>
                  
                      <a href="https://mdbootstrap.com/docs/standard/" class="me-2">
                        <img
                          src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/javascript.png"
                          alt="" height="27px" />
                      </a>
                  
                      <a href="https://mdbootstrap.com/docs/b4/jquery/" class="me-2">
                        <img src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/jquery.png"
                          alt="" height="27px" />
                      </a>
                    </div>
                  </div>
      
                  
            
        

    Do

    If you want to highlight an element, give it a background that contrasts with its surroundings. In the example below, we added a gradient blue background to the section, and put the logos in white circles.

    What technology
    is the best in the world?

            
                
      
                    <!-- SVG background shape -->
                    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"
                      class="svg position-absolute" style="height: 270px; width: 100%;">
                      <defs>
                        <linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0">
                          <stop stop-color="hsl(216, 55%, 75%)" offset="0%"></stop>
                          <stop stop-color="hsl(216, 55%, 90%)" offset="100%"></stop>
                        </linearGradient>
                      </defs>
                      <path fill="url(#sw-gradient-0)" d="M0,0V7.23C0,65.52,268.63,112.77,600,112.77S1200,65.52,1200,7.23V0Z"></path>
                    </svg>
                    
                    <section class="text-center pt-5" style="z-index: 10;">
    
                      <style>
                        .logo-circle {
                          background-color: #fff;
                          width: 45px;
                          height: 45px;
                          border-radius: 50%;
                        }
                      </style>
    
                      <h2 class="fw-bold">
                        What technology <br />
                        <span style="color: #0e65f1">is the best in the world?</span>
                      </h2>
                    
                      <div class="d-flex justify-content-center mt-4">
                        <a
                          href="#"
                          class="
                                  logo-circle
                                  me-2
                                  d-flex
                                  align-items-center
                                  justify-content-center
                                  hover-shadow
                                  ripple
                                  "
                          data-ripple-color="primary"
                          >
                          <img
                              src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/bootstrap.png"
                              alt=""
                              height="20px"
                              />
                        </a>
                    
                        <a
                          href="#"
                          class="
                                  logo-circle
                                  me-2
                                  d-flex
                                  align-items-center
                                  justify-content-center
                                  hover-shadow
                                  ripple
                                  "
                          data-ripple-color="primary"
                          >
                          <img
                              src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/angular.png"
                              alt=""
                              height="20px"
                              />
                        </a>
                    
                        <a
                          href="#"
                          class="
                                  logo-circle
                                  me-2
                                  d-flex
                                  align-items-center
                                  justify-content-center
                                  hover-shadow
                                  ripple
                                  "
                          data-ripple-color="primary"
                          >
                          <img
                              src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/react.png"
                              alt=""
                              height="20px"
                              style="filter: saturate(200%) brightness(70%)"
                              />
                        </a>
                    
                        <a
                          href="#"
                          class="
                                  logo-circle
                                  me-2
                                  d-flex
                                  align-items-center
                                  justify-content-center
                                  hover-shadow
                                  ripple
                                  "
                          data-ripple-color="primary"
                          >
                          <img
                              src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/vue.png"
                              alt=""
                              height="20px"
                              />
                        </a>
                    
                        <a
                          href="#"
                          class="
                                  logo-circle
                                  me-2
                                  d-flex
                                  align-items-center
                                  justify-content-center
                                  hover-shadow
                                  ripple
                                  "
                          data-ripple-color="primary"
                          >
                          <img
                              src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/javascript.png"
                              alt=""
                              height="20px"
                              />
                        </a>
                    
                        <a
                          href="#"
                          class="
                                  logo-circle
                                  me-2
                                  d-flex
                                  align-items-center
                                  justify-content-center
                                  hover-shadow
                                  ripple
                                  "
                          data-ripple-color="primary"
                          >
                          <img
                              src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/jquery.png"
                              alt=""
                              height="20px"
                              />
                        </a>
                      </div>
                    </section>
      
                  
            
        

    Tip 17

    Don't

    Remember that you are creating an interface for users, not for yourself or other developers. Avoid unclear messages and ambiguous colors or icons.

            
                
      
                    <div class="alert mb-0 d-flex justify-content-between align-items-center" role="alert" data-mdb-color="primary">
                      <div>
                        <p class="mb-2"><strong>Login failed</strong></p>
                      <p class="mb-0">Error v783xsfk5</p>
                      </div>
                      <i class="fas fa-question-circle fa-xl"></i>
                    </div>      
      
                  
            
        

    Do

    Always ask yourself - is the interface user-friendly and understandable? In a good UI, everything - from text, to a clear color, to an unequivocal icon - should help the user get the best experience possible.

            
                
      
                    <div class="alert mb-0 d-flex justify-content-between align-items-center" role="alert" data-mdb-color="danger">
                      <div>
                        <p class="mb-2"><strong>Login failed</strong></p>
                      <p class="mb-0">Incorrect password</p>
                      </div>
                      <i class="fas fa-times-circle fa-xl"></i>
                    </div>