The Low Down I’ve been doing presentation layer design and development on corporate web sites since 1996 when I lead small team on the first Toyota.com. That was a lifetime ago and a lot has changed. The thing is… some of my tools hadn’t. Back then we used HTML 1, inline Javascript, Perl middleware, and Adobe Photoshop & Illustrator to crank out assets. At the time those were the best tools for the job. The landscape has changed a lot since then. If I told anyone that I was building anything the way I did in 1996 I’d be run out of town with one exception… Adobe Photoshop & Illustrator. Eighteen years later the majority of classrooms are sending designers into the world with a new set of expectations and techniques but armed with the same basic tool set, Adobe Photoshop & Illustrator.
Adobe has kept up pretty well by adding features and acquiring plugins to meet the needs of a growing software development market but at their core Photoshop & Illustrator are not dev tools. They are photo editing and illustration tools that have been adapted to design and build software. Instead of doing one thing really well, they try to cover the needs of photographers, print designers, web designers, production artists, illustrators, developers, etc all in mega-packages or “suites”. Consequently, we now have one of the most complex, feature packed, and bloated software packages around. Unless you have all of those jobs, and I have maybe three of those, you’re going to end up using about 1/3 of the software that you pay a lot of money for. Why? Oh, because it’s the “industry standard” with a new pay per month model. Pfft
Enter Sketch into my life. In 2013 I found myself building a small iPhone app and figured I’d try and use some more modern tools. I’d heard a bit of buzz about Bohemian Software’s take on a design/production application made specifically for crafting software. That’s right, it does one thing… really really well.
This is where I begin a list of features that have not transformed my work flow, they have fit into my work flow like a hand in a glove.
Object Based I loved Adobe Fireworks because it treated pixels the way Illustrator treated vectors, like objects. Sketch carries on with that tradition. This allows me to build style guides by building usable libraries of buttons, panels, all that UI goodness that apps need to gather and spit back user data in a human digestible way.
Every shape, bitmap, or text item in a Sketch doc is an object in the layer list. Everything is treated the same way whether you want to transform an element or edit a path within it.
CSS Friendly Inspector Sketch knows that the foundation of a modern presentation layer is CSS3. If I make a gradient, drop shadow, or border combination in Sketch I know that I can export it directly to usable code. No more designing and hoping I can figure out how to make it so.
Symbols & Styles Okay, this is hardly “new” but it’s still a life saver. I specialize in Lean UX/UI so I typically build things with an agile team. That means that I’me designing and coding as features are built. This allows me to iterate at rapid speeds which can often be a pain in the ass. The UI never looks the same as it did in version one so it’s imperative to have an efficient way update previously designed and exported elements like buttons, navs, etc.
Pages & Artboards Mobile first, desktop first, whatever… Sketch allows me to place any size (mobile, tablet, desktop) artboard next to another. This allows me to design for all of those formats at the same time. Game changer!
Exporting This is the easiest and most useful method for exporting items that I’ve ever used. With one click I can send multiple sizes (retina screens), multiple formats (SVG!), from any page in the doc.
Mirroring Sketch takes advantage of Apple’s Airplay API to send an dartboard directly to another device in real time. This means that I can see my tablet layout on my iPad while I’m working on it… without exporting anything. As I change the layout on my screen it’s changed on any device I’m connected to. Yes, I can connect multiple device at the same time.
Comments