Listen
Talk with stakeholders and, where access allows, the people using the product. Learn their language, routines and frustrations.
Interviews · Business goals · User needsThe Ethos Team / UI & UX design
Interfaces worth
spending time in.
Beautiful is the beginning.
Useful is what brings people back.
We handcraft the screens, flows and small interactions that make a website, app or portal feel natural. Built around what your customers need to do—and how you want them to feel doing it.
Clarity in the journeyCharacter in the detailsCare in the interaction
Before we draw a screen
Get curious.
Then get specific.
The research phase gives the design a reason to exist. We work out who is using it, what they need, and where the current experience asks too much of them.
DISCOVERY NOTESWhat are we
really solving?
really solving?
Methods are chosen for the project. The goal is evidence we can design against.
Observe
Audit the existing journey. Review available analytics, content, accessibility and comparable experiences to find unanswered questions.
Experience audit · Content inventory · Analytics reviewMap
Put the important tasks in order. Decide what belongs on each screen, what can wait and what someone needs to know before acting.
Task flows · Information architecture · PrioritiesTest & learn
Put a prototype in front of people, watch where they hesitate and refine the design. Assumptions stay assumptions until they are tested.
Usability sessions · Feedback · Iteration02 / The identity
A point of view.
Down to the full stop.
A brand is a set of decisions that belong together. This identity study pairs structural lines, warm materials and editorial typography. The symbol, color and layout do the talking.
ETHOS / DESIGN STUDY № 01Original concept · not client work
A / Primary signature
Architecture & interiors
Spaces for the way we live.
B / The mark
A symbol drawn like a floor plan.
Open space is part of the identity.
One mark.
Different scales.
Different scales.
Primary / identityPine
#243B35Canvas / breathing roomLimestone
#F1EEE6Accent / emphasisFired clay
#C75435Text / fine detailCharcoal
#202321C / Typography
Room to
be human.
Georgia / Editorial voiceMont / Navigation & everyday readingMonospace / Technical annotations
A serif gives the story warmth. A clear sans serif does the practical work. Scale, spacing and hierarchy make the pair feel related.
D / In the world
STUDIO NOTES / 001Good spaces
Good spaces
start with
good questions.
Light. Material. Movement.
A place that feels like yours.
Architecture
& interiorsConsidered from every angle.
& interiorsConsidered from every angle.
E / Graphic languageStructure becomes
Structure becomes
a signature.
Rules, framing devices and a repeating floor-plan motif carry the identity into layouts, presentations and small interface details.
SPACE / TYPE / COLOR
space.03 = 24px
color.ink = pine
type.display = serifIdentity → guidelines → components → experienceAn Ethos design concept
What a brand package can include
Primary and secondary logos · Small-format mark · Color specifications · Typography hierarchy · Graphic elements · Usage guidelines · Digital and print applications. We agree the deliverables around where your brand needs to show up.
03 / Responsive design
The same space,
recomposed.
Design concept / responsive study
An original illustrative concept that tests what each screen can comfortably hold. It is not client work.
Courtyard
house
A sequence of quiet rooms, built around a pocket of sky.
Courtyard
house
A sequence of quiet rooms, built around a pocket of sky.
Courtyard
house
A sequence of quiet rooms, built around a pocket of sky.
Compare + decide. The full index, project detail, and material notes can sit together for a more considered working view.
Original concept study · the controls only change this local preview
Screen size is a constraint.
It’s also a design decision.
We can’t fit a laptop’s information density onto a phone and expect it to feel good. We change the hierarchy, navigation, columns and controls. Content reflows, secondary details move behind a deliberate action, and the important task stays easy to reach. We also account for touch, keyboard use, zoom and longer text—not just a few device sizes.
Interaction lab · 04
The interface should
explain itself.
A compact study in menus, keyboard paths, changing state, and useful AI boundaries. Every control below works; every record is fictional.
Workspace / Studio operations / Design conceptWednesday / Cycle 06
Work queue
Active04projects in cycle
Attention01needs a decision
In review01ready for response
Local sample state
No connected data source
Motion specimen
State change becomes a visible path.
- Request
- Route
- Confirm
Project / codeStateProgressOwner
Design concept only. No client records, remote calls, messages, bookings, or storage.
From visual language to working code
Designed in detail.
Built in the browser.
We carry the design into implementation so spacing, behavior and responsive decisions survive the handoff. This page itself is built with TypeScript, React and Next.js.
interface.tsxStructure → state → feedback
type View = "overview" | "details";
const [view, setView] = useState<View>("overview");
<button
aria-expanded={view === "details"}
onClick={() => setView(
view === "overview" ? "details" : "overview"
)}
>
Project details
</button>Illustrative React + TypeScript excerpt.
A visible action, explicit state and an accessible signal.
HTML & CSS
Semantic structure, layout, typography, responsive behavior and visual states.
JavaScript & TypeScript
Interaction logic, predictable state, validation and connections to application data.
React & Next.js
Reusable interface components and application architecture. These are tools and frameworks, rather than languages.
Design systems
Shared tokens, components and interaction rules that keep the experience consistent as it grows.
Where good UI/UX
makes a difference.
Let’s make something people enjoy using.
Your next interface
deserves a little more care.
Bring us an idea, a rough flow or a product that feels harder to use than it should. We’ll talk through where thoughtful design can help.
Custom to your brand. Considered for your users.