The Master List of UI Design Resources

Are you a developer who’s looking to up their UI design game a little bit? Then good news—you’re in the right place!

We’ve got a ton of primers on some of the basic terms and tools that you’ll encounter regularly when you’re working with user interfaces. Read on to see some of the great resources we’ve put together on UI design:

Figma

If you thought Figma was only for designers, think again! Figma is a powerful tool, with tons of great features for developers to take advantage of as well.

If you’re a developer who works with designers, you’re already familiar with the infamous “handoff”—that point in the workflow when you start turning wireframes and mockups into code. Even if you’re not personally familiar with the process, it’s probably unsurprising to hear that this is often a real pain point. This pain can be lessened, however, when both sides have an understanding of what the other will be looking for in the handoff process.

Designers are expected to have a pretty thorough understanding of the frontend web: HTML elements, the CSS box model, how responsive resizing works, component-based structure, etc. And yet, when we flip the script, developers are rarely expected to have an understanding of design basics—what’s up with that?

Teams work better and create better products when both parties have a high level understanding of each others’ tools and priorities. Not to mention all the ways having access to the design source files can make your own job easier. With that in mind, I’d love to introduce my developer friends to Figma, one of the most popular and widely used UI design tools. It’s free for individual use, so I’d encourage you to go make an account and start playing around! It’s the best way to learn.

Like any specialized software, a Figma file can be a little overwhelming to navigate if you’re not familiar with it. Check out our article, Figma for Developers, to take a look at the the basics—including the features that will be most useful for you as a dev.

Figma Kits

One of the most common ways that developers can take advantage of all that Figma goodness is by leveraging Figma UI kits.

Remember that handoff pain we just talked about? Just as often, the gap between the two teams is caused by miscommunication on a more technical level: designers and developers using the same words to mean different things (“grid” is a common example), lack of understanding about technical capabilities and what’s possible or impossible for each side, or just the natural clash that happens when two parties are approaching the same problem with different methodologies. Thankfully, this has an easy solution—all they need is a bridge. They need something to close the gap between them by aligning them around the same single source of truth.

This is one of the major problems that UI design kits attempt to solve: creating consistency and reducing miscommunication by providing that single source of truth that all parties can reference. UI kits are often a fundamental part of larger design systems—they naturally provide documentation of the components and design tokens that are regularly used in your UI. A full design system is a wonderful asset to your teams, but creating one is a large and time-consuming undertaking. If you’re just starting this process (or still in the phase of getting buy-in for such a project), a UI design kit is a great place to start; you can start seeing the benefits right away, with a much smaller upfront time investment.

A UI design kit (sometimes called a Figma kit, Sketch kit, etc. depending on the design software used) is a collection of all the elements of your UI design, including (but not limited to) fonts, colors, icons, component design files and documentation. These are useful on their own, both as a form of documentation and to speed up the design process by providing a set of base elements that can be reused in new designs, but are especially powerful when combined with an existing UI component library—such as the Telerik and Kendo UI Kits for Figma.

Figma is a popular design software, used and loved by many teams for its extensive collaborative features. With the Kendo UI Kits for Figma, you have a perfect 1-to-1 correlation between the components that the developers are using and the components that the designers are using. Think of it like the Rosetta Stone of UI: the exact same elements, translated into different “languages.”

Design Systems

If you work with designers, chances are high that you’ve heard the words “design system” bandied about at least a few times. UI design systems are a hot topic in the design world right now, and for a good reason—they offer tons of advantages for everyone working on a product, developers included!

A design system is a collection of connected design elements, organized and documented for easy reference. Think of it like a library of all the design resources and assets you could ever need, customized specifically for your application.

Plenty of developers will hear the word “design” and immediately tune out, assuming that this isn’t something intended for them. On the contrary, understanding your way around a design system will vastly improve your understanding of how designs and prototypes are meant to be translated into code and make your life much easier by providing quick access to several resources. This speeds up the development process exponentially, as well as reducing misunderstandings during the handoff process.

Whether your team already has a design system and you’re not really sure what you’re supposed to do with it, or you’ve just heard the term and are curious what it really means, you’re in the right place! Design Systems for Developers takes a deep dive into the purpose of a design system, what’s often included, and how you can best leverage this useful resource to improve the development process and user experience of your application.

Getting Started With Design Systems

While the benefits of a design system are numerous, getting one set up requires a large investment of time and effort up front. Ultimately, design systems are time-savers—a single source of truth that speeds up both the design and dev processes—but that doesn’t mean it’s easy to get one off the ground. Not to mention, everyone might not be completely sold on the idea yet, so asking for a substantial chunk of time right away can be a hard sell.

On top of that, design systems can be a bit of a hard sell just on their own, since they’re a little bit abstract—it can be hard to imagine all the ways in which it will integrate into your team’s daily flow. You can collect data, read case studies and make PowerPoint presentations until the inevitable heat death of the universe, but some folks just need to see something that’s actually functional (even if it’s still in preliminary stages) to truly understand it.

That’s why I highly recommend creating a design system MVP (Minimally Viable Product): a small, starting version of your design system that people can start to use and feel the benefits of right away. This, in my experience, is the best way to get the buy-in you need for the larger project.

But, while “just do it” is a catchy quip (and easy advice for me to give, with no actual skin in the game), it’s easier said than done to “just” fit in design system work around your actual responsibilities. So, how do we get a quick and dirty design system MVP up and running, with minimal time investment, to prove the benefits? We do what great artists have done for centuries: start with someone else’s work.

Thankfully, in this case, you don’t even have to steal anything—you can start with the free Kendo UI Figma Kit and use that as a basis to kick-start a new design system! We walk through the step-by-step process here, in Using Figma Kits to Kick-Start Your Design System.

Creating and Implementing Themes

Application themes are a huge part of what gets documented within a design system—especially if your app has multiple themes, such as light and dark mode, or high-contrast accessibility themes. Each one of those theming options will need to be thoroughly documented as part of the design system.

If you’re just getting started, though, don’t worry—we’ve got some tips! In fact, if you’re using the Kendo UI components, then there are four different ways to style your components and implement a custom theme. Which one you should choose depends on a few factors, such as how much you like writing CSS, how extensive your changes are, and more. Give 4 Ways to Style Your KendoReact Components a read, and make use of a handy flowchart that will guide you through the decision-making process.

Data Visualizations

Data visualization is such an interesting topic because it sits at the intersection of several very different worlds. Obviously, there’s the data part of it: the raw numbers, the statistics, the math. Then, there’s a technical part, especially in the context of creating React apps, and the question of how we approach building these graphics particularly since they are often interactive or animated. Those two aspects are probably the ones developers are most familiar with, and for a lot of folks, that’s the place where they stop. Import the data, pass that data into a chart (probably from an external library, like KendoReact or D3), and ta-da: you’ve got data visualization sorted out.

However, this approach leaves out two other very important aspects of creating effective data visualizations: the story and the design. All data tells a story—the question for us is what we are trying to communicate with the data and what we want the users to take away. Even if our intention is to simply set the data before our users and let them draw their own conclusions, the choices that we make in data presentation will greatly influence how a viewer interprets the information—for better, or for worse.

Which means, by nature, that design is also a huge part of data viz—it’s the way that we tell the story. And that’s the part we’ll be primarily focusing on, today: how to design powerful data visualizations. But it’s important to acknowledge that this kind of design can’t happen in a vacuum, and all those other factors—the information, the technology and the story—all have an influence on the design choices that we make.

When it comes to the UX of your data visualizations, the most important elements to consider are:

• Choosing the right chart: Are you presenting the data in the way that most effectively answers your users’ questions?
• Interactivity: Does this offer enough added value to your users to counterbalance the increased technical lift?
• Responsiveness: Do your data visualizations still look good and function well on small screens?
• Accessibility: Can all your users access your data visualizations?

How To Tackle Data Visualization UX: Tips and Tricks explores each of these key elements and teaches you how to design powerful charts and graphs every time. Give it a read, and start making engaging and effective data visualizations!