Wyostrz swoje umiejętności dzięki zabawnym grom online dla projektantów

Opublikowany: 2022-09-08

Odnoszący sukcesy projektanci rutynowo podnoszą swoje umiejętności i przekwalifikowują się w celu wzmocnienia podstaw stosowanych w różnych narzędziach, projektach i dyscyplinach. Jednak znalezienie dodatkowego czasu na naukę w tygodniu pracy nie jest łatwe. Na szczęście gry online to zabawny i edukacyjny sposób dla projektantów UI/UX na doskonalenie swoich umiejętności i zdobywanie nowych. Dzięki interaktywnym i wciągającym (i często darmowym) doświadczeniom w grach online możesz doskonalić umiejętności techniczne, takie jak wyrównanie, typografia i teoria kolorów.

Oprócz nauki nowych technik projektowania, odkryłem, że granie w gry online wprowadza mnie w lżejszy nastrój, zwiększa moją kreatywność i pomaga lepiej wykorzystywać podstawowe zasady projektowania. Ilekroć mam wolny czas lub borykam się z uporczywym problemem projektowym, gram w jedną z tych gier i wychodzę ze świeżej perspektywy.

Popraw swoje poczucie wyrównania

Wyrównanie to podstawowa zasada projektowania, która kieruje kompozycją wizualną oraz wspiera użyteczność i czytelność.

Jest wyśrodkowany, co świetnie nadaje się do trenowania poczucia wyrównania i szybkiego wyłapywania błędów w odstępach. Celem jest ustalenie, czy kropka jest wyśrodkowana wewnątrz kształtu. To prosta koncepcja, ale gra jest trudna, ponieważ kropki są często umieszczane boleśnie blisko środka. Gra buduje świadomość kompozycyjną, zmuszając do rozważenia geometrii i znalezienia punktów odniesienia w nakładających się i sąsiednich kształtach.

Początek It's Centered That, gry online dla projektantów. Ekran zawiera duży niebieski krzyż pośrodku, buźkę po lewej stronie i smutną emotikon po prawej.
Jest wyśrodkowany To testuje poczucie wyrównania graczy, prosząc ich o ustalenie, czy kropka jest wyśrodkowana.

Poszerz swoją wiedzę na temat projektowania krojów pisma

Zrozumienie niuansów krojów pisma może pomóc projektantom ustalić hierarchię wizualną, zapewnić czytelność tekstu i lepiej przekazać znaczenie tekstu.

Gra, w której nakręciłem serif, testuje, jak szybko rozpoznajesz czcionki szeryfowe. Na początek otrzymujesz dwie litery, z których jedna jest czcionką szeryfową, i musisz „strzelić w szeryf”, klikając ją, zanim skończy ci się czas. W miarę postępów wyświetlanych jest coraz więcej liter jednocześnie, co utrudnia znalezienie i strzelanie do różnych stylów szeryfowych.

Ta gra sprawi, że będziesz na palcach! Gram w nią co tydzień i po kilku rundach zawsze jestem zaskoczony, jak trudne jest to wyzwanie.

Na początku kręciłem serif, grę online dla projektantów. Dwanaście białych liter szeryfowych i bezszeryfowych na ciemnym tle.
Nakręciłem wyzwania szeryfowe, jak szybko gracze mogą rozpoznawać i „strzelać” różne czcionki szeryfowe.

Typewar to kolejny trener krojów pisma, który rzuca wyzwanie twojej zdolności do identyfikowania różnych krojów pisma. W każdej rundzie wyświetlany jest glif i musisz wybrać poprawną nazwę kroju pisma z pary opcji. Zdobywasz lub tracisz punkty za odpowiedź na pytanie, a ilość punktów przyznanych na końcu zależy od tego, ilu innych graczy odpowiedziało poprawnie na to samo pytanie. Natychmiastowa informacja zwrotna, statystyki w czasie rzeczywistym i kontakt z mało znanymi czcionkami zmotywują Cię do dalszej nauki.

Początek wojny maszynowej, gry online dla projektantów. Duża litera „D” znajduje się na środku ekranu, a pod nią pojawiają się dwie opcje kroju pisma.
Typewar pomaga graczom poprawić ich zdolność do identyfikowania różnych krojów pisma.

Popraw swoje oko pod kątem kerningu

Jednym ze sposobów poprawy czytelności tekstu cyfrowego jest zapewnienie efektywnego kerningu, czyli odstępów między znakami. Kerning często znajduje się pod radarem projektantów, ponieważ jest predefiniowany w plikach czcionek każdego kroju pisma. Warto jednak wiedzieć, jak dostosować kerning, gdy relacje między postaciami wydają się nieodpowiednie lub jeśli trzeba utworzyć logo lub czcionkę na zamówienie dla klienta.

Kern Type pomaga dostroić umiejętności kerningu, testując umiejętność poprawnego umieszczania liter w słowach. Za każde słowo, które kernujesz, otrzymujesz wynik na 100 i opcję przełączania między trzema widokami: odstępami, optymalnymi odstępami i kombinacją obu dla porównania.

Ciągle wracam do tej gry, ponieważ ciężko jest zdobyć 100 punktów i przypomina mi to, że zawsze jest miejsce na poprawę.

Początek Kern Type, gry online dla projektantów. Słowo „Czekaj” znajduje się na środku ekranu.
Kern Type testuje zdolność graczy do optymalizacji spacji między literami.

Ulepsz swoją grę kolorów

Ulepszając swoje umiejętności kolorystyczne, możesz podejmować mądrzejsze i bardziej znaczące decyzje w wielu projektach i dyscyplinach. Kolor to gra, w której musisz zidentyfikować odcienie i nasycenie, a także komplementarne, analogiczne, triadyczne i tetradyczne pary kolorów. Interfejs pokazuje interaktywne koło kolorów z podświetlonym kolorem pośrodku. Musisz określić kolor (lub kolory) wewnątrz koła kolorów w ciągu 10 sekund lub mniej, zadanie to staje się trudniejsze, gdy próbujesz dopasować kolory do triadycznych i tetradycznych schematów kolorów.

Początek Color, gry online dla projektantów. Koło kolorów pokazujące kolory dopełniające i wewnętrzny zegar na środku.
Kolor pomaga graczom poprawić ich umiejętności dopasowywania kolorów, zmuszając ich do identyfikowania określonych odcieni, nasycenia i palet kolorów.

Udoskonal swoją technikę wektorową

Narzędzia wektorowe, takie jak Figma, Sketch i Adobe Illustrator, umożliwiają projektantom tworzenie grafiki cyfrowej, która skaluje się bez utraty jakości — w przeciwieństwie do obrazów pikselowych, które tracą rozdzielczość wraz ze wzrostem rozmiaru. Jednak rysowanie i manipulowanie kształtami i krzywymi wektorowymi może być trudnym procesem.

Gra logiczna uczy o operacjach logicznych, które są używane do szybkiego konstruowania i modyfikowania kształtów 2D w narzędziach do projektowania wektorowego. W grze zobaczysz kształt do odtworzenia. Po kilku sekundach kształt zmienia się w kontur. Po lewej stronie ekranu znajduje się kilka kształtów, które można przeciągnąć do konturu, aby odtworzyć ostateczny kształt. Na dole ekranu znajdują się cztery operacje logiczne: suma, odejmowanie, przecięcie i różnica. Kliknięcie przycisku Kontynuuj uruchamia animację krok po kroku, która pokazuje, jak scalić kształty przy użyciu wybranej operacji logicznej. W przypadku wybrania nieprawidłowej operacji ta animacja pomaga w wizualizacji błędów.

Początek Boolean, gry online dla projektantów. Po lewej stronie menu nawigacyjne. Wybór konturów kształtów znajduje się na środku, a wybór białych kształtów znajduje się po prawej stronie.
Gra Boolean uczy graczy, jak korzystać z operacji logicznych w grafice wektorowej.

Shape Type to kolejna gra wektorowa do wypróbowania. W nim gracz otrzymuje literę, którą należy zmienić w poprawną formę, przeciągając różne punkty zakotwiczenia i uzyskując wynik podobieństwa na 100. Podobnie jak Kern Type, możesz również przełączać się między trzema widokami, aby porównać swój wynik z oryginalny kształt. Oprócz udoskonalania umiejętności rysowania wektorowego, Shape Type to świetny sposób na przyjrzenie się z bliska anatomicznym elementom różnych krojów pisma.

Początek Shape Type, gry online dla projektantów. Na środku ekranu znajduje się duża litera „B” z wynikiem procentowym, trzema opcjami przełączania i przyciskiem Dalej po prawej stronie.
Shape Type rzuca wyzwanie graczom, aby ćwiczyli przekształcanie wektorowych liter.

Ostatnią grą, która pomoże ci poprawić twoje umiejętności wektorowe, jest gra Bezier, która pomaga tworzyć bardziej precyzyjną grafikę za pomocą narzędzia Pióro. Samouczki wprowadzające wyjaśniają, jak używać elementów sterujących, takich jak alt i shift, do ustawiania punktów kontrolnych i manipulowania uchwytami Beziera. Gra uczy, jak rysować proste kształty geometryczne oraz bardziej złożone kształty, takie jak serce i samochód, z jak najmniejszą liczbą punktów zakotwiczenia lub węzłów. Aby było ciekawie, otrzymujesz określoną liczbę węzłów na każdy poziom, a gra prowadzi bieżący rejestr węzłów, których nie używasz.

Lubię tę grę, ponieważ pomaga mi zwizualizować związek między położeniem punktu zakotwiczenia a kątami uchwytu Beziera, co prowadzi do gładszych linii i krzywych.

Początek The Bezier Game, gry online dla projektantów. Na środku ekranu znajduje się zarys serca z punktami kontrolnymi.
Gra Bezier pomaga graczom udoskonalać ważne umiejętności wykonywane piórem, takie jak umieszczanie punktów kontrolnych i przeciąganie uchwytów Beziera.

Odśwież podstawowe kodowanie

Niezależnie od tego, czy chodzi o rozwój kariery, czy współpracę z programistami, zrozumienie podstaw HTML i CSS sprawia, że ​​projektant jest znaczącym atutem dla multidyscyplinarnych zespołów. Co więcej, wiedza z zakresu programowania front-end pomaga projektantom hartować ich pomysły za pomocą realistycznych parametrów.

Flexbox Froggy przedstawia krok po kroku podstawy kodowania. Uczy CSS flexbox, modelu układu strony CSS3, który ułatwia pozycjonowanie komponentów interfejsu użytkownika, umożliwiając kontrolę wyrównania, odstępów i zawijania elementów na stronach internetowych za pomocą tylko jednego lub dwóch wierszy kodu.

W grze pomagasz złośliwej żabie i jej kumplom skakać po ekranie, pisząc wiersze kodu CSS. Na każdym poziomie mini samouczek nad edytorem kodu opisuje różne polecenia, których możesz użyć. Gdy piszesz kod po lewej stronie ekranu, odpowiednie zmiany zachodzą po prawej stronie. Jeśli żaba dotrze do lilypadu, kod jest poprawny.

Początek Flexbox Froggy, gry online dla projektantów. Po lewej edytor kodu i instrukcje. Po prawej cztery różnokolorowe animacje żab.
Flexbox Froggy uczy graczy, jak pisać podstawowy kod CSS flexbox.

Zwiększ swoją wiedzę na temat UI/UX

Gry online mogą również pomóc projektantom poprawić ich wiedzę na temat UI/UX i tworzyć bezproblemowe doświadczenia, które zwiększają współczynniki konwersji i ROI.

Funkcja Can't Unsee wzbogaca Twoje ogólne możliwości UI/UX, testując Twoją wiedzę na temat koncepcji projektowych, takich jak hierarchia, kontrast, wyrównanie, typografia i stylizacja komponentów. Ekran pokazuje dwa elementy projektu i prosi o wybranie bardziej przyjaznej dla użytkownika opcji. Komponenty mogą wyglądać identycznie dla niewprawnego oka, ale doświadczony projektant powinien być w stanie je odróżnić, zauważając niewielkie różnice między elementami, takie jak nierówny tekst lub nierówne wypełnienie.

Początek Can't Unsee, gry online dla projektantów. Bezpośrednio pod nimi znajdują się dwa pola czatu z instrukcjami dla gracza. Na dole ekranu pojawi się pasek wskaźnika postępu.
Can't Unsee prosi graczy o wybranie bardziej przyjaznej dla użytkownika opcji dwóch projektów.

Wykorzystaj w pełni internetowe gry projektowe

Często jestem zdumiony tym, jak szybko rozwija się branża projektowa. Czasami presja, by dotrzymać kroku nowym narzędziom i technikom, może przytłaczać i tłumić moją kreatywność. Najlepszą pracę projektową wykonuję, gdy podchodzę do problemów z dziecięcym duchem, dlatego tak bardzo lubię te gry: pozwalają mi uczyć się i ćwiczyć, zachowując poczucie zabawy i zachwytu.

Niezależnie od tego, czy chcesz przekwalifikować się, podnieść umiejętności, czy nauczyć się nowej techniki UI/UX, gry projektowe online pomogą Ci przetestować i rozwinąć Twoje artystyczne i techniczne umiejętności. Jak powiedział kiedyś Pablo Picasso: „Zawsze robię to, czego nie mogę zrobić, abym mógł się tego nauczyć”.