Jutro Floor Plans are ready-to-use
full-page templates that organize your header, footer,
navigation, and content to streamline the
design and development of applications.

They include the shape, layout, and
components that best match the needs of your application
type.

Floor Plans promote consistent UI
composition and free developers to focus on the user experience.

Working with Jutro Floor Plans to develop
applications is like picking a new apartment.

Every apartment features a set combination
of rooms that fulfil a specific purpose.
Same for Jutro Floor Plans!

They define navigation and provide a
specific combination of layout and components.

These pre-developed shells help you avoid
custom coding applications.

Floor Plans have common theming,
navigational elements, and content areas.

They accommodate variations across
consumer and enterprise applications.

Similar to architectural drawings, which
illustrate the shape, size, and arrangement of an apartment,

Jutro Floor Plans define a page's shape,
layout, and content positioning.

The apartment floor plan that you select
defines the layout of rooms.

For instance, the size of a kitchen and
its relationship to other rooms will be different
depending on the floor plan you pick.
Working with Jutro Floor Plans is the same.

Each floor plan includes a specific
combination of layouts and navigational elements.

Layouts determine things like column
proportions, and designers choose them based on the jobs
their users need to perform.

Here are examples of an I-shaped floor
 plan with a one-column layout, while this one refers
to an I-shaped floor plan using a
one-by-two layout.

This is an example of using an L-shaped
floor plan using different page layouts.
On the left, a two-column layout, while on
the right, a two-by-one layout.

After selecting the floor plan and layout
of your apartment, it's time to furnish it.

Take your kitchen as an example.
It features a specific combination of
furniture like a fan, a cabinet, a faucet, doors, drawers,
countertops, and handles.

Just as you need to furnish an apartment,
you also need to fill Jutro Floor Plans with
components. Steppers, switches, cards, buttons, and
more.

Components are the smallest building
blocks of Jutro applications, and they snap right
into your layout grid.

Now that you have understood what floor
plans are, let's talk about some of their benefits.

First, you don't need to custom make floor
plans, you can reuse pre-made ones.
Also, they contain several out-of-the-box
options, such as theming and accessibility.

Most importantly, components and patterns
will snap right into your floor plan grid,
so you wouldn't need to code their
alignment.

And most definitely, they all include
built-in responsiveness across different kinds of form
factors.

To sum up, floor plans are your
ready-to-use full-page templates that are configurable
and upgradable.

You can use them in a variety of
applications, and they work across a multitude of form factors
from desktop, tablet, and mobile.
 
Floor plans tie the entire design system
together. They are page-level objects that combine
components, patterns, and page layout to communicate content
structure and information architecture.

While layouts determine the content
organisation within the floor plan, components are the
basic building blocks of the Jutro design
system that form an interface, such as buttons, inputs,
drop-downs, or data tables.

Each component has its own unique
properties, some that can be configured and some that
can't.

Floor plans ensure consistency and
expected behaviour across all applications, improving
end-user experience, and saving time for
both designers and developers.

Thank you for watching.
For more info, visit our documentation at
the address on screen.