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:
npm - v node - v
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:
sudo npm install -g bower
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.
sudo npm install -g grunt
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:
sudo npm install -g yo
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:
npm install -g generator-angular-fullstack
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:
mkdir my-new-project && cd $_
Run yo angular-fullstack, optionally passing an app name:
yo angular-fullstack [app-name]
Follow the instruction in a terminal.
And to run your app on a localhost, just say:
grunt serve
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:
yo angular-fullstack:heroku
If you succeed (or not) with scaffolding your prototype write a comment below!