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
InVision
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.
Link: invisionapp.com
Sketch
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.
Link: sketchapp.com
Webflow
A web design tool, content management system (CMS), and hosting platform in one.
Webflow is a powerful platform that allows developer/designers to build custom web prototypes right in the browser. Using an intuitive interface backed by CSS properties and HTML classes, users can create layouts, pages, and user interaction controls, as well as link everything together using JavaScript. Webflow is designed to create responsive websites from the get-go and gives users a simple interface for viewing designs at popular breakpoints. Whether you use Webflow for design only or you utilize its code generation feature to build working HTML, CSS, and JavaScript automatically, Webflow can successfully merge design, development, and deployment into one quick process.
Link: webflow.com
UsabilityHub
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.
Link: usabilityhub.com
WEB APP BOOTSTRAPPING & HOSTING
Ember CLI
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.
Link: ember-cli.com
Yeoman
Interface to scaffold many different front-end application stacks.
Yeoman, like Ember CLI, gives you a very powerful command line interface to generate all kinds of web project scaffolding. Peruse the Generators and explore the many different project stacks and structures built by the Yeoman community. You’re likely to find a project type that suits your development needs and gives you a huge jump in prototyping development time. Yeoman also provides functionality after project generation, including subgenerators to build out portions of app code for you, build tools harnessing the power of Grunt, a built-in hosting server, and tools to write and run JavaScript tests using frameworks like Mocha or Jasmine.
Link: yeoman.io
HTML5 boilerplate
Interface to scaffold a skeleton HTML5/CSS3 application.
If Ember CLI or Yeoman don’t work for you or you would rather start from scratch with HTML5, CSS3, and JavaScript, consider HTML5 boilerplate. Their service provides a quick and easy interface to generate a web project with common JavaScript/CSS dependencies, styles, HTML regions, and page layout. I use the tool quite often to generate a super-fast place to start coding a concept.
Link: html5boilerplate.com
Heroku
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.
Link: heroku.com
APIS AND DATA SERVICES
Firebase
Real-time database, media storage, hosting, analytics, and more.
My personal favorite back-end-as-a-service is called Firebase. Their comprehensive API and wicked-fast synchronization of data cross-platform make them an easy choice when I’m building out a new front-end design concept. The Firebase service provides a real-time data storage and retrieval service based on JSON that is built to synchronize from Firebase to client very quickly. I usually start with a simple integration of their JavaScript API into my web prototype to get basic CRUD operations fleshed out. Then the same data can be utilized on iOS, Android, or any other application using their REST APIs. Firebase Core also affords helpful bonus features in Firebase authentication (an easy no-server authentication provider) and Firebase static file hosting, which allows you to create a working app or prototype without a single line of back-end code. Google recently announced many new features to the Firebase platform at the IO Conference.
Link: firebase.google.com
Fieldbook
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.
Link: fieldbook.com
Node & Express JS & Feathers JS
JavaScript back end for modern web apps.
Whether you’re building a quick API prototype or an enterprise API service, you can’t ignore Node and frameworks such as Express JS and Feathers JS. Node has brought JavaScript to the back end, and uses familiar module syntax to link dependencies from npm and elsewhere. The Node community is booming, and there’s an npm package for almost anything. Express JS exists as a basic Node server framework you can use to build RESTful APIs or serve static assets. Feathers JS uses web sockets and turns your Express server into a real-time data synching machine. As their website states, “with Feathers you can build prototypes in minutes and production-ready, real-time apps in days. Seriously.”
Link: expressjs.com feathersjs.com
Couch CMS
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.
Link: couchcms.com
MOBILE APP PROTOTYPING
Ionic framework
Open-source SDK for developing native and progressive web apps.
Ionic framework provides an extensive Angular UI framework for building hybrid mobile applications. The Ionic team has done the work to build tab bars, view stacks, and robust animations out of HTML, CSS, and JavaScript so you can focus on the content and business logic of your mobile offering. Their production-ready, open-source framework has an active community with bugs and features being addressed daily. Their newest project, Ionic Creator, is a drag-and-drop app prototyping tool based on Ionic framework. Creator is a very powerful service that lets you export HTML5 and CSS or even native iOS and Android binaries. Also, check out the Ionic Showcase, which lists out production apps built with Ionic framework.
Link: ionicframework.com
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.
Link: react-native exponentjs.com
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
Cross-platform desktop apps with JavaScript, HTML, and CSS.
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.
Link: electron.atom.io
SUMMARY
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 mobile@credera.com.
Contact Us
Ready to achieve your vision? We're here to help.
We'd love to start a conversation. Fill out the form and we'll connect you with the right person.
Searching for a new career?
View job openings
