UX Tools

There are software, hardware, and no-ware tools that I’ve some to depend on over the years. This is a short list.

Why I Switched To Sketch

dribbble_1x

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.

Sketch BetaScreenSnapz002

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!

Sketch BetaScreenSnapz001

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.

Advertisements

Invision, I’m a fanboy!

invision_logo

I’ll be honest. I’ve kept away from any UX service that feels the need to advertise heavily. I figured that you either have a good tool or you don’t. Well, I was wrong. These folks have been adding feature after feature steadily and I do my best to work it into my flow as much as possible.

What caught me by surprise was how good Invision is beyond clickable prototypes. The commenting, version control, and auto updating of screens is perfect for reviews of still screens, dev notes, and clickable prototypes. This makes it the perfect flow for input by all the stake holders during keys points of the design process. Any agile project manager knows that the days of throwing a “perfect” design over the wall and getting back that amazing app is long over. It’s about delivering a clean and rock solid MVP and then iterating your way to glory. It seems like the Invision crew have a very clear understanding of that reality.

Favorite Feature
File syncing is the bomb! Seriously, this is such a game changer for cranking out multiple ideas lightening fast. I simply use the name my layers/art boards, save the file into the Invision assets folder, and it extracts the files from that source and imports the screens into a project (PSD and AI only at this time but Sketch is around the corner). No more logging in and uploading through a browser. I save and let people know to review. That simple. 👊💥

Update
Sketch file syncing is here! ZOMG
I literally open the file, make my changes, save the file, and it’s all published to the Invision project. Sections, comments, etc are all preserved and the old versions are archived. Revisions, ideation, platform versions… whatever… have never been easier for me. This single feature (which is actually a full scale app in itself) allows me to focus on design instead of process. Love it.

If I had to pick one tool… wipe board.

Wipe Board

You’ll have to pry it from my cold dead hands! More than Photoshop, Sublime Text, or even Balsamiq (which I use A LOT) this wipe board is the most useful tool in the box. It never autocorrect embarrasses me, runs on it’s own power, and can be used anywhere.

I’ve also never really liked paper. I just don’t. Give me a full sized wipe board and a new set of multi-colored markers and I am home. Since I do a lot of work on wipe boards I’ve learned to use Apple’s My Photo Stream. Snap a pict of the board and it’s instantly on all your devices for review. Sometimes I even throw stuff into Pinterest from My Photo Stream. It’s faster than doing it from the Pinterest app while in a session. Try it. You may like it.

Adobe Edge Reflow

ReflowI’ll admit it. I’m a Bootstrap man. That’s how I learned how to work in grids and you can’t teach an old dog new tricks. Well… if they’re good tricks and Reflow is a really good trick!

Adobe Edge Reflow is a WYSIWYG editor especially focused on building static responsive layouts. I say “static” because it’s not too friendly in an enterprise production environment where you can be using erbs, js, or a myriad of other templating systems. This software will crank out basic HTML, CSS, and related fonts and images. That made it perfect for this landing page project I’m doing for The Jerry Garcia Amphitheater.

Edge ReflowScreenSnapz002

Reflow makes it super fast to work on mobile, tablet, and larger at the same time. I can switch between views with a click and see exactly what the layout is going to look like on a given platform. You know me, I like to code so WYSIWYG tools usually make me wince. This one actually cranks out pretty clean and compact code. I was pleasantly surprised.

The Font support is nice but fairly proprietary at the moment. You can use web fonts from Typekit, which Adobe owns, or another partner service. There’s no ability to simply install the fonts you already have locally into a project.

Adobe has not released an official version yet. The one I’m using is a preview release but it’s stable and… well… useful as hell! I’m not a fan of the AdobeCC monthly payment system but that’s the only way to get Edge Reflow at the moment. It’s definitely worth checking out with a Free Trial.

Still in love with Balsamiq Mockups

I hate using paper. I just do. I could never cut anything straight and had an ever present fear of lead poisoning drilled into me by catholic nuns in elementary school. You can imagine my elation when I discovered Balsamiq (now called Mockups by Balsamiq). At the time I was tasked with creating wireframes to show the CEO/Art director (don’t get me started) some ideas. Seemed like the perfect solution to keep his mind off the aesthetics and on the larger issue of pain points, flow, and user stories. What have I used this program for since? Everything! Wireframes, personas, prototypes, even design critiques. The funny thing is that I was raised using Adobe Illustrator for anything that involved the smallest amount of layout. Talk about overkill. Typically I’ll end up exporting the bmml files out as PNGs and dropping them into Keynote or whatever I’m using to present.

Mind Node

MindNode makes mind mapping easy.

I heart this program. It’s astoundingly simple to use and addictive to say the least. I’ve used this for information architecture, ideating, user stories, screen goals for applications, you name it. I’ve even used it for answering lists of questions as that tends to sprout new questions.