Before After Design
A redesign proof with side-by-side Placeholder visuals and a ruled change table naming the constraint and three specific before-and-after decisions.
A redesign proof with side-by-side Placeholder visuals and a ruled change table naming the constraint and three specific before-and-after decisions.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Before and After Design shows the Tend app redesign as a side-by-side pair of Placeholder visuals with a hard constraint called out in the lede: no new screens, no new navigation levels. A ruled change table below names three specific decisions, Navigation, Form density, and Empty states, each with the old state on the left and the new one on the right.
The three changes are one array. The constraint sentence is the distinctive detail: it explains why the redesign took the shape it did rather than letting the visuals speak alone.
Reach for this block as the evidence section of a redesign case study or on a homepage to show before and after a significant improvement. The installer swaps the client name, the constraint sentence, the two Placeholder visuals, and the three change rows.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the redesign proof with a named constraint. Other before-and-after layouts:
Tip: the constraint is the credibility, a redesign with no limit named reads as arbitrary.