Preparing mockups for Tilda

Which mockup decisions affect the time and cost of building on Tilda, and what to check before handing the design to the developer.

Before approving a mockup for Tilda, it helps to understand exactly how the pages will be built. If the designer uses the platform's grid, repeating styles and clear responsive variants, the developer simply transfers the decisions. If the mockup ignores the limits, part of the design has to be redesigned.

Decide which blocks are standard and which are free-form

Not every screen needs Zero Block. Text sections, lists, forms and simple cards are faster and more robust when built from ready blocks. Keep the free-form editor for compositions that shape the character of the site.

Sorting this out before the build helps keep the design where it matters and avoid overpaying for manual tuning of typical elements.

A shared grid removes extra tuning

Content width, columns and side margins should repeat from block to block. Random values create visual noise and need separate settings.

If an element deliberately breaks the grid, mark it in the mockup so the developer does not mistake the decision for an error.

Real text tests a mockup better than a placeholder

A three-word headline and a final twelve-word headline take up different space. The same goes for cards, pricing and buttons.

A mockup with real content, or content of similar length, shows whether the composition can handle the task. Otherwise problems surface only after the build.

A mockup should show more than the ideal screen

Menus, forms, tabs, accordions and sliders need more than calm screens. Show hover, error, successful submission, the open state and a long value.

Without these variants, the developer has to make design decisions alone, and the result may differ from expectations.

Responsive behaviour is designed in advance

At minimum, you need a mobile version of the key pages and a description of how repeating components behave. For complex scenes, it helps to show a tablet or in-between width.

It is especially important to specify the order of elements, which decoration may be hidden and how tables work. "Let it adapt by itself" does not define the result.

Fonts and images are handed over with the mockup

Attach licensed font files or links to an accessible source. Images are best supplied in original quality, separately from the downsized copies in the mockup.

For each photo, mark the important area of the frame. That helps set up cropping on a phone correctly.

Describe animation as behaviour

An arrow showing that an object "appears nicely" is not enough. You need the trigger, direction, duration and response to scrolling or user action.

Agree on complex animation with the developer before the final design. Some ideas will need extra code or turn out awkward on mobile.

Repeating elements must be identical

Buttons, fields, cards, headings and spacing are designed as a system. If the same button comes in five random sizes, the developer cannot tell the rule from the mistake.

A single system speeds up the build and later editing of the site.

Handover starts with a technical check

The mockup should contain the final page structure, real texts, responsive versions of key screens, states of interactive elements and links to resources. Content that will be added after launch is marked separately.

After a short technical check, the build can be estimated precisely, and the places where Tilda will need a compromise or extra development are visible in advance.