How to prototype in the browser with Yeoman

Browser prototyping is a concept of creating prototypes within the users’ native environment. With this blogpost I would like to show how to run and setup an initial environment for browser prototyping.

BROWSER PROTOTYPING #1: SETTING UP ENVIRONMENT

Here and there, sometimes we hear that UX designers should also code, prototype and design using modern web tools. It is important to remember that we are building systems for the web, and as such, we should keep our design deliverables within the browser. So if you are tired of creating non-interactive prototypes, this blogpost is for you.

Console

First of all to start creating prototypes in browser, you need to make friend with the console (terminal in Mac or cmd in Windows). Commands are executed from the console, you can see there also application errors and other useful informations. In this tutorial you can  see how to start working with the console.

Sublime

Sublime is a popular code editor. It has all the features necessary to start, and is not as cluttered as many other coding environments. It’s easy, straightforward and free (to some extent).

Install npm and Node.js

You will need Npm, which is a package manager, and Node.js.

If you’re using Mac or Windows, the best way to install Node.js is to use one of the installers from nodejs.org. Node.js comes with Npm preinstalled, so you should have a version of npm after installing node.js. To check if  you have installed it properly, just write in a console:

Install Bower

Bower is awesome!

This is yet another package manager, but  this one comes with all the popular frameworks, like bootstrap or material design. With this tool you can easily manage frameworks and UI libraries in your prototype. To install Bower just run in your console:

Install Grunt

Grunt is a task-based tool that helps in running repetitive tasks. For the purpose of prototyping we don’t need to elaborate on this tool too much.

Although it is  a very important for front-end developers optimizing codes for production purposes, here we will only use it to start, build and publish the prototype. To install grunt just run it in a console.

Install Heroku toolbelt

Heroku is a cloud based application that will help you bring prototypes online. You don’t need to bother with any devops stuff like domains, servers or other.

Publishing on Heroku is super duper easy, as you will see later on. Just make sure you have heroku toolbelt installed on your device. Confirm that you have an account on heroku.com.

Install Yeoman

Alright, finally time to introduce Yeoman.

It is a scaffolding tool for modern webapps, which will help you to kickstart a new prototype from generators. A generator is basically a plugin that can be run with the “yo” command to scaffold complete projects or useful parts. You can browse generators here. To install Yeoman just run it in a console:

Scaffolding prototype

Now you have all the necessary ‘ingredients’ installed. From now on you can create new projects and start prototyping in browser. To do this, make sure you are in the path of workspace or in some place where you store all your projects, and run in your console:

This will install one of the most popular generators available on Yeoman platform made by  DaftMonk. This generator is highly customizable, based on angularjs, with both server and client sides. You can create a simple HTML prototype or a fancy prototype with logic, data, API and complex behaviors.

Make a new directory, and cd into it:

Run yo angular-fullstack, optionally passing an app name:

Follow the instruction in a terminal.

And to run your app on a localhost, just say:

This moment, if you have all stuff installed, application should open within a browser.

Publishing app

Publishing your app on Heroku is also super easy. You just say:

If you succeed (or not) with scaffolding your prototype write a comment below!

Subscribe to our newsletter
Menu