large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<a href="https://medium.com/ux-power-tools/design-trend-offset-overlapping-content-blocks-53e20157d2a8?source=rss----154889bc1920---4">UX Power Tools &#8211; Medium</a> | Christian Beck <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SZ90t75ZZVqv1jXiP6N54g.png">
<h4>Tiny Trends</h4>
Designers are continuing to <a href="https://medium.com/ux-power-tools/tiny-trends-2-off-center-alignment-7e355a98a05">break out of the grid</a>. It’s been a great evolution from the early days of responsive web design. 5 years ago, responsive simply meant that your content block would resize infinitely. But it was always within the confines of a rigid grid. In fact, responsive web design had a negative effect on how designers used grids because it was so difficult to figure out how content should react.
Not any more.
Today, improvements in media queries and technological advancements like <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> have given designers more grid capabilities. The way designers do this takes on a few different forms in web design, with different qualities for different situations:
<ul>
<li>Parallax — the overlapping content will often “float” over the content it covers as you scroll. I certainly love this effect much more than the scroll-jacking parallax effect applied to entire sites.</li>
<li>Variable shadow depths — I don’t see designers apply this often but following the actual physical properties of light, you’d expect stacked elements to have different shadow spreads.</li>
<li>UI callouts — in this variation, product sites use the overlapping image to callout a piece of UI. It’s perfect for simple product highlights.</li>
<li>Context images — Often, the background content is a photo meant simply to set the mood. This makes sense because the overlapping is obscuring most of it.</li>
</ul>
Let’s take a look at some examples:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8LSxHuveyn17_NuH-G3lSw.png">A little site called <a href="https://www.squarespace.com/">Squarespace</a><img alt="" src="https://cdn-images-1.medium.com/max/800/1*V950LL8ov1jEYCYTfVaqIQ.png"><a href="https://dribbble.com/shots/4310279-Benefits">Design</a> by <a href="https://dribbble.com/Tamarashvili">Giga Tamarashvili</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oc7vQ9wu7XOexxAj8yDoxA.png"><a href="https://www.papertiger.com/company">Paper Tiger</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FARIJgF03x7tqHPx35agmw.png"><a href="https://flayks.com/">https://flayks.com/</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QyVbMETzDMIUA2kwFpcqRw.png"><a href="https://flayks.com/">https://flayks.com/</a>
When I’m not offsetting my design work, I’m working on Sketch design tools at <a href="https://www.uxpower.tools">UX Power Tools</a> to make you a better, more efficient designer.
<a href="https://www.twitter.com/uxpowertools">Follow UX Power Tools on Twitter</a> <a href="http://twitter.com/cmbeck_">Follow me on Twitter</a>
<a href="https://uxpower.tools">Sketch smarter.</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=53e20157d2a8" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://medium.com/ux-power-tools/design-trend-offset-overlapping-content-blocks-53e20157d2a8">Design Trend: Offset + Overlapping Content Blocks</a> was originally published in <a href="https://medium.com/ux-power-tools">UX Power Tools</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Design Trend: Offset + Overlapping Content Blocks

Design Trend: Offset + Overlapping Content Blocks

Tiny Trends

Top Stories