Design in custom development tends to fail in the same way: twenty beautiful screens get drawn, and on the twenty-first it turns out it looks like none of the previous ones. From then on every new screen is a separate creative effort and a separate argument, and the budget for changes grows for no visible reason.
What happens at this stage
- Designing the design system: typography, grid, colours, element states and spacing rules.
- UX/UI development on top of the scenarios approved during prototyping.
- A visual style for web and mobile platforms at the same time, not one after the other.
This stage opens the commercial version of the product. Up to now we were answering "what are we building?"; here begins the part that real people will use every day.
A design system is about economics, not beauty
When every state of a button is described and every form has rules for errors, the next screen is assembled from ready-made parts. The cost of the twentieth screen comes close to the cost of the fifth. Without a system it grows linearly and never falls.
What a design system is made of
- Colours, fonts and a spacing scale.
- Buttons, cards, menus and standard form elements.
- States: hover, pressed, error, loading, empty list.
- Rules for tables, filters and lists in staff-facing work interfaces.
The design system is declared as CSS variables. So at the next stage, front-end markup, the developer takes it as it is instead of translating a picture into code by eye.
UX: decisions you cannot see in a screenshot
A good interface differs not in the colour of its buttons but in how much effort it asks of a person. At the UX stage we decide what the user sees first, in what order they fill in the fields, what happens on an error and what a screen looks like before there is any data. For staff-facing interfaces something else matters: how many clicks a routine operation takes when a person repeats it dozens of times per shift.
What we will need from you
A brand book, or at least a logo and brand colours, access to any existing mock-ups, and a couple of examples of services you like or find irritating. That is enough for the design system to rest on your brand rather than on the designer's taste.
What you get at the end
A design system that lets any new screen be assembled without a designer, UX/UI for the key scenarios and a single visual style for web and mobile devices. This is the foundation that front-end markup, interface logic and all future changes rely on.
How much does interface design cost and what affects the price?
The stage costs between $0 and $2400. The range is not a marketing trick. If your company already has a working brand book and design system, the stage can cost nothing: we simply work within your rules.
Within the range, the price depends on:
- whether a brand book, logo and existing style rules are in place;
- the number of platforms: web only, or web plus a mobile version;
- the number of roles and working contours: customer, manager, administrator, specialist;
- how thoroughly the scenarios were worked out in the prototype: the more precise the prototype, the less work for the designer.
Why design does not replace the specification and prototype
A common mistake is to start with attractive Figma mock-ups and consider the project designed. Figma shows screens, roles and the UX flow well, but it does not cover business logic, integrations, access rights, data or infrastructure. That is why design comes after the technical specification and prototype in our process, not instead of them.
What breaks if you skip this stage
The interface starts to sprawl. On the surface it looks "a bit untidy", but in reality it means that any change needs a designer: the developer cannot assemble a screen alone because there are no rules. Over time the product acquires three kinds of buttons and five shades of the main colour, and users stop understanding what is clickable. Cleaning this up later has to happen across every screen at once, and it costs more than a design system laid down at the start.
An example from our work
In a medical system project the client already had an initial Figma file. It set the mood and direction, but did not answer who creates a record, where a reference list is edited or what the doctor sees. We assembled a prototype design system on Bootstrap and Font Awesome: colours, fonts, spacing, buttons, cards, menus and form elements. That was enough for visual sign-off without claiming to be the final design.
In the restaurant app concept the mobile interface was designed as the primary one from the start, not as a responsive version of the desktop: guests order from their phones. And for the manufacturer Sklo the interfaces were split by role: the customer, the sales manager and the designer each have their own app and their own set of buttons.
Where to go next
The next step is front-end markup. The previous one is prototyping. The map of the series is in the app development strategy.
Discuss your project at a free consultation with an architect. After the call you will receive a stage-by-stage estimate of cost and timeline.
