In digital development, even pixel-perfect replication of the layout often misses some of the nuances in the design that prototypes can articulate. But as more tools arrive, how far are we from sculpting the full picture to clients and product teams before it's developed? In these times of physical social distancing, how isolated are our conceptual ideas?

Firstly though, to evaluate how the gap is closing it's also important to look back through the evolution of web design.

The evolution of web design

In the early days of UI design, digital pioneers scrambled for an applicable tool to use. Naturally, having come from some element of graphic design, the easiest fallback was to use a tool they were already familiar with, and thus the then limited Adobe Creative Suite, now Creative Cloud, was selected as the tool of choice.

While some designers used Illustrator or InDesign (with its framing of images being a more faithful interpretation of design), most relied on Photoshop. The latter, being a tool specifically for photo manipulation was initially grossly inept for its new role. But it progressively improved. With Smart Layers and the fantastic "Preview CC", this mobile application was the first interpretation of the now-standard way of previewing mobile-specific designs on an actual device.

However, it still was extremely cumbersome, slow, but most problematic of all was its handling of large file sizes. Designers faced many instances where developers waited patiently for a particularly large project to open, only for it to frustratingly crash their system.

When Sketch was released, its simple interface and responsiveness changed things for UI design quite significantly. The ability to further expand it using a library of plugins made it extremely powerful whilst keeping to the ethos of a lightweight design-focused application. The caveat to this is that designers are quite dependent on these individual pieces working in collaboration. Designers commit designs into Abstract for version control and then upload into Zeplin for the developers to inspect. Despite these loops, it was significantly better than anything that preceded it.

Soon after, prototyping tools like Protopie, Marvel and Principle were added into the mix creating a potent punch as it allowed a means of visually communicating the interactions and motion design that the designer intended.

As projects become more mature and started incorporating design systems that necessitate the need to work in collaboration with multiple designers over various locations (for example if the client also has an internal design team) this setup became strained. To alleviate this a better means of versioning was required. This is where Figma comes in.

Running as a browser-based application Figma eliminates the need for versioning as two or more designers can work on the same layout simultaneously. A generated URL can be used between designers to share the project. Links can also be sent to clients as a means of viewing and commenting on the designs, and in handover to developers, as it incorporated the same level of inspection that Zeplin introduced.

Whilst it also does allow designers to incorporate interactions, they’re not to the fidelity level of Principle and so that application is still needed to straddle between design and development.

Framer bridges that gap...

Framer

Framer as a design tool has been around for many years now but the recently launched web version is what we’re going to be profiling. It’s a feature-rich collaborative browser-based design tool that accommodates:

  • Team editing
  • Easy sharing
  • Inline commenting
  • Reusable components
  • Developer hand-off (which is what we’ll focus on)

When working on Sitecore projects our internal process has been to parse Sketch UI designs to developers via Zeplin where our product team can then inspect the likes of spacing and use exportable assets. In 'Developer hand-off' mode, because Framer is built on a production-ready React JS framework, it allows developers to inspect interactions and to a degree export them directly.

Our build team can inspect layouts for spacing whilst the right panel will display the properties of the element in either CSS or JSX. Graphical components can be exported as SVG code or as a React component, and transitions can be exported as either Framer motion transitions or Swift (if designing for an iOS app).

Developer hand off 

Source: Framer

However, where it's at its most powerful is applying custom code components, as the source code can then be inspected in its entirety. The desktop app even has the option to export an HTML prototype which creates a folder of all the assets and code files to run as a standalone prototype. These can then naturally be modified and incorporated into production by the development team.

This would be far from a seamless handover. Developers would need to 'unstitch' much of the Framer specific syntax and wouldn't want to leave too many dependencies on external libraries. Despite that, at the very least having a prototype to interact with is certainly better for interpretation that watching exported mp4s of Principle exports on loop.

It also makes sharing with clients easier, as Principle exports can top 100MB (at ProRes level). Whereas a shared URL from Framer or even exported files from the desktop app will fair significantly lighter.

Summary

Tools such as Figma and Framer are leading the way in how inclusive they are to design teams familiar with the new wave of UI tools. They show how much more can be communicated in animated prototypes vs flat designs exports.

Prototyped designs are coherently stronger when their composer has more knowledge of developer logic. These tools aid how much is lost between creative and build sprints, but ultimately they're limited in what they can truly articulate back to the team, especially when stacked up against the likes of Axure. So perhaps whilst the gap is closing, developers are still in the position where they need to rely on multiple design applications to paint the full picture.

At Codehouse we've worked with many customers spanning a variety of industries. We use best practice design principles and collaborative systems to deliver exciting and engaging Sitecore digital products that achieve measurable results.

Related links: