Published On: 30. März 2022Kategorien: APR22, Der Elementekatalog, Elementekatalog

Der Elementekatalog

Bereits im Newsletter JAN22 haben wir den Grundaufbau einer Website beschrieben. Außerdem haben wir bereits einige Bausteine einer Website aufgeführt und dargestellt. Wir möchten die Elemente einer Website in diesem Newsletter erneut aufgreifen, um Ihnen eine Art Katalog zu erstellen. Mithilfe der aufgeführten Komponenten können so Websites zusammengestellt werden.

1. Die Togglebox

Die Togglebox ermöglicht es, Inhalte hinter Überschriften zu verstecken. Erst nach einem Klick auf die Überschrift klappt der Inhalt nach unten auf. So kann eine Website auf einfache Weise übersichtlich dargestellt werden.

Inhat zu Überschrift 1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Inhat zu Überschrift 2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

2. Flipbox

Die Flipbox ist der Togglebox sehr ähnlich. Allerdings wird die Flipbox ausgelöst, sobald der Mauszeiger über diese geführt wird. Es muss also nicht aktiv auf die Überschrift geklickt werden. Dieses Führen des Mauszeigers über ein Website-Element wird „hovern“ genannt. Wird also über eine Flipbox gehovert, erscheint eine dreidimensionale Animation.

Die Box dreht sich ähnlich einer Karte und auf der Rückseite erscheint der Inhalt.

Überschrift 1

Text auf der Frontseite

Rückseiten - Überschrift

Inhalt zur Überschrift 1

3. Menu Anchor

Ein weiteres Element moderner Websites ist der Menu Anchor. Zu einem Menu Anchor gehört immer auch eine Überschrift, die mit einem Link versehen ist. Beim Klick auf diesen Link wird automatisch zum zugehörigen Inhalt der Überschrift gescrollt.

4. Separator

Ein Separator ist ein einfaches, aber enorm wichtiges Element für Websites. Es trennt und strukturiert Bereiche einer Website mit einfachen Elementen, z.B. mit Linien, Blöcken oder anderen Grafiken.

5. Charts

Charts oder Diagramme begegnen uns überall. Mithilfe von Charts können Datenmengen sachlich zusammengefasst und optisch dargestellt werden. Richtig  eingesetzt können Charts die Seriosität und Kompetenz eines Unternehmens unterstreichen. Wichtig ist jedoch, dass Charts in einem klaren Kontext präsentiert
werden. Die Informationen eines Charts sollten daher so in den übrigen Content der Website integriert werden, dass dieser schnell erfasst werden kann.

Verteilung der Zugriffe

Verteilung der Zugriffe