Blocks design for Tilda Library

• Selection of references and compilation of ideas
• Selecting content and writing text for blocks
• Desktop and mobile version layouts
• Blocks configuration scenarios
• I passed the layouts to the developers
• Took part in the testing of blocks
• I helped the marketing department during the launch of the announcement

My role

About blocks library

Tilda is a website builder with no-code editor of interface. It consists from semantic blocks with intuitive user interface case scenario

Research, Layout design, Content creation, Сase scenario for custom block settings

Analysis of one of the blocks of the Benefits category

"Advantages" in the form of a gallery

I wanted to make large clickable cards with an interesting layout. Tilda's library has the usual photo galleries with a similar grid. It was important to make a new one that would match the style of all blocks of the library, so they could be organically used together on the same page.

The Idea

Abilities

The gallery is made so that when one or more cards are removed, the entire tile changes layout and remains flat, without spaces.

The position of the text inside the card can be adjusted depending on the content or the overall style of the site.

And you can also make a gallery in 12 grid columns or 100% of the width of the window and adjust the margins inside between the cards.

The gallery is made with the help of "Card mechanics". So the tiles can be easily dragged and changed their position relative to each other.

They can be duplicated or temporarily hidden if they are not needed at the moment.

It also helps to easily set a button for all or only some cards

Settings

Еitle alignment:
Left
Center
Right

Width of the Gallery:
100% custom width
100% with 40px offset
12 colums

Offset between images:
0px / 10px / 20px / 40px

Another example of a block in different states with a brief description of the settings

A simple and effective block. The card with the text is always superimposed on the image. You can adjust the position of the card from the left or right, depending on the position of the semantic element on image.

As the amount of text on it increases, it "grows" upwards. The bottom edge of the card is always fixed. The width of the card can also be adjusted. This can sometimes help to make a better design decision.