The Workflow of Now
As Associate Design Director at MCD Partners, Alan Reuter works as team lead on the design end, creating user interface design over a wide array of digital projects ranging from interactive marketing materials to rich digital user experiences. With over 10 years of experience, Alan has had the privilege of working with a number of high-profile clients, such as Discover, PBS, El Rey Network, Hallmark Channel, NBC Universal, Coca-Cola, Facebook, and Siemens.
A writer writes. A designer designs. A developer develops. For a long time, these disciplines had been mutually exclusive and isolated, yet dependent on each other for a successful product launch.
The collaboration wasn’t always so seamless. Excess copy can break a design’s integrity. Designers might push the envelope, making something challenging, or impossible, to code. Developers might not be able to accurately visualize the many quirks and minutiae of live animations and transitions, resulting in a clumsy customer experience. We’ve all experienced these pain points, and that’s why it’s crucial for all parties in these fields to be in constant communication.
Thankfully, today’s design tools make a lot of this process significantly easier.
Here’s three ways today’s tools are changing how we get products to market:
The Cloud Streamlines Workflow
Collaboration in software is nothing new. What’s changed is the scale. With SaaS (Software as a Service) becoming the preferred model, design tools have gone all in on collaborating in the cloud. The days of having large locally stored files routinely backed up to an external drive are slowly but increasingly giving way to a particular program’s cloud environment.
Sketch saves new files in the Cloud by default, and a web app for working in browser is in the works. Figma has been a browser app the whole time, with it’s sister native app being merely their web app inside a native wrapper. Framer started as a desktop app and switched over to web to chip away at Figma’s business.
Teamwork is now even easier since multiple designers can work in the same file. Developers can get early markup snippets. Directors and Creatives can leave comments. And it’s all in the same tools, so everyone is using the same process.
Relationship Between Design & Development Shifts Again
In Digital, there has always been this desire to unite the design and development worlds. Back in the day, Dreamweaver was the WYSIWYG website maker. Adobe tried to automate HTML/CSS/Javascript for designers with Muse, and ActionScript with its short-lived Flash Catalyst. But the union was always clumsy. Automated code was often bloated and needed to be rewritten anyway, so it often added more steps than streamlining. It’s no surprise; the two trades often have very different workflows and processes.
With today’s design tools, the working relationship between Designer and Developer is finally starting to make sense.
The days of designing a website in Photoshop, handing a bloated file to the development team, and writing out the specs in a document are over. Sketch Cloud has styling and variables available on all components, as well as grids and specs available on each artboard, with markup formatting coming soon. Figma has all that, and available code snippets for web, iOS, and Android depending on the product you are making. Framer has the ability to design or literally code React components that can be used in the final product (if it’s a React project). Sketch, Figma, and Photoshop all support uploading screens and assets to organize products into a design system.
Thanks to this, designers can take more responsibility for seeing a project finished, and developers can work quicker with easier access to the designed assets.
The Lines That Divide Our Roles Are Blurred
With all these new ways of collaborating, there is bound to be some crossover.
This is readily apparent with UI/UX roles. While modern design tools like Figma and Sketch are for building designs and design systems, they also have prototyping and userflow tools as well, making them a one stop shop for both Interface design and Experiences. But with this collaboration comes a sharing of responsibilities. UX designers that didn’t concern themselves with hierarchies and spacing and color balance while making their userflows now find themselves working in a tool that handles all that. Visual Designers who are in charge of the overall appearance are now finally realizing they are designing a living breathing thing, and now the big picture is front and center to them.
The lines further blur between Design and Development as well. Framer recently launched a beta called “Sites”, which allows designers to design and publish responsive landing pages with full animation features using a robust motion library. It comes equipped with components for forms, videos, and widgets for third party assets as well. With a tool like this, static landing pages with full React support can be created and published without the need of a developer to see through to the final product. This means Developers can focus more on projects with more complex logic, and Designers can claim Landing pages – more associated with marketing than everyday use – as their territory.
***
To be clear, this is not a prediction. This is not the workflow of the future. This is the workflow of now. I’m excited to see what comes next.
