BS-001 · Desktop
Workbench
A personal workbench connects the project in progress, the next build step, and the materials still needed.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
← UI & UX studies
UI & UX / Responsive web app concept
Benchspace.
A place for the plan, the materials, and the next thing to make. I designed a woodworking workspace that moves from the desk to the workshop.
My work Flows · Wireframes · Responsive UI · Visual design
Scope 32 screen families · 168 views · Four viewport sizes
Explore the workspace
From the first plan
to the final piece.
Choose a screen and device size, then switch between the finished design and its wireframe. Expand any preview to see the details.
BS-001 · Phone
Workbench
A personal workbench connects the project in progress, the next build step, and the materials still needed.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-001 · Tablet landscape
Workbench
A personal workbench connects the project in progress, the next build step, and the materials still needed.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-001 · Tablet portrait
Workbench
A personal workbench connects the project in progress, the next build step, and the materials still needed.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-002 · Tablet landscape
Projects
Projects keep their status and next action visible, with room to start something new.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-002 · Desktop
Projects
Projects keep their status and next action visible, with room to start something new.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-002 · Phone
Projects
Projects keep their status and next action visible, with room to start something new.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-002 · Tablet portrait
Projects
Projects keep their status and next action visible, with room to start something new.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-003 · Tablet landscape
Materials
Material photos, types, and quantities make the inventory concrete. Available stock stays distinct from project allocations.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-003 · Desktop
Materials
Material photos, types, and quantities make the inventory concrete. Available stock stays distinct from project allocations.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-003 · Phone
Materials
Material photos, types, and quantities make the inventory concrete. Available stock stays distinct from project allocations.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-003 · Tablet portrait
Materials
Material photos, types, and quantities make the inventory concrete. Available stock stays distinct from project allocations.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-004 · Tablet landscape
Library
The library brings plans, joinery details, and finishes together as visual references.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-004 · Desktop
Library
The library brings plans, joinery details, and finishes together as visual references.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-004 · Phone
Library
The library brings plans, joinery details, and finishes together as visual references.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-004 · Tablet portrait
Library
The library brings plans, joinery details, and finishes together as visual references.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-005 · Desktop
Account and preferences
Preferences sit outside the project context, so workspace choices have a consistent home.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-005 · Tablet landscape
Account and preferences
Preferences sit outside the project context, so workspace choices have a consistent home.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-005 · Tablet portrait
Account and preferences
Preferences sit outside the project context, so workspace choices have a consistent home.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-005 · Phone
Account and preferences
Preferences sit outside the project context, so workspace choices have a consistent home.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-006 · Desktop
New project
A new project begins with a name and a few essentials, without requiring every detail up front.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-006 · Tablet landscape
New project
A new project begins with a name and a few essentials, without requiring every detail up front.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-006 · Tablet portrait
New project
A new project begins with a name and a few essentials, without requiring every detail up front.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-006 · Phone
New project
A new project begins with a name and a few essentials, without requiring every detail up front.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-007 · Desktop
Add project plan
Adding a plan keeps the file and its destination clear.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-007 · Tablet landscape
Add project plan
Adding a plan keeps the file and its destination clear.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-007 · Tablet portrait
Add project plan
Adding a plan keeps the file and its destination clear.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-007 · Phone
Add project plan
Adding a plan keeps the file and its destination clear.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-008 · Desktop
Review imported plan
The imported plan can be reviewed before it becomes part of the project.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-008 · Tablet landscape
Review imported plan
The imported plan can be reviewed before it becomes part of the project.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-008 · Tablet portrait
Review imported plan
The imported plan can be reviewed before it becomes part of the project.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-008 · Phone
Review imported plan
The imported plan can be reviewed before it becomes part of the project.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-009 · Desktop
Project setup review
The setup review brings the project details together, including a route forward without a plan.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-009 · Tablet landscape
Project setup review
The setup review brings the project details together, including a route forward without a plan.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-009 · Tablet portrait
Project setup review
The setup review brings the project details together, including a route forward without a plan.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-009 · Phone
Project setup review
The setup review brings the project details together, including a route forward without a plan.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-009 · Desktop
Project setup review , No plan
The setup review brings the project details together, including a route forward without a plan.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-009 · Tablet landscape
Project setup review , No plan
The setup review brings the project details together, including a route forward without a plan.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-009 · Tablet portrait
Project setup review , No plan
The setup review brings the project details together, including a route forward without a plan.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-009 · Phone
Project setup review , No plan
The setup review brings the project details together, including a route forward without a plan.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-010 · Desktop
Project overview
The project overview connects the plan, materials, build sequence, and progress in one place.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-010 · Phone
Project overview
The project overview connects the plan, materials, build sequence, and progress in one place.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-010 · Tablet landscape
Project overview
The project overview connects the plan, materials, build sequence, and progress in one place.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-010 · Tablet portrait
Project overview
The project overview connects the plan, materials, build sequence, and progress in one place.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-011 · Desktop
Project plan viewer
The plan viewer keeps page controls and annotations near the drawing, with a clear route back to the project.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-011 · Tablet landscape
Project plan viewer
The plan viewer keeps page controls and annotations near the drawing, with a clear route back to the project.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-011 · Tablet portrait
Project plan viewer
The plan viewer keeps page controls and annotations near the drawing, with a clear route back to the project.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-011 · Phone
Project plan viewer
The plan viewer keeps page controls and annotations near the drawing, with a clear route back to the project.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-012 · Desktop
Plan annotation
Annotations add useful context while keeping the original reference visible.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-012 · Tablet landscape
Plan annotation
Annotations add useful context while keeping the original reference visible.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-012 · Tablet portrait
Plan annotation
Annotations add useful context while keeping the original reference visible.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-012 · Phone
Plan annotation
Annotations add useful context while keeping the original reference visible.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-013 · Desktop
Project materials
Required, on hand, allocated, and still to buy are separate quantities, so the shopping decision is understandable.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-013 · Phone
Project materials
Required, on hand, allocated, and still to buy are separate quantities, so the shopping decision is understandable.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-013 · Tablet landscape
Project materials
Required, on hand, allocated, and still to buy are separate quantities, so the shopping decision is understandable.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-013 · Tablet portrait
Project materials
Required, on hand, allocated, and still to buy are separate quantities, so the shopping decision is understandable.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-014 · Desktop
Material detail
A material detail pairs its appearance with the information needed to use it.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-014 · Tablet landscape
Material detail
A material detail pairs its appearance with the information needed to use it.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-014 · Tablet portrait
Material detail
A material detail pairs its appearance with the information needed to use it.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-014 · Phone
Material detail
A material detail pairs its appearance with the information needed to use it.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-015 · Desktop
Add or edit material
Material identity and quantity are grouped into distinct editing sections.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-015 · Tablet landscape
Add or edit material
Material identity and quantity are grouped into distinct editing sections.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-015 · Tablet portrait
Add or edit material
Material identity and quantity are grouped into distinct editing sections.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-015 · Phone
Add or edit material
Material identity and quantity are grouped into distinct editing sections.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-016 · Desktop
Shopping list
The shopping list turns missing materials into an actionable next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-016 · Tablet landscape
Shopping list
The shopping list turns missing materials into an actionable next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-016 · Tablet portrait
Shopping list
The shopping list turns missing materials into an actionable next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-016 · Phone
Shopping list
The shopping list turns missing materials into an actionable next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-017 · Desktop
Build steps
The build sequence distinguishes completed work from the next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-017 · Tablet landscape
Build steps
The build sequence distinguishes completed work from the next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-017 · Tablet portrait
Build steps
The build sequence distinguishes completed work from the next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-017 · Phone
Build steps
The build sequence distinguishes completed work from the next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-017 · Desktop
Build steps , Step completed
The build sequence distinguishes completed work from the next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-017 · Tablet landscape
Build steps , Step completed
The build sequence distinguishes completed work from the next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-017 · Tablet portrait
Build steps , Step completed
The build sequence distinguishes completed work from the next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-017 · Phone
Build steps , Step completed
The build sequence distinguishes completed work from the next step.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-018 · Desktop
Build step detail
A focused step brings the reference image, instructions, and completion action together.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-018 · Phone
Build step detail
A focused step brings the reference image, instructions, and completion action together.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-018 · Tablet landscape
Build step detail
A focused step brings the reference image, instructions, and completion action together.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-018 · Tablet portrait
Build step detail
A focused step brings the reference image, instructions, and completion action together.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-019 · Desktop
Edit build step
Editing a step keeps changes within the project and provides a clear save or cancel choice.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-019 · Tablet landscape
Edit build step
Editing a step keeps changes within the project and provides a clear save or cancel choice.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-019 · Tablet portrait
Edit build step
Editing a step keeps changes within the project and provides a clear save or cancel choice.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-019 · Phone
Edit build step
Editing a step keeps changes within the project and provides a clear save or cancel choice.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-020 · Desktop
Project notes and progress
Notes and progress stay attached to the build rather than disappearing into a separate feed.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-020 · Tablet landscape
Project notes and progress
Notes and progress stay attached to the build rather than disappearing into a separate feed.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-020 · Tablet portrait
Project notes and progress
Notes and progress stay attached to the build rather than disappearing into a separate feed.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-020 · Phone
Project notes and progress
Notes and progress stay attached to the build rather than disappearing into a separate feed.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-021 · Desktop
Step completion review
A completion review gathers the remaining checks before the project is finished.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-021 · Tablet landscape
Step completion review
A completion review gathers the remaining checks before the project is finished.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-021 · Tablet portrait
Step completion review
A completion review gathers the remaining checks before the project is finished.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-021 · Phone
Step completion review
A completion review gathers the remaining checks before the project is finished.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-022 · Desktop
Library collection
Visual collections make saved joinery and finish references easier to recognize.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-022 · Tablet landscape
Library collection
Visual collections make saved joinery and finish references easier to recognize.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-022 · Tablet portrait
Library collection
Visual collections make saved joinery and finish references easier to recognize.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-022 · Phone
Library collection
Visual collections make saved joinery and finish references easier to recognize.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-023 · Desktop
Reference detail
Reference details provide a larger view with the surrounding context.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-023 · Tablet landscape
Reference detail
Reference details provide a larger view with the surrounding context.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-023 · Tablet portrait
Reference detail
Reference details provide a larger view with the surrounding context.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-023 · Phone
Reference detail
Reference details provide a larger view with the surrounding context.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-024 · Desktop
Add reference
Adding a reference connects the file to its collection and purpose.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-024 · Tablet landscape
Add reference
Adding a reference connects the file to its collection and purpose.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-024 · Tablet portrait
Add reference
Adding a reference connects the file to its collection and purpose.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-024 · Phone
Add reference
Adding a reference connects the file to its collection and purpose.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-025 · Desktop
Finish project
Finishing a project is a deliberate action with its own confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-025 · Tablet landscape
Finish project
Finishing a project is a deliberate action with its own confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-025 · Tablet portrait
Finish project
Finishing a project is a deliberate action with its own confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-025 · Phone
Finish project
Finishing a project is a deliberate action with its own confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-026 · Desktop
Completed project
The completed project retains its plan, materials, and progress as a useful record.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-026 · Tablet landscape
Completed project
The completed project retains its plan, materials, and progress as a useful record.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-026 · Tablet portrait
Completed project
The completed project retains its plan, materials, and progress as a useful record.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-026 · Phone
Completed project
The completed project retains its plan, materials, and progress as a useful record.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-027 · Desktop
First launch / empty workbench
The empty workbench gives a new maker a clear first action.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-027 · Tablet landscape
First launch / empty workbench
The empty workbench gives a new maker a clear first action.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-027 · Tablet portrait
First launch / empty workbench
The empty workbench gives a new maker a clear first action.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-027 · Phone
First launch / empty workbench
The empty workbench gives a new maker a clear first action.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-028 · Desktop
Search and filter states
Search, loading, and no-results states keep the workspace understandable when content changes.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-028 · Tablet landscape
Search and filter states
Search, loading, and no-results states keep the workspace understandable when content changes.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-028 · Tablet portrait
Search and filter states
Search, loading, and no-results states keep the workspace understandable when content changes.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-028 · Phone
Search and filter states
Search, loading, and no-results states keep the workspace understandable when content changes.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-028 · Desktop
Search and filter states , Loading
Search, loading, and no-results states keep the workspace understandable when content changes.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-028 · Tablet landscape
Search and filter states , Loading
Search, loading, and no-results states keep the workspace understandable when content changes.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-028 · Tablet portrait
Search and filter states , Loading
Search, loading, and no-results states keep the workspace understandable when content changes.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-028 · Phone
Search and filter states , Loading
Search, loading, and no-results states keep the workspace understandable when content changes.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-029 · Desktop
Offline and save failure
Offline and save-failure states explain what happened and how to recover.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-029 · Tablet landscape
Offline and save failure
Offline and save-failure states explain what happened and how to recover.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-029 · Tablet portrait
Offline and save failure
Offline and save-failure states explain what happened and how to recover.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-029 · Phone
Offline and save failure
Offline and save-failure states explain what happened and how to recover.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-029 · Desktop
Offline and save failure , Offline
Offline and save-failure states explain what happened and how to recover.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-029 · Tablet landscape
Offline and save failure , Offline
Offline and save-failure states explain what happened and how to recover.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-029 · Tablet portrait
Offline and save failure , Offline
Offline and save-failure states explain what happened and how to recover.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-029 · Phone
Offline and save failure , Offline
Offline and save-failure states explain what happened and how to recover.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-030 · Desktop
Project picker
Project selection makes the destination explicit before material allocation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-030 · Tablet landscape
Project picker
Project selection makes the destination explicit before material allocation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-030 · Tablet portrait
Project picker
Project selection makes the destination explicit before material allocation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-030 · Phone
Project picker
Project selection makes the destination explicit before material allocation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-030 · Desktop
Project picker , Allocate material
Project selection makes the destination explicit before material allocation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-030 · Tablet landscape
Project picker , Allocate material
Project selection makes the destination explicit before material allocation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-030 · Tablet portrait
Project picker , Allocate material
Project selection makes the destination explicit before material allocation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-030 · Phone
Project picker , Allocate material
Project selection makes the destination explicit before material allocation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Desktop
Discard / delete / archive confirmation
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Tablet landscape
Discard / delete / archive confirmation
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Tablet portrait
Discard / delete / archive confirmation
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Phone
Discard / delete / archive confirmation
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Desktop
Discard / delete / archive confirmation , Archive
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Desktop
Discard / delete / archive confirmation , Delete
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Desktop
Discard / delete / archive confirmation , Reopen
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Tablet landscape
Discard / delete / archive confirmation , Archive
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Tablet landscape
Discard / delete / archive confirmation , Delete
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Tablet landscape
Discard / delete / archive confirmation , Reopen
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Tablet portrait
Discard / delete / archive confirmation , Archive
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Tablet portrait
Discard / delete / archive confirmation , Delete
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Tablet portrait
Discard / delete / archive confirmation , Reopen
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Phone
Discard / delete / archive confirmation , Archive
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Phone
Discard / delete / archive confirmation , Delete
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-031 · Phone
Discard / delete / archive confirmation , Reopen
Discard, delete, archive, and reopen each use contextual confirmation.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Desktop
Quick-start guide
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Tablet landscape
Quick-start guide
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Tablet portrait
Quick-start guide
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Phone
Quick-start guide
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Desktop
Quick-start guide , Step 2
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Desktop
Quick-start guide , Step 3
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Tablet landscape
Quick-start guide , Step 2
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Tablet landscape
Quick-start guide , Step 3
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Tablet portrait
Quick-start guide , Step 2
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Tablet portrait
Quick-start guide , Step 3
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Phone
Quick-start guide , Step 2
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
BS-032 · Phone
Quick-start guide , Step 3
The quick-start guide offers a short introduction with a clear way to skip or finish.
Finished
Wireframe
Scroll for the full screen. Expand to inspect at a larger size.
The design decisions
Built around
the act of making.
The interface connects planning with hands-on work: recognize the material, understand what is available, and find the next action.
Warmth from the identity
Clay actions and cream surfaces carry the Benchspace brand into the workspace. Dark ink gives text and small accents their contrast.
Materials you can recognize
Photography and developed reference imagery show material type, finish, and appearance. Full-object previews keep useful details in view.
Responsive by task
Desktop uses persistent navigation and supporting context. Tablet layouts adapt to both orientations; phone views prioritize a focused sequence and contextual navigation.
The active design includes 32 screen families across desktop, tablet landscape, tablet portrait, and phone, plus 40 representative state and dialog views: 168 finished views with matching wireframes. A separate expansion inventory documents future scenarios. This is a personal design concept, not a released or user-tested product. Some project photography and illustrative plan imagery were generated for the concept.
Explore in Figma
The structure behind the work.
Wireframes arranged by screen family and responsive size. The preview is open to view.
Explore in Figma
The finished workspace.
The full active mock set, organized in the same sequence. The preview is open to view.
Project files
Take a closer look.
Access the editable Figma file or download all 168 finished views and matching wireframes at 2× resolution, grouped into four device downloads. Enter the shared access code to access these files.