Blueprint für bluprint-Artikel

Dies ist ein Mockup-Artikel, in dem veranschaulicht wird wie ein regulärer bluprint-Artikel aufgebaut ist. Es beginnt mit dem Header: Es gibt die Artikel-Überschrift (H1), die mit einem Bild überlappt. Darunter werden die Autoren und das Veröffentlichungsdatum genannt. Und dieser Text ist der Paragraph, der in den Artikel einleitet, weshalb der Text im Schriftschnitt black ist.

Dies ist der Artikel für die Desktop-Ansicht. Für die Mobile-Ansicht bitte diesen Artikel auf einem Handy lesen.

Dies ist ein Mockup-Artikel, in dem veranschaulicht wird wie ein regulärer bluprint-Artikel aufgebaut ist. Es beginnt mit dem Header: Es gibt die Artikel-Überschrift (H1), die mit einem Bild überlappt. Darunter werden die Autoren und das Veröffentlichungsdatum genannt. Und dieser Text ist der Paragraph, der in den Artikel einleitet, weshalb der Text im Schriftschnitt black ist.

Dies ist der Artikel für die Mobile-Ansicht. Für die Desktop-Ansicht bitte diesen Artikel auf einem Desktop lesen.
Von Paula Frecot | Wissenschaftlich geprüft von Dr. Lorem Ipsum | Veröffentlicht am 18.01.2025

Das Layout

Die Desktop-Ansicht basiert auf einem 12-spaltigen Raster. Es ist 1200px breit, mit Column-Gaps von 1.25rem und Row-Gaps von 0.938rem.

Die Mobile-Ansicht hat ein einspaltiges Raster. Links und rechts ist Padding von jeweils 1rem.

Die Typografie

Es gibt drei verschiedene Schriftarten mit unterschiedlich starken Schriftschnitten. Hier eine Zusammenfassung:

H1
Neue Haas Grotesk Display
Semi Bold
Size: 4rem, Height: 4rem
Neue Haas Grotesk Display
Semi Bold
Size: 9rem, Height: 8.5rem
H1
Playfair Display, Variable Font
Bold
Size: 4rem, Height: 4rem
H2
Neue Haas Grotesk Display
Semi Bold
Size: 5rem, Height: 5rem
Neue Haas Grotesk Display
Semi Bold
Size: 2.8rem, Height: 3rem
H2
Playfair Display, Variable Font
Semi Bold
Size: 5rem, Height: 5rem
Playfair Display, Variable Font
Semi Bold
Size: 2.8rem, Height: 3rem
H3
Playfair Display, Variable Font
Bold
Size: 2rem, Height: 2.4rem
Playfair Display, Variable Font
Bold
Size: 2rem, Height: 2rem
H4
Playfair Display, Variable Font
Medium
Size: 1.8rem, Height: 2.4rem
Playfair Display, Variable Font
Medium
Size: 1.6rem, Height: 2rem
Paragraph
Lato
Normal
Size: 1.125rem, Height: 1.5rem
Lato
Normal
Size: 1.125rem, Height: 1.4rem
Paragraph, emphasized
Lato
Black
Size: 1.125rem, Height: 1.5rem
Paragraph, emphasized 2
Lato
Black italic
Size: 1.125 rem, Height: 1.5rem
Autoren, Breadcrumb Nav
Lato
Normal
Size: 1rem, Height: 1.5rem
Lato
Normal
Size: 0.8 rem, Height: 1.5rem
Bildunterschrift
Lato
Normal
Size: 0.8rem, Height: 1.25rem

Die Kapitelüberschrift ist die H2. Dabei ist, wie bei der H1, immer ein Wort hervorgehoben durch den Variable-Font Playfair Display. Dieses Wort animiert sich, sobald die Überschrift im Viewport erscheint. Es gibt meistens einen Paragraphen unter der Kapitelüberschrift. Sie haben einen Abstand von 1rem zueinander.

Paragraphen haben keinen festen Platz oder eine bestimmte Breite. Sie können überall auf dem Raster vorkommen und über verschieden viele Spalten des Rasters gehen. Das kommt ganz auf die Harmonie mit den anderen Modulen an. Sowohl die Überschriften, als auch der Paragraph selber sind linksbündig.

Paragraphen sind immer linksbündig und nehmen die volle Breite ein. Sie sollten allerdings nicht zu lang sein, nur ca. 2-4 Sätze am Stück. Dann müssen sie durch einen Zeilenbruch aufgetrennt werden.

Hervorhebungen im Text

Wenn im Text was hervorgehoben werden soll, kann man die Stelle in black, oder auch black italic setzen. Wenn die Stelle besonders viel Aufmerksamkeit erregen soll, dann kann man der Stelle einen animierten Highlight verleihen.

Paragraphen sollten nicht zu lang sein, nur ca. 2-4 Sätze am Stück. Dann müssen sie entweder durch einen Zeilenbruch aufgetrennt werden, oder, so wie dieser Abschnitt hier, an eine andere Stelle im Raster gesetzt werden.

Es gibt zwei Base-Farben und 3 Akzent-Farben. Die Farben funktionieren sowohl auf hellem, als auch auf dunklem Hintergrund. Das Blau wird auch als Hover-Farbe benutzt, während das Gelb die primäre Text-Highlight-Farbe ist.

Es gibt zwei Base-Farben und 3 Akzent-Farben. Die Farben funktionieren sowohl auf hellem, als auch auf dunklem Hintergrund. Das Blau wird auch als primäre Akzentfarbe benutzt, während das Gelb die primäre Text-Highlight-Farbe ist.

White
Smoke
#F7F7F7
Nero
#222222
Dodger
Blue
#3A86FF
Amber
#FFBE0B
Razzmatazz
#3A86FF

Um etwas Abwechslung reinzubringen ist bei langen Artikel zu empfehlen bei manchen Kapiteln einen dunklen Hintergrund zu benutzen.

Die Visualisierungen

Die Visuali-sierungen

Bilder sind grundsätzlich schwarz/weiß. Gepaart werden sie immer mit farbigen, geometrischen Formen und Linien. Diese könne deckend sein, aber auch als Overlay über die Bilder gelegt werden. Müssen Bilder hervorgehoben werden, so kann man sie in eine der Akzentfarben einfärben.

Menschen werden mit einem Gegenstand als Kopf dargestellt. Dieser Gegenstand sollte zum Thema des Kapitels passen.

Bilder können auch animiert werden. Entweder lässt man sie von der Seite reinfliegen, oder man animiert das Bild direkt. Die Animation wird dann als Lottie-Animation eingebettet.

Statistiken sollten wenn möglich animiert sein und einmalig abgespielt werden, wenn sie im Viewport erscheinen. In einer Bildunterschrift wird zur Quelle der Statistik verlinkt.

Es gibt verschiedene Module, die den Inhalt der Seite interaktiv und visuell ansprechend darstellen. Die Linien von diesen Modulen sind 0,188rem dick.

Dieses Modul eignet sich gut für Listen, in denen einzelne Punkte näher erläutert werden sollen. Es spart Platz und lässt dem Benutzer die Wahl, ob er die Erklärung lesen möchte oder nicht.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae arcu ac magna venenatis bibendum sit amet ut quam. Sed non sapien posuere, maximus ipsum id, bibendum ante. Ut auctor justo pellentesque, lacinia urna sed, luctus lectus. Nunc at ullamcorper ipsum. Phasellus in dapibus justo. Nam pretium fringilla tortor, ac consequat quam fringilla eget. Suspendisse potenti.

Ded diam nonumy eirmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae arcu ac magna venenatis bibendum sit amet ut quam. Sed non sapien posuere, maximus ipsum id, bibendum ante. Ut auctor justo pellentesque.

Stet clita kasd

Aenean aliquam purus eget nulla consectetur aliquam. Nunc in tristique nulla. Duis dapibus eros sit amet efficitur malesuada. Curabitur sed molestie elit. Vestibulum rhoncus sed mauris eget congue. Cras eros nibh, mollis non facilisis sed, lobortis et diam. Pellentesque malesuada est id orci faucibus venenatis.

Consetetur sadipscing elitr

Aliquam vitae risus felis. Vivamus dignissim augue magna, a iaculis ipsum fermentum ac. Nulla convallis tellus eu eros rutrum, nec interdum quam tincidunt. Nulla vel dolor at risus elementum consectetur. Fusce ultricies neque sed ipsum convallis interdum.

Das Tab-Modul

Das Tab-Modul erfüllt den gleichen Zweck wie das Accordion, nur es bietet visuell etwas Abwechslung. Bei beiden kann man übrigens auch Bilder hinzufügen

Lorem ipsum dolor

Mauris varius congue massa vitae finibus. Fusce pellentesque, turpis non ultricies tincidunt, ipsum elit venenatis neque, vel porta ex nisi aliquam urna. Quisque convallis lorem at nisl ultrices finibus. Etiam semper diam id lorem auctor, at posuere sem dictum.

Diam nonumy eirmod

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta vitae nulla eu elementum. Curabitur in varius augue, quis semper leo. Cras non ex luctus, sodales lorem non, tristique ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pellentesque neque et mi suscipit venenatis. Phasellus viverra pulvinar nisi quis iaculis. Pellentesque sodales feugiat nisi in molestie. Praesent vestibulum ultricies ullamcorper.

Suspendisse non erat urna

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

Maecenas tincidunt

Mauris varius congue massa vitae finibus. Fusce pellentesque, turpis non ultricies tincidunt, ipsum elit venenatis neque, vel porta ex nisi aliquam urna. Quisque convallis lorem at nisl ultrices finibus. Etiam semper diam id lorem auctor, at posuere sem dictum. Cras vestibulum sit amet neque eu dictum. Vestibulum sed purus viverra, mollis sapien in, congue mauris. Donec ac facilisis dolor. Sed mattis dolor at pellentesque sollicitudin. Mauris et tristique velit. Pellentesque tincidunt mi ac ultrices pretium. Fusce commodo augue nec faucibus aliquam.

Content Cards

Content Cards sind vielseitig einsetzbar. Sie eignen sich vor allem für kurze Listen.

Lorem ipsum dolor

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

Dieses Notizblatt eignet sich hervorragend, wenn die einzelnen Punkte einer Auflistung keine näheren Erläuterungen brauchen.

  • Ut cursus, erat nec commodo auctor, turpis augue ornare nisi, convallis mollis.
  • Mauris varius congue massa vitae finibus. Fusce pellentesque
  • Etiam semper diam id lorem auctor, at posuere sem dictum. Cras vestibulum sit amet neque eu dictum. Vestibulum sed purus viverra
  • Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta vitae nulla eu elementum. Curabitur in varius augue, quis semper leo.
  • Pellentesque sodales feugiat nisi in molestie. Praesent vestibulum ultricies ullamcorper.
  • Vestibulum rhoncus sed mauris eget congue. Cras eros nibh, mollis non facilisis sed, lobortis et diam.
  • Quisque convallis lorem at nisl ultrices finibus.

Verlinkungen

Manchmal wird auf Quellen oder andere Seiten im Infoportal verwiesen. Links sehen je nach Nutzen unterschiedlich aus. Will man auf Quellen oder Ressourcen verweisen, so kann man das z.B. so im Text machen. Dabei ist der verlinkte Teil blau und unterstrichen.

Es gibt auch Fußnotenzeichen [1]. Diese verweisen auf die Quelle, aus der die Information im Absatz stammt. Die Quellen zu dem jeweiligen Artikel befinden sich ganz unten [2].

Wenn man einem anderen Artikel besonders viel Aufmerksamkeit schenken will, kann man auch diese große Content Card benutzen, um darauf zu verweisen.

Wenn man einem anderen Artikel besonders viel Aufmerksamkeit schenken will, kann man auch diese Artikel-Content-Card benutzen, um darauf zu verweisen.

Key Takeaways

  • Key Takeaways befinden sich am Ende eines Artikels. Hier wird stichpunktartig nochmal die wichtigsten Punkte des Artikels zusammengefasst.
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Ut cursus, erat nec commodo auctor, turpis augue ornare nisi, convallis mollis elit leo at metus. Pellentesque suscipit ante ut libero tempus, sed commodo arcu eleifend.
  • In in augue lacus. In ac ipsum maximus, elementum turpis sed, consectetur lacus. Suspendisse vitae sagittis arcu. Donec eget libero justo.

Quellen

  1. Autor*innen. "Titel des Webseiten-Artikels". Jahr. Abgerufen am XX.XX.XXXX. URL: https://infoportal-681f3c.webflow.io/
  2. Autor*innen. "Titel der Publikation". Jahr. Journal. URL: https://infoportal-681f3c.webflow.io/