Bilder aufeinander

Mit Layout-Algorithmus zu mehr Ästhetik

16. Jul. 2021

Bilder als schönste Art der Erinnerung

Der Trend, Erinnerungen und Momente in Form von Fotos oder Videos festzuhalten, ist in den letzten Jahren stetig gestiegen.

Doch trotz der steigenden Vernetzung und der Möglichkeit, Fotos digital abzurufen und sie sich auf seinem Endgerät anzeigen zu lassen, haben personalisierte Fotobücher in analoger Form ihren Charme nicht verloren.

Studie Absatz Fotobücher

So wurde erst im Jahre 2020 mit mehr als 9 Millionen verkauften Fotobüchern deutschlandweit ein neuer Höchstwert aufgestellt.

Bei der Gestaltung eines Fotobuches sind dabei für den Kunden nicht nur die Bilder und die damit verbundenen Erinnerungen von Priorität, sondern vor allem auch die Darstellung dieser und die Gestaltung des Fotobuchs.

Dabei fällt es oftmals schwer, die Bilder an der richtigen Stelle zu platzieren, da das Verständnis für Ästhetik oder auch die Zeit, das Fotobuch nach seinen eigenen Wünschen zu gestalten, nicht gegeben sind.

Um dieser Herausforderung entgegenzuwirken und die individuelle Gestaltung von Fotobüchern im Nu‘ zu ermöglichen, haben wir einen Algorithmus entwickelt, durch den sich flexibel ästhetische Layouts im Handumdrehen erzeugen lassen.

Wie genau dieser Algorithmus funktioniert, welche Faktoren bei der Generierung des Layouts berücksichtigt werden und wie die Software in bestehende Projekte eingebunden sowie optimal verwendet werden kann, erfahren Sie in diesem Blogartikel.

Page-Layout Problematik – kennt doch jeder, oder?

Wer kennt es nicht? Man möchte die Erinnerungen an den letzten Sommerurlaub mit einer eigenen Collage, sei es für ein Fotobuch oder die Zimmerwand, festhalten, doch gibt es dabei unzählige Möglichkeiten die Bilder darzustellen – von denen längst nicht alle gut aussehen.

Grafik Page-Layout-Problematik

Bei der Entwicklung eines eigenen Layout-Algorithmus wird mit dem Page Layout Problem eine bekannte Problematik aufgegriffen. Diese Problematik wird anhand der links dargestellten Ab-bildung nochmals illustriert. Eine Reihe von Bildern oder Elementen (A-H) sollen anhand eines Seiten-Layout-Algorithmus auf einer Seite bzw. innerhalb eines definierten Raumes platziert und angeordnet werden.

Prinzipiell kann diese Aufgabe in zwei Schritte aufgeteilt werden:

  1. Es muss eine Auswahl an Bildern getroffen werden, die auf der Seite platziert wer-den sollen.

  2. Die Auswahl muss auf der Seite unter Betrachtung verschiedener Kriterien platziert werden. Dabei müssen für jedes Bild die Position, Rotation und die Skalierung berechnet und zudem eventuelle zeitliche Abfolgen, stilistische Vorgaben oder ästhetische Richtlinien berücksichtigt werden.

Durch diese Anforderungen ergibt sich, dass der Algorithmus eine Art Bauplan für die Platzierung und Gestaltung von Bildern liefern soll, der so konzipiert ist, dass das Ergebnis für den neutralen Betrachter als „ästhetisch“ oder „ansprechend“ empfunden wird. Um einen Bauplan zu konstruieren, muss der Algorithmus sich an klare Regeln bzw. Richtlinien orientieren. Diese werden auf Basis von Gestaltungsgrundsätzen, Design-Richtlinien und ästhetischen Faktoren im folgenden Abschnitt näher erläutert.

Bild Bildcollage

Was aber ist denn nun „ästhetisch“?

Man muss kein erfahrener Designer sein, um zwischen einer ansprechenden und einer unästheti-schen Fotobuch-Darstellung zu unterscheiden. Wenn man professionell angefertigte Fotobücher oder Bilderlayouts vergleicht, lassen sich in den meisten Fällen Muster sowie Regelmäßigkeiten erkennen, die bei der Erstellung des Layouts berücksichtigt wurden. Um hierfür ein besseres Verständnis über den Einsatz verschiedener Design- und Gestaltungsrichtlinien zu vermitteln, sind das Prinzip der Skalierung, des goldenen Schnitts und der Balance von besonderer Bedeutung.

Das Prinzip der Skalierung bezieht sich auf die Verwendung relativer Größen, um die Wichtigkeit und den Rang einer Komposition zu signalisieren. Elemente, die besonders hervorgehoben werden sollen, werden dabei als größtes dargestellt, da sie so am ehesten bemerkt werden. Um den Eindruck von Stabilität zu vermitteln, werden zudem bei der Layout-Gestaltung feste Linien eingehalten. Auch haben wir ermittelt, dass der äußere Rand eines Layouts, sofern vorhanden, stets größer als der innere Bildabstand sein muss, damit das Layout nicht als unausgewogen empfunden wird. Das rechts aufgeführte Layout berücksichtigt diesen Punkt, in dem der äußere Rand dem dreifachen Wert des inneren Bildabstand entspricht.

Bild Bildcollage

Der goldene Schnitt ist das wohl bekannteste Grundprinzip für das Beachten von Seiten- und Längenverhältnissen und wird oftmals auch „Göttliche Proportion“ genannt. Dieser beschreibt ein Teilungsverhältnis einer Strecke, dessen Verhältnis des Ganzen zu seinem größeren Teil (Major) dem Verhältnis des größeren zum kleineren Teil (Minor) entspricht.

Kurz gesagt: Der goldene Schnitt versucht mithilfe harmonischer Proportionierung ein Gefühl von Schönheit zu kreieren.

Die irrationale Zahl Phi (φ) beschreibt hierbei das Teilungsverhältnis für den goldenen Schnitt. Anwenden lässt sich dieses Verhältnis auf Größenproportionen verschiedener Bereiche oder auf die Position sowie das Seitenverhältnis von Elementen auf einer Seite. So verwendet das Layout-Beispiel etwa den goldenen Schnitt in der vertikalen Seitenaufteilung zwischen Weiß- und Bildfläche.

ϕ= a/b= (a+b)/a ≈1.618

Verschiedene Bildgruppen

Symmetrie erzeugt den Eindruck von Vollständigkeit und Balance. Balance meint dabei eine gleichmäßige optische Gewichtsverteilung auf der Seite. Die linke und rechte Hälfte einer Seite sollen in etwa gleich viel Inhalt enthalten. Diese Prinzipien können auch Einfluss auf die Farbe, Größe, Textur und Form der Elemente einer Seite nehmen.

Gleichzeitig möchten wir aber auch nicht die Reihenfolge der Bilder, also im Prinzip die Reihenfolge der Ereignisse, die durch die Bilder beschrieben werden, außer Acht lassen. Im besten Fall werden durch die Art des Layouts die Blicke des Betrachters gelenkt – als würden die Bilder ihre eigene Geschichte erzählen. So könnte etwa die Geschichte, der in der Abbildung dargestellten Komposition, von der einem schönen Familienwochenende an der Ostsee berichten.

Die Reihenfolge der Geschehnisse lässt sich dabei mit wenig Aufwand anhand des jeweiligen Zeitstempels der Bilder ermitteln. Die Zeitstempel der einzelnen Bilder können dann wiederum als zusätzlicher Parameter bei der Generierung des optimalen Layouts miteinbezogen werden.

Generierung eines Slicing-Floorplan-Layouts nach dem divide and conquer-Paradigma

Das Herzstück des Algorithmus ist eine binäre Baumstruktur, anhand dessen sich der genaue Aufbau des Layouts beschreiben lässt. Unter der Prämisse, den zur Verfügung gestellten Platz größtmöglich auszunutzen, muss die optimale Schnittstruktur für die Bilder ermittelt werden.

Als Schnittstruktur bzw. Schnittlinie wird hierbei eine Linie bezeichnet, die gerade und an ei-nem Stück horizontal oder vertikal gezogen werden kann, um Objekte in zwei Gruppen zu trennen. Wenn jede Gruppe erneut eine Schnittlinie aufweist, und dies auch rekursiv, bezeichnet man die sich daraus ergebende Struktur als Slicing Floorplan. Die Knoten des binären Baumes entsprechen dabei der Schnittstruktur zwischen den einzelnen Elementen (Bildergruppen) und die Blätter (Endknoten) den jeweiligen Bildern.

Layout-Algorithmus

Um die optimale Baumstruktur und somit auch das optimale Layout zu ermitteln, wird der Teile- und-Herrsche-Ansatz angewandt. Dabei soll das gesamte vorerst nicht lösbare "Problem“ solange rekursiv in kleinere „Teilprobleme“ zerlegt werden (divide), bis dieses „beherrscht“ werden kann (conquer). Aus den einzelnen Teillösungen kann anschließend eine Lösung für das „Gesamtproblem“ rekonstruiert werden.

Als erstes wird eine zufällige Baumstruktur erstellt, bei der sich die Anzahl der Knoten nach der Anzahl der verwendeten Bilder richtet. Für alle Endknoten werden nun die zwei am besten zueinander passenden Bilder ausgewählt.

Danach kann das Seitenverhältnis des gesamten Baumes bzw. der gesamten Bildergruppe rekursiv ermittelt werden. Ein Bewertungsverfahren gibt hierbei Auskunft darüber, ob das in dem jeweiligen Durchlauf entwickelte Layout die gewünschten Kriterien erfüllt. Zu diesen gehören beispielsweise eine möglichst geringe Abweichung des Seitenverhältnisses des Baumes zum Zielverhältnis oder auch eine genügend große Darstellung der Bilder in dem jeweiligen Layout.

In endlich vielen Durchläufen wird schließlich das für die gegebene Konstellation geeignetste Layout ermittelt und zurückgegeben. Dadurch ermöglicht der Algorithmus einen flexiblen Um-gang mit unterschiedlichen Seiten- und Bildformaten für eine bestmögliche Anordnung seiner Lieblingsbilder.

Cross-Kompatibilität durch eine Kotlin-Multiplattform-Bibliothek

Damit sich der Layout-Algorithmus leicht in andere Projekte einbinden lässt, wurde die Logik in einem separaten Bibliotheksmodul entwickelt. Die dabei verwendete Implementierung mit der Kotlin-Multiplatform-Bibliothek ermöglicht den Einsatz des Bibliotheksmoduls sowohl für Android- als auch für iOS-Projekte. Der Quellcode muss daher nicht nur in der plattformübergreifenden Programmiersprache Kotlin geschrieben werden, sondern darf darüber hinaus auch keinen nativen Android- oder iOS-Code enthalten.

Als Input erwartet das Bibliotheksmodul die Bilder, die dargestellt werden sollen. Da es sich bei dem hier vorgestellten Algorithmus um einen Layout-Generator für Fotobücher handelt, muss zudem das verwendete Buchformat angegeben werden. Diese Daten werden dann an das Bibliotheksmodul übergeben.

Das folgende Code-Beispiel veranschaulicht, welche Funktionen mit welchen Parametern von einem Programm aufgerufen werden müssen, um in nur wenigen Schritten ein ästhetisches Layout zu erzeugen.

Unter (1) wird der Input gelistet. Die Seite, auf der die Elemente dargestellt werden sollen, wird durch die Klasse Page beschrieben. Alle seitenspezifischen Informationen, wie z.B. die Höhe und Breite (205mm x 270mm), werden dabei als Parameter bei der Instanziierung übergeben. Die durch die Klasse Picture beschriebenen Bilder können in dem obigen Beispiel durch die Liste pics abgefragt werden. Alle weiteren Parameter, die bei der Gestaltung des Layouts berücksichtigt werden sollen, wie beispielsweise der innere Bildabstand (gapSize; 5mm), können im Rahmen einer Instanz der Klasse Settings festgehalten werden (2).

Unseren finales Layout erhalten wir schließlich durch den Aufruf der Methode AestheticLayout(page, pics).createInstruction(settings) (3). Dabei übergeben wir alle wichtigen Informationen, die der Algorithmus für die Layoutgenerierung benötigt und erhalten das gewünschte Layout in Form eines Layout-Templates, anhand dessen sich die genauen Positionen und Maße der verwendeten Bilder für das angebende Format ableiten lassen. Über den Aufruf der Methode instruction.printAllCoordinates() (4) lassen sich darüber hinaus alle Koordinaten der einzelnen Elemente auf der Seite ausgeben.

Mit Machine Learning in die Zukunft?

Mit dem hier vorgestellten Ergebnis liefern wir einen innovativen Ansatz, Layouts unter Berücksichtigung ästhetischer Grundsätze zu erstellen - und das mit sehr geringem Aufwand. Die smarte Implementierung erlaubt dabei einen flexiblen Umgang mit unterschiedlichen Bild- und Seitenformaten. So muss sich ein Nutzer unserer Layout-Bibliothek weder Gedanken um den Aufbau des Layouts machen noch Zeit in manuelle Prozesse, wie beispielsweise das Zuschneiden von Bildern, investieren.

Der Algorithmus eignet sich hierbei jedoch nicht nur für die Generierung von Layouts für Fotobücher. Durch die Cross-Plattform-Kompatibilität der Layout-Bibliothek lässt sich der Algorithmus leicht in bestehende Android- und iOS-Projekte einbinden. So kann die Software z.B. auch für die Gestaltung von Plakaten, Reklamen, Postkarten oder anderen gestalterischen Kompositionen verwendet werden.

Lässt man den ästhetischen Aspekt bei der Layout-Generierung außer Acht, so lässt sich die Software auch für das Ermitteln des Grundrissdesign von VLSI-Schaltkreisen anwenden. Dabei kann ein gegebener Satz von Rechteckschaltungsmodulen in einer Ebene so platziert werden, dass die Fläche des Begrenzungsrechtecks, das alle Module enthält, minimal ist. Im Allgemeinen wird dieses Optimierungsproblem auch als "floorplan area optimization problem" bezeichnet.

Der Layout-Algorithmus bietet auch für die Zukunft viel Potenzial für den Bereich des Machine Learnings und der damit verbundenen Verwendung von Optimierungsalgorithmen. So könnte etwa der Suchprozess der optimalen binären Baumstruktur für die Layout-Struktur mit dem Einbinden einer Tabu-Suche optimiert werden – ähnlich wie bei evolutionären Algorithmen, ist die Tabu-Suche ein metaheuristisches Optimierungsverfahren zur Lösung oder Annäherung von komplexen Problemen.

Christopher Heyn

Unser Layout-Experte

ist für Sie da!

Christopher Heyn
Haben Sie Fragen?

Weitere Blogartikel

23. Jun. 2022

Simulierte Netzwerktests

Blog

Mobiles Internet für alle – vor 20 Jahren noch eine weit entfernte Vision, heute bereits Realität. 86% der Deutschen besitzen laut einer aktuellen [Statistik](https://de.statista.com/statistik/daten/studie/585883/umfrage/anteil-der-smartphone-nutzer-in-deutschland/) heutzutage bereits ein internetfähiges Smartphone, Tendenz steigend. Gleichzeitig bildet Deutschland jedoch das Schlusslicht Europas wenn es um das Thema Netzausbau geht – nur 65% des Landes wird mit einem 4G Netz abgedeckt, 2% weniger als in Albanien und 24% hinter den Niederlanden, siehe aktuelle [Analysen](https://www.opensignal.com/reports/2018/02/state-of-lte). Diese Diskrepanz führt zu einem beinnahe alltäglichen Problem in der mobilen Anwendungsentwicklung. Nahezu jede Anwendung besitzt heutzutage Funktionalitäten, die eine Internetverbindung benötigen. Dabei gehört es grundsätzlich zu den Anforderungen an ein Softwaresystem, dass dieses unter allen sich ihm bietenden Netzwerkbedingungen stabil, oder zumindest vorhersagbar agiert. mehr

01. Mai. 2022

Benutzerdokumentation automatisiert generieren

Blog

Die agile Softwareentwicklung hat sich in den letzten Jahren zu einem wichtigen Ansatz der technischen Umsetzbarkeit entfaltet. Neben den Vorteilen, wie z. B. Flexibilität, Fehlererkennung und erhöhte Performanz durch eine stetige Kommunikation, bringt eine agile Softwareentwicklung jedoch auch Einschränkungen mit sich. So wird die Dokumentation - zu welcher auch die Benutzerdokumentation zählt - eher relativiert betrachtet und zugunsten der engen Zusammenarbeit zwischen Entwickler:innen, Tester:innen, Kund:innen und Nutzer:innen auf ein Minimum beschränkt. Bedingt durch Covid-19 musste der persönliche Kontakt mit Kunden, welcher in einer agilen Entwicklungsumgebung einen hohen Stellenwert besitzt, auf ein Minimum reduziert werden. Dabei gewann Software allgemein in den letzten Jahren immer mehr an Komplexität, welches auch eine zunehmende Rolle in der Organisation von Informationen innerhalb der Benutzerdokumentation zur Folge hat. mehr

28. Apr. 2022

Empathy Maps als UX-Tool

Headerbild Empathy Maps
Blog

In Entwicklungs-, Design- oder Marketing-Teams bestehen oftmals unterschiedliche Vorstellungen von Zielgruppen, bzw. dem Endnutzer einer Applikation. Dies kann dann problematisch werden, wenn bspw. neue Features geplant oder versucht wird, den Endnutzer in Texten sowie Bildern direkt anzusprechen. Vor allem aber führt dies oftmals zu langwierigen Prozessen sowie Entscheidungen über die Nutzer und deren Bedürfnisse. Um dieser Herausforderung entgegenzuwirken, lassen sich unterschiedliche Ansätze sowie Methoden nutzen. Eine besonders effiziente und in der Umsetzung einfache Methode ist die „Empathy Map“. Empathy Maps sind ein agiles Tool im Bereich des User Experience Designs, das dabei hilft, die Nutzer sowie deren Bedürfnisse besser zu verstehen und ein einheitliches Mindset im Projekt-Team zu etablieren. Die Nielsen Norman Group, eine Erfolgreiche UX Beratungsfirma aus Amerika, welche von den User Experience Pionieren, Don Norman und Jakob Nielsen gegründet wurde, definiert Empathy Maps wie folgt: mehr

15. Apr. 2022

Flexibel einsetzbare Markupsprache

Blog

Die Idee, dass Daten wertvoll sind und das strukturierte Speichern dieser sinnvoll ist, wurde schon in den 60er Jahren im Konzept des Generic Coding erkannt. Diese Versuche, eine vereinheitlichte Sprache zur Beschreibung von Daten zu entwickeln, mündeten 1986 in die Entstehung der Standard Generalized Markup Language (SGML), welche sich durch die Verwendung von sogenannten Tags auszeichnet. Die Ähnlichkeit zu modernen Markup-Sprachen wie HTML oder XML ist kein Zufall, da diese SGML-konform entstanden sind, sich aber mittlerweile davon gelöst haben, um ihre Struktur weniger eingeschränkt anpassen zu können. mehr