Logo of UI Challenges
Sign in
Wireframe example for File management
An example interpretation of the prompt
Icon of target

File management

Icon of book open

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.

Icon of book open

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.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.