Layouts aus dem Rechenschieber

In PAGE 04.2015 stellen wir smarte Algorithmen für responsive Layouts vor. Hier finden Sie die Links zum Artikel.

Wie die steigende Zahl an Bildschirmgrößen die Anforderungen an Gestalter verändert, macht das folgende Beispiel deutlich:  Der kalifornische Mathematiker Patrick Kessler hat gemeinsam mit dem Designer Hugh Dubberly berechnet, dass es allein für ein Raster aus 4 mal 3 Quadraten 892 verschiedene Möglichkeiten gibt, diese Fläche aufzuteilen. Gemeinsam mit dem Designer Thomas Gaskin hat er aus dieser nüchternen Information ein beeindruckendes Poster gemacht:
www.dubberly.com/concept-maps/3x4grid.html

Der Ursprung algorithmisch generierter Layouts ist vermutlich im Bereich der Informationsvisualisierung bzw. bei visualisierenden Interfaces zu suchen.

Treemap, Ben Shneiderman ca. 1980
http://de.wikipedia.org/wiki/Tree_Map
http://www.cs.umd.edu/hcil/treemap-history/
http://www.cs.umd.edu/hcil/treemap/

The Evocative Charm of Treemaps
https://medium.com/@mslima/the-evocative-charm-of-treemaps-9051c3b8de6a

Treemap Art Project
https://treemapart.wordpress.com
http://www.cpnas.org/exhibitions/archive/treemaps.pdf

Vergleiche »Abstract Browsing« – Rafaël Rozendaal (2014), scheinbar kein großer Unterschied zur Treemap
http://www.abstractbrowsing.net

Die Google News Map (von Marcos Wescamp aka Maramushi – der übrigens inzwischen Head of Design bei Flipboard ist) ist eine der bekanntesten Treemaps:
http://newsmap.jp

Eine neuere Treemap von Dataveyes für Canal+
http://dataveyes.com/#!/en/projects/canal
http://cesar-2014.canal-plus.pro

Anwendungen mit integrierten Algorithmen

Der News und Social Media-Aggregator Flipboard generiert seine Layouts über die proprietäre Engine Duplo
http://engineering.flipboard.com/2014/03/web-layouts/

Auch die News Plattform Vox nutzt Algorithmen für ihre Layouts
http://product.voxmedia.com/2014/12/17/7405131/algorithmic-design-how-vox-picks-a-winning-layout-out-of-thousands

Die Blogging Plattform The Grid verspricht nicht nur automatisches Layouts, sondern eine komplette Webseite durch den Einsatz künstlicher Intelligenz
http://www.psfk.com/2014/10/blogging-platform-uses-ai-to-automatically-design-your-website.html
https://thegrid.io

MIT Fold  wurde als Newsplattform für Journalisten konzipiert, die kontextuellen Content generiert – durch Autoren und Algorithmen
http://fold.media.mit.edu/
http://www.fastcodesign.com/3033790/mit-rethinks-how-you-consume-news

Layout Engines – Algorithmen erobern den Designprozess

Um Algorithmen in eigene Anwendungen zu integrieren, gibt es eine Reihe von Grid-Frameworks:

Packery
http://packery.metafizzy.co

Masonry
http://masonry.desandro.com

Isotope
http://isotope.metafizzy.co

Gridster.js
http://gridster.net

Shapeshift
https://github.com/McPants/jquery.shapeshift

Wissenschaftliche Papers über Algorithmic Layouts:

Automatic personalized newspaper layout
http://dspace.mit.edu/handle/1721.1/34336

Web Newspaper Layout Optimization
http://geneura.ugr.es/~jmerelo/habilitacion2005/papers/11-newspaper-IEEE.pdf

Exploring Alogorithms as Form Determinants in Design
http://www.ucl.ac.uk/bartlett/3sss/papers_pdf/24_asojo.pdf

Automatic Layouting of Personalized Newspaper Pages
https://www.dai-labor.de/fileadmin/Files/Publikationen/Buchdatei/or_automatic_newspaper_layouting.pdf

Dynamic Layout Optimization for Newspaper Web Sites using a Controlled Annealed Genetic Algorithm
http://brage.bibsys.no/xmlui/bitstream/handle/11250/144066/Brabrand+-+Dynamic+Layout+Optimization+for+Newspaper+Web+Sites+using+a+Controlled+Annealed+Genetic+Algorithm.pdf?sequence=1

A Geometric Bisection Algorithm for Automatic Page Layout
http://www.gpec.ucdb.br/sibgrapi2008/posters/47825.pdf

The Alphabet and the Algorithm, Mario Carpo
https://books.google.de/books?id=9COoFrSB5H8C&pg=PA31&lpg=PA31&dq=Le+Corbusier+Algorithm&source=bl&ots=UNc43PGEY7&sig=Ura-mCjsACksf5Wir_puoc-0zF4&hl=de&sa=X&ei=n3-2VMGbI-W5ygORzoKICQ&ved=0CFUQ6AEwBg#v=onepage&q=Le%20Corbusier%20Algorithm&f=false