I’ve been intrigued by the potential endgame of a single environment that could satisfy the needs and modes of operation for both visual UI designers and developers. Convergence of tools has been a theme of my “Looking Ahead” new year blog entries for 2017 and 2018.
Typical UI Design tools still offer an excellent working model for quickly manifesting design ideas at any level of fidelity. Many of us know of situations where a well-executed mockup that took 30 minutes to render in a design tool (drawing pictures of screens) might get a dev estimate of many hours or days to execute (QA’d production code).
As long as that dynamic exists, many designers will continue to prefer WYSIWYG drawing tool interfaces over working directly in code – especially when they are early in the ideation process.
Popular tools like Figma, Sketch and AdobeXD continue to make moves toward exporting out to React and potentially other libraries. However, as of now, these are one-way, and the real deal will be bi-directional or zero-conversion options.
Here’s a roundup of new tools looking to shorten or even eliminate the distance between drawings of screens and production-ready code (in alphabetical order).
Alva – “Alva lets you design interactive products based on components engineered by your developers. And guess what – we are entirely open source.”
Haiku – “Design components that snap into any codebase: Unlock your creativity with the world’s most expressive UI builder”
Interplay – Fast prototyping that combines the power of design systems, production code components and live collaboration.”
Iterative.ly – “Iterate on top of your live app using your design system. Launch an experiment in under 10 minutes. Continuously improve your product.”
Modulz – “The visual code editor for designing and building digital products—without writing code.”
Supernova – “Design and development tool unlike anything you’ve experienced. #nomoresnippets – always a production-ready code.”
Thanks to fellow designer Mike Scopino for including me in Nonfiction’s recent blog article “Expert Perspectives – Let’s Talk: Live Style Guides“.
Guests included Josh Briley, Vanessa DeCollibus and myself.
JAMES YOUNG: You’re not just adopting something to check a box but you’re actually building a system that works day to day for your team. You can capture what you’ve done in the past, and try to forecast the types of things you might need in the future. But expect it always to lag behind the innovations your team is making, and make it flexible enough to capture those. It’s a big job, so allocate support to develop it and maintain it. Also, try to do a good job of communicating what this resource can and can’t do. It’s not a magic UI machine. You’re still going to have to go through the really hard work of translating it into an actual product.
Read the whole thing over at Nonfiction.io.
The announcement of Sketch 49 leads with the brand new features for native prototype creation, previewing and sharing.
There are also many enhancements and bug fixes and helpful refinement around symbols and libraries.
It’s the elevation of the central role of Sketch Cloud that really points to a long game strategy falling into place. Not only can Sketch Cloud be used to share art boards or a prototype, it now lets anyone publish a Sketch Library that can be ‘subscribed to’ by any person with an internet connection and a copy of Sketch. To top it off, the first example of this is Apple sharing their official iOS 11 UI Kit!
This has tremendous potential, especially if Sketch adds features around access-control and commerce. Sketch Cloud has the potential to become a store platform (as in shopping) for design assets – free and paid.
2018 will be an exciting year that sees further progress toward systematic iterative design and development processes. Here are some thoughts and predictions for the new year.
Sketch as Incumbent
As predicted last year, previously nascent tools have improved, and more new players have come on the scene. It’s unclear who might ‘win’ – if that’s even a possible outcome.
From Figma to Framer to the forthcoming InVision Studio, solutions continue to enter the market hoping to capitalize off the sea-change Sketch ushered in – having fundamentally broken down years of Adobe lock-in among digital designers.
Sketch released an impressive number of enhancements and made good on promised features in 2017. One of my concerns last year was related to plugins, and these were addressed via native plugin management features or alternately with 3rd party tools like Sketch Runner and Sketchpacks.
That said, Sketch is more vulnerable to competition going into 2018 than it has ever been. Unfortunately, with each new release, Sketch continues to develop a reputation for bugs. This is due in part to how ambitious they have been, adding things like Libraries and other significant enhancements. It also didn’t help that macOS High Sierra introduced changes that messed up multiple design tools. And speaking of macOS, being Mac-only continues to constrain the market opportunity for Sketch and leave it open to disruption from a cross-platform player.
Modes of Use and All-in-one Tools
Another question from last year is still unanswered. How many different tools and/or SaaS services are designers willing to learn and use and will there be a push toward more consolidation? Do we really need one tool for screen design and another for prototyping and another for handoff? Is it better to design in one app and then prototype in another? I think it’s possible to bring these fragmented tools together by offering multiple modes within a single application. Adobe XD is trying this with its two primary tabs of Design and Prototype.
InVision also does this in its core product where you can switch from build, to comments, to inspect, to workflow, etc. This approach shows great promise as it keeps the UI decluttered while minimizing the need to switch to a different app completely. Not everyone is happy about this. For example, some fans of Zeplin and Sympli aren’t too fond of InVision inspect. However, every time I have to re-export an iteration of design to both InVision and Zeplin, the inefficiency gets that much more bothersome. I think the approach is right, and it will all come down the execution.
Modes reduce the complexity of UI by constraining available features to a limited set of tasks, while tactfully combining modes within a single application can reduce redundancy, switching and overall friction when working on design assets. I think 2018 will bring a welcome consolidation of tools and it will reduce hours of wasted work as well as total billings across SaaS and subscription software.
Screen Design vs. Graphic Design?
I think that two “camps” will persists and this will require cross-disciplinary designers to continue to manage a variety of tools. The easiest way to characterize these two camps right now is probably as Traditional Graphic Design (brand, print, publications) vs. Screen or Product Design (web, apps, GUI, interactive, VR/AR). I realize for many the lines will be blurry here. However, the builder of your tools will likely be exaggerating their feature set to bring the purpose of their products into more explicit focus whether you like it or not.
Any all-in-one trend will probably not be able to bridge these two camps. You’ll continue to use one kind of app to do print or publication design and another for screen design and prototyping. While most of the buzz is in the screen design camp, there’s still room for competition and disruption in the traditional graphic design camp too. For example, Pixelmator Pro launched a few weeks ago. Also, Serif is promising to release it’s Adobe InDesign / QuarkXPress competitor called Affinity Publisher in 2018.
Concept of a “Single Source of Truth” is still coming into focus
Improvements in tools are just one indicator of more significant positive changes in our industry. The inmates are no longer running the asylum as it were. Great design and user experience is now a baseline expectation. Designers no longer have to spend time ‘selling’ its fundamental value within a healthy organization. That has allowed the discussion to shift to more important aspects such as: how can we design and deliver together in iterative and innovative ways?
There’s been a lot of attention to UI design (and brand) systems in 2017. Challenges are still being worked out around the concept of a “single source of truth” when it comes to such systems. At the moment, it feels like current solutions are still optimized for a from-zero-to-version-1 scenario. It works well when a new design system is initially created in a static visual design tool, approved and then handed off to web or app developers for reference in coding the initial release.
There’s no such thing as handoff because a successful product will be continually improved.
The weakness of this approach is apparent once that initial release goes live. It’s easy to argue that the coded UI elements, in the hands of customers, now represent the “true” UI design system. What does that mean for version 1.5? How do designers continue to propose new features, and updates to existing features, without their design-tool facsimile of a UI library falling out of sync with what’s now in the actual product?
This is the real challenge we all face, and I hope we’ll see one or more solutions gain traction in 2018. There are already some examples of this, the most notable to-date being React Sketch.app and Lona from Airbnb. There is also html-sketchapp-cli that popped up recently. For something to be truly scalable or gain mass adoption, it will require some kind of open source approach or cross-competitor adoption. Will it be a new kind of underlying CSS-for-design-specs that works across visual design tools, HTML, code and proprietary native mobile IDEs? Or will it be some interpretive engine that can keep elements in sync across multiple tools?
As with the other topics above, the closer we can get to real-time, the more viable and valuable the solution. If you are interested in this topic, join this Product Design Community thread on Spectrum: “Is design in production the future of interface design?”
Version Control & Syncing
The past year has seen an uptick in people trying different systems for version control for design documents, such as Sketch files. Variations in size, location, and configuration of any given team make it a challenge to identify a one-size-fits-all standard. This is a complex topic, so see the article Abstract vs Kactus vs Plant: a guide of version control solutions for Sketch for a recent rundown. Also, keep an eye on my Tools Directory page to see if anyone else gets added to the list in 2018.
To be frank, configuring and using these solutions is kind of a pain in the neck. Another barrier is that even the popular ones like Abstract have been subject to bugs and breakage when updates to Sketch roll out. Therefore, it may be most practical if this capability becomes a native feature in Sketch and other design tools. Until such time, many are happy to procrastinate because they can get simple versioning via the tactful use of Dropbox and Sketch libraries.
But there’s still no native way for multiple people work on a single Sketch file simultaneously without 3rd party tools like the ones mentioned above that can help merge changes etc. GIT style branching and conflicts resolution seem wonderful in practice but need to be as easy to use as the rest of the design tool features. Perhaps 2018 will be a make or break year for design version control. I hope to see a clear leader emerge and common processes adopted by teams that could benefit from these practices.
If there was no ‘file’, would most designers even need a GIT style version control system? Figma addresses the files conundrum with it’s web-based “Google Docs for Designers” approach, but so far they don’t offer more complex version features like branching. Figma’s killer feature is that it allows for multiple people to work simultaneously on the same design in real time. Conversely, this same scenario is not natively possible in Sketch. I can tell you I’ve used Figma in parallel with Sketch on early design concepts just for the easier team collaboration features. If it weren’t for some clients’ inability to use SaaS, I’d have hopped over to Figma for many projects in the past year.
Picnic is supposed to offer similar functionality for users of Sketch but they have been stuck in Alpha and haven’t tweeted since August #iwonderwhatthatcouldmean. I’ll be curious to see if this collaboration feature set ever becomes possible in Sketch and other tools. By next year I hope that it will be a baseline expectation for team-ready design software.
Responsive, Animation & Micro-interactions
InVision Studio and Framer are both leading with the promise of making it easier to prototype advance motion design for things like transitions and animations. Tied to these features are core principles of responsiveness. Not only responsive in the sense of adapting to variously sized viewports but being able to design for and express responsiveness with the dynamism of the interactions and flow within the UI.
These newer entrants are using this capability as a carrot to try and entice users away from current design tools like Sketch into using their platform for all screen design creation. There’s so much that works well in Sketch that they’ll have to replicate or improve in order to pull people away. However, the pain point of more sophisticated prototyping is real and it just may be enough to attract users if someone can finally deliver on the hype here.
Speaking of animation, just prior to my publishing this article Anima announced their new Sketch plugin called Timeline.
IA and Content Strategy is Also Design
Here’s another big part of the design process that is ripe for improvement. What do you use to plan and document the Information Architecture (IA) or your web or app project? How do you develop the written content for your product and use that to drive the actual design of your flows and screen? Chances are that most people will say that they use some duct taped combination of tools and that very few people do this the same way (if at all).
This past year I started using Flowmapp with our team to develop IA and content. It’s not perfect, but it feels like they are onto something that I had been longing for. It makes it very easy to create and iterate on a traditional tree-diagram style sitemap, while also offering Trello-like features to track status and include content and conversations behind each node in the map. I hope that it will integrate even more with our other tools and processes as it improves. Let’s see if any other innovation in this area comes our way in 2018.
Research Isn’t Optional
Design frameworks, pattern libraries, better collaboration tools can save time. All of these things help make it more efficient to produce outputs. That means you have an opportunity to use that time saved to equally improve your inputs. Understanding your customers and your market will help improve the ideas behind your fancy design artifacts.
If Nathan for You does more research than your organization, it’s time to get your sh*t together. – me
Every successful product team will need to invest in the ongoing market and user research as part of its overall design & development process. If good UX is table stakes, so is the habit of continual research. Let’s just call this “Minimum Required Research (MRR)” so you can sell it up the chain of command 😉
Therefore, I think there’s a big opportunity for more tightly integrating research and testing services into popular design, prototyping and development tools. The prototyping app Marvel already has iOS testing features that steps on the toes of other more established services. It would be interesting to see consolidation take the form of a design tool acquiring a popular user testing company. Seeing robust research tools integrated into design tools would drive home the reality that implementing appropriate research protocol is now table stakes too. We are problem solvers, do all you can to understand the problems.
AR & Other Future Tech
If you think incumbent design tools are the only thing ripe for disruption, go look in the mirror. Just when you feel like you are comfortable in your position as a product designer, expect something to come along and raise the bar even higher. This past year, people in all industries have had their fill of threatening stories about robots coming to take their jobs. I’m not particularly concerned about robots subsuming the role of human designers. I actually hope robots can take production and other busy work off our hands so we can spend more time on the more valuable creative and strategic thinking tasks.
I think that designers are more at risk of an expansion in user experience technology throwing them for a loop. For example, just look at new Augmented Reality (AR) and Virtual Reality (VR) quickly speeding toward mainstream consumer adoption. AI and Chat Bots are a similar topic, but the hype is deflating as there hasn’t been a notable consumer hit except perhaps for Amazon Alexa and Facebook chat bots telling you when packages are set to arrive.
When I see game-changing technology like this, it reminds me of the days when web searches for “how can a print designer learn Macromedia Flash?” were spiking. The implications and skill requirements for delivering these new rich and immersive user experiences are different from the typical notion of “screen design“.
One More Thing… Sketch Dark Mode
My pre-publish draft was going to predict that Sketch users will finally get the dark UI mode that some folks really really want. Just this morning the Midnight Dark Theme Sketch Plugin launched, so go get it. Oh, and irony points went to Affinity Designer for adding a light mode option to its default dark mode UI in 2017.
Related 2017 recap & 2018 vision articles:
Q: What happened to Sketch Hunt?
A: I’ve retired Sketch Hunt starting in 2018, in favor of my personal Twitter & Blog – please follow @jydesign and bookmark jydesign.com
My original impulse to maintain Sketch Hunt was to fill a void at that time. I saw an opportunity for sharing relevant news, resources and the op/ed content I enjoy writing on occasion. Kind of like a Macrumors.com for Sketch.
Sketch has since drastically improved its online resources for product-specific news, plugins, development, events, community, etc.
There is still an archive of notable cross-posts available in the Sketch Hunt Medium account.
I’ve seen the landscape evolve to include other amazing tools and services. Great things keep launching at a dizzying pace. I will now shift to using my personal blog and Twitter feed to share news, resources, and opinions on all sorts of things related to product design and development.
Thanks to anyone who followed my Sketch Hunt experiment.