Building pixel-perfect web user interfaces.

How Damir designs and develops robust web UIs at greater quality and speed than most traditional teams.

A set of UI components I designed for a course comparison website.

Money better spent.

In a nutshell, I help bridge the gap between UX and development by designing and coding the UI components for your web project. This completely eliminates endless back-and-forths between designers and front-end developers, resulting in faster, higher quality work.

Solving design handover for good.

A common problem with web projects is that a great design is rarely implemented correctly. Design mockups aren’t implemented right.

Most developers don’t have a great eye for design detail. Some do. But they’re the very rare exception that prove the rule. To solve the problem of poor design implementation, the designer should code the HTML components themselves in order to create a UI that’s implemented exactly as intended.

The process.

I follow a waterfall model.

1. Analysis.

I take the team’s design brief, paper scribbles and low-fi wireframes, and review the existing design direction. At the end of this step we’ll be in sync on the overall project direction.

Pricing: Hourly.

Deliverable: 1-page report summarising analysis of design direction.

Approximate turnaround time: Few hours to a day.

2. High-fidelity mockups.

I’ll create the mock-ups in Figma and will with your feedback until we nail the design direction. When you’re happy, you’ll approve the designs direction, locking in the scope for the project. At the end of this step we’ll have a blueprint of precisely what needs to be built.

Pricing: Hourly.

Deliverable: Set of high-fidelity mock-ups detailing all user flows on the site. These will act as blueprints for the build phase.

Approximate turnaround time: Days to weeks.

3. Figma UI kit.

With the design approved and locked in, I’ll now create a complete set of UI components which will be the “Lego blocks” of the design.

Pricing: Fixed. Cost estimate based on approved high-fi mockups. If the design or scope changes, then an hourly fee applies to incorporate the changes.

Deliverable: Complete UI component kit in Figma.

Approximate turnaround time: Days to weeks.

4. HTML components.

With the UI kit designed, I’ll now code up all the components using a combination of Tailwind CSS, Vue.js and Storybook.js. The final deliverable here will be a Storybook site like the World Food Program UI Kit, or IBM Carbon.

Pricing: Fixed. Cost estimate based on completed UI kit. If the design or scope changes, then an hourly fee applies to incorporate the changes.

Deliverable: Complete design system containing UI kit and all HTML components.

Approximate turnaround time: Weeks.

With the last step complete, developers will now reference the design mockups as the architectural blueprint, and use the ready-made HTML components as the LEGO blocks with which to assemble the entire site.

All UI components will be designed and developed for:

• Minimalist aesthetic elegance. Customised to your brand.
• Fully responsive.
• Accessibile.
• Performant.
• Catering to all system states.
• Internationalised, if needed.
• Dark mode compliant, if needed.

If you have questions please reach out to me on damirkotoric@gmail.com.