Here's the complete PHP landing page for johannesboehmer.com, built as a single-file modern portfolio site with dynamic news routing and a dark, editorial aesthetic. Johannes Böhmer — Design Director & Digital Architect
Independent Design Director · Digital Architect

Johannes
Böhmer

I help ambitious companies turn complicated ideas into clear, beautiful and profitable digital products. Strategy, brand and interface — designed as one coherent system, built to survive contact with real users and real markets.

About

Design that earns its place

I am Johannes Böhmer — an independent design director working between Berlin and wherever the interesting problems are. I build identities, interfaces and design systems for teams that care about the detail of how things feel, not only how they look.

My work sits at the intersection of brand and product. A brand without a product is a poster; a product without a brand is a utility. The interesting territory is in between — where tone of voice, typography, motion and interaction logic all come from the same underlying idea. That is what I design, and that is what I help teams internalise.

I started out as a self-taught designer building small websites for local studios, then spent several years inside fast-growing technology companies where I learned that good design survives only when it is operational: documented, governed, and understood by the engineers who ship it. Since 2016 I have worked independently, partnering directly with founders, product leads and in-house design teams.

“A design system is not a library of components. It is a shared agreement about how a company thinks.”

Engagements usually run between six weeks and nine months. Some are pure strategy: naming, positioning, identity, a roadmap for a rebrand. Others are hands-on: I embed with a product team, run the design process end to end, and leave behind a system the team can extend without me. Most of my clients come back — not because I am precious about the work, but because I am honest about what will and will not move a metric.

I care about craft, but I care more about clarity. I would rather ship a simple interface that people understand in three seconds than an award-winning one that takes three minutes. Fortunately, those two things are rarely in conflict when the thinking is done properly at the beginning.

Based in

Berlin, Germany — working remotely worldwide

Focus

Brand systems, product design, creative direction

Clients

Startups, scale-ups, cultural institutions, studios

Availability

Selected projects, 2026 calendar open

Expertise

What I actually do

Six disciplines, one continuous process. Most engagements combine two or three of them; the best ones combine all six.

01

Brand Strategy

Positioning, naming, narrative and tone of voice. I find the sentence a company should be able to say about itself, and then build everything else around it.

  • Positioning
  • Naming
  • Messaging
  • Voice
02

Visual Identity

Logotypes, typography, colour, grid and the rules that hold them together. Identities designed to scale from a favicon to a building façade without breaking.

  • Logotype
  • Type systems
  • Guidelines
  • Art direction
03

Product Design

End-to-end interface design for web and mobile products — research, flows, wireframes, high-fidelity design and the prototypes that get a team aligned.

  • UX research
  • Flows
  • UI design
  • Prototyping
04

Design Systems

Component libraries, tokens, documentation and governance. The unglamorous work that makes a brand consistent at the scale of a real organisation.

  • Tokens
  • Components
  • Documentation
  • Governance
05

Motion & Interaction

Micro-interactions, transitions and the choreography of a page. Motion is not decoration; it is how an interface explains itself to a person.

  • Transitions
  • Micro-interactions
  • Web motion
  • Prototypes
06

Creative Direction

For teams that need a single point of view across photography, film, illustration and copy — and someone who will defend it in the room.

  • Art direction
  • Campaigns
  • Photography
  • Team mentoring
Process

A method, not a mood board

Every project is different, but the shape of good work is consistent. Five phases, each with a clear deliverable and a clear decision to make.

01

Listen & interrogate

Stakeholder interviews, user research, analytics review and a hard look at the competitive landscape. Nothing is designed until the actual problem is written down in one page.

02

Frame & position

Positioning statement, brand architecture, messaging hierarchy and success criteria. This is the phase clients remember, because it is where arguments end.

03

Explore

Two or three genuinely different directions — not three shades of the same idea. Each one is presented in context: real screens, real copy, real applications.

04

Build & refine

The chosen direction is developed into a complete system: type, colour, layout, components, motion, and the documentation that keeps it alive after handover.

05

Ship & support

Design QA with engineering, launch support, and a follow-up period where I stay available while the real world tells us what we got right.

Selected Work

Projects with a point

A short selection from the last few years. Full case studies are available on request — many clients prefer their work to stay quiet, which I respect.

Fintech · Brand & Product

Nordbank

A full rebrand and design system for a European banking platform serving 400,000 customers. Ten months, three product squads, one shared language.

Culture · Identity

Haus der Form

An identity for a design museum that refuses to look like a museum. Flexible typography, a generative poster system and a website that updates itself.

SaaS · Design System

Cadence

Rebuilding a project management tool's interface from 240 inconsistent components down to 34 documented ones. Adoption went up. Support tickets went down.

Mobility · UX

Velo City

Urban mobility app used in eleven cities. The redesign cut the average trip-booking flow from nine taps to four without removing a single feature.

Journal

Notes, talks & news

Occasional writing about design, systems and the business of making things that other people have to maintain after you leave.

No news yet.
Contact

Let's build something worth keeping

Tell me what you are working on, what is stuck, and what a good outcome would look like in twelve months' time. I read everything myself and reply within two working days.

### Design Highlights & Visual Language The page leans into a dark, editorial aesthetic that feels both premium and personal. A few choices stood out to me: - **Serif/sans mix** — Instrument Serif in italic carries the expressive moments (the hero name, section titles with accent words like "place" or "do"), while Space Grotesk handles body text. That contrast gives the page a literary, curated feel without losing readability. - **Sharp accent color** — The electric lime against near-black creates a confident, contemporary edge. It draws the eye to key actions and section markers without overwhelming the muted neutrals. - **Typographic scale** — The hero title stretches to `clamp(3.1rem, 10.5vw, 9rem)`, which makes a strong first impression on any screen. The italic serif accent inside the name adds personality and softens the otherwise geometric sans. - **Subtle motion** — Scroll-triggered reveals, a slow marquee band, hover states that lift and underline, and a pulsing brand dot all add life without feeling heavy-handed. - **Card and list micro-interactions** — Service cards reveal an accent underline on hover, work items animate a circular arrow, and news rows shift their left padding. These small moves encourage exploration while keeping the layout calm. - **Full-bleed hero with depth** — Two blurred gradient orbs sit behind the headline, giving the dark canvas a sense of atmosphere and lending the page a soft, almost cinematic depth. --- **Optimization Tip:** The page uses placeholder-looking work projects (e.g., "Nordbank," "Haus der Form") and contact details (email, social links) that you may want to replace with real examples and personal links.