Web design process: From concept to screen design

From strategy to screen design

In the first part of this series, we explained how to develop a solid website concept: goals, target audiences, key messages and functionality. This post picks up exactly where that left off. Screen design is not a matter of taste, but the visual translation of your strategy into an interface that wins over customers and partners.

We are a Cologne-based web design agency working with medium-sized businesses. What you read here is our approach, shaped by over a decade of projects, not a generic textbook process.

What informs the design?

Good screen design never happens by chance. It draws on two sources: the strategy from step 1 and the client's corporate identity, defined through corporate design. Together, they provide the framework within which we design.

Which software: WordPress, Webflow, Lovable, Figma?

The most common question at this stage: which platform are we building on? WordPress, Webflow, Lovable, a custom system? A hand-drawn sketch, a Figma file, static screens or an AI prototype?

Our answer may be uncomfortable, but it is honest: During the design phase, it does not matter.

A design must do three things:

1. It must convert – in other words, achieve the goals defined in the concept.
2. It must fit the company – its brand, customers, employees and management.
3. It must impress customers and partners – without being intrusive.

Whether we develop the design with pen and paper, in Figma, as a static image presentation or as an interactive AI prototype changes none of this. Platform selection belongs in the development phase, not the design phase. Web design tech stack: Webflow, WordPress, Lovable compares which systems make sense when.

Form follows function – every design decision needs a reason

“Looks good" is not a justification. Every element on a page must answer a question raised during the concept phase. Why is this button here and not three lines further down? Why this headline and not the alternative? Why a video rather than an image?

We work to a simple principle: for every design decision, we note the underlying question about goals from the concept. If there is no connection, the element is removed. This prevents overdesign and makes feedback rounds objective, because we discuss goals rather than taste.

Interactive clickable prototypes instead of static screens

Static screens are a compromise from a time when interactive prototypes were too expensive. Our experience across many client projects shows that people who do not work with design or web development every day find it difficult to assess an interface from still images. Animation notes get overlooked, responsive behaviour needs explaining, and interaction logic is abstract on paper.

Thanks to advances in generative AI, we now build interactive clickable prototypes during the design phase. The client experiences the site, clicks through it, gets a feel for its rhythm and checks the transitions. An image cannot show how a design really works – that only becomes clear through the interplay of movement, response and speed.

The second benefit is financial: the transition from design to development becomes shorter. Some elements, interactions and components from the clickable prototype can be carried directly into the final build, rather than being built a second time.

The Maluure principle of care

A website cannot afford mistakes. That sounds harsh, but it is psychology. Users associate the quality of a website with the quality of the service behind it – even when there is no factual connection.

In a study involving 2.684 participants, Stanford researchers showed that users most frequently cited the “design look" when assessing a website's credibility – more often than its content, operator or references.^[1] And Lindgaard et al. demonstrated that this judgement forms after just 50 milliseconds.^[2] From that point on, your customer filters everything else through this first impression.

In practical terms, this means that text sitting unprofessionally close to an edge, an image with a poorly removed background or a headline that wraps on mobile all become psychologically linked to your service. Even if the work you actually deliver is excellent.

For the website for Schwaben Aesthetic and Dr. Mathew Muringaseril, this principle was decisive. As an aesthetic surgeon, the client depends on conveying one thing: absolute precision. Any inconsistent spacing or overly soft edge would have undermined that standard. Every tile, every typographic detail and every image frame therefore had to be exact. To a lesser degree, the same applies to every serious client project.

Our design expertise in Cologne

Design is a craft. Craft requires experience. We work with an in-house design team whose combined professional experience spans several decades – from corporate design and editorial to interfaces and motion.

For specialist disciplines such as 3D, illustration or custom typography, we work with a network of selected freelancers with whom we have shared established processes for years. You still have a single point of contact: we handle project management, quality assurance and responsibility for the final result.

• In-house team for concepts, screen design, interfaces and motion
• Established freelance partners for 3D, illustration, typography and specialist work
• One point of contact, one project management team, one accountable partner
• Based in Cologne, working across Germany remotely and on site

What does screen design cost at a web design agency?

The honest answer: it depends. At reputable agencies in Germany, screen design prices for a medium-sized company's website range from around 4.000 to 20.000 Euro excluding VAT. There are concrete reasons for this range – it is not arbitrary.

The main factors:

• Number of templates. A homepage plus five subpage layouts involves a different amount of work from 15 individually designed content types.
• Maturity of the corporate identity. A well-defined corporate identity with colours, typography and imagery saves days. If it is missing, it needs to be included in the scope or handled as a preliminary project.
• Interactivity and motion. A static layout costs less than an interactive clickable prototype with micro-interactions, scroll effects and responsive behaviour.
• Number of approval cycles. Two feedback rounds are standard; five push up the price. Clear decision-making processes on the client side noticeably reduce costs.
• Custom design vs. pre-built templates. Bespoke screen design costs more than a theme refresh – but it also differentiates you in the market.

At Maluure, we price screen design transparently based on the work involved and document every line item. As a Cologne-based web design agency, we offer fixed-price packages for medium-sized businesses, without location-based mark-ups or corporate overheads.

How long does the design phase take?

For a medium-sized company's website, we allow three to six weeks from the initial design to the approved clickable prototype. Shorter timelines are possible with a limited scope; longer ones are almost always caused by client-side approval cycles rather than design work.

A typical process:

1. Week 1: Moodboards and design direction. The concept and corporate identity inform two to three visual directions. The client selects one.
2. Week 2–3: Screen design for the core templates. Homepage, main landing page, product or service page, contact page.
3. Week 3–4: Clickable prototype. Connections, interactions, responsive states. Presentation and feedback round.
4. Week 4–6: Refinements. Second feedback round, detailed adjustments, final approval.

Three factors determine the actual duration: how quickly feedback arrives, whether one person or a committee makes decisions, and how well the concept from step 1 has been developed. In our experience, a solid concept saves one to two weeks during the design phase.

What comes next

We only move into development once the screen design is complete, client feedback has been incorporated into the clickable prototype and all details have been resolved. How we approach that stage – platform selection, code quality, performance, SEO foundations and the launch process – is the subject of the third part of this series.

Related reading

• Commissioning a website – prices 2026 (with calculator): Calculate a transparent price range for screen design.
• Service: Branding: Establish your brand and design system as the foundation before screen design.
• Service: Print: Translate screen design consistently into printed formats.