Schärfen Sie Ihre Fähigkeiten mit lustigen Online-Spielen für Designer

Veröffentlicht: 2022-09-08

Erfolgreiche Designer bilden sich routinemäßig weiter und bilden sich weiter, um die Grundlagen zu festigen, die in allen Tools, Projekten und Disziplinen verwendet werden. Es ist jedoch nicht einfach, während der Arbeitswoche zusätzliche Zeit zum Lernen zu finden. Glücklicherweise ist Online-Gaming eine unterhaltsame und lehrreiche Möglichkeit für UI/UX-Designer, ihre Fähigkeiten zu verbessern und neue zu erwerben. Durch interaktive und immersive (und oft kostenlose) Online-Gaming-Erlebnisse können Sie technische Fähigkeiten wie Ausrichtung, Typografie und Farbtheorie verfeinern.

Neben dem Erlernen neuer Designtechniken habe ich festgestellt, dass mich das Spielen von Online-Spielen in eine bessere Stimmung versetzt, meine Kreativität fördert und mir hilft, grundlegende Designprinzipien besser zu nutzen. Wann immer ich Freizeit habe oder ein hartnäckiges Designproblem habe, spiele ich eines dieser Spiele und komme mit einer neuen Perspektive davon.

Verbessern Sie Ihren Ausrichtungssinn

Die Ausrichtung ist ein grundlegendes Designprinzip, das die visuelle Komposition leitet und die Benutzerfreundlichkeit und Lesbarkeit unterstützt.

Es ist zentriert, das ist großartig, um Ihren Ausrichtungssinn zu trainieren und Ihnen zu helfen, Abstandsfehler schnell zu erkennen. Das Ziel besteht darin, zu bestimmen, ob ein Punkt innerhalb einer Form zentriert ist. Es ist ein einfaches Konzept, aber das Spiel ist herausfordernd, weil die Punkte oft quälend nahe an der Mitte platziert sind. Das Spiel fördert das Kompositionsbewusstsein, indem es Sie dazu zwingt, Geometrie zu berücksichtigen und Referenzpunkte in überlappenden und benachbarten Formen zu finden.

Der Beginn von It's Centered That, einem Online-Spiel für Designer. Der Bildschirm enthält ein großes blaues Kreuz in der Mitte, ein Smiley-Emoticon auf der linken Seite und ein trauriges Emoticon auf der rechten Seite.
Es ist zentriert Das testet den Ausrichtungssinn der Spieler, indem sie gefragt werden, ob ein Punkt zentriert ist.

Erweitern Sie Ihr Schriftdesign-Wissen

Das Verständnis der Nuancen von Schriftarten kann Designern helfen, eine visuelle Hierarchie aufzubauen, sicherzustellen, dass Text lesbar ist, und die Bedeutung von Texten besser zu kommunizieren.

Das Spiel I shot the serif testet, wie schnell man Serifenschriften erkennen kann. Zu Beginn werden Ihnen zwei Buchstaben präsentiert, von denen einer eine Serifenschrift ist, und Sie müssen „auf die Serife schießen“, indem Sie darauf klicken, bevor die Zeit abläuft. Während Sie fortschreiten, werden Ihnen immer mehr Buchstaben gleichzeitig angezeigt, was es schwieriger macht, die verschiedenen Serifenstile zu finden und zu fotografieren.

Dieses Spiel wird Sie auf Trab halten! Ich spiele es jede Woche und bin immer wieder überrascht, wie herausfordernd es nach ein paar Runden ist.

Der Anfang von I shot the serif, einem Online-Spiel für Designer. Zwölf weiße Serifen- und Sans-Serif-Buchstaben auf dunklem Hintergrund.
Ich habe die Serifen herausgefordert, wie schnell Spieler verschiedene Serifenschriften erkennen und „schießen“ können.

Typewar ist ein weiterer Schrifttrainer, der Ihre Fähigkeit herausfordert, verschiedene Schriften zu erkennen. In jeder Runde wird Ihnen eine Glyphe gezeigt und Sie müssen aus zwei Optionen den richtigen Schriftnamen auswählen. Sie erhalten oder verlieren Punkte für die Beantwortung der Frage, und die Anzahl der am Ende vergebenen Punkte hängt davon ab, wie viele andere Spieler dieselbe Frage richtig beantwortet haben. Das sofortige Feedback, Echtzeit-Statistiken und der Umgang mit wenig bekannten Schriftarten werden Sie motivieren, weiter zu lernen.

Die Anfänge von Typewar, einem Online-Spiel für Designer. Ein großer Buchstabe „D“ befindet sich in der Mitte des Bildschirms und zwei Schriftartoptionen werden darunter angezeigt.
Typewar hilft Spielern, ihre Fähigkeit zu verbessern, verschiedene Schriftarten zu erkennen.

Verbessern Sie Ihr Auge für Kerning

Eine Möglichkeit, die Lesbarkeit von digitalem Text zu verbessern, besteht darin, für effektives Kerning oder den Abstand zwischen Zeichen zu sorgen. Kerning fliegt oft unter dem Radar von Designern, weil es in den Schriftdateien jeder Schriftart vordefiniert ist. Aber es ist hilfreich zu wissen, wie man das Kerning anpasst, wenn die Beziehung zwischen den Zeichen falsch zu sein scheint oder wenn Sie ein maßgeschneidertes Logo oder eine Schriftart für einen Kunden erstellen müssen.

Kern Type hilft Ihnen, Ihre Kerning-Fähigkeiten zu verfeinern, indem Sie Ihre Fähigkeit testen, Buchstaben innerhalb von Wörtern korrekt zu platzieren. Für jedes Wort, das Sie kernen, erhalten Sie eine Punktzahl von 100 und die Option, zwischen drei Ansichten umzuschalten: Ihrem Abstand, dem optimalen Abstand und einer Kombination aus beiden zum Vergleich.

Ich kehre immer wieder zu diesem Spiel zurück, weil es schwer ist, 100 Punkte zu erzielen, und es erinnert mich daran, dass es immer Raum für Verbesserungen gibt.

Der Beginn von Kern Type, einem Online-Spiel für Designer. Das Wort „Warten“ befindet sich in der Mitte des Bildschirms.
Kern Type testet die Fähigkeit der Spieler, Abstände zwischen Buchstaben zu optimieren.

Aktualisieren Sie Ihr Farbspiel

Indem Sie Ihre Farbkenntnisse verbessern, können Sie intelligentere und aussagekräftigere Entscheidungen in einem Spektrum von Designprojekten und -disziplinen treffen. Farbe ist ein Spiel, das Sie herausfordert, Farbtöne und Sättigung sowie komplementäre, analoge, triadische und tetradische Farbpaare zu identifizieren. Die Benutzeroberfläche zeigt ein interaktives Farbrad mit einer hervorgehobenen Farbe in der Mitte. Sie müssen die Farbe (oder Farben) innerhalb des Farbkreises in 10 Sekunden oder weniger bestimmen, eine Aufgabe, die immer schwieriger wird, wenn Sie versuchen, Farben für triadische und tetradische Farbschemata abzugleichen.

The Beginning of Color, ein Online-Spiel für Designer. Ein Farbrad mit Komplementärfarben und einem internen Timer in der Mitte.
Farbe hilft den Spielern, ihre Farbanpassungsfähigkeiten zu verbessern, indem sie herausgefordert werden, bestimmte Farbtöne, Sättigung und Farbpaletten zu identifizieren.

Verfeinern Sie Ihre Vektortechnik

Mit vektorbasierten Tools wie Figma, Sketch und Adobe Illustrator können Designer digitale Grafiken erstellen, die ohne Qualitätsverlust skaliert werden können – im Gegensatz zu Pixelbildern, die mit zunehmender Größe an Auflösung verlieren. Das Zeichnen und Bearbeiten von Vektorformen und -kurven kann jedoch ein kniffliger Prozess sein.

Das Boolesche Spiel lehrt Sie boolesche Operationen, die zum schnellen Erstellen und Ändern von 2D-Formen in vektorbasierten Designwerkzeugen verwendet werden. Im Spiel wird Ihnen eine Form gezeigt, die Sie replizieren können. Nach einigen Sekunden verwandelt sich die Form in einen Umriss. Auf der linken Seite des Bildschirms befinden sich mehrere Formen, die Sie in den Umriss ziehen können, um die endgültige Form zu reproduzieren. Am unteren Rand des Bildschirms befinden sich vier boolesche Operationen: Vereinigung, Subtraktion, Schnittmenge und Differenz. Durch Klicken auf die Schaltfläche Weiter wird eine Schritt-für-Schritt-Animation ausgelöst, die Ihnen zeigt, wie Sie die Formen mit der ausgewählten booleschen Operation zusammenführen. Wenn eine falsche Operation ausgewählt wird, hilft Ihnen diese Animation, Ihre Fehler zu visualisieren.

Die Anfänge von Boolean, einem Online-Spiel für Designer. Links ein Navigationsmenü. Eine Auswahl an Formumrissen befindet sich in der Mitte und eine Auswahl an weißen Formen befindet sich rechts.
Das Boolesche Spiel lehrt Spieler, wie man Boolesche Operationen in Vektorgrafiken verwendet.

Shape Type ist ein weiteres Vektorspiel zum Ausprobieren. Darin wird dem Spieler ein Buchstabe präsentiert, der durch Ziehen verschiedener Ankerpunkte in seine korrekte Form gebracht und mit einem Ähnlichkeitswert von 100 versehen werden muss. Wie bei Kern Type können Sie auch zwischen drei Ansichten wechseln, um Ihr Ergebnis mit dem zu vergleichen ursprüngliche Form. Shape Type verfeinert nicht nur Ihre Fähigkeiten zum Zeichnen von Vektoren, sondern ist auch eine großartige Möglichkeit, die anatomischen Elemente verschiedener Schriftarten aus der Nähe zu betrachten.

Der Beginn von Shape Type, einem Online-Spiel für Designer. In der Mitte des Bildschirms befindet sich ein großer Buchstabe „B“ mit einem Prozentwert, drei Umschaltoptionen und einer Schaltfläche „Weiter“ auf der rechten Seite.
Shape Type fordert die Spieler heraus, das Umformen von Vektorbuchstabenformen zu üben.

Ein letztes Spiel, das Ihnen helfen wird, Ihre Vektorfähigkeiten zu verbessern, ist The Bezier Game, das Ihnen hilft, präzisere Grafiken mit dem Stiftwerkzeug zu erstellen. In Einführungstutorials wird erläutert, wie Sie Steuerelemente wie Alt und Umschalt verwenden, um Ankerpunkte zu positionieren und Bezier-Griffe zu manipulieren. Das Spiel bringt Ihnen bei, einfache geometrische Formen zusammen mit komplexeren Formen wie einem Herz und einem Auto mit so wenig Ankerpunkten oder Knoten wie möglich zu zeichnen. Um die Dinge interessant zu halten, erhalten Sie für jedes Level eine bestimmte Anzahl von Knoten, und das Spiel führt eine laufende Liste der Knoten, die Sie nicht verwenden.

Ich mag dieses Spiel, weil es mir hilft, die Beziehung zwischen der Platzierung von Ankerpunkten und den Winkeln der Bezier-Griffe zu visualisieren, was zu glatteren Linien und Kurven führt.

Der Beginn von The Bezier Game, einem Online-Spiel für Designer. Der Umriss eines Herzens mit Ankerpunkten befindet sich in der Mitte des Bildschirms.
Das Bezier-Spiel hilft Spielern dabei, wichtige Pen-Take-Fähigkeiten zu verfeinern, wie z. B. das Platzieren von Ankerpunkten und das Ziehen von Bezier-Griffen.

Frischen Sie die grundlegende Codierung auf

Ob für die Karriereentwicklung oder die Zusammenarbeit mit Entwicklern, das Verständnis der Grundlagen von HTML und CSS macht einen Designer zu einer erheblichen Bereicherung für multidisziplinäre Teams. Darüber hinaus helfen Front-End-Programmierkenntnisse Designern, ihre Ideen mit realistischen Parametern zu mildern.

Flexbox Froggy erklärt Schritt für Schritt die Grundlagen des Programmierens. Es lehrt CSS Flexbox, ein CSS3-Weblayoutmodell, das die Positionierung von UI-Komponenten vereinfacht, indem es die Ausrichtungskontrolle, den Abstand und das Umbrechen von Elementen auf Webseiten mit nur einer oder zwei Codezeilen ermöglicht.

Im Spiel hilfst du einem schelmischen Frosch und seinen Kumpels, über den Bildschirm zu hüpfen, indem du CSS-Codezeilen schreibst. Auf jeder Ebene beschreibt ein Mini-Tutorial über dem Code-Editor die verschiedenen Befehle, die Sie verwenden können. Während Sie den Code auf der linken Seite des Bildschirms schreiben, treten die entsprechenden Änderungen auf der rechten Seite auf. Wenn der Frosch das Seerosenblatt erreicht, ist der Code richtig.

Der Beginn von Flexbox Froggy, einem Online-Spiel für Designer. Auf der linken Seite ein Code-Editor und Anweisungen. Rechts vier verschiedenfarbige Froschanimationen.
Flexbox Froggy bringt Spielern bei, wie man grundlegenden CSS-Flexbox-Code schreibt.

Steigern Sie Ihr UI/UX-Wissen

Online-Spiele können Designern auch dabei helfen, ihre UI/UX-Kenntnisse zu verbessern und reibungslose Erlebnisse zu schaffen, die die Konversionsraten und den ROI steigern.

Can't Unsee bereichert Ihre gesamten UI/UX-Fähigkeiten, indem Ihr Wissen über Designkonzepte wie Hierarchie, Kontrast, Ausrichtung, Typografie und Komponentenstil getestet wird. Der Bildschirm zeigt zwei Designkomponenten und fordert Sie auf, die benutzerfreundlichere Option auszuwählen. Komponenten können für das ungeübte Auge identisch aussehen, aber ein erfahrener Designer sollte in der Lage sein, sie voneinander zu unterscheiden, indem er kleine Unterschiede zwischen den Elementen bemerkt, wie z. B. falsch ausgerichteten Text oder ungleichmäßige Polsterung.

Der Anfang von Can't Unsee, einem Online-Spiel für Designer. Unmittelbar darunter befinden sich zwei Chatboxen mit Anweisungen für den Spieler. Am unteren Rand des Bildschirms wird eine Fortschrittsanzeige angezeigt.
Can't Unsee fordert die Spieler auf, die benutzerfreundlichere Option von zwei Designs zu finden.

Machen Sie das Beste aus Online-Designspielen

Ich bin oft erstaunt, wie schnell sich die Designbranche entwickelt. Manchmal kann der Druck, mit neuen Tools und Techniken Schritt zu halten, überwältigend sein und meine Kreativität ersticken. Ich mache meine beste Designarbeit, wenn ich Probleme mit einem kindlichen Geist angehe, weshalb ich diese Spiele so sehr genieße: Sie ermöglichen es mir zu lernen und zu üben, während ich einen Sinn für Spiel und Staunen bewahre.

Egal, ob Sie sich weiterbilden, weiterbilden oder eine neue UI/UX-Technik erlernen möchten, Online-Designspiele können Ihnen dabei helfen, Ihre künstlerischen und technischen Fähigkeiten zu testen und zu erweitern. Wie Pablo Picasso einmal sagte: „Ich mache immer das, was ich nicht kann, damit ich lerne, wie es geht.“