Published on <a href="https://blog.prototypr.io/layouts-in-phase-panta-rhei-2ef57ffc5442?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Phase.com 
{ 🚀 } — Coming in Phase v2+
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ln-6Ws4MvbyRtrYwsv42gg.png">“Let’s set our content free to adapt and flow” — <a href="https://youtu.be/E5xeEXewW9o">Phase</a>
<a href="https://blog.prototypr.io/phase-v1-all-about-interactions-3860b57dbbf0">Phase v1</a> is all about creating Interactions, visually and hassle-free. Good news are — it’s coming really really soon 👏
Meanwhile, our design team is looking ahead to the next versions and features — which we’ll be shipping shortly after. Today we want to put our heads together with you and see how we can rethink Dynamic Layouts.
Your suggestions and ideas matter a lot to us. Let’s keep the #discussions going in Phase Community — <a href="https://phase.com/community/">https://phase.com/community/</a> 💌
Layout is a skeleton for reusable, dynamic 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.
These layout rules are created for a simple enough reason — content is fluid.
Articles, data, titles, images ratio — you name it — they all flow and adapt dynamically, based on the content and the context.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*yFrJZfnKRnq8XT2M.">A Peek into Our Layout Design Process @ Phase
Let’s think about how dynamic text interacts with layout, for example. What kind of layout changes could happen during the Creative Process? Well for starters, dynamic content can change text block’s length.
There are many, many more examples. 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 (yet).
Digital design is far more dynamic and fluid than print — different screen sizes, window sizes, devices, dynamic language translations, and dynamic data — and that’s just the beginning…who knows what the future will bring us.
<h3>Why Constraints Are Not Enough</h3>
In <a href="https://blog.prototypr.io/my-%EF%B8%8F-letter-to-digital-designers-b3413a63bd72">My ❤️ Letter to Digital Designers*</a> we’ve written that we designers are “so toolish”. Layout design is direct proof of this statement. Namely, current software offers constraints or grids to create layouts.
You’ve certainly 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 really, this is nowhere 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.
<img alt="" src="https://cdn-images-1.medium.com/max/954/1*0THmn-M0Ss6Dc2o2x8SMUA.gif">
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 certainly dynamic, isn’t it? That’s all before we even touch on interactive behaviour, and realtime dynamically-changing content.
For these cases, some items’ behaviour 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?
<h4>How Do We Solve Dynamic Layout in Code?</h4>
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 on basic front-end/CSS solutions.
<h4>Flexbox</h4>
Flexbox is great 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.
<h4>Grid</h4>
CSS Grid is perfect for two-dimensional layouts. 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.
<h4>Dynamic Units</h4>
Last but not least are the Dynamic Units — if you work in code, you’ll have seen these sprinkled throughout your work.
<h3>↳ Now Let’s Put it All Together, Visually</h3>
Constraints + ~Flexbox + ~Grid + Dynamic Units = Phase’s Layout Model. That’s basically it. Phase combines them all, visually.
So, how does it all work together?
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*qcT62wFVMxE9pShW.">
<h4>Sizing and Units ⦭</h4>
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. 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 easily 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 😉.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*2hHiFvi8U-9F5i9x.">
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 ¼ .
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*v9F4ygnwBfXrlWsl.">
Sizing summary:
<ul>
<li>Fixed: Pixel, Points</li>
<li>Parent-based: Percentages, Fractions</li>
<li>Auto: Shrink, Grow</li>
</ul>
<h4>Position ± Alignment in Phase</h4>
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, &amp; 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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*JzWWKE6m9yN0eyJk.">
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 centerpoint, with offsets that you determine.
<h3>Columns &amp; Rows ⧻</h3>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*E7DUCn3ycWXw4SLo.">
<h3>Order &amp; Placement</h3>
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.
<h3>And Of Course, Layouts are Components ↻</h3>
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.
If you want to hear more about our Components and Libraries stay tuned ⇥ All covered in the next article 📝
<h3>Join The Real Digital Design Revolution!</h3>
Join our growing community of more than 15,000 designers in building the digital design product worth being hopeful again.
<h4>Coming Summer 2018 → <a href="https://phase.com/">Get Early Access.</a></h4>
<ul>
<li>Phase Slack: <a href="https://phase.com/community/">https://phase.com/community/</a></li>
<li>Phase Spectrum: <a href="https://spectrum.chat/phase">https://spectrum.chat/phase</a></li>
<li>Twitter: <a href="https://twitter.com/phasecommunity">https://twitter.com/phasecommunity</a></li>
<li>Facebook: <a href="https://www.facebook.com/phasecommunity/">https://www.facebook.com/phasecommunity/</a></li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2ef57ffc5442" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/layouts-in-phase-panta-rhei-2ef57ffc5442">Layouts In Phase — { Panta Rhei* }</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Layouts In Phase — { Panta Rhei* }

Top Stories