clickpuls
4 slots Q2/26

WEB DESIGN · USER EXPERIENCE · INTERFACE DESIGN

Web design
with research and a clickable live prototype — not in the theme editor.

Every website, every Shopify shop, and every WordPress project at clickpuls starts with research and is built as a clickable live prototype in the browser. You test the finished interface before the production build begins — no design-tool slides, no translation loss between design and code, no launch-day surprises.

Request a free consultationLearn more
Trusted by
Mercedes-Benz
BMW Deutschland
MINI Deutschland
Red Bull
IKEA
Allianz
A1
Sky
Electronic Arts
OBI

What is professional web design?

Professional web design is the structured process of research, concept, a clickable live prototype, and a design system that ends with a seamless transition into the production build. At clickpuls, web design is not a purely visual discipline — it is work on information architecture, user guidance, conversion, and brand impact in one go.

A full web design process covers:

  • Research (target-group interviews, competitive analysis, analytics and heatmap review)
  • Information architecture (page hierarchy, navigation, user flows)
  • Live prototype (clickable prototype in the browser with all key templates, real interactions, and states)
  • Feedback iterations on the real interface instead of static screens
  • Design system (reusable components, typography, colour, and spacing tokens)
  • Production build & launch (the prototype migrates into the launch stack without a handover break)

That sets web design at clickpuls apart from pure "layout work": the prototype already IS code — no more style questions during implementation, no theme-editor improvisation, no launch-day surprises.

Why clickpuls for web design?

Web design as a structured process — with research at the start, a clickable live prototype in the middle, and a seamless transition into the production build at the end.

01

Research before design

We never start from a blank canvas. Before the first prototype we analyse target groups, competitors, existing analytics, and heatmaps. Design decisions are based on evidence, not taste.

02

Clickable live prototype

Instead of static slide drafts in a design tool, we build the draft directly as a clickable prototype in the browser — with real interactions, real states (hover, error, loading, empty) and mobile behaviour. You test the site live instead of interpreting screenshots.

03

Design system included

Components, type scale, colour and spacing tokens are documented and reused inside the prototype — not reinvented per page. That makes the site extensible and reduces design debt over the years.

04

No handover break

The prototype already IS code. Instead of throwing design files over the fence, prototype components migrate directly into the production build for WordPress, Shopify, or custom stack. No translation losses, no pixel ping-pong — and no launch-day surprises.

Web design in depth.

Research: half the battle in web design

Most failed websites don’t have a design problem — they have a research problem. We deliberately invest time in every web-design project before the first prototype is built, because a misunderstood user need is not saved later by typography.

What we do in the research phase:

  • Target-group interviews with 3–8 real customers or users — not a stakeholder workshop behind closed doors
  • Competitive analysis of the 5–10 most relevant competitors across DACH, with screenshots, conversion patterns, and SEO benchmarks
  • Analytics and heatmap review (GA4, Clarity, Hotjar) if data from the existing site is available
  • Content inventory — what exists, what needs to be new, what goes out
  • Technical baseline — existing systems, CMS, PIM, ERP, tracking setup, current performance

The outcome is a research report with actionable recommendations that holds value even if you were to continue the design project internally — which we rarely see in practice, but openly offer.

Live prototype: clickable in the browser, not in a slide studio

The central difference to classic agencies: at clickpuls, you don’t see the draft as a screenshot series in a design tool but as a real clickable prototype in the browser — on its own URL that you, your team, and your stakeholders can test live.

What the live prototype contains:

  • All relevant templates — home, product listing, product detail, category, checkout, contact, blog index, blog article, legal pages
  • Real interactions — dropdowns open, forms validate, accordions animate, navigation actually responds
  • All states per component — default, hover, focus, disabled, error, loading, empty
  • Responsive behaviour — mobile (375px), tablet (768px), desktop (1280px), wide (1440px+) — not sketched but live-testable
  • Placeholder content of realistic length and structure so layout edges become visible (short vs. long product title, empty vs. full cart, 2 vs. 200 reviews)

Why this works better than static drafts:

  • You don’t have to interpret screenshots — you click through the interface like a real user
  • Feedback becomes more precise because you anchor on behaviour instead of imagination
  • Stakeholders without design vocabulary understand the draft intuitively
  • Technical feasibility is automatically proven — if it runs in the prototype, it runs in the production build
  • Performance decisions (fonts, images, animations) become visible early, not first in development

The prototype is typically hosted on Fly.io or Hetzner in Frankfurt — on a staging URL with password protection. You give feedback via comment, Slack, or screenshare session — the draft changes within hours, not days.

Prototype iterations: feedback on the real interface

After the first live version, 1–3 structured iteration rounds follow. Every round has a clear scope, deadline, and feedback channel. This prevents the classic agency trap of endless revision loops.

How an iteration round runs:

  • Review session (45–60 minutes) with all decision-makers — we walk through the prototype, you give feedback directly at the interface
  • Feedback summary as a prioritised ticket set (must-have vs. nice-to-have)
  • Implementation of must-haves within a few business days, directly in the running prototype
  • Sign-off gate — either next iteration or transition into the production build

What typically emerges in iterations:

  • Refinement of the type scale and colour tokens against real content
  • Addition of missing states (loading, error, empty) or edge cases
  • Adjustment of mobile logic where touch behaviour works differently than expected
  • Integration of additional components into the design system (accordion, tabs, modal, toast)
  • Sharpening of copy hierarchy — what to read first, what’s secondary, what’s only for search engines

The design system emerges in parallel: every newly built component is documented with typography, colour, spacing, and behaviour rules. At the end of the iteration phase you don’t just have a finished prototype but also a reusable library for all future landing pages, campaigns, and shop extensions.

Design system: build once, use forever

A design system is the library of reusable components and design rules we build in parallel with the live prototype. Without a design system, design debt accumulates: every new page looks slightly different, every campaign reinvents buttons, inconsistencies grow every year.

What our design system documents:

  • Type scale — which font sizes, line heights, and tracking values exist and what they are used for
  • Colour tokens — primary, secondary, neutral, and state colours with clear contrast values for WCAG 2.2 AA
  • Spacing tokens — a consistent spacing system (usually a 4px or 8px grid) that creates rhythm in layouts
  • Components — buttons, forms, cards, navigation, modal, accordion, tabs, toast notifications
  • Patterns — how components combine into typical page sections (hero, feature grid, testimonial, CTA band)

The design system is handed over so that our development team can translate it directly into Tailwind tokens, WordPress theme variables, or Shopify Liquid — whichever stack applies. After launch it remains the reference for every iteration: new landing page, campaign, product launch, or shop extension all pull from the same building blocks.

Production build: from prototype to launch version

At most agencies, web design ends with a design sign-off — and then "some dev team somewhere" takes over with half-understood templates. At clickpuls there is no such break: the signed-off live prototype already IS code, and that same code moves into the production build — no handover, no reinterpretation.

What the transition looks like in practice:

  • Technical architecture decision — depending on scope, WordPress theme, Shopify Liquid theme, or Next.js custom build. The prototype code is either adopted directly or used as the binding reference
  • CMS and shop integration — content is migrated into WordPress, Shopify, or a headless CMS; product feeds, payment providers, and third-party systems are connected
  • Performance optimisation — Core Web Vitals are trimmed against real measurements: image formats, caching, critical CSS, script strategy
  • Design QA in two stages — once after staging build (before content is loaded) and once before go-live (with real content)
  • Support in the first 2–4 weeks after launch — real-user feedback flows back into iteration tickets

The benefit is immediately measurable: launch-day tickets like "this looks different from the prototype" drop to near zero, because design and development never drift apart. Iteration after go-live continues against the same design system and the same codebase, instead of emerging in a parallel universe.

What sets clickpuls web design apart from classic design agencies?

Classic design agencies often come from print or brand backgrounds and deliver visually strong but technically impractical drafts. The other kind are "no-code shops" that build directly in a builder — fast, but without research and without a real design process.

clickpuls deliberately sits in between:

  • Merchant perspective: we don’t build award designs, we build websites that convert in real everyday use — measured against KPIs, not jury verdicts
  • From one team: design and development are the same team, no agency-to-agency handoff with friction loss
  • Evidence-driven: every major design decision is tied to a hypothesis — and verifiable after launch
  • Technically realistic: we don’t design anything we can’t implement performantly in the chosen platform (WordPress, Shopify, custom code)
  • Accessible by default: WCAG 2.2 AA is the baseline, not an expensive add-on

This also means we are not the right choice for projects measured purely on visual wow effect. If you need an award-winning editorial interface, specialised design studios will serve you better. If you are looking for a website that earns revenue and stays maintainable for years, you are in the right place.

WHEN DO YOU NEED THIS?

When do you need clickpuls web design?

Not every project needs a full design process. These are the typical triggers where a theme editor or a freelance designer hits a wall.

01 / TRIGGER

Relaunch of an existing website or shop

Your website is technically outdated, converts poorly, or no longer fits your brand evolution. A mere theme swap won’t solve that — you need research, a new information architecture, and a live prototype that will carry you for the next decade.

02 / TRIGGER

New website or online shop from scratch

You are launching a new product, a new brand, or a new shop — and you need a website that correctly connects brand impact, SEO foundations, and conversion mechanics from day one. Theme-editor improvisation backfires no later than the first campaign.

03 / TRIGGER

Conversion issues on the existing site

Traffic is there, but leads or sales stay below expectations. Usually it is not the tech that’s the problem but a site that doesn’t guide users to the goal. A structured redesign process with heatmap data and hypothesis testing changes that measurably.

04 / TRIGGER

Scaling with campaigns, landing pages, and expansion

Your team constantly produces new pages for campaigns, product launches, or country expansion — but without a design system every page looks different. A clean design system with clear components enables scaling without diluting design quality.

Case studies

Web design projects from our practice.

Preview image of the case study Michael Marcovici — Block55 – Viral Reward Campaign for a Book Launch
Michael MarcoviciPublishing / Book Marketing

Block55 – Viral Reward Campaign for a Book Launch

Viral reward campaign with a dedicated website around the launch of the book „Block55" – sharing on social networks earned points redeemable for a signed copy. Result: a tenfold increase in book sales within a few weeks.

View case study
More clients

Clients who have trusted us for years.

  • OBI
  • Sky
  • Allianz
  • Red Bull
All case studies

Sounds like your project?

30–45 minutes for a first call — free and non-binding. We assess your use-case, estimate effort and risks, and give an honest recommendation — even if it means this is better built elsewhere.

Request a free consultation

Process-driven web design vs. theme editor or builder

Where is the difference between a structured web design process and quick "click-together" in a theme editor? This overview shows the typical decision points.

Kriterium / Criterion
Process-driven web design at clickpuls
Theme editor / builder
Starting point
Research: target-group interviews, analytics, competitors
Pick a theme, change colours, go
Layout validation
Clickable live prototype in the browser as sign-off milestone
None — layout emerges alongside content
States per component
Default, hover, focus, error, empty, loading — documented
Usually only default state, rest ad-hoc
Design system
Documented tokens and component library
None — every new page reinterpreted
Transition design → development
No break — the prototype IS code and moves into the production build
N/A — design and implementation are the same tool
Scalability
New pages reuse existing components
Every new page starts from zero
Accessibility
WCAG 2.2 AA baked into design
Theme-dependent, often retrofitted
OUR PROCESS

From research to launch in six phases — and beyond.

Every website, every Shopify shop, every WordPress project at clickpuls runs through the same process — with clear sign-off milestones and exit gates between phases.

01

Research & audit

Target-group interviews, competitive analysis, analytics and heatmap review, content inventory, and technical baseline. Outcome: research report with actionable recommendations. Duration: 1–2 weeks.

02

Concept & information architecture

User flows, page hierarchy, navigation, content logic. Sitemap and flow diagrams as the basis for the live prototype. Duration: 1 week.

03

Live prototype

Clickable prototype in the browser — all key templates, mobile-first, behind a password-protected staging URL. Clients test the real interface instead of interpreting slides. Sign-off milestone before iteration phase. Duration: 1–2 weeks.

04

Prototype iterations & design system

1–3 iteration rounds against the running prototype — review sessions, prioritised feedback tickets, implementation within a few business days. In parallel, the design system emerges with components, typography, colour, and spacing tokens. Duration: 2–4 weeks.

05

Production build & launch

The prototype moves into the production build — WordPress theme, Shopify Liquid, or Next.js custom, depending on stack. CMS and shop integration, performance trim against Core Web Vitals, design QA in two stages (staging and pre-launch). Duration: continuous up to go-live.

06

Ongoing care & CRO

After go-live on retainer: real-user monitoring, hypothesis-driven iterations, A/B tests, new landing pages on top of the design system. Maintenance, updates, and security patches for WordPress, Shopify, and custom stacks. Duration: ongoing.

KEY FIGURES

Realistic numbers for your planning.

Concrete numbers from our web design projects across WordPress, Shopify, and custom stacks.

Typical design duration
5–9 weeks

From research kickoff to signed-off live prototype for a mid-sized website or shop with 6–10 templates.

Pricing model
Fixed price after discovery

Web design effort depends strongly on number of templates, research depth, and design-system scope — a blanket range wouldn’t hold up in a real project. After a discovery phase we deliver a fixed-price quote with clear phases and exit gates.

Team setup
2–3 specialists

Design lead, UX/UI design, and project management — plus close alignment with the development team from day one.

Ongoing CRO iterations
Retainer after go-live

After launch we continue on a retainer basis (if desired) with hypothesis-driven iterations, A/B tests, and new landing pages based on the existing design system. Package and price depend on scope — quote after a brief conversation.

Ready for a first call?

30–45 minutes by call, no commitment. Tell us briefly what you need — we get back within one business day with concrete next steps and a realistic effort estimate.

Request a free consultation
DACH CONTEXT

Web design in Austria, Germany, and Switzerland.

clickpuls has been based in Vienna and serves web-design projects throughout the DACH region — from Viennese mid-market to Linz industrial companies, Salzburg tourism brands, Munich B2B manufacturers, Berlin e-commerce shops, and Zurich SaaS startups.

Why geographic proximity matters in web design:

  • Shared language and cultural understanding — we know the tone that works in DACH and the differences between Austrian, German, and Swiss usage on the web
  • In-person research sessions — target-group interviews and stakeholder workshops work much better in person than in async video calls across time zones
  • EU-compliant processes — analytics, heatmap tools, and interview recordings are set up GDPR-compliant; hosting for the design system on Hetzner or Fly.io in Frankfurt
  • Contract language German under Austrian, German, or Swiss law
  • Standard response within 24 hours on business days in CET
  • On-site sessions in Vienna, Salzburg, Linz, Innsbruck, Graz, Munich, Berlin, Hamburg, Düsseldorf, Frankfurt, Zurich, Bern, or Basel

Country-specifics in web design:

  • Austria: we know regional branding characteristics (grounded, functional, without exaggeration) and work with state-specific tonalities where needed
  • Switzerland: web design for Swiss clients considers multilingual setups (DE/FR/IT/EN), Swiss format conventions for date, currency, and addresses, and FADP-compliant analytics setups
  • Germany: we design for the German Mittelstand with its expectations of substance, clarity, and evidence — no startup gloss, but solid reasoning

For WordPress projects we additionally design with Raidboxes hosting in mind, for custom sites with Hetzner and Fly.io Frankfurt — meaning: even in the design system we think about performance, caching, and technical feasibility.

FREQUENTLY ASKED

Frequently asked questions about web design.

What’s the difference between web design and web development?

Web design is the work on research, information architecture, and the clickable live prototype in the browser — the design and planning of a website, including an initial code base. Web development transfers that prototype into the production build: CMS or shop integration, databases, APIs, performance trim, operations.

At clickpuls both disciplines are tightly coupled because the same team owns both phases — and because the live prototype already is code. Concretely: our designers know what can be implemented performantly in WordPress, Shopify, or Next.js — and our developers build on top of the prototype code instead of reinterpreting it. That avoids the classic problem between agencies where design and development drift apart.

Does every website need a full design process?

No — and we say that openly. If you need a lean landing page for a one-off campaign, a reduced process is more sensible than a full research cycle. If you have an existing site that only needs new colours and a few new templates, a design-system update is often enough.

A full process pays off in these cases:

  • Full relaunch of an existing website or shop
  • New online shop or new product with its own brand development
  • Scaling with many new pages, campaigns, or country expansion
  • Measurable conversion issues where hypotheses and research help

In all other cases we build a shortened process with you — transparent in scope and price. In discovery calls, one of our first questions is whether a full process is even needed or whether a leaner approach makes more sense.

How much does a web design project cost?

We don’t publish fixed-price ranges for web design projects — without concrete template count, research depth, and design-system scope they would be pseudo-transparency. A landing-page design costs a fraction of a shop redesign with 15 templates, a research cycle, and a full design system.

After a discovery phase we deliver a fixed-price quote with clearly separated phases:

  • Research & audit
  • Concept & information architecture
  • Live prototype in the browser
  • Prototype iterations & design system
  • Production build & launch

Between each phase there is an agreed exit gate — you decide after each phase whether to continue or cut scope. Ongoing CRO iterations and new landing pages after go-live run optionally on a monthly retainer.

Do you also design for Shopify and WordPress?

Yes — every Shopify shop and every WordPress project at clickpuls runs through the same web design process. The difference to other agencies: we do not design directly in Shopify’s theme editor or WordPress’s block editor.

Instead, a research report and a clickable live prototype in the browser come first — and only then does the development team transfer the prototype into Shopify Liquid, a custom WordPress theme, or custom code. This has two advantages:

  • Design quality is not bound to theme limits — we’re not restricted to what a theme provides
  • Scaling is consistent — new campaign pages or landing pages draw from the same design system regardless of the CMS

That makes our Shopify and WordPress projects visually and structurally distinguishable from off-the-shelf theme setups — and they stay maintainable after go-live.

What do I get at the end of the design phase?

Concretely, we hand over:

  • Research report with target-group insights, competitive analysis, analytics insights, and actionable recommendations
  • Sitemap and user flows as PDF and as a structured document
  • Clickable live prototype in the browser behind a password-protected staging URL — all key templates, mobile and desktop, with every state (default, hover, focus, error, empty, loading)
  • Prototype code base as a Git repository — foundation for the production build or for your own further work
  • Design-system documentation with typography, colour, and spacing tokens, plus component library
  • Handover document with behaviour, responsive rules, accessibility requirements, and edge cases

All design files, the prototype code, and the design system belong to you fully after payment — you keep full usage and reuse rights. Theoretically you could commission another vendor for the production build after the design phase. We see this as a quality promise, not a risk — in practice most clients stay with us for implementation because the frictionless transition is valuable.

How long does a web design phase take?

Rule of thumb by project type:

  • Lean corporate sites (4–6 templates): 4–6 weeks
  • Mid-sized shops or sites (8–12 templates): 6–9 weeks
  • Complex platforms with design system (15+ templates): 10–16 weeks

Breakdown within the process:

  • Research & audit: 1–2 weeks
  • Concept & IA: 1 week
  • Live prototype in the browser: 1–2 weeks
  • Prototype iterations & design system: 2–4 weeks (main block)
  • Production build & launch: continuous to go-live

Acceleration is possible when research data is already available or when the design system strongly leans on an existing brand. We communicate realistic timings in the discovery phase — not wishful thinking, but reliable estimates.

Do you work with our existing corporate design?

Yes — happily. In many projects we take an existing brand system (logo, primary colours, type family, tone of voice) and build the web design system on top. This happens especially often with clients who have an established brand but want to modernise its digital execution.

What we do in that case:

  • Brand audit — check whether the existing system is web-ready (contrast, scalability, dark-mode fitness, accessibility)
  • Add missing building blocks — web-specific elements like form styles, hover states, responsive type scale, or accessibility colours are often missing
  • Integration into the design system — we adopt tokens consistently instead of reinventing them in parallel

If the existing corporate design is not web-ready (low contrast, non-responsive fonts, missing states), we say so clearly and propose an extended brand update. A full brand relaunch, however, is not part of this service — for that we work via our brand concepts service or with dedicated brand partners.

Who looks after us during the project?

You have one central contact — usually the design lead or our project manager — for strategic and operational topics.

Tools for collaboration:

  • Jira or Linear for tickets and progress
  • Slack or MS Teams for daily communication
  • Loom for async walkthroughs of the live prototype
  • Prototype comments directly in the browser — you mark spots on the running interface, we see the context immediately

We work in weekly rhythms with review sessions against the prototype: every week there is a fixed 45-minute slot where we show progress in the browser, clarify open questions, and set next steps. On business days we respond to Slack or email requests within 24 hours by default. Faster SLAs are available as a contractual add-on but not an automatic default — we communicate realistically instead of giving a 1-hour promise that breaks in everyday reality.

Is accessibility part of the process?

Yes — WCAG 2.2 AA is the baseline, not an add-on. Concretely:

  • Colour contrasts are checked per token — text on background ≥ 4.5:1, large text and UI elements ≥ 3:1
  • Focus states are planned from the first prototype onwards, not added later
  • Font sizes start at a minimum of 16px for body text — no ornamental micro-fonts
  • Navigation is keyboard-operable — tab order, skip links, visible focus rings
  • Forms have clear labels, error messages, and sufficiently large click targets (at least 44×44px on mobile)
  • Screen-reader compatibility is implemented in development via semantic HTML and ARIA attributes

For clients in the public sector or with explicit accessibility requirements (e.g. BFSG in Germany from 2025 or WZG in Austria) we additionally run a full accessibility audit before go-live. Distinction: we are not certified accessibility testing bodies. If you need formal certification we collaborate with partners that issue it.

How does it continue after launch?

After go-live, design work doesn’t end — it changes shape. Instead of project mode you move into ongoing CRO and iteration mode, typically on a monthly retainer.

What happens in this phase:

  • Real-user monitoring — we observe how actual users interact with the site (Hotjar, GA4, analytics events)
  • Hypothesis-driven iterations — every design change is tied to a measurable hypothesis, not gut feel
  • A/B tests for conversion-critical areas (checkout, product pages, forms, hero)
  • New landing pages for campaigns, product launches, or SEO strategies — on top of the existing design system
  • Extensions to the design system when new components are needed repeatedly

The advantage of the existing design system: new pages emerge in days rather than weeks, because components, tokens, and behaviour rules already exist. Iterations become cheaper and faster the longer you work with the system. On business days we respond to design requests within 24 hours by default.

Related services.

All services
WEB & SOFTWARE

Web development

E-Commerce · Shopify

Shopify agency

WEB & SOFTWARE

WordPress agency

BRAND & MARKETING

Brand concepts

Sounds like a match?

Request a free consultation
Get in touch