The Good and the Bad: A Review of How Our Designers Used FRAMER

We at Uni embrace the trend of change, and it's not just about our rebranding, but also the tools we use. Intuitively, we divided the tech industry into eras, let's call them the Old School Tech Era and the New School Tech Era (hope our millennial community will understand us).

‍

‍

Our digital design spirit has determined that even from the logos of these products, it is already becoming clear which ones were developed within the framework of the new era.

‍

At the same time, let's immediately answer the following question: Are the tools we used at the beginning of our journey performing their functionality poorly? Answer: absolutely not! These are the absolute market leaders that cover the full range of our needs as a company producing creative digital solutions. Nevertheless, we use tools that make the lives of our specialists easier and improve the results of our clients even more!

‍

‍

That's why we decided to talk about Framer in this article - no-code solution (almost), which allowed us to bring our project to life with zero deviations from the designers' concept. Below, you will read why we chose to use Framer Website Builder, its strengths and weaknesses. Enjoy reading, and we hope you will discover new interesting and honest knowledge for yourself.

Case Study: Why We Decided to Use Framer. What Challenges Did We Face?

Edtch, a startup in the e-learning industry, approached us with their new project. Edtch. is all-in-one cloud learning management system with a built-in course editor where you build interactive lessons and tests to upskill your colleagues and customers. Our first iteration was to develop a minimalist landing page design that would attract users by focusing on product information, using 3D graphics elements and animations. After studying the client's request, competitors in the e-learning industry, and creating prototypes that gave the client freedom of choice, we realized that we could optimize the development process.

‍

What specifically did we want to achieve?

First and foremost, we understood that the designer of the project could achieve the closest resemblance of the final result to the design faster and more accurately than anyone else. However, it is a fact of the industry's history that designers do not know and are not required to know programming languages and implement the project themselves. In this case, we decided to explore and test Framer as a tool that is intuitively similar in interface and functionality to Figma. Right away, we learned about the official "Figma to Framer" plugin, which can transfer all the design layout directly into the project space in Framer design. What did this give us? A ready-made landing page layout in just a few minutes.

‍

‍

“ It is worth noting the weak side of Framer: The need to make a large number of adjustments after transferring the design from Figma.

‍

Please note that this was our first experience using a no-code solution tool like Framer. Nevertheless, while transferring the design, we encountered issues such as incorrect placement of many elements, layers that could be misconfigured, and we didn't even think about pixel-perfect approach at that time. Our UI/UX designer spent additional time optimizing the layout according to the design. Did it take up a huge amount of time for designer? No! Would a developer be able to implement the complete website layout in the same amount of time? Uni developers are capable of many things, but the answer is also negative.

‍

Taking into account the strengths:

‍

• We truly optimized the potential time spent and consequently the client's expenses.
• The designer personally achieved the identity of the design in relation to the developed website.

‍

But that's not all. If you are familiar with the website development process, you know that creating the layout is just the beginning of the project. The next step is implementing functional requirements and animating elements.

At this stage, we faced our first serious challenges.

Let me give you a little spoiler about what I will describe below: the no-code solution required the involvement of our developer to help integrate custom code for some functional requirements. Yes, that's right. Framer did not allow us to complete the project from start to finish solely with the abilities of our designer, and there was a need to use code to fully realize the designer's vision.

‍

The strong point of Framer

A large number of ready-made solutions in the native library. It's true, here you can connect ready-made headers, footers, cookies notifications, sliders, and many other elements. And they really are ready-made solutions that can be inserted into a website in just a few minutes.

However, at Uni, we never limit ourselves to what any tool offers. Our designer presented the perfect solution for our client, which would look unique. And we decided that we are not ready to give up our creativity and will involve a developer.

‍

At this point, let's mention the challenges associated with using the library of ready-made components from Framer:

‍

• The difficulty of customizing these components.
• The peculiarities of the developer's environment differ significantly from the familiar development environment, which initially led to the emergence of errors. Sometimes the code simply didn't work as it could in a typical development environment, which also required additional time for testing and optimization.

‍

In turn, it is fair to note that this is actually a big plus of Framer:

‍

• The ability to integrate custom code is primarily a cool feature that helps achieve the development goal, rather than the opposite. Indeed, even an experienced developer needs time to get used to the development environment there, but time was already saved during the design layout converting stage, so only when creating the first project, the developer will have to spend extra time to adapt.
• Framer also allows for very intuitive and convenient work with 3D models. We won't delve deeply into this topic as it deserves a separate discussion, but we recommend you familiarize yourself with it.
• (And if you're interested to hear from us about how we see the use of this incredible combination of tools for implementing 3D projects on the web, write to us at social@uni.agency, we will definitely listen to you.)

‍

‍

How we optimized our work with the client

Working on the Edtch project, we knew that we would have a lot of work ahead of us even after the completion and release of the website in production. Why?

‍

Because our client in this case turned out to be very close to us in terms of quick adaptability to daily market changes. Edtch is a startup about courses, training, and staff development that refuses to follow typical principles of platforms with digital courses. There is no typical homework, lectures, and boring feed page. Edtch is a startup that understands exactly what its target audience needs.

At the same time, this cool feature of Edtch is also a factor that requires frequent changes to the product functionality, constantly updating content on their website, etc.

In such a case, it is difficult to optimize future development and implementation costs. However, it is possible! Framer was ideologically integrated into our work with the client in order to reduce the costs of making any changes! The client does not need to involve our team or their own development team to make changes to the project.

This was achieved thanks to the intuitive and easy-to-learn interface and functionality of Framer. Our task was to help the client make all the necessary changes while ensuring that it does not break the layout of the website we have designed. To do this, we worked on the adaptability and responsiveness of each element and component, allowing the client to change any text, any headings, and images as they wish.

Do you have a new review from a reputable client at Edtch that needs to be displayed on the website? Well, it will take you 5 minutes to do it yourself, without any technical knowledge, because the environment for making these changes is already ready. It is worth separately mentioning the Blogs page, which presented both strong and weak points of Framer during development.

‍

Native Content Management System
(Framer CMS)

When a brand's Blog page is being developed, it automatically means that the client should be able to independently update materials in this category of the website. By default, companies require the development of this system within third-party tools such as Contentful or WordPress, among many others. And although these systems are multifunctional and provide complete freedom to customize the CMS for any needs, their development can still take weeks, if not months, of developers' time.

Framer is designed for people who do not necessarily have coding knowledge to create a finished product. The native CMS system of Framer allows you to quickly and easily configure a template from which the client can easily add new blog posts to their website.

Design of the blog page;

Also, the design of the blog post template page;

Tags by which blog posts can be filtered.

Connected everything to the Framer CMS templates gallery for the client’s easy access

‍

What we have set up on our side:

‍

• Design of the blog page;
• Also, the design of the blog post template page;
• Tags by which blog posts can be filtered.
• Connected everything to the Framer CMS templates gallery for the client’s easy access

‍

‍

Challenges we encountered:

‍

• We were unable to set up custom tables for the blog-post template design in the CMS.
• This was indeed a challenge for us as we refuse to be bound by platform limitations and solely adapt to ready-made solutions. We needed to create a template with a table that Framer did not allow us to implement without developer code integration.
• This brings us to the main issue with Framer - not all pre-made solutions from the components library can be implemented without using code, which intuitively sounds like a problem for a so-called no-code solution platform. However, it's possible that we at Uni have high demands for our own results, which affects our inflated expectations from certain tools. 😀
• Despite all the difficulties, we have set up templates for creating blog posts that clients can add to the website themselves and filter by tags. Now everything can be done in a few clicks (excluding the actual copywriting for the blog post, of course).

‍

‍

The learning curve in Framer website development

As with any new tool, you need to acquire at least some basic knowledge. There are numerous resources on YouTube, articles on the internet, and, most interestingly, the official launch of Framer tutorials is coming soon, a project called Framer University that makes designing actual site in Framer looks easy. Of course, UI/UX designers will find it easier to work with Framer website builder because its interface is very similar to the familiar tool of every designer - Figma. Nevertheless, every product has its own features, and after the initial step of transferring the layout, you will need to master Framer motion, Framer animations, and implementing the website's functionality.

Compared to any programming language, learning Framer will be much faster, and you will also be able to enter the IT services market with the ability to create your own personal websites. However, we, as true connoisseurs of our craft, also believe that completely replacing programming is currently impossible, and we only implement more complex solutions with the help of a team of programmers and architects.

At the same time, at Uni, we see the potential of modern tools and use them not to replace existing processes, but to improve them. We pinpoint the strengths of various technologies and our spirit of innovation allows us to identify and enhance different pain points.

What conclusion do we want to draw, or What is Framer for Uni

The Uni team looks neutrally and objectively at all modern trends in the tech industry. When another AI tool enters the market, we don't panic, thinking about how soon we will be replaced by an overly smart machine, and we surely don't think about the ending of the "Terminator" movie.

In new tools, we see opportunities, and despite the aforementioned shortcomings of the Framer Web service, we see great potential and the possibility of optimizing our processes. Now we can provide designers with a tool that brings their vision to life, while reducing the time and costs of developing the project itself. Different Framer sites reviews tell about different results of working with the platform. However, we have told you the whole truth from the perspective of our company, using a real project for our client as an example.

If you want to learn more about the Edtch project, follow the link, which leads to the described case on our website!

‍