Category: Communication Design

After having selected a testing interface and certain visual variables that I want to experiment with, I developed variations of the original basis interface.

Colour

Starting with colour, I first researched what has been dubbed as the world’s “most beautiful” colour: “Marrs Green” by G.F Smith (n.d.). Secondly, I searched for the world’s “ugliest” colour, which some people claim is the brown hue Pantone 448C (Pathak, 2016). Then I filled up my test palette with several colours from Odushegun’s (2023) research and landed on a trial palette of 6 colours.

Typography

Subsequently, I build a typographic palette. I added some more typefaces from Odushegun (2023) but also included freely selected other fonts. I used the following typefaces: Roboto by Christian Robertson (Google Fonts), Raleway by, Roboto Slab by Christian Robertson (Google Fonts), Comic Sans by Vincent Connare (Microsoft Corporation), Playfair Display by Claus Eggers Sørensen (Google Fonts), Papyrus by Chris Costello (Microsoft Corporation) and Courgette by Karolina Lach (Google Fonts).

White Space

Then, I adjusted the white space between texts, once trying very little, a medium amount and a lot of white space.

Webdesign Styles

And finally, I moved away from my more serious testing framework and tried to build my testing interface in the different web design styles (see: previous blog posts). I tried out (from left to right) skeuomorphismus, flat design, neomorphism and glassmorphism. However, those did not feature in the following experiment as they were very complex and included not only one isolated change of an aesthetic feature but multiple changes and the addition of stylistic elements like drop shadows, transparency, …

After having build those variations, I decided to put my first trial framework to test. More in the next blogpost…

References:

• G.F Smith. (n.d.). G . F Smith Colorplan Marrs Green. Retrieved June 17, 2023, from https://www.gfsmith.com/gf-smith-colorplan-marrs-green
• Odushegun, L. (2023). Aesthetic semantics: Affect rating of atomic visual web aesthetics for use in affective user experience design. International Journal of Human-computer Studies, 171, 102978. https://doi.org/10.1016/j.ijhcs.2022.102978
• Pathak, S. (2016, June 7). The world’s ugliest colour is Pantone 448C, say experts. Evening Standard. Retrieved June 17, 2023, from https://www.standard.co.uk/lifestyle/the-world-s-ugliest-colour-is-pantone-448c-experts-say-a3265856.html

– by Elena Waschl

Inhalte:
1. Diskussionsrunde auf Basis der Design Research Themen
2. Fifteen Seconds

1. Diskussion

MY TOPIC & JANA´s INPUT 

A. Describe your current project in 5 sentences:

Designers need to understand and create the identity of a company. By a professional and high quality Corporate Identity the value of the company rises. The overall CI must work at all touchpoints. But this is exactly where it fails. The CI must be sustainably manageable and work in long term without having to contact the designer at the same time.

PROBLEM: What we are lacking in practice is a general guideline for the efficient implementation, management and long-term maintenance of the corporate identity.

QUESTION:

1. What would an all – encompassing Corporate Identity Guideline look like?
2. What Design Content does it cover?
3. In which design Range can the guideline be used?

B. 1Q. from a colleague & write down answer

When does the first contact with the client and you as a guideline designer take place…? 
> I really want that the client talks with the guideline designer at the very first beginning

 Where did you get information for this topic?
> In the library of FH JOANNEUM I borrowed some books

C. What did you learned from the note?

I collected some key words from the discussion which I can keep on working with e.g. Gerüst / Manual 

By talking with Jana and describing my project I came up with following aspects which were not clear to me before that they could pay a key role:
So einfach wie möglich, so komplex wie nötig!
Was sind die Parameter die ich definieren muss?
Wie deppensicher gestaltet man diese guidline dass alle Gewerke damit arbeiten können.

2. Fifteen Seconds Day 1
Diese Tage findet von 15.6. – 16.6.2023 das Fifteenseconds Festival in Graz statt.
Über den ersten Tag möchte ich einige KEY Notizen teilen, welche sich rund um´s Storytelling, Female Leadership und so weiter drehen. Diese Ansichten der Speaker können genauso in die Guideline fließen.

As I started to gather some first aspects and ideas of how visual storytelling can be used in editorial design in my previous blog post, I now collected some literature sources that may help me dive deeper into this topic:

“Design is Storytelling“ by Ellen Lupton

“Visual Storytelling: Inspiring a New Visual Language” by Robert Klanten, Sven Ehmann and Franz Schulze

“The Art of Explanation: Making Your Ideas, Products, and Services Easier to Understand” by Lee LeFever

“Designing News: Changing the World of Editorial Design and Information Graphics” by Francesco Franchi

“Visual Journalism: Infographics from the World’s Best Newsrooms and Designers” by Javier Errea

“Layout Essentials: 100 Design Principles for Using Grids” by Beth Tondreau

“The Language of Graphic Design: An Illustrated Handbook for Understanding Fundamental Design Principles” by Richard Poulin

“Design for Information: An Introduction to the Histories, Theories, and Best Practices Behind Effective Information Visualizations” by Isabel Meirelles

“Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students” by Ellen Lupton

“Visual Thinking for Design” by Colin Ware

“How to Use Graphic Design to Sell Things, Explain Things, Make Things Look Better, Make People Laugh, Make People Cry, and (Every Once in a While) Change the World” by Michael Bierut

“Visual Storytelling im Design Thinking: die Kraft von Bildern und Geschichten” by Felicidad Romero-Tejedor

After having read about what aesthetic experiences are, which different visual aesthetics exist in UX design, how aesthetics can influence usability (or vice versa), it is time for a first trial experiment. My goal for this term is not to build a complete user test to determine the connection, but rather lay the groundwork, experiment, and deepen my understanding for it to build a test hypothesis and prepare for an A/B-test in the future.

For this, I want to build a first trial framework of atomic web aesthetics and try different variations (possibly replicating large-scale UX trends), taking the general principles of “beautiful design” into account. To build a first set of testing variables, I will loosely orient myself on previously conducted research like a study by Odushegun (2023) who tested the affect ratings of atomic visual web aesthetics (see: previous blog posts). Odushegun (2023)  tested the effect of different typefaces, colours and animation effects. However, I will leave out motion in my following experiments to simplify the research. In addition to those factors, I will observe the use of white space and the use of stylistic devices (drop shadow and glow, gradients and gloss, transparency) in accordance with previous readings.

As a first testing interface I am going to use a feature from an old personal project of mine: the app “Plantlove”. The purpose of the app is to help people take care of their house plants and the selected screen depicts a search database where you can enter which plant you own is having problems, select the type of problem the plant encounters and then search for a solution.

Task for the test user:

“Your rubber plant has brown leaves. Search for a solution in the database.”

In the next week, I will experiment with the visual web aesthetics of this basis interface.

References:

• Odushegun, L. (2023). Aesthetic semantics: Affect rating of atomic visual web aesthetics for use in affective user experience design. International Journal of Human-computer Studies, 171, 102978. https://doi.org/10.1016/j.ijhcs.2022.102978

Da der Druck mit dem Riso manchmal ein bisschen eigen sein kann, habe ich alle wichtigen Schritte, die mir in den Sinn gekommen sind, zusammengefasst. Ich dachte, dass es anderen helfen könnte, die es ausprobieren möchten, oder auch mir selbst, falls ich etwas vergesse. Dies ist eine kleine Checkliste, die vor dem Druck zu beachten ist. In einem weiteren Beitrag werde ich erklären, wie man den Riso verwendet, nachdem die Dateien vorbereitet wurden.

1. Gestaltung der Illustration:

Die Illustration wird wie gewohnt in Illustrator erstellt, wobei die gewünschten Farben und Verläufe verwendet werden. Es empfiehlt sich, die Farben bereits in der Gestaltung einzusetzen, um Verwechslungen zu vermeiden. (Google der Risofarbe gibt einen verwendbaren Code)

2. Kopieren des Designs für jede Farbe:

Sobald die Illustration fertig ist, wird eine Kopie für jede Farbe erstellt, die im Risodruck verwendet werden soll. Dazu wird die gesamte Illustration ausgewählt und kopiert. Dieser Schritt wird für jede Farbe wiederholt.

3. Bearbeiten der Farbebenen:

Jede Kopie der Illustration wird geöffnet und in jeder Ebene werden alle Farben außer den gewünschten Farben gelöscht. Durch Auswahlwerkzeuge können die unerwünschten Farben markiert und anschließend gelöscht werden. Auf diese Weise bleibt in jeder Farbebene nur eine Farbe übrig.

4. Gradients:

Bei Verläufen in der Illustration werden diese in eine einheitliche Farbe umgewandelt. Die Farbpunkte die in dieser Farbe nicht gedruckt werden sollen, werden auf Weiß gesetzt und die Deckkraft auf 0% reduziert. Es darf nur die Farbe übrig bleiben die am Ende gedruckt werden soll.

5. Anordnen der Farbebenen und Exportieren:

Alle Farbebenen werden exakt übereinander angeordnet, um eine korrekte Ausrichtung der Farben im Druck sicherzustellen.

Jede Zeichenfläche wird einzeln ausgewählt und als separate PDF-Datei exportiert. Die Dateien werden entsprechend der repräsentierten Farbe benannt. 

6. Vorbereiten der Dateien für den Druck:

Der Druck erfolgt, indem jede Farbebene einzeln gedruckt wird. Dabei wird jeder Farbe ausreichend Zeit zum Trocknen gegeben. Es empfiehlt sich, mehrere Blätter Papier (mindestens 5) zu verwenden, um sicherzustellen, dass die Farbe sich vollständig auf alle Teile überträgt bevor man auf dem endgültig gewählten Papier druckt. Damit man am Ende nichts verschwendet. 

Die Deckkraft der Farbe auf dem Risodrucker kann auf 5 eingestellt werden, um optimale Ergebnisse zu erzielen.

Tips:

• Farbe ausreichend trocknen lassen zwischen den Druckvorgängen
• Räder putzen falls Abdrücke entstehen
• Wenn man doppelseitig druckt sehr lange trocknen lassen, da dadurch viele Abdrücke entstehen

Um zu sehen, wie die exportierten Dateien aussehen sollten, zeige ich in meinen anderen Postings die Source Files von jedem Druck.

Im Zuge der Einheit DesRes2 mit Ursula Lagger wurden wir dazu angehalten unser Forschungsgebiet und unsere Forschungsfrage in ein paar Sätzen zu erklären und unsere Forscungsfrage zu definieren. Mir wurde klar, dass ich die Problematik und meinen Ansatz noch nicht klar in ein paar Sätzen definiert habe. Daher habe ich versucht das zu tun und eine Forschungsfrage zu finden. Mir ist klar dass ich das Thema noch genauer definieren muss und das Fled noch weiter eingrenzen muss. Hier ist die erste Eingrenzung:

Obwohl das Gendern als ein Schritt in Richtung sozialer Veränderung und Fortschritt betrachtet wird, bleibt das generische Maskulinum in unserer Gesellschaft immer noch der Standard. In der Politik versucht man, das Problem durch Gesetze und Vorgaben zu lösen, doch dabei wird oft das Gendern aus ästhetischen Gründen oder zur Aufrechterhaltung des Leseflusses vernachlässigt. Ein möglicher Lösungsansatz besteht darin, Typografen in den Prozess einzubeziehen, da sie sich mit Schrift und der Umsetzung von Genderfragen aus typografischer Sicht befassen können. Angesichts dieser Herausforderung stellt sich die Frage: “Wie kann das Fachgebiet der Typografie dazu beitragen, geschlechtsneutrale Sprache in einer Weise zu gestalten, die sowohl ästhetisch ansprechend als auch leicht lesbar ist?”

Bei der Konzeption und Planung eines Leitsystems sind mehrere wichtige Aspekte zu berücksichtigen. Hier sind einige davon:

Zielsetzung: Definieren Sie klar die Ziele des Leitsystems. Was soll es erreichen? Soll es Besucher lenken, Informationen vermitteln oder Orientierung bieten? Die Zielsetzung bestimmt die gesamte Gestaltung des Leitsystems.

Benutzerbedürfnisse: Berücksichtigen Sie die Bedürfnisse und Anforderungen der Benutzer. Welche Informationen benötigen sie? Welche Art von Navigation ist am effektivsten? Ein Leitsystem sollte intuitiv und benutzerfreundlich sein.

Kontextuelle Anpassung: Berücksichtigen Sie den Kontext, in dem das Leitsystem verwendet wird. Welche Art von Umgebung ist es (Innen- oder Außenbereich)? Welche architektonischen oder räumlichen Merkmale sind vorhanden? Das Leitsystem sollte sich in den vorhandenen Kontext einfügen und harmonisch wirken.

Konsistenz: Stellen Sie sicher, dass das Leitsystem konsistent ist. Verwenden Sie einheitliche Symbole, Farben, Schriftarten und Designelemente. Konsistenz erleichtert die Benutzung und sorgt für ein einheitliches Erscheinungsbild.

Barrierefreiheit: Berücksichtigen Sie die Barrierefreiheit des Leitsystems. Stellen Sie sicher, dass Informationen auch für Menschen mit Behinderungen zugänglich sind. Verwenden Sie klare Schriftarten, ausreichende Kontraste und Braille-Schrift, wenn erforderlich.

Sichtbarkeit und Lesbarkeit: Stellen Sie sicher, dass das Leitsystem gut sichtbar und lesbar ist. Verwenden Sie ausreichend große Symbole, Beschriftungen und Pfeile, damit sie auch aus der Entfernung gut erkennbar sind. Achten Sie auf gute Beleuchtung und klare Anbringungsorte.

Informationshierarchie: Denken Sie über die Hierarchie der Informationen nach. Welche Informationen sind am wichtigsten und sollten hervorgehoben werden? Organisieren Sie die Informationen in einer klaren und verständlichen Struktur.

Flexibilität und Erweiterbarkeit: Planen Sie das Leitsystem so, dass es flexibel und erweiterbar ist. Es sollten Änderungen oder Ergänzungen in der Zukunft möglich sein, ohne das gesamte System umzustrukturieren.

Ästhetik: Ein Leitsystem sollte nicht nur funktional, sondern auch ästhetisch ansprechend sein. Denken Sie an das Gesamtbild und die Wirkung des Systems. Ein gut gestaltetes Leitsystem kann auch die Atmosphäre eines Ortes verbessern.

Evaluierung und Überarbeitung: Nach der Implementierung des Leitsystems sollten regelmäßige Evaluierungen durchgeführt werden, um dessen Effektivität zu überprüfen. Nehmen Sie Feedback von Benutzern entgegen und seien Sie bereit, das System zu überarbeiten, um es kontinuierlich zu verbessern.

Diese Aspekte sind wichtige Überlegungen bei der Konzeption und Planung eines Leitsystems, um sicherzustellen, dass es die Bedürfnisse der Benutzer erfüllt und effektiv funktioniert.

Dieser Blogpost war nicht als nächster geplant, jedoch ist das Thema zu aktuell, um es nicht sofort zu behandeln. Wie im Titel schon ersichtlich handelt es sich um die neuen KI-Funktionen von Photoshop. Aufmerksam darauf bin durch die extrem vielen Tik Toks geworden die sich plötzlich in meiner „For You Page“ befunden haben. Bei vielen Videos konnte ich meinen Augen nicht trauen. Es sah so einfach aus und die Möglichkeiten scheinen unbegrenzt. Ich sah Videos in denen Personen aus dem Foto geschnitten wurden, Hintergründe und Kleidungen wurde getauscht, Personen haben sich durch dieses neue Feature schminken lassen etc. und all dies nur durch einen klar gesetzten Prompt.

Beim ersten Versuch habe ich ein Foto genommen, dass ich am Wochenende von einer Bar aufgenommen habe. Hier das Ausgangsbild:

Durch ein paar Prompts habe ich das Foto erweitert einen weiteren Gast und eine Bengal Katze hinzugefügt, einen Elefanten in die Szene mit eingebunden und die Pflanzen Deko der Bar um eine große Palme erweitert. Hier ist das Endresultat:

Beim zweiten Versuch habe ich es mir zum Ziel gemacht ein Foto das von mir in Wien aufgenommen wurde so um zu modellieren, dass es so aussieht als wäre ich im Urlaub. Hier ist das Ausgangsfoto, einige Vorschläge die mir die KI gemacht hat und das ist das Endresultat:

Fazit: Die neuen Möglichkeiten die Photoshop uns hier bieten sind wirklich cool. Es dauert etwas bis man weiß wie man richtige Prompts setzt um ein gutes Ergebnis zu bekommen und soweit ich in Foren gelesen habe geht die Abfrage bis jetzt nur auf Englisch. Des Weiteren dauert es auch ein wenig bis die KI die Prompts generiert hat. Ich glaube dieses Tool wird mir sehr gut in Zukunft behilflich sein, denn es spart einem/einer Designer/in einfach sehr viel Zeit.

Für die Erhaltung und Pflege meiner Cyanotypien war es wichtig, sie vor Umwelteinflüssen zu schützen, die zu Verblassen oder Verfall führen könnten.

Ich bewahrte meine Werke an einem kühlen und trockenen Ort auf, der vor direkter Sonneneinstrahlung geschützt war. Hitze und Feuchtigkeit konnten dazu führen, dass Cyanotypien verblassen oder sich verschlechtern. Beim Einrahmen verwendete ich UV-filtrierendes Glas oder Acrylglas, um das Werk zu schützen.

Ich war mir bewusst, dass Cyanotypien empfindlich gegenüber Chemikalien wie Säuren und Laugen waren. Daher hielt ich sie von Haushaltsreinigern, Pestiziden und anderen Chemikalien fern.

T-shirt

After having done some surface-level research about visual web aesthetics and the connection between them and usability, it is necessary to do a deep dive into the underlying processes. Before beginning with experimentation, I will have to wrap my head around what influences our perception of aesthetics and if there is one universal aesthetic we all find beautiful or if aesthetic experiences differ.

For answering those questions, I found an interesting journal article by Brielmann and Pelli (2018) called “Aesthetics”. But beforehand, we must get our terminology straight and make a distinction between aesthetics and beauty. The former is an “inherent property of a visual stimulus” while the latter can be described as “the subjective experience elicited by an artwork, or to the neural processing in the brain relating to that experience” (Redies, 2015). According to Brielmann & Pelli (2018, p. 859), the word “aesthetics” was first used by the German philosopher Alexander Baumgarten and encompasses (as of today’s understanding) “the perception, production, and response to art, as well as interactions with objects and scenes that evoke an intense feeling, often of pleasure”.

Regarding theories surrounding aesthetics, the discourse only developed in recent years with a multitude of models being developed in the early 2000s. However, those theories still remain under scrutiny and there is a certain lack of consensus (Brielmann & Pelli, 2018, p. 860). Brielmann & Pelli (2018, p. 860-861) describe, that those theories can be categorized into stimulus-focused research on the one hand that “aims to identify a set of object properties in the (usually) visual domain that contribute to aesthetic pleasure” and response-focused research on the other hand that “investigates the mechanisms, including their neural processes, that underlie aesthetic judgments”. For my own research, I will only focus on the former category since it is the one relevant for the design of visual interfaces.

Generally, certain determinants of the aesthetic experience are considered as proven. Brielmann & Pelli (2018, p. 861) note the preference for symmetry over something asymmetrical and “averageness in the sense of conformity with a category prototype is usually preferred over more-deviant exemplars”. In addition to this, curvature is preferred over angularity, the Golden Ratio is regarded as “beautiful” and color-wise “blue-green cold hue, relatively high saturation, and lightness” is preferred in Western culture (Brielmann & Pelli, 2018, p. 861).

Concerning the universality of those determinants the authors write that some aesthetic components like curvature and symmetry are actually universal while others like color and ratios depend more on the context and individual preferences. This universality can be traced back to evolution: Many attractive face attributes, like averageness, symmetry, and a reddish skin color, may indicate health and thus higher mate quality for producing children. […]. Similarly, preference for landscapes that include water, forest, and signs of animal life has been explained as attraction to human-friendly habitats” (Brielmann & Pelli, 2018, p. 861).

However, one always has to be cautious because those rules are only true for an average response. How an individual perceives aesthetics depends on “the triad of perception, cognition and emotion” (Redies, 2015) and can differ considerably.

References

• Brielmann, A. A., & Pelli, D. G. (2018). Aesthetics. Current Biology, 28, 859–863. Redies, C. (2015). Combining universal beauty and cultural context in a unifying model of visual aesthetic experience. Frontiers in Human Neuroscience, 09.