Webdesign: Produktinformationen, Beispiele und Kosten

Viele Produktmarken haben eine Website, die aussieht wie ein Prospekt: ein großes Bild, ein Text über das Unternehmen, eine Liste der Produkte. Das ist nicht falsch, verschenkt aber, was eine Website für eine Produktmarke leisten kann. Im Laden kann man ein Produkt anfassen, drehen, riechen. Online muss die Website diese Rolle übernehmen.

Webdesign für Produktmarken muss Produktinformation und Bedienung zusammenführen. Eine Seite kann verkaufen, erklären oder eine Anfrage vorbereiten. Diese Aufgabe bestimmt die Struktur, die Medien und die Abnahme des Projekts.

Was ist Webdesign? Einfach erklärt

Webdesign ist die Gestaltung von Websites: Aufbau, Layout, Typografie, Farben, Bilder und die Führung der Besucher durch die Inhalte. Im weiteren Sinn gehört auch die Planung dazu, welche Seiten es gibt und in welcher Reihenfolge Informationen erscheinen. Die technische Umsetzung, also das Programmieren, heißt Webentwicklung. Bei vielen Projekten, auch bei unseren, kommen beide aus einer Hand.

	Webdesign	Webentwicklung
Frage	Wie sieht die Website aus, wie führt sie?	Wie funktioniert sie technisch?
Ergebnis	Seitenstruktur, Entwürfe, Designsystem	Code, Anbindung an Shop oder Formular, Ladezeit
Typische Werkzeuge	Entwurfsprogramme, Prototypen	Programmiersprachen, Frameworks, Server

Was ist gutes Webdesign?

Gutes Webdesign erkennt man weniger an einem bestimmten Stil als an seiner Wirkung. Ein paar Prüffragen, die für jede Website gelten:

• Versteht man in wenigen Sekunden, worum es geht? Die erste Ansicht sollte Angebot und nächsten Schritt zeigen.

• Funktioniert sie auf dem Smartphone? Responsive Webdesign bedeutet, dass sich das Layout an jede Bildschirmgröße anpasst, nicht nur verkleinert.

• Ist sie schnell? Große Bilder und unnötige Skripte machen Seiten langsam.

• Ist sie lesbar? Ausreichend große Schrift, genug Kontrast, kurze Absätze.

• Ist sie zugänglich? Barrierefreies Webdesign berücksichtigt Menschen, die mit Tastatur, Screenreader oder Vergrößerung arbeiten.

• Passt sie zur Marke? Eine Website, die auch zu jedem anderen Unternehmen passen würde, verschenkt Wiedererkennung.

Für Produktmarken kommt eine weitere Frage hinzu: Zeigt die Website das Produkt so, dass man es haben möchte?

Responsive Webdesign für Produktinformationen

Responsive Webdesign passt die Darstellung an unterschiedliche verfügbare Breiten an. Für Produktmarken empfehlen wir, dies mit konkreten Inhalten zu prüfen: lange Produktnamen, Variantenlisten, Tabellen und Kontaktformulare. Eine Startseite allein zeigt noch nicht, ob die Produktinformation auf kleinen Bildschirmen verständlich bleibt.

Legen Sie für die Abnahme Aufgaben fest. Ein Besucher soll eine Variante unterscheiden, die zugehörige Information finden und den nächsten Schritt erreichen können. Prüfen Sie diese Aufgaben auch bei vergrößerter Schrift und ohne präzise Mausbewegung. Die Beurteilung des Website-Designs erhält damit eine nachvollziehbare Grundlage.

Produkt statt Unternehmen

Eine Firmenwebsite erzählt, wer das Unternehmen ist. Eine Website für eine Produktmarke erzählt, warum dieses Produkt anders ist. Das verschiebt den Schwerpunkt:

Prospekt-Website	Website als Teil der Marke
„Über uns“ an erster Stelle	das Produkt an erster Stelle
Produktfotos freigestellt auf Weiß	Produkte im Einsatz, im Detail, in Bewegung
Gestaltung nach Vorlage	Gestaltung aus demselben System wie die Verpackung
Kontakt als letzter Punkt	klarer Weg zum Kauf oder zum Händler

Produktinformation vor Inszenierung ordnen

Für einen Produktbrief empfehlen wir Bezeichnung, Varianten, relevante Eigenschaften und nächste Handlung. Die Angaben müssen zur tatsächlichen Produktquelle passen. Unterschiedliche Sorten werden aus einem gemeinsamen Datenmodell abgeleitet.

Chimbá dokumentiert Kaffee aus sechs Ländern, Dosen mit 350 Gramm und eine Box für drei Dosen. Das sind konkrete Produktinformationen, die auch ohne eine dekorative Animation verständlich bleiben müssen.

Ein Auftritt aus einem Guss

Kunden sehen eine Marke an vielen Stellen: im Regal, im Feed, im Netz. Wenn Verpackung, Instagram und Website unterschiedlich aussehen, wirkt die Marke kleiner, als sie ist. Die Website sollte deshalb aus demselben System entstehen wie die Verpackung: dieselben Farben, dieselbe Schrift, dieselbe Bildsprache.

Bei Posh Stink, einem Londoner Parfümhaus, hat jeder der vier Düfte eine eigene Jahreszeit und Farbe. Die Website übernimmt diese Regel: Wer einen Duft öffnet, sieht dessen Farbe, auf der Produktseite genauso wie auf dem Flakon.

Bewegung, wo sie hilft

Bewegung kann ein Produkt zeigen, wie es kein Foto kann: eine Verpackung, die sich öffnet, ein Produkt, das sich dreht, ein Übergang, der zwei Sorten verbindet. Wichtig ist, dass Bewegung eine Aufgabe hat. Animation als Selbstzweck lenkt ab und kostet Ladezeit.

Gut umgesetzte Animationen laden Inhalte bei Bedarf und berücksichtigen die Leistung von Smartphones. Wann sich Bewegung lohnt, beschreibt die Seite Motion Design.

Bewegung an der Kommunikationsaufgabe prüfen

Posh Stink dokumentiert eine WebGL-Website mit vier Duftabschnitten und zugeordneten Farbwelten. Pucca Diana dokumentiert dagegen einen horizontalen Desktop-Einstieg und vertikales Scrollen auf dem Telefon. Für ein neues Projekt empfehlen wir eine lesbare Fassung ohne dekorative Bewegung und eine getrennte mobile Abnahme. Eine aufwendige Inszenierung wird nicht allein deshalb übernommen, weil sie bei einem anderen Produkt dokumentiert ist. Die konkrete Leistungsfähigkeit braucht einen tatsächlichen Messbericht.

Kurzer Weg zum Kauf

Eine Produktmarke verkauft auf einem von drei Wegen, und die Website muss dazu passen:

• Direkt: über einen eigenen Shop, meist mit Shopify oder WooCommerce.

• Über Händler: die Website zeigt die Marke und führt zu den Händlern.

• Über Anfragen: bei individuellen Produkten, etwa mit einem Produktkonfigurator, der Auswahl und Preis sofort zeigt.

Egal welcher Weg: Er sollte von jeder Produktseite aus mit einem Klick erreichbar sein.

Schnell und gut auffindbar

Eine Website für eine Produktmarke hat oft viele Bilder. Umso wichtiger ist, dass sie schnell lädt: Bilder in modernen Formaten, nur so groß wie nötig, und eine Technik, die Seiten statisch ausliefert. Eigene Seiten mit klarem Text können Produktlinien für Google und KI-Assistenten verständlicher machen.

Inhalte und Pflege mitplanen

Chimbá dokumentiert zwölf Ratgeber auf Spanisch und Englisch. Pucca dokumentiert 75 Seiten in zwei Sprachen. Diese Umfänge zeigen den Bedarf an einer klaren Inhaltsstruktur. Für die Übergabe empfehlen wir Datenquelle, zuständige Person und Aktualisierungsablauf je Inhaltstyp. Ein Projekt mit vielen Seiten ist kein Beleg dafür, dass jede neue Produktmarke denselben Umfang benötigt.

Webdesign-Beispiele aus unserer Arbeit

Marke	Aufgabe	Lösung
Posh Stink	vier Düfte eines Londoner Parfümhauses zeigen	jede Jahreszeit mit eigener Farbe; Flakons und Texte als Partikel, die sich beim Scrollen neu zusammensetzen; Warteliste statt Shop
Chimbá	südamerikanische Kaffeemarke ins Netz tragen	Website aus demselben System wie Verpackung und Instagram
The Cargo Brothers	Anfragen für Fahrzeugtransporte	Preisrechner direkt auf der Website, der Land, Fahrzeugtyp und Strecke in ein Angebot übersetzt

Drei sehr unterschiedliche Websites, ein gemeinsamer Ansatz: Die Website ist kein Anhang der Marke, sondern einer ihrer wichtigsten Auftritte.

Drei unterschiedliche Website-Aufgaben

Projekt	Dokumentierte Aufgabe	Gestalterische Konsequenz für die Aufgabenbeschreibung
Chimbá	Zweisprachiger Kaffee-Shop und zwölf Ratgeber	Sortiment und Erklärinhalte getrennt strukturieren
Posh Stink	Vier Düfte und Warteliste	Kollektion und Anmeldung nachvollziehbar verbinden
Cargo Brothers	Individueller Preisrechner	Eingaben, Regeln und Angebotsausgabe definieren

Die Tabelle vergleicht bestätigte Liefergegenstände. Sie belegt keine pauschale Umsatzsteigerung durch eine bestimmte Gestaltung.

So läuft ein Webdesign-Projekt ab

• Ziel klären. Verkaufen, Händler finden, Anfragen gewinnen oder die Marke zeigen? Davon hängt die ganze Struktur ab.

• Seitenstruktur planen. Welche Seiten braucht es, welche Inhalte stehen wo, welche Wege führen zum Ziel?

• Inhalte sammeln. Texte, Produktfotos, Videos. Fehlende Inhalte sind einer der häufigsten Gründe, warum Projekte stocken.

• Gestaltung. Zuerst die Startseite und eine typische Produktseite, dann die übrigen Vorlagen.

• Umsetzung. Programmierung, Anbindung an Shop oder Formular, Optimierung der Ladezeit.

• Prüfung und Start. Test auf verschiedenen Geräten, Weiterleitungen alter Adressen, Anmeldung bei Google.

Technische Abnahme mit realen Aufgaben

Als Abnahmeplan empfehlen wir Produkt finden, Variante verstehen, Kontakt oder Warenkorb erreichen und eine fehlerhafte Eingabe korrigieren. Bei einem Rechner wird das Ergebnis gegen die fachliche Regel geprüft. Alle Schritte erhalten URL, Gerät und Datum.

Google, technische Anforderungen, beschreibt Grundlagen der Suchzugänglichkeit. Für die tatsächliche Nutzerleistung ist Web Vitals die Messreferenz. Ein Portfolio-Text ersetzt keinen aktuellen Bericht für die betreffende URL.

Webdesign-Agentur, Freelancer oder Baukasten?

Weg	Geeignet für	Grenzen
Baukasten (z. B. Wix, Squarespace, Jimdo)	einfacher Auftritt, kleines Budget, schneller Start	Gestaltung nah an der Vorlage, Grenzen bei Bewegung und individuellen Funktionen
Freelancer	klar umrissene Website, persönliche Betreuung	Umfang hängt von einer Person ab
Designstudio	Website als Teil eines Markensystems, Animation, Konfigurator, mehrere Sprachen	höherer Preis

Eine ausführliche Abwägung steht im Artikel Baukasten oder individuelle Website?.

Was eine solche Website kostet

Umfang	Preis
Starter-Website, wenige Produkte	ab 2.500 € netto
Business-Website mit Produktlinien und Blog	ab 7.500 € netto
Premium-Website mit viel Bewegung und Interaktion	ab 15.000 € netto

Mehr dazu steht auf der Seite Webdesign. Was eine Website insgesamt kostet, zeigt der Artikel Was kostet eine Website?.

Kosten anhand des tatsächlichen Auftrags

Alkeme Design bietet Website-Einstiege ab 2.500 €, ab 7.500 € und ab 15.000 € netto an. Der allgemeine Website-Rahmen ist 2.500–25.000 € netto. Bei Alkeme Design gelten keine pauschalen Seiten-, Sprach- oder Korrekturlimits je Paket. Für den Vergleich empfehlen wir deshalb eine konkrete Lieferliste aus Inhalt, Funktionen, Medien, Tests und Übergabe. Hosting und Pflege werden im jeweiligen Angebot benannt. Die Auswahl der Technik behandelt Baukasten oder individuelle Website.