Jese Leos                          

Graphic Designer, educator & CEO Flowbite

                         

Feb. 8, 2022

                     

                 

             

             

Best practices for successful prototypes

         

Flowbite is an open-source library of UI components built with the utility-first              classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals,              datepickers.

Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way,              you can think things through before committing to an actual design project.

But then I found a component library based on Tailwind CSS called                  Flowbite. It comes with the most commonly used UI components, such as buttons, navigation              bars, cards, form elements, and more which are conveniently built with the utility classes from              Tailwind CSS.

                       

Getting started with Flowbite

First of all you need to understand how Flowbite works. This library is not another framework.              Rather, it is a set of components based on Tailwind CSS that you can just copy-paste from the              documentation.

It also includes a JavaScript file that enables interactive components, such as modals, dropdowns,              and datepickers which you can optionally include into your project via CDN or NPM.

You can check out the quickstart                  guide to explore the elements by including the CDN files into your project. But if you want              to build a project with Flowbite I recommend you to follow the build tools steps so that you can              purge and minify the generated CSS.

You'll also receive a lot of useful application UI, marketing UI, and e-commerce pages that can help              you get started with your projects even faster. You can check out this comparison table to better understand              the differences between the open-source and pro version of Flowbite.

When does design come in handy?

While it might seem like extra work at a first glance, here are some key moments in which prototyping              will come in handy:

             
1. Usability testing. Does your user know how to exit out of screens? Can they                  follow your intended user journey and buy something from the site you’ve designed? By running a                  usability test, you’ll be able to see how users will interact with your design once it’s live;              
             
2. Involving stakeholders. Need to check if your GDPR consent boxes are displaying                  properly? Pass your prototype to your data protection team and they can test it for real;
             
3. Impressing a client. Prototypes can help explain or even sell your idea by                  providing your client with a hands-on experience;
             
4. Communicating your vision. By using an interactive medium to preview and test                  design elements, designers and developers can understand each other — and the project — better.              
         

Laying the groundwork for best design

Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way,              you can think things through before committing to an actual design project.

Let's start by including the CSS file inside the head tag of your HTML.

Understanding typography

Type properties

A typeface is a collection of letters. While each letter is unique, certain shapes are shared across              letters. A typeface represents shared patterns across a collection of letters.

Baseline

A typeface is a collection of letters. While each letter is unique, certain shapes are shared across              letters. A typeface represents shared patterns across a collection of letters.

Measurement from the baseline

A typeface is a collection of letters. While each letter is unique, certain shapes are shared across              letters. A typeface represents shared patterns across a collection of letters.

Type classification

Serif

A serif is a small shape or projection that appears at the beginning or end of a stroke on a letter.              Typefaces with serifs are called serif typefaces. Serif fonts are classified as one of the              following:

Old-Style serifs

             
• Low contrast between thick and thin strokes
             
• Diagonal stress in the strokes
             
• Slanted serifs on lower-case ascenders
         

             
1. Low contrast between thick and thin strokes
             
2. Diagonal stress in the strokes
             
3. Slanted serifs on lower-case ascenders
         

Laying the best for successful prototyping

A serif is a small shape or projection that appears at the beginning:

             

Flowbite is just awesome. It contains tons of predesigned components and pages starting from                  login screen to complex dashboard. Perfect choice for your next SaaS application.

         

Code example

A serif is a small shape or projection that appears at the beginning or end of a stroke on a letter.              Typefaces with serifs are called serif typefaces. Serif fonts are classified as one of the              following:

<dl class="grid grid-cols-2 gap-8 max-w-screen-md text-gray-900 sm:grid-cols-3 dark:text-white">
<div class="flex flex-col justify-center items-center">
  <dt class="mb-2 text-3xl font-extrabold">73M+</dt>
  <dd class="text-lg font-normal text-gray-500 dark:text-gray-400">developers</dd>
</div>
<div class="flex flex-col justify-center items-center">
  <dt class="mb-2 text-3xl font-extrabold">1B+</dt>
  <dd class="text-lg font-normal text-gray-500 dark:text-gray-400">contributors</dd>
</div>
<div class="flex flex-col justify-center items-center">
  <dt class="mb-2 text-3xl font-extrabold">4M+</dt>
  <dd class="text-lg font-normal text-gray-500 dark:text-gray-400">organizations</dd>
</div>
</dl>

Table example

A serif is a small shape or projection that appears at the beginning or end of a stroke on a letter.          

Best practices for setting up your prototype

Low fidelity or high fidelity? Fidelity refers to how close a prototype will be to              the real deal. If you’re simply preparing a quick visual aid for a presentation, a low-fidelity              prototype — like a wireframe with placeholder images and some basic text — would be more than              enough. But if you’re going for more intricate usability testing, a high-fidelity prototype — with              on-brand colors, fonts and imagery — could help get more pointed results.

Consider your user. To create an intuitive user flow, try to think as your user              would when interacting with your product. While you can fine-tune this during beta testing,              considering your user’s needs and habits early on will save you time by setting you on the right              path.

Start from the inside out. A nice way to both organize your tasks and create more              user-friendly prototypes is by building your prototypes ‘inside out’. Start by focusing on what will              be important to your user, like a Buy now button or an image gallery, and list each element by order              of priority. This way, you’ll be able to create a prototype that puts your users’ needs at the heart              of your design.

And there you have it! Everything you need to design and share prototypes — right in Flowbite Figma.