Designing Dashboards

7+ Graphics Libraries to Level-Up Your Embedded Analytics

By Joshua McClure
Share on LinkedIn Tweet about this on Twitter Share on Facebook

If an application doesn’t look great, it won’t get used. This is true of any web application and certainly holds true when it comes to embedded analytics. If your embedded dashboards and reports look outdated or clunky, your users will quickly bounce out of your app.

Unfortunately, for developers, design skills don’t always come naturally. That’s where graphics libraries and online tools can help.

Are your dashboards and data visualizations looking stale? The Logi platform supports dozens of free libraries and tools that will take your application way above and beyond what’s offered out of the box. Try these graphics libraries to start modernizing your product’s dashboards and visualizations.

Font Awesome
This free font and CSS framework makes it easy to add scalable vector graphics to your web applications. All the icons come out as web font and they’re completely scalable, so you can use them on a tiny mobile screen up to a giant projector and they’ll always look great. They also come without any dependencies, so they don’t depend on JavaScript or other languages. Just add the CSS file to your application and you’re good to go. Best of all there’s no cost for commercial usage, so you can just download it and get started.

Google Web Fonts
This library focuses on high-quality free fonts for your analytic application. They’re scalable and customizable, which means you keep load times at bay by choose to host, say, the regular font with just the italic and bold options, but none of the others. This helps you minimize the load time you’ll need for this particular library. The fonts scale perfectly from a tiny screen on up, and they come in tons of options.

Adobe Color Wheel
The fact that this library features thousands of color combinations is just the beginning. Even better for application developers and product managers: It completely removes the design pressure. With coordinated color palettes, the color wheel will help you create a complete color scheme, all for free. You can also play around with plenty of different color algorithms, so you’re not tied down to just one palette.

Web Languages
The great thing about the Logi platform is we put everything in the box, and it all works and looks great right away. But for developers who want to scale it and make it more than what it already is, we’re behind you. Logi works with a variety of web languages, including the big three—HTML, CSS, and JavaScript—and many others. Your developers can use the tools they already use today to customize Logi. If you have a JavaScript file you already like, you can take that and use it in Logi Studio without any special setup or knowledge needed.

CSS Frameworks
Have a library you’re already comfortable with? Logi probably works with it. A few that we pair especially nicely with:

  • Bootstrap: Bootstrap is made to provide all those front-end interface pieces that you can just pick up and use.
  • Skeleton: If you want to scale down, cut down on bloat, and make sure your app is really streamlined, Skeleton will give you a stripped-down basic framework, then you can build on top of it.
  • Foundation by Zurb: Similar to Bootstrap, this library offers a robust set of tools and components that make it easy to build a responsive application.
  • Materialize: Based on the Google material design that’s been picking up traction lately, Materialize is a completely responsive framework to give you a nice, clean material design with lots of options.

JavaScript Libraries
Right out of box, Logi lets you use JavaScript—whether it’s pure JavaScript or something like JQuery. If you take that library and include it in your analytics application, you get all the benefits of Logi plus your framework together.

Beyond Libraries: Wireframe Tools
We’ve covered libraries you can use. But what if you’re building a new report and you want to make sure it surpasses expectations?

Start with mockups. You can do this the analog way, with pencil and paper or on a dry erase board. This is still good for initial designs and brainstorming sessions. But if you’re dealing with remote employees or a more complex approval process, try digital wireframing tools. Solutions like Balsamiq, Axure, SwordSoft, and Adobe Illustrator allow you to connect with spread-out team members and share wireframes and mockups virtually.

Learn more about modernizing the dashboards in your product in The Definitive Guide to Dashboard Design: Best Practices for Product Managers


Originally published December 6, 2016; updated on July 23rd, 2018

About the Author

Josh McClure is a software developer at Logi Analytics. He's spent time in various engineering and customer solutions roles at Logi, where he's specialized in UI/UX, custom styling, and tailored solutions.