Alexandru Paduraru - freeCodeCamp.org

How to Build a Login Page with the Material Tailwind Framework – Step by Step Guide

Alexandru Paduraru — Mon, 29 Apr 2024 14:21:00 +0000

Login pages are like the front doors to our web apps. They should be inviting, easy to use, and safe. If you're looking to create one that combines both style and function, you're in the right place.

In this guide, we'll explore how to build a login page with Material Tailwind and Tailwind CSS that not only looks great but also works seamlessly across devices.

Whether you're new to web design or just curious about these tools, we'll walk you through each step. Let's dive in and start building!

Happy coding 🤘🏼

Check out the article chapters:

Introduction to Tailwind CSS and Material Tailwind
How to Set Up Your Development Environment
How to Install Necessary Dependencies for your Login Page
How to Design the Layout with Tailwind CSS
How to Integrate Material Tailwind Components
How to Style Input Fields and Buttons
How to Implement Responsive Design
How to Add Interactivity and Validation
Security and Best Practices for Login Pages
Conclusions

1. Introduction to Tailwind CSS and Material Tailwind

Web design has many tools to help make good-looking and easy-to-use websites.

Two useful tools are Tailwind CSS and Material Tailwind. Tailwind CSS helps web designers make websites quickly without writing a lot of extra code. Material Tailwind adds nice-looking designs that are easy to change. Together, they can help you make a Tailwind CSS login page that looks good and works well.

In this section, you can see more details about these tools and why they're useful.

What is Tailwind CSS?

Tailwind CSS homepage

Tailwind is a utility-first CSS framework. Instead of pre-designed components, it provides low-level utility classes that let you build custom designs without leaving your HTML.

Since its launch, Tailwind CSS has taken the web development community by storm. By 2023, the framework had gained over 400 million downloads on Github, a proof of its growing adoption among developers. Several popular companies and platforms also started adopting Tailwind, for example: Vercel, Algolia, Netlify, and others. The Github statistics show over 74,000 stars, which indicates a strong community backing.

Why use Tailwind CSS:

Speed: Quickly build UIs with utility classes instead of writing custom CSS.
Flexibility: You can customize designs without restrictions.
Responsiveness: Easily make designs that work on all device sizes.

Example: Instead of writing custom CSS for a button, use utility classes directly in your HTML.

What is Material Tailwind?

Material Tailwind homepage

Material Tailwind is a components library for Tailwind CSS that implements Google's Material Design guidelines. It combines the best of both worlds: the utility-first approach of Tailwind and the design philosophy of Material Design.

Why use Material Tailwind:

Consistency: Follows Material Design guidelines, ensuring familiar UI/UX patterns.
Customizable: Being built on Tailwind, it's highly customizable.
Component-rich: Comes with pre-built components that speed up development.

Example: Imagine you want a Material Design inspired button. With Material Tailwind, it's straightforward.

If you are a React fan too, let me tell you that Material Tailwind also comes with Tailwind CSS + React components. For more details, check out the Material Tailwind React documentation.

Now let’s see how you can use these two amazing tools to create your desired Login Page.

2. How to Set Up Your Development Environment

Creating a development environment tailored for your web project ensures smooth and efficient workflow. For our Tailwind CSS login page, we’ll start from scratch.

Prerequisites:

Node.js and npm (Node Package Manager): These are essential for installing and managing libraries we’ll be using.
A Text Editor or IDE: While any text editor will work, Visual Studio Code (VS Code) is recommended due to its extensive library of extensions beneficial for web development.
Terminal or Command Prompt: We'll be running commands to set up and manage our project.

Install Node.js and npm

To start, visit the Node.js official website and download the recommended version for your OS.

After installation, verify that Node.js and npm are correctly installed by running the following commands:

node -v
npm -v

Set up a new project

Create a new directory for your project:

mkdir tailwind-material-login
cd tailwind-material-login

Then initialize a new npm project:

npm init -y

Text Editor/IDE Setup (VS Code)

If you haven’t already, download and install VS Code. Then go ahead and open your project directory in VS Code.

Optionally, you can install extensions that enhance Tailwind CSS development:

Tailwind CSS IntelliSense: Offers class name autocompletions, linting, and more.
Live Server: Allows you to see live changes without manually refreshing the browser.

Terminal in VS Code

VS Code offers an integrated terminal. This means you can run commands directly within your editor.

To open it, go to the top menu: View > Terminal or press Ctrl + a backtick.

Basic Project Structure

Create a basic structure for your project:

mkdir src
touch src/index.html
touch src/styles.css
touch src/main.js

This creates a src directory with an HTML file, a CSS file, and a JavaScript file.

Setting up your libraries and frameworks is crucial to build upon a solid foundation. For our Tailwind CSS login page, we'll be primarily using Tailwind CSS and Material Tailwind.

Here’s a step-by-step guide to installing and configuring these dependencies.

How to install Tailwind CSS

First, you'll need to install the Tailwind CSS package. Using npm, install the Tailwind CSS package with:

npm install tailwindcss

Then, integrate Tailwind into your CSS. Inside your src/styles.css file, add the following Tailwind directives:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Next, you'll need to generate a configuration file. While Tailwind works out of the box, a configuration file (tailwind.config.js) provides customization capabilities.

To generate it:

npx tailwindcss init

This creates a minimal config file in your root directory. You can extend this file as needed.

Finally, to process your CSS and apply Tailwind’s transformations, add a script in your package.json under the "scripts" section:

"scripts": {
"build-css": "tailwind build src/styles.css -o src/output.css"
}

Run the script with:

npm run build-css

This will generate an output.css containing all Tailwind's styles. Include this file in your HTML.

How to install Material Tailwind

First, install the Material Tailwind package. Again, you can use npm:

npm i @material-tailwind/html

Now you need to integrate it into your project. Material Tailwind provides components with styles applied. You can use them directly in your HTML or customize them further in your CSS.

For instance, to use a Material Tailwind button:

Next, install the required fonts and icons. Material Design recommends specific fonts and icons. Include these in your src/index.html:


<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous"/>

PostCSS and Autoprefixer (Recommended)

Install PostCSS and Autoprefixer:

npm install postcss postcss-cli autoprefixer

Go ahead and configure them by creating a postcss.config.js in your root directory:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
};

Modify your build-css script in package.json to:

"build-css": "postcss src/styles.css -o src/output.css"

This ensures your Tailwind CSS styles are vendor-prefixed, making them compatible across different browsers.

Add into your project’s the output.css styling file.

"stylesheet" href="pathTo/output.css" />

A login page typically consists of a logo or branding, input fields (like username and password), a submit button, and often some secondary options or links, such as "Forgot Password" or "Sign Up".

Main Container:

Start with a main container that centers its content both vertically and horizontally.

class="min-h-screen flex items-center justify-center bg-gray-100">

Create a centered card layout that will house the login form. Introduce the necessary input fields for the login process, typically an email/username and password.

class="relative flex flex-col text-gray-700 bg-white shadow-md w-96 rounded-xl bg-clip-border">
  <div
    class="relative grid mx-4 mb-4 -mt-6 overflow-hidden text-white shadow-lg h-28 place-items-center rounded-xl bg-gradient-to-tr from-gray-900 to-gray-800 bg-clip-border shadow-gray-900/20">
    <h3 class="block font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-white">
      Sign In
    h3>
  div>
  <div class="flex flex-col gap-4 p-6">
    <div class="relative h-11 w-full min-w-[200px]">
      <input
        class="w-full h-full px-3 py-3 font-sans text-sm font-normal transition-all bg-transparent border rounded-md peer border-blue-gray-200 border-t-transparent text-blue-gray-700 outline outline-0 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
        placeholder=" " />
      <label
        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
        Email
      label>
    div>
    <div class="relative h-11 w-full min-w-[200px]">
      <input
        class="w-full h-full px-3 py-3 font-sans text-sm font-normal transition-all bg-transparent border rounded-md peer border-blue-gray-200 border-t-transparent text-blue-gray-700 outline outline-0 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
        placeholder=" " />
      <label
        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
        Password
      label>
    div>
    <div class="-ml-2.5">
      <div class="inline-flex items-center">
        <label htmlFor="checkbox" class="relative flex items-center p-3 rounded-full cursor-pointer">
          <input type="checkbox"
            class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-gray-900 checked:before:bg-gray-900 hover:before:opacity-10"
            id="checkbox" />
          <span
            class="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"
              stroke="currentColor" stroke-width="1">
              <path fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd">path>
            svg>
          span>
        label>
        <label class="mt-px font-light text-gray-700 cursor-pointer select-none" htmlFor="checkbox">
          Remember Me
        label>
      div>
    div>
  div>
  <div class="p-6 pt-0">
    <button
      class="block w-full select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button">
      Sign In
    button>
    <p class="flex justify-center mt-6 font-sans text-sm antialiased font-light leading-normal text-inherit">
      Don't have an account?
      <a href="#signup"
        class="block ml-1 font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
        Sign up
      a>
    p>
  div>

Place the primary action button (Login) below the input fields.

Secondary Options:

Beneath the login button, offer options such as "Forgot Password" or "Sign Up".

5. How to Integrate Material Tailwind Components

Material Design, initiated by Google, is a design system that combines classic principles of good design with innovative technologies. When fused with the utility-first approach of Tailwind CSS via Material Tailwind, it provides a powerful toolkit to create interactive and visually appealing user interfaces.

Material Tailwind provides styled components that adhere to Material Design guidelines but harness the utility of Tailwind. This means that while most of the styling is pre-configured, you can still utilize Tailwind classes for customization.

Input Fields

Instead of the standard Tailwind-styled inputs, you can introduce Material-styled input fields for a more tactile and animated experience:

class="relative h-10 w-full min-w-[200px]">
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
    name="email"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Email
  label>


<div class="relative h-10 w-full min-w-[200px]">
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="password"
    name="password"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Password
  label>
div>

These components offer a floating label effect and subtle focus animations out of the box.

Buttons

Material Tailwind offers a set of button styles that fit within the Material Design paradigm:

This renders a raised button with Material's signature ripple effect on click.

Tooltips

To enhance user guidance, you can add tooltips to your components:


<div
  data-tooltip="tooltip"
  class="absolute z-50 whitespace-normal break-words rounded-lg bg-black py-1.5 px-3 font-sans text-sm font-normal text-white focus:outline-none"
>
  Login Form
div>

When users hover over the element, they'll see a tooltip providing additional information.

Incorporating Material Icons

Material Design also has a rich set of icons. Material Tailwind makes it easy to incorporate these:

Make sure you've already linked to Material icons in your HTML as instructed earlier.

Customizing Material Components

While Material Tailwind components come pre-styled, you can still leverage Tailwind utility classes for customizations:

Here, we've overridden the default primary color with a custom shade of purple from Tailwind's color palette.

Incorporating Material Tailwind components provides an elegant touch to the login page, combining the efficiency of Tailwind CSS with the visual and interactive richness of Material Design. The result is a responsive, user-friendly, and visually cohesive login experience.

Also, you can check the components library’s Tailwind CSS login page templates.

6. How to Style Input Fields and Buttons

The appearance and feel of input fields and buttons play a pivotal role in user experience. They're the primary interaction points. Let's focus on giving them a sleek, user-friendly design using Material Tailwind and Tailwind CSS.

Material Tailwind Input Fields:

Material Tailwind offers a more polished look for input fields out of the box. Here's how you can integrate them:

class="relative h-11 w-full min-w-[200px]">
  <input
    class="peer h-full w-full border-b border-blue-gray-200 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-gray-200 focus:border-pink-500 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
    name="email"
  />
  <label class="after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-pink-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:after:scale-x-100 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Email
  label>


<div class="relative h-11 w-full min-w-[200px]">
  <input
    class="peer h-full w-full border-b border-blue-gray-200 bg-transparent pt-4 pb-1.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border-blue-gray-200 focus:border-pink-500 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="password"
    name="password"
  />
  <label class="after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-500 transition-all after:absolute after:-bottom-1.5 after:block after:w-full after:scale-x-0 after:border-b-2 after:border-pink-500 after:transition-transform after:duration-300 peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.25] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:after:scale-x-100 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Password
  label>
div>

These fields come with improved focus effects and an overall refined look, making them more engaging.

Enhancing with Icons:

Integrating Material icons can guide users and enhance visual cues:

class="relative h-10 w-full min-w-[200px]">
  <div class="absolute top-2/4 right-3 grid h-5 w-5 -translate-y-2/4 place-items-center text-blue-gray-500">
    <i class="fas fa-heart" aria-hidden="true">i>
  div>
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Input With Icon
  label>

The email field now includes a mail icon on the left, giving users a clear indication of the input type.

Material Tailwind Buttons:

Material Tailwind buttons come pre-styled with Material aesthetics. However, you can further customize their appearance with Tailwind utility classes:

In this example, the button has a primary blue background color with different shades on hover and active states.

Button Variations:

Offering secondary or tertiary actions? You can use outlined or text buttons:

Gradient Button:

Outlined Button:

Text Button:

Responsiveness and Sizing:

Remember to consider different device sizes. Tailwind's responsive utilities can help:

class="relative h-10 w-full md:w-50 lg:w-24">
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Required
  label>

This input field takes the full width on smaller screens, but only half the width on larger ones.

7. How to Implement Responsive Design

A significant strength of Tailwind CSS lies in its mobile-first approach to responsive design. Ensuring your login page looks good and functions well on all devices is crucial for user experience.

Tailwind CSS is built with a mobile-first mindset. This means that by default, the classes you apply are for mobile views. To target larger screens, you utilize breakpoints. For instance:

.text-sm md:text-base lg:text-xl

On mobile, the text size would be sm, on medium-sized screens (like tablets) it would be base, and on large screens (like desktops) it would be xl.

Responsive Card Layout: While our login card may look great on desktop, it might be too narrow on mobile. You can adjust this:

class="relative flex flex-col text-gray-700 bg-white shadow-md w-96 rounded-xl bg-clip-border">

Here, we're using less padding (p-4) and taking full width (w-full) on mobile, but increasing the padding (md:p-8) and setting a fixed width (md:w-96) on medium screens and above.

Adapting Input Fields and Buttons: Ensure that interactive elements are easily accessible on touch devices:

class="relative h-10 w-full mb-4 md:mb-0">
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
    Email
  label>

<button
  class="middle none center mr-3 rounded-lg border border-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:opacity-75 focus:ring focus:ring-pink-200 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  data-ripple-dark="true"
>
  Login
button>

On mobile, the input fields and buttons take up the full width for easier touch access but adapt to more spacious designs on larger screens.

Handling Landscape Mode: Sometimes, especially on mobile devices, landscape mode can drastically alter layouts. Consider adding specific styles for this using Tailwind's landscape plugin (if you've added it to your configuration):

class="mt-10 landscape:mt-4">

In landscape mode, the top margin is reduced to accommodate the shorter viewport height.

Typography Adjustments: Optimal readability is essential. Ensure text sizes are appropriate for various devices:

class="block font-sans text-4xl font-semibold leading-[1.3] tracking-normal text-inherit antialiased"
>
  Sign In to Your Account

On mobile, the title is slightly smaller, but it scales up on medium and larger screens.

Testing Responsiveness: While Tailwind offers the tools to create responsive designs, always test your layouts on actual devices or using browser tools. This ensures a consistent experience across devices and resolutions.

8. How to Add Interactivity and Validation

A successful login page isn't just about looks – it must provide feedback, handle user input gracefully, and validate that input to ensure security and functionality.

Material Tailwind components come with built-in animations and feedback mechanisms. For instance, when you click a Material Tailwind button, you'll see a ripple effect, providing immediate feedback to the user.

Toggle Password Visibility:

A common feature in login forms is the ability to toggle password visibility. This improves user experience, especially on mobile devices where typing mistakes are more frequent. Using Material icons and some simple JavaScript:


"loginForm">
  <div class="relative mb-4">
    <div class="relative h-10 w-full min-w-[200px]">
      <div class="absolute top-2/4 right-3 grid h-5 w-5 -translate-y-2/4 place-items-center text-blue-gray-500">
        <i class="fas fa-heart" aria-hidden="true">i>
      div>
      <input
        class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
        placeholder=" "
        type="password"
        id="password"
      />
      <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
      Password
      label>
    div>
    <button
      class="middle none center mr-3 rounded-lg border border-pink-500 py-3 px-6 font-sans text-xs font-bold uppercase text-pink-500 transition-all hover:opacity-75 focus:ring focus:ring-pink-200 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      data-ripple-dark="true"
      id="togglePassword"
    >
      Submit
    button>
  div>


<script>
    const passwordField = document.getElementById('password');
    const togglePasswordBtn = document.getElementById('togglePassword');

    togglePasswordBtn.addEventListener('click', function() {
        if (passwordField.type === "password") {
            passwordField.type = "text";
        } else {
            passwordField.type = "password";
        }
    });
script>

Clicking the visibility icon will now toggle the password field between visible and obscured states.

Client-Side Validation:

While never a replacement for server-side validation, client-side validation provides immediate feedback:

class="relative h-10 w-full min-w-[200px]">
  <div class="absolute top-2/4 right-3 grid h-5 w-5 -translate-y-2/4 place-items-center text-blue-gray-500">
    <i class="fas fa-heart" aria-hidden="true">i>
  div>
  <input
    class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-pink-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
    placeholder=" "
    type="email"
    id="email"
    name="email"
    required
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  />
  <label class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-pink-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-pink-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-pink-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
  Email
  label>

The required attribute ensures the field is not left empty, and the pattern attribute uses a basic regex to validate email structure.

Handling Form Submission:

When the user attempts to log in, you can provide feedback using JavaScript:

document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();

    // Fetch input values
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    // Example: Check if credentials are empty
    if (!email || !password) {
        alert('Please fill in all fields.');
        return;
    }

    // TODO: Handle actual submission to server

    // On success:
    // alert('Logged in successfully!');

    // On failure:
    // alert('Invalid credentials. Please try again.');
});

The code above prevents the default form submission and provides feedback depending on the input. This is a simplistic approach, and in real-world scenarios, you'd interact with server endpoints to authenticate the user.

Handling Errors and Feedback:

It's crucial to provide clear feedback in the event of errors or successful actions. Consider using modals, snack bars, or simple inline messages to communicate the status of actions to users.

For example, using Tailwind:

class="bg-red-500 text-white p-4 rounded-md mt-4" id="errorMessage" style="display: none;">
Invalid credentials. Please try again.

Then, using JavaScript, you can show or hide this error message based on the authentication result.

Security is paramount when dealing with user authentication. A well-designed login page not only enhances user experience but also acts as the first line of defense against potential threats.

HTTPS and Encryption:

Before any other consideration, ensure your website uses HTTPS. This encrypts data transmitted between the user's browser and your server, protecting it from eavesdropping and tampering.

Password Security:

Client-Side:

Never store passwords in plain text or local storage.
Use password input fields (type="password") to hide password characters.

Server-Side:

Always hash and salt passwords before storing them in your database.
Consider using proven libraries like bcrypt for hashing.

Avoid Verbose Error Messages:

If authentication fails, avoid specifying whether it was the username or password that was incorrect. Instead, use generic messages:

alert('Invalid login credentials. Please try again.');

This prevents attackers from determining if a particular email or username is registered with your site.

Limit Login Attempts: Implement a system to track failed login attempts and consider locking out users or implementing CAPTCHAs after a certain threshold is reached. This helps prevent brute-force attacks.
Implement CAPTCHAs: Tools like Google's reCAPTCHA can help ensure that login attempts are made by humans, not automated scripts. This further protects against brute-force and bot-driven attacks.
Secure Password Reset - If you provide a "Forgot Password" option:
- Use one-time tokens that expire after a short duration.
- Send the reset link to the registered email instead of allowing password changes directly from the login page.
- Always ask security questions or verify user identity before allowing password resets.
Cross-Site Scripting (XSS) and SQL Injection: Always sanitize and validate input data to protect against XSS attacks and SQL injections. Utilize parameterized queries or prepared statements to prevent SQL injections.
Keep Libraries and Dependencies Updated: Regularly update your server software, libraries, and other dependencies to ensure you're protected against known vulnerabilities.
Use Content Security Policy (CSP): A CSP helps prevent a wide range of attacks, including XSS. It limits the sources of executable scripts, ensuring that only trusted sources are allowed.
Logging and Monitoring: Keep logs of authentication attempts, especially failed ones. Monitoring these can alert you to potential attacks or suspicious activities.
Two-Factor Authentication (2FA): Consider implementing 2FA for added user account protection. This requires users to provide two distinct forms of identification before gaining access.

Conclusion

Building a login page might seem easy, but there's a lot to think about. It should look good, work well, be easy to use on any device, and be safe. Thanks to tools like Tailwind CSS and Material Tailwind, you can make great login pages without too much hassle.

In this guide, we started from scratch and ended up with a ready-to-use login page. By combining Tailwind CSS's easy style tools and Material Design's nice looks, users get a great experience every time they log in.

But remember, technology keeps changing. So, always keep learning and updating your skills.

Useful links:

UI/UX Design Guide: What Are UI Designers, and How Are They Different Than UX Designers?

Alexandru Paduraru — Tue, 13 Jul 2021 02:14:52 +0000

Have you noticed how User Interface and User Experience design are considered different topics nowadays?

You're not the only one.

We live in a beautiful era of design, with new techniques and trends coming and going. Frontend development is also gaining increased momentum, with more and more developers getting involved in UI/UX design.

While both UI and UX design are often placed on the same pedestal, they are fundamentally different, and beginners should understand the difference between the two.

Knowing this, my team from Creative Tim and I have done a lot of research and created a comprehensive guide on the most important parts of these two huge domains:

UI Design — How Things Look
UX Design — How Things Work
What Are the Key Differences Between UI and UX Design?
What Do UI/UX Designers Do?
What Are the Disadvantages of a Combined UI/UX Role?
How Do UI/UX Designers Work Together?
What Are the Salaries of UI and UX Designers?
How Do You Become a UI or UX Expert? What Kind of Design Courses/Tutorials Should You Take?
Which Should You Specialize In? UI or UX Design?

UI Design — How Things Look

A UI (User Interface) deals with the application's graphical layout, which includes buttons, screen layout, animations, transitions, micro-interactions, and so on. In short, UI is all about how things look.

UI design includes the following formats:

Graphical User Interface (GUI): GUI design involves how users interact with the visuals and digital control panels of a system. The computer's desktop is an example of a GUI.
Voice-controlled Interface (VUI): VUI design deals with the interaction between a user and a system using voice. Smart assistants like Bixby for Samsung mobile devices and Siri for iPhones are examples of VUIs.
Gesture-based Interface: This is mostly used in virtual reality (VR) and other gesture-based design scenarios, which deal with the engagement of users within 3D spaces. Here is an example of our fully coded simulation of the Soft UI Admin Dashboard in VR:

Source

For good UI design, you should take these characteristics into consideration:

The design should be focused on helping users complete tasks quickly with minimum effort. Completing tasks should be a seamless experience.
It should be enjoyable, satisfactory, and free from frustration.
The UI design should communicate the brand value of the company/organization.

UX Design — How Things Work

UX (User Experience) design deals with how users interact with the system. Logical navigation and how smooth and intuitive the experience is all fall under UX design. In short, this type of design helps users have a positive experience.

To get a feeling of the UX process, here are the main steps:

Interaction Design deals with how users can complete their tasks effortlessly by using the interactive components of a system (page transitions, animations, buttons, and so on).
User Research involves conducting extensive research, collecting feedback and ideas from new or existing customers, understanding end user needs, and making design decisions based on these parameters.
Information Architecture involves the organization of information and content that users need to do their tasks. This requires a UX designer to understand the relationship between different sets of content and present them in the most understandable way possible.

For good UX design, you should follow these practices:

The product should be easily usable, logical, and self-explanatory.
The product should solve users's problems.
The product should be accessible and usable to a wide range of people.
The product should create a positive experience for the user, allowing them to complete tasks without frustration.

Cognitive Biases

Great UX designers must be aware of the cognitive biases that we all have, as this can affect the interaction between the user and interfaces. Many marketing strategies are based on these biases:

_Source_

What Are the Key Differences Between UI and UX Design?

UI and UX design have often been used as interchangeable terms.

While the end product requires consideral input from both design methodologies, the process of designing UI and UX is very different.

UX design mostly deals with the user’s entire journey to solve a problem.

On the other hand, UI design is focused on how the product looks and feels when the problem is being solved.

Here are the main differences between UI and UX design:

Main focus: The main focus of UI designers is to deal with the quality and visuals of the end product, and use hi-fi models as prototypes. UX designers focus more on the purpose and functionality of the end product, and care more about logic. Additionally, UI designers deal with the technicalities of the product design, while UX designers focus more on project management and analysis of the project.
Use of color: UI designers design prototypes in full color while UX designers do so in black, white, or grey.
Tools: UI designers use tools like Sketch, Flinto, Principle, and InVision for collaborative image designing. UX designers use wireframe-based prototyping tools like Mockplus.
Artistic Component: UI designers have to include an artistic component in their design since it is related to what the end user sees, hears, and feels. UX design has more of a social component, as it needs to understand what a user wants to experience in the end product.

Here is an example of UX and UI prototypes for the same end product:

Source

What Do UI/UX Designers Do?

If you want to become a greate UI designer, you should develop the following skills/responsibilities:

Working in agile teams.
Creating user flows, wireframes, prototypes and so on.
Visualization tools such as InVision, Sketch, Photoshop, Figma, etc. For more details about which tool to choose, check out our research in this article: InVision vs Sketch vs Figma vs Photoshop
Frontend programming languages such as HTML5, CSS3, and JavaScript.
Executing visual design stages from inception to final hand-off.
Collaborating with UX designers, developers, QA, and product managers to design and implement innovative visual ideas for products.
Communicating the branding and style of the company to users through design.
Creating the look and feel of the product using customer analysis and research.
Managing the responsiveness, interactivity, and animation of a product and making it adaptive to all device screen sizes.

If you want to become a great UX designer, you should develop these skills/responsibilities:

Working in agile teams.
A strong understanding of the UX process.
Prototyping tools like Adobe Creative Suite, Sketch, InVision, Axure, etc.
Problem solving skills and curiosity about everything related to design, people, life and technology.
Stakeholder management and client interaction.
Creating process flows, wireframes, sitemaps, prototypes, and UX deliverables.
Collaborating closely with developers, product managers, UI designers, external stakeholders, and QA Engineers to iterate designs based on market dynamics, user feedback, and tech constraints.
Analyzing customer needs, competitors, product structure, and strategies for designing the experience of a product.
Creating seamless design and interaction strategies for mobile, web, desktop, and other hardware endpoints.

What Are the Disadvantages of a Combined UI/UX Role?

Having a combined UI/UX role is almost like wearing two different hats at the same time.

While most organizations advertize a UI/UX role as a single, combined role, a UI and UX designers have different skill sets. Their main focus, way of thinking, and method of prototyping a product differ greatly.

A combined UI/UX role requires constant switching between conceptualization and visualization, which is often difficult and can reduce the amount of attention that each discipline requires.

How Do UI/UX Designers Work Together?

While UI design and UX design require very different skill sets, they are both important components that must work in harmony to give the best experience to end users.

A UI design might be beautiful, but it can be clunky and confusing to navigate without a good UX design. On the other hand, the user experience of a product can be flawless, but it is nothing without a good looking user interface.

Any frontend development and design process should start with understanding the needs of the user. UX and UI designers should work in collaboration with other developers, managers, and product owners to understand what the end product should be able to do, how it should feel, and what it should look like.

UX designers are generally involved in the earlier phases of a product design since they need to design the flow of activities that take place when a user needs to solve a problem. This involves analytic and project management activities.

Later, a UI designer builds on the aesthetics and interactions based on the models provided by the UX designer.

Given this, it is safe to state that UX and UI go hand in hand. And while there are instances when the same person does both, one design principle cannot exist without the other.

What Are the Salaries of UI and UX Designers?

UI designers earn an average of 50k worldwide, with the average salary in the USA being 91k, Germany being 57k, France being 47k, and 67k in the UK.

UX designers earn slightly more, with an average of 52k worldwide. UX designers in the US earn 102k on average, with Germany paying 53k, 49k in France, and 68k in the UK. (Source: Glassdoor)

Note: All the salaries listed above are an average for the area, and are in USD.

How Do You Become a UI or UX Expert? What Kind of Design Courses/Tutorials Should You Take?

Becoming a UI or UX expert starts with being genuinely interested in UI/UX design. Once you know you're interested, you should find resources and take design courses that help prepare you for the job market.

There are online courses like the UI Design Program and Learning UI Design that can help you kickstart your journey towards becoming a UI designer.

For UX design, you can study online, paid courses, or courses from online universities. You can also look at the best online course websites to learn UI/UX so you can see which websites offer courses for free and the user feedback on these websites.

For UX design, there are a number of paid courses, of courses from online universities. You can also check out a list of the best online courses to learn UI/UX design so you can see which websites offer courses for free, and read user feedback.

Suppose you already have some of the required skills to be a UI/UX designer. In that case, you can also take a look at articles like the behavior patterns for UX design, UX methods that you can use, inspirational graphic designs from the world's best designers, and academic research papers that designers should read.

Which Should You Specialize In? UI or UX Design?

Specializing in UI or UX design is a personal preference that depends on your particular skillset.

However, there are a huge number of companies that advertise a combined UI/UX designer role.

While the roles and responsibilities of both these vary differently, there is still a niche market for UI/UX design, making it a good idea to have adequate knowledge about both.

While difficult to implement, a combined UI/UX career can prove fruitful in terms of salary compensation and importance in the company.

However, a combined UI/UX designer role is difficult to perform since it needs constant switching from one mindset to the other. So it is often a better option to specialize in one role instead.

For example, if you are artistic, know effective color combinations, and understand how products can be visually enhanced, UI design is a good choice for you.

On the other hand, if you are good with managing user and stakeholder needs, have excellent analysis skills, and understand how user experiences can be improved, UX design would be more suited to you.

Final Thoughts

User Interface and User Experience design both require an understanding of what users need.

Once you have this understanding, frontend development and design do not have to be a complex affair — there are a lot of ready-made components, tools, and kits that can make design easier and more effective.

Creative Tim offers you a huge number of free and premium, fully coded UI tools like Templates, Dashboards, and Design Systems.

If you want to build your illustrations using hand-drawn sketch components in a scalable manner, look no further than Creative Tim’s product: IRA Design.

And let's keep in touch on Twitter.

Adobe XD vs Sketch vs Figma vs InVision - How to Pick the Best Design Software

Alexandru Paduraru — Wed, 05 Feb 2020 08:21:51 +0000

Comparing Adobe XD vs Sketch vs Figma vs InVision studio is a very common topic among designers who are looking for the best design software.

Sketch has long been the application of choice for UX and UI designers. But in the last four years, we have seen many new contenders for Sketch’s crown. Three of them that have made the biggest strides are Figma, Adobe XD, and InVision Studio.

These four tools have many pros in common but there are some differences too. For example, the first comparison, Adobe XD vs Sketch, makes sense especially since both have a similar interface which is user-friendly and has a minimalistic style.

In this article, I analyze how the most used design apps compete and what their unique features are using my experience acquired while working at Creative Tim.

Adobe XD

Adobe XD was developed and published by Adobe Inc. XD, released on 18 October 2017. It is a vector-based user experience design tool for web apps, mobile apps, and voice apps available for macOS and Windows. There are versions for iOS and Android as well that help you preview the result of your work directly on mobile devices.

XD also support website wireframing and creating simple interactive click-through prototypes. With the character and layout tools of Adobe XD, Elements can be easily created and individual objects can be exported.

The interface is kept relatively simple, with a toolbar that is aligned at the side, as well as the large artboard area.

Comparing Adobe XD vs Sketch makes sense especially because of this similar interface which is user-friendly and has a minimalistic style.

Sketch

Sketch is a vector graphics editor, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010 for macOS. It won an Apple Design Award in 2012.

A key difference between Sketch and other vector graphics editors is that Sketch does not include print design features. Sketch is only available on macOS. This problem is partially solved by third party and handoff tools.

When Sketch first came out it completely disrupted the interface design space, but Adobe XD and Figma have recently come forward as new challengers. They offer unique functionality like prototyping and live collaboration.

I’ve recently been researching these tools for my side project, uxtools.co, and wanted to share what I believe the be the most noteworthy decision points. Also, from my point of view, learning to sketch is very useful and it does not take to much to become a Pro.

Figma

Figma came to the stage in 2016 with initial funding of $14M.

With its seamless user interface and sleek feature palette, the tool quickly became a notorious competitor to similar solutions in the field.

Designers from brands like Twitter, Microsoft, GitHub, and Dropbox swear by Figma as the ultimate UI design tool.

InVision Studio

InVision Studio is a new piece of software, released in 2019, that allows designers to build more advanced animation and micro-interactions. Studio also integrated with InVision’s link to Sketch via its Craft plugin.

InVision Studio has got a nice dark UI by default, that helps developers focus on the work to be done in the evening. However, with macOS Mojave, every app can look like this quite easily. When they created it, they were inspired by another design tool - I am thinking about the Sketch app.

Apps Comparison

1. Pricing

Budget can be a big deal when you’re working with your own resources. Some of these licenses have educational and promotional pricing (often 50% off), so don’t miss that part. For example, Figma will get you there for free as long as you're not working on a team.

Figma: Free for individuals! You can have 3 projects for free, or you can upgrade to unlimited projects and team functionality for $12/month (billed annually).
Sketch: $99 per license that gets you the Mac App for life and access to the next production versions of the app.
Adobe XD: It offers free and paid plans, depending on an individual's or team's needs. Paid plans start at $9.99/month.
InVision Studio: Free right now.

2. Platform

Though Sketch has been immensely popular, it forces designers to only use Mac, which alienates developers from accessing design files.

Figma: Browser! Figma recently released a Mac app and Windows app (not offline-capable, though).
Sketch: Mac only.
Adobe XD: Mac and Windows. Subject to the same limitations as the CC suite.
InVision Studio: Mac and Windows.

3. Live Collaboration

Nobody likes to send at the end of the day “version 3.0”, “version3.0.final”, “version3.0.final.final”. Live Collaboration can help us, especially live comments.

I imagine these were the same concerns that surrounded the release of the highly innovative Google Docs suite. Google Docs, however, turned the Microsoft Suite on its head with live collaboration, and now Figma is seeking to do the same thing with UI design.

Figma: Yes! Not to mention being browser-based, it allows Windows and even Linux users to have a very polished design tool.
Sketch: Not natively, but a plugin, Picnic, is looking to change that. Also, they have Sketch for Teams.
Adobe XD: It offers real-time Coediting, launched at Adobe MAX 2019.
InVision Studio: Not currently possible, but can generate share links.

Image: Figma - Argon Design System Pro

4. Handoff

Recently a few apps have been developed specifically to deliver specs (sizing, spacing, color) to developers, but design tools are starting to integrate this functionality natively.

Figma: Because of live collaboration, developers can easily jump in (regardless of OS) and access the designs. Figma now neatly prints the handoff code for CSS, iOS, or Android in the right panel.
Sketch: They've recently launched their own native developer handoff feature — Cloud Inspector. There’s even an entirely free alternative called Sketch measure that works just as well.
Adobe XD: It offers design specs that allow a designer to create a shared link that contains measurements, assets, and automatically-generated CSS code snippets.
InVision Studio: They have “Inspect Now”.

Image: Figma - Argon Design System Pro

5. Offline

This is so important. Some online apps can protect your information when Wifi goes down, but you need full access to open, use, and save from the app offline.

Figma: No, in an AMA they stated they don't have any current plans to add it.
Sketch: Sure.
Adobe XD: Yep.
InVision Studio: Yes.

Image: AdobeXD - Argon Dashboard Free

6. Prototyping

There are literally dozens of these apps nowadays, but they might become extinct as Adobe XD brings prototyping directly to the design tool. Keep your eye on these.

Figma: Yes! It's very basic but feels like Adobe XD without the transitions. Also, there's a nice Framer integration.
Sketch: Yes!
Adobe XD: Yes, native prototyping within the app. Adobe XD also supports voice prototyping and keyboard/gamepad support.
InVision Studio: Yes, you can create prototypes and animations.

Image: InVision Studio - Argon React Native

7. Symbols

Symbols can make your work easier. These have completely changed the design process. Forget building and duplicating list items over and over, let symbols do the work for you.

Figma: Good to go. Symbols now have states, constraints, and overrides.
Sketch: The symbol functionality in Sketch is very impressive, and continues to improve. Symbols can be updated across entire documents and can resize responsively (that means less work for you when changing screen sizes).
Adobe XD: It offers components that can be used throughout a document as well as linked across documents. It also allows designers to create variations of a component for different interactions, known as component states.
InVision Studio: they have components that are a close approximation to the symbol conventions found in other applications. Components in their final form will honor a broad, scalable hierarchy that allows designers to quickly build-up, mix, and match components intelligently across their designs.

Image: Sketch - Material Kit Pro

Conclusion

Sketch has a big disadvantage here because it is only available for Mac users. And as such, it lets tools like Figma and Adobe XD innovate beyond the basic necessities.

Also, in terms of design tools, Adobe XD provides a robust set of responsive while the Sketch doesn’t have this feature built-in (but it has many plugins). If your tool does something better than the other, it is often enough of a reason to switch over. The browser-based approach that Figma has taken is also something to behold.

When talking about Adobe XD vs Sketch, the first one’s future is looking very bright and will win over many Sketch users. InVision’s change of focus may ensure its survival but one thing is for certain - Adobe XD is here to stay. The Adobe powerhouse is strong, and smaller companies like InVision and Sketch will have to work hard to stay relevant in the future.

People usually prefer to design and work in just one place. If you’re a part of a team, then Figma is undoubtedly for you.

After all of that: first is Figma, second is Sketch, third is Adobe XD and fourth is InVision Studio.

Overall, when talking about the best design software, these four tools are extremely well-suited for modern designer needs.

Try all four out to see which one is better for your use cases. I hope this comparison - Adobe XD vs Sketch vs Figma vs InVision - helped you decide which design tool is better for you.

Resources:

https://www.figma.com/figma-vs-sketch/

https://uxtools.co/blog/sketch-vs-adobe-xd-vs-figma/

https://www.codeinwp.com/blog/figma-vs-sketch-vs-adobe-xd/

https://support.invisionapp.com/hc/en-us/sections/360004450191-Studio

https://helpx.adobe.com/ro/xd/help/components.html

https://www.sketch.com/docs/

We made $1,052,000 in 2018 selling UI Tools. Here is what we learned.

Alexandru Paduraru — Mon, 29 Apr 2019 17:32:24 +0000

_Kanye West is great! Image by [https://unsplash.com/@karinacarvalho](https://unsplash.com/@karinacarvalho" rel="noopener" target="blank" title=")

It sounds cliché, but having a great product is crucial. I said this many times, and we’ve been following this rule since the beginning of Creative Tim. For us, a Great Product = Great Design + Great Customer Support + Great User Experience.

If you want to learn more about how we started everything 5 years ago, from a Starbucks, please check this article: How my friends and I grew our side project into a $17.000/month business. That article was written exactly 2 years ago, and I would recommend you to read it before proceeding to this one so you can better understand the whole journey.

A lot of the strategies that we will present here can be applied to other online businesses, and you will see an example of how somebody created a successful startup based on the other article that we published.

Everything that we built was based on free information and free resources that were found on the web and I think it is in our responsibility to give back. There are a lot of entrepreneurs who want to start a business or want to scale one, but they don’t know how to acquire new users without using a paid channel. We want to help these people so they can apply some of the techniques and spend less time doing experiments.

In this case study, I will present how we grew monthly revenue ~5x, from $17.000 to $106.000 while being in a very crowded market (Themes and Templates). Here is an overview of the article:

Partnership strategies (The moment you quit is the moment you lose)
If you want to be great, stay near great companies
Growth Hacking: from trending on Github’s front page to continuous launches on Product Hunt
How different we are from our competitors and why this worked for us
Give Back: Education, Sponsorships, and Tutorials
Can people apply our strategies to different businesses?
What’s next?

Let’s begin! :-)

1. Partnership strategies

If you’ve read the other article, you know that after some trial and error in different fields, from giving design components to our users and some growth hacking, we finally found the Product Market Fit. We had around 226.000 visits made by 77.000 people, and we were grossing $22.000 from about 400 paying customers. While we continued to launch new products, we realized that there is a limited amount of money that those people can spend.

That means that if you have 10 premium products with an average value of $55 there will be 400 people who will buy. But if you push 10 more premium products those 400 people will still buy only 1 product as they need 1 product for their project, not 2 or 3. It’s the same thing as going to a supermarket with $10 to buy 1 bottle of milk, it doesn’t matter if the supermarket brings in 25 more types of milk, you will not spend $30 to buy 3 bottles of milk just because there is a lot of milk there.

It was painful for us to find this, as we were thinking like “ahh…the business it’s pretty simple, we launch more, we make more”. So the next thing that we had to do, while we were launching new products, was to find new partners that wanted to join us and help with the delivery of our free and paid products to a bigger audience.

“Shoot for the moon. Even if you miss, you will land among the stars.”

We started to look for websites that had 3–10–20 or even 100x the traffic that we had. Since we based all our business on the most popular framework for front end, Bootstrap, we started looking for all the websites that were related to Bootstrap. After a lot of emails and requests and rejection we though it was cool and crazy enough to try to do a partnership with the creators of Bootstrap. Most of the time people think like this: “There were a lot of people who ignored us, I will not ask them because they are too big and they will ignore us. It’s better to stay in my corner.”

So on 7 June 2017, we contacted the creators of Bootstrap and presented them with what we were doing, what we wanted to achieve with the Bootstrap Templates, and what was our mission.

We’ve got pretty shocked when we got their response. Why?

It was a positive response saying that something would happen in the future and they would come back with some ideas.
We were thrilled that they considered our business. There were basically thousands of other companies/people doing Bootstrap Templates.
They actually came back. Usually, 99% of people will not respond to your proposals.

Later that year, they contacted us and told us that they would launch an official Bootstrap Marketplace and they wanted to have us in the first batch of 5–7 companies.

The most important part here wasn’t the fact that we would start making more money and would deliver to more people with this partnership. It was the fact that we began to talk directly with the creators of Bootstrap and we got feedback about how we should improve and work on top of Bootstrap. That’s way more valuable than money and came as another validation for us, that we were providing high-quality products.

“The creators of a framework are the most qualified to give you the best feedback about how you should work with their product.”

Next partnership: WordPress. During the years we knew that WordPress is powering around 30% of all the websites around the world, but we never did anything on this side. We have in our target range developers and web agencies who know how to code. When you do something for WordPress you know that it is possible to have somebody who is not technical who will try to “1-Click install” your product and it will have problems. Then they’ll come to your support being angry about his experience.

Since we never did anything for WordPress but wanted to see our design on WordPress themes we were looking for a solid partner in this field. We found ThemeIsle, the company who built one of the most the popular WordPress themes, Zerif. They are from the same country as we are so we started to talk about ways of collaborating.

We realized that a great combo would be to migrate our most popular UI Kit, Material Kit, to WordPress. In this way, we created Hestia, a WordPress Theme that was using our design.

Hestia was a great success. It was downloaded hundred of thousands of times and currently it has 100,000+ active installs. More, it is in the top 10 most popular WordPress themes of all time. We also made another product, Orfeo, which was built on top of Paper Kit 2 and is in the top 50 most popular themes for WordPress. Having this partner was really important for us as we entered a new world that we couldn’t do on our own.

The next partnership we created was something that we’ve been working on for around two years. Unfortunately, it’s an exclusive partnership, so we cannot give details about who is behind this. I will show you why it took us two years to build it. If you look at the first email that I sent you will notice some mistakes that I made:

I only talked about my company and me, and I never told him what he could achieve from this partnership (exposure, money, experience, etc.)
I didn’t give any details, like “we expect to have 10.000 downloads from your source” or “we think your users will download 2x more products because of the high quality” etc.
I didn’t tell anything about what we could do for him to help in his business

So it took me 26 emails over 21 months to understand that I had to change my messages to give something to a possible partner before getting something from it. Sometimes you have to learn it the hard way. ??‍♂️

In the end, our partner was pleased with the new collaboration, and I’m feeling good that I continued to “spam him” and never gave up.

“We learnt an important lesson here, that you have to give something before you get something!”

2. If you want to be great, stay close to great companies

We always had the philosophy of learning and getting inspired by other more prominent companies that have tens of years of experience in a field. In the past, we’ve got inspiration from Apple, Rolls Royce, Heroku, Invision, Airbnb, Stripe, Dribbble, etc. I think that if you learn from these companies, you can create a rock-solid foundation. Then when you have all the skills and knowledge, you can start playing with them and create something new and unique, as Pablo Picasso said.

We wrote more about how we build a product and how is the strategy and implementation in this article: “The Anatomy of a Bootstrap Dashboard.”

Looking for sources of inspiration and then following InVision for many years, we decided to take inspiration from one of their most popular UI Kits called Now UI, which was launched in 2015 and was available only for designers. We wanted to use it as the core foundation for a new UI Kit made for developers.

We’ve got Invision’s approval, and we were allowed to build the coded version for developers on 8 November 2016. After 4–5 months of researching, planning based on Invision’s principles, and developing, we released the HTML version based on Bootstrap.

The result and the way our developers received the new product was incredibly good. The design was great because Invision made it, and the code was very well structured and followed the Bootstrap 4 principles. That was a great combo in terms of Design + Code + Documentation. Later we found out that the success of this product was because we took one of the best UI Kits that was available and made it better by coming with the coded version and new elements/pages.

“Take the best that exists and make it better.” — Henry Royce (co-founder of Rolls Royce)

Since the initial boost for creative-tim.com came from Product Hunt, we decided to continue to launch products there. The difference between launching in 2014–2015 and launching in 2018 was pretty big as the community grew a lot and there are a lot of new products launches daily. That makes it really hard to stand out of the crowd.

The strategy of launching on Product Hunt became really complicated, and we work for around one week before doing an actual post there. Everything needs to be set and a lot of people have to be involved. Some things that you have to think of:

You need to prepare all the images, product descriptions, links, and social profiles before actually starting the post. That will save you a lot of time. Here we usually do a draft of the future post and then discuss internally with the whole team the text and images.
You have to make sure your website will not break as there will be a boost in traffic. We usually send people to static generated content, so fewer server resources are needed.
Try to post at the beginning of the Week (Monday) around 10:15 AM GMT+2, that is 00:15 AM San Francisco time, basically when the Product Hunt Servers start a new day. In this way, you make sure you have 24hours full exposure and get as many upvotes as you can.
If you already have a base of people that are using your product, make sure you send them an email to let them know that you are on Product Hunt and if they enjoyed using the product they can upvote it.
Make sure you let your social fans (Facebook, Twitter, Instagram) know that you are on Product Hunt.
If you are posting a paid product, make sure you create some coupons that can be used by the Product Hunt community. They love them :D

Using these steps we successfully launched some products that were well received by the community:

Material Dashboard Free — 756 upvotes
Now UI Kit — 1.556 upvotes
Material Dashboard All Technologies (Bootstrap, React, Vuejs, Angular) — 505 upvotes

While we were looking for new ways of showing our products to a bigger audience, we found this article written by Diana from Froala: How to get up to 3500+ GitHub stars in one week. It was pretty exciting, and we were thinking that if they did that, maybe we can also be trending on GitHub, as we already have open source products and the developer community loves them.

We followed all the steps that were written in the article and also applied the strategies that we used on Product Hunt. We prepared a friendly Readme page for Material Dashboard and added all the technologies that were available for Material Dashboard (Bootstrap, React, Vuejs, Angular). We posted on social media and then sent a newsletter to 90.000 developers who were using Material Dashboard. After this initial boost, we were trending in All Languages for one day.

Since we boosted it to top 5 for a day, we started to announce to our audience that we are trending on Github, and that helped us get more people involved. We added a Banner on our website which was viewed by over 50,000 people, and then we posted that repo on Hacker News where the magic happened. It was featured on the first page, upvoted by around 430 people, and 9,800 people came to the GitHub where they gave us around 2,000 stars.

So we were in front of Facebook, Google, and Microsoft for that week.

Launching on Product Hunt, Hacker News, or being on local Press is not a sustainable growth channel, as Product Hunt’s founder Ryan said, but it’s an excellent strategy to employ at the beginning of your business.

4. How different we are from our competitors and why this worked for us

We are running our business in a very competitive space: themes & templates. Most of the entrepreneurs that I’ve met thought that this was a dead place and that we couldn’t create something relevant. We wanted to prove that things can be done in any space, no matter how crowded it is, if you have your secret weapon. If you read the first article, you know that our secret weapon is to deliver great products combined with great user experience and great customer support.

Let’s have a look at most of our competitors who sell their products in different marketplaces. Of course, there are some exceptions, as we are not unique in our field, but let’s have a look at 95% of the companies who create similar products with ours.

Now, let’s have a look at our curve and have a little overview of each point:

Pricing: when we started our business we found that most HTML templates/themes/kits/dashboards were priced between $3 and $19, while Wordpress templates were priced between $49 and $69. Things changed during the years, and HTML templates started to cost more. We made some calculations, and we couldn’t sustain our business if we started in the same price range $3–$19. We also read in some business books that if the price is your only differentiator, then you are in big trouble. So we decided to charge more for our products so we could have the flexibility to build products that have top quality and customer experience.
Quality: on a scale from low to high, most of our competitors deliver medium quality. This is because they invest most of their resources, which are a combination of money + time, into building more pages, more plugins and more updates for all those plugins and pages. These things combined with the pressure of releasing new products gives them less time to invest in the quality and the attention to details of their products.

The number of pages/examples: if you look at all the marketplaces you will see that everybody is building products that have hundreds or thousands of pages. The problem here is that each product is coming with multiple examples of the same page that serve only one purpose. For instance, you will find products with five examples of a Contact Us page. Why should you create five good pages instead of building one that is great and simple for the client to use?
The number of updates: because the distribution is made on a platform that is not controlled by the creator, when you do an update, your product gets some more visibility. So people just do a lot of updates, no matter if the product needs one or not, only to appear in front of others. The problem here is that if you don’t have anything to update, you start to add more pages (point 3) or more plugins (point 5).
The number of plugins: the same story can be seen in the external 3rd party plugins. For example, most of our competitors have, let’s say, 5–7 different JavaScript plugins that do the same thing. Your customer will use only 1, so it is hard for them to remove the other 4–6 to start building what they need.
Distribution costs: since we are talking about companies selling products on popular marketplaces, they have to pay 30–55% of their revenue to the owners of the marketplace. This depends on the terms that each marketplace has. In our case, the distribution is made straight on our website.
Development costs: taking into consideration point 2, 3 and 5, we understand that these companies invest a lot in building their products. But the investment is made into quantity, not quality. In our case, we created some internal tools where we write code one time, and that is building more products based on the same design rules. In this way the hard part (writing the product code) is handled by the tools, while we spent most of the time in researching, testing new and different ideas, and giving a lot of attention to details.

If you still think that the attention to details is not so important, let’s have a look at some basic alignment on Samsung Galaxy S7 (top) and Apple iPhone 6S (bottom).

Distribution control: since our competitors are selling their products on channels that they don’t control, basically they cannot do much, and they depend on the owner of the marketplace. If the owner decides to send less traffic to somebody or move the products away from the featured areas, you can’t change that. Or if we think at another case that happened with a popular marketplace a couple of weeks ago, the owner stopped paying the creators and didn’t respond for three months… What can you do in that situation?

In our case, we can do basically anything that is good for our users. Also during the years we changed and updated our platform hundreds of times based on our customers’ feedback.

Access to customers: in our competitors’ examples, it’s hard to have direct access to the persons who purchased the products. In most of the cases, you get access to your customer only when they are contacting you for support requests. Because of this, they cannot do custom email campaigns; they cannot bundle their products; they cannot announce to all their customers when they launch something new, etc.

What we presented here is an overview of a Blue Ocean Strategy. If you want to learn more about the way you can create a new space for your business and not try to compete in a Red Ocean, please check the Blue Ocean Strategy Book.

5. Give Back: Sponsorships, Education and Tutorials

At Creative Tim we believe in the power of giving back! We are proud to sponsor schools, universities, hackathons and be part of events where we can teach people how to become better developers, designers, and entrepreneurs.

Over the years, we’ve used a lot of the Free and Open Source content made by other companies and developers, so it is our responsibility to give back. We used to sponsor with licenses of our paid products, and the feedback from the people who used the products at the events and from the organizers was excellent. Sponsoring is something good to do, even if it takes a lot of time for us to talk and to prepare everything for the participants. We also get customer support requests after each event.

At this moment we have over 150 global events sponsored, and we add 5–10 each month. If you host an event for developers, contact us at hello@creative-tim.com, and we will be more than happy to work with you.

Some photos from events sponsored by us and training sessions

While we were at different events, we realized that we could only help a limited number of participants. So if we wanted to help millions we needed to do something online that would grow in parallel with our offline activities. So we started to make tutorials for different topics that were requested by our users. We decided that it was good to test written versions and also recorded videos. Some examples:

[article] How to use ReactJS with WebPack Babel and Material Design — 3.9k claps
[article] How to use Redux in ReactJS with Real Life Examples — 1k claps
[videos] Tutorials about front end development — 280k views
[casestudy] The anatomy of a Bootstrap Dashboard that earns $1,000seach month — 14k claps

We are also very proud that, through our affiliation, we managed to support a lot of creators for different frameworks and plugins that we used. For example, when this article was written, we contributed in the past 12 months $71,555 to the popular Material UI library.

_Image from Open Collective: [https://opencollective.com/material-ui#contributors](https://opencollective.com/material-ui#contributors" rel="noopener" target="blank" title=")

6. Can people apply our strategies to different businesses?

We believe that there is enough space for each company to create value, generate good profits, and also give back to the community, so we are not afraid of sharing all these strategies.

“The secret to creativity is knowing how to hide your sources.” — Albert Einstein

Some people were inspired by the first article that I wrote and managed to create similar businesses in different environments. William Candillon is a great example. You can read the full interview with him on Indie Hackers.

If you apply any of our strategies, feel free to share them with the community in the comments.

7. What’s next?

In past years, we managed to become known in the Front End ecosystem for the quality that we deliver, and we are proud to see that we have over 700.000 developers who have used our products for different projects. We are still a tiny player in this game, and we have a lot of things to learn and improve. We always build all our products and start migrating on a new framework based on our customer requests.

[Backend] Starting this year we are happy to let you know that we released the first batch of ready to be used Front End + Back End solutions. It will now be easier for our customers and users to launch something. You can check the Node.js and Laravel examples on our website. We will release more Back End solutions based on the requests that we have.
[Mobile] We also migrated one of our most popular products, Material Kit, to React Native, and so far the reviews are excellent (4.9/5). You can check it out and download it for free here. This is something new for us, and we learned that building a Mobile First app is very different than building a Responsive Website. We will release React Native versions for all of our designs.
[Illustrations] We’ve seen a lot of people and companies starting to add illustrations on their websites so they can express better what they want to share. We also used illustrations in some of our products, so we decided to create more and give them for free to the community. This is how an internal project called Ira Design was born. We will continue to add more illustrations and customizations to this project.

Here is an overview of how the company has grown during the years. We usually net around 75% of that annual amount after paying affiliates, vendor fees, collected VAT, and other taxes for doing e-commerce between countries.

Thank you for reading!

I hope this article has given you some ideas on how to test or apply new strategies in your business, or even to create a new one. Let’s continue the discussion in the comments and if you have questions, suggestions, or want to work with us, feel free to contact our team or me.

Find me and our team:

Email: alex@creative-tim.com
Instagram: https://www.instagram.com/alexandru__paduraru/
Twitter: https://twitter.com/axelut
Official Website: https://www.creative-tim.com
Our Github: https://github.com/creativetimofficial

The anatomy of a Bootstrap dashboard that earns $1,000s each month

Alexandru Paduraru — Mon, 28 Aug 2017 14:31:58 +0000

We at Creative Tim have always wanted to deliver great tools to all the web developers who are using our products. If you want to read more about how we’ve built our business and what is our drive, you can check this article: Growing a side project into a $17,000 month business.

We want to see better websites and web apps on the internet. So we decided to share some of the “secret ingredients” that form the base of one of our most popular dashboards: Light Bootstrap Dashboard. Of course, they won’t be a secret anymore, because we’re going to share them with you. ?

In this case study, I will share how we got the idea to create a dashboard, where we got inspiration, how we implemented everything, how it was used inside Stanford’s internal tools and how we financed the development and the support of it. Here is an overview of the article:

The basic structure and core functionality
How the design was created
Built on top of open source and why you should stand on shoulders of giants
Launch, Rise and Shine
How we finance the support and solve the requests of the developers
Future development plans

I will try to give as much information as I can, with hopes that this tutorial won’t be like this:

1. The basic structure and core functionality

You should think of the process behind creating the dashboard as a test that you have to take after you learn a lot. Of course you will learn a lot during the development of the product. But first, you need to have strong knowledge of what is “that” and how it “is used”. Before writing the first line of code you should do some research, make plans, create to-do lists and sketches, and try to visualize what you will want to have in the end.

Since you are not reinventing the wheel, you need to look around at companies that create great products to get inspiration (such as Heroku, Slack, Mailchimp, Stripe). Also look at your competition. You will get a lot of information. And when you start, it will be easier to develop the product because you did your homework. You have to sharpen your ax, before starting to cut:

“If I had eight hours to chop down a tree, I’d spend six hours sharpening my ax.” — Abraham Lincoln

We did our homework and we’ve got a huge list of over 100 free dashboards as examples from which we can get inspiration. Here are some of them:

You have a huge list of dashboards, with a lot of colors, animations, beautiful icons, small charts, big charts, static or fixed sidebar and hundreds of different features. How do you know which is the best option for your audience?

Since we didn’t know what people want inside a dashboard, we decided to write down all the features that these dashboards contain and use only the most common. We realized that the core features solve around 95% of the cases where you need a dashboard. The remaining 5% solve very specific problems.

The basic elements are buttons, icons, typography, sidebar, main panel, navbars and dropdowns. The core features in most of the dashboards are:

Tables
Notifications
Tasks Lists
Cards (for different type of forms and easier visualization of the information)
Charts (donut chart, line chart, bar chart)
Google Maps

With small visual adjustments, you can reproduce 95% of any dashboard from any company in the world just by using the core elements. Then you have the remaining 5%, which is always different depending on the company and the problems it solves. Here we can find:

Kanban System Cards
Drag & Drop functionality
Timeline components
WYSIWYG Editor
8-Level Navigation Sidebar Menu
Multi File Uploader + Drag & Drop File Uploader
Form X-Editable
Morris Chart, Google Chart, Flot Chart, amChart, Flows Chart and many other types of charts
And the list can continue to more than 200 features

The problem is that each of these new plugins adds extra CSS, JavaScript or jQuery libraries, and HTML. We’ve built the product on plain HTML, no frameworks or modular tricks, so all the CSS/JavaScript would be in a single file.

Don’t get me wrong, I’m not saying that the features were not good. These are great plugins developed by awesome people. But it wasn’t something that we wanted to have in our simple dashboard.

So we decided to keep the product as light as possible (remember the name?). Light Bootstrap Dashboard. And we decided to implement only the features that were solving the core 95%.

2. How the design was created

After we made our plan for the elements that the product would have, we had to think of a design that would be outstanding. A user-friendly design that would make people want to have this dashboard inside their content management system. We already had the famous Bootstrap Get Shit Done Kit. Web developers loved it and it has been downloaded more than 30,000 times. So we decided to use that as the core design for basic elements like Buttons, Navbars, Inputs, etc.

We realized that we need more than that though, to make an impact and to make people badly want our product. We didn’t want to be “another dashboard based on Bootstrap”. Where do you go when you want great design resource?

If you search “dashboard” on Dribbble, you will find a lot of incredibly beautiful dashboards and admin panels. Actually, for those who don’t know, Dribbble is like visual cocaine. Check some of these examples made by Cosmin Capitanu and Mike from CreativeMints:

_[https://dribbble.com/shots/1423171-Some-Analytics](https://dribbble.com/shots/1423171-Some-Analytics" rel="noopener" target="blank" title=")

_[https://dribbble.com/shots/1592816-Probability-theory](https://dribbble.com/shots/1592816-Probability-theory" rel="noopener" target="blank" title=")

_[https://dribbble.com/shots/1738453-Xonom](https://dribbble.com/shots/1738453-Xonom" rel="noopener" target="blank" title=")

Seeing all these beautiful examples made us realize that if we build something like that we will definitely stand out of the crowd. Also, even if the dashboards or the charts are looking very good, they will be very hard or impossible for us to actually code in HTML, CSS and JavaScript. Or they are solving a very specific problem, like the latest dashboard with Body Measurements.

It was impossible 2 years ago, because our level of knowledge and experience with HTML/CSS wasn’t so high. I’m sure that if we‘d like to implement them today, we’d have a good chance of creating something very similar. Also, the technology and browser capacities will help us more.

We wanted to build something that can be used by many people from diverse business fields. There were some simple and beautiful dashboards too, but we didn’t want to use them as inspiration because we wanted something different.

I can’t explain exactly what we wanted, but we didn’t feel comfortable with any of the examples. So we continued to do our research until we found something that we really liked:

Heroku Dashboard in 2015

It wasn’t perfect nor as outstanding as we wanted it to be. But we felt that it is the right choice and it is a very good example from which we can build our dashboard. Even Pablo Picasso said that great designers steal and Apple respected his word:

We couldn’t do that. The dashboard from Heroku was good enough that it gave us that spark. So we decided to use it only for inspiration and not for the final result. Here is the first iteration:

Iteration #1

It’s a pretty good start. To have a better view of how it will look, we just have to populate the right area with some cards with charts:

Iteration #2

The cards’ colors didn’t look so good. They were too bright for how the left sidebar was looking. So we started to test different combinations of colors for the charts and the sidebar.

Iteration #3

At this point we realized that we don’t have to keep only 1 color for the sidebar’s background. And we should let our users choose which color they want. We knew that Apple had some beautiful gradients for their Fitness App, so we decided to use those gradients as the base for our future gradients.

We’ve always thought that if we are watching what the best companies in the world are doing in terms of Design and UX, we will set very high standards for our interfaces. In this way, more and more web developers will have free access to high-quality products.

Apple’s Fitness App

While we were doing all these different combinations of colors, gradients, cards and charts we saw that the guys from Metalab, who built the interface for Slack, wrote an article: Slack’s 2.8 Billion Dollar Secret Sauce. This ended up being an inspiration for the next steps. The overall idea of the article was that Slack’s secret sauce is created by the combination of a great and playful interface with small interactions, which makes the product more user-friendly.

“It looks different, it feels different and it sounds different.”

We wanted to add something that none of the other dashboards had. I’ve always loved how a gradient with some transparency can look over an image. And I’ve started to play with different images and gradient’s opacity. By the way, the Duotone Gradient Image that we used in 2015 (we didn’t even know that it has a name) seems to be one of the trends in web design for 2017. This is pretty cool, isn’t it? ?

Iteration #4

Not fully satisfied…

Final iteration

This was the view that made us feel happy, it was just perfect for us ?. We also added small interactions like the opening dropdown animation or the show effect of the notification:

Adding the image with the gradients over and the small animations made us feel like this guy:

_[https://www.instagram.com/nusr_et](https://www.instagram.com/nusr_et" rel="noopener" target="blank" title=")

3. Built on top of open source and why you should stand on the shoulders of giants

As we said in the beginning, we didn’t want to reinvent the wheel. Nor did we have the money to contract experts capable of building the elements needed for the dashboard. We decided that the best option for us is to use what other people created and shared for free or open source.

We recently discovered that what we actually did was stand on the shoulders of giants. That means we used as much as we could from tools that are already powerful and well maintained by big communities. For more about this and why you should use this technique when you want to build something from scratch read this awesome article, written by Quincy Larson: How to stand on shoulders of giants.

Let’s have a look at what is actually under the hood.

Framework: Bootstrap — Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Design Layer: Get Shit Done Kit — Free Bootstrap 3 User Interface Kit. This is the best starting point for any online project you are building. It has become a trademark for the online community of a clean and nice looking interface.
Font: Roboto — a Google Font that has a dual nature. It has a mechanical skeleton and the forms are largely geometric.
Small icons: Font Awesome — Font Awesome gives you scalable vector icons that can be customized using CSS.
Large icons: Stroke 7 Icons — This is a complete set of 202 thin stroke icons inspired by iOS 7.
Charts: Chartist.js — Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries.
Notifications: Bootstrap Notify — This plugin helps you turn standard bootstrap alerts into “growl” like notifications.
Maps: Google Maps — Plugin for viewing maps.
Photos: Unsplash — Free (do whatever you want) high-resolution photos.

“There is no such thing as something for nothing. Everything, including your personal success, has a price that must be paid” — Napoleon Hill

Since we used a lot from the community it would be fair to give back to the community. So we decided a couple of weeks ago to release it under MIT License. In this way, more developers can contribute and use it without any legal constraints, for personal and commercial projects.

4. Launch, Rise and Shine

Doing the research for around 50-60 days (sharpening the ax) gave us the possibility to develop the dashboard in just 15 days (chopping the tree). ?

What do you do after you launch a project? You need to see what the feedback for it is, if people would like to use it and if the simple dashboard you created is solving a problem for them. If they don’t want to use it, then, you don’t have a business. We submitted it on different communities and it was doing very well. For example, it got:

170 upvotes on Hacker News, peak to position 9 and over 88.000 views for that week
247 upvotes on /r/webdev subreddit
80 upvotes on /r/web_design subreddit (blocked at 80 because it got the “spam” tag, we had some subscribe popups… which we later removed?)

The community validated the idea. We’ve also got a lot of feedback, to add the SASS files for easier customization or post it on GitHub.

Then we’ve seen that there were a lot of beginners who just wanted to learn how to use this dashboard. It was so beautiful that people who didn’t interact with something like that wanted to learn how to work with it.

We spent around 3 weeks developing a series of video tutorials on how to replicate the WordPress dashboard using our product. We chose to use the WordPress dashboard because it is a very popular dashboard. And we wanted to let people understand that they can build anything using our product.

The tutorials were very well received and have over 78,000 views as of today. Here is the first video on How to create a responsive admin template using Light Bootstrap Dashboard 1/3.

5. How we finance the support and requests from the web developers

_[https://youtu.be/sz_LgBAGYyo?list=PL5q_lef6zVkaTY_cT1k7qFNF2TidHCe-1](https://youtu.be/sz_LgBAGYyo?list=PL5q_lef6zVkaTY_cT1k7qFNF2TidHCe-1" rel="noopener" target="blank" title=")

Building a product it easy, keeping it alive is hard.

There are a lot of great plugins/template out there which are dying because their creators don’t have enough cash or they don’t make enough revenue in order to continue the development or to fix the issues.

We didn’t want the same case for our product. The best option to keep the product alive was to create a PRO version which can generate enough revenue to support to continuous development.

We used the feedback from web developers and decided to create a Premium version with more elements and plugins. We wanted to help also some of the guys who wanted specific features and were in the 5% category. Choosing the right plugins which can help as much as we could from the 5% category was very hard for us.

We started again to do research on the premium dashboard. And we added plugins like Full Calendar, DataTables.net, Sweet Alert, Bootstrap Wizard and some extra pages like Login Page, Register Page, Lock Page.

Here is the live preview of the PRO version. You will see that we kept the same structure and wanted to make it light, without too many options and features.

Having the revenue from the PRO version made us not only support the product but also create new file types like the PSD/Sketch version or Angular 2 version. Both are shared for free.

6. Future development plans

Here are some stats about the dashboard:

It is very easy to customize it to match your brand. It was used in internal tools like Stanford’s Department of Emergency Medicine Catalog:

We’ve got many requests from web developers who want to have the Dashboard built on different frameworks like Angular 2, Angular CLI, React, Meteor, VueJS or as a Rails Gem. Creating all these versions and supporting them for free under MIT license will work only if we will have PRO versions for each one. We started with Angular 2 and we’ve seen a lot of people who use it and we’ve got a lot of feedback on how to improve it. So if you want to get involved for the other frameworks or if you have any ideas on how to make these products better, we would be glad to talk more.

It took a lot of courage to show our sources and the process that we had behind building Light Bootstrap Dashboard. Hope you will learn something from this and if you have any feedback or suggestions, I would be glad to talk to you in the comments.

Useful links:

Download HTML version from www.creative-tim.com
Download Angular version from www.creative-tim.com
Download PSD/Sketch version from www.pixelsvibe.com
Play with it on the live preview
Contribute and report issues on the GitHub repository
Check our blog: http://blog.creative-tim.com/

Find me on:

Email: alex@creative-tim.com
Facebook: https://www.facebook.com/axelut
Twitter: https://twitter.com/axelut

How my friends and I grew our side project into a $17,000/month business

Alexandru Paduraru — Mon, 20 Feb 2017 00:56:42 +0000

In 2014, my friends and I set out to build the best possible web design tools. We built UI kits, Admin Dashboards, Templates, and Plugins. We’ve always tried to create products that are helpful in the development process, and that we ourselves would use for building websites for clients.

From a revenue’s perspective, if we don’t take into consideration the Black Friday sales (which doubled the amount that we made in November 2016), we are grossing around $22,000 per month. Part of that goes toward paying our affiliates’ commissions, collected VAT, payment vendors’ taxes, and other expenses. We end up netting around $17,000 each month.

In this case study, I’ll share exactly how we built our products and grew our business. You’ll hear all about:

What motivated us to start our startup, Creative Tim, and how we built our initial product
How we got our first users
Marketing strategies we used to grow
How our business model works
The story behind our revenue sources
Biggest lessons we’ve learned so far

1. What motivated us to get started with Creative Tim and how we built the initial product

We started out as a two-person agency in Romania with no funding from third parties. We didn’t have enough cash to rent an office — even desks at a co-working space —so we just worked out of a Starbucks. We were barely able to pay our daily living expenses by doing work for clients.

Creative Tim was a side project that we thought would come in handy to web developers like ourselves. We noticed that we were always “reinventing the wheel” when working with clients, and creating the same items over and over again for their websites. So we wanted to create a few standard components, like login and register modals, calendars, wizards, headers, and footers.

Over the span of a few months, we dedicated our time to implementing the platform and a few freebies (alongside the agency work). In the beginning, we didn’t have any Twitter followers, Facebook fans, or email list subscribers. We posted a lot of stuff about our freebies on various design forums and we used the “stalk web developers on Twitter” technique to spread the word about our products.

2. How we got our first users

At first, nobody really understood what we wanted to do. They didn’t understand the value we could provide by helping them improve their businesses. We decided that it would be better to create a more complex product that would help people understand what we were doing ?

We launched the Get Shit Done Kit, a UI Kit based on Bootstrap. It was featured on Designer News, and it was quite popular. We got over 11,000 users from that source, which was a huge spike for our business.

Then two weeks later our startup was featured on Product Hunt. That gave us another spike with over 5,000 users. After that, the situation was stable, and we graduated from 0 users/week to a consistent 2,000 to 3,000 users/week.

A couple of months later, motivated by the success of free Get Shit Done Kit, we released Get Shit Done Kit PRO the premium version of GSDK, with more components and ready-to-use example pages.

Initially, we only made a few sales. The product was generating about $200/week, which was not nearly enough to sustain our business. At the same time we were working on a web project for one of our clients.

Then in December, we got published on Bootstrap Expo, the most popular gallery for showcasing websites created with Bootstrap. This was another important spike for our business. Since all of the people who go to Bootstrap Expo for inspiration already know Bootstrap or have previously worked with it, they were the perfect audience for our business.

Later, we discovered that getting traffic on your website is not enough to create a long term relationship with your users, and most of them forgot all about us after their first interaction. We did some research and discovered what most marketers probably already know: people forget things that they aren’t reminded of. Then we implemented the “Remember us email system” following the rules from the forgetting curve.

We wanted to give our users a reminder that we still existed and that we’re a valuable resource for their projects or their clients’ projects.

Currently, we send emails at the following schedule:

After 3 days from their first download, we send an email with other recommended products.
On day 10 we send an email requesting feedback and asking if they need help.
On day 15 we remind them that they can upgrade to PRO.
On day 30 we ask them again for feedback and offer to promote something they’ve built in our gallery and social media.
We send a final reminder on day 60.

3. Marketing strategies we used to grow

Most of our marketing strategies consisted of submitting our content to different communities like Reddit, Product Hunt, Designer News, Hacker News, and GitHub. Some important subreddits that work well in our area include /r/web_design, /r/html5, /r/frontend, and /r/webdev.

We also paid between $100–200 for newsletter campaigns a couple of times. Even though the ROI ratio matched the amount we invested, the campaigns did not meet the expectations. (Maybe this was just in our case, that wasn’t profitable and it works better for others.)

Then we paid $400 for Get Shit Done Kit PRO to appear in the Sidebar.io newsletter, a curated list of the 5 best design links made by Sacha Greif. This was a very rewarding newsletter for us, generating about $1,500 in sales.

Then we purchased the “Review + Newsletter” package ($550) from eWebDesign. There were about 5,000 users who participated in the giveaway, and the total sales amounted $2,800.

We also thought about different places where we could find web developers who could use our products, and we realized that hackathons were exactly what we needed.

Presenting how our tools can help during the Hackathon

Subsequently we started talking to people that were organizing hackathons to offer them free licenses for our “premium products.” We sponsored over 20 hackathons in different cities around the world (you can check them here).

All the developers were happy to get free licenses, which made us happy that we could help them create better projects faster and they also found out who we are, so a win-win situation.

Critically, being physically present at some of the hackathons also gave us a lot of information about how the developers were using our products and how we could improve them in order to make them more user-friendly.

In March 2015, we finished the agency’s contracts and we switched from “Agency mode” to “Startup mode.” With some revenue in the bank and a few monthly sales, our team moved to working full time for our startup. As we put everything together and constantly launched new products, our sources of traffic and revenue grew.

4. How the business model works

We realized that the best business model for Creative Tim was freemium: we create high quality freebies that help web developers build great websites, then release the PRO versions for those freebies, which contain more elements, sections, plugins, and example pages.

At this moment, we have 8 premium products, each of which have their own freebies. Their prices range from $19 to $599, depending on the license and archive type (HTML, HTML + PSD, HTML + Sketch). The freebies appear everywhere on different communities, blog posts, newsletters, and social websites — and they are driving all of our traffic.

Our business model: create high quality freebies that help web developers build great websites, then release the PRO versions for those freebies which contain more elements. ??

The basic idea is that those freebies are always appearing on top 10 lists in these big communities. Each post that’s in the top 10 (depending on how big is the community) gives us between 1,000 and 15,000 targeted users in one day. You can imagine how much that would cost if you wanted to do a regular targeted marketing campaign. ?

Some examples:

Paper Kit — 380 upvotes on Reddit
Material Kit — 560 upvotes on Reddit
Light Bootstrap Dashboard Angular — 210 upvotes on Reddit
Material Kit — 180 uvpotes on Hacker News (peak position 9 with over 14,000 users coming to our website in 1 day)
Material Kit — 860 upvotes on Product Hunt
etc… you got the idea

5. The story behind our revenue sources

Direct Product Sales

Here we have the regular sales that are done on our website, which are worth about 24% of our overall sales. This doesn’t include the Big Bundle.

What is this Big Bundle, and how did we create it? We noticed that some of our users were downloading all our free products. (When I say all, I literally mean all of them in about 2–3 minutes after they have created an account.) We also noticed that some of our clients were purchasing all the products that were premium.

So we decided to test a new product called the “Big Bundle” which gives you access to all our products with huge discounts (over 60%). This big package was getting around 6–8 purchases per month. Since the prices for this Big Bundle is $299 (instead of $500) for the personal license and $669 (instead of $2,127) for the developer license, it’s a good source of revenue and a great deal for the web designers and agencies who are using our products for multiple clients. It’s a win-win situation.

Affiliates Sales

We’ve created an affiliate network, and our affiliates are very happy because they get 50% to themselves from each transaction. For example, one of our most important affiliations is done through a very popular GitHub Repo: Bootstrap Material Design (17,000+ stars on GitHub). Currently, affiliates account for around 25% of our overall revenue.

Organic Search (SEO)

We saw that we were also getting around 22% of our revenue from SEO. So we decided to invest more in SEO, we brought on an SEO consultant, whom we pay around $500/month to improve our products’ ranks in Google.

Other revenue

The remainder of our monthly revenue comes from Facebook, Twitter, and our newsletter. Here’s how our revenue has evolved over time, along with some historically important moments, so you can understand why it has grown in some months:

And here’s a breakdown of how we burn cash:

6. The biggest lessons we’ve learned so far

It sounds cliché, but having a great product is crucial.

A lot of founders really struggle trying to market and sell something that people don’t want or don’t need. If your product is crap, there is no marketing strategy — and no source of investment — that can keep it alive for long.

At the moment, our products are used by over 134,000 web developers around the world. We have people from Microsoft, Ubisoft, Vodafone, Orange, Harvard University, Stanford University, and governmental institutions downloading and using them as different internal tools, and we’ve sponsored more than 20 global hackathons from 14 countries.

Don’t look to be the next Facebook. Try to solve a real problem instead.

Every step in our development seemed like the natural thing to do at the time. Looking back at our evolution, we wouldn’t change anything. But with all we’ve learned, we could definitely do everything faster the second time around.

We’ve always created and improved our products based on our customers’ feedback, and that is the best way to develop a business. It doesn’t matter what you personally like — you need to make sure you solve a real problem for a real customer.

Read, read, read.

In the past three years, I’ve read more than I’d read in my entire life, and this makes me feel great. Here are some of my favorite books, which I recommend to everybody:

I really do think that the secret weapon is to deliver great products combined with a great user experience and a great customer support.

The best decision that we made was to put our customer in the first row, and make sure that they were receiving a great UI kit/Dashboard that really solved their problems. That guided us through the whole journey. Our secret weapon is that we deliver great products combined with a great user experience and great customer support.

Everything is possible.

We are living in a world where anybody can become anything they want as long as they want to invest the amount of time that is needed. I’m saying time, and not money, because we all have time. I want to recommend two books that talk about this: Karaoke Capitalism by Jonas Ridderstråle and Kjell Nordstrom, and Zero to One by Peter Thiel (a PayPal co-founder).

At this point, there are no limits. You can go anywhere on the planet and you can talk with whomever you want just by contacting them through social media. Today an ordinary person can achieve more influence than the president of a small country. Think of those Instagram accounts with millions of followers. If I — a regular guy from Romania — can build a profitable business in 2.5 years that is making 60x my country’s monthly minimum monthly wage, then boy, just about anything is possible.

Thanks for reading! If you have feedback or suggestions, you can find me here:

Official Website: http://www.creative-tim.com
Our Blog: http://blog.creative-tim.com
Email: alex@creative-tim.com
Facebook: https://www.facebook.com/axelut
Twitter: https://twitter.com/axelut

Also, here is my IndieHackers interview that I based this article off of.

I Hope this motivates you to start your own business. Just drop me a message if you have any questions — I would be glad to help you!

Alexandru Paduraru - freeCodeCamp.org

How to Build a Login Page with the Material Tailwind Framework – Step by Step Guide

Table of Contents

1. Introduction to Tailwind CSS and Material Tailwind

What is Tailwind CSS?

What is Material Tailwind?

2. How to Set Up Your Development Environment

Install Node.js and npm

Set up a new project

Text Editor/IDE Setup (VS Code)

Terminal in VS Code

Basic Project Structure

3. How to Install Necessary Dependencies for your Login Page

How to install Tailwind CSS

How to install Material Tailwind

PostCSS and Autoprefixer (Recommended)

4. How to Design the Login Page Layout with Tailwind CSS

Main Container:

Login Card:

Login Button:

Secondary Options:

5. How to Integrate Material Tailwind Components

6. How to Style Input Fields and Buttons

7. How to Implement Responsive Design

class="block font-sans text-4xl font-semibold leading-[1.3] tracking-normal text-inherit antialiased" > Sign In to Your Account

8. How to Add Interactivity and Validation

Toggle Password Visibility:

Client-Side Validation:

Handling Form Submission:

Handling Errors and Feedback:

9. Security and Best Practices for Login Pages

HTTPS and Encryption:

Password Security:

Avoid Verbose Error Messages:

Conclusion

Useful links:

UI/UX Design Guide: What Are UI Designers, and How Are They Different Than UX Designers?

UI Design — How Things Look

UX Design — How Things Work

Cognitive Biases

What Are the Key Differences Between UI and UX Design?

What Do UI/UX Designers Do?

What Are the Disadvantages of a Combined UI/UX Role?

How Do UI/UX Designers Work Together?

What Are the Salaries of UI and UX Designers?

How Do You Become a UI or UX Expert? What Kind of Design Courses/Tutorials Should You Take?

Which Should You Specialize In? UI or UX Design?

Final Thoughts

Adobe XD vs Sketch vs Figma vs InVision - How to Pick the Best Design Software

Adobe XD

Sketch

Figma

InVision Studio

Apps Comparison

1. Pricing

2. Platform

3. Live Collaboration

4. Handoff

5. Offline

6. Prototyping

7. Symbols

Conclusion

We made $1,052,000 in 2018 selling UI Tools. Here is what we learned.

Why do we share “all these secrets”?

Let’s begin! :-)

1. Partnership strategies

2. If you want to be great, stay close to great companies

3. Growth Hacking: from continuous launches on Product Hunt to trending on Github’s front page or features in our country press

4. How different we are from our competitors and why this worked for us

5. Give Back: Sponsorships, Education and Tutorials

6. Can people apply our strategies to different businesses?

7. What’s next?

Thank you for reading!

The anatomy of a Bootstrap dashboard that earns $1,000s each month

1. The basic structure and core functionality

2. How the design was created

3. Built on top of open source and why you should stand on the shoulders of giants

Let’s have a look at what is actually under the hood.

4. Launch, Rise and Shine

5. How we finance the support and requests from the web developers