by stefanie.weber -

#07 Titel- & Abspanndesign

Für das große Studiodreh-Videoprojekt „(N)Immergrün“ habe ich dieses Semester den Titel und den Abspann designed. Am Ende des zweiten Drehtags hatten wir die Idee, dass es lieb wäre, wenn jede Person vom Team einmal in das Set hineingeht und eine Signature Move für seine Rolle oder Person macht. Diese Idee haben wir dann auch umgesetzt, doch einige waren am zweiten Drehtag nicht da und die wären deswegen nicht im Abspann mit dabei gewesen. Das wollte ich nicht auf mir sitzen lassen bzw. hätte es extrem schade gefunden, wenn sie nicht im Abspann „zu sehen“ sind nur weil sie an diesen Tagen nicht gearbeitet haben, aber trotzdem so eine wichtige Rolle gehabt haben.

So kam mir dann die Idee die Teammitglieder zu illustrieren in einem einfachen Stil, aber mit gewissen Aspekten, die die Personen charakterisieren und man sie durch diese Details erkennt. Die Idee die Illustrationen einzubauen war indem die Illustrationen aussehen als wären sie auf einen Zettel gezeichnet und auf das Set oder den Bildschirm geklebt, dass sie wie ein Platzhalter für die Personen wirken, die nicht dabei waren. Deswegen habe ich eine Hintergrundtextur von einem etwas zerknüllten karierten Papier gesucht und nach Klebeband Bildern. Für die Klebebänder habe ich ein frei zugängliches gratis Pack mit fast 100 PNGs gefunden, die perfekt gepasst haben. Dann bin ich schlussendlich ans Illustrieren gegangen, was länger als erwartet gedauert hat, da ich einfach sehr genau beim digitalen Zeichnen bin. Hierfür habe ich Vorlagebilder in Illustrator eingefügt und dann die Personen nachgezeichnet oder Elemente aus den Bildern für meine Zeichnung herausgenommen. Definitive Learning für mich hierbei waren, dass ich nächstes Mal die Zeichnung zu erst analog skizziere und diese dann digital nachzeichne oder mit einfach (Grafik-)Tablet zeichne. Leider habe ich noch kein eignes Tablet und mein Grafiktablet zum Zeichnen am Laptop hatte ich nicht mit, deswegen musste ich es mit der Maus machen… definitiv ein langwieriger Prozess. Aber letztendlich bin ich happy mit den Illustrationen und ich hoffe der Aufwand hat sich ausgezahlt.

Die fertigen Illustrationen habe ich dann mit Photoshop auf die Papierstruktur eingefügt und so bearbeitet, dass sie aussehen als wären die Zeichnungen von einem Zettel herausgerissen. Hierfür habe ich bereits für ein anderes Projekt spezielle Photoshop Pinsel heruntergeladen gehabt, die die Form von auseinander gerissenen Papierstreifen haben. Mit diesem Pinsel habe ich die Maske der Gruppe mit allen Ebenen der Papierstruktur bearbeitet. Dann habe ich den Illustrationen eine Struktur mithilfe von Rauschen hinzugefügt, dass sie bewusst unklarer und nicht perfekt aussehen, da ich in Illustrator halt 100% schwarz genommen habe und einen Pinsel der klare Linien gemacht hat.

Die Klebeband-Streifen habe ich dann in DaVinci Resolve als Bilder hinzugefügt und platziert.

Bevor ich dann den finalen Abspann gemacht habe, habe ich überlegt wie das Titeldesign sein sollte, da ich das schlüssig und einheitlich machen wollte. Für das Design habe ich die Storyline von (N)Immergrün selbst als Inspiration genommen und wollte das (N) so gestalten, dass es bewusst anders aussieht, weil es in Klammern steht, aber trotzdem offensichtlich lesbar ist. So kam mir die Idee mit anderes Inspirationen wie von Pinterest eine simple Font, die auch für den Abspann funktioniert mit einer alten handschriftlichen Schriftart zu kombinieren, was auch sehr gut zu den Eigenschaften von Pflanzen passt.

Handschrift Font: Bickham Script Pro 3
Sans-Serife Font: New Atten Medium

Dann habe ich die Credits des Films aufgeschrieben und die Rollen nach Wichtigkeit sortiert. Für diesen Arbeitsschritt habe ich auf der Website imdb.com nachgesehen, wie sie die Rollen für andere berühmte Filme sortiert haben wie z.B. für Challengers hier: https://www.imdb.com/title/tt16426418/fullcredits. Und dann selbst und noch einmal mithilfe von ChatGPT überarbeitet.

Folglich habe ich diesen in DaVinci Resolve formatiert, hierfür einige Screenshots aus dem Programm folgend. Das Formatieren funktioniert wirklich sehr einfach und problemlos. Das einzige was ich einmal falsch gemacht habe und mich Nerven gekostet hat war, dass wenn man in DaVinci Strg Z drückt, es nicht immer rückgängig macht oder manchmal zu viel und man aber auch nicht diesen Schritt wieder wiederherstellen kann. Somit habe ich einmal alle Tabstops und den Text im Programm selbst formatiert und durch einmal Rückgängig machen war alles weg und nicht re­ver­si­bel.

Um die Inhalte und Namen besser lesbar zu erscheinen habe ich einen dezenten Schlagschatten hinzugefügt. Persönlich bin ich kein großer Fan von stark visuellen Schlagschatten, aber hierbei hilft er klar bei der Lesbarkeit und im Vergleich sieht man wie viel besser er es macht. Besonders weil im Bild selbst so viel los ist, braucht der Text eine eigene Hervorhebung, damit er für den Zuseher gut erkenntlich ist.

by david.lasslberger -

#13 Physiotherapy & Specific Exercises

In my previous research, I focused heavily on virtual reality (VR). After my talk, I realized I could start with a more physical approach and explore the broader topic of gamification.

To begin, I want to start with something smaller in scope. I will look at physiotherapy exercises, setting aside mental health therapy for now, and explore existing exercises and how one might create a simple gamified prototype.

I delved into the field of physiotherapy. Personally, I have little experience with this field, except for some physiotherapy sessions for my lower back condition, which I’ve had since birth. During these sessions, I noticed a recurring problem: after each meeting, I had a short burst of motivation to do the exercises, but this motivation faded after a few days. There were no disciplinary structures in place to keep me doing the exercises. This seems to be a common issue that medical professionals can hardly control outside of therapy sessions. Gamification could promote discipline outside of these sessions. Even during sessions, gamification could make the experience more enjoyable, especially for target groups such as children.

Statistics show that in our sedentary society, physiotherapy is on the rise. In Austria, 21.8% of the population has consulted a physiotherapist. Given the increasing numbers, we can infer that the figures for 2024 could be even higher.

https://www.economica.eu/wp-content/uploads/2024/03/240129_Physio-Austria_EcV.pdf

I looked into specific physiotherapy exercises, focusing on the upper body. I chose this region because the exercises are potentially easy to measure, mostly simple, and could be combined with VR in the future, as VR is traditionally controlled via hand gestures or hand controllers. Although it’s hard to assess their effectiveness, these exercises were recommended by several sources, so I believe they are effective. For the prototype, I will pick one or several basic exercises.

In the next prototype, I want to explore what gamification is and which gamified approaches to therapy already exist.

Sources:

Notes & Observations:

  • Flexibility exercises seem to be performed by professionals rather than patients themselves, likely depending on the severity of health problems.
by vanessa.stoeckel -

10 | Ionic-Prototype

Der Übergang von den Figma-Designs zu einem funktionsfähigen Ionic-Prototypen war ein spannender und lehrreicher Prozess. Nachdem ich meine Screens in Figma fertiggestellt hatte, begann ich zunächst damit, ein neues Ionic-Projekt zu erstellen und darin mehrere leere Tabs zu erstellen, welche ich später dann mit Inhalt füllen wollte. Zudem exportierte ich mir meine Logos, Bilder und Grafiken aus Figma, um sie dann während der Entwicklung in mein Projekt einbinden zu können. Nach und nach füllten sich die Tabs der App mit den Inhalten, die ich zuvor in Figma gestaltet hatte.

Product Video

by lea.haas -

Episode #5 from the series: New things I learned this semester – HDRs

HDRs, or High Dynamic Range images, are a special kind of image that can capture a wider range of light and dark details than regular images. Imagine taking a photo where you can see the bright sky and the dark shadows under a tree without losing detail in either area—that’s what HDR can do. These images are especially useful in 3D modeling and animation in programs like Blender because they can create very realistic lighting and reflections.

An HDR image is made by combining several photos of the same scene taken at different exposures. This means you take some photos that are very bright, some that are very dark, and some in between. When you merge these photos together, you get an image that captures the best details from all the different exposures, resulting in a picture that looks much more like what your eyes see in real life.

Creating HDRs for Blender

Here’s a step-by-step guide on how you can create HDR images for Blender:

  1. Take the Photos:
    • Set Up Your Camera: Use a camera that allows you to take multiple shots with different exposure settings. A tripod is essential to keep the camera steady and ensure all the photos align perfectly.
    • Bracket Your Shots: Capture a series of photos, usually between 3 to 7, ranging from very underexposed (dark) to very overexposed (bright). This gives you the full range of light and shadow in the scene.
  2. Merge the Photos into an HDR Image:
    • Use HDR Software: Programs like Adobe Photoshop, Photomatix, or Luminance HDR can merge your bracketed photos into a single HDR image.
    • Align and Merge: Load your photos into the software, align them if necessary, and let the software merge them. You’ll get an image that keeps the details from all exposures.
    • Fine-Tune the Image: Adjust the tone mapping, contrast, and other settings in the software to make sure your HDR image looks natural and detailed.
  3. Save the HDR Image:
    • Choose the Right Format: Save your HDR image in a format that Blender supports, such as .hdr or .exr. These formats keep all the high dynamic range data intact.
  4. Use HDRs in Blender:
    • Open Blender: Go to the Shading workspace.
    • Add Environment Texture: In the World tab, add an Environment Texture node (Add > Texture > Environment Texture).
    • Load Your HDR: Connect the Environment Texture node to the Background node, click “Open,” and load your saved HDR image.
    • Adjust Settings: Play around with the strength and orientation to get the lighting just right in your scene.

Using HDR images in Blender can make a big difference in how realistic and vibrant your 3D scenes look. They provide rich lighting details that can bring your models to life, making them appear more dynamic and true-to-life.

by lea.haas -

Episode #4 from the series: New things I learned this semester – Frame by Frame

Working on the „Spieluhr“ scribble-style frame-by-frame animation has been an experience, especially using Photoshop and a drawing tablet. My process began with looking for a perfect brush style and how I can logically devide the different parts in the frame to ensure that I don’t work in chaos. Using a reference video was incredibly helpful in this stage, providing a solid foundation for the key actions and transitions.

The next step involved establishing keyframes. These pivotal moments captured the essence of each movement, marking the start and end points of actions. Working in Photoshop, I used layers to separate different elements of the animation, which made it easier to manage the complexity. The drawing tablet proved invaluable, offering the precision and fluidity needed for detailed work. At first I was really sceptical because of the drawing tablet but in the end it was really a gamechanger. This setup allowed me to create the inbetweens, or „tweens,“ which were crucial for achieving smooth, continuous motion between keyframes.

Maintaining consistency throughout the animation was a challenge, but tools like onion skinning in Photoshop made it manageable. By seeing previous and next frames, I could ensure that character proportions, shapes, and the overall scribble style remained uniform. This consistency was key to making the animation look professional and cohesive.

Attention to detail was another critical aspect. Secondary actions, such as subtle movements of hair or clothing, added layers of realism. Follow-through and overlapping action were techniques I applied to make movements more lifelike, ensuring that different parts of the body or objects moved with a natural delay.

Lighting and shadow consistency was crucial, even in a scribble-style animation. Keeping these elements uniform ensured visual coherence, and shadows moved correctly with the objects or characters, adding to the overall realism.

Throughout the process, frequent playback was essential. This allowed me to check for smoothness and coherence, making necessary adjustments along the way. Feedback from peers was invaluable, providing different perspectives and highlighting areas for improvement. Multiple revisions were part of the journey, each one bringing the animation closer to perfection.

Using Photoshop and a drawing tablet made the technical aspects of frame-by-frame animation more manageable. The software’s features, combined with the precision of the tablet, allowed for detailed and nuanced drawings. Synchronizing sound effects and any potential dialogue or background music with the animation added another layer of depth, making the visual experience more immersive.

Overall, working on the „Spieluhr“ scribble-style frame-by-frame animation was a blend of creativity and technical skill. I was happy that I took on that challenge and I may also use this for the practical part of my master thesis.

by vanessa.stoeckel -

09 | Figma Prototype

Basierend auf den Wireframes wurden die ersten Designs für die Benutzeroberfläche (UI) entwickelt. Dabei lag der Fokus auf einer intuitiven und benutzerfreundlichen Gestaltung, die den Nutzern eine einfache Navigation ermöglicht. Farbgebung, Schriftarten und Icons wurden sorgfältig ausgewählt, um eine ansprechende und konsistente Optik zu gewährleisten.

Die einzelnen Screens wurden Schritt für Schritt erstellt, beginnend mit dem Startbildschirm und der Registrierung, gefolgt von den Hauptfunktionen wie dem Lebensmittelscanner, der Rezeptvorschläge und den Chat-Funktionen. Jeder Screen wurde mehrfach getestet und optimiert, um eine reibungslose Benutzererfahrung zu gewährleisten.

Zum Schluss wurden die Screens in einem interaktiven Prototypen zusammengeführt. Dieser Prototyp ermöglicht es, die App in einer frühen Phase zu testen und Feedback von potenziellen Nutzern einzuholen. Interaktive Elemente wie Buttons und Navigation wurden integriert, um ein realistisches Nutzungserlebnis zu simulieren.

try it yourself
by vanessa.stoeckel -

08 | Styleguide

Der erste Schritt nach dem zeichnen von groben Skizzen und Informationsarchitekturen war es, einen Styleguide festzulegen, an dem ich mich für die weitere Ausarbeitung orientieren wollte. Schon bald stellte ich jedoch fest, dass besonders die Farben nicht gut gewählt waren, da sie in den verschiedenen Größen nicht miteinander harmonierten und auch für Überschriften zu hell gewählt waren. Daher habe ich diesen Teil später noch einmal überarbeitet und mich auf die unten liegenden Farben festgelegt.

Ich hatte zudem zu Beginn verschiedene elevations (Schatten-stärken) definiert, welche ich später jedoch fast komplett aus meinen Designs wieder entfernt habe.

Zusätzlich habe ich mir Gedanken darüber gemacht, wie ein mögliches Logo aussehen könnte.

by vanessa.stoeckel -

07 | Von der Idee zur App – Eine Lösung für Personen mit Lebensmittelunverträglichkeiten

Nach eingehender Überlegung und weiterer Recherche entschied ich mich, die Idee einer App zu entwickeln, die Personen mit Lebensmittelunverträglichkeiten unterstützt. Diese App soll es den Nutzern ermöglichen, Lebensmittel zu scannen und auf ihre Verträglichkeit zu analysieren. Außerdem soll sie geeignete Rezepte vorschlagen und die Möglichkeit bieten, sich mit anderen Betroffenen sowie mit Ernährungsexperten auszutauschen.

Entscheidungsprozess und Funktionen der App

Die Entscheidung, eine App zu entwickeln, basierte auf mehreren Überlegungen. Erstens ist die mobile Technologie heutzutage weit verbreitet und leicht zugänglich. Zweitens ermöglicht eine App eine direkte und personalisierte Unterstützung, die jederzeit verfügbar ist. Die Hauptfunktionen der App sollen sein:

  1. Lebensmittelscanner: Nutzer können Lebensmittel scannen und sofort erfahren, ob sie diese vertragen.
  2. Rezeptvorschläge: Basierend auf den Unverträglichkeiten der Nutzer werden passende Rezepte vorgeschlagen.
  3. Community und Experten-Chat: Nutzer können sich mit anderen Betroffenen austauschen und Fragen an Ernährungsexperten stellen.

Fazit

Die Entwicklung dieser App ist das Ergebnis meiner intensiven Auseinandersetzung mit den Bedürfnissen von Menschen mit Lebensmittelunverträglichkeiten und den technischen Möglichkeiten, diese Bedürfnisse zu erfüllen. Mein Besuch bei FH-Prof. DI Dr.-Ing. Simon Berner und die Erkenntnisse aus meinen Recherchen haben mich dazu inspiriert, eine Lösung zu finden, die nicht nur technisch innovativ ist, sondern auch einen echten Unterschied im Leben der Betroffenen machen kann.

Ich freue mich darauf, dieses Projekt weiterzuverfolgen und bin gespannt auf die nächsten Schritte in der Entwicklung dieser App, die vielen Menschen helfen könnte, ihre Ernährung besser zu gestalten und ihre Lebensqualität zu verbessern.

by vanessa.stoeckel -

06 | Lösungsansatz

Während meiner Analyse wurde mir klar, dass die reine Produktion von Lebensmitteln oft nicht ausreicht, um den komplexen Anforderungen von Menschen mit Unverträglichkeiten gerecht zu werden. Es bedarf einer gezielten Hilfestellung, die über die bloße Herstellung hinausgeht. Ich fragte mich: Wie kann ich Menschen unterstützen, die aufgrund von Allergien, Intolleranzen oder anderen unfreiwilligen Diätformen in der Zukunft Gefahr laufen, einen Mangel zu entwickeln?

  1. Eingeschränkte Lebensmittelauswahl → Einkaufshilfe zur richtigen Auswahl an Lebensmitteln
  2. Unausgewogene Ernährung → Rezeptideen und -vorschläge
  3. Mangel an Aufklärung und Wissen → ausgebildete Ernährungsberater/ Ärzte nur einen Chat entfernt
  4. Soziale und praktische Hindernisse → eine Community, die unter anderem auch dabei helfen kann, geeignete Lokale zu finden
Brainstorming zu den Inhalten, die enthalten sein sollten

by maximilian.panholzer -

Mobile Optimization for Maps

An important aspect I have to consider when designing maps for people on the road is the optimization for mobile devices. Van lifers are often off the grid with no cellular connection, or bad cell service and more often than not the usage of a mobile phone is more convenient for using the map, rather than accessing it through a desktop device.

This brings three key considerations to the table which have to be addressed. The first two are technical aspects that will have to be solved with good caching policies and offline functionality. However, since I am mainly focusing on the design of the map, I will omit these considerations for my current research.

I started by researching the current state of popular mapping tools, and how they handle mobile screen sizes and interactions.

Google maps, the most popular map app, is overly complicated and cluttered (which is typical of Google). I found that a design like this can be too confusing and overwhelming when creating a specialized map app. Apple Maps on the other hand, does a good job at reducing the visible functionality to a usable minimum – maybe too much for a specialized map, though. Lastly, a competitors app does show a good mean between the two, offering relevant information for the typical user of its service, while also keeping the map unobstructed. But there still are some things that could be improved on, like the non-automatic search functionality and the inconsistent design across the interface.

One thing all maps have in common is the detail view for locations. They utilize the bottom sheet, a common design element in mobile apps, to display detailed information about a location. The benefit of this is that the user can easily drag it down to have an unobstructed view of the map, without losing the context they were in. Seeing as the most popular mapping apps use this precedent, I’ve decided to also go with this practice in my design.

I placed the search bar and layer selection functionality at the top so users have an unobstructed view of the map while navigating. When clicking on a location, the bottom sheet comes up with information about the location. It can then be dragged down to have a split view of the map and the location information, while still keeping buttons in view.

https://www.statista.com/statistics/865413/most-popular-us-mapping-apps-ranked-by-audience

https://www.statista.com/statistics/1186009/data-use-leading-us-navigation-apps