large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<a href="http://ift.tt/2o1Rns2">Design + Sketch App &mdash; Medium</a> | Pavithra Aravindan <img alt="" src="http://ift.tt/2nD2bth">
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.
<h4>1. <a href="http://ift.tt/HJEbO9">Adobe Illustrator</a></h4>
<img alt="" src="http://ift.tt/2o1NROs">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 &amp; 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.
<h4>2. <a href="http://ift.tt/1Ls7nHW">SketchApp</a></h4>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FVfEAAkVR2a0%3Fstart%3D2%26feature%3Doembed%26start%3D2&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DVfEAAkVR2a0&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FVfEAAkVR2a0%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="http://ift.tt/2nCU93C">http://ift.tt/2nCU93C</a></iframe>
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.
<h4>3. <a href="https://balsamiq.com/">Balsamiq</a></h4>
<img alt="" src="http://ift.tt/2o1F6E2">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 <a href="http://ift.tt/2nDbzgh">article on getting started with Balsamiq</a>.
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.
<h4>4. <a href="http://ift.tt/wd5KyP">Adobe After Effects</a></h4>
<img alt="" src="http://ift.tt/2nD641o">Source: <a href="http://ift.tt/29mHbmV">http://ift.tt/29mHbmV</a>
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.
<h4>5. <a href="http://origami.design/">Origami Studio</a></h4>
<img alt="" src="http://ift.tt/2nD0CLL">Source: <a href="http://ift.tt/2o1PVG0">http://ift.tt/2o1PVG0</a>
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 &amp; 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.
<h4>6. <a href="http://ift.tt/2nD200Z">Adobe Experience Design</a></h4>
<img alt="" src="http://ift.tt/2o1PTxS">Source: <a href="http://ift.tt/2nD2dBp">http://ift.tt/2nD2dBp</a>
An alternative for SketchApp plus Origami studio. You can create the components &amp; 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.
<h4>7. <a href="http://ift.tt/Milx48">Invision App</a></h4>
<img alt="" src="http://ift.tt/2o1UyjD">Source: <a href="http://ift.tt/1qov39R">http://ift.tt/1qov39R</a>
This is an online prototyping tool to create interactions. It is very easy to learn because you just have to drag &amp; 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.
<h4>8. <a href="http://ift.tt/1pZWfMs">Craft</a></h4>
<img alt="" src="http://ift.tt/2o1TqMH">Source: <a href="http://ift.tt/2nD23K4">http://ift.tt/2nD23K4</a>
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.
<ol>
<li>Provides an easy way to import data from web, your dropbox or computer.</li>
<li>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.</li>
<li>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.</li>
<li>You can create interactions between screens directly in Sketch or Photoshop.</li>
</ol>
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.
<h4>9. <a href="https://marvelapp.com/">Marvel App</a></h4>
<img alt="" src="http://ift.tt/2o1GoP8">Source: <a href="https://marvelapp.com/">https://marvelapp.com/</a>
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.
<h4>10. <a href="http://ift.tt/2nD2pQQ">Microsoft Powerpoint</a></h4>
<img alt="" src="http://ift.tt/2o23qFD">Source: <a href="http://ift.tt/2nCQUJr">http://ift.tt/2nCQUJr</a>
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.
<h4>To Summarize</h4>
<img alt="" src="http://ift.tt/2o1QT5f">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.
<img src="http://ift.tt/2nD5II0" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2o1RJPb">Design Tools for Data Visualization</a> was originally published in <a href="http://ift.tt/1OWmBEs">Design + Sketch</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Design Tools for Data Visualization

Design Tools for Data Visualization

1. Adob…

Top Stories