Introduction
The Confinity Design Guidelines are intended to help UI/UX designers create website designs that can be integrated into the Confinity CMS by developers without any issues. Confinity already provides developers with several ready-made functionalities in the form of modules, which still need to be designed accordingly. In particular, when working with these existing modules, there are some points that designers need to consider, as outlined in these guidelines.
Core Concept
In Confinity, a website page consists of a layout, sections, and page components. These are described below.
Layout
A website page is always based on a layout. A layout is usually a “blank” HTML page that, on the one hand, defines which stylesheets and JavaScript resources should be loaded, and on the other hand, provides authors with pre-defined sections in which they can place the corresponding components.
When to Use Layouts?
Typically, the same layout is used for an entire website. Even in the case of landing pages, the same layout can usually be reused. Multiple layouts are needed only when a page requires different sections, offers a different selection of components, or when the design is completely different. This is often the case when several distinct websites are managed within Confinity.
Layout Configurations
A layout can also include website- or design-specific configurations. For example, one can define that a layout has multiple themes (e.g. green, blue, red) from which the author can choose, so that all components on the page are colored accordingly.
Sections
A layout can contain several sections. A section defines at which position and in what quantity components can be added by the authors. A typical layout might, for example, define the following sections:
- Header Section – Here, the author can add a single header component. They might have a choice between two possible components:
- Standard Header: The normal website header with a logo, navigation menu, search field, etc.
- Landing Page Header: A simplified header with a logo and title, without navigation.
- Intro Section – Here, the author can add a single intro component. They might have a choice between two possible components:
- Title and Text: A simple component consisting of a page title and an introductory text.
- Introduction Banner: A larger component that might consist of a large image, page title, introductory text, and several call-to-action links.
- Main Content Section – Here, the author can place as many components as desired, such as:
- Richtext – A simple rich text component
- Teaser – A component with an image, title, text, and a link
- Footer Section – Here, the author can add a single footer component. They might have a choice between two possible components:
- Standard Footer: The normal website footer with a logo, important links, etc.
- Landing Page Footer: A simplified footer with a short text.
Tips
The number and configuration of sections depends on the design concept and is by no means prescribed by Confinity.
Inheritance
Sections can be defined so that their content is inherited down the navigation hierarchy. For example, an author can populate the Header and Footer Sections once on the homepage with the appropriate components, which will then be displayed on all subordinate pages.
Page Components
Page Components are reusable elements that authors can place as many times as desired in the corresponding sections. Components can be, for example, simple title & text, image, accordion, tabs, teaser, or link lists. The design concept determines which components are available, how they should look, and what can be configured by the author on the components.