As a follow up to my post last year “A Financial Web Designer’s Toolkit” I thought it was time to revisit some of the tools that our team here have used or shared recently. When it comes to information design and building such things as Secure Web Portals and Tools for Fund Manager websites, we use a whole host of web technologies to make products that not only function well, but also look awesome. 

Charts Tables Notifications Sorting Type

Charting Libraries

Web pages using static charts are now a thing of the past (or at least they should be). There is no longer any need for complex Flash-based solutions to render or make data interactive – with a large choice of paid-for or open source solutions available. HTML5 (using the canvas element) and cunning JavaScript can create some truly awesome results.

1. Highcharts

highcharts
Highcharts is a charting library written in pure HTML5/JavaScript. In addition to working on just about any device, it comes equipped with a large library of charts to choose from. It also features Highstock which is useful for stock charting and includes a timeframe zoom feature.

Go to site Demo

2. Flot

flot
Flot is a pure JavaScript plotting library for jQuery. It is extremely simple to get going, and there are interactive features such as panning and zooming that can be added via a navigate plugin.

Go to site Demo

3. Chart.js

chart.js
Chart.js uses the HTML5 canvas element and JavaScript to generate really clean and striking charts. This is a very lightweight library and there are some cool chart types to choose from — this library is for rendering charts really nicely rather than making them interactive.

Go to site Demo

4. CanvasJS

canvasJS
CanvasJS is an easy to use JavaScript & HTML5 Charts library built on Canvas element.

Go to site Demo

5. Sigma.js

sigma.js
Sigma.js is an open-source lightweight JavaScript library that draws graphs by using the HTML canvas element. Some of the results are quite breathtaking.

Go to site Demo

Data Tables

As with charts – users expect some interactivity and control with tables, especially with large amounts of information. Column sorting, pagination and other dynamic features create a better UX, with lots of JavaScript plugins available online. Better tables = better information web design.

6. DataTables

datatables
DataTables is a powerful plugin for jQuery and is great for taking control of large amounts of table data. Amongst other features, it gives you pagination and column header control, plus it can integrate with jQuery UI themes and even Twitter Bootstrap.

Go to site Demo

7. TableSorter

table sorter
Table Sorter is a useful jQuery plugin that makes HTML tables sortable. It’s a lightweight library and comes with a bunch of configurable options.

Go to site Demo

8. Flexigrid

Flexigrid
Flexigrid is a stylish jQuery plugin for handling tables. It adds cool features such as pagination, column sorting and search.

Go to site Demo

9. jTable

jtable
jTable is a jQuery plugin that is used to create AJAX based CRUD tables without coding HTML or JavaScript.

Go to site Demo

10. FooTable

FooTable
FooTable solves the issue tables have when it comes to displaying on mobile devices, by letting you choose “breakpoints” based on device widths. It also comes with features like sorting and filtering.

Go to site Demo

Filtering & Sorting

As a kind of extension to tools that can help deal with tables – there is often a requirement to deal with sorting and filtering of HTML objects, such a document thumbnail gallery. There’s a bunch of awesome HTML5/CSS3/JavaScript tools that can assist to create an attractive and engaging UI.

11. Isotope

isotope
Isotope uses CSS transitions, transforms and jQuery to create a beautiful user experience when sorting or filtering items on a web page. There are loads of configuration options that can be used to work with functions like infinite scrolling and URL hash history.

Go to site Demo

12. Quicksand

quicksand
Similar to Isotope, Quicksand uses smooth CSS3 transitions and jQuery to neatly sort and filter any items on a web page.

Go to site Demo

13. MixItUp

mixitup
MixItUp is a “jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content”. It’s ideal for using with responsive/fluid layouts and has some cool configuration options.

Go to site Demo

14. TinySort

tinysort
TinySort is a lightweight and simple plugin that will “sort any nodetype by it’s text- or attribute value”.

Go to site Demo

15. Filtrify

filtrify
Filtrify is a really impressive plugin that uses HTML5 and jQuery to allow the user to filter and search on tags using the “data” attribute.

Go to site Demo

User Notifications

If you’re building a web app or a site with complex features, consider keeping your users informed with notifications. As the user completes various functions it’s great to visually let them know that their action is successful (or in some cases, unsuccessful). This keeps their user journey ticking along nicely, and in turn, makes your product more “sticky.” There are some great JavaScript solutions that use frameworks like Twitter Bootstrap and offer quick implementation.

16. Pines Notify

pnotify
Pines Notify are JavaScript notifications for Bootstrap or jQuery UI. The notifications appear, stack and fade gracefully in the top-right of the screen. It also comes with a cool history button so you can see a log of previous messages.

Go to site Demo

17. Noty

noty
Noty is a nifty little jQuery plugin for displaying notifications in a variety of styles. There are options in the API to customize the text, animation, speed, buttons and so on.

Go to site Demo

18. jNotify

jnotify
jNotify is a really easy-to-implement plugin to display messages or information (such as success or failure), that can be skinned via CSS. Truly awesome information design means taking your dialog boxes and other notifications seriously!

Go to site Demo

19. ToastR

toastr
ToastR creates some nice responsive notifications using jQuery.

Go to site Demo

20. Holler.js

holler
Holler uses Node.js to display notifications in real-time to web or mobile apps.

Go to site Demo

Type Tools

In amongst all the data you are trying to beautify, there are areas of type on a web page that you might want to take maximum control over and bring to life. Luckily JavaScript comes to the rescue yet again. There’s a variety web type plugins out there to help you:

21. FitText

fittext
FitText is a awesome plugin that resizes text to fit certain areas. If you have a responsive or fluid web app, this can help maximize the info design impact for specific areas of type on a page. (See also #25 BigText, further below.)

Go to site Demo

22. Bacon!

bacon
Bacon is a jQuery plugin that allows you to wrap your text around a Bézier curve or line. Check out the site demos for some impressive results!

Go to site Demo

23. Arctext.js

arctext
Arctext is a handy plugin that lets you curve text to your requirements via one line of JavaScript (and using CSS3).

Go to site Demo

24. Kerning.js

kerningjs
When you need the kind of type control that you get using DTP applications – Kerning.js lets you adjust character kerning.

Go to site Demo

25. BigText

bigtext
BigText is a jQuery plugin that “calculates the font-size and word-spacing needed to match a line of text to a specific width.” See this thorough FitText comparison by BigText creator Zach Leatherman.

Go to site Demo

Follow me

Luke Hinchliffe

Senior Designer at Kurtosys – passionate about digital marketing and design for financial services.
Follow me

Latest posts by Luke Hinchliffe (see all)