UX Confessions: Sketch app gave me a greater appreciation for visual design

Alastair Clegg
Design + Sketch
3 min readJul 27, 2015

--

I started using Sketch app by Bohemian Coding in May 2014. It was the required tool to take a UI/Visual Design course on Udemy. It was pitched by the course tutor as “cheap, easy to use and everything you’ll need”. Back then I wasn’t using Sketch for UI design, just something to create UX documentation on. It worked great, but wasn’t something to shout about. How beautiful should lean documentation really be?

Fast forward to July 2015 and I’m using Sketch for 50% of my work. To put this in perspective; UX documentation (personas, flows, all that good stuff), UI content, UI styling and my ideas all in Sketch. The only thing I don’t use Sketch for is writing documents (I use Google Docs for that) and interactive prototyping (I use Axure for that).

Before Sketch began to dominate my workflow, Axure did. Axure was the go to tool which had all the bells and whistles. Most importantly, it could do the essentials; UX documentation and interactive prototyping. UI styling, UI content and hi-fidelity? This was left to the UI designers. Often I would look over their shoulder while they used Illustrator or Photoshop. Sort of back-seat designing.

The difference between the last two paragraphs, which explain my workflow then and now, isn’t enormous. It looks rather like I now do more hands-on UI design. But that isn’t correct. What has really happened is that I have a greater influence on the UI design. More importantly however, the UI design is beginning to have more influence on me.

One of my enormous Sketch files for a responsive design project.

When a UI designer is working off Illustrator or Photoshop and you’re working from Axure. You don’t have access to each others tools. It is easy to create a mini-waterfall design process. You can create an ugly wireframe and hand it over to the UI designer to work their visual design magic. However, how easy is it to really consider how the wireframe will look when it is recreated? Although there are some UX practitioners out there who will claim they can read the mind of the UI or Visual Designer they work with, those of us without telekinesis cannot. With Sketch, the ease at which you can increase the fidelity, is so easy, that you can make an effort to learn what the UI designer is intending to do and keep it in mind. Perhaps integrate some of it into the wireframe? This is particularly easy if there is an existing style sheet. Symbols in sketch are your friend (if you use them properly).

Furthermore, the handover between UX and UI can be much quicker. I mean much, much quicker. E.g. UX has completing one page and UI is completing the other. This isn’t something that is possible with Axure and Illustrator or Photoshop. Adobe’s programs have much steeper learning curves and what does an Axure ninja do when they’re at the edge of their Photoshop or Illustrator knowledge? Have to rely on the UI designer. This isn’t something that happens too often with Sketch.

Sketch app gave me a greater appreciation for visual design during ideation. I think it will have that effect on other UX practitioners who use Sketch, because all the tools they need to create a higher-fidelity are right in front of them. How happy are the UI designers about this? Not sure, the auto-generate style sheet function might replace them (just kidding).

An auto-generated style sheet (just press generate and it takes all the colours from your design!) amazing!

--

--