The field of interactive design is always in a state of change. Apple just released their first watch, screen resolutions continuously get multiplied, and people always need new things from applications.

Both established and new applications evolved quite a bit this past year with the way we create interfaces. Here, I’ll share an overhead view of three tools we used recently to take a digital product from concept to completion: Sketch, Invision, and Origami.

Sketch

This lightweight design application was built specifically for interactive design. Sketch borrows elements from Adobe software and brings in new tools of its own. The simplicity of it can be misleading at first because there aren’t a lot of options. By heavily focusing on interactive design, Sketch has cut out all the unnecessary features that don’t apply.Understanding the user flow is important when designing any interface. It’s incredibly helpful to walk visually through the application by seeing all the different states at once. Any holes in the customer journey are easily identified because for every state designed, there needs to be a logical way for the user to access it.

Understanding the user flow is important when designing any interface. It’s incredibly helpful to walk visually through the application by seeing all the different states at once. Any holes in the customer journey are easily identified because for every state designed, there needs to be a logical way for the user to access it.Sketch was really helpful for us to rearrange the artboards to visualize the way somebody would move through the app. We were able to find similarities between design elements that could be made more uniform for a consistent experience.

Sketch was really helpful for us to rearrange the artboards to visualize the way somebody would move through the app. We were able to find similarities between design elements that could be made more uniform for a consistent experience.
Seeing everything laid out in a single view gave us additional perspective on scope. Moving from wireframes to design concepts, we’ll represent every state with an artboard whether it has content yet or not. As more states are designed, we can zoom out and visually see progress for the entire project. It’s like one gigantic progress bar where we can fill in the artboards with designs as we go.

With a focus on artboards instead of layer comps, we can think of design in terms of states instead of screens. A mobile app requires a lot more input from the user than other interfaces, and every action from the user requires a reaction from the interface. Looking at designs side-by-side allows us to see the nuances and refine the experience in detail.

From here we move from the static composition to an interactive prototype to test and refine a solution. The quicker we can move from concept to prototype the better, so we can keep coming back and iterating on ideas. With Sketch we can export any combination of layers in a matter of seconds. This becomes invaluable when making prototypes because we can test something, make small changes, and test again quickly.

Invision

We’ve used Invision for years to make website prototypes out of designs. Working exclusively within design software will isolate the design in a grey box where nobody else will see it in. Simply putting a design into a different environment can affect the way you see it and make you notice things you otherwise wouldn’t have. Invision allows us to test designs on a browser, tablet, or mobile phone.

At Copious, we upload screenshots of the design and create hotspots to click through that link the pages together. This is a quick way to use the design and see if experiences are intuitive. Screens can be easily updated in-place by dragging an updated version on top of the existing one, so the process remains highly iterative. We can use these prototypes for internal and external usability testing. It can be a valuable exercise to show the design to somebody that isn’t close to the project, explain what the goal is, and see if they understand the intent and execution.

Sketch integrates with Invision flawlessly for incredibly fast syncing. With the right setup, all we have to do is save the Sketch source file and the artboards are automatically updated in Invision with changes. On any given project we are constantly making small changes just to see how it affects the experience. It’s one thing to make the change based on intuition, but actually using the interface helps us see what’s working—and what isn’t.

Invision works great for quick medium-fidelity prototypes, but some interactions require more finesse in the details. Throughout the design process, we’re keeping notes on what we want transitions, movement, and animations to look like. Prototyping those movements before building the product can save a lot of money and headaches. First ideas almost always need some finesse, and it’s a lot better to explore that in this stage than after build.

Origami

Origami is a free plugin that works with Quartz Composer. Facebook developed it as an internal tool then shared it with the design community. We can import design elements as images into Origami and create triggers that transition from one state to the next. Origami is powerful because it offers a library of functions that provide an extensive amount of control.

Once we’ve tested with low fidelity prototypes in Invision and our structure and general flow has been decided on, we can focus on the experience of the app with high fidelity Origami prototypes. Transitions are crucial because they have the potential to make the app feel unique, and remove wait time between tasks. We use animations to orient the user on their position within the app. For instance, if one screen slides in and covers the current one the user will be able to intuit that the previous screen is physically underneath the current one and is still easily accessible.We never want to leave anything to chance. When we design anything, it’s done with intention and a focus on the audience.

We never want to leave anything to chance. When we design anything, it’s done with intention and a focus on the audience.

Have you ever been around a construction site or any type of building project where it looks like there’s a ton of progress being made early on but towards the end, it seems to slow down? As we near the end of the design phase, we’re usually refining the details instead of making large sweeping changes. There’s a lot of nuance and subtlety in the way things move on screen that can make the difference between a good experience and a great one. The imperceptible details provide meaningful interactions to users without making them think about it.There’s quite a big gap between looking at a PDF of a bunch of screens and clicking through a prototype from page to page. Every time we show a client one of our prototypes, they’ll grasp the design on a deeper level than static screens. A prototype allows our team to experience interactions the way users would. Attention is brought to the things that matter instead of being bogged down by things that could change when movement is involved.There’s quite a big gap between looking at a PDF of a bunch of screens and clicking through a prototype from page to page. Every time we show a client one of our prototypes, they’ll grasp the design on a deeper level than static screens. A prototype allows our team to experience interactions the way users would. Attention is brought to the things that matter instead of being bogged down by things that could change when movement is involved.These are three very important tools we use at Copious throughout the design process. We are always trying out new applications that allow us to explore and iterate on our ideas. For every project we’re seeking to create a meaningful experience for the client and their audience. As we use and validate more new tools, we will continue to share how we’re using them to improve our work.

There’s quite a big gap between looking at a PDF of a bunch of screens and clicking through a prototype from page to page. Every time we show a client one of our prototypes, they’ll grasp the design on a deeper level than static screens. A prototype allows our team to experience interactions the way users would. Attention is brought to the things that matter instead of being bogged down by things that could change when movement is involved.These are three very important tools we use at Copious throughout the design process. We are always trying out new applications that allow us to explore and iterate on our ideas. For every project we’re seeking to create a meaningful experience for the client and their audience. As we use and validate more new tools, we will continue to share how we’re using them to improve our work.

These are three very important tools we use at Copious throughout the design process. We are always trying out new applications that allow us to explore and iterate on our ideas. For every project we’re seeking to create a meaningful experience for the client and their audience. As we use and validate more new tools, we will continue to share how we’re using them to improve our work.