Is design in production the future of interface design?December 24, 2017 at 2:50pm
This is serious!
Brand new way to execute design process is upon all of us.
Will design in production end-up superior to prototyping in Sketch, Illustrator, InVision, etc.?
Is there a new Production Designer role on the horizon? I know, I can't call myself a front-end developer because I make design decisions in the process of building interfaces.
Do we all become unicorns?! Is that what it takes?
Here's the roundup of products claiming the lead in this new space:
Not all of the above are available at the point of starting this thread (in fact most of those tools are in beta or on a private preview stage), but from their websites, we can learn what they are shooting for:
"A collection of tools for building design systems and using them to generate cross-platform UI code, Sketch files, images, and other artifacts." Lona
"Design with code, without knowing how to code." Interplay
"Component-based design system manager for building production-ready UI." Compositor Lab
"A radically new digital design tool built for cross-functional product teams." Alva
"Design, meet production. Craft imaginative UI components that snap into any app. Code optional." Haiku
"The world's most powerful screen design tool." InVision Studio
"Design Interfaces with <Source code/>." BuilderX
Over the last three years, I've done five projects as a Production Designer. Here's what it means to me:
- I wireframe and prototype in Sketch and Illustrator, but I don't hand-off visuals and specs to engineers. I use Views language (https://spectrum.chat/thread/277230be-ced3-4398-8b33-66fa379403ca) and build all required views myself as I design them. It's faster that way. I get higher quality results, and I have full control over the outcome.
- I talk to engineers more often than to other folks my teams, and I understand what they say back to me. I'm still learning, but I'm doing that on the job.
- When I face challenges, I ask questions and Google a lot.
- I know the technical constraints, and over time my designs became easy to implement. As a result, my design aesthetic tends to be very clean and functional.
- It's hard to tell if engineering makes me a better designer. It surely doesn't make me worse.
- I've acquired interaction design skills and make use of them every day. I test new ideas right in the application instead of prototyping fake mockups in Framer, or documenting them as a series of flat artboards in Sketch.
- I lead product teams from within because development is not a bottleneck for implementation of UX and UI improvements. It means I can provide lots of value directly in production winning trust from product owners and managers, as well as from developers.
- I go to sleep supercharged and motivated from seeing results of my direct contribution in the hands of users.
Did you try some of those tools already?
Are there any other Production Designers out there?
December 24, 2017 at 3:26pm
December 25, 2017 at 5:33am
to be fair, InVision Studio is not an example of this from what they showed at their debut parties.
It's more like sketch, with some visual prototyping
December 25, 2017 at 11:16pm
December 26, 2017 at 12:30pm
Thanks, @aaron-a. I agree it's easier to get into Production Design with a design background. I meet many students at Thinkful who want to jump right into production, but there is a lack of courses to guide them in this fast-changing environment. I'm gearing up to create a course with tips and tricks to help designers of any level ease into production design process. Are there any courses out there that you would recommend me looking at?
As a developer, not having a hand-off stage is amazing. Views helped us remove the misunderstandings and the frustration that it means for both, designers and developers when the outcome doesn't match anyone's expectations. We're building products faster and with more confidence now. I also get more time to focus on the product's logic which is where I can add more value. How does hand-off impact on the way you build products?
Thanks. Yeah. I tried treehouse some time ago and the challenge i experienced with it is that the knowledge is very general and it's hard to relate it directly to the job at hand. It's sort of sit down and block off couple of hours a day type of learning. Are there any hands on, real interface example types of courses?
December 29, 2017 at 7:29am
I don't think this is a "new designer". Traditionally, designers and developers have different sources of truth.
This limitation, imposed by the state of our design tools, has been a major pain-in-the-ass for product team - further siloing the different roles of designers and developers and creating A LOT of extra work.
As designers move to think in composition of components (as opposed to static pages), and as our tooling improves there will be little sense for designers to work on static pixels, zooming in 400% to make sure something is absolutely aligned and then shipping that static asset for a developer to build from scratch
December 30, 2017 at 11:09am
@benita i hear you. did i understand correctly, that you also think it's good when design is getting closer to development?
December 31, 2017 at 11:15pm
January 1, 2018 at 4:47pm
Hi Tom, interesting topic and nice collection of tools. I was only aware of some of them and will check out the others as soon as I’m on a faster connection. I’m wondering, what did you mean in this context with “It's hard to tell if engineering makes me a better designer. It surely doesn't make me worse. ” Ideally, designers wouldn‘t even have to touch code to design in production right? Then the whole designers who code thing becomes irrelevant.
January 2, 2018 at 12:22pm
@jydesign @aaron-a Thanks for mentioning Fuse. We should add it to the list above. I've checked this tutorial about UX markup (https://www.youtube.com/watch?v=KmGvmGEnaZw) and it looks like Fuse also allows designers to write simplified code and have control over the final interface.
How do you guys use Fuse in your project? Are you designers? Would you call yourself production designers?
@koos Learning engineering from engineers made me a better designer. Sorry for the ambiguity in my previous statement. I've learnt new ways of approaching and solving problems. Example, methodical tracing of an origin of a problem. Another one, testing in separation doesn't mean success when used in context. And, everything is possible, not everything is feasible.
I agree with you if you mean that designers shouldn't be forced to use code to successfully design in production. I've also experienced great benefits of understanding code. I see it as a benefit to be able to talk to developers and understand what they say back to me. It's hard to gain mutual respect in highly sophisticated product teams. Being able to reason about code most definitely helps to gain dev's team confidence in feasibility of my design ideas. Another benefit is an ability to design cleaner programming syntax and contribute my design skills to dev community. Check it out here, if you interested, and let me know your thoughts https://github.com/viewstools/docs.
I guess, that applies to Figma editing experience as well. The UX Markup is a combination of HTML, CSS, and JS, but it's still forcing designers to use code. I'm envisioning a flow where code is totally optional and designers can achieve 99% of jobs to be done with specialised tools. Today, Views Tools are almost ready to become that environment for me. But I still use code editor to get my work done quickly. Here's a screenshot of my design setup.
@tomparandyk I have not had a chance to use Fuse. I'm a designer and a perhaps reluctantly verging a production designer for some projects. I'm very interested in tech that will optimize iterative product design process between designers and those who launch actual product, but I'd prefer to not have to futz with code TBH. I just wrote up some thoughts about state of design tools going into 2018 and included a link to this thread in the section covering "single source of truth" in design systems: http://jydesign.com/looking-ahead-at-product-design-tools-in-2018
@jydesign good post! Lots of very valid points.
This question: "How can we design and deliver together in iterative and innovative ways?" is on my mind for last couple of years.
I'm a designer too. Design helps me solve problems for my customers. Engineering helps me understand how to optimise the solution for delivery.
I imagine, the best tools for a production designer to be flexible and keep doors equally open for designers and developers.
Would that be enough to bring designers and developers together?
We are privately testing beta tools now and getting closer to first major release. It's exciting!
January 4, 2018 at 1:03am