--- title: Form should always follow function url: "https://b13.com/knowledge/a-pretty-interface-does-not-equal-a-valid-concept" description: Abstract conceptual models give you a view of your project landscape so you can clearly see interactions, functions and flow. There is time to add ‘form’ later, through the help of UI design and delightful 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 --- # Form should always follow function [ UX/UI-Design ](https://b13.com/knowledge/uxui-design) A pretty interface does not equal a valid concept =================================================== Why “form follows function” is our most important mantra ![](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_9492752ded.jpg)Stefanie Kreuzer 01 March 2023 [ RSS Feed ](https://b13.com/rss.xml) ![A stylized orange watering can is central to the design, surrounded by abstract shapes, question marks, and speech bubbles, set against a vibrant gradient background.](https://b13.com/fileadmin/_processed_/6/e/csm_form-follows-function_71f53e07e4.webp) The human mind is naturally driven by aesthetics. Interface design, therefore, contributes substantially to building a positive user experience. But when it comes to durability and quality, it’s what’s on the inside that counts. [Although conceptual models are abstract](https://b13.com/knowledge/wireframing-best-practices), they let you take a step back and envision how people are going to interact with your product. This distance gives you perspective. Seeing the entire landscape means you can more easily align interactions, relations, transitions, and the functionality of your project. Building an elegant solution underpins a well-made interface. The secret to a conceptual model is to give stakeholders just enough to get the right idea, but not to dazzle them with looks. You want to provide a schematic representation to explain the flow and function of the sites and elements. ![Customers misunderstanding concept for design](https://b13.com/fileadmin/_processed_/c/7/csm_customers_misunderstanding_EN_7109334c23.webp) ### Why do you need a valid concept? > A user interface is like a joke. If you have to explain it, it’s not that good. Martin LeBlanc No matter how simple a project might seem in the beginning, getting started with only a vague perception of its framework will only complicate the process. If you invest in a good concept, you will actually [save money](https://b13.com/knowledge/make-more-cost-effective-decisions-for-your-cms) by eliminating subsequent faults. Imagine this: You move into a brand new house and need to buy a couch for your living room. You go to the store and think about what color scheme would match the rest of your furniture, which model would seat the perfect number of guests, whether it is comfortable enough for your needs but also for the rest of your household and so on. Once you find the perfect fit, you get it delivered to your home and… it doesn’t fit through the front door. What do you do? Do you settle for an inferior model and accept the loss of quality and unfulfilled needs? Or do you demolish the wall and rebuild a bigger door at a high cost? Neither option sounds compelling. ![some hurdles that were not considered might appear later](https://b13.com/fileadmin/_processed_/3/3/csm_unanticipated_hurdles_EN_8fec3da2e7.webp) Wouldn’t the best solution be to choose a house with flexible walls and doors to fit all your needs, no matter how much they will grow or change over time? Flexibility makes your home sustainable and extensible. It’s exactly the same thing with your website. Once you know the goals and features, creating a sitemap and wireframing the outline is the base for your website’s infrastructure. These will give you a guide for organizing your website, and a targeted outline for creating content. A system must first be usable and functional before you can work on making it desirable. Approaching it the other way around will cost you a lot of time and probably your developers‘ sanity. A solid conceptual strategy ensures a reliable consistency in design and technical implementation as your project evolves. What makes a valid concept? ----------------------------- This post is not a tutorial on how to map out a concept—it addresses the necessity and benefits of having a conceptual model. First of all, it is important to understand your users‘ needs so you can implement a positive experience. Always keep the customer in mind: What do they wish for in your product? What is their intention while using it? What do you provide in your product that would make them use it and enjoy it? Whether you create a Persona (or use a different method) to envision your target groups. Throughout your concept, it is important to follow a well-defined usability strategy. Consistent interaction patterns support the quality of your users‘ experience. Create a clear user-path and base your structure and functionality around it. Creating an information architecture (IA) and combining it with a customer journey helps to set the base for your sitemap. Validated IA lets your user orient themselves on your site. They’ll know where they are, how they got there, and where they can go next. Technical and visual feedback, intuitive information hierarchies, and clear thematic differentiation between categories will help your website’s flow. We make you a conceptual offer that you can’t refuse ------------------------------------------------------ Form follows function—therefore, invest in a good concept! Thinking ahead and asking questions to understand functionality is key. Create a concept first, communicate it through functionally-descriptive unstyled wireframes and precise elaboration and definitions. Once all the functions, elements, and structures are understood and documented, you can shift the focus to the interface to delight your customer and their end user in the long run. It’s not too late! -------------------- Chat with us about starting your next project with a concept model. [ Let’s connect! ](https://b13.com/lets-connect) ### Written by: ![Bild von Stefanie Kreuzer](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_5a7d55f637.webp) UX and interface designer, Stefanie, has a special quality we call “seeing the work.” She instantly understands what needs to be done for any given project, and gets on with it. Her essential tool: Maultaschen Stefanie Kreuzer UX Design [ more from Stefanie Kreuzer ](https://b13.com/team/stefanie-kreuzer) Related Articles ------------------ - ![A robotic hand holds a paintbrush, creating a purple swirl against a light blue background with circular patterns.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Designing Responsibly in the Age of AI: What We’re Learning as We Go 17 July 2026 | Laura Heine Laura Heine shares what she learned at the Design Leadership Meetup about responsibility, documentation, and treating AI fairly as a team. [ Read more: Designing Responsibly in the Age of AI: What We’re Learning as We Go ](https://b13.com/knowledge/designing-responsibly-in-the-age-of-ai-what-were-learning-as-we-go) - ![Several colorful web page mockups stacked together, showcasing different layouts and design elements against a purple background.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27 January 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. [ Read more: Camino—The Need for a Default Theme in TYPO3 Is Real ](https://b13.com/core-insights/blog/camino-the-need-for-a-default-theme-in-typo3-is-real) - ![User interface design featuring a dark sidebar with navigation options and a central content area with placeholder text.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation 12 January 2026 | Laura Heine b13 is redesigning TYPO3’s backend for version 14 to feel modern, work faster, maintain user context, and create an expandable foundation that can evolve for years to come. [ Read more: Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation ](https://b13.com/knowledge/designing-typo3-14s-backend-our-vision-for-a-modern-expandable-foundation) - ![User interface elements including text fields, checkboxes, and buttons, connected by arrows on a purple background.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Best Practices for Effective Web Forms 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… [ Read more: Best Practices for Effective Web Forms ](https://b13.com/knowledge/creating-effective-web-forms) - ![A purple folder is centrally placed, surrounded by red and blue rectangular elements connected by lines on a grid background.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Designing an Effective Information Architecture: Best Practices 30 July 2025 | David Steeb Dive into our latest article exploring the world of information architecture and its profound impact on user experience. Learn key strategies and best practices for designing… [ Read more: Designing an Effective Information Architecture: Best Practices ](https://b13.com/knowledge/designing-an-effective-information-architecture-best-practices) - ![Two robotic arms are positioned around a magnifying glass, focusing on the letter "g" in a stylized font. The background features a grid pattern with repeated "Ag" symbols.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_6f3f5a0baa.webp) ### Designing with Type: A Guide to UI Font Size Guidelines 03 June 2025 | David Steeb Discover the importance of UI font size guidelines for creating accessible and visually appealing UI designs. Learn the best practices for typography in UI, including consistency,… [ Read more: Designing with Type: A Guide to UI Font Size Guidelines ](https://b13.com/knowledge/designing-with-type-a-guide-to-ui-font-size-guidelines) - ![A graduation cap is centrally placed among various flowchart elements, including rectangles and circles, set against a gradient background. The design suggests themes of education and decision-making processes.](https://b13.com/fileadmin/_processed_/2/e/csm_MasteringWebFlow_Headerbild_1558d4dcea.webp) ### Mastering Website Flowcharts 21 May 2024 | Stefanie Kreuzer An optimal user flow is crucial for successful websites. Learn how to use flowcharts to achieve clarity early in the UX design process. [ Read more: Mastering Website Flowcharts ](https://b13.com/knowledge/mastering-web-flow-charts) - ![Wireframing Best Practices](https://b13.com/fileadmin/_processed_/1/e/csm_Wireframing_4b24c64a42.webp) ### Mastering the Art of Wireframing: Essential Tips and Technique 31 August 2023 | Stefanie Kreuzer Wireframing is the first step in designing the structure of a website, and it serves many purposes; to describe how information is presented on a page, to determine a website’s… [ Read more: Mastering the Art of Wireframing: Essential Tips and Technique ](https://b13.com/knowledge/wireframing-best-practices) - ![A pathway leads through stylized clouds, flanked by a magnifying glass and gears, with icons representing text and documents in the background, suggesting themes of exploration and technology.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### A Guide to Accessibility Considerations in UX Design 12 April 2024 | Franzi Töpler People with disabilities constitute one of the most significant segments of online users, but it is an often-overlooked population in the digital world. Increasing accessibility to… [ Read more: A Guide to Accessibility Considerations in UX Design ](https://b13.com/knowledge/a-guide-to-accessibility-considerations-in-ux-design) - ![A hand is placing a red shape into a flowchart composed of various geometric figures, including rectangles and circles, with directional arrows indicating connections between them. The background features a grid pattern.](https://b13.com/fileadmin/_processed_/c/3/csm_UserFlowGuide_Headerbild_54abda2aa4.webp) ### Excelling in User Flow Design 03 April 2024 | Stefanie Kreuzer User flow design visualizes the path that the user follows to achieve a specific goal. In digital terms, the path is what the user sees and clicks on when interacting with a… [ Read more: Excelling in User Flow Design ](https://b13.com/knowledge/excelling-in-user-flow-design)