Designagentur Schumacher

entwickelt medienübergreifende Designlösungen für zukunftsorientierte Menschen.

Blog

Kartenbasiertes Webdesign mit Masonry

Kartenbasiertes Webdesign mit Masonry

06. Juli 2016 |
Tags: , , ,
Kategorie: Tipps & Tutorials

Cardbased Webdesign beschreibt eine benutzerfreundliche Design-Methode, um Elemente auf einem Interface anzuordnen. Die Elemente werden dabei nach inhaltlichen Aspekten untergliedert und in karten- oder kachelähnlichen Formaten angeordnet.
Das bekannteste Beispiel dafür ist Pinterest – die Website, auf der viele wahrscheinlich zum ersten Mal diese Layoutmethode gesehen haben. Deshalb wird Cardbased Webdesign oft auch als Pinterest-Layout bezeichnet.

Noch immer liegen diese kartenbasierten Grids voll im Trend und haben sich über die Jahre auf vielen digitalen Anwendungen für ganz unterschiedliche Zwecke etabliert: zum Beispiel um die Bilder einer Bildergalerie oder Blogbeiträge in einer Blogübersicht strukturiert darzustellen. Weitere Webauftritte, die diese attraktive Darstellung ebenso nutzen sind FacebookTwitter – und natürlich Schumacher.

Masonry positioniert intelligent und dynamisch

Auch wenn der Trend schon länger anhält, hat sich die Art und Weise, wie Elemente angeordnet werden weiterentwickelt. Bei reinen CSS-basierten Lösungen, sprich Elementen, die per CSS gefloatet werden, können Weißraum und Lücken entstehen, wenn Elemente unterschiedliche Formate aufweisen. Beim Einsatz von JavaScript-Plugins hingegen ist eine intelligente und dynamische Positionierung möglich. Der vorhandene Platz wird somit optimal genutzt.

Die populärste Lösung dafür ist das JavaScript-Plugin Masonry.js, vom Entwickler David DeSandro. Masonry bedeutet frei übersetzt so viel wie »Mauerwerk«. Und eben daran orientiert sich diese Grid-Methode. Elemente werden wie Steine in einer Mauer angeordnet und verzahnt, so dass keine bis möglichst wenig Lücken entstehen.

CSS basierte Anordnung im Vergleich mit plugingestützter Anordnung (z.B Masonry.js)

Neben Masonry gibt es selbstverständlich noch weitere Bibliotheken, die jeweils ihre eignen Vor- und Nachteile haben. Isotope.js und Wookmark.js werden ebenfalls häufig eingesetzt. Die Installation der Plugins geht schnell und unkompliziert. Eine Anleitung sowie entsprechende Anwendungsbeispiele für die Implementierung finden sich in der Regel auf der Website oder dem Github-Projekt des entsprechenden Plugins.

 

DIESE BEITRÄGE KÖNNTEN SIE AUCH INTERESSIEREN

Webdesign: Darum lohnt sich Prototyping

Webdesign: Darum lohnt sich Prototyping

In vielen Branchen werden Produkte bereits in einem frühen Stadium als Vorabversion getestet. Prototyping hat sich auch bei der Entwicklung digitaler Produkte bewährt.

15. Juli 2016 | 2 Kommentare

Stratocumulus Creativus – heiter bis wolkig?

Stratocumulus Creativus – heiter bis wolkig?

Ist die Zukunft eine Wolke? Über die Vor- und Nachteile der Adobe Creative Cloud.

15. August 2013 | Kommentar schreiben

Vielfach. Einfach. Symbole in Illustrator

Vielfach. Einfach. Symbole in Illustrator

Wie erstellen wir Symbole in Illustrator? Wie funktioniert das alles eigentlich? Und wozu überhaupt? – Antworten in diesem Tutorial

28. April 2014 | Kommentar schreiben

2 Kommentare

  1. davehall schrieb am 17. Januar 2017 07:41

    Really great post, I am happy to be here. Thank you for sharing This knowledge.Excellently written article, if only all bloggers offered the same level of content as you, the internet would be a much better place. Please keep it up! Nowadays I can‘ see any new posts in your blog, make your site more active and keep blogging with new contents.

    • Christian Müller-Brinkum schrieb am 23. Januar 2017 14:15

      Hi Dave,
      thanks for your pleasant feedback! We are glad that you and other people find our articles useful. (Un)fortunately we are very busy at the moment and share your sadness about the irregularity of publishing. Nevertheless, we plan to release articles more frequently.

Schreibe einen Kommentar