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…

How InVision’s Inspect Can Give Your Team One Source of Design Truth

Turning your visual designs into a polished product can be a challenge. This is especially true when the person creating the visuals is not the one to create the code. Depending on your project’s team structure, you as a designer may have heard questions like this:

Read more on How InVision’s Inspect Can Give Your Team One Source of Design Truth…

First Thoughts with InVision’s Craft Plug-in for Sketch

I have been quite a fan of the products from InVision.  They make creating clickable prototypes a breeze.

For quite a while now, InVision has supported uploading entire Sketch files, which has reduced the user’s pain of exporting each asset individually and then uploading those assets to InVision.  They are now taking things one step further with the Craft tool. Read more on First Thoughts with InVision’s Craft Plug-in for Sketch…

SVGO – A Handy Command-Line Tool for Compressing SVG Images

I recently wrote a series of posts about image optimization and the importance of reducing image file sizes on websites (Part 1, Part 2).

When it comes to optimizing images, there are many techniques and tools available. One of my favorites is a tool called SVGO, short for SVG Optimizer. As you might guess, SVGO is a tool for optimizing Scalable Vector Graphics (SVG) images.
Read more on SVGO – A Handy Command-Line Tool for Compressing SVG Images…