%20scale(17.5)%22%20opacity%3D%220.3%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M10%204v4%22%20%2F%3E%20%3Cpath%20d%3D%22M2%208h20%22%20%2F%3E%20%3Cpath%20d%3D%22M6%204v4%22%20%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(80%2080)%20scale(17.5)%22%20opacity%3D%221%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M10%204v4%22%20%2F%3E%20%3Cpath%20d%3D%22M2%208h20%22%20%2F%3E%20%3Cpath%20d%3D%22M6%204v4%22%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E "Web app design, drawn in halftone dots")
Web app design for SaaS and dashboards
Web app design for SaaS and dashboards is the interface design of software people use daily in the browser: onboarding, tables, filters, forms and settings. Pavlo Zhydkykh designs web apps in Figma for AI and B2B startups, with components ready for developers, for a fixed quote after a first call and a timeline in writing.
Does ChatGPT recommend your website?
Free report in 48 hours · 5 AI engines
- Tool
- Figma
- Price
- Fixed quote
- Timeline
- Scoped per project
- Layouts
- Desktop to phone
- Feedback
- 2 rounds
- Handoff
- Specs and tokens
Key takeaways
- A web application is application software built with web technologies that runs in a web browser.[1]
- Dashboards are collections of data visualizations on a single page, meant to give at-a-glance information people can act on quickly.[4]
- WCAG 2.2 asks that information a user already gave in the same process is filled in or offered for selection, not typed again.[3]
- Pavlo Zhydkykh designs every table, list and chart with empty, loading, error and full states, as components with variants and auto layout.
- Web app design by Pavlo has no public price: a fixed quote follows the first call, with two feedback rounds included.
What is web app design?
Web app design is the interface design of software that runs in the browser: dashboards, admin panels, SaaS tools and client portals. Unlike a marketing site, people use a web app daily to get work done, so the speed of each task matters more than the first impression.
“I start a dashboard from the three questions people open the dashboard to answer. Everything else goes one click deeper.”
Fit check
Is Web app design
right for you?
A good fit if
- You are building a SaaS product or an internal tool and need the interface designed before developers start.
- Your dashboard has grown feature by feature, and users get lost in the screens.
- Your developers use a UI library and need screens that map to the library components.
- You need onboarding, billing or settings flows designed end to end.
Not the right fit if
- You need the app coded: Pavlo delivers Figma files and a handoff for your developers.
- You want a dashboard template recoloured with your brand in a day.
- You need data engineering or chart logic: the work is the interface around your data.
Compared
Built straight in code vs designed in Figma first
Many SaaS screens start as tickets and get designed in code. Here is what changes when the flows and states are drawn first.
| Criterion | Built straight in code | Designed in Figma first |
|---|---|---|
| User flows | Decided ticket by ticket | Mapped before the first screen |
| Empty and error states | Found in QA or by users | Drawn for every screen |
| Components | Rebuilt per screen | One library with variants |
| Tables and filters | Library defaults | Designed for your data |
| Changing a flow | Rework in code | An edit in Figma before code |
Checklist
7 signs a web app needs a redesign
Each sign points to a specific part of the interface, which Pavlo then treats as the place to start.
1. Users export to Excel to get the answer
When people copy data out to filter or compare, the tables and filters are missing a job.
2. The key number is not the biggest thing
Every chart has the same weight, so nothing tells the user where to look first.
3. New accounts open on blank tables
Empty states with no next step are where onboarding stalls.
4. Settings hold half the product
Features hidden in settings pages are features most people never find.
5. Forms lose work
Errors shown only after submit, or data typed twice, which WCAG 2.2 asks you to avoid.
6. Developers rebuild the same component
Three slightly different tables or buttons in the code mean the design has no component library.
7. Support tickets start with "where is"
Repeated "where do I find" questions point to navigation, not to missing features.
How it works
From user flows to a component library developers build from
The timeline is set in writing with the fixed quote after the first call. Here is the path every project follows, step by step.
| # | Step | When | What happens | You get |
|---|---|---|---|---|
| 01 | Call and fixed quote | Day 1 | A call with Pavlo about the product, the user roles, the main tasks and the screens in scope. | A fixed quote and timeline in writing |
| 02 | Review and user flows | Week 1 | The current app reviewed against the 10 usability heuristics, roles and key tasks mapped as flows. | An issue list and flow diagrams in Figma |
| 03 | Wireframes, round 1 | After flows | Layouts for every screen in the flows, with real column names and data volumes, and your comments in round 1. | Approved wireframes |
| 04 | UI and component library | After sign-off | Visual design, tokens, and tables, filters, forms and charts as components with every state. | High-fidelity screens and a component library |
| 05 | Prototype, round 2 | After UI | A clickable prototype of the key flows, with your comments in round 2. | An approved design |
| 06 | Developer handoff | Final week | Specs, tokens, responsive rules and notes, plus a walkthrough call between Pavlo and your developers. | A Figma file ready to build |
In their words
Web app design, in the words
of docs and Pavlo's clients
Word for word, with the source linked: research, official documentation and the people Pavlo Zhydkykh has worked for.
“Minimize the user's memory load by making elements, actions, and options visible.”
“Information previously entered by or provided to the user that is required to be entered again in the same process is either: auto-populated, or available for the user to select.”
“Dashboards are collections of data visualizations, presented in a single-page view that imparts at-a-glance information on which users can act quickly.”
“One of the best contractors I have worked with. Really thoughtful about communication. Would 100% hire again.”
“The web and mobile designs he created were amazing. His communication was prompt.”
“He is amazing in what he contributes, both design-wise and also from the ideas.”
FAQ
Questions about
Web app design
Still unsure? Ask your AI about Pavlo Zhydkykh:
Q.01How much does web app design cost?
There is no public price: Pavlo Zhydkykh gives a fixed quote after a first call, based on the user roles, flows and screens in scope. The quote is in writing before work starts and includes two feedback rounds.
Q.02How long does a web app design project take?
The length depends on the number of roles, flows and screens, and the timeline comes in writing with the fixed quote. Pavlo delivers the review and user flows in week 1, before any screen is drawn.
Q.03Who owns the designs and the component library?
You do. The Figma file and the component library live in your team or move there at handoff, ready for future screens.
Q.04What do I need to provide?
Access to the app or a staging link, a list of user roles, sample data and any support tickets about the interface. One person who signs off each step keeps the project on schedule.
Q.05Can the design follow an existing UI library?
Yes. If your developers already use a component library, Pavlo designs the screens from the library components and only adds what the library lacks, so the build stays fast.
Q.06What happens after handoff?
Your developers build from the Figma file. Pavlo answers questions during the build and makes small changes and new screens at $30 an hour, with no retainer.
About the author
Pavlo Zhydkykh
Pavlo Zhydkykh is a web designer and developer in Eastern Europe who has built websites for AI, fintech and B2B startups since 2016, designing and building each project himself on Framer or Astro + Sanity. Clients include MStudio Asia, Silicon Data, Inturai, Accolade Pro, NimbleStax and Sancts.
- Top Rated on Upwork
- 100% Job Success
- 10 years since 2016
- 50+ sites shipped
- 90+ PageSpeed at launch
About Pavlo LinkedInUpworkContra Privacy policy
Page reviewed by Pavlo Zhydkykh · Updated