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.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
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.