UI mockups · Desktop app
Note-taking app UI mockup
A desktop notes app: notebooks and tags in a sidebar, a note list, a rich editor with checklist and table, and a share dialog with access controls.
The 2 screens
Note-taking app: Editor, Share note. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Editor Editor
Desktop window with 17 paragraphs, 8 labels, 6 badges, 6 cards, 4 headings, 3 checkboxes, 2 chips / tagses, 2 dividers and 10 more component types.
- Headings
- Work · Q4 planning offsite · Agenda · Budget
- Navigation
- #ideas · #q4 · #team · Work · Q4 planning offsite · #offsite · #lisbon
- Fields
- Search notes · Recent
- Buttons and actions
- Share
- Lists and columns
- Work · 24 · Personal · 61 · Recipes · 18 · Reading list · 9 · Travel 2027 · 4 · Venue - Casa Azul · €6,200 · Flights - 14 people · €4,900 · Catering - Mesa Verde · €2,350
- Text and labels
- NOTEBOOKS · TAGS · Nadia Okafor · 24 notes · Q4 planning offsite · 4 min · Agenda, budget and travel for the Lisbon offsite. · #q4 · Hiring loop - design · 2 h · Panel: Jonas, Rhea. Portfolio review on Thursday. · #hiring · Roadmap themes · Yesterday
2Share note Share note
Desktop window with 20 paragraphs, 9 labels, 6 badges, 6 cards, 4 avatars, 3 buttons, 2 dividers, 2 dropdowns and 10 more component types.
- Headings
- Work
- Navigation
- #ideas · #q4 · #team
- Fields
- Search notes · Recent · Add people by name or email · Can edit · https://inkwell.app/n/q4-offsite
- Buttons and actions
- Copy link · Cancel · Done
- Lists and columns
- Work · 24 · Personal · 61 · Recipes · 18 · Reading list · 9 · Travel 2027 · 4
- Text and labels
- NOTEBOOKS · TAGS · Nadia Okafor · 24 notes · Q4 planning offsite · 4 min · Agenda, budget and travel for the Lisbon offsite. · #q4 · Hiring loop - design · 2 h · Panel: Jonas, Rhea. Portfolio review on Thursday. · #hiring · Roadmap themes · Yesterday
Open and edit it
The note-taking app 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
- Chat messenger UI mockup - A desktop messaging app: conversation list with unread badges, a group thread with message bubbles and attachments, and a notifications settings dialog.
- Calendar app UI mockup - A desktop calendar - a colour-coded week view with a mini month and calendar toggles, an event editor with guests, and a month view with an agenda.
- Food delivery app UI mockup - Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
- Shopping website UI mockup - An online clothing store - home page, product listing with filters, product detail and checkout.
- Banking app UI mockup - A mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.
- Admin dashboard UI mockup - A store back office - KPI cards, revenue chart, top products and recent orders, plus a customer profile page.