New user-friendly design framework for global IT products

Design IT products and interfaces quickly and easily

Quite recently, in order to design and create an IT product and its interfaces, a team usually made up of web designers, programmers and layout designers was required. Such a development could take weeks or even months and the cost of paying for a number of specialists to complete the work was high. But today, you can create a design for an IT product and its interfaces quickly and make any changes instantly using just one employee — a designer or a programmer — is enough. Now we will tell you how to do it quickly and without incurring any additional costs.

A bit of history

At EGO, we began our journey as an outsourcing agency for web and mobile application development. Our focus has always been on creating functional, attractive, and user-friendly solutions.

A large number of projects have passed through our company. We analyzed the founder’s path, from creating an MVP to the final product, and noticed one pattern: when a client faces a choice between increasing the budget to get a quality design or saving on visuals, many sacrificed design.

We understand that the overall impression of use depends on high-quality UX and UI, so we have always focused on the design of digital products. With the development of IT technologies, new approaches and solutions have appeared that significantly speed up the time to bring products to market and can reduce budgets when implementing the most daring ideas. These approaches rely on low- or no-code methodologies.

Low-code and no-code platforms are solutions that allow a team of non-technical specialists to create “almost everything” on their own, without diving into the code and without the need to retrain as designers or programmers.

So that our clients no longer have to choose between design quality and saving on budget, we have developed our own product that solves client tasks faster and more cheaply, based on the idea of low/no-code.

Our product has become a link that combines Figma (a standard for design and interface design) with the implementation of a finished “product” in code, whether that’s Flutter, React, or a website on the Webflow platform. Our product is designed to make life easier for developers, startups, and product owners.

‍

TheSprkl concept

Combining many years of experience and knowledge in the field of creating digital products, web applications, and mobile applications, TheSprkl design framework is made to help designers, programmers, and solopreneurs create exceptional and uncompromising products.

TheSprkl as an ideology

The members of the development team are united by a common goal — to create a high-quality IT product, within a limited time frame, and with a limited budget. The TheSprkl design framework helps to move confidently and consistently towards this goal. We brought together the main and popular design and development tools and made them work together to speed up the time to market — our IT product TheSprkl was born.

TheSprkl is an extensive design framework that includes an advanced design system and allows you to easily and accurately translate the visual interfaces to the Webflow, Flutter, and React platforms.

You can work with TheSprkl as a team. Participants may have different skill levels: one assembles the structure, another works on specific blocks, and a third creates a design. TheSprkl scales the team experience, and smoothes transitions from one specialist to another, thereby speeding up the work. The founder can entrust all the development to the team, while they focus on business tasks or clients. At the same time, the end user receives a quality product in a shorter time, and with less labor.

An important advantage of TheSprkl is the ability of our clients to develop beautiful, harmonious IT products faster and better, using our design system, which is reflected in the platforms Webflow, Figma, and Flutter.

Why Platform Collaboration?

TheSprkl collaboration with Webflow, Figma, and Flutter creates an advanced framework led by design. The ecosystem allows designers not to have to think about the technical side of creating an IT product, and to completely immerse themselves in design. And programmers can entrust the design to colleagues and go more deeply into their work.

Webflow is becoming an increasingly significant player in no-code and low-code solutions. We tried other platforms, but settled on Webflow, because its concept is close to EGO — in the first place there should be a design that provides convenient communication between the user and the product.

Technical side: how TheSprkl works

An IT product is created according to the lego principle, so design work is divided into blocks that can be combined with each other.

Users can utilize the design framework in the same way as a constructor, with different components:

• separate components: buttons, inputs, links;
• component blocks;
• sections from component blocks.

These components can all be combined to create an individual design.

To quickly create a website, users can select section templates from the design framework library and adjust their parameters to their liking. This also applies to component blocks and individual framework components.

There are two ways to create a ready-made website with TheSprkl:

1. Prepare the site design in Figma, then lay it out in Webflow based on the components of the design framework.
2. Build the site immediately in Webflow based on UI Kit templates, including UI Kit buttons, UI Kit fonts, and other UI Kit components.

The first method is preferred by designers or those who want to work out the visual elements of the site in detail, while the second method is convenient for those who already have a site structure project, such as a wireframe or an analogue of the structure. It is also useful for redesigning or moving an existing website to another platform.

To use TheSprkl to create a website design in Figma, simply follow these steps:

1. Select sections and collect pages.
2. Correct sections as needed: change colors, fonts, and add blocks and components.

TheSprkl site layout in Webflow looks like this:

1. The user finds sections, blocks, and components in the documentation and inserts them into the project.
2. Modifies the color, font, and other components to their preference.
3. Adjusts the grid of the site project to their liking: changes the indents, the width of the blocks, etc.

In version 1.0, TheSprkl design framework will be available on Flutter. The principle of working with a product on Flutter is similar to Webflow:

1. In the documentation, find the code of the component, block, and section, add the code to the project.
2. Change your project settings.

Therefore, the developer can independently create the application’s design or work in a team with a designer. This is because, using the library of elements and visual TheSprkl, the designer’s project is implemented without any technical restrictions.

To be continued…

You can now get familiar with the free promo version of TheSprkl UI kit on Figma and Webflow platforms and leave feedback. We’ll consider all suggestions to improve the next version of the product. TheSprkl 1.0 will be released for three platforms and services: Figma, Webflow, and Flutter.

The next version will be implemented in ReactJS; we’ll also expand the functionality, including the one for animation creation. We’re working on both quantitative and qualitative content.

Why try TheSprkl right now

Already, by connecting TheSprkl design framework, you can reduce team cost, and time for design development, as everything will be created from ready-made elements, but at the end, the product will be unique. Most importantly, you’ll speed up your MVP’s time to market, meaning you can start monetizing your IT product and make a profit.

Get free access to ready-made components of TheSprkl UI kit promo version for Figma and Webflow here: https://www.thesprkl.io/.

The promo version will always be free. What’s more, the first users to leave feedback from working with TheSprkl UI kit will be given a 10% discount on version 1.0 of TheSprkl design framework.

‍

Article published @ https://medium.com/@eugenepolyansky/new-user-friendly-design-framework-for-global-it-products-61981ce5e93f