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 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 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 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 is an easy to use JavaScript & HTML5 Charts library built on Canvas element.
Go to site Demo
5. 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 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 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 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 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 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 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
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 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 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 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
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 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 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 creates some nice responsive notifications using jQuery.
Go to site Demo
20. Holler.js
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 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 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 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
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 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
Want to learn more about design? Check out these 9 tips for designing a functional website.
