Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » Neumorphisches Design: Geht’s noch?

Neumorphisches Design: Geht’s noch?

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 18 Kommentare
Lesedauer: 3 Minuten
  • von Markus Seyfferth
  • 3. Februar 2020

Inhaltsverzeichnis

Welche Webdesign Trends sind potentiell zeitlos? Ist Neumorphisches Design nur eine Modeerscheinung, die dir in einem Jahr eher peinlich ist? Wir empfehlen begleitend zur Lektüre dringend ein Heißgetränk, denn der Beitrag bedarf etwas Sitzfleisch.

Der neueste Schrei: Neumorphisches Design

Neumorphisches Design (auch bekannt als Neomorphismus) ist ein relativ neuer Designtrend und ein Begriff, der in letzter Zeit viel Aufsehen erregt hat. Die Ästhetik ist durch eine minimale und realistisch aussehende Benutzeroberfläche gekennzeichnet, die den Skeuomorphismus neu interpretiert — daher der Name.

User Interface Design - Design
Ein examplarisches Design-Konzept von Neumorphismus. Kreiert von Dawid Tomczyk. Screenshot: Dr. Web.

Der neumorphische Effekt ist eine Kombination aus Flat-Design und skeuomorphem Design (später dazu mehr). Neumorphische Komponenten haben unten rechts einen dunklen Schatten und oben links einen hellen Schatten. Die Kombination aus beidem erzeugt einen Effekt, der die Komponenten täuschend echt aussehen lässt.

Marke - Produktdesign
Wenn CSS-Buttons täuschend echt aussehen. Link zu Codepen. Screenshot: Dr. Web. Kreiert von halvves.com
Logo - Marke
Screenshot: Dr. Web.

Neumorphische Karten

Eine neumorphische Karte ist eine erhabene Form aus genau demselben Material wie der Hintergrund.

neumorphische karten Neumorphisches Design: Geht’s noch?
Bildquelle: uxdesign.cc

Im Gegensatz zur Material Card „schwebt“ die neumorphische Karte nicht über dem Untergrund, sondern steht ab.

neumorphische karte material card Neumorphisches Design: Geht’s noch?
Bildquelle: uxdesign.cc

Der Schatten verleiht der der Material Card sowohl Tiefe als auch die Form selbst — denn die Material Cards sind oft randlos.

Der neumorphische Effekt ist relativ einfach zu erzielen. Sie nehmen zwei Schatten, einer davon Weiß, der andere dunkel. Damit der weiße Schatten überhaupt erkennbar ist, darf der Hintergrund nicht vollständig weiß sein. Die beiden Schatten sollten auf jeden Fall erkennbar bleiben, sonst funktioniert der neumorphische Effekt nicht.

neumorphische karte css beispiel 1 Neumorphisches Design: Geht’s noch?
Wie man den neumorphischen Effekt in CSS umsetzt. Bildquelle: uxdesign.cc

Ein neumorphes UI-Kit

Ein ganzes Set an neumorphen UI-Elementen hat Abdelrahman Ismail erschaffen und auf Github bereitgestellt:

Bildschirmfoto - Produktdesign
Neumorphisches Design: Geht’s noch? 1

Dieses Projekt ist noch in Arbeit und auch noch lange nicht abgeschlossen. Der Autor plant, weitere Komponenten aufzunehmen und in Zukunft auch ein Dark-Theme zu unterstützen.

Smartphone - Design
Ganz klar: der App-Design und Webdesign-Trend geht immer mehr hin zum Neumorphismus. Hier ein Beispiel von Filip Legierski. Screenshot: Dr. Web.
Funktionstelefon - User Interface Design
Auch bei diesem Design-Konzept sind die neumorphischen Elemente sehr gut zu erkennen. Designed von Sèrgi Mi. Screenshot: Dr. Web.

Auch spannend

  • Webdesign Trends 2022
  • Atomic Design
  • Der goldene Schnitt
  • Brutalismus im Webdesign
  • Mehr Webdesign-Kunden finden
  • Responsive Design mit Flexbox oder Grid?
Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

CAF chris and friends berlin Logo.

CAF Webdesign Agentur

Berlin

Logo für Opus Marketing aus Bayreuth. Links zu sehen ist eine schwarze Schachfigur, der schwarzer Turm. Daneben in Großbuchstaben die Buchstaben OPUS.

OPUS Marketing

Bayreuth

Klickbeben Webdesign Agentur Innsbruck Logo.

Webagentur klickbeben

Innsbruck

Logo der Online Solutions Group. Motto: Your Link to Success.

Online Solutions Group

München

Logo der Adfera Webdesign Agentur Erfurt.

ADFERA – Webdesign & Online Marketing

Erfurt

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑