Updates

Flexible Layouts – Better Design. New Opportunities in UI Bakery

Tatiana Yudina

3 min

We promised to provide a responsive design a long time ago. Finally, it’s right around the corner. Why did our team need so much time? Because we wanted to rebuild layouts totally to give you more opportunities in the UI Bakery low-code visual development platform. These new features will help you create a better design with our low-code app development software.

Flexible layouts with ready widgets and UI components allowing to create web design faster


Spaces in general

Old spaces were good for developing simple layouts, however, they were not flexible enough for all types of applications you may decide to create. Spaces have been added to the other elements. Now, this option is available in the list of elements.

Previously, you were not able to add a space into space, which limited your possibilities in building a unique design. Thanks to the latest improvements, you can easily implement microlayouts. For example, you want to create a list of contacts: you have the main space with vertical direction – a list, and each contact has its own horizontal layout with avatar, name, and button.

Note: you can manage, copy, resize, delete, and customize all the spaces. They must lay in one main space: the main space of the page, the main space of the card body, etc.

How to use predefined components to simplify web design creation in a low code development platform

Directions

It was quite challenging to create a form earlier. You needed to add a space for each element to place elements one under another. Now, you just need to set the direction as vertical, and add a spacing to particular elements. Feel the difference. :)

How to build your web app design faster with flexible layouts available in UI Bakery

Columns

Before you could define a space width only in pixels and percentage. To increase the responsiveness level, our team added columns. We use a standard 12-grid layout, so each space can take from 1 to 12 columns on the screen.

Design opportunities in a low code development platform allowing to build UI faster

Drag-and-drop space resizing

Obviously, people who build interfaces enjoy using drag-and-drop technology. Now, you can drag-and-drop spaces to change the size. In the near future, we will provide our users with an ability to move spaces within the screen. Our team has added a resize handle (a white square in the bottom of the space) to allow you to change the size directly on the page.

Note: if you set the space size in percentage and drag-and-dropped the size, the space would change the units to pixels. 

Drag and drop in a low code development platform to create UI design on the fly


We believe that the new UI Bakery features will make an app development process much easier. Right now we are polishing and getting ready to launch our Responsive design in the UI Bakery low-code apps builder.

Want to become an early adopter to try all the new features first? Let us know via [email protected]

February 6, 2020
Tatiana Yudina
Product manager at UI Bakery since it was founded. Eagers to explore new product frameworks to boost productivity and applies the best one. Having been working since 2012, Tanya has solid Business Analyst and UI/UX expertise in both B2B and B2C fields. She enjoys sharing product management and no-code development experience. Feel free to contact her as a guest blog writer or as a speaker on tech events.

Last articles

Don't want to miss anything?

Get updates on the newest stories, case studies and tips right in your mailbox.