Talking systems
Design tools of today (part 2)
Back in September last year, I wrote the first part of this article. While I could say that I have strategically taken eleven months to do the follow up, I would be lying. That being said, this larger-than-intended gap means that I am able to discuss some interesting developments in the world of design tools. Let’s dive in…
Communication is key
As with successful teams, communication between successful design tools is key. Having an amazing design tool will allow you to produce the artefacts, but alone, those artefacts are meaningless. They need to be shared, reviewed and discussed with your team.
One thing which is becoming increasingly prevalent (not just in design tools) is the connectivity with the wider ecosystem. Zapier has been around for some time, with its core focus on enabling apps to talk with each other. The apps which will come out on top are the ones which play nicely with others. Remember the days when you would try to open a Microsoft Word doc in a Mac, or open a Pages doc in a Windows computer — yes, I know, we would all rather forget.
Back then, we just had to accept lock-ins with certain tools and formats, but now the open web and the vast ecosystems which underpin them are allowing for a far more fluid exchange between applications. This communication is something that I, and many other seek out and will be core to the success of the tools which we use.
The two major players
When writing the first part of this article, Adobe was teasing out the first versions of Adobe Experience Designer, their first true challenger on the UI design scene. Almost a year on and I have yet to be enticed back to the big A’s suite of tools. Having jumped in and out of the XD, I cannot fault it for its lightning fast performance and it’s smart features like the context-aware layers list, repeat grid and mirrored symbol updates, but for me it still lacks many core features (reflected I suppose by only being on version 0.6). I am certain this tool will deliver, but I am not sure exactly when version 1.0 will land — or what their price tag will be.
I can only praise Adobe’s strategic approach in offering a design tool across both Windows and Apple platforms (cause who wouldn’t want to design on one of these bad boys), but I can only imagine how much this decision escalates the development time. Once executed though, they will have the land grab of the Windows market which Sketch has always missed out on.
Another big aspect which I have not seen any glimpse of in XD is a means of handling data from the tool—an area which I am particularly interested in. While Sketch also fails to offer this, there are plugins which fill this gap.
In this same time, Sketch has also progressed nicely with a stable offering for nesting symbols, which allows for some creative ways to build design systems. Coupled with their improved layer pinning, and Sketch’s layout behaviour has just gotten a whole lot smarter. Taking these two aspects and using Anima App’s Auto Layout, you are able to construct designs which are moving closer to representing behaviours seen in code, which is an important aspect for aligning design and engineering.
Back in the day, Photoshop offered very little to imply layout constraint which involved a lot of back and forth trying to understand what was possible. As more and more design tools move towards mirroring layout conventions and constraints, more and more designers will become versed in similar languages to engineers. I recently read an article on SubForm’s blog, highlighting the issue of grids in current design tools which reveals some of the interesting work that those guys are doing. Subform also looks like a very interesting challenger tool, but it’s too early yet to see their full offering.
Plugins and the ecosystem
I mentioned in my previous post about my concerns over the stability and maintenance of plugins which you should cautiously depend on. Relying on any single tool or plugin for a big part of your workflow will always come with its risks, but with companies like InVision placing a lot of time and effort into Craft, I think we will see a more robust ecosystem of well-backed development teams which will offer supporting tools.
That being said, there are still plugins developed by small teams, or single developers which I like to use. View my latest list on Github. One thing to check when adopting a plugin, is to check when it was last updated and which open issues there are.
Unfortunately for Adobe, I see them operate similarly to the way Windows did “back in the days” trying to lock in users to their suite of products with only the bare minimum of support for external products or services. The sooner companies live by the mantra that “together we achieve more” the better.
No single company will ever be able to offer up all the needs of its customers, so it is fundamental that they devote some time and resource to working with their complimentary counterparts instead of fearing loyalty-loss which I would argue is more likely to happen the more they try to lock users in. People don’t like to feel trapped.
An ever-evolving workflow
Having discussed my opinions on todays tools, I would like to share my current workflow which I am certain will evolve further throughout 2017. Feel free to share your approach in the comments along with any feedback on this article.
- Full Story: Full story is great for keeping an eye on features you have already released and to look at current user behaviour within your application. If you find something interesting, you can add a comment and share this (along with a link to point in the video) straight to Jira, Slack or Trello.
- Lookback: Lookback allows you to validate your ideas with customers, or prospective users. I normally use this to record usability sessions on InVision prototypes, or on HTML prototypes, adding notes throughout the session. You can then share the insights and video clips with colleagues.
- Abstract: My new replacement for Folio, Abstract brings a suite of version control tools to my workflow in Sketch. Stay synced, branch off of master design files and collaborate with the team. This tool is definitely worth checking out.
- Github: Our development team works in Github, so I am often diving in to check the latest code, or running the development environment locally, making design changes, and syncing them back to the repository.
- Sketch: A staple to the design tool diet. Used alongside some very useful plugins, Sketch can be a design powerhouse allowing you to iterate and deliver ideas rapidly.
- Jekyll: Jekyll has been my goto solution for any type of web project — whether building a website, or creating a prototype, Jekyll allows you to work with pure HTML/CSS/JS with the benefit of being able to use data and conditional logic, without the need for a BE. It’s a true game changer and time saver, and something I would like to cover in more detail soon.
- InVision: With their development of their Craft plugins suite, InVision is placing itself at the core of my design workflow, allowing me to easily sync and share designs with the rest of the team. InVision is then able to sync with JIRA, getting the latest designs straight into the hands of the development teams.
- JIRA: Not really a tool used for design, but an important part of many designers workflows. JIRA allows us to progress our design work through sprints and helps keep those “final” designs well documented and tracked.
- Lingo: Now that they have recently added a Sketch sync feature, I have started to use Lingo to sync design assets that can be shared with the marketing team and external suppliers.
If you found this article useful, please show it some love and recommend or share. Thanks
TravelPerk is revolutionising business travel, which is no small feat. If you like the sound of a challenging role based in 😎 Barcelona and want to be using the best ✏️ design tools alongside and amazing team 🙌 why not check out our latest careers here @travelperk ?
