UI mockups · Website and web app
Admin dashboard UI mockup
A store back office - KPI cards, revenue chart, top products and recent orders, plus a customer profile page.
The 2 screens
Admin dashboard: Dashboard, Customer detail. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Dashboard Dashboard
Browser page with 14 labels, 10 paragraphs, 8 headings, 7 cards, 5 images, 4 badges, an avatar, a button and 8 more component types.
- Headings
- Good morning, Jay · $48,290 · 1,284 · $37.61 · 1.8% · Revenue · Top products · Recent orders
- Navigation
- Dashboard · Orders · Products · Customers · Analytics · Settings · Day · Week · Month
- Fields
- Search orders, products, customers… · Last 7 days
- Buttons and actions
- Export
- Lists and columns
- Order · Customer · Date · Status · Total
- Text and labels
- Here’s what happened across the store this week. · Revenue · +12.4% · vs last week · Orders · +8.1% · Avg. order value · +3.9% · Refund rate · +0.4% · Revenue, last 12 weeks · Merino crew sweater · 312 sold · $30,576
2Customer detail Customer detail
Browser page with 10 paragraphs, 7 cards, 7 headings, 6 labels, 5 badges, 4 buttons, 2 avatars, a divider and 7 more component types.
- Headings
- Emma Lindqvist · $2,846.20 · 23 · $123.75 · Order history · Internal notes · Addresses
- Navigation
- Dashboard · Orders · Products · Customers · Analytics · Settings · All · Open · Returned
- Fields
- Search orders, products, customers… · Add an internal note about this customer…
- Buttons and actions
- Export · Send email · Edit · Save note
- Lists and columns
- Order · Date · Items · Status · Total
- Text and labels
- Customers / Emma Lindqvist · emma.lindqvist@example.com · VIP · Newsletter · Customer since · March 2023 · Location · Stockholm, Sweden · Phone · +46 70 123 45 67 · Lifetime value · +$412 · last 90 days · Orders
Open and edit it
The admin dashboard 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.
- 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.
- 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.