Design + Sketch App — Medium | Pavithra Aravindan

There is a plethora of tools for visual design, wireframing and prototyping. After working with various tools the past year to design analytical dashboards, here’s the ones I find myself reaching for the most.

1. Adobe Illustrator

My design layout for a dashboard

My most favorite tool, ever! Oh, the things I can do with this and the new things I explore each and every day. I think its one of the best tools out there for designing dashboards and visualizations. The reason being it’s vector graphics feature where each and every pixel can be manipulated.

It also has a ‘chart tool’ as you can see in the image above, where you can enter/plug in data from an excel sheet or other sources and visualize the data in any chart type. You can format the chart the way you want and choose to add/remove legends, labels, axis.,etc.

You can also create logos, icons and typography based on the client’s branding and requirements. Additionally, complex & 3D shapes can be created using this tool.

Another really good feature is that it allows you to import pixel-perfect SVG images which can then be used directly in your design. You can also create separate artboards and export it all as 1 PDF which is great for presentations or handing it out to a client.

Price: $19.99 per month or $49.99 per month for all Adobe apps

Drawback: Can be very compute intensive. The size of each dashboard wireframe can be very big.

2. SketchApp

My most favorite tool to use in a Macbook — probably because it is not available on Windows. The best part about SketchApp is that it is very easy to learn and use because of its clean interface. It has the right number of features for creating dashboard UI designs. It is very good for flat design.

Also, the various plugins available for Sketch makes it very versatile and a powerful tool for designing.

Check out my video tutorial above on how to create a simple layout using SketchApp.

Price: $99 one time

Drawback: It is available only on Macbook.

3. Balsamiq

My wireframe for a dashboard

Balsamiq is a great tool for non-designers or beginners in design. It’s easy drag-and-drop-components interface lets users create a quick wireframe. Also, you can import images into it. You can use it online or download a desktop app. I personally prefer the desktop app because it also syncs to your online profile if you want to share the mockup.

Check out my article on getting started with Balsamiq.

Price: $89 one time

Drawback: Very restrictive in what it can create. Cannot plug in Data or change the way the components look or feel.

4. Adobe After Effects

Source: http://ift.tt/29mHbmV

This tool is primarily used for video editing and computer graphics. I wouldn’t recommend this tool if you only want to create static dashboard screens or minimal interactions. This is more for creating hi-fidelity prototypes. You can create the components directly in the tool or import photoshop and illustrator assets to animate.

It is a rather complex tool to learn but it should be easier if you know Adobe Premiere Pro. The various YouTube, Lynda and other tutorials available can help you learn this tool.

Price: $19.99 per month or $49.99 per month for all Adobe apps

Drawback: The interface can be very intimidating with lots of features available. But, for creating dashboard interaction, learning only few of the functionalities will suffice.

5. Origami Studio

Source: http://ift.tt/2o1PVG0

Origami Studio is an updated version of Origami which is a interaction tool created by Facebook. You cannot essentially create application assets using this tool but you can directly import (Copy & paste) what you create in SketchApp to the studio.

You can create a lot of interactions by using multiple modules and connecting them using wires. No coding experience is required although it might look like you need it. You can do very simple to complex interactions. There are many YouTube tutorials for this Design tool.

Price: Free

Drawback: It is available only in Macbook.

6. Adobe Experience Design

Source: http://ift.tt/2nD2dBp

An alternative for SketchApp plus Origami studio. You can create the components & screens and create interactions between them directly in the same tool. It’s a one stop shop for creating wireframes and interactive prototypes. I haven’t used this tool a lot because it is rather new but it pretty easy to use. Unlike other Adobe tools where the interface is very crowded, this has a very clean and simple look.

Price: $19.99 per month or $49.99 per month for all Adobe apps

Drawback: Only beta version is available in Windows. It is much more expensive than other prototyping tools.

7. Invision App

Source: http://ift.tt/1qov39R

This is an online prototyping tool to create interactions. It is very easy to learn because you just have to drag & drop screens and choose the interactions. The great thing about this is that you can select a particular area in your screen and create an interaction for it. Suppose, you have a button on your static screen, you can use a box to draw a square around it and create a pop, flip, slide.,etc transition to the next step.

You can then use the invision app on your phone to see how your prototypes look. You can also share it with people for them to view and even embed it onto your website. And, the person you’re sharing it with doesn’t need to have an invision profile to view it.

It also has many supporting tools such as Inspect and Craft that makes it a powerful prototyping tool.

Price: Free up to 3 prototypes.

Drawback: You cannot create designs directly in Invision.

8. Craft

Source: http://ift.tt/2nD23K4

Craft + Invision + SketchApp/Photoshop is the easiest way to create wireframes and interactive prototypes. Craft is a plugin to Sketch or Photoshop. It has 4 uses to it.

1. Provides an easy way to import data from web, your dropbox or computer.
2. It’s freehand feature lets your team make comments directly on the designs to get feedback instantly. It’s also a good way to draw your designs free hand and it automatically refines it.
3. It has a sync feature which lets you sync your designs to Invision so that you can add interactions online or see how your prototype works in the device you are deploying.
4. You can create interactions between screens directly in Sketch or Photoshop.

So far, it’s been a great tool that goes hand-in-hand with Sketch. I love sketch and using this tool to prototype right in Sketch is a boon.

Price: Free

Drawback: Not very intuitive with Photoshop.

9. Marvel App

Source: https://marvelapp.com/

This is a competitor tool to Invision app. The only advantage it has over Invision app is that the user can interact with the embedded final prototype right on the website. Unlike Invision app, where it takes me to a different page to interact with the prototype.

Even this tool has a Sketch Plugin where you can create screens in Sketch and use this tool to add interactions. Although, you can create simple sketches in the ‘design’ feature on the website.

Price: Free

Drawback: No plugins available for Adobe tools.

10. Microsoft Powerpoint

Source: http://ift.tt/2nCQUJr

Almost everyone has powerpoint on their laptops. So, this is the most accessible way to create dashboards. Powerpoint is growing rapidly in what it can deliver to the user. You can create good looking dashboard screens using the components and charts. It is also very powerful because you can import excel data into the tool to create exact visualizations.

You can also add interactions by using the transition and timing features. Plus, since its a presentation tool, it is great if you have to present your mockup and prototype to someone. Also, since a majority of population knows powerpoint, it is easier for anyone to edit the dashboard.

Price: Free with Microsoft subscription

Drawback: It’s restrictive in the sense of what you can design.

To Summarize

My graph for the design tools

If you know any other tools that you think is good for data visualization, please mention in the comments below.

If you found this article useful, please recommend it. Thank you so much.

Design Tools for Data Visualization was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.