A web designer's job isn't only to make websites beautiful. They also have to think about the flow of information and how to make the web application easy to use. Often, they end up using a tool like InVision or Balsamiq to create a mockup that gives an impression of how the website will behave.
Even though these apps do a fine job, the output is still not a real website. This makes it difficult to validate and experiment with interactions, check how the design 'feels' and communicate to the relevant stakeholders how the final experience will play.
In this article, I'll be working with AngularJS, an open source framework for building web applications, which can be used to create live, navigable mockups in a heartbeat. We'll explore how to navigate through different pages, how to use data entered by the user in inputs, and take a look at animations and interactions, theming and adding behaviour to different HTML elements such as buttons.
Setting up our prototype
The first thing we need to do is set up a new 'index.html' which will be the point of entry for our app. Besides linking to the specific CSS and JavaScript files we need for our prototype, we always need to reference jQuery, angular.js, angular-animate and angular-ux – in that order.
We also need some way of serving the directory where the 'index.html' and the other files will reside. For that, we can use npm command serve or python -M SimpleHTTPServer.
Now we need to set up the Angular application. This will be the only JavaScript we need to code to get our prototype running. The good thing is that it's just a case of copy and paste.
<body ng-app="prototype" ng-ctrl="MainCtrl">
</body>
// app.js
angular.module('prototype', ['ngAnimate', 'ux'])
.controller('MainCtrl', function($scope) {
$scope.data = {};
});Our prototype app is configured. It's time to start learning what we can do with it now.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Navigating through pages
The first thing all prototypes need is to be able to navigate through different pages. This is how we'll learn and validate how the information will flow and how the user will interact with our app.
For this, we can use the ux-page directive from the angular-ux library that we added before.
<body>
<ux-page name="Home" home>
<ng-include src="'home.html'"></ng-include>
</ux-page>
<ux-page name="Details">
<ng-include src="'detail.html'"></ng-include>
</ux-page>
</body>
<!— home.html —>
<!— … —>
<a href="" ux-go="Details">Go to Details page</a>In this case, we're creating two different pages. The contents of each of those pages are in separate files that we're including using the ng-include directive. Note that we added the home attribute to the ux-page that will be the main one (displayed by default). We could also put the HTML content embed in index.html. Creating new files for each page helps keep things readable and easy to maintain.
Then, in 'home.html', we have a link that navigates the user to the Details page. For that, we're using the ux-go directive with the name of the page that we want to browse to. It's important to note that you must put the href="" in the link so it's clickable.
Getting user input
Another important part of prototyping is being able to save some user information to display and use later on the app.
In order to do so, we can add the ng-model directive to any existing <input> element:
<!— home.html —>
<input type="text" ng-model="data.message" name="name" />This means whatever the user types in the input named name will be saved in the message variable from our data. Remember to always save the inputted values into some variable inside data.
We can just display that information in any page of our prototype using {{}}:
<!— details.html —>
<p>The message entered by the user is {{data.message}}</p>Interactions and animations
We also want to be able to see the how the interactions will flow on the website we're prototyping. This means we need to make our mockup show and hide content, and add animations for the transitions between the application's different states.
To show and hide part of the content of the page, you can use the ng-show and ng-hide directives together with some boolean (yes/no) values, which will indicate whether the content needs to be displayed or not.
<button ng-click="data.contentShown = true">Show content</button>
<div class="content" ng-show="data.contentShown">
<p> This is the content!</p>
<a href="" ng-click="data.contentShown = false">Hide content</a>
</div>First, we're using ng-click to handle the click event on the Show Content button. In this case, we're setting the variable contentShown to true. Then, using ng-show, we just say that the div.content will be shown if contentShown is true. ng-hide works the same way as ng-show.
We now want to animate how this content is displayed or hidden, to give a more complete impression of how the application will feel to the user. For that, we'll use ngAnimate. The classes ng-hide-remove and ng-hide-add are added momentarily when an element is shown or hidden respectively.
Therefore, we can write an animation for our div.content as follows:
// Content is being shown
.content.ng-hide-remove {
// bounceIn keyframes come from animate.css lib
animation: bounceIn 1s;
-webkit-animation: bounceIn 1s;
}
// Content is being hidden
.content.ng-hide-add {
animation: bounceOut 1s;
-webkit-animation: bounceOut 1s;
}You can learn more about adding animations in ngAnimate's docs page.
If you want to animate page changes, you can use the same approach that we did when showing and hiding pages. We still want to use ng-show, but here will need to use a particular page's main div class.
Theming
When you're prototyping, you want to try different themes (colours, typography, sizes and so on) at the same time, to see what works best.
For that, you can use the ux-themeable feature from angular-ux:
<div class="content" ux-themeable>
<h1>Title</h1>
<p>This is some text</p>
</div>First you need to add the ux-themeable directive to the parent HTML element that you want to theme. Then, in order to change themes, you need to specify the theme name as a query parameter in the prototype URL.
For example, if you go to http://localhost:3000/#/?page=Details&uxTheme=option1, the div.content will end up having an additional option1 class, which means we can style it as follows:
div.content.option1 h1 {
font-size: 38px;
}
div.content.option1 p {
color: red
}Final thoughts
With the techniques we've learnt today, we're ready to start creating our live and navigable prototypes. Once you start using it, I'd love to get some feedback about the process! Please tweet your thoughts and suggestions to me at @mgonto.
Words: Martin Gontovnikas
Martin Gontovnikas is a developer advocate at Auth0. This article was originally published in issue 269 of net magazine.
Liked this? Read these!
- The 10 best web mockup tools of 2015
- The ultimate guide to logo design
- Useful and inspiring flyer templates
