Logo Codebridge
UI/UX

Wie man Gewöhnliches im Webdesign außergewöhnlich macht (Teil 2)

Ananga Thapaliya
August 8, 2022
|
3
min. Lesezeit
Teilen
Text
Link copied icon
inhaltsverzeichnis
Headshot of Myroslav Budzanivskyi, Co-founder and CTO of Codebridge.
Myroslav Budzanivskyi
Mitbegründer und CTO

Holen Sie sich Ihre Projektschätzungen!

Wie wir bereits in einem früheren Artikel erwähnt haben — alles kann schön sein. Wir wollen diese Schönheit sehen und uns inspirieren lassen, um ein Webdesign mit einem magischen Touch zu kreieren.

Wie man Gewöhnliches im Webdesign außergewöhnlich macht (Teil 2)

Max Böcks Technicolor-Traum

Es gibt so viele spannende Dinge, die man mögen kann Max Böcks Webseite, aber jetzt möchten wir Ihre Aufmerksamkeit auf Farbschemata lenken. Die meisten Websites haben ein Farbschema.

Thema der Website

Hell und Dunkel sind die neue Normalität, aber wie Böck selbst in seinem Blogbeitrag über den Theme Switcher, nur Sith handeln mit Absoluten. Die Website wechselt mithilfe der magischen benutzerdefinierten CSS-Eigenschaften nahtlos zwischen den Farbschemata. Wir empfehlen, den oben verlinkten vollständigen Beitrag zu lesen, um eine vollständige Aufschlüsselung der Funktionsweise zu erhalten.

Es ist eine unterhaltsame Variante der traditionellen Hell-Dunkel-Dichotomie und zeigt, wie flüssig Websites heutzutage sein können. Dieselbe Grundlage könnte es dir ermöglichen, Farbschemata anzupassen, je nachdem, wo die Nutzer die Website besuchen, zum Beispiel.

Overpass verkauft Verkäufe

Der Vertrieb ist nicht gerade ein Sektor, der nach Innovation schreit, sondern Kredite, denen Anerkennung gebührt. Überführung Karussells springen und schrumpfen und dehnen sich so sanft aus, dass es sich fast so anfühlt, als würden Sie mit etwas Taktilem interagieren.

Overpass verkauft Verkäufe

Hier werden die CSS-Funktionen touch-action und translate3d () stark genutzt, sodass der Kartencontainer effektiv über den Bildschirm gezogen werden kann. Wenn der Container gepackt wird, bewegen sich alle Karten mithilfe der Skala (0,95) leicht zurück, bis der Benutzer loslässt. Das verleiht dem Karussell ein wunderbares Gefühl von Tiefe und Leichtigkeit.

Die Audioclips sind eine nette Geste. Die Multimedia-Integration war in diesen Beispielen ein roter Faden.

E-Commerce trifft Langform-Storytelling auf Mammut

Wir haben bereits erwähnt Storytelling im Design auf unserem Blog, und hier ist ein weiteres Beispiel für die Macht des Geschichtenerzählens.

Viele E-Commerce-Websites scheinen dies vergessen zu haben, und jede bietet Seite für Seite Hochglanzprodukte an, die vor einem perfekten weißen Hintergrund schweben.

Es ist dann erfrischend, eine Firma zu sehen wie Mammut setzt alles auf Geschichtenerzählen, um seine Wanderprodukte zu verkaufen. Ihre langen Expeditionsartikel sind so eindringlich wie der attraktivste Beitrag der New York Times, mit Audioclips, Karten und natürlich atemberaubenden Fotos. Die Ausrüstung von Mammut ist natürlich sehr umfangreich, aber sie ist geschmackvoll und authentisch gestaltet.

Mammut stellt die menschliche Erfahrung in den Mittelpunkt. Ja, sie wollen dir immer noch Sachen verkaufen, aber sie wollen auch die Abenteuer feiern, zu denen Dinge gehören können.

Storytelling im Design

Nicht jeder hat die Ressourcen für etwas so Modernstes, aber es zeigt, dass E-Commerce nicht steril und leblos sein muss.

Axeptio macht seine Kekse schmackhaft

Anstatt das Cookie-Popup wie einen üblen Geruch zu behandeln, bietet der Anbieter einer Web-Einwilligungslösung an Axeptio geht den Spaziergang, indem er sie stilvoll und ziemlich charmant aussehen lässt. Angesichts der Tatsache, dass über die DSGVO (und grundlegende Anstandsregeln) nachgedacht werden muss, ist es unerlässlich, ethisches Design in die Struktur einer Website einzubinden.

Axeptio ist ein gutes Beispiel für Datentransparenz. Keine Mauern von Rechtsjargon, kein nahezu unmögliches Opt-Out-System — nur genaue Informationen darüber, wofür die Daten verwendet werden.

Axeptio macht seine Kekse schmackhaft

Eine nette Sache ist, dass es erst erscheint, wenn die Benutzer anfangen, sich auf der Website zu bewegen. Beachten Sie, dass sie auch den Boilerplate-Cookie-Jargon zugunsten von etwas Konversativerem fallen gelassen haben.

Zugegeben, das macht das Alltägliche vielleicht nicht gerade „außergewöhnlich“, aber es macht es um einiges edler. Es ist eine leichte Berührung, die aber einen ausgezeichneten ersten Eindruck hinterlässt. Ohne meine Maus zu berühren, spüre ich bereits die Liebe zum Detail und das Engagement von Axeptio für Qualität.

Soweit Cookies und Pop-ups notwendig sind, können wir sie auch besitzen. Das Gleiche gilt für andere unsexy Klassiker des modernen Webs. Müssen Einverständniserklärungen, E-Mail-Anmeldungen und Datenschutzseiten hässlich und schwer fassbar sein, oder müssen wir etwas anders denken?

Quelle: https://www.smashingmagazine.com/

FAQ

What does “making ordinary extraordinary” mean in web design?

It means transforming standard layouts and familiar patterns into engaging experiences through thoughtful details, creativity, and user-centered enhancements without sacrificing usability.

Which design elements can elevate a simple website?

Subtle animations, refined typography, meaningful imagery, microinteractions, and consistent spacing can significantly enhance an otherwise simple design.

How do microinteractions make web design more engaging?

Microinteractions provide feedback and create moments of delight during user actions. They make interfaces feel responsive, polished, and more human.

Why is consistency important when enhancing web design?

Consistency ensures that creative elements don’t feel random or overwhelming. It helps maintain clarity and builds a cohesive visual and functional experience.

How can designers add personality without hurting usability?

Personality can be added through tone of voice, visual accents, and animation while keeping navigation and interactions intuitive and familiar.

How do designers know when enhancements are effective?

Effectiveness can be measured through usability testing, user feedback, engagement metrics, and conversion rates to ensure creativity supports user goals.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

UI/UX
Ananga Thapaliya
Bewerte diesen Artikel!
Danke! Deine Einreichung ist eingegangen!
Hoppla! Beim Absenden des Formulars ist etwas schief gelaufen.
56
Bewertungen, Durchschnitt
4.7
von 5
August 8, 2022
Teilen
Text
Link copied icon
AI Agent Monitoring Checklist: 9 Steps to Control Agent Behavior Before You Scale
July 7, 2026
|
15
min. Lesezeit

AI Agent Monitoring Checklist: 9 Steps to Control Agent Behavior Before You Scale

Use this AI agent monitoring checklist to control agent behavior, track tool use, set guardrails, measure quality, and decide when to scale, pause, or redesign.

by Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
Human Judgment in the Age of AI: What Companies Still Need People to Own
July 6, 2026
|
5
min. Lesezeit

Human Judgment in the Age of AI: What Companies Still Need People to Own

Artificial intelligence moves more work into agents, but accountability remains human. Learn how leaders should define judgment, escalation, quality, and decision rights.

by Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
Dialog-KI für den Kundenservice: Wo Chatbots enden und KI-Agenten beginnen
June 25, 2026
|
14
min. Lesezeit

Dialog-KI für den Kundenservice: Wo Chatbots enden und KI-Agenten beginnen

Konversations-KI, Chatbots und KI-Agenten sind nicht dasselbe. Erfahren Sie, wo jeder Bereich im Kundenservice seinen Platz hat und was ein System von der Reaktion zur Lösung bringt.

von Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
Kundenservice-KI-Agenten: Implementierung, Workflows, Leitplanken und ROI
June 24, 2026
|
18
min. Lesezeit

Kundenservice-KI-Agenten: Implementierung, Workflows, Leitplanken und ROI

KI-Agenten im Kundenservice können den Support entlasten, aber nur, wenn sie Workflows verstehen, Richtlinien einhalten, sicher eskalieren und ihren ROI nachweisen. Erfahren Sie, wie Sie diese implementieren, ohne das Kundenvertrauen zu gefährden.

von Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
Prompt-Management für Produktions-KI: Wie Sie Prompts versionieren, testen und steuern, bevor sie Ihren Workflow lahmlegen
June 22, 2026
|
14
min. Lesezeit

Prompt-Management für Produktions-KI: Wie Sie Prompts versionieren, testen und steuern, bevor sie Ihren Workflow lahmlegen

Prompt-Management ist das Release Management für KI-Verhalten. Erfahren Sie, wie Sie Produktions-Prompts versionieren, testen, bereitstellen, überwachen und zurückrollen, bevor sie Schaden anrichten.

von Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
AI Readiness Assessment Framework: 8 Layers That Decide Whether AI Can Survive Production
June 19, 2026
|
21
min. Lesezeit

AI Readiness Assessment Framework: 8 Layers That Decide Whether AI Can Survive Production

Most AI readiness frameworks stay too theoretical. Learn an 8-layer framework to assess one real workflow, ask better questions, find production gaps, and decide whether to build, pilot, fix first, or stop.

by Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
AI Readiness Assessment: How to Know Whether Your Workflow Is Ready for Production AI
June 18, 2026
|
18
min. Lesezeit

AI Readiness Assessment: How to Know Whether Your Workflow Is Ready for Production AI

AI projects fail when workflows, data, systems, and ownership are not ready. Learn what an AI readiness assessment is, why companies need one, and how to evaluate governance, security, and systems before deploying AI.

by Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
Codebridge auf ausgewählter Branchenliste der Top-Unternehmen für KI-Agenten-Entwicklung 2026, in Anerkennung architekturzentriertem Engineering und produktionsreifer Governance
June 17, 2026
|
3
min. Lesezeit

Codebridge auf ausgewählter Branchenliste der Top-Unternehmen für KI-Agenten-Entwicklung 2026, in Anerkennung architekturzentriertem Engineering und produktionsreifer Governance

Codebridge wurde von Techreviewer im Jahr 2026 zu den Top-Unternehmen für die Entwicklung von KI-Agenten gezählt, dank seines architekturorientierten Engineerings und seiner produktionsreifen Governance.

von Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
KI-Bereitschafts-Checkliste für 2026: 40 Fragen, bevor KI Ihre Arbeitsabläufe beeinflusst
June 17, 2026
|
12
min. Lesezeit

KI-Bereitschafts-Checkliste für 2026: 40 Fragen, bevor KI Ihre Arbeitsabläufe beeinflusst

KI kann auch ineffiziente Arbeitsabläufe beschleunigen. Nutzen Sie diese 40-Fragen-Checkliste zur KI-Bereitschaft, um Ihre Workflows, Daten, Architektur, Risiken und Verantwortlichkeiten zu überprüfen, bevor Sie KI entwickeln, kaufen oder implementieren.

von Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
Datenbereitschaft für KI: Das erste Audit, bevor Sie überhaupt etwas entwickeln
June 16, 2026
|
12
min. Lesezeit

Datenbereitschaft für KI: Das erste Audit, bevor Sie überhaupt etwas entwickeln

Saubere Daten sind keine KI-bereiten Daten. Nutzen Sie dieses Acht-Punkte-Audit, um zu testen, ob Ihre Daten einem echten KI-Anwendungsfall in der Produktion standhalten können, bevor Sie ein KI-System entwickeln, kaufen oder implementieren.

von Konstantin Karpushin
AI
Lesen Sie mehr
Lesen Sie mehr
Logo Codebridge

Lass uns zusammenarbeiten

Haben Sie ein Projekt im Sinn?
Erzählen Sie uns alles über Ihr Projekt oder Produkt, wir helfen Ihnen gerne weiter.
call icon
+1 302 688 70 80
email icon
business@codebridge.tech
Datei anhängen
Mit dem Absenden dieses Formulars stimmen Sie der Verarbeitung Ihrer über das obige Kontaktformular hochgeladenen personenbezogenen Daten gemäß den Bedingungen von Codebridge Technology, Inc. zu. s Datenschutzrichtlinie.

Danke!

Ihre Einreichung ist eingegangen!

Was kommt als Nächstes?

1
Unsere Experten analysieren Ihre Anforderungen und setzen sich innerhalb von 1-2 Werktagen mit Ihnen in Verbindung.
2
Unser Team sammelt alle Anforderungen für Ihr Projekt und bei Bedarf unterzeichnen wir eine Vertraulichkeitsvereinbarung, um ein Höchstmaß an Datenschutz zu gewährleisten.
3
Wir entwickeln einen umfassenden Vorschlag und einen Aktionsplan für Ihr Projekt mit Schätzungen, Zeitplänen, Lebensläufen usw.
Hoppla! Beim Absenden des Formulars ist etwas schief gelaufen.