Beispiele für Design-Elemente

Auf dieser Seite stellen wir Ihnen beispielhaft einige Bausteine vor, aus denen Ihr neues Webseitenlayout bestehen könnte. Natürlich passen wir alle Design-Elemente nach Ihren individuellen Vorgaben und Bedürfnissen an oder erstellen für Sie auch komplett neue Bausteine für ein noch individuelleres Layout Ihres neuen Internetauftritts.

Texte

Texte sind der wahrscheinlich wichtigste und größte Bestandteil Ihrer Webseite. Neben seiner Kernfunktion, nämlich der Übermittlung des Inhalts, trägt der Text auch maßgeblich zum Gesamtbild der Webseite dar. Neben der Auswahl von Schriftart, Schriftgröße, Schriftstil und Schriftfarbe gibt es verschiedene Design-Elemente, um Texte anschaulicher darzustellen, zu strukturieren oder Textteile hervorzuheben.

Registerkarten / Tabs

Tabs sind eine elegante Möglichkeit, die Gesamtheit an Text nicht komplett anzuzeigen, sondern im Sinne einer besseren Übersichtlichkeit und zwecks aktiver Führung des Besuchers dynamisch ein- oder ausblenden zu lassen. Hierbei kann der Webseitenbesucher intuitiv geführt durch Maus-Klick auf die verschiedenen Tabs schnell zwischen einer Auswahl gleich wichtiger Informationen hin und her navigieren.

Tab1-NameTab2-NameTab3-Name
Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs.
Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs.
Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs.
Tab1-NameTab2-NameTab3-Name
Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs. Beispieltext des ersten Tabs.
Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs. Beispieltext des zweiten Tabs.
Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs. Beispieltext des dritten Tabs.

Ausklappbarer Text (Akkordeon)

Das Akkordeon ist ein weiteres Design-Element, das umfangreichen Text übersichtlich, platzsparend und strukturiert als Liste darstellt. Hier wird per Standard beispielsweise der erste Listenpunkt / Absatz vollständig mit Inhalt angezeigt, während die Inhalte der darauffolgenden Listenpunkte / Absätze erst durch Maus-Klick auf den Titel eingeblendet werden. Im selben Zug wird automatisch der bisher geöffnete Listenpunkt geschlossen.

Titel 1
Verborgener Inhalt
Titel 2
Verborgener Inhalt
Titel 3
Verborgener Inhalt

Flip-Boxen

Flip-Boxen sind Elemente, die sich umdrehen lassen – vergleichbar mit einer Karte. Das Drehen des Elements auf der Webseite wird in der Regel durch das Darüberfahren mit dem Mauszeiger (hover over) oder durch Klicken auf das Element ausgelöst. Diese Elemente können auf beiden Seiten unterschiedlich gestaltet werden und bringen Dynamik auf eine Webseite

Rakete von Durchstarten im Internet

Flip-Box 1

Hier steht eine kurze Beschreibung

Rakete von Durchstarten im Internet

Flip-Box 2

Hier steht eine kurze Beschreibung

Rakete von Durchstarten im Internet

Flip-Box 3

Hier steht eine kurze Beschreibung

Bilder / Fotos / Grafiken

Neben Texten gehören natürlich auch verschiedene Bilder, Fotos und Grafiken zu einem modernen Webseitenlayout. Diese können hierbei verschiedenen Zwecken dienen.

Bilder, Fotos und Grafiken können:

  • Inhalte Ihrer Texte veranschaulichen
  • Sie und Ihre Firma vorstellen und Ihre Marke platzieren
  • Ihr Branding verstärken
  • Aufmerksamkeit des Lesers auf wichtige Elemente lenken
  • Eine emotionale Bindung zu Ihrer Zielgruppe aufbauen
  • Ihre Webseite optisch aufwerten

Slider

Ein Slider („Schieber“) ist eine Art Diashow. Slider wechseln nach einer bestimmten Zeit automatisch ihren Inhalt. Der Inhalt kann dabei zum Beispiel ein Bild oder Text oder sogar eine Kombination aus beidem sein. Die Inhalte können oft auch durch Klicken oder Wischen vom Benutzer gesteuert werden. Slider über die volle Breite des Bildschirms werden oft im oberen Bereich der Startseite (Header) einer Internetpräsenz als Einstieg genutzt. Slider können aber auch in kleineren Formaten an anderer Stelle auf einer Webseite sinnvoll eingesetzt werden.

Lightbox

Lightboxen sind eine tolle Variante Bilder zu präsentieren: Klickt ein Webseitenbesucher auf ein Vorschaubild, wird die Webseite abgedunkelt und das Bild darüber schwebend im Großformat angezeigt. 

Beispielbild Lightbox
Zum Vergrößern auf das Bild klicken

Die auf dieser Seite vorgestellten Design-Elemente stellen nur eine kleine Auswahl gerne gewählter Elemente dar. In einer kostenlosen Beratung besprechen wir gerne mit Ihnen die für Ihr Unternehmen, Ihre Branche, Ihre Zielgruppe und Ihren Inhalt geeigneten Gestaltungsmöglichkeiten. Sprechen Sie uns an!