--- title: "Unser Grundsatz: form follows function" url: "https://b13.com/de/wissen/eine-huebsches-interface-entspricht-nicht-gleich-einem-validen-konzept" description: Abstrakte konzeptionelle Modelle geben dir einen Überblick über deine Projektumgebung, sodass du Interaktionen, Funktionen und Abläufe klar erkennen kannst. Später hast du Zeit, die „Form“ hinzuzufügen, mit Hilfe des UI-Design und einer ansprechenden User Experience. image: "https://b13.com/fileadmin/_processed_/6/e/csm_form-follows-function_dfa992421e.png" date: 2023-03-01 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # Unser Grundsatz: form follows function [ UX/UI-Design ](https://b13.com/de/wissen/uxui-design) Ein hübsches Interface entspricht nicht gleich einem validen Konzept ====================================================================== Warum „ form follows function“ unser wichtigstes Mantra ist ![](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_9492752ded.jpg)Stefanie Kreuzer 01. März 2023 [ RSS Feed ](https://b13.com/de/rss.xml) ![Ein stilisierter orangefarbener Gießkanne steht im Mittelpunkt des Designs, umgeben von abstrakten Formen, Fragezeichen und Sprechblasen, vor einem lebhaften Farbverlauf-Hintergrund.](https://b13.com/fileadmin/_processed_/6/e/csm_form-follows-function_71f53e07e4.webp) Der menschliche Verstand wird von Natur aus von Ästhetik angesprochen. Das Interface-Design trägt daher wesentlich dazu bei, ein positives Nutzererlebnis zu schaffen. Aber wenn es um Langlebigkeit und Qualität geht, kommt es darauf an, was im Kern steckt. Obwohl [konzeptionelle Modelle](https://b13.com/de/wissen/die-erfolgsmethode-wireframing) abstrakt sind, kannst auf diese Weise einen Schritt zurücktreten und dir vorstellen, wie die Menschen mit deinem Produkt interagieren werden. Dieser Blickwinkel gibt dir eine andere Perspektive. Wenn du die gesamte Infrastruktur siehst, kannst du Interaktionen, Beziehungen, Abfolgen und die Funktionalität deines Projekts besser aufeinander abstimmen. Eine elegante Lösung ist die Grundlage für eine gut gemachte Benutzeroberfläche. ![Kunden missverstehen ein Konzept für ein Designentwurf](https://b13.com/fileadmin/_processed_/a/1/csm_customers_misunderstanding_DE_cde5501470.webp) ### Warum brauchst du ein tragfähiges Konzept? > Eine Benutzeroberfläche ist wie ein Witz. Wenn du ihn erklären musst, ist er nicht besonders gut. Martin LeBlanc Egal, wie einfach ein Projekt anfangs erscheinen mag, wenn du mit nur einer vagen Vorstellung der Rahmenbedingungen beginnst, wird der Prozess nur komplizierter. Wenn du in ein gutes Konzept investierst, [sparst du sogar Geld](https://b13.com/de/wissen/triff-kosteneffizientere-entscheidungen-fuer-dein-cms), indem du spätere Folgefehler vermeidest. Stell dir Folgendes vor: Du ziehst in ein brandneues Haus und musst eine Couch für dein Wohnzimmer kaufen. Du gehst in den Laden und überlegst, welches Farbschema zu den restlichen Möbeln passt, welches Modell die perfekte Anzahl von Gästen beherbergen würde, ob es bequem genug für deine Bedürfnisse, aber auch für den Rest deines Haushalts ist und so weiter. Wenn du das perfekte Modell gefunden hast, wird es zu dir nach Hause geliefert und… es passt nicht durch die Eingangstür. Was machst du dann? Gibst du dich mit einem minderwertigen Modell zufrieden und akzeptierst den Qualitätsverlust und die unerfüllten Bedürfnisse? Oder reißt du die Wand ein und baust eine größere Tür für viel Geld neu? Keine der beiden Optionen klingt sehr verlockend. ![einige Hürden, die nicht berücksichtigt wurden, tauchen erst später auf](https://b13.com/fileadmin/_processed_/1/d/csm_unanticipated_hurdles_DE_a3a21fa640.webp) Wäre es nicht die beste Lösung, ein Haus mit flexiblen Wänden und Türen zu wählen, das alle deine Bedürfnisse erfüllt, egal wie sehr sie im Laufe der Zeit wachsen oder sich verändern? Flexibilität macht dein Haus nachhaltig und erweiterbar. Genauso verhält es sich mit deiner Website. Sobald du die Ziele und Funktionen kennst, ist die Erstellung einer Sitemap und eines Wireframings die Grundlage für die Infrastruktur deiner Website. Damit erhältst du einen Leitfaden für die Strukturierung deiner Website und eine gezielte Gliederung für die Erstellung von Inhalten. Ein System muss zuerst nutzbar und funktional sein, bevor du daran arbeiten kannst, es begehrenswert zu machen. Wenn du es andersherum angehst, kostet dich das viel Zeit und wahrscheinlich den Verstand deiner Entwickler. Eine solide konzeptionelle Strategie sorgt für eine verlässliche Konsistenz in Design und technischer Umsetzung, während sich dein Projekt weiterentwickelt. Was macht ein brauchbares Konzept aus? ---------------------------------------- In diesem Beitrag geht es nicht darum, wie genau man ein Konzept erstellt, sondern um die Notwendigkeit und die Vorteile eines konzeptionellen Modells an sich. Zuallererst ist es wichtig, die Bedürfnisse deiner Nutzer zu verstehen, damit du ein positives Erlebnis schaffen kannst. Behalte immer den Kunden im Blick: Was wünschen sie sich von deinem Produkt? Was ist ihre Absicht bei der Nutzung? Was kannst du in deinem Produkt anbieten, damit sie es nutzen und genießen können? Egal, ob du eine Persona erstellst (oder eine andere Methode verwendest), behalte deine Zielgruppen im Auge. Bei deinem Konzept ist es wichtig, dass du eine gut definierte Usability-Strategie verfolgst. Konsistente Interaktionsmuster fördern die Qualität des Nutzererlebnisses. Erstelle einen klaren Nutzerpfad und baue deine Struktur und Funktionalität darauf auf. Eine [Informationsarchitektur (IA)](https://b13.com/de/wissen/informationsarchitektur-in-ux-best-practices) zu erstellen und sie mit einer Customer Journey zu kombinieren, hilft, die Basis für deine Sitemap zu legen. Mit einer validierten IA kann sich dein Nutzer auf deiner Website orientieren. Sie wissen, wo sie sind, wie sie dorthin gekommen sind und wohin sie als nächstes gehen können. Technisches und visuelles Feedback, intuitive Informationshierarchien und eine klare thematische Unterscheidung zwischen den Kategorien helfen dem reibungslosen Nutzungsverhalten auf deiner Website. Wir machen dir ein konzeptionelles Angebot, das du nicht ablehnen kannst -------------------------------------------------------------------------- Form follows function — investiere deshalb in ein gutes Konzept! Vorausdenken und Fragen stellen, um die Funktionsweise zu verstehen, ist der Schlüssel. Erstelle zuerst ein Konzept, kommuniziere es durch funktionsbeschreibende, ungestylte Wireframes und genaue Ausarbeitungen und Definitionen. Sobald alle Funktionen, Elemente und Strukturen verstanden und dokumentiert sind, kannst du dich auf die Benutzeroberfläche konzentrieren, um deine Kunden und ihre Endnutzer langfristig zu begeistern. Es ist nie zu spät! --------------------- Sprich mit uns über den Start deines nächsten Projekts mit einem Konzeptmodell. [ Let’s connect! ](https://b13.com/de/kontakt) ### Geschrieben von: ![Junge Frau mit langen, welligen Haaren, die einen leichten Pullover trägt und sanft lächelnd vor einem verschwommenen Innenhintergrund steht.](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_5a7d55f637.webp) Die UX- und Interface-Designerin Stefanie hat eine besondere Eigenschaft, die wir "die Arbeit sehen" nennen. Sie versteht sofort, was für ein bestimmtes Projekt getan werden muss, und macht sich an die Arbeit. Ihr unverzichtbares Werkzeug: Maultaschen Stefanie Kreuzer Design [ mehr von Stefanie Kreuzer ](https://b13.com/de/team/stefanie-kreuzer) Ähnliche Artikel ------------------ - ![Eine robotische Hand hält einen Pinsel und erzeugt einen lila Wirbel vor einem hellblauen Hintergrund mit kreisförmigen Mustern.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings 17. Juli 2026 | Laura Heine Laura Heine teilt, was sie beim Design Leadership Meetup über Verantwortung, Dokumentation und einen fairen Umgang mit KI im Team gelernt hat. [ weiterlesen: Verantwortungsvoll gestalten im KI-Zeitalter: Unsere Learnings ](https://b13.com/de/wissen/verantwortungsvoll-gestalten-im-ki-zeitalter-unsere-learnings) - ![Mehrere farbenfrohe Mockups von Webseiten, die übereinander gestapelt sind und verschiedene Layouts sowie Designelemente vor einem lila Hintergrund präsentieren.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27. Januar 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. - ![Benutzeroberflächendesign mit einer dunklen Seitenleiste, die Navigationsoptionen bietet, und einem zentralen Inhaltsbereich mit Platzhaltertext.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage 12. Januar 2026 | Laura Heine b13 gestaltet das Backend von TYPO3 für Version 14 neu, damit es moderner wirkt, schneller läuft, den Benutzerkontext beibehält und eine erweiterbare Grundlage schafft, die sich… [ weiterlesen: Gestaltung des Backends von TYPO3 v14: Unsere Vision für eine moderne, erweiterbare Grundlage ](https://b13.com/de/wissen/gestaltung-des-backends-von-typo3-v14-unsere-vision-fuer-eine-moderne-erweiterbare-grundlage) - ![Benutzerschnittstellenelemente wie Textfelder, Kontrollkästchen und Schaltflächen, verbunden durch Pfeile auf einem lila Hintergrund.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Wie man Webformulare richtig macht 18. August 2025 | David Steeb Effective web form design is a critical component of user engagement and conversion. By focusing on clarity, simplicity, and user experience, businesses can create web forms that… [ weiterlesen: Wie man Webformulare richtig macht ](https://b13.com/de/wissen/wie-man-webformulare-richtig-macht) - ![Eine lila Mappe ist zentral platziert und von roten und blauen rechteckigen Elementen umgeben, die durch Linien auf einem Gitterhintergrund verbunden sind.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Effektive Informationsarchitekturen entwerfen: Best Practices 30. Juli 2025 | David Steeb Tauche ein in unseren neuesten Artikel über die Welt der Informationsarchitektur und ihren entscheidenden Einfluss auf die User Experience. Erfahre zentrale Strategien und Best… [ weiterlesen: Effektive Informationsarchitekturen entwerfen: Best Practices ](https://b13.com/de/wissen/designing-an-effective-information-architecture-best-practices) - ![Zwei Roboterarme sind um eine Lupe positioniert und konzentrieren sich auf den Buchstaben "g" in einer stilisierten Schriftart. Der Hintergrund zeigt ein Gittermuster mit wiederholten "Ag"-Symbolen.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_6f3f5a0baa.webp) ### Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien 03. Juni 2025 | David Steeb Entdecke die Bedeutung von Richtlinien zur Schriftgröße im UI-Design, um zugängliche und visuell ansprechende Benutzeroberflächen zu schaffen. Erfahre die Best Practices für… [ weiterlesen: Mit Schriften gestalten: Ein Leitfaden für UI-Schriftgrößenrichtlinien ](https://b13.com/de/wissen/designing-with-type-a-guide-to-ui-font-size-guidelines) - ![Ein Abschlusskappe ist zentral zwischen verschiedenen Elementen eines Flussdiagramms platziert, darunter Rechtecke und Kreise, vor einem Farbverlauf-Hintergrund. Das Design vermittelt Themen von Bildung und Entscheidungsprozessen.](https://b13.com/fileadmin/_processed_/2/e/csm_MasteringWebFlow_Headerbild_1558d4dcea.webp) ### Mastering Website Flowcharts 21. Mai 2024 | Stefanie Kreuzer Ein optimaler Benutzerfluss ist entscheidend für erfolgreiche Websites. Erfahre, wie du mit Flowcharts schon früh im UX-Designprozess für Klarheit sorgen kannst. [ weiterlesen: Mastering Website Flowcharts ](https://b13.com/de/wissen/mastering-website-flowcharts) - ![Wireframing Best Practices](https://b13.com/fileadmin/_processed_/1/e/csm_Wireframing_4b24c64a42.webp) ### Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken 31. August 2023 | Stefanie Kreuzer Wireframing ist der erste Schritt bei der Gestaltung einer Website und dient vielen Zwecken: Es beschreibt, wie Informationen auf einer Seite dargestellt werden, legt die Struktur… [ weiterlesen: Die Kunst des Wireframing beherrschen: Wichtige Tipps und Techniken ](https://b13.com/de/wissen/die-erfolgsmethode-wireframing) - ![Ein Weg führt durch stilisierte Wolken, flankiert von einer Lupe und Zahnrädern, mit Symbolen, die Texte und Dokumente im Hintergrund darstellen und Themen von Erkundung und Technologie andeuten.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design 12. April 2024 | Franzi Töpler Menschen mit Beeinträchtigungen stellen eine der größten Gruppen von Online-Nutzern dar, aber sie werden in der digitalen Welt oft übersehen. Die Verbesserung der Barrierefreiheit… [ weiterlesen: Ein Leitfaden für die Berücksichtigung von Barrierefreiheit im UX-Design ](https://b13.com/de/wissen/ein-leitfaden-fuer-die-beruecksichtigung-von-barrierefreiheit-im-ux-design) - ![Eine Hand platziert eine rote Form in ein Flussdiagramm, das aus verschiedenen geometrischen Figuren besteht, darunter Rechtecke und Kreise, mit Richtungspfeilen, die die Verbindungen zwischen ihnen anzeigen. Der Hintergrund zeigt ein Gittermuster.](https://b13.com/fileadmin/_processed_/c/3/csm_UserFlowGuide_Headerbild_54abda2aa4.webp) ### Hervorragendes User Flow Design 03. April 2024 | Stefanie Kreuzer Die Gestaltung des Benutzerflusses visualisiert den Weg, den der Benutzer zurücklegt, um ein bestimmtes Ziel zu erreichen. In digitaler Hinsicht ist der Pfad das, was der Benutzer… [ weiterlesen: Hervorragendes User Flow Design ](https://b13.com/de/wissen/hervorragendes-user-flow-design)