Hong Life CalculatorsUnderstanding the UI/UX design quote calculator — concept and principle
This calculator builds a design quote by sorting the screens of an app or website into simple, medium and complex, estimating hours for each type and multiplying by an hourly rate. Freelance designers and small studios use it to price a project consistently, and clients use it to understand where the cost comes from. It works with any currency; the example uses US dollars.
How it is calculated
Total hours = simple screens × hours per simple screen + medium screens × hours per medium screen + complex screens × hours per complex screen.
Design quote = total hours × hourly rate.
Hours should include everything a screen needs: layout, visual design, states (empty, error, loading), feedback rounds and handoff notes.
The principle
This is bottom-up estimating: break the work into similar units, estimate each unit, and add them up. Screens are a natural unit in interface design, but they differ a lot in effort, so grouping them by difficulty gives a more accurate total than one average. A login page is quick; a dashboard with charts, filters and many states takes much longer. Pricing from hours keeps the quote tied to the real effort while letting the client see how adding or removing screens changes the price.
Worked example
- Simple: 6 × 3 = 18 hours.
- Medium: 8 × 6 = 48 hours.
- Complex: 3 × 12 = 36 hours.
- Total hours = 18 + 48 + 36 = 102.
- Quote = 102 × $65 = $6,630.00.
How to read the result
Check the share of each group: here the 3 complex screens take about a third of the hours, so clarifying their scope early reduces risk. Work that does not belong to any single screen, such as research, a design system or component library, interactive prototypes and usability testing, should be added as separate line items. Many designers also add a contingency of some percent for revisions beyond the agreed rounds. After each project, compare actual hours with the estimate and update your hours per difficulty.
Common mistakes
- Counting a screen once when it has several breakpoints (mobile, tablet, desktop) that each need design.
- Forgetting states such as errors, empty lists and onboarding variants.
- Leaving out project management and meetings.
- Quoting a fixed price without stating how many revision rounds it includes.
Frequently asked questions
Should I charge per screen or per project?
Per-screen pricing is transparent and easy to adjust. A project price can work better when the scope is clear, but it is usually built from the same hour estimate.
How do I decide if a screen is simple or complex?
Count components, interactions and states. Forms with validation, data tables and dashboards are usually complex; static content pages are simple.
Are design system hours included?
No. Add them separately; a reusable component library saves time on later screens but needs upfront hours.
Sources: Project Management Institute, A Guide to the Project Management Body of Knowledge (PMBOK Guide), bottom-up estimating