Color Before the Lines
A painting app that starts from a finished watercolor. How the core interaction, the iPad and iPhone layouts and the review of our own work were designed.
Read the case study: Color Before the LinesDesign you can build. UX/UI and product design for apps, SaaS and websites
Flows, screens and design systems drawn by a designer who also writes the code, so what you approve is what gets built.
Who it is for.
- Founders before an MVP who need the product shaped before code is written.
- Product teams with a product that grew screen by screen and now needs one system.
- Agencies that need UX/UI or a design lead for a client project.
- Developers who have working code and need the interface to make sense.
What you get.
Design that survives contact with the build, because we build too.
Flows from the real task
We start from what people are trying to get done, then map every step, state and error before drawing screens.
Screens at real size
iPhone, iPad, desktop and the sizes in between, with real content instead of placeholder text.
A system, not a pile of screens
Colours, type, spacing and components as tokens your developers can use directly.
Prototypes to test
Clickable or coded prototypes to try with people before the build is committed.
Honest reviews
An audit of an existing product: what blocks people, ranked by impact, with a fix for each point.
Handoff that matches the code
Specs come with the states, edge cases and motion developers usually have to guess.
How it goes.
Five steps. Each ends with something you can look at, test or build from.
Understand
The product, the people who use it and the business constraint, from interviews or analytics if they exist.
Shape
Flows and structure in wireframes, agreed before any visual work.
Direction
A visual world drawn from your product and its users, shown as real screens.
Screens and system
Every screen and state, on a component system with its tokens.
Build support
We answer developers' questions, review what gets built, or build it ourselves.
Designed and shipped.
The design work behind our own products, from the first idea to the version on the store.
Also designed and built by us
- FreeboardInterface for a twelve-month cash flow forecast, on the web and in the browserfreeboard.money
- RouterSyncOne sign-like interface across Mac, iPhone, Android and Windowsroutersync.com
- Cardillon3D pop-up greeting cards with a music boxcardillon.com
- Valerio DonfrancescoThe founder's UX/UI portfolio, for agenciesvaleriodonfrancesco.pro
What sets the price.
Design is sized by the product, not by the hour. These are the things that change the scope.
Scope of the product
A single flow is not a whole app. We size the work by flows and screens, including their states.
What exists
Brand, research, a current product or code change where we start and how much we redo.
Depth of the system
A few reusable components, or a full design system with its documentation.
Prototype fidelity
Clickable screens are quick; a coded prototype that behaves like the app takes longer and tests better.
Who builds it
If we also build, the handoff is lighter. If your team builds, we add specs and review rounds.
Design can be a project on its own or the first step of an app or site we build.
Questions
Can you work with our developers?
Yes. We hand over specs and tokens, join reviews and answer questions while they build.
Can you lead design on an agency project?
Yes. We work as UX/UI designer or design lead on agency projects, from discovery to handoff.
Start a design.
Tell us about the product and where it is today. We read every message and reply personally.
Or write to info@bytelegion.site