ENOR Technologies

ECOMMERCE WEB DESIGN

Gut präsentierte Produkte.Ein klarer Weg zum Kauf.

Bei ENOR gestalten wir Onlineshops, die Ihre Markenidentität mit einem verständlichen Einkaufserlebnis verbinden. Vom Stöbern im Katalog bis zur Bestellübersicht hilft jeder Screen beim Auswählen und Weitergehen.

Shop-Design besprechenEinkaufserlebnis entdecken
Atelier Linea · ShopIllustratives Konzept

Wohnzimmer / Sofas / Sofa Sera

Sofa Sera

890 €

Farbe: Grau

GrauSandOliv

Größe

2-Sitzer3-Sitzer

Lieferbar · Zustellung in 3–5 Werktagen

In den Warenkorb
  • Katalog und Produkte
  • Warenkorb und Checkout
  • Responsive Screens

EINLEITUNG

Kunden müssen das Produkt verstehen, bevor sie entscheiden.

Fotos wecken Aufmerksamkeit, doch die Wahl braucht auch klare Informationen. Preis, Varianten, Verfügbarkeit und Kaufbedingungen müssen geordnet dargestellt werden.

Bei ENOR gestalten wir das Zusammenspiel dieser Elemente. Wir schaffen eine einheitliche visuelle Sprache und einen Ablauf, der beim Entdecken, Vergleichen und Abschließen des Kaufs hilft.

Diese Leistung liefert Design und Prototyp. Programmierung, Shop-Konfiguration, Zahlungs- und Lagerintegrationen, Veröffentlichung und Wartung gehören zur eCommerce-Plattformentwicklung.

LEISTUNGSUMFANG

Design für jede Phase des Einkaufs.

Umfang und Anzahl der Screens werden im Angebot festgelegt.

  1. 01

    Shop-Struktur

    Kategorien, Navigation und Inhaltshierarchie.

    Ergebnis: Kategorienplan und Menü

  2. 02

    Katalog

    Produktlisten, Karten, Filter und Sortierung.

    Ergebnis: Katalog-Screens mit Zuständen

  3. 03

    Produktseite

    Fotos, Varianten und Informationen für die Entscheidung.

    Ergebnis: Produkt-Template mit Varianten

  4. 04

    Warenkorb und Checkout

    Übersicht, Schritte und klare Zustände.

    Ergebnis: Der vollständige Ablauf bis zur Bestätigung

  5. 05

    Mobiles Erlebnis

    Angepasste Layouts und Interaktionen.

    Ergebnis: Mobile Screens für den Hauptablauf

  6. 06

    Prototyp und Übergabe

    Verknüpfte Screens und Unterlagen für die Umsetzung.

    Ergebnis: Prototyp und geordnete Dateien

STRUKTUR UND NAVIGATION

Helfen Sie Kunden, die richtige Kategorie zu finden.

Wir ordnen Kategorien mit Namen, die zur Suchweise der Kunden passen – ohne unnötige Navigationsebenen.

  • Kategorienstruktur
  • Unterkategorien
  • Menü
  • Mega-Menü bei Bedarf
  • Breadcrumb
  • Suche
  • Kollektionen
  • Links zu Hilfeinhalten
Illustratives Konzept
Atelier Linea · Shop

Sitzen

  • Sofas
  • Sessel
  • Hocker

Aufbewahrung

  • Regale
  • Sideboards

Herbstkollektion

Breadcrumb: Start / Wohnzimmer / Sofas

Hilfeinhalte: Größenberater · Materialpflege · Versand und Rückgabe

Wechseln Sie Kategorien und die mobile Ansicht: dieselbe Struktur, an den Bildschirm angepasst.

KATALOG, SUCHE UND FILTER

Ein Katalog, der sich leicht erkunden lässt.

Wir gestalten Produktkarten, Filter und Sortierung je Kategorie sowie die Zustände, wenn Ergebnisse fehlen oder laden.

Illustratives Konzept

4 Produkte

  • Sofa Sera

    3-Sitzer · Stoff

    890 €

  • Bürostuhl Flex

    Netz · Rollen

    249 €

    Neu

  • Schreibtisch Riva

    Eiche · 140 cm

    340 €

  • Regal Modul

    Metall · 5 Böden

    179 €

Kategorie wechseln, Filter wählen und die Katalog-Zustände ausprobieren.

  • Produktkarten
  • Fotos
  • Name und Preis
  • Sichtbare Varianten, wenn sinnvoll
  • Statuslabels
  • Filter und Sortierung
  • Aktive Filter
  • Auswahl zurücksetzen
  • Anzahl der Ergebnisse
  • Zustand ohne Ergebnisse

Zustände, die wir unterscheiden

  1. 01Suche ohne ErgebnisseVorschläge und ein Weg weiter.
  2. 02Leere KategorieErklärung und Links zu anderen Kollektionen.
  3. 03LadefehlerMeldung und Aktion zum erneuten Versuch.
  4. 04Ergebnisse werden aktualisiertEin Hinweis, der die Seite nicht verschiebt.

Filter ändern sich je Kategorie: Möbel und Leuchten sucht man nicht nach denselben Kriterien. Suchfunktionen werden hier gestaltet, nicht als Teil dieser Leistung programmiert.

PRODUKTSEITE

Die nötigen Informationen in der richtigen Reihenfolge.

Fotos, Preis, Varianten und Kaufbedingungen stehen dort, wo Kunden sie bei der Entscheidung suchen.

  • Fotos
  • Galerie
  • Name
  • Preis
  • Varianten
  • Menge
  • Verfügbarkeit
  • Beschreibung
  • Spezifikationen
  • Maße
  • Versand
  • Rückgabe
  • CTA

Für Produkte mit Varianten

  • Wir zeigen, was gewählt ist
  • Wir kennzeichnen nicht verfügbare Varianten
  • Wir gestalten den Zustand bei fehlender Auswahl
  • Wir halten den Preis je Variante klar

Bewertungen und Rezensionen erscheinen nur, wenn es sie wirklich gibt. Wir erfinden keine Sterne, Rezensionen oder Käuferzahlen.

Wohnzimmer / Sofas / Sofa SeraIllustratives Konzept
Sofa Sera in Grau, Vorderansicht

Sofa Sera

ab 720 €

Farbe: Grau

Größe

Menge1

Lieferbar · Zustellung in 3–5 Werktagen

Beschreibung

Sofa mit abnehmbaren Kissen und Holzfüßen.

Maße

2-Sitzer: 180 × 90 cm · 3-Sitzer: 220 × 90 cm

Versand

Die Kosten werden im Checkout nach Adresse berechnet.

Rückgabe

Die Rückgabebedingungen stehen hier, vor dem Kauf.

Wählen Sie die Farbe „Oliv“: Die 3-Sitzer-Größe ist nicht lieferbar. Ohne Größe hinzufügen, um die Meldung zu sehen.

WARENKORB

Eine Übersicht, die sich vor dem Bezahlen prüfen lässt.

Kunden sollen sehen, was sie gewählt haben, Mengen ändern und verstehen, welche Kosten noch berechnet werden.

  • Produkte und Varianten
  • Menge ändern
  • Produkt entfernen
  • Preise und Rabatte
  • Gutschein
  • Bekannter oder geschätzter Versand
  • Summe
  • Weiter einkaufen
  • Zur Kasse

Gestaltete Zustände

  • Leerer Warenkorb
  • Menge nicht verfügbar
  • Produkt nicht mehr erhältlich
  • Ungültiger Gutschein
  • Preisänderung

Wir zeigen keine Endsumme, wenn später Gebühren hinzukommen; wir kennzeichnen sie als geschätzte Summe.

Warenkorb
Illustratives Konzept

  • Sofa Sera

    3-Sitzer · Grau

    1890 €

  • Tischleuchte Nora

    Creme

    2118 €

Testcode: LINEA10

Zwischensumme
1.008 €
Versand
Wird mit der Adresse berechnet
Geschätzte Summe
1.008 €

Mengen ändern, ein Produkt entfernen oder den Gutschein LINEA10 und einen anderen Code testen.

CHECKOUT

Verständliche Schritte bis zur Bestätigung.

Wir gestalten die Schritte nach dem Modell des Shops und jeden Zustand nach dem Absenden, von der Verarbeitung bis zur Bestätigung.

CheckoutIllustratives Konzept
  1. 1Kontakt
  2. 2Adresse
  3. 3Versand
  4. 4Zahlung
  5. 5Übersicht

Für den Kauf ist kein Konto nötig.

4 Ziffern, z. B. 1001

Zahlungsart

  • Karte
  • Nachnahme

Zustand nach dem Absenden

Wählen Sie einen Zustand, um zu sehen, wie er kommuniziert wird.

Demo-Zustand; es wird keine Zahlung ausgeführt.

Ungültige Postleitzahl eingeben und das Feld verlassen; dann die Zustände nach dem Absenden wählen.

  • Kauf als Gast
  • Anmeldung
  • Kontaktdaten
  • Adresse
  • Versand
  • Zahlungsart
  • Übersicht
  • Bestätigung

Details und Zustände

  • Klare Beschriftungen
  • Notwendige Felder
  • Erklärungen
  • Fehlermeldungen
  • Zurück zur Korrektur
  • In Bearbeitung
  • Zahlung fehlgeschlagen
  • Ergebnis ausstehend
  • Bestellung bestätigt

Wir erzwingen keine Registrierung ohne geschäftlichen Grund und gestalten keine vorausgewählten Kästchen für kostenpflichtige Extras.

Zahlungszeichen und Logos zeigen nur die Methoden, die tatsächlich unterstützt werden.

MOBILES ERLEBNIS

Einkaufen, gestaltet für das Smartphone.

Wir verkleinern keinen Desktop-Screenshot. Menü, Filter, Galerie, Varianten und Formulare gestalten wir für Touch und die Bildschirmtastatur.

  • Menü
  • Suche
  • Filter
  • Galerie
  • Varianten
  • Menge
  • Warenkorb
  • Formulare
  • CTA
  • Bildschirmtastatur

Für fixierte Buttons unten

  • Wir prüfen, ob sie nötig sind
  • Sie verdecken keine Inhalte
  • Sie behindern keine Felder oder Meldungen
Responsive Design ansehen

Filter

Art

TischBoden

Licht

WarmNeutral
2 Produkte anzeigen

Filter öffnen sich in einem Panel; der Button zeigt die Anzahl der Ergebnisse.

Wechseln Sie zwischen Filtern, Produktseite und Formular mit Tastatur.

KONTO UND NACH DEM KAUF

Das Erlebnis geht nach dem Absenden der Bestellung weiter.

Wir gestalten Bestätigung, Verlauf und Bestelldetails, in denen Bestellung, Zahlung, Vorbereitung und Versand jeweils einen eigenen Status haben.

  • Bestellbestätigung
  • Übersicht
  • Verlauf
  • Bestelldetails
  • Versandstatus
  • Dokumente
  • Adressen
  • Rücksendeanfrage
  • Kontakt zum Support

Wir gestalten keinen einzelnen Status, der alles vermischt. Es sind gestaltete Screens und Abläufe, keine umgesetzten Integrationen.

Illustratives Konzept

Bestellung AL-2048

  1. Bestellung

    Bestätigt

    Erfasst am 12. Oktober.

  2. Zahlung

    Abgeschlossen

    Karte · Rechnung bei den Dokumenten.

  3. Vorbereitung

    In Arbeit

    Verpackung im Lager.

  4. Versand

    Noch nicht gestartet

    Die Sendungsnummer erscheint beim Versand.

Gestaltete Screens und Abläufe; keine umgesetzten Integrationen.

Öffnen Sie „Details“ für die vier getrennten Status oder „Rückgabe“ für die Anfrage.

VERTRAUEN UND KLARHEIT

Vertrauen entsteht durch klare Informationen.

Wir platzieren die Informationen, die Kunden vor dem Kauf suchen, dort, wo sie gebraucht werden.

  • Identität des Unternehmens

    Wer verkauft und wo.

  • Kontakte

    Echte Wege, Fragen zu stellen.

  • Versand

    Kosten und Zeiten vor der Zahlung.

  • Rückgaberegeln

    Bedingungen ab der Produktseite sichtbar.

  • Bedingungen

    Lesbar und verlinkt.

  • Produktinformationen

    Maße, Materialien, Pflege.

  • Zahlungsarten

    Nur unterstützte.

  • Echte Bewertungen

    Nur wenn vorhanden.

Wir nutzen keine falschen Countdowns, erfundenen Lagerbestände, gefälschten Bewertungen oder nicht existierenden Gütesiegel.

Wir verstecken keine Gebühren und versprechen keine absolute Sicherheit.

VISUELLE IDENTITÄT

Ein Shop, der die Marke erkennbar hält.

Die Identität bleibt von der Startseite bis zum Checkout erhalten: Typografie, Farben, Fotos und Komponenten sprechen dieselbe Sprache.

  • Typografie
  • Farben
  • Fotostil
  • Bildformate
  • Abstände
  • Icons
  • Buttons
  • Karten
  • Produktlabels
  • Banner

Neues Logo, Brandbook und Produktfotografie sind eigene Leistungen, sofern nicht im Angebot enthalten.

Identität des ShopsIllustratives Konzept

Typografie

Aa

Überschrift 32/40 · Text 15/24

Palette

SandWaldOlivNuss

Produkt 4:5

Banner 16:7

Herbstkollektion
In den WarenkorbDetails ansehen
NeuLieferbarAuf Bestellung · 4 WochenSale

BARRIEREFREIHEIT UND SPRACHEN

Klarheit für unterschiedliche Nutzer und Inhalte.

Im Design berücksichtigen wir Kontrast, sichtbaren Fokus, Beschriftungen und Fehler, die in Text erklärt werden. Die Variantenwahl hängt nie nur von der Farbe ab, und die Währung ist auch in anderen Sprachen klar.

  • Kontrast
  • Sichtbarer Fokus
  • Beschriftungen
  • Fehler in Textform
  • Varianten nicht nur über Farbe
  • Touch-Flächen
  • Lange Texte
  • Verschiedene Sprachen
  • Klare Währung

Screens allein garantieren keine vollständige Barrierefreiheit. Umsetzung und abschließende Tests bleiben nötig.

KAUF-PROTOTYP

Bewerten Sie den Ablauf vor der Umsetzung.

Katalog → Produkt → Variante → Warenkorb → Checkout → Bestätigung, mit einem Szenario abgelehnter Zahlung, um die Korrektur zu sehen.

Prototyp · keine echten Zahlungen, Bestände oder Bestellungen

Atelier Linea · Shop0

Sofas und Aufbewahrung

Im Prototyp ist das erste Produkt verknüpft.

  1. Katalog
  2. Produkt
  3. Warenkorb
  4. Checkout
  5. Bestätigung

Der Prototyp simuliert das Erlebnis. Er führt keine Zahlungen aus, reserviert keinen Bestand und erstellt keine echten Bestellungen. Die Demo fragt keine persönlichen oder Kartendaten ab.

DESIGN FÜR EINE BESTEHENDE PLATTFORM

Screens, angepasst an die Grenzen Ihrer Plattform.

Läuft der Shop auf einer bestehenden Plattform, klärt die Analyse, was sich anpassen lässt und wo das Design ihren Grenzen folgen muss.

In der Analyse legen wir fest

  • Die bestehende Plattform
  • Das Template oder Komponentensystem
  • Einschränkungen im Checkout
  • Anpassungsmöglichkeiten
  • Anforderungen des Umsetzungsteams

Nicht jedes Design lässt sich auf jeder Plattform ohne Einschränkungen umsetzen. Plattformnamen wie Shopify oder WooCommerce nennen wir nur als geprüften Kontext, nicht als Partnerschaften von ENOR.

Grenzenanalyse · illustrative PlattformIllustratives Konzept
BereichAnpassungHinweis
StartseiteVollständigAbschnitte und Banner nach Design.
Katalog und FilterTeilweiseFilter hängen von den Plattform-Attributen ab.
ProduktseiteVollständigAnpassbares Template für Varianten.
CheckoutBegrenztDie Schritte gibt die Plattform vor; die Optik wird angepasst.
KontoTeilweiseBasisseiten; manche Aktionen über Erweiterungen.

ABLAUF

Vom Katalogzu einem gestalteten Einkaufserlebnis.

Anzahl der Screens und Feedbackrunden wird im Angebot festgelegt.

01

Briefing

Wir verstehen Produkte, Kunden, Marke und Plattform.

02

Struktur

Wir ordnen Kategorien und Hauptabläufe.

03

Wireframes

Wir legen die Hierarchie von Katalog, Produkt und Checkout fest.

04

UI-Design

Wir gestalten Screens und Komponenten.

05

Responsive und Prototyp

Wir passen das Erlebnis an und verknüpfen die wichtigsten Interaktionen.

06

Prüfung

Wir verbessern nach Feedback und vereinbarter Bewertung.

07

Übergabe

Wir bereiten Dateien und Hinweise für die Umsetzung auf.

Welcher Teil des Kaufs braucht Klarheit?

Shop besprechen
Eine Prüfung gegen das Design nach der Umsetzung kann separat angeboten werden.

LIEFERUNGEN

Ein geordnetes Projekt für das Entwicklungsteam.

Wie vereinbart liefern wir die Unterlagen, die das Team braucht, um den Shop nach dem Design zu bauen.

  • Quelldatei
  • Freigegebene Screens
  • Mobile und Desktop-Varianten
  • Komponenten
  • Interaktionszustände
  • Prototyp
  • Assets
  • Hinweise zum Verhalten
  • Punkte für technische Entscheidungen

Drei verschiedene Dinge

  1. 01Das DesignScreens, Komponenten und Regeln.
  2. 02Der PrototypSimulation des Ablaufs, ohne echte Funktionen.
  3. 03Der funktionierende ShopErgebnis der Entwicklung, nicht dieser Leistung.

Programmierung, Konfiguration, Integrationen und Veröffentlichung sind nicht automatisch enthalten.

Übergabe · Atelier Linea ShopIllustratives Konzept

Quelldatei

  • 01 Kategorien und Navigation
  • 02 Katalog und Filter
  • 03 Produktseite
  • 04 Warenkorb und Checkout
  • 05 Konto und nach dem Kauf
  • 06 Komponenten und Prototyp

Exportmaterialien

  • SVG-Icons
  • Produktbilder 4:5
  • Schriften gemäß Lizenz

Punkte für technische Entscheidungen

  • — Filterattribute je Kategorie.
  • — Zahlungsmeldungen je gewähltem Anbieter.
  • — Wie weit sich der Checkout auf der Plattform anpassen lässt.

WARUM ENOR

Design, das dem Produkt Raum und dem Kauf Klarheit gibt.

Unser Portfolio zeigt die tatsächliche Rolle von ENOR in jedem Projekt.

  1. 01Struktur nach dem Katalog
  2. 02Einheitliche visuelle Identität
  3. 03Aufmerksamkeit für Mobile
  4. 04Gestaltete Zustände und Ausnahmen
  5. 05Feedback mit Freigabepunkten
  6. 06Geordnete Übergabe

HÄUFIGE FRAGEN

Häufige Fragen.

Weitere Leistungen

Weitere Lösungen für die Anforderungen Ihres Unternehmens.

Gestalten wir den Kauf rund um Ihre Kunden.

Erzählen Sie uns von Produkten, Marke und der Plattform, die Sie nutzen oder planen. Wir legen fest, welche Screens und Abläufe gestaltet werden.

Z. B. Produktart, Anzahl der Kategorien, Plattform und die Teile des Kaufs, die Sie verbessern möchten.

Was unsere Kunden sagen

5.0
A
Arben Hoxha, CEO

Logistikunternehmen (Beispiel)

“Sie übersetzen komplexe technische Konzepte in klare Entscheidungen für unser Team.”