Hi to everyone in this forum.
Over the past year, I have changed my prototyping workflow — in case you are interested.
I’ve been a long-time user of Sketch, Invision and Adobe XD. They’re good applications and I continue to use Adobe XD for screen layouts every day.
Their prototyping modes are great for small design sprints. I’m not suggesting that anyone stop using them for these types of projects.
However, I work on enterprise projects (typically banking) and there are several shortcomings with these applications when working on large-scale designs.
Here are five reasons why I’ve stopped using them for large projects:
- Pasteboard screens aren’t inherently responsive.
Pasteboard screens are graphic image files (pngs, jpgs), and their sizing is set by the pasteboard dimensions (e.g. iPhoneX, iPad Pro, etc…). Images sized in this manner don’t scale up or down responsively. I know there are widgets and features within these apps that mimic screen responsiveness. But to me they are only band-aid solutions.
I need my prototypes to work responsively across all device browsers, not just to specific pasteboard dimensions.
- Hyperlinking pasteboards is a nightmare for large-scale projects.
Here’s a screenshot of one of my designs. Enough said. (I tried but a photo in this forum… but the photo upload was refused. Not sure why? )
- Sketch, Invision and Adobe XD don’t offer direct connectivity with CMS databases (Content Management Systems).
Once again there are band-aid plugins that try to bridge this problem. They work something like this:
Data File (e.g. Excel) > Plugin > UX software
To create prototypes with a higher degree of “realism” I need to work directly with databases (with no intermediary plugin). I’m designing a template that works like this:
CMS > Prototype Screens
- Asset handoff was becoming tedious.
Rather than handing off asset packets (icons, specifications, etc…), I hand over complete HTML/CSS code as an exportable file. I work closely with developers, and this has become their preferred method of handoff (at the least for the developers I work with).
- Intellectual Property (IP) is at risk with cloud-based prototyping solutions.
Some companies (not all) are concerned about outside exposure to their designs. For those companies, building prototypes behind layers of website security offers more assurance (other than the single password sign-on for cloud-based solutions). It all comes down to this — does your company want to set its own security safeguards or is a single sign-on good enough.
So what is my preferred workflow for larger projects?
I follow this simple formula:
HTML/CSS authoring tool + CMS = Enterprise Prototyping
Working with HTML/CSS solves the pasteboard and responsiveness issues. And building “web apps” allows for more security controls.
For the past year, I’ve been using Webflow as my web authoring tool. It also comes with a CMS so I can now design directly with databases.
I am building a front-end template with Webflow that I plan to offer as a free service for other product designers. It is a work in-progress — but you can check it out at this link. (I am working through the desktop web interface first, then will add fully functional tablet and mobile screens later).
The screens shown in the preview “modes” are HTML/CSS code, not static image pasteboards.