Prototyping Material design with RelativeWave’s Form
RelativeWave’s Form is one of many UI prototyping tools currently available. At the end of 2015 the company released version 1.4 of Form, which amongst others things supported a new feature which allowed a From viewer to be run on a mac.
Now you no longer need an iphone or ipad to view prototypes made with Form, you can now view and interact with prototypes directly in a viewer window on your Mac.
Since I don’t own an iphone or ipad, having the option of running prototypes on a mac suddenly meant that I could give Form a try.
As an Android developer I’ve always found prototyping tools really useful. I find they give me invaluable insights into how UIs, with complex transitions and animations, could be implemented on actual devices.
I’d like the look of Form since Google announced it had acquired RelativeWave back in November 2014, so it’s been a bit of a long wait to have the opportunity to give it a try, but at last here it is.
Why Form?
Form appeals to me because it gives a lot of control which allows the prototyping of custom UIs that my not be so easy to achieve with other types of tools. It uses a system of patches that each convey a specific piece of functionality, some simple patches include Image View for displaying an Image and Touch Interaction for implementing interactions with elements in the viewer.
From a developer’s point of view there are also some useful and very familiar patches for controlling logic, creating conditional statements and handling arrays. There’s even a Javascript Expression patch where you can create a function that takes a number of variables and returns a result based on the functions algorithm.
Combined with low level control Form also enables building UI prototypes quickly and using the viewer you can instantly see the result as you add patches and tweak their values. For designing interactions Form really shines. You can speed up and slow down animations quickly just by clicking on patch inputs and dragging the mouse up or down.
Tweaking values and seeing the result is quick and easy and when you really want to get animation timing just perfect it allows you to iterate changes quickly.
Without tools like Form it would be very difficult to create UIs with perfect timing that take animations and interactions from simply moving objects around a screen, to making a UI that feels like it’s alive. I can’t stress this enough, in my experience the ability to fine tune animations with instant feedback really does enable taking UI interactions to a whole new level.
Key concepts
Before we dive into how to implement a Material design prototype in Form here’s a quick recap of a couple of key concepts.
Ordering Patches
At the top right of all View type patches there is a number that determines the view ordering. Patches with a higher number are shown in front of patches with a lower number. You can reorder the patches at any time simply by clicking on this icon at the top right of the patch.
Grouping patches
To reduce the complexity and help with organization Form has the concept of grouping patches. By selected a number of patches and hitting cmd G these patches can be reduced to one patch.
To view the details of this group simply double click on the folder icon at the top of the View patch. To go back out of the group view double click anywhere on the Form editor view. Group patches can be nested somewhat like folders and are as great way to group functionality and organise the you Form prototypes.
To learn more about some of the fundamentals of using Form check out RelativeWave’s Learning center which has some great resources.
My First prototype with Form
This is my first foray into prototyping with Form. In the past I have used tools such as Quartz composer and Origami, which is a set of tools and patches created by Facebook to make prototyping UIs with Quartz composer much easier. Form is very similar to these tools. It has patches that can be connected together via their inputs and outputs, and a number of the patches are very similar to those you find in Quartz composer and Origami. The additional appeal to me was that Form also has a library of Patches that are specific to implementing material design, so there seemed to be more focus on creating prototypes for Android devices. Since Form was built from the ground up as a UI prototyping tool I was also hoping I would get the power of Quartz composer without some of the complexity and steep learning curve.
Form has patches that can be connected together via their inputs and outputs, and a number of the patches are very similar to those you find in Quartz composer and Origami.
The first thing I had to do was pick a suitable UI to prototype and I decided to try one of the examples from the original Material UI showreel, shown way back when Material design was first unveiled by Google.
This example shows an animation of a FAB (Floating Action Button) that is used as a play button. The original design from the showreel looks something like this:
There is a lot going on here, with translation, alpha, scaling and circular reveal animations all happening simultaneously. It looked like an ideal candidate to test whether I could create a Material Designed prototype with the Form tool.
Breaking it down
To implement this prototyping I decided to break things down into the following areas:
- Setting up of the UI structure
- Adding a FAB Floating action button
- Adding interaction and Animation
Building the UI Structure
First I had to set up the various components in the UI so that they were statically displayed in the viewer. Adding the album Image was simple it was just a case of dragging and dropping the image from Finder into Form. To give the image the correct dimensions I set the width and height to be the same as the screen width, by using a Superview patch that gave the width of the Viewer screen.
Next I added a Navigation bar to the bottom of the screen. In this case I created a custom patch, that allows interactions for Back home and recent buttons but for this example a simple image of a Navigation bar would work just fine. You could pin it to the bottom of the screen by using Simple Layout patch and setting the Y align property to bottom.
The last two main areas of the UI to add where the album title/playback control panel and the smaller track number and title. To create the playback control area background a Color View patch was used and Simple Text patches were used to implement the Album title, track name and number. To keep things nice and tidy I then grouped all these patches into a player patch.
Adding a FAB
Adding a FAB (Floating action Button) is very easy with Form. Form has a number of predefined patches that give functionality that is specific to Material design and the Floating Action Button is one of the those patches.
The action button comes with a default plus icon, but adding your own icon is easy. In my case I created a play icon in Sketch and dragged it into Form . I then connected the Image output of the icon to the Icon input of the Floating Action Button. This almost worked perfectly for me, but in my case the icon just seemed to be a little to small. Fortunately it was relatively easy to solve this as the Floating Action Button patch is just a group of lower level patches. By drilling down in this patch I was able to find an Image View that controlled the size of the icon in the FAB. By tweaking the values I was able to adjust my play icon to have the correct size within the FAB.
Implementing Interactions and Animations
Now that we have the basic layout of the UI together the next step was to add an interaction to the FAB so that when clicked it would initiate the UI transition. The FAB patch comes with a down output that can be used give the state of a click on it. By connecting the FAB Down output to Switch patch we can create a toggled state on the FAB and by connecting the output of the Switch to a Timed Animation patch we can generate a Progress that runs from 0 to 1 on the first click of the button and 1 to 0 on the second click. Here I’ve connected the output of the Timed Animation to a Color View opacity so we can see the progress output changing when the FAB is clicked.
For the Timed Animation you can think of the Progress output as being a percentage 0 to 100 of the completion of the animation. With the animation you can also set the easing. For Material design the Easing curve to use is generally Fast Out Slow In, although you may want to use some of the other easing curves when objects are entering or leaving the screen. In general never use Linear easing, it just doesn’t look natural. The Last input to set on the Timed Animation is the Duration. As its names implies it specifies how long the animation will take. This is a useful value to change when you sometimes want to slow down animations so you can get timings just right. Once the Timed animation is set up we need to connect it’s output to something so we can drive some change in the UI.
Adding Curved motion to the FAB
The First thing to do with our Timed Animation is to use its Progress output to Drive the movement of the FAB itself. As can be seen in the original design, once the button is pressed, it moves in a curve, or arc, down across the screen. To allow us to implement this curve motion Form has another handy material design patch called Arc motion.
The aim of the Arc motion patch is to describe a curved path between two points. The Arc motion patch takes a number of inputs and one of these is a Progress. If we change the Progress input between 0 and 1 we will see that the X Pos and Y Pos outputs will vary giving coordinates that describe a curve. Here we can connect the Progress output of our Timed animation to Arc Motions Progress input. If we set the x and y starting position to where we want the FAB to start and the x and y end position to where we want to FAB to end we now have our Arc motion patch setup to describe an Arc over a time and easing defined by our timed animation. The last thing to do is to connect the output x and y positions of the Arc motion to the input of the FAB so the animation can drive it’s change in position. There’s a few other inputs that we can adjust for the Arc motion such as the Min and Max, angle which can adjust the flatness of the curve, for our example we just use the defaults. The last input is the Flipped input, which as the documentation states inverts the circle on which the arc lies, in our case it determines whether our FAB describes a downward curve or upwards curve. In our case we want a downwards curve so we set it to true.The resulting Animated FAB group patch looks something like this:
You can see that I’ve added in a few more patches here. Mainly so that I can control the alpha of the FAB so that it fades out simultaneously as it moves. The Progress inverter is a simple Math patch which inverts a 0 to 1 progress to a 1 to 0 so the FAB will fade out and not in. I’ve also used a few other Math patches to adjust the final x and y end values of the FAB.
Creating a Circular reveal
To create the circular reveal we are going to use yet another of the Material design patches provided by Form, in this case we need the Radial Reveal patch.
The Radial reveal patch is really quite simple. It takes and x and y position to give its centre point and then we can grow the reveal animation by Changing the Progress input from 0 to 1.
To finish the animation of the radial reveal we also want it to follow the movement of the FAB button , so again we use the Arc Motion to achieve this. To keep everything neat and organised I group these patches into a Circular Reveal patch like so:
To make sure the reveal is clipped to its parent Circular Reveal patch and doesn’t expand outside it we set the Mask to Shape Input on the Circular reveal patch and also set its height to the required value.
You may have noticed that I also added a delay patch to the Radial Reveals progress. This was to counter an odd effect that I noticed when playing this animation on larger screens. As the reveal increased in size it grew outside the bounds of the right side of the screen, but as the center of the circle animated left the circle reveal moved inside the bounds of the left of the screen. This created a very unpleasing effect and made the animation look strange.
The delay was enough to counter this effect. With the mac viewer I tried this on a number of screen sizes and adding the delay seemed to be enough to solve this problem for all screens sizes. So being able to quickly change screen size with the mac viewer was very useful in this case.
Expanding the play control background colour
As part of the transition we can see that the background to the track title also changes colour. This can be implemented by expanding the colour of the play controls background vertically to the bottom of the screen.To implement the expanding of the background colour we need to animate it’s height value from a min value to a max value as the progression of our Timed animation changes.
To do this we can use a Transition patch that takes a Progress as an input and also allows the setting of a range to animate over. By connecting our Timed animation Output to the input of the Transition, and then connecting the output of the Transition to our Color View height we get the expanding animation we need.
Animating the volume slider
The Animation of the volume slider has a slightly longer duration than the rest of the UI’s transitions so it needs its own Timed Animation patch with a longer duration. Three things happening to the slider volume button, it slides in along the screen , while also fading in and scaling up. The Volume button itself is a Circle View and to animated the scale and Opacity we simply connect these inputs up to the Timed Animation’s Progress output. The slide in takes a little more work but again we can use the Transition patch to animated between a range, which we then use this to drive the x position of the Circle View, our volume slider button.
Tying up the loose ends
By animating the FAB , creating the circular reveal, expanding the playback background colour and animating the volume slider we have all the main components of the UI transition in place. The rest of the UI components transition by simplifying fading in and out , and all we really need to do here is connect the output of the Timed transition to the opacity of the UI element we want to control. Finally we do some more grouping to make sure everything is organised and tidy. The final high level view of the Form project looks like this:
Implementation Recap
In the preceding sections I’ve quickly gone through what was need to do to get a Material design prototyping implemented. I’ve gone through quite a lot here, and maybe I’ve glossed over a few details, but hopefully I’ve given enough information for you to have a go at implementing something similar yourself. My aim was to not explain everything in detail, but to highlight some of the key patches and techniques that you could use to get started with your own material design prototype.
Comparing the Form prototype to the original
So now we’ve got our implementation done. How does it look and more importantly how does it compare to the original that was lovingly crafted at Google. Let’s take a look at our results:
I think I can say that the resulting prototype is fairly close to the original. Not too bad for a few hours work. Of course if you look a little closer there are a number of differences. Some of these difference are fairly minor and some are more fundamental in their nature.
Morphing vector shapes
The First and most glaring difference for me is the lack of morph animation on the play Animation icon. If you look closely you can see that the play icon morphs into a pause icon as the button move across the screen.
I couldn’t see a straightforward way of implementing this in Form. It seems to me that Form really needs a Vector Path patch or even a Animated Vector Patch so that this can be achieved. This would be a very useful addition to Form especially from an Android point of view since the Android platform Supports Animated Vector Drawables and creating this kind of animation on and Android device is something that can be fairly simply. In fact I created a very similar path morphing animation on Android some time ago:
As a compromise to not being able to achieve the morph animation I implemented a simple fade animation instead.
Other differences
The way the FAB animates to fill the screen in the original is a little smoother and with some more work I think I could have achieved a result that is a little closer. I’ve also missed out the playback progress that pops up above the playback controls. I don’t think this would have been difficult to achieve and it was just a case of me being a little bit lazy with my implementation. Most of the other difference are fairly small and included not scaling text when fading in and out, slight differences in the easing and timings of the animations and possibly a slightly different curve followed by the FAB button as it moves across the screen.
Final thoughts
Form 1.4 has added a number of new features, and with the addition of the viewer on Mac you can quickly see the results of any changes and updates you make to your prototype. The mac viewer makes it easy to switch between screen sizes, something that is useful when you are designing for multiple screen sizes. Its one downside at the moment is that the viewer is still in beta. I found that it tended to close quite a lot while I was making changes to my prototype, hopefully this will be fixed in future releases.
Another feature that I really liked about Form is that it is one of the only prototyping tools that I have used that has a set of components that are aimed specifically at Material design. So building a Material design prototype using Form generally means that you can achieve results with much less effort.
For me the only real stumbling block when using Form was the implementation of the play icon morphing to a pause icon. This is something that is relatively easy to do on an Android device, so it seems that this is a bit of a hole in Form’s feature set, especially when it comes to implementing Material design prototypes with this type of animation.
The nearest prototyping tool to Form is Quartz composer with Origami. In general I found the learning curve with these tools to be a little more steep. I think Form has a definite advantage over Origami when it comes to Material design prototypes, again simply because of the predefined material design patches. This is not to say that you can’t do Material design with Origami, it’s just that it takes a little more work.
There’s definitely a few things I could improve to get my Form prototype closer to the original created by Google, but there are still things I can’t currently achieve, such as the play icon morph animation. Also keep in mind the original was most probably created with a complex animation tool such as Adobe after effects, and I would guess it took considerably longer to implement. Additionally the original was not really a prototype in that you could not interact with it.
Was the prototype I created in Form good enough? I guess that depends on your perspective and what you want to achieve from creating a prototype. The animations might not be quite as rich as the original showreel, but the fact that you can add interactions and use this prototype as a way to communicate UI concepts is still very powerful. I think the overall results I achieved with Form still convey the essence of the original showreel, while also giving the ability to interact with the UI.
Overall I really enjoyed using Form and I think it is a great tool for prototyping. It strikes a nice balance between powerful features and ease of use. As I’ve mention I’d like to see some more patches that would make it even easy to implement Material design prototypes and also it would be great to see a native Android viewer, but even without those things Form is a really useful prototyping tool that I think I will be using much more in the near future.
