VulCode

UI/UX design with Aphrodi, built in code

Identity and screen design come from Aphrodi, our partner branding agency, and we make the wireframes and the clickable prototype together with it. Then we carry the design into code as a design system and build your app on it.

The aphrodi.pl case study
The design file of a booking app in a design tool: phone screens, the front desk calendar and the colour variables

Who does what in the project

You buy UI/UX design from us together with the build, as a partner project with Aphrodi. Both agencies make the wireframes and the clickable prototype together, and every stage ends with something you get.

Aphrodi

Our partner branding agency

  • Visual identity

    The logo, palette, typefaces and graphic style, when the brand has none yet.

  • Wireframes and prototype

    The screen layouts and a clickable prototype that shows what each button opens. Both agencies make them together.

  • Screen design

    The visual design of the app's screens, in the brand's colours.

    You: the screen design
  • Launch graphics

    Social media graphics and banners in the same identity, ready for launch day.

You

The decisions at every stage

  • Goal and users

    You describe who uses the app and what they need to do in it.

    VulCode: the order
  • Design sign-off

    You approve the screens before any code is written. A later change of scope needs the consent of both sides and may change the fee and the deadline (cl. 3.3 of our terms).

    VulCode: an approved design
  • Accepting the stages

    You check each stage of the app on a test version.

  • Content and access

    You hand over the texts, photos and access to the domain and accounts we connect to the app.

VulCode

Design system and build

  • Quote and order

    From that we quote the project and write an order with the scope, dates and payment stages.

  • Wireframes and prototype

    The screen layouts and a clickable prototype that shows what each button opens. Both agencies make them together.

  • Design system

    We write the design's colours, typefaces and radii down as tokens and build the interface components from them.

  • Build

    We build the app from those components and hand it over in stages for acceptance on a test version.

    You: a working app

One screen through four stages

One screen of a booking app from sketch to code. We make the sketch and the wireframe together with Aphrodi, Aphrodi runs the visual design, and we run the build.

  1. My visits
    Book a visit
    Upcoming
    Basic tune-up
    confirmed
    Brake adjustment
    awaiting confirmation
    Tyre or tube change
    completed
    VisitsServicesAccount
    Sketch
    Aphrodi

    The layout in grey: what is on the screen and in what order, before any brand colour.

    You get: The screen layouts

  2. My visits
    Book a visit
    Upcoming
    Basic tune-up
    confirmed
    Brake adjustment
    awaiting confirmation
    Tyre or tube change
    completed
    VisitsServicesAccount
    New visit
    Service
    Date
    Phone
    Wireframe
    Aphrodi

    The wireframe shows what each button opens: here a tap on "Book a visit" slides up the form.

    You get: The wireframes

  3. My visits
    Book a visit
    Upcoming
    Basic tune-up
    confirmed
    Brake adjustment
    awaiting confirmation
    Tyre or tube change
    completed
    VisitsServicesAccount
    Design
    Aphrodi

    The same layout in the brand's colours and typefaces. You approve this stage before any code is written.

    You get: An approved design

  4. My visits
    Book a visit
    Upcoming
    Basic tune-up
    confirmed
    Brake adjustment
    awaiting confirmation
    Tyre or tube change
    completed
    VisitsServicesAccount
    Build
    VulCode

    The screen in code: backgrounds, colours and radii take their values from named tokens.

    You get: Tokens and components in the repository

Joint projects with Aphrodi

Real screenshots of projects where the look came from Aphrodi and the code from us.

See the portfolio

A design system starts with tokens

Colours, spacing and roundness have names in the design, and every button, field and card uses those names. Change the brand colour or the roundness and watch the whole set change at once.

Design valuesBrand colour
Roundness
  • Brand colour
  • Page background
  • Card background
  • Main text
  • Description text
  • Lines and borders
Components built from them
Book nowSee the dates
A form field while typingJan Kowalski
Free slotsCut and styling45 minutes, the next free slot tomorrow at 10:30.

Contrast of the button text: 5.9 : 1 readable for everyone

What we check in the design before it reaches code

A design from Aphrodi or from your own designer goes through these checks before we start building it.

The components board of the design file: buttons, text fields and service cards in every state, with notes on contrast, focus and touch target

  1. All states

    Empty view, loading, error and no permission each have a screen in the design rather than being bolted on at the end.

  2. Text contrast

    Text has at least 4.5:1 contrast on its background, per criterion 1.4.3 of WCAG 2.2. We compute it from the token values, not by eye.

    White on brand/accent in the design6.0:1
    White on this site's brand.accent5.8:1
    the 4.5:1 line for normal text

  3. Focus and touch targets

    Focus is visible on every element you can reach with the keyboard, and touch targets are at least 24 by 24 pixels, per criteria 2.4.7 and 2.5.8 of WCAG 2.2.

    the button in the design: 148 by 48 pxthe minimum: 24 by 24 px

  4. Real content

    Long names, Polish characters and the English copy fit without breaking the layout.

Common questions about UI/UX design

Answers about the split of work with Aphrodi, the design files and the quote.

Want to design the interface before the code?

Tell us who will use the app and what they should do in it. We will reply within an hour with questions and a quote.