Developing an early prototype or proof-of-concept can serve as an invaluable stepping stone in the digital product design flow. From visual styling and interaction flows to underlying data structures and API architectures, prototypes support the Agile methodology by creating short feedback loops between designers, developers, and product stakeholders. They also allow for componentization of the design process for the different pieces of the final application. In this blog post I have compiled a list of effective services and tools that have helped me build better and faster digital product prototypes.
DESIGNING AND INTERACTION FLOW
Design presentation and collaboration platform.
InVision was founded back in 2011 and has become a hugely popular tool for product design and prototyping. InVision enables designers to upload static comps and wire them together into interactive flows. This allows the designs to come to life and helps designers demonstrate the movement and transitions of a system to business owners and stakeholders, as well as present the designs on real devices with real screen resolutions. InVision also supports a robust design commenting and feedback system complete with organization around specific pages or design elements. Through InVision’s real-time collaboration and white-boarding features, designers and stakeholders can even walk through the design and iteration process together from anywhere in the world. Additional features include design project management, mood boards, and a code generation tool.
Intuitive and efficient digital design tool for Mac.
Launched in 2008, Sketch has become a go-to tool for many digital designers. Besides being a great tool for static design, Sketch can also be used to create simple design prototypes to be previewed on iOS devices using a functionality called iOS Mirror. With the push of a button, Sketch designs can be viewed live on iPad and iPhone to give product stakeholders a better idea of what they look like with real screen dimensions. In addition, using plugins to enhance the Sketch experience can bring even more benefit to prototyping with Sketch. Particularly, the Silver Flows plugin (recently acquired by InVision) allows designers to wire up transitions, animations, and button hotspots to their designs from within the Sketch interface to be presented/previewed on iOS devices.
A web design tool, content management system (CMS), and hosting platform in one.
Remote user testing for static digital designs.
UsabilityHub aims to crowdsource usability testing for software and web design. By “settling design debates with data,” as UsabilityHub describes on their landing page, teams can easily resolve design questions that arise between designers, stakeholders, developers, and other opinionated parties during the design process. Through their five usability tests, UsabilityHub gives visibility into users’ thoughts and intentions and helps teams make more informed decisions regarding user experience.
WEB APP BOOTSTRAPPING & HOSTING
Interface for quickly scaffolding EmberJS web applications.
Ember CLI is “the command line interface for ambitious web applications.” It helps a developer generate a clean-slate, Node-based web project faster than they can snap their fingers. It uses a BroccoliJS asset pipeline comparable to the Rails asset pipeline, builds a straightforward initial project structure, and provides support for Handlebars, LESS/Sass, Babel, Bower, and npm out of the box. The team at Ember CLI also boasts an extensive add-on ecosystem, so you can customize your application bootstrapping experience to no end. If you wish to build a Node-based modern web project and want to employ the power of Ember templating, consider Ember CLI to save quite a bit of time and headache.
Interface to scaffold many different front-end application stacks.
Interface to scaffold a skeleton HTML5/CSS3 application.
A scalable web application hosting infrastructure service.
Heroku is a platform that offers web application DevOps “in the cloud.” It allows developers to focus on building apps and leave application infrastructure to Heroku. They deliver functionality to handle containerization, networking, storage, logging, and monitoring, as well as scaling and load balancing. Their pricing model includes free and “hobby” tiers that are ideal for working on personal prototypes and small-scale web services, while offering more robust and performant tiers for professional-grade applications.
APIS AND DATA SERVICES
Real-time database, media storage, hosting, analytics, and more.
A simple spreadsheet-based CMS/API.
An alternative to Firebase for more basic data storage interactions is Fieldbook. Their platform takes the simplicity of an Excel spreadsheet and builds a RESTful API out of it. It supports relational data linking between tables and even provides a browser-based user interface (UI) to see and make changes to the data directly. Consider using Fieldbook for internal prototypes or when working with existing client data spreadsheets. Fieldbook can allow you to bring that legacy data into a modern, API-driven application prototype.
Node & Express JS & Feathers JS
Simple open-source CMS for designers.
I know it’s not really an API service, but I wanted to include Couch CMS as a great tool for quick and easy content management. I’ve used the system on a few personal projects and found they took the time to really break down a CMS to the barebones, and they have created a delightful experience for developers. One of my favorite qualities of Couch CMS is the minimal administration panel. It’s completely customizable, yet users will see nothing that is not absolutely necessary. It really takes the complexity out of inputting custom data into a CMS.
MOBILE APP PROTOTYPING
Open-source SDK for developing native and progressive web apps.
React Native (and Exponent)
Frameworks for building native apps using React.
Like Ionic framework, React Native was built to help web developers venture into native mobile development. However, where Ionic framework is designed around Angular and HTML5 UI elements, React Native is built on ReactJS and React-based wrappers of native UI controls. This allows developers to use ReactJS on web, iOS, and Android applications. Since the interfaces are built using platform-native controls, they are performant and feel just like apps written in platform-specific languages. I include React Native here because it empowers even a single developer to iterate quickly on a native mobile application experience and reuse code across iOS and Android projects. In addition, Exponent is a neat service building off React Native to help distribute React Native prototypes with a single click. Using their proprietary IDE (called XDE) and the Exponent mobile app, you can write and deploy apps instantaneously as well as view apps written by others in the Exponent community.
iOS Web Apps and Chrome “Device Mode”
Tools for simulating native apps on mobile and desktop.
Note: These two tips are not new developments, but I wanted to share them anyway because they’re so helpful.
Many developers don’t know about the special handling built into iOS for web applications. By including certain tags in the <head> section of your HTML, you can tell Apple devices to treat that webpage as a web application when added to the user’s home screen. This allows the “app” to open full screen using the Safari renderer without the Safari interface elements. This serves as a great way to get a native-looking app for prototyping and rapid iteration.
“Device Mode” in the Google Chrome developer tools allows you to test a webpage with many different device resolutions, user-agent strings, pixel ratios, orientations, and even supplies a mock network-throttling feature. Using device mode is incredibly helpful as a freely available tool to test/preview responsive web designs.
Electron/Node-webkit for desktop apps
Lastly, I wanted to include Electron and Node-webkit as helpful tools for building desktop applications using web technologies. You may notice several important logos on the Built on Electron page including the Slack desktop app, Visual Studio Code, the Atom text editor, and many others. Electron takes care of the application packaging for Mac, Windows, and Linux and presents web code as a native executable. The opportunities are widespread using this technology for prototyping, internal-facing applications, and even production-grade desktop apps.
This is in no way an exhaustive list, but represents many technologies that have helped me personally create functional prototypes in varying stages and for many different platforms. I’ve included a sample flow below of how I might use some of these tools to quickly create a mobile app prototype:
If you would like more information, or would be interested in help designing or developing a product prototype, contact us at firstname.lastname@example.org.