UX/Design Tools

My Five Favorite Tools for Mobile App Design

My work as a digital designer has focused on creating digital experiences for (mostly) desktop or laptop users. When I’m designing in Sketch, what I see is really close to what I’ll see in the finished interaction. But what about designing for mobile or tablet apps?

It can be easy to underestimate the size of text or buttons, or even what feels natural when interacting on a mobile device. There is no shortage of tools, free and paid, that attempt to simulate a developed solution. However, I like to keep it simple. Here are the five tools I use to design mobile applications. Read more on My Five Favorite Tools for Mobile App Design…

The Case for Starting Your Project with an Ecosystem Map

At the start of every software project, we spend a few intensive days gathering information about the client, their business, and what they want to build. We have a toolkit of exercises to choose from when we’re planning a customized kickoff. One that always starts us off on the right foot is the Ecosystem Map.

Read more on The Case for Starting Your Project with an Ecosystem Map…

Inspecting Safari’s Web Browser on a Mobile Device

Inspecting the browser gives you access to the details of a website or application. Using built-in developer tools and third-party add-ons, we can view the inner workings of an application.

For example, you can see the content structure in DOM, view the console for logs or error messages, and review network requests for assets being loaded. When debugging a user interface problem, you can use the elements panel to modify live content on the screen, changing the content, type color, or button sizes. Read more on Inspecting Safari’s Web Browser on a Mobile Device…

The Developer’s Guide to Sketch

After several instances of developers ooh-ing and ahh-ing while they watch me quickly navigate and edit in Sketch, I’ve decided it’s time for a developer’s guide to Sketch. This guide will start with the basics and then jump into some very handy tips and tricks, equipping you with the knowledge you’ll need to quickly and painlessly dissect your designer’s files.
Read more on The Developer’s Guide to Sketch…

Using Nested Symbols in Sketch to Build Powerful, Customizable, Enterprise UI Mock-ups – Part 3: Putting it All Together

In the previous two posts, we went through creating some basic building blocks, such as colors and icons as symbols, and combining them into nested symbols for buttons and table cell elements.

If you’ve already read those two posts, I hope you were able to think of other elements that could be “symbolized”–such as primary and secondary navigation, form elements, and other widgets.

Today, I want to talk about how we can put all of these elements together to quickly create Enterprise UI mock-ups that are flexible and customizable.
Read more on Using Nested Symbols in Sketch to Build Powerful, Customizable, Enterprise UI Mock-ups – Part 3: Putting it All Together…

Using Nested Symbols in Sketch to Build Powerful, Customizable, Enterprise UI Mock-ups – Part 2: Buttons and Table Elements

In Part 1, I covered some basic building blocks for nested symbols—colors and icons—as well as grouping symbol groups and proper naming conventions.

In this post, I want to expand on nested symbols to create buttons and table elements that you can quickly customize on the fly. Read more on Using Nested Symbols in Sketch to Build Powerful, Customizable, Enterprise UI Mock-ups – Part 2: Buttons and Table Elements…

Using Nested Symbols in Sketch to Build Powerful, Customizable, Enterprise UI Mock-ups – Part 1: Getting Started

If you have found this article, chances are you are working on some Enterprise-level UI mock-ups. Chances are, you find yourself recreating the same navigation elements, buttons, filter lists, table headers, and cells…Chances are, you’ve noticed that there are many elements that are quite similar, but have minor differences. And chances are, using customizable symbols is going to drastically speed up your process! Read more on Using Nested Symbols in Sketch to Build Powerful, Customizable, Enterprise UI Mock-ups – Part 1: Getting Started…

Creating a Dynamic Catalog with InDesign Templates & XML Data

My task for a recent project was creating a print catalog. The catalog content was constantly being updated, but each entry needed to have the same visual style. I knew there must be a way to do a majority of the design work and then “data merge” the content to the style, but it sure wasn’t easy to figure out. 

It took a ton of time piecing together a number of blog posts and experiments to find a repeatable process that worked for me. So here is my solution, combining InDesign and XML. Read more on Creating a Dynamic Catalog with InDesign Templates & XML Data…