
File management
Design a file management workspace for a web app. The screen should show a folder tree or breadcrumb path, a main file list, and a clear upload entry point. Make it obvious whether the user is browsing a folder, selecting files, or reviewing a single item.
The file list should support common actions: upload, download, rename, move, delete, and share if relevant. Use row actions, a contextual menu, and drag-and-drop where it makes sense. Keep selection state visible, and make bulk actions easy to find when multiple files are selected.
Include a preview panel or drawer for the selected file with name, type, size, modified date, owner, and any other useful metadata. If the file can be previewed, show that content directly; if not, show a useful fallback with the file icon and details.
Show the important system states: empty folder, uploading, upload failed, permission denied, and loading. Each state should tell the user what happened and what to do next. The design should feel like a working file tool, not a generic content grid.
Imagine you're designing for the digital equivalent of a tidy, yet spacious filing cabinet. Aesthetics matter, but never at the expense of findability and order!
Better at UI design with every challenge
Select complexity and generate challenge.
Pick a platform.
Get design challenge updates in your inbox
New prompts and challenge updates. It’s free.