UX: design, sharing and collaboration apps, and specification tools

I’m still feeling my way through working in UX. My repeat client is a team of developers of SAS web applications. They code and my job is to make their mighty, very powerful and feature rich web apps pretty and simple looking. I work in graphic design software, share the jpegs, get feedback, make changes, then hand over the PSD source files for the devs to pick apart, which adobe makes really nice and easy with their online tools.

Only, Photoshop is really a very big, slow behemoth for UX design. While nothing can touch it for editing images, photos and logos to perfection, it isn’t fast to work with. I used to design websites direct in the browser, only using photoshop for wireframes and creating assets like backgrounds and headers, so I didn’t ‘get’ why many in the community bemoaned the death of fireworks. Let’s just say, I get it now.

Enter Sketch. I downloaded it reluctantly, initially distrusting anything that seemed to get so many mentions online. It felt like the hipster mustache of the design world and I was sure I would hate it. On the other hand, it has a one off price, as opposed to adobe’s subscription model (which essentially pays for a new shrink box version of photoshop each and every year), and people kept saying it was ‘lightening fast’. Since I’m freelancing, anything that speeds up my turn around time translates into me earning more, and that was worth investigating. I got a copy, and a short but extreemly helpful course on Udemy which got me running in it in no time, and started using it for projects right away.

The verdict? YES, sketch is better for UX. This isn’t a debate or even an opinion anymore. It’s just a fact, like the legality of gay marriage, or the reality of global warming. Our feelings, nostalgia, or idealogoy don’t factor into it.

It is annoying that it’s mac only, but that’s the way the web design community rolls now. All the cool toys are for mac. I used to be a PC girl, but you gotta move with the times.

So, as far as tools go. It’s sketch. I will try and kill my photoshop subscription if possible within the next year. The money saved on that alone can buy me a mac mini (not that I’d want one to work one..) or new thermomix within a year (or at least save in case either laptop or thermomix die suddenly), so it’s not just me being “anti- the man” here. It’s actually quite a lot of money I spend for this product, for not a lot of return on investment, since I’m not a photographer nor working in a photo rich industry.

Review and feedback
I use Skype for discussing the project and it’s scope, and for online group meetings, and have used skype’s screensharing for reviewing files while still inside the design application, but I so much prefer to use InVision for feedback now.  I like that I can sync it up to upload screens straight from sketch (or PSD) file layers so I don’t need to export and upload anything, and I add interactive hotspots to the next screens to help me and client better visualise how the finished app will work, and any interactions that need considering.

It also saves all versions of the file and works as a image SVN tool (do you remember layer vault?) allowing me to download and go back to a previous design iteration. Really, I can’t say enough good things about InVision. It’s simple to use, I can see every change I make to the file online within seconds (on a fibre optic conection, at least) and my client sees all the screens I’m working on, linked together or in a slideshow, as I prefer,  and can place comments on specific parts of the design so we don’t misunderstand each other when he talks about “the dropdown”. I can also add the developers to the project so they can download all the assets, such as fonts, source files, and backgrounds, but I’ll discuss that a bit later.

I’ve also used UXPin for demoing designs and showing UX interactivity, but it’s just slower and is designed for building interactivity demos, rather than design collaboration. It needs exporting from the design app and is just slower for my day to day work. It’s a very powerful application which lets you design from lowi-fi mock ups to high fedelity apps in the browser, but I don’t see myself using it enough to pay for it right now. I have upgraded my InVision account, however.

Handover and collaboration
I’ve said before that the devs pick apart the final files for building. Unfortunatly, the only layered file I can export (other than a .sketch one) from Sketch is SVG. And SVG files are basically the 5th circle of hell. Groups of layers (e.g. for menus, navigations buttons, drop down layers) all get ripped apart. Names are discarded and replaced with numbers. NO, I am NOT handing over that nightmare to developers.

Sketch does allow you to copy and paste CSS from groups and from individual layers, and I will take time compile a css document of styles and tidy it up and make it into something a human can understand (automatic code is always slightly incomprehensable and ‘dumb’, even at the best of times) without assuming too much about how they should mark up the page. I’ll comment things like “navigation text” and “navigation buttons”, for example, rather than “li” or “nav container”. Maybe I should make more assumptions and stick with bootstrap terms. I also export the assets, which sketch makes easy to do for different formats in one shot.

Invision allows me to add co-workers to a project and then they can access all the assets associated with the folder, but I don’t want my clients to see me making changes to new screens as they are being designed, so I’d rather use dropbox for handover of raw files and assets for now and keep using InVision for review and feedback.

I’m also really loving Zeplin for making the styleguides right now. Unlike my manual approach, zeplin allows me to add features and screens without needing to go back and re-edit my style sheet. It basically acts like adobe’s online asset sharing page, where each screen has all elements measurable, and all fonts and colors are visible for picking apart, and all styles copyable. I think it perfectly meets what the devs want to be able to do, with how I like to work and I can see myself upgrading from the free account.

So, that’s my current toolset for work right now. I also started to use diigo screencapturing for UX research and for storing design patterns, but those screens are saved as ‘private’ by default. I do prefer saving my screenshots online and tagged for reference rather than cluttering up my harddrive with a million screenshots in folders (I know I can tag my files on mac, but I rarely do while saving them), so I think that’s here to stay.

Any suggestions or comments? I’ll come back and re-write this a little bit later when I have a moment, but if I don’t post today, the chances are this draft will languish forever unpublished while I attend to the endless list of “important things”.

“Perfection is the enemy of done”, right?