An architecture and framework to create completely dynamic, Server Driven UI for the Freo app homepage using the Grid system to create the Dynamic UI

Before we begin

What’s the Grid?

What’s a Widget?

A UI element of a product or a product vertical that occupies space on the Grid

How to organise widgets

Create all states & sizes for all widgets

Create widget priority order

Lay out widgets row-wise

Go column to column; overflow to next row

Start laying objects on the grid

If a widget doesn’t fit on the available grid

Fit it to the next available space

Resume placing

If the grid has gaps

Keep filler widgets handy. Eg. help & support, NPS, IRM

For bigger devices

Columns become wider, so do widgets

About widgets

UP NEXT

Dynamic Layouts