Design Process
A five-step design process block with numbered rows each carrying a title, duration, Placeholder illustration, and an honest description of the step output.
A five-step design process block with numbered rows each carrying a title, duration, Placeholder illustration, and an honest description of the step output.
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
Design Process lists five numbered steps from research to handoff as bordered rows, each carrying a number (01 to 05), a title, a duration (1 to 2 weeks, Ongoing), a Placeholder illustration at aspect-4/3, and a paragraph that names what the step produces and what it does not try to do. Step 02 is explicit that low-fidelity wireframes are not about visual detail yet, step 05 names the two-week developer availability window after handoff.
Steps are one typed array; a conditional border-b on all but the last row divides them without an outer wrapper element. The duration line per step lets visitors set realistic expectations before a first call.
Reach for this block on a services or process page for a designer whose workflow is a selling point. The installer swaps the step titles, durations, and descriptions for their own, keeping each step honest about its output and its limit.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the five-stage UX design process. Other process layouts:
Tip: the duration line earns as much trust as the step description because it shows the installer has thought about the calendar, not just the deliverable.