Ein Leitfaden, um Herausforderungen anzunehmen und sich in Ihrem UX-Design-Praktikum hervorzuheben

Dies ist die Geschichte über mein User-Design-Praktikum. Ich sage nicht, dass Ihr Praktikum so etwas wie meins sein wird. Wenn es eine Sache gibt, die ich sagen kann, um Ihre Erwartungen zu formen, wäre es dies: Seien Sie bereit, sie alle beiseite zu legen. Denken Sie vor allem daran , sich selbst Raum und Zeit zum Lernen zu geben . Ich erzähle meine Geschichte als Erinnerung daran, wie sehr ich gekämpft habe und wie gut trotz meiner Schwierigkeiten alles gelaufen ist, damit ich nie aufhören werde, es zu versuchen, und Sie auch nicht.

Alles begann im Mai 2018, als ich in Granada, Spanien, mit einem Gepäck an meiner Seite, einem Laptop auf dem Rücken und etwas sehr eingerostetem Spanisch im Kopf aus dem Flugzeug stieg. Es war mein erstes Mal in Europa und ich würde die nächsten drei Monate hier sein, um ein Praktikum im UX-Design bei Badger Maps zu machen. Ich war noch ziemlich unerfahren in UX, da ich zu diesem Zeitpunkt erst seit knapp einem Jahr etwas darüber gelernt hatte, aber ich fühlte mich bereit und begierig darauf, Erfahrungen in einem professionellen Umfeld zu sammeln.

Folgen Sie mir, während ich lernte, technisches Wissen anzuwenden, um die mir zugewiesenen praktischen Designaufgaben zu erfüllen:

• Erstellen Sie mit Sketch ein Designsystem für unsere iOS-App;
• Entwerfen Sie eine neue Funktion, die Fehler anzeigt, die bei Datenimporten auftreten;
• Lernen Sie die Grundlagen von HTML, CSS und Flexbox, um mein Design zu implementieren;
• Erstellen Sie Animationen mit Adobe Illustrator und After Effects.

Dieser Artikel ist für Anfänger wie mich gedacht . Wenn Sie neu im UX-Design sind und das Feld erkunden möchten, lesen Sie weiter, um zu erfahren, ob ein UX-Design-Praktikum das Richtige für Sie ist! Für mich hat die Arbeit, die ich am Ende abgeschlossen habe, meine Erwartungen weit übertroffen. Ich habe gelernt, wie man ein Designsystem entwickelt, wie man Design mit den Bedürfnissen der Benutzer kompromittiert, die Herausforderungen bei der Implementierung eines neuen Designs und wie man einige „Momente der Freude“ schafft. Jeder Tag im Praktikum bot etwas Neues und Unvorhersehbares. Am Ende meines Praktikums wurde mir klar, dass ich etwas Reales, etwas Greifbares geschaffen hatte, und es war, als hätte sich alles, womit ich zu kämpfen hatte, plötzlich zusammengefügt.

Empfohlene Lektüre : So landen Sie ein erstklassiges Grafikdesign-Praktikum

Kapitel 1: Lego

Meine erste Aufgabe bestand darin, ein Designsystem für unsere bestehende iOS-App zu erstellen. Ich hatte in der Vergangenheit Designsysteme für meine eigenen Projekte und Anwendungen erstellt, aber nie im Nachhinein und noch nie für ein Design, das nicht mein eigenes war. Um die Aufgabe abzuschließen, musste ich die Mockups in Sketch zurückentwickeln; Ich müsste zuerst die Datei aktualisieren und optimieren, um das Designsystem zu erstellen.

Es war auch in diesem günstigen Moment, als ich erfuhr, dass das Sketch-Programm auf meinem Computer seit etwa anderthalb Jahren veraltet war. Ich wusste nichts von den Symbolen, Überschreibungen und anderen Funktionen in den neueren Versionen. Lektion gelernt: Halten Sie Ihre Software auf dem neuesten Stand.

Bevor ich mir Gedanken über die Symbolseite machte, ging ich die Mockups Zeichenfläche für Zeichenfläche durch und stellte sicher, dass sie aktualisiert wurden und der aktuell veröffentlichten Version der Anwendung entsprechen. Sobald dies erledigt war, begann ich mit der Erstellung von Symbolen und Überschreibungen für verschiedene Elemente. Ich habe mit der Kopf- und Fußzeile angefangen und von dort aus weitergemacht.

Als Faustregel gilt: Wenn ein Element auf mehr als einer Seite vorkommt, würde ich daraus ein Symbol machen. Ich fügte dem Designsystem im Laufe der Zeit verschiedene Symbole hinzu und baute die Bibliothek auf. Es wurde jedoch schnell klar, dass sich das Designsystem schneller weiterentwickelte und veränderte, als ich versuchen konnte, es zu organisieren. Auf halbem Weg habe ich aufgehört zu versuchen, die Symbole organisiert zu halten, und mich stattdessen dafür entschieden, zurückzugehen und sie neu zu organisieren, sobald ich damit fertig war, jede Seite neu zu erstellen. Als ich aufhörte, zwischen Modellen und Symbolen hin und her zu gehen und mir Gedanken über die Organisation für beide zu machen, konnte ich effizienter arbeiten.

Es war leicht, die Überschreibungen und Symbole in Sketch zu schätzen. Die Funktionen machten das Programm viel leistungsfähiger als ich es gewohnt war, und erhöhten die Verarbeitbarkeit der Datei für zukünftige Designs. Die Aufgabe, das Designsystem selbst zu erstellen, forderte mich heraus, tief in das Programm einzutauchen und alle Details des Designs unserer Anwendung zu verstehen . Ich fing an, kleine Unstimmigkeiten in Abständen, Symbolgröße oder Schriftgrößen zu bemerken, die ich während der Arbeit korrigieren konnte.

Der letzte Schritt bestand darin, zur Symbolseite zurückzukehren und alles zu organisieren. Ich durchsuchte alle Symbole, löschte die nicht verwendeten und alle Replikate. Obwohl es ein wenig mühsam war, war dies ein sehr wertvoller Schritt in diesem Prozess . Das Durchgehen der Symbole nach dem Durcharbeiten des Dokuments gab mir die Möglichkeit, neu zu bewerten, wie ich die Symbole für jede Seite erstellt hatte. Die Gruppierung zwang mich, darüber nachzudenken, wie sie in der App miteinander verwandt waren.

Als ich diesen Denkprozess durchging, wurde mir klar, wie herausfordernd es war, ein Benennungssystem zu erstellen. Ich musste ein System schaffen, das breit genug ist, um genügend Elemente zu umfassen, spezifisch genug, um nicht vage zu sein, und das von einem anderen Designer leicht verstanden werden kann. Ich brauchte ein paar Versuche, bis ich bei einem funktionierenden System landete, mit dem ich zufrieden war. Letztendlich organisierte ich Elemente danach, wo sie in der Anwendung verwendet wurden , und gruppierte Teile wie Listen zusammen. Es funktionierte gut für eine Anwendung wie Badger, die unterschiedliche Designs für verschiedene Funktionen in der App hatte. Das Endprodukt war eine besser organisierte Datei, die für zukünftige Design-Iterationen viel einfacher zu handhaben wäre.

Als Schlussstein dieses Projekts experimentierte ich mit der Modernisierung des Designs. Ich habe die Kopfzeilen in der gesamten App neu gestaltet und mich dabei von nativen Apple-Apps inspirieren lassen. Glücklicherweise war auch das Team davon begeistert und erwägt, die Änderungen in zukünftigen Updates der App zu implementieren.

Insgesamt war es eine unerwartet hilfreiche Erfahrung, eine Sketch-Datei so detailliert zu bearbeiten. Ich bin mit einem viel größeren grundlegenden Verständnis von Dingen wie Schriftgröße, Farbe und Abstand gegangen, weil ich jede Seite neu erstellt habe. Das Kopieren bestehender Designs erforderte eine sehr zufriedenstellende Aufmerksamkeit für Details. Es war, als würde ich ein Lego-Modell zusammenbauen: Ich hatte alle Teile und wusste, wie das Endprodukt aussehen musste. Ich musste nur alles organisieren und zusammenfügen, um das fertige Produkt zu schaffen. Das ist einer der Gründe, warum ich gerne UX-Design mache. Es geht darum, Probleme zu lösen und ein Puzzle zusammenzusetzen, um etwas zu schaffen, das jeder zu schätzen weiß.

Kapitel 2: Das Design

Der nächste Teil meines Praktikums ermöglichte es mir, mich mit einigen Designarbeiten ins Unkraut zu stürzen. Die Aufgabe: eine neue Importseite für die Badger-Webanwendung entwerfen.

Das Team arbeitete an der Neugestaltung der Badger-CRM-Integration, um ein System zu schaffen, mit dem Benutzer alle Datensynchronisierungen anzeigen und ihre Konten selbst verwalten können. Die aktuelle Verbindung erfordert viel praktische Arbeit von Dachs-CSAs und AEs für die Einrichtung und Wartung. Durch die Bereitstellung einer Benutzeroberfläche zur direkten Interaktion mit den Datenimporten wollten wir die Benutzererfahrung für unsere CRM-Integration verbessern.

Mein Ziel war es, eine Seite zu entwerfen, die Fehler anzeigt, die bei Datenimporten auftreten, und die den Benutzern auch mitteilt, wie und wo sie die notwendigen Änderungen an ihren Daten vornehmen können. Wenn mit einem einzelnen Import mehrere Fehler verbunden waren oder Benutzer alle Fehler auf einmal anzeigen möchten, sollten sie in der Lage sein, eine Excel-Datei mit all diesen Informationen herunterzuladen.

Ziele

1. Erstellen Sie eine Importseite, die den Benutzer über den Status eines laufenden Imports informiert;
2. Bereitstellung einer historischen Aufzeichnung von Kontosynchronisierungen zwischen Badger und dem CRM mit detaillierten Fehlern im Zusammenhang mit jedem Import;
3. Bereitstellung von Links zum CRM für jedes Konto, das einen Importfehler in Badger aufweist;
4. Erlauben Sie Benutzern, eine Excel-Datei aller ausstehenden Fehler herunterzuladen.

Benutzergeschichten

Badger-Kunde mit CRM-Konto :
Als Kunde mit einem CRM möchte ich in der Lage sein, mein CRM mit meinem Dachs zu verbinden und alle Datensynchronisierungen zu visualisieren, damit ich alle Fehler im Prozess kenne und bei Bedarf Änderungen vornehmen kann.

Dachs :
Als Dachs möchte ich, dass Benutzer den Status ihrer CRM-Integration verwalten und anzeigen können, damit ich Zeit und manuelle Arbeit sparen kann, indem ich Benutzern bei der Synchronisierung ihres Dachs mit ihren CRM-Konten helfe und Fehler behebe.

Bevor ich mich wirklich mit dem Design befasste, mussten wir einige Überlegungen anstellen, um zu entscheiden, welche Informationen angezeigt werden sollen und wie:

1. Bulk versus kontinuierliche Importe
   Je nach Benutzertyp gibt es zwei Möglichkeiten, Daten in Badger zu importieren. Wenn dies über Tabellenkalkulationen erfolgen würde, würden die Importe gestapelt und wir könnten die Importe in Gruppen visualisieren. Benutzer, die in ihre CRMs integriert sind, müssten ihre Badger-Daten jedoch ständig aktualisieren, wenn sie Änderungen in ihrem CRM vornehmen. Das Design musste in der Lage sein, beide Anwendungsfälle zu bewältigen.
2. Datensätze importieren
   Da es sich um ein neues Feature handelte, waren wir uns bezüglich des Nutzerverhaltens nicht ganz sicher. Daher war die Entscheidung, wie die Informationen organisiert werden sollten, eine Herausforderung. Sollten wir Benutzern erlauben, in einer Liste ihres Verlaufs nach einer Unendlichkeitsrolle zu suchen? Wie würden sie nach einem bestimmten Import suchen? Sollten sie es können? Sollen wir die Aktivität Tag für Tag oder Monat für Monat anzeigen?

Letztendlich konnten wir für jedes dieser Probleme nur eine bestmögliche Vermutung anstellen – da wir wussten, dass wir in Zukunft entsprechende Anpassungen vornehmen könnten, sobald die Benutzer mit der Verwendung der Funktion beginnen würden. Nachdem ich über diese Probleme nachgedacht hatte, wechselte ich zum Wireframing. Ich hatte die Gelegenheit, etwas völlig anderes zu entwerfen, und das war sowohl befreiend als auch herausfordernd. Das endgültige Design war eine Kulmination einzelner Elemente aus verschiedenen Designs, die auf dem Weg entstanden sind.

Designprozess

Der schwierigste Teil dieses Prozesses war das Erlernen des Neuanfangs. Ich lernte schließlich, dass es nicht ideal war, etwas aus rein ästhetischen Gründen in mein Design zu zwingen. Dies zu verstehen und meinen Ideen freien Lauf zu lassen, war der Schlüssel zu einem besseren Design. Ich musste lernen, wie man immer wieder neu anfängt, um verschiedene Ideen zu erforschen.

Herausforderungen

1. Verwendung von Leerzeichen

Ich musste sofort herausfinden, welche Informationen wir auf der Seite zeigen wollten. Es gab viele Details, die wir einbeziehen konnten – und definitiv den Raum dafür.

All die unnötigen Informationen fügten viel zu viel kognitive Belastung hinzu und nahmen dem, worüber der Benutzer eigentlich besorgt war. Anstatt zu versuchen, den ganzen weißen Raum loszuwerden, musste ich damit arbeiten. Vor diesem Hintergrund habe ich schließlich alle irrelevanten Informationen weggeworfen, um nur das zu zeigen, worüber wir erwarten, dass sich unsere Benutzer am meisten Sorgen machen: die Fehler im Zusammenhang mit Datenimporten.

Das war die finale Version:

2. Navigation

Die nächste Herausforderung war die Entscheidung zwischen einer Seitenleiste und einer Kopfzeile zur Anzeige von Informationen. Der Vorteil der Seitenleiste bestand darin, dass die Informationen beim Scrollen des Benutzers durchgehend sichtbar waren. Aber wir mussten auch sicherstellen, dass die in der Seitenleiste enthaltenen Informationen in logischem Zusammenhang mit dem stehen, was auf der restlichen Seite vor sich geht.

Der Header bot den Vorteil eines sauberen, einspaltigen Designs. Der Nachteil war, dass es viel vertikalen Platz beanspruchte, je nachdem, wie viele Informationen in der Kopfzeile enthalten waren. Es priorisierte auch visuell den Inhalt der Kopfzeile gegenüber dem, was sich für den Benutzer darunter befand.

Nachdem ich herausgefunden hatte, welche Informationen wo angezeigt werden sollten, wurde die Sidebar-Navigation zur logischeren Entscheidung. Wir gehen davon aus, dass sich die Benutzer in erster Linie mit den Fehlern im Zusammenhang mit ihren Importen befassen, und bei einem großen Header würden zu viele dieser Informationen unter den Rahmen fallen. Die Seitenleiste könnte dann ein Container für eine Import- und Aktivitätszusammenfassung sein, die sichtbar wäre, wenn der Benutzer scrollt.

Design der Seitenleiste : Nachdem ich mich für eine Seitenleiste entschieden hatte, kam es darauf an, zu entscheiden, welche Informationen enthalten sein sollten und wie sie angezeigt werden sollten.

Ich hatte Mühe, ein visuell interessantes Design zu erstellen, weil es nur wenige Informationen zu zeigen gab. Aus diesem Grund habe ich wieder einmal unnötige Elemente hinzugefügt, um den Platz zu füllen, obwohl ich den Benutzer priorisieren wollte. Ich habe mit verschiedenen Inhalten und Farbkombinationen experimentiert und versucht, den Kompromiss zwischen Design und Benutzerfreundlichkeit zu finden. Je mehr ich damit arbeitete, desto mehr konnte ich das Design bis auf die Knochen analysieren. Es wurde einfacher, nützliche Informationen von Füllstoffen zu unterscheiden. Das Endprodukt ist ein optimiertes Design mit nur wenigen zusammenfassenden Statistiken. Es bietet auch eine große Flexibilität, um in Zukunft weitere Informationen hinzuzufügen.

Importprozess : Die Importfortschrittsseite wurde erstellt, nachdem das Design für die Importseite abgeschlossen war. Die größte Design-Herausforderung war hier die Entscheidung, wie die laufende Importsynchronisierung angezeigt werden soll. Ich habe verschiedene Lösungen von Pop-ups und Overlays ausprobiert, mich aber letztendlich damit zufrieden gegeben, den Fortschritt in der Seitenleiste anzuzeigen. Auf diese Weise können Benutzer weiterhin alle Fehler beheben und die historischen Aufzeichnungen ihrer Kontodaten anzeigen, während ein Import durchgeführt wird. Um Unterbrechungen des Imports zu vermeiden, sind die Schaltflächen „Daten synchronisieren“ und „Zurück zu Badger“ deaktiviert, sodass Benutzer die Seite nicht verlassen können.

Nachdem die Designs fertig waren, wechselte ich zu HTML und CSS.

Kapitel 3: HTML/CSS

Dieses Projekt war meine erste Erfahrung mit irgendeiner Art von Codierung. Obwohl ich schon früher versucht hatte, HTML und CSS zu lernen, hatte ich nie ein gewisses Niveau erreicht. Und wie könnte man besser anfangen als mit einem Mockup des eigenen Designs?

Das Verständnis der Logik zum Organisieren eines HTML-Dokuments erinnerte mich an das Organisieren des Sketch-Dokuments mit Symbolen und Überschreibungen. Allerdings endeten die Ähnlichkeiten dort. Programmieren fühlte sich wie eine sehr fremde Sache an, um die ich ständig versuchte, meinen Kopf zu wickeln. Wie mein Mentor sagen würde: „ Beim Programmieren spielen ganz andere Muskeln als beim Designen .“ Jetzt, da ich das Endprodukt in der Hand habe, bin ich fest davon überzeugt, dass das Erlernen des Programmierens das Coolste ist, was ich seit meiner Töpfchenausbildung gelernt habe.

Die erste Herausforderung nach dem Erstellen eines Dokuments und dem Verständnis der Grundlagen war die Arbeit mit Flexbox. Das Design, das ich erstellt hatte, umfasste zwei Säulen nebeneinander. Der rechte Teil sollte scrollen, während der linke statisch blieb. Flexbox schien für diesen Zweck eine saubere Lösung zu sein, vorausgesetzt, ich konnte es zum Laufen bringen.

Die Implementierung von Flexbox bestand aus viel Trial-and-Error und blindem Kopieren von Code, während ich mich durch verschiedene Websites wühlte, Tutorials las und Code untersuchte. Mit der Anleitung meines Mentors durch diesen ganzen Prozess haben wir es schließlich zum Laufen gebracht. Ich werde nie den Moment vergessen, als ich endlich verstand, dass ich mit flex-direction: column alle Elemente in eine einzige Spalte bringen würde, und flex-direction: row half dabei, sie in einer Zeile zu platzieren.

Es macht jetzt so viel Sinn, obwohl mein anfängliches Verständnis genau das Gegenteil war (ich dachte, flex-direction: column würde Elemente in Spalten nebeneinander platzieren). Überraschenderweise kam ich nicht einmal zu dieser Erkenntnis, bis der Code funktionierte. Ich habe meinen Code überprüft und festgestellt, dass ich ihn überhaupt nicht verstanden habe. Was hat mich verraten? In meinem CSS hatte ich flex-direction: row in die Klasse namens column codiert. Dieses Szenario war ziemlich bezeichnend dafür, wie der Rest meiner ersten Programmiererfahrung verlief. Mein mentales Modell stimmte selten mit der Logik des Codes überein, und sie kollidierten oft und gingen getrennte Wege. Als dies geschah, musste ich zurückgehen, meine Missverständnisse finden und den Code korrigieren.

Nachdem ich Flexbox eingerichtet hatte, musste ich herausfinden, wie ich die linke Spalte dazu bringen konnte, fest zu bleiben, während der rechte Teil gescrollt wurde. Es stellte sich heraus, dass dies nicht mit einer einzigen Codezeile erreicht werden konnte, wie ich gehofft hatte. Aber das durchzuarbeiten hat mir geholfen, die Eltern-Kind-Beziehung zu verstehen, die mir beim Rest des Prozesses enorm geholfen hat.

Auch die Codierung der vertikalen Zeitleiste und des Ziffernblatts war ein Prozess. Der Zeitplan war einfacher, als ich ursprünglich erwartet hatte. Ich konnte ein dünnes Rechteck erstellen, einen inneren Schatten und eine Verlaufsfüllung darauf setzen und es der Breite jedes Aktivitätsprotokolls zuweisen.

Das Zifferblatt war knifflig. Ich habe versucht, es mit reinem CSS zu implementieren, mit sehr wenig Erfolg. Es gab ein paar Mal, dass ich darüber nachgedacht habe, das Design für etwas Einfacheres (wie einen Fortschrittsbalken) zu ändern, aber ich bin ziemlich froh, dass ich dabei geblieben bin.

Ein großer Kampf war es, außerhalb des Fortschrittsrads den Hintergrundkreis entlang der Grenze zu überlappen. Hier habe ich das Design ein wenig geändert – anstatt den nicht geladenen Teil der Fortschrittsanzeige auszuschneiden, überlappt er sich rundum. Es war ein Kompromiss zwischen meinem Design und meinem Code, den ich anfangs nicht eingehen wollte. Wie sich jedoch herausstellte, war ich mit dem Endergebnis zufrieden, und als mir dies klar wurde, ging ich diesen Kompromiss gerne ein. Die endgültige Wahl wurde über JavaScript implementiert.

Es gab einen Moment in meinem Programmierprozess, in dem ich jede Codezeile, die ich jemals geschrieben hatte, in jede Klasse geworfen habe, um zu versuchen, sie zum Laufen zu bringen. Um diesen Mangel an Rückblick auszugleichen, musste ich eine ganze Weile damit verbringen, alle Elemente durchzugehen und zu inspizieren, um nutzlosen Code zu entfernen . Ich fühlte mich wie ein Vermieter, der die Mieter rausschmeißt, die keine Miete zahlen. Es war definitiv eine Lektion, die man gelernt hat, um ein gewisses Maß an Haushaltsführung aufrechtzuerhalten und umsichtig und nachdenklich mit Code umzugehen.

Der Großteil der Erfahrung fühlte sich an wie blindes Durchqueren und retrospektives Lernen. Nichts war jedoch befriedigender, als das fertige Produkt zu sehen. Das Durchlaufen des Prozesses ließ mich mit meiner Arbeit auf eine Weise interagieren, wie ich es noch nie zuvor getan hatte, und gab mir einen Einblick, wie Design umgesetzt wird. Bei all meinen Erwartungen an das Praktikum hätte ich nie damit gerechnet, eines meiner eigenen Designs programmieren und erstellen zu können. Selbst nachdem mir gesagt wurde, ich würde es an meinem ersten Tag tun können, habe ich es nicht geglaubt, bis ich diese Seite fertig gesehen hatte.

Kapitel 4: Arbeiten mit Dachsbabys

Als Teil des Prozesses zur Integration von Badger-Benutzern in ihre CRM-Konten mussten sich unsere Benutzer bei ihrem CRM anmelden – und wir mussten sie von Badger auf die native CRM-Website umleiten. Um einen plötzlichen, ruckartigen Wechsel von einer Website zur anderen zu verhindern, musste ich Zwischenladeseiten entwerfen.

Ich habe mit Ihrer gewöhnlichen statischen Weiterleitungsseite angefangen. Sie waren einfach und erfüllten definitiv ihren Zweck, aber ganz zufrieden waren wir damit nicht.

Die Herausforderung bestand darin, etwas Einfaches und Interessantes zu schaffen, das den Benutzer darüber informierte, dass er unsere Website in nur wenigen Sekunden verließ, als es sichtbar war. Das Design musste sich vorstellen, erklären, warum es da war, und gehen, bevor jemand es satt hatte, es anzusehen. Es war im Wesentlichen eine Übung im Speed-Dating. Vor diesem Hintergrund entschied ich mich, Animationen auszuprobieren – insbesondere die eines frechen kleinen Dachses, inspiriert vom bestehenden Logo.

Mit dem Dachslogo als Ausgangspunkt habe ich verschiedene Dachsfiguren in Adobe Illustrator erstellt. Das ursprüngliche Logo fühlte sich für eine Ladeanimation etwas zu streng an, also entschied ich mich für etwas Niedlicheres. Ich habe die roten Brust- und Gesichtszüge des ursprünglichen Logos aus Konsistenzgründen beibehalten und daran gearbeitet, einen Körper und einen Kopf um diese Elemente herum zu schaffen. Der Kopf und die Streifen brauchten eine Weile, um in Formen zu massieren, mit denen ich zufrieden war. Der Körper nahm die Form etwas leichter an, aber es dauerte etwas länger, das richtige Verhältnis zwischen der Größe des Kopfes und des Körpers zu finden. Sobald ich das festgenagelt hatte, war ich bereit, mit der Animation fortzufahren.

Mein erster Instinkt war, eine Stop-Motion-Animation auszuprobieren. Ich dachte, es würde großartig werden – a la Wallace und Gromit. Aber nach dem ersten Versuch und dann dem zweiten und allen folgenden wurde klar, dass das Anschauen dieser Show als Kind mich nicht vollständig mit den Fähigkeiten ausgestattet hatte, die für eine Stop-Motion-Animation erforderlich sind.

Ich war einfach nicht in der Lage, die gewünschte Glätte zu erreichen, und es gab kleine Inkonsistenzen, die sich für eine sehr kurze Ladeanimation zu störend anfühlten. Die Animation läuft normalerweise mit 23 Bildern pro Sekunde, und meine Dachsanimation hatte nur etwa 15 Bilder pro Sekunde. Ich überlegte, mehr Frames hinzuzufügen, entschied mich aber auf Vorschlag meines Mentors, es stattdessen mit der Charakteranimation zu versuchen.

Dies war das erste Mal, dass ich etwas animierte, das aus mehr als 5 beweglichen Teilen bestand, und es gab definitiv eine Lernkurve, um zu verstehen, wie man eine zweidimensionale Figur auf visuell zufriedenstellende Weise animiert . Ich musste die einzelnen Elemente dazu animieren, sich unabhängig vom Ganzen zu bewegen, um die Bewegung glaubwürdig zu machen. Während ich an der Animation arbeitete, wurden die importierten Ebenen immer feiner. Der Kopf wurde von einer Schicht zu fünf, als ich das Verhalten des Programms lernte und wie man den Dachs bewegt.

Ich habe jedes Glied des Körpers verankert und jedes Körperteil als Kind der übergeordneten Schicht des Körpers zugeordnet. Ich habe die Ankerpunkte entsprechend oben auf den Oberschenkeln und Schultern gesetzt, um sicherzustellen, dass sie sich angemessen bewegen, und dann durch Rotationen und Lockerungen die Bewegung der Körperteile simuliert. Der Kopf war ein bisschen knifflig und erforderte eine vertikale Bewegung unabhängig vom Körper. Um den Sprung realistischer erscheinen zu lassen, wollte ich, dass der Kopf ein wenig im Raum hängt, bevor er vom Rest des Körpers nach oben gedrückt wird, und nur leicht nach dem Rest von ihm nach unten kommt. Ich habe auch den Winkel angepasst, in dem ich versuchte, ihn so aussehen zu lassen, als würde er mit seiner Nase führen, während des Sprungs nach oben zeigen und beim Laufen geradeaus.

Die Animation auf der Seite, die den Benutzer zurück zu Badger umleitet, zeigte das Dachsbaby, das mit einem Rucksack voller Informationen aus dem CRM zu Badger zurücklief.

Und schließlich: der verwirrte Dachs. Dies geschah für die letzte Seite, die ich erstellen musste: eine Fehlerseite, die den Benutzer über unerwartete Komplikationen im Integrationsprozess informiert. Und wie könnte man das besser tun als mit einem sympathischen, verwirrten Dachs?

Der knifflige Teil hier war die Kombination des Seitenprofils des bestehenden Cartoon-Dachs und des Logos, um eine nach vorne gerichtete Kopfform zu schaffen. Bevor ich mit diesem Projekt begann, hatte ich noch nie einen echten lebenden Dachs gesehen. Unnötig zu erwähnen, dass Badger diesen Monat seinen Weg in meine Google-Bildersuche gefunden hat. Ich war überrascht zu sehen, wie flach der Kopf eines Dachses eigentlich ist. Bei meinen ersten Entwürfen habe ich versucht, dies nachzuahmen, war aber mit dem Ergebnis nicht zufrieden. Ich habe noch etwas mit der Form gearbeitet und die Platzierung der Nase, der Streifen und der Ohren angepasst, um das Endergebnis zu erzielen:

Dieser Animationsprozess hat mich gezwungen, mein bereits vorhandenes Wissen auf ein höheres Niveau zu bringen. Ich musste mich über das hinausdrängen, was ich wusste, anstatt mich auf das zu beschränken, was ich zu tun glaubte. Ich habe ursprünglich mit der Stop-Motion-Animation angefangen, weil ich mich nicht getraut habe, Charakteranimationen zu machen. Indem ich mir die Chance gab, etwas Neues und Anderes auszuprobieren, konnte ich etwas erreichen, das meine eigenen Erwartungen übertraf.

Fazit

Die drei Monate, die ich in meinem Praktikum verbracht habe, waren unglaublich befriedigend. Jeden Tag ging es darum, etwas Neues zu lernen und auszuprobieren. Bei allem, was ich tat, gab es Herausforderungen – sogar bei Aufgaben, mit denen ich vertrauter war, wie zum Beispiel Design. Jedes Mal, wenn ich etwas erstellte, war ich sehr unsicher und besorgt darüber, wie es aufgenommen werden würde. Es gab viele Selbstzweifel und viele verworfene Ideen.

Aus diesem Grund war es unglaublich, Teil eines Teams zu sein und einen Mentor zu haben, der mich in die richtige Richtung führt. Die Aufforderung, etwas anderes auszuprobieren, war oft die einzige Ermutigung, die ich brauchte , um etwas anderes auszuprobieren und etwas Größeres und Besseres zu erreichen. Ich stelle mir mich gerne als Nagetier in einem Maulwurfspiel vor, das immer wieder auf den Kopf geschlagen wird, aber immer wieder auftaucht. Jetzt sind die Kämpfe und Herausforderungen zu Ende, ich will es nur noch einmal machen.

Ich schätze, was ich gelernt habe und wie ich dazu gedrängt wurde, über das hinauszugehen, was ich für möglich hielt. Es ist verrückt zu sehen, wie weit ich in ein paar Monaten gekommen bin. Mein Verständnis davon, ein UX-Designer zu sein, ist immens gewachsen, vom Herausfinden der Funktionen über das Ausarbeiten des Designs bis hin zum Schreiben von Front-End-Code, um es zu implementieren. Dieses Praktikum hat mir gezeigt, wie viel ich noch lernen muss und hat mich motiviert, weiter zu arbeiten. Ich habe verstanden, dass das, was ich tun kann, niemals durch das begrenzt sein sollte, was ich zu tun weiß.