UI/UX Design: My Top 5 UI Design Libraries | by Nick Lawrence | Jan, 2022


Sometimes when you’re doing UI and UX work you need to spec out designs that are programmatically-driven.

This approach isn’t for everyone, and I certainly wouldn’t recommend it for every designer/design scenario, but for some situations it can really help to smooth the handoff between the designer and the developer.

Today, I want to share with you five of my absolute favorite libraries that I like to use when designing UI for the web.

Hated by some, loved by most, Bootstrap is a time-honored general UI library for fleshing out robust interfaces quickly, and efficiently.

Instead of writing all of your code from scratch, Bootstrap comes with a variety of pre-built and pre-styled components that you can use as a solid foundation for your design, and can be tested with real users for validation.

What I like about Bootstrap is that, while its definitely opinionated and exists on the opposite side of something like Tailwind, it offers you a documented common language that you can share with your devs.

Moreover, it can help improve the accessibility of your site by enforcing better compliance techniques, though you will definitely want to have a talk with your devs when it comes to aria-labeling, and accessibility tools such as screenreaders.

Bottom-line: Bootstrap 5 is a great choice for building layouts and scaffolding responsive sites before diving deeper into custom styling.

Let’s say you want to add a little motion to your page and some scrolling effects that can help drive engagement.

AOS (Animate on Scroll) can help you do just that.

Essentially, you install it like any other stylesheet and script via CDN:

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">...<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

and then call it as an embedded script at the bottom of your page, or inside of your main script file:


Then you can just add the scroll effects to your page elements as data attributes and AOS will handle the rest!

<main class="home-example" data-aos="fade-up"

Check out the link here for demos and further instructions.

Let’s say you really want to jazz things up and get some more advanced interactions happening. Tilt.js is a great way to make that happen.

Note: I would highly recommend using the library Vanilla-Tilt, as it does not have jQuery dependencies, which can be nicer in some cases.

Essentially, Tilt takes any element that you apply it to, and makes it tilt in response to mouse movement in 3D. I believe this used to work on mobile as well, but there are some API issues that browsers take with requests to gyroscope now so I’m not sure if it works any longer in that respect.

Again installation via CDN is super easy:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js" integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

and installing it on your page is about as easy as it gets:

<div class="your-element" data-tilt></div>

<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>

Check out the link here for demos and further instructions.

When you need to get your type specced out quickly and effectively, I have found Type-Scale to be one of the best overall solutions.

Instead of sitting there and writing out all your type specs in CSS by hand, typescale allows you to spec your type visually, so you can get it exactly how you want to see it, and then adjust it by hand in the CSS later if you need more granular control.

Just because I’ve been asked in the past, for most projects I recommend:

  • 700–900 font-weight headings
  • 300–500 font-weight body copy
  • 1.5 (150%) — 1.75(175%) for body copy line-height

These settings normally result in good contrast between your headings, your body copy, and allow your content to be more easily scannable for your user.

Installation is simple as it outputs CSS at the bottom of the page:

Oh, and just as a reminder for my designers: avoid using 100% black on your text if it’s on a white background whenever you can, as it can actually make it harder to read.

Returning to Bootstrap for just a minute: it can be a little painful to write overrides for literally everything and deal with that every time you kickstart a new project.

To that end, I want to make sure you have a solid choice for helping you spec a theme for your project and I have found a great resource for that Themestr.

Instead of you having to write all of your basic overrides manually, you can specify what colors, spacings, etc. that you would like Bootstrap to use, download a complete theme.css file, and just include that in your code as an override.

Essentially, you’ll want to install your theme file after your bootstrap file in your page’s load order.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><link href="your-theme-here.css" rel="stylesheet">

Once you’ve done that, your overrides should start automatically showing up on your page!

Today, you checked out five of my absolute favorite libraries that I like to use when designing UI for the web.

These are:

  1. Bootstrap 5
  2. AOS-Animate on Scroll
  3. Tilt.js
  4. Type-Spec
  5. Themestr

I hope you find these helpful in your UI design journey, and if you like this type of content, please feel free to leave a clap or two if you’re so inclined.

Source link

Leave a reply

Please enter your comment!
Please enter your name here