Tools of the Trade: Interface Design (2018)

What’s in the Toolbox of a Digital Design Professional

Posted by Matthew Farleo on 22nd Apr 2018

The thing to remember is that these are all tools. Ultimately it is the designer that creates the designs, not Photoshop or Sketch.

TL:DR There are a number of different tools that can be used when creating digital products or moving through digital production on a project. The most important being the fundamental understanding of the users, or being able to put yourself in the shoes of your customers via empathy. Outside of the knowledge-based tools, there are a number of applications, software and analog instruments to create the required deliverables to ensure the UX team is building the app that everyone has agreed on.

Implements of Interface Design

From starting a project with early sketches and concepts to developing high fidelity, designed compositional layouts (comps) or mockups, the digital product industries tools are constantly updating and shifting based on what is providing the best experience for designers. It is important to realize however that the creation of an intuitive user interface comes down to the work of the designer, the software mentioned herein are just tools, ultimately the work is the responsibility of the designer. That is to say that these tools are a snapshot of the total landscape of digital production implements (the tools that I use on a regular basis in my position as a professional interface designer) and designers can use a variety of other tools or means to accomplish design tasks.

Tools for Starting a Project

When working through the initial ideation and conception for a digital project, iteration is paramount. The ability to quickly concept and work through multiple ideas and approaches to solving the problem presented by the product owners will allow the team to quickly discover points of discussion and any potential roadblocks to the production process. To create these rapidly evolving and changing definition level items it helps to get all of the project stakeholders together and do a whiteboarding workshop. Whiteboarding is the method of using a whiteboard to rapidly draw up different layouts, organizational structures and workflows, allowing the team to quickly try out solutions. If the whole team can’t be available or whiteboarding isn’t an option, quickly sketching (pencil and paper) concepts and discussing them with your team in order to ensure you are moving forward with the best possible solution.

As technology has evolved, this initial phase of quick conception has been aided by the creation of a few new softwares to create these quickly iterative concepts. One tool that I have used effectively in the past is Balsamiq, but some other examples include LucidChart or Moqups. These softwares have been specifically created to quickly manufacture low-fidelity mockups that can be used to ensure the team is aligned and solving the problem in the best way.

Adobe: The Granddaddy of Design Software

When creating final, presentable deliverables, the industry go-to is Adobe. Adobe is, and has been, what most creatives and designers use to create anything from T-shirt and poster designs to newsletters to interface design. Undoubtedly if you are reading this you are familiar with Photoshop (for photo manipulation and raster graphics), Illustrator (for vector graphics) and InDesign (for print and publication design). These softwares have been around long before interface design evolved into what it is today, and as such using software that was initially setup for print design projects can make using Adobe products slightly “clunky” when designing interfaces. Adobe has tried to address this with the creation of AdobeXD, which is specifically an interface design and prototyping software. Which is off to a great start, but is lacking key features that are available in other software, which leads me to Sketch.

Sketch, Craft and Invision: The Modern (2018) UI Designer’s Workflow

In 2010, a Dutch company called Bohemian Coding released a vector editing application, and in 2012 that application won the coveted Apple Design Award. That application was Sketch, and since then it has become an essential tool in a typical Interface Designer’s toolbox. Sketch was made to solve the problems that interface designers typically face when using traditional design software (see Adobe), and is much more efficient when creating digital mockups. I’ve heard it said that for every three hours a designer would spend in Photoshop creating an interface, they would only spend an hour creating the same thing in Sketch. Additionally, Sketch can be extended using a variety of plugins, most significantly being Craft. Craft was created by Invision to streamline the process of going from a static mockup to an interactive prototype in the Invision application, transferring the designed files from the designers computer to the Invision application.

Invision: Building a Digital Prototype

Invision is an incredibly powerful application that can both facilitate collaboration as well as help define projects by testing prototypes. Basically anything that can be created in design software (sketch, adobe, etc.) can be uploaded and made interactive. Using Invision, a designer can link information architecture documents together (think screen/content maps to sitemaps) to provide a better understanding of context of content throughout the site, or simply upload screen mockups to allow users a chance to try out workflows before anything has been developed. This means that individuals without an extensive coding background can create interactive prototypes to ensure that what will be developed works as advertised.

Additionally, when using the Craft plugin in Sketch, the uploaded files contain all the valuable information required for a development handoff. This includes everything from CSS information on fonts and headlines to hex values of colors and responsive grid information. So not only does Invision provide a valuable service to designers, it also provides the means for a seamless handoff between teams.

Where Do We Go From Here?

Obviously this is not the full gamut of digital design tools out there currently and these don’t even cover all of the tasks that a UX designer might be called on to accomplish. For instance, interaction design and animation has a number of different softwares (Principle,Adobe AfterEffects & Haiku to name a few) that can be used to engineer interactive elements. As was stated at the beginning of this article, the tools included above are the tools that I use as a professional user experience and interface designer regularly.

All of the tools mentioned above are relatively new (most are under 10 years old) as interface design has evolved rapidly to maintain pace with technological advances. Therefore, in addition to understanding the current digital design tools, a user experience designer should always be looking to understand future tools that can provide their work with more impact. An example of a potential shift in toolsets is happening right now, as InVision has announced its own design software, InVision Studio, which could revolutionize the workflow of UX designers across the world.