Ulibra.io

Cloneable UI component library for Webflow, Figma, Framer

Visit Website
October 22, 2023 How I came up with Ulibra.io

How long does it take to develop a website?

From my 10 years of experience in the website development industry, this can, of course, vary for a simple website, taking a few weeks to a bigger project, which can take months.

And if we could reduce this time, because everyone knows the saying "time is money"?

This means if we can save on development time, we can earn more, right?

Well, I think, yes…

Let's take an example: on average cost, one developer's working hour nowadays can vary, depending on the location. But let's take an example in Europe. When developing a website, agencies can charge from 60 to 75 Euros for one hour of development. How much can be done in this hour, and how many hours do we need to complete a website? And how can we reduce the time spent on development and get more time to acquire more clients or handle more projects?

In recent years, no-code website development tools have become very popular (Webflow, Framer, etc.), allowing users to develop websites without knowing any programming languages. Now, some tools have become so advanced that they even allow ready-made Figma design files (of course, which are properly prepared) to be transferred to existing platforms and automatically turn them into user-friendly web components, eliminating the need for a front-end programmer.

Does this mean that there is an opportunity to save time on front-end development?

My hypothesis is, yes, and quite a lot... and if you take into account that, for example, Webflow already has its own CMS, most small and medium-sized companies have all they need and can create websites without involving the development of the back-end.

Taking into account the above-mentioned things, that we can save time for development without involving programmers, does this mean that any user can develop a website without any experience?

I think not. In any case, it would be necessary to have at least some understanding of web structure, component functions, and user experience. However, this is not the main target audience for which this product is intended, but more for developers themselves or designers who are already in the industry and offer website development to their clients. This platform would allow them to save hours on programming, designing, or creating a concept.

The idea of the platform is to allow users to browse the library with prepared, ready-made UI components, which they can easily copy & paste into a no-code platform or Figma. Also, there will be a section where users can access ready-made templates created using library components, which can be freely edited and customized for each client. As a result, it saves time on the development of brand-new components for every new project.

The biggest beneficiaries of using this product will be:

Startups: Allowing them to create the first concept version, saving time and money for the development of the first version.
Agencies/Studios: Accelerating development on client projects with ready-made elements or templates.
Freelancers: They can deliver high-quality service more quickly and take on more projects.
Students: As well as young professionals who are taking their first steps in creating a website, giving them inspiration and an example of how to develop certain components that provide a better user experience.
For the time being, the business model is planned as a monthly subscription fee, which will not be higher than the rate of one developing hour. Initially, we will provide users access to the library and ready-made templates, but in the future, the idea is to conduct tests to optimize the entire process in order to simplify website development and save time.

With this idea, vision, and research into the direction the website development industry is heading, the Ulibra project was created. Some time ago, I had already begun the development process and had a prototype ready for uploading design files, filtering the library, and reusing it on other platforms. I have created a temporary page where users can sign up for the first test phase. It is not yet known when I will complete the fully testable first version for users, but I think it will be by the end of the year. This will also be my next goal - to launch the platform, so stay tuned.

3 Comments

  1. 1

    Hi.

    Not familiar with actually woring with webflow/notion. However, as I understand no-code overview, the idea is to have a working webapp using "components" that ind of hook together, but not need to really create extensive coding. Is this more or less correct?

    If I've got a reasonable understanding, here's my question.

    If I want a site, with a default (landingPage), a horizontal navBar/menu, and the ability to have a login/registration area that might be anywhere on the page.... I'm assuming this is doable.

    If one wanted to extend this, by having the menuItems, be able to either update a different section of the page, or to display a completely new page, this wouldbe doable as well?

    If one wanted to have table data disaplyed, which comes from the srvrside, how does this work? Or does the overall process have async/ajax functionality embedded in the process?

    thanks

    1. 1

      Hi, tsmith

      A no-code tool, such as Webflow, is a software platform that allows users to create websites, webapp or other digital solutions without the need for traditional coding skills. These tools typically provide a visual interface and pre-built components that users can drag&drop.

      Notion is a productivity webapp, In my knowledge you can not use it for creating a website.

      Answering questions, you can customize your navBar and position it anywhere on the page. You have access to change the same CSS values like padding, margins, positions, etc. And can order components in layers, keeping the same logic as in HTML, for example: sections > parent div > element. Always you can take a peek at the code behind the design.

      In Webflow you can create this navbar as a component, and add it to all pages. By editing the main component all charges you make will be automatically updated to all pages. There is the option to add additional menuItems and display them on pages you want, on other pages you can hide them.

      Also, you have the option to add additional custom code to every page or add code blocks.

      They have 3rd party app library for specific or complicated cases.

      With dynamic embeds, you can connect to external data sources using custom code (HTML, CSS, JavaScript) and display the retrieved data on your Webflow pages. This allows you to leverage data from external sources, such as APIs, databases, or third-party services, to dynamically populate elements on your site.

About

Creating clonable UI layouts, components & templates to improve Webflow & Framer developing speed and quality for fractions of project cost.