디자이너를 위한 재미있는 온라인 게임으로 기술을 연마하세요

성공적인 디자이너는 도구, 프로젝트 및 분야 전반에 걸쳐 사용되는 기본 사항을 강화하기 위해 정기적으로 기술을 향상하고 재기술합니다. 그러나 주중 학습을 위한 추가 시간을 찾는 것은 쉽지 않습니다. 다행히 온라인 게임은 UI/UX 디자이너가 기술을 연마하고 새로운 기술을 습득할 수 있는 재미있고 교육적인 방법입니다. 대화형 및 몰입형(종종 무료) 온라인 게임 경험을 통해 정렬, 타이포그래피, 색상 이론과 같은 기술을 연마할 수 있습니다.

새로운 디자인 기법을 배우는 것 외에도 온라인 게임을 하면 기분이 한결 가벼워지고 창의력이 향상되며 핵심 디자인 원칙을 더 잘 활용하는 데 도움이 된다는 것을 알게 되었습니다. 여가 시간이 있거나 완고한 디자인 문제에 직면할 때마다 저는 이 게임 중 하나를 플레이하고 새로운 관점을 갖게 됩니다.

정렬 감각 향상

정렬은 시각적 구성을 안내하고 사용성과 가독성을 지원하는 기본적인 디자인 원칙입니다.

It's Centered 그것은 정렬 감각을 훈련하고 간격 실수를 빠르게 잡는 데 도움이 됩니다. 목표는 점이 모양 내부의 중앙에 있는지 여부를 확인하는 것입니다. 단순한 개념이지만, 점들이 종종 고통스러울 정도로 중앙에 가깝게 배치되기 때문에 게임은 도전적입니다. 이 게임은 기하학을 고려하고 겹치거나 인접한 모양에서 참조점을 찾도록 하여 구성 인식을 구축합니다.

서체 디자인 지식 확장

서체의 뉘앙스를 이해하면 디자이너가 시각적 계층 구조를 설정하고 텍스트의 가독성을 보장하며 카피의 의미를 더 잘 전달할 수 있습니다.

내가 세리프로 촬영한 게임은 세리프 글꼴을 얼마나 빨리 인식할 수 있는지 테스트합니다. 시작하려면 두 글자가 표시되며 그 중 하나는 세리프 글꼴이며 시간이 다 떨어지기 전에 해당 글자를 클릭하여 "세리프를 촬영"해야 합니다. 진행하면서 동시에 점점 더 많은 글자가 표시되므로 다양한 세리프 스타일을 찾고 촬영하기가 더 어려워집니다.

이 게임은 당신의 발끝을 지켜줄 것입니다! 나는 매주 그것을 플레이하고, 몇 라운드 후에 얼마나 도전적인지 항상 놀란다.

Typewar는 다른 서체를 식별하는 능력에 도전하는 또 다른 서체 트레이너입니다. 각 라운드에서 상형 문자가 표시되며 한 쌍의 옵션에서 올바른 서체 이름을 선택해야 합니다. 질문에 답하는 방식에 따라 점수를 얻거나 잃으며, 마지막에 주어지는 점수는 같은 질문에 올바르게 답한 다른 플레이어의 수에 따라 달라집니다. 즉각적인 피드백, 실시간 통계 및 잘 알려지지 않은 글꼴에 대한 노출은 계속 학습하도록 동기를 부여합니다.

커닝을 위한 눈 개선

디지털 텍스트의 가독성을 향상시키는 한 가지 방법은 효과적인 커닝 또는 문자 사이의 간격을 보장하는 것입니다. 커닝은 각 서체의 글꼴 파일에 미리 정의되어 있기 때문에 종종 디자이너의 레이더 아래에 놓입니다. 그러나 문자 간의 관계가 어긋나거나 클라이언트를 위한 맞춤형 로고 또는 글꼴을 만들어야 하는 경우 커닝을 조정하는 방법을 아는 것이 도움이 됩니다.

Kern Type은 단어 내에서 글자 간격을 정확하게 맞추는 능력을 테스트하여 커닝 기술을 미세 조정하는 데 도움이 됩니다. 커닝한 모든 단어에 대해 100점 만점의 점수와 세 가지 보기(간격, 최적의 간격 및 비교를 위한 이 둘의 조합) 간에 전환할 수 있는 옵션이 제공됩니다.

나는 100점을 득점하는 것이 어렵기 때문에 이 게임으로 계속 돌아가고 있으며, 항상 개선할 여지가 있다는 것을 상기시켜줍니다.

컬러 게임 업그레이드

색상 기술을 업그레이드하면 다양한 디자인 프로젝트 및 분야에서 보다 현명하고 의미 있는 결정을 내릴 수 있습니다. 색상은 색상과 채도는 물론 보색, 유사, 3색 및 4색 색상 조합을 식별하도록 도전하는 게임입니다. 인터페이스에는 중앙에 강조 표시된 색상이 있는 대화형 색상환이 표시됩니다. 색상환 내부의 색상(또는 색상)을 10초 이내에 결정해야 합니다. 이 작업은 3색 및 4색 구성표의 색상을 일치시키려고 시도할 때 점점 어려워집니다.

벡터 기술 개선

디자이너는 Figma, Sketch 및 Adobe Illustrator와 같은 벡터 기반 도구를 사용하여 크기가 커질수록 해상도가 떨어지는 픽셀 이미지와 달리 품질 손실 없이 확장되는 디지털 그래픽을 만들 수 있습니다. 그러나 벡터 모양과 곡선을 그리고 조작하는 것은 까다로운 과정이 될 수 있습니다.

부울 게임은 벡터 기반 디자인 도구에서 2D 모양을 빠르게 구성하고 수정하는 데 사용되는 부울 연산에 대해 알려줍니다. 게임에서 복제할 모양이 표시됩니다. 몇 초 후 모양이 윤곽선으로 바뀝니다. 화면 왼쪽에는 윤곽선으로 끌어 최종 모양을 재현할 수 있는 여러 모양이 있습니다. 화면 맨 아래에는 합집합, 빼기, 교집합 및 차이의 네 가지 부울 연산이 있습니다. 계속 버튼을 클릭하면 선택한 부울 연산을 사용하여 모양을 병합하는 방법을 보여주는 단계별 애니메이션이 트리거됩니다. 잘못된 작업을 선택하면 이 애니메이션이 실수를 시각화하는 데 도움이 됩니다.

Shape Type은 시도해볼 또 다른 벡터 게임입니다. 여기에서 플레이어는 서로 다른 앵커 포인트를 끌어 올바른 형태로 변형해야 하는 문자가 표시되며 유사성 점수는 100점 만점입니다. Kern Type과 마찬가지로 세 가지 보기 간에 전환하여 결과를 비교할 수도 있습니다. 원래 모양. 벡터 드로잉 능력을 개선하는 것 외에도 모양 유형은 다양한 서체의 해부학적 요소를 자세히 볼 수 있는 좋은 방법입니다.

벡터 기술을 향상시키는 데 도움이 될 마지막 게임은 펜 도구를 사용하여 더 정확한 그래픽을 만드는 데 도움이 되는 베지어 게임입니다. 소개 자습서에서는 Alt 및 Shift와 같은 컨트롤을 사용하여 앵커 포인트를 배치하고 베지어 핸들을 조작하는 방법을 설명합니다. 이 게임은 가능한 한 적은 수의 앵커 포인트 또는 노드를 사용하여 심장 및 자동차와 같은 보다 복잡한 모양과 함께 간단한 기하학적 모양을 그리는 방법을 알려줍니다. 흥미로운 점을 유지하기 위해 각 레벨에 대해 특정 수의 노드를 얻고 게임은 사용하지 않는 노드의 누적 집계를 유지합니다.

저는 이 게임이 앵커 포인트 배치와 베지어 핸들 각도 사이의 관계를 시각화하여 더 부드러운 선과 곡선을 만드는 데 도움이 되기 때문에 좋아합니다.

기본 코딩을 닦다

경력 개발이든 개발자와의 협업이든 HTML 및 CSS의 기본을 이해하면 디자이너는 여러 분야의 팀에 상당한 자산이 됩니다. 또한 프론트 엔드 프로그래밍 지식은 디자이너가 현실적인 매개 변수로 아이디어를 조정하는 데 도움이 됩니다.

Flexbox Froggy는 코딩의 기초를 단계별로 설명합니다. 단 한 줄 또는 두 줄의 코드로 웹 페이지에서 정렬 제어, 간격 및 래핑 요소를 활성화하여 UI 구성 요소 배치를 더 쉽게 만드는 CSS3 웹 레이아웃 모델인 CSS flexbox를 가르칩니다.

게임에서 CSS 코드를 작성하여 장난꾸러기 개구리와 그의 친구들이 화면을 뛰어 넘도록 도와줍니다. 각 수준에서 코드 편집기 위의 미니 자습서에서는 사용할 수 있는 다양한 명령에 대해 설명합니다. 화면 왼쪽에 코드를 작성하면 오른쪽에 해당 변경 사항이 발생합니다. 개구리가 lilypad에 도달하면 코드가 정확합니다.

UI/UX 지식 향상

온라인 게임은 또한 디자이너가 UI/UX 지식을 개선하고 전환율과 ROI를 높이는 마찰 없는 경험을 만드는 데 도움이 될 수 있습니다.

Can't Unsee는 계층, 대비, 정렬, 타이포그래피 및 구성 요소 스타일 지정과 같은 디자인 개념에 대한 지식을 테스트하여 전반적인 UI/UX 기능을 강화합니다. 화면에는 두 가지 디자인 구성 요소가 표시되고 보다 사용자 친화적인 옵션을 선택하라는 메시지가 표시됩니다. 구성 요소는 훈련되지 않은 사람의 눈에는 동일하게 보일 수 있지만 전문 디자이너는 정렬되지 않은 텍스트 또는 고르지 않은 패딩과 같은 요소 간의 작은 차이를 보고 구분할 수 있어야 합니다.

온라인 디자인 게임 최대한 활용하기

나는 종종 디자인 산업이 얼마나 빨리 발전하는지에 놀라곤 합니다. 때로는 새로운 도구와 기술에 보조를 맞춰야 한다는 압박감이 압도적으로 느껴지고 창의력을 억누를 수 있습니다. 나는 어린아이 같은 정신으로 문제에 접근할 때 최선을 다해 디자인 작업을 합니다. 이것이 제가 이 게임을 아주 좋아하는 이유입니다. 게임을 통해 놀이감과 경이감을 유지하면서 배우고 연습할 수 있습니다.

새로운 UI/UX 기술을 다시 배우거나, 기술을 향상시키거나, 배우려고 하든, 온라인 디자인 게임은 예술적, 기술적 능력을 테스트하고 성장시키는 데 도움이 될 수 있습니다. 파블로 피카소(Pablo Picasso)가 말했듯이 “나는 할 수 있는 방법을 배우기 위해 항상 할 수 없는 일을 하고 있습니다.”