UI mockups · Website and web app
Project board UI mockup
A kanban project tool - columns of task cards with tags, progress and assignees, and a task detail page with subtasks, activity and properties.
The 2 screens
Project board: Board, Task detail. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Board Board
Browser page with 16 badges, 16 cards, 12 avatars, 12 icons, 12 labels, 12 paragraphs, 6 buttons, 4 headings and 7 more component types.
- Headings
- To do · In progress · In review · Done
- Navigation
- Home · My tasks · Inbox · Projects · Reports · Settings · Board · List · Timeline · All · Design · Engineering · Content
- Fields
- Search tasks
- Buttons and actions
- Share · New task · + Add task
- Text and labels
- 4 · Content · Write FAQ for new plans · Due Oct 28 · Design · Footer illustrations · Due Oct 30 · Engineering · Set up redirects · Due Nov 2 · Customer quotes · Due Nov 4 · 3 · Redesign pricing page
2Task detail Task detail
Browser page with 9 labels, 7 paragraphs, 4 avatars, 4 checkboxes, 3 badges, 3 headings, 2 buttons, an avatar group and 14 more component types.
- Headings
- Redesign pricing page · Subtasks · Activity
- Navigation
- Home · My tasks · Inbox · Projects · Reports · Settings · Website relaunch · In progress · KAN-142 · Low · Medium · High · Design · Pricing · Q4
- Fields
- Search tasks · Write a comment… · In progress · Oct 24, 2026 · Drop files to attach
- Buttons and actions
- Share · Comment
- Text and labels
- In progress · Design · High · Description · Rework the pricing page around the three new plans. Lead with the annual toggle, move the comparison table below the fold, and add the FAQ block from KAN-131. Desktop and mobile designs, then hand off to engineering. · 2 of 4 done · Audit the current page · Wireframe the plan cards · High-fidelity desktop design · Mobile breakpoints · Lena Fischer · 2 h ago · Uploaded pricing-v2.fig - annual toggle is now the default. · Kenji Watanabe · Yesterday · Copy for the Team plan is in the doc, happy to tweak.
Open and edit it
The project board mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.
More mockups
- Shopping website UI mockup - An online clothing store - home page, product listing with filters, product detail and checkout.
- Admin dashboard UI mockup - A store back office - KPI cards, revenue chart, top products and recent orders, plus a customer profile page.
- Travel booking UI mockup - A hotel booking site: search with dates and guests, filtered results with hotel cards, and a guest details + payment checkout.
- SaaS landing page UI mockup - A full marketing page for a project-management product: hero with two calls to action, features, pricing tiers, a testimonial, FAQ and footer.
- Sign in and sign up flows UI mockup - The three account screens every product needs: sign in with social options, create an account with a password strength meter, and reset a forgotten password.
- Video streaming site UI mockup - A streaming service - browse rows with continue watching and trending titles, a series detail page with episodes, and the video player.