Layouts aus dem Rechenschieber
Die steigende Zahl an Bildschirmgrößen macht es immer aufwendiger, responsive Apps und Webseiten zu erstellen. Jetzt sollen smarte Algorithmen helfen, Layouts zu entwerfen.

●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
Schlagworte: Grafikdesign, Webdesign

Schreibe einen Kommentar