As a designer myself, I’ve found that folks who don’t get the chance to work closely with designers are often curious to know what we use to shape the designs and experiences we create. How do we get the results we want to achieve?
Just as developers rely on a handful of tools to code their projects, designers use a handful of tools as well. And, in the same vein, different tools are used to solve different design problems. For instance, it’s hard to edit a vector image in a raster program and vice versa.
This article will explore some of the common tools used by experience designers at the HPE Experience Studio throughout the design process to work with stakeholders (i.e. product managers, developers, and design engineers) to develop a solution. What each of these tools provides in terms of details and functionality for prototyping ranges widely across a spectrum, from low-fidelity (sketches and notes for high-level brainstorming and collaboration) to high-fidelity (final, polished pixel-perfect mock ups).
Wireframes
Wireframes are low-fidelity designs used to communicate an idea. Just as the title infers, they are simple lines, boxes, and text (or dummy text) used to pull together a concept or layout well enough to give a clear understanding of the direction being taken. Wireframes are used early in the development process to establish the basic structure of a page before more of an investment of time is made in the visual design and content. Designers use this fidelity of work so that stakeholders don’t get caught up in the fine details of a design, like choice of colors and copy specifics.
Many of the tools used to create wireframes are also used for other types of deliverables. Here are a couple popular ones.
Balsamiq – This tool is almost specifically tailored for wireframes and is very easy for beginners to learn.
Axure – This is another tool that has a specific wireframe “mode”. It is a really powerful tool that can be used for many deliverables; however, it has a steep learning curve. Axure can also be used for high-fidelity mockups and interactive prototypes.
High-Fidelity Mockups
High-fidelity mockups are screens intended to reflect a finished product (or very close to it). They are often used as the final stage in design when visual details are being worked out. High-fidelity mockups are static screens that can also be pulled together to create an interactive prototype (I’ll cover more on this later.).
Sketch – This is a very powerful desktop based tool, and the one our team uses the most. You can use it to go from low fidelity to high fidelity all in one place. While I am a big fan of Sketch, it does have some limitations – particularly in the cloud storage and prototype arena. Fortunately, Sketch developers are currently addressing these limitations.
Figma – This product is available both as a cloud and desktop platform. You can use either Figma’s web-based tool or download their desktop version. Very similar to Sketch, Figma is a newer tool that offers some interactive and code-based design capabilities Sketch does not. I personally love Figma, as their web-based app is responsive, easy to use, and convenient. It also makes it easier to collaborate with others, since the file can be accessed by more than one person in the web app.
Adobe XD – Any list of high-fidelity mockup tools would be amiss if it didn’t include an Adobe product. Adobe XD is a high-fidelity mockup and prototyping tool that has many of the same functions as the tools listed above. It was a bit late to the game (it’s only been officially launched and out of beta for a year), and it just doesn’t feel as easy to learn and use as Sketch and Figma.
Interactive Prototypes
Interactive prototypes are designs that supply a level of interactivity with a user. They might be screens linked together by buttons or displayed interactivity through a form. The intent of their use is to make the design and user experience simulate what you would use in the real app or website. These prototypes can range in fidelity from low to high, as they are stitched together views of the deliverables listed above: wireframes and high-fidelity mockups. Below are some of the tools used to create interactive prototypes.
Invision – With this product, you can upload any images and connect them to create a prototype. In our group, we rely on the stack Sketch + Craft + Invision to deliver interactive prototypes. I use Sketch, as covered above, plus a Sketch plug-in called Craft, which allows users to create links and connect artboards (screens) in Sketch, and then export to Invision. I could skip the Craft plug-in, but the plug-in makes life a lot easier by removing a step for exporting and uploading images.
FramerX– This really cool product allows you to both design and prototype using the same tool. It also allows some code editing of React components. This code editing ability is very helpful because you can use UI libraries based in React (like Grommet) to play around with components and understand what is behind them a little better.
Zeplin – Our team doesn’t use Zeplin, but since it is one of the most popular and widely used prototype tools according to this [survey] (https://uxtools.co/survey-2019/#prototyping), I’ve included it in this list.
React and Grommet – Since HPE has its own UI library (Grommet) it makes sense that the team I work in builds some of our own prototypes as coded prototypes with React.
The funny thing about most of the tools listed above is that many of them can equally be used to create wireframes, mockups, and prototypes. It all depends on what you are looking to do and how you want to get there. Another consideration you might want to take into account when choosing which tools to work with is how you will be hosting the files, whether it’s via a company server or in the cloud. Most of these tools are easily affordable and have a low learning curve to get started. That means that even if you are not a designer, you can explore these tools to communicate design decisions with your colleagues and stakeholders.
Check out HPE design tools you can use with many of the applications listed above. Also, be sure to visit hpe.design to learn more about our team and what we do.