Quick and easy prototyping with Framer
--
Prototyping is an essential part of the web design and development process. It’s the easiest way we can test a hypothesis, and collect valuable feedback. It gives us the ability to check all important aspects of the user flow and experiment with different interactions.
In this article, I’d like to share our experience at Junomedical on how we revised an integral section on our website. The main focus is our prototyping process using Framer, and how it helped us to get a deeper understanding of the way people interact with our product.
What is a prototype, and why it is important?
“A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.” — Wikipedia
Prototyping as a process gives us the ability to analyze the functional form of our ideas, rather than theoretical concepts. It’s a valuable characteristic of this approach, which can help us a lot during the design phase. We can create a variety of interactive, animated experiments that differ in how we emphasize the most important message we want to deliver. This is a nice way to think about the key aspects of our product’s visual language. Another example is understanding the potential usability problems before we get to the actual implementation. Following such a process, we can actually save time and money.
Prototyping is not a static, one-dimensional process. Let me explain a bit more what I mean by that and why it’s important. Defining the goal we want to achieve with our prototype is one of the first steps we need to take. However, after successful execution, we would like to get a feedback. Reviewing the initial implementation gives us an idea of what to refine in our prototypes. We’re repeating that process until we reach our goal. More on that later (including examples).
The scope and complexity of our prototypes depend on the particular use case. Important considerations are also what the available resources are and the level of willingness for deep analysis.
Now we discussed these important aspects, let’s continue with the main part of this article 🙂
Prototype tools and why Framer
Nowadays, there are plenty of prototype tools that we can choose from. Their functionality varies from specific solutions that reproduce sketching on a whiteboard, to complex, fully-featured frameworks. The decision of which one to choose depends on the goals we set and the available resources. If we consider a rapid prototyping process, it might be worth to invest in a framework that can help us deliver high-quality results. This might be an expensive option, but it can save us time. Another important aspect that can shape our choice is the targeted platform(s). Certain tools specialize in prototyping for mobile devices only. Others provide features for desktop testing on top of that. Of course, the decision depends whether the final product will be a native mobile application or responsive website. Lastly, it’s nice if the selected technology integrates well with third-party tools. It helps a lot when we want to import directly Sketch wireframes or Photoshop PDS files.
Before I go into detail on why we choose Framer, let me give you some brief explanation on our use case. A couple of months ago, we decided to re-design the template behind one of the most important page types on our website. It presents a detailed profile of a selected clinic to our visitors. As a first step, before the actual implementation of the new design, we wanted to collect as much feedback as possible. Experimentation and playing around with different interactions were also considered. The important part was to find a quick way to create a prototype, close to the real implementation, that could be easily updated after each iteration. We did some research, and we found that Framer was ideal for the described scenario. The 14 days trial period gave us enough time to evaluate the product and test all of its features.
Framer is built on top of CoffeeScript, which is a little scripting language that compiles to JavaScript. As a front-end developer, I found that extremely helpful. The syntax is a simplified version of JavaScript, which means no extra learning boundaries. Moreover, it’s easily explained to people not familiar with programming. That gives designers the option to apply code changes without any technical support 👯. Isn’t that great!
Essentially, Framer provides us with a digital playground for our designs. We can apply any of the predefined animated interactions or create one on our own using their well-documented API. Implementing a navigation flow between different screens is quick and easy. Same applies to the sharing functionality. We can easily preview the result on a variety of devices and present the final version to other team members.
Framer 101
When we open the application we will find a really clean interface, with a separation between the code editor and the preview panel.
All of the important controls are listed on top of the screen. This includes import of designs, a list of ready-to-use code snippets, preview, and share actions.
I highly recommend downloading any of Framer’s examples and playing around with the code snippets. Some of them might be too complex, but they can help us to get familiar with the app interface. Another reason is to see what is actually possible to achieve using Framer.
There are four main concepts defined in Framer:
- Layers — a common concept which you can find in every design tool. It’s really easy for designers and front-end developers to start working with it immediately.
- Animations — animate the states or layer properties like opacity, color, scale etc.
- States — sets of stored layer properties, that can be easily animated.
- Events — detection and responding mechanism to user interactions
Learning these main aspects of the app will help us to quickly produce our first prototypes. It’s interesting how Framer’s creators combined well-known design and front-end development concepts.
Our prototype process flow
Now we’ve we covered some of the basics, let’s continue with our product example and the process we followed. The most exciting part was to see how Framer can serve as a communication bridge between development and design.
Our initial goal was to create the first version quickly. The target platform was mobile, so we used a defined width for the main, root layer. The first step was to create the design assets. We had a couple of brainstorm sessions that helped us with the initial design. It was also aligned with our high-level vision for the expected result. We created the required layers in Framer by importing all design resources into the app.
The initial version was built for a couple of hours and can be found at the following link.
It’s one view with a scroll component and root layer holding the rest of the content.
# Create a new scroll component
scroll = new ScrollComponent
width: 750
height: 1334
backgroundColor: "#FFF"
scrollHorizontal: false# Main site layer
siteLayer = new Layer
height: 12781
image: "images/site.png"
width: 750
y: 0
parent: scroll.content
For the main navigation, we used a sticky header approach. Framer provides an intuitive way to include external modules. In our case, we added as a dependency the sticky header module.
# Include the required module
{StickyHeaders} = require "StickyHeaders"
# Enable it for the scroll component
StickyHeaders.enableFor(scroll, 100)We implemented also an auto scroll feature when users interact with second level navigation. It uses scrollToPoint method attached to the onTap event listener.
# Navigate to details section
detailsNavItem.onTap (event, layer) ->
scroll.scrollToPoint(
y: 280
true
curve: "ease"
)
detailsNavItem.states.switch("default")
priceNavItem.states.switch("default")
contactUsNavItem.states.switch("default")For a smooth animation, you can define a curve property as we did in this example. Using a states.switch method we can control the active state of all navigation item.
Next, we showed this prototype to several groups of people. After analyzing the results we updated our hypothesis and refined our prototype.
We did two other iterations before we created the final version, which can be found here.
This was the process we followed until we reached the point where we were happy with our prototype. It gave us confidence that we can get even more interesting insights from the way people interact with it.
With each iteration, we added more and more functionalities. The final version has a modal component for the staff profiles and image carousels for the clinic pictures. There is also a functional video section and nested accordion for the price table. First three were implemented using some of the examples provided by Framer. However, the nested accordion component was built entirely from scratch. It was essential for our test case due to the importance of that section on the page. The solution was working as expected, though it was not optimal. This was because of the short amount of time we had available. It can be definitely optimized.
You can download the full source code from the published link. It can be viewed and changed in Framer. Of course, the script files can be edited in any code editor.
Summary
Overall we were happy with the accomplished goal and the experience of using Framer. An important question is: how far should we go in terms of adding more functionality to our prototypes? As we found out, complex results are achievable. However, there is a point where we can start developing our components instead of mocking up the logic. Sure, this depends on the actual case, but it can save us time if we estimate the effort correctly from the beginning.
Hopefully, you will find this article helpful for your next project. Prototyping is a key aspect of the modern web and mobile development. It’s fundamental for creating an amazing user experience.
