Tools for Web-Dev Prototyping

Now that we have our ideas and a general plan of the problems we are trying to solve, we decided to get started with prototyping, a process as iterative as it is informative. This step requires starting from scratch over and over again, tweaking color schemes and design flows, re-inventing logos and brands. Here are some of the tools we used that made the process as productive as possible!

Sketch

Sketch, an easier-to-use (and cheaper) version of illustrator, is ideal not only for logo design, but also laying out the pages of the application. You can easily create artboards to match any screen type (iPhone, Desktop, Tablet, etc.) and build professional designs for your product. The program is also available as a mobile version — Sketch Mirror — which simulates what your designs would look like in the mobile realm.

InVision App

InVision is a web-based, collaborative prototyping application in which you can animate user actions and screen transitions. Ultimately it simulates what your app experience would look and feel like, while letting you leave feedback and comments along the way. It’s great for user testing, collaboration, and communicating your final plan!

Coolors

Coolors generates a new color scheme for you every time you press the spacebar. It’s a great way to get initial inspiration for the tone you would like to set for your product, in the form of color. A more advanced color scheme generator is Paletton, which lets you select, modify, and fine-tune a set of complementary or adjacent colors, a color triad, etc.