Design für Nichtdesigner – zehn silberne Richtlinien (Design for nondesigners – ten silver rules)

(english version below)

Wenn Psychologen (und, na klar: auch Psychologinnen) wissenschaftliche Poster (z.B. für Konferenzen) erstellen, steht meist ganz viel Text drauf. Wir haben nicht gelernt, in Bildern zu denken.

Wir schreiben meist so viel es geht auf ein Poster, damit alle wissen, wie gut wir unsere eigene Forschung kennen. Der erste, bei dem ich das anders gesehen habe, war ein Anthropologe und Kognitionswissenschaftler. Er hat einfach einen riesigen Whitespace (weißen Raum) auf seinen wissenschaftlichen Postern gelassen.

Als ich bei einem Architekturlehrstuhl anfing, fing ich auch damit an, den Whitespace zu würdigen. Aber: So richtig gelernt habe ich es nicht, Abstand von all den schriftlichen Gedanken zu nehmen, die ich auf einem Wissenschaftsposter ausdrücken möchte.


top view photography of white ceramic mug on white background
Photo by Creative Stash on Pexels.com

Im Kurs „Design for Nondesigners“ der Bauhaus Universität, der sich auf digitales Lernen richtete, habe ich nicht gelernt, mein Verhalten von dem einen auf den anderen Tag zu ändern.

Aber ich habe einige Designprinzipien gelernt, die ich als Top10 der „silbernen Richtlinien“ (ich nenne sie bewusst nicht „golden“, weil sie nicht universell, sondern nur auf digitale Medien bezogen sind) mit Euch teilen möchte. (und, nein, in WordPress kann ich diese Tipps nicht alle richtig einsetzen, z.B. setzen sich Bilder permanent an falsche Orte – aber ich akzeptiere das… die Imperfektion ist eine interessante Sache…).


  1. Kongruenz + Spatial Contiguity: Bilder und Worte, die kongruent sind, also zusammenpassen, bleiben in Erinnerung. Das heißt: Wenn du was vom Tiger schreibst, füg ein Tigerbild zu, aber platziere das Bild so nahe wie möglich am dem Wort Tiger.
  2. Simplicity / Redundancy: Lass alles weg, was nicht zu Deiner Botschaft passt. Deine Leserschaft schätzt es, wenn Du auch nicht zu viel Text auf eine Folie packst. Bedeutet: Wenn es um den Tiger geht, dann mach die Abbildung des Tigers groß…, aber nicht die Steine und den Wald um den Tiger herum.
  3. Signaling: Menschen lernen besser, wenn wir zeigen, was für sie relevant ist (irgendwie logisch). Das heißt: Du darfst hhighlighten, markieren, interessante Schriften nutzen … und:

    Mach das, was wichtig ist, Groß.

    (Aber: mach NICHT ALLES GROß, denn das liest sich für Andere wie „schreien“).


  • Modality / Multimedia: Menschen lernen mehr von Wörtern und Bildern, als von Wörtern alleine. (Und weiter: Menschen lernen besser von Bildern und Storytelling/Geschichten, als von Animationen und Texten).
  • Coherence / Segmenting: Richte alles was du nutzt an einem unsichtbaren Grid aus (z.B. Kästchen, Wörter, …). Das sorgt für Ordnung, statt Chaos.

    person holding pencil while writing on white paper
    Photo by rawpixel.com on Pexels.com
  • Bilder haben eine Balance, die kippen kann. Wenn Du z.B. links „im Bild“ ganz viel Visuelles eingebaut hast, dann setz dem rechts etwas gegenüber. Stell Dir das wie eine Waage vor, die kippt, wenn auf einer Seite zu viel drauf geladen wird. Balanciere z.B. ein großes Bild links, indem du mehrere kleine rechts zufügst (asymmetric balance), oder wiederhole Elemente, die links stehen, in gespiegelter Weise auch rechts (symmetric balance)
  • Nutze 3 Farben. Nicht mehr. Das zeigt, dass Du ein Konzept hast, einen eigenen Stil. Eine Farbpalette kann Dir dabei helfen, z.B. über coolors.co . Vielleicht hilft es Dir, Komplementärfarben zu nutzen – also was sich im Farbkreis gegenübersteht, oder nebeneinandersteht? Achte einfach auf Kontraste. Deine Leserschaft wird es Dir danken. (Extra Tipp: Für ein „minimalistisches Design“, nutzt Du am besten monochromatische Farbschemas).
  • Wie wäre es, aus Deinen abstrakten Ideen assoziierte Bilder zu erstellen? Freie Icons kannst Du über flaticon.com finden.

  • Spiel mal mit Autodraw.com – aus all Deinen ’schlechten‘ Zeichnungen werden dort schöne Icons (und nebenbei hilfst Du Google, Deine Daten für deren KI zu nutzen… na ja, es gibt Vor- und Nachteile)

  • In digitalen Schriftstück kannst Du am besten die 30 Point Schriftgröße verwenden. Ja, das bedeutet, dass Du weniger Text schreiben kannst, weil mehr Raum ausgefüllt wird. Nimm übrigens minimal die Schriftgröße 18. Notiz: klar kannst auch mal die Größe 120 einsetzen…, aber das sieht „laut“ aus.

Ich freue mich, auf Powerpoint Folien und wissenschaftlichen Postern nun auf einige dieser Ideen zu achten.

Was sind Deine Tipps für die digitale Mediengestaltung, z.B. von Powerpointfolien? Ich freue mich auf Deine Kommentare! 🙂

 


Disclaimer

  • Was ich hier geschrieben habe, ist -wie immer- keine Werbung. Du kannst selbst wählen, ob du zu externen Webseiten möchtest, oder nicht. 👾
  • Die Seiten, die ich verlinkt habe, fand ich selbst interessant, um selbst auf Powerpointfolien mit Gestaltung zu experimentieren. Es hat mich niemand dafür bezahlt, diese Links hier zu posten.

man wearing sunglasses reading book on body of water
Photo by Toa Heftiba u015einca on Pexels.com

Wissenschaftliche Lesetipps

Enjoy!


English Version (using „DeepL.com“)

When psychologists (and, of course, also psychologists) create scientific posters (e.g. for conferences), there is usually a lot of text on them. We haven’t learned to think in Pictures.

We usually write as much as possible on a poster so that everyone knows how well we know our own research. The first one I saw differently was an anthropologist and cognitive scientist. He just left a huge whitespace on his scientific posters.

When I started at an architecture chair, I also started to appreciate the whitespace. But: I have not really learned to distance myself from all the written thoughts that I would like to express on a science poster.
In the course „Design for Nondesigners“ at Bauhaus University, which focused on digital learning, I did not learn to change my behaviour from one day to the next.

But I have learned some design principles that I would like to share with you as the top 10 of the „silver guidelines“ (I deliberately do not call them „golden“ because they are not universal, but only related to digital media). (and, no, in WordPress I can’t use all these tips correctly, e.g. images are permanently placed in the wrong places – but I accept that… imperfection is an interesting thing…).


  1. congruence + Spatial Contiguity: Images and words that are congruent, i.e. fit together, will be remembered. That means: If you write something of the tiger, add a tiger picture, but place the picture as close as possible to the word tiger.
  2. simplicity / redundancy: Leave out everything that does not fit your message. Your readers appreciate it if you don’t put too much text on one slide. Means: If it is about the tiger, then make the image of the tiger large… but not the stones and the forest around the tiger.

  3. signaling: People learn better when we show what is relevant to them (somehow logical). That means: You can highlight, mark, use interesting fonts… and: Make what’s important, big. (But: don’t make EVERYTHING BIG, because this reads to others like „screaming“).
  4. Modality / Multimedia: People learn more from words and images than from words alone. (And further: people learn better from pictures and storytelling/stories than from animations and texts).
  5. coherence / segmenting: Align everything you use to an invisible grid (e.g. boxes, words,…). This keeps order, not chaos.person holding pencil while writing on white paper Photo by rawpixel.com on Pexels.com

  6. images have a balance that can tilt. For example, if you have a lot of visuals installed on the left „in the picture“, then set something opposite it on the right. Think of it as a scale that tilts when you load too much on one side. For example, balance a large image on the left by adding several small ones on the right (asymmetric balance), or repeat elements that are on the left in a mirrored manner on the right (symmetric balance).
  7. use 3 Colors only. Not any more. This shows that you have a concept, your own style. A color palette can help you, e.g. about coolors.co. Perhaps it will help you to use complementary colours – i.e. what stands opposite or next to each other in the colour circle? Just watch out for contrasts. Your readership will thank you for it. (Extra tip: For a „minimalist design“, it is best to use monochromatic color schemes).
  8. How about creating associated images from your abstract ideas? You can find free icons on flaticon.com.

  9. play with Autodraw.com – all your’bad‘ drawings turn into nice icons (and by the way you help Google to use your data for their AI… well, there are pros and cons).
  10. In digital documents, it is best to use the 30 point font size. Yes, this means that you can write less text because more space is filled in. By the way, take a minimum font size of 18. note: of course you can also use a size of 120…, but that looks „loud“.

 


I look forward to seeing some of these ideas on Powerpoint slides and scientific posters.

What are your tips for digital media design, e.g. of PowerPoint slides? I look forward to your comments! 🙂


Disclaimer

  • what I’ve written here is, as always, not meant as advertising. You can choose whether you want to go to external websites or not. 👾
  • I found the pages I linked interesting myself, in order to experiment with design on PowerPoint films myself. Nobody paid me to use these links.

Scientific Reading Tips
-Richard E. Mayer has researched these principles of digital learning (e-learning) and has written a number of books about them.
But since these books are expensive, there are numerous summaries, such as this one… and a paper by Sorden (2012) that describes these principles from a cognitive psychological point of view. Is that something for you?

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.