Building Dynamic Layouts In Phase

• Building Phase
• The State Of Digital Design

{⏱} – Coming in Phase v2+

The Creative Process is at the root of everything we do at Phase. It’s what had brought us all together in the first place. We’ve experienced the power of creativity first hand – and wanted to let fellow designers spend more time being creative too.

That mission has taken us on a journey re-working our design tools from the ground up. It’s a tough task, to say at least. We had to think about the First Principles of our Creative Process.

How did we always create designs? We found out that design has always been visual. The examples are many. We can now create complex 3D or game designs with visual tools – why not web and mobile prototypes?

It’s true that web is dynamic and complex. But how do we cut through that complexity and finally build accessible tools that just work, without frustrating limitations?

We knew that the first step was to clearly define the problems. We are designing screens, not static pages. Our layouts are dynamic and adaptive – our designs must be too. Libraries are much more than symbols. We must design with real Data. Digital elements must actually work in our prototypes. The list went on and on.

Now how do we find solutions? It was apparent we had to start from scratch. Abandon print design paradigms and build truly digital, designer-first tools. Does that mean distancing ourselves from the existing solutions entirely though? Obviously not. We had to deeply research and analyze them first, to avoid the same pitfalls.

That’s how Phase own Design Process was forged. We have been applying that process of first principles thinking, combined with in-depth research, to every bit of our work.

Building Phase, every problem we faced turned out unique though. We want to be fully transparent about our Creative Process and the tools we’re building. And we love your input, since only together can we build world’s most loved design product.

Today let’s dive into our Creative Process building dynamic layouts in Phase.

Why We Need Dynamic Layouts

The layout is a basis for dynamic, digital content. It’s nothing but a set of rules that hold content in place, creating our design’s composition pattern. Well-designed layout sets up the user experience from the bottom up; it’s not visible to the users, but it has a tremendous impact.

Digital content is fluid. Articles, data, titles, images ratio — you name it — they all flow and adapt dynamically, based on the content and the context.

What kind of layout changes could happen during the Creative Process? For example, dynamic content could change text block’s length. Same happens with any other element. They shrink, resize, move, get hidden or transformed.

Pretty quickly, these examples remind us that we’ve been struggling with layouts in our design tools for decades, without ever finding a good solution.

The problem is clear. So where do we start searching for the solution? At Phase, we always start off grabbing a pen and piece of paper.

What Are Truly Dynamic Layouts?

Once the layouts problem is clear, we turn to sketching. We don’t draw solutions at first – we start off drawing the problem itself.

We draw how the layouts flow and adapt to different scenarios. How do we make sure our model is flexible and powerful at the same time? We dig deep into various platforms and interfaces. How to make our dynamic layouts work regardless of the device?

At that stage, we try to forget everything we’d known about design tools before and focus on what really matters for our Creative Process. Sketching helps to concentrate and cut off the unnecessary. Every line and every element matters – just like they do in real digital product.

Very soon problems turn into logical solutions, which in turn transform into visual tools. Every first prototype at Phase is always on paper. It’s then that we grab our laptops and turn to research.

Why Constraints Are Not Enough

You’ve undoubtedly seen different variations of this around: constraining one Element to another, then resizing the whole Screen or Group, and boom — your design is responsive. Yet, this is not even close to being dynamic.

Constraints allow us to set the basic size and placement rules for groups of Elements, and grids work great for creating a visual composition. However, they aren’t truly solving dynamic layout problems. What’s missing is the relationship between the actual content, and the container it’s inside of.

The same design component can contain different pieces of content. So how do we setup layout rules for this? Well, in digital products in the real world, Elements flow into one another, they’re scrollable, and they adapt to content size. This can sometimes have minimum and maximum sizes, for different cases. Elements can be placed in order and can lay in unequally divided grids. Oh, and they can responsively change due to any of the above.

It’s surely dynamic, isn’t it? That’s all before we even touch on interactive behavior, and real-time dynamically-changing content.

For these cases, some items’ behavior needs to be set explicitly when we create our layouts, such as what happens when you add another element to a row, does it shrink or grow? Reflow to another row, or makes that row scrollable?

For now, the only solution for complex layouts in Digital Design is to code them. The possibilities offered by code are close to limitless, even if you’re only using basic front-end/CSS solutions.

• Flexbox is excellent for one-dimensional layouts. This means if you’re laying out items on just one axis, you would probably go with Flexbox. It’s ‘inside-out’ layout, meaning the layout can easily adapt to fit your dynamic content.
• CSS Grid is perfect for two-dimensional layouts. The grid is ‘outside-in’, meaning your content mostly has to adapt to the layout rules you’ve explicitly defined on the Grid, rather than vice versa.
• Last but not least are the Dynamic Units — if you work in code, you’ll have seen these sprinkled throughout your work.

None of the above work for most designers though, since most designers don’t code. They are stuck at less than a halfway with just constraints, unable to create truly digital products.

Once we’ve done rethinking dynamic layouts from the First Principles, and finished extensive research, we are on the right track to finally bring our solution into life.

↳ Now Let’s Put it All Together, Visually

Constraints + ~Flexbox + ~Grid + Dynamic Units = Phase’s Layout Model. That’s basically it. Phase combines them all, visually.

That dynamic layouts model is first born on paper, right after we’ve finished the research. We then turn to Sketch (we’ll use Phase very soon once we implement editing tools) to visualize it digitally.

At first, we make our interface rather complicated intentionally, to make sure we cover all the aspects of the solution. That’s when the iterative process starts. We start to simplify and further refine our visual tools. We won’t stop until Phase interface is crystal clear, with any action no more than three clicks away.

Our fantastic Phase Community helps a lot. We regularly post updates there and get invaluable feedback. Thank you!

So, after all the iterations on our visual tools, how does it all work together?

Sizing and Units ⦭

Let’s start with basics. Each element has its own size. Not just a fixed pixel value, but also dynamic percentage values when you need them, that are always relative to their Parent Element.

It’s not only about width and height though. The dynamic layout wouldn’t be complete without things like max and min, so dimensions can have minimum and maximum values set as well. Oh, and of course we can also set our Elements to grow or shrink, to fit or fill the available space.

Then we use Fraction Units to quickly calculate the space taken up by an Element, and the proportions between Elements.

For example, when Element A has a width of 2fr (fractions), and Element B has a width of 1fr, Element A will fit ⅔ of the available space while Element B will occupy ⅓. If this seems confusing, don’t worry. When you work with it in a simple visual editor, it becomes very easy.

By now you may be asking yourself: why is this fraction unit important? Couldn’t you just use the percentage value?

Well, yes…for static design. In Dynamic Layouts fractions matter when you want to place multiple Elements within the same parent. In this case, Fraction units recalculate things dynamically for you, on the fly.

Let’s look at an example when Fraction Units make sense.

Imagine that Element B in the image below is a Component, and you duplicate it. Fraction Units will take care of the layout for you automatically, without any calculations, or manual moves and resizing.

So when you duplicate Element B, your new layout is this: Element A width is ½, Elements B1 width at ¼, and Elements B2 width at ¼.

Sizing summary:

• Fixed: Pixel, Points
• Parent-based: Percentages, Fractions
• Auto: Shrink, Grow

Position ± Alignment in Phase

Every element has a unique position relative to its parent. Again, more than just about the x and y values, Elements can have unique paddings and margins determined by either fixed or dynamic units.

Overflow, Clipping, & Scrolling

Then there’s overflow and clipping. This defines if the Element is inside its parent (where it can be clipped, scrollable or just push) or outside, giving you full control over the Element’s position relative to its parent.

When it comes to positioning, you may want to position Elements dynamically. That’s where Alignment comes in handy, and Elements can be aligned either vertically or horizontally, to an edge or center point, with offsets that you determine.

Columns & Rows ⧻

These are special Layout Elements. They are helpful when it comes to stacking Elements vertically or horizontally, and both have Gap Properties that set the spacing between them.

Order & Placement

The last, but equally important part of the Phase Layout Model is the Order and Placement of Elements. Each Element has a unique Order Property, which can be changed dynamically inside Interactions, or as part of our responsive design model, to reflow your content.

This is crucial when you dynamically add new content or add new Elements to your Layout on the fly. Also, if the content can no longer fit inside the parent, you can use this to reflow or wrap into another row or column.

And Of Course, Layouts Are Components

Finally…like everything in Phase, your Layout Elements can be Components in Libraries. This means you can reuse them anywhere, and override their properties and settings dynamically, on each instance.

---

We are confident that the above tools are all designers would ever need to create most complex dynamic layouts. We continue iterating on the interface to further simplify and improve its bits and pieces.

Rethinking Digital Design – Together

Your input is very important to us. We’d love to hear your suggestions or ideas about our Creative Process and Dynamic Layouts Model. Welcome to shout out in Phase Community, or just shoot us an email.

In the next issue, we’ll talk about Libraries, and how we’re reimagining dynamic components in Phase. Subscribe to Phase Magazine newsletter and stay tuned!

---

• For more articles subscribe to Phase Magazine Newsletter. 
• Follow Phase on Facebook, Twitter, Instagram and LinkedIn. 
• Join Phase Community on Slack and our Facebook Group.
  

If you want to contribute to next the issue of Phase Magazine, just drop us a line: