A sign-in people get through
One field, one button, and a line that says what happens next.
Interface design (UI)
Screens people understand the first time.
We draw every screen of your app or website before anything is built: what goes where, how big, in which colors, and what it says when something goes wrong. Each one is checked against the sizes and contrast that Apple, Google and the web’s standards body publish.
Why a screen gets measured
Five in six of the web’s top home pages have text that fails the contrast test.
In February 2026 the accessibility group WebAIM tested the home pages of the top million websites. On 83.9% of them it found text below the minimum contrast in the W3C’s guidelines, in 34 places per page on average. Contrast is how much lighter or darker text is than what’s behind it, written as a ratio from 1:1 to 21:1.
It was the most common fault the test detected, and it is one of the easiest to check: two colors go in and one number comes out. Much of interface design works the same way. Apple, Google and the W3C, the body that sets the web’s standards, publish the numbers, and a screen either meets them or it doesn’t. Apple counts in points and Android in dp, the units each one measures a screen in.
83.9%of the top million home pages had text below the contrast minimum
34places per page, on average, where the text was too faint
4.5:1is the W3C’s minimum contrast between ordinary text and its background
44 ptis the smallest hit area Apple asks for on a button. Google recommends 48 dp
The same part, drawn twice.
A screen is made of a few small parts used over and over: a button, a field, a choice, a row in a list. Each can be drawn so it is hard to use or easy to use, and the difference is rarely a matter of taste.
How easy a button is to find can be measured too. Google ran 46 studies with more than 18,000 people for Material 3 Expressive, the look it announced for Android in 2025. In one of them, people spotted an email app’s Send button four times faster once it was larger and more prominent.
Every screen on this page is an example drawn for it, not a client’s product. All of them are about one screen at a time. The order the screens come in, and the step where customers give up, is UX design ›
What you’d get
Every screen drawn, and the kit they’re built from.
Empty screens that point somewhere
What a new customer sees before there is anything to show, with the next step on it.
Errors that say what to do
Plain words about what happened and the one thing to do next. Never a code.
Forms that are easy to finish
A label on every field, a hint where one helps, and a mistake flagged beside the field it’s in.
Lists you can scan
The name first, the detail in grey and the time on the right, in the same place on every row.
The kit every screen is built from
A small set of colors, text sizes and buttons, so screen twenty looks like screen one.
The part nobody sees
A design that exists only as pictures gets rebuilt by eye, and it drifts. What keeps screen twenty matching screen one is this list, and none of it shows in a screenshot.
The last two are there because of how people set up their phones. Apple’s guidelines say people often choose dark mode as their default and expect apps to respect it. In research in the Netherlands by the Appt Foundation, more than a fifth of iPhone and Android users had increased their text size. See what it takes ›
- Every state of every screen, not only the full one
- Colors, sizes and spacing kept as named values in the code
- Contrast and tap sizes measured in light and in dark
- Every layout checked with the text size turned up to 200%
How a project goes
- 1
Talk
A free call. You describe the problem in your own words, and we tell you honestly whether software is the answer.
- 2
Proposal
A written scope, timeline and price before any work starts.
- 3
Build
We design, code and test in phases. You see working software at the end of each one.
- 4
Launch
We put it live: app stores, hosting, domains, the lot.
- 5
Keep it running
Monthly maintenance if you want it: updates, fixes and regular reviews.
Before you ask
What’s the difference between UI and UX design?
UI stands for user interface: what each screen looks like and how it reads, down to the sizes, colors, spacing and wording. UX stands for user experience: the route a customer takes through those screens, and where they give up. This page is about the first. We do both, and on most projects they happen together.
Will I see the design before anything is built?
Yes. Every screen is drawn in your colors, along with its empty, loading and error versions, and you go through them before any code is written. A change at that point is a change to a drawing. The screens on this page are examples drawn for it, not client work.
How much does interface design cost, and how long does it take?
It depends on how many screens there are and how many of them are forms. The first call is free. After it you get a written scope that lists the screens, with a timeline and a price, before any work starts.
I already have a logo and brand colors. Can you use them?
Yes, we start from them. What we check is contrast, because some brand colors can’t carry text. On the amber this site uses, a white label measures about 1.8:1 against a minimum of 4.5:1, and a black one about 12:1, so a color like that gets a dark label. Your colors stay. Where each one is used may change.
Do iPhone and Android need separate designs?
One design, adjusted where the two differ. Apple asks for buttons with a hit area of at least 44 by 44 points and Google recommends 48 by 48 dp (points and dp are the units each system measures screens in), so we draw to the larger. On the web the W3C’s minimum for most controls is 24 by 24 CSS pixels, and we use the phone sizes there too. In 2025 both companies announced a new look: Apple’s is built on a material it calls Liquid Glass, and Google’s is called Material 3 Expressive. Apple’s guidance is to keep Liquid Glass to controls and navigation and out of the content itself.