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. […]
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. […]
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 […]
I love Sketch for a multitude of reasons—including the massive library of plugins available to maximize its potential and seamlessly fit it into your workflow. Being a curious person, I’ve spent a lot of time testing out various plugins. These are the five I find myself using on a regular basis.
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 […]
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.
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 […]
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 […]
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: “Can you just send me the Sketch file?” “Can you […]
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 […]