デザイナー向けの楽しいオンライン ゲームでスキルを磨く

成功しているデザイナーは、ツール、プロジェクト、および分野全体で使用される基礎を強化するために、定期的にスキルアップと再スキル化を行っています。 しかし、勤務時間中に学習のための余分な時間を見つけることは容易ではありません。 幸いなことに、オンライン ゲームは、UI/UX デザイナーがスキルを磨き、新しいスキルを習得するための楽しくて教育的な方法です。 インタラクティブで没入型 (そして多くの場合無料) のオンライン ゲーム体験を通じて、アライメント、タイポグラフィ、色彩理論などの技術的スキルを磨くことができます。

新しいデザイン テクニックを学ぶだけでなく、オンライン ゲームをプレイすると気分が明るくなり、創造性が高まり、コア デザインの原則をより有効に活用できるようになることがわかりました。 暇なときや頑固なデザインの問題に直面したときはいつでも、これらのゲームのいずれかをプレイして、新鮮な視点を得ることができます。

整合感を高める

配置は、視覚的な構成を導き、使いやすさと読みやすさをサポートする基本的な設計原則です。

中央に配置されているため、整列の感覚を訓練し、間隔の間違いをすばやく見つけるのに役立ちます。 目的は、ドットが形状の中心にあるかどうかを判断することです。 シンプルなコンセプトですが、ドットが苦しそうに中央近くに配置されることが多いため、ゲームはやりがいがあります。 このゲームは、ジオメトリを考慮し、重なっている形状や隣接する形状の基準点を見つけることを強制することで、構成意識を高めます。

書体デザインの知識を広げる

書体のニュアンスを理解することは、デザイナーが視覚的な階層を確立し、テキストを読みやすくし、コピーの意味をより適切に伝えるのに役立ちます。

私がセリフを撮影したゲームは、セリフフォントをどれだけ速く認識できるかをテストします。 最初に 2 つの文字が表示され、そのうちの 1 つはセリフ フォントで、時間切れになる前にクリックして「セリフを撃つ」必要があります。 進行するにつれて、より多くの文字が同時に表示され、さまざまなセリフ スタイルを見つけて撮影することが難しくなります。

このゲームはあなたのつま先を維持します！ 私は毎週プレイしていますが、数回プレイした後はその難しさにいつも驚かされます。

Typewar は別の書体トレーナーで、さまざまな書体を識別する能力に挑戦します。 各ラウンドでグリフが表示され、2 つのオプションから正しい書体名を選択する必要があります。 質問にどのように答えるかによってポイントを獲得または失い、最後に与えられるポイントの量は、同じ質問に正しく答えた他のプレイヤーの数によって異なります。 即時のフィードバック、リアルタイムの統計、あまり知られていないフォントへの露出が、学習を続ける動機になります。

カーニングのためにあなたの目を改善する

デジタル テキストの読みやすさを改善する 1 つの方法は、効果的なカーニング、つまり文字間のスペースを確保することです。 カーニングは、各書体のフォント ファイルにあらかじめ定義されているため、デザイナーの目に留まらないことがよくあります。 ただし、文字間の関係がうまくいかない場合や、クライアント向けに特注のロゴタイプやフォントを作成する必要がある場合は、カーニングを調整する方法を知っておくと役に立ちます。

カーニング タイプは、単語内の文字を正しく配置する能力をテストすることで、カーニング スキルを微調整するのに役立ちます。 カーニングする単語ごとに 100 点満点のスコアが表示され、間隔、最適な間隔、比較のための両方の組み合わせの 3 つのビューを切り替えるオプションが表示されます。

100 点を取るのは難しいので、このゲームに戻ってきます。常に改善の余地があることを思い出させてくれます。

カラーゲームをアップグレード

カラー スキルをアップグレードすることで、さまざまなデザイン プロジェクトや分野にわたって、よりスマートで意味のある決定を下すことができます。 色は、色相と彩度、および補色、類似色、三色、四色の色の組み合わせを識別するゲームです。 インターフェイスには、中央に強調表示された色のインタラクティブなカラー ホイールが表示されます。 カラー ホイール内の色 (または複数の色) を 10 秒以内に決定する必要があります。これは、トライアドとテトラディックのカラー スキームの色を一致させようとすると、難易度が高くなります。

ベクトル手法を改良する

Figma、Sketch、Adobe Illustrator などのベクターベースのツールを使用すると、デザイナーは、サイズが大きくなるにつれて解像度が低下するピクセル画像とは異なり、品質を損なうことなくスケーリングできるデジタル グラフィックを作成できます。 しかし、ベクトル形状と曲線を描画して操作するのは、難しいプロセスになる場合があります。

ブール ゲームでは、ベクトル ベースの設計ツールで 2D 形状をすばやく構築および変更するために使用されるブール演算について説明します。 ゲームでは、複製する形状が表示されます。 数秒後、シェイプがアウトラインに変わります。 画面の左側には、アウトラインにドラッグして最終的な形状を再現できるいくつかの形状があります。 画面の下部には、結合、減算、交差、差の 4 つのブール演算があります。 [続行] ボタンをクリックすると、選択したブール演算を使用して形状をマージする方法を示す段階的なアニメーションがトリガーされます。 間違った操作を選択した場合、このアニメーションは間違いを視覚化するのに役立ちます。

Shape Type は、もう 1 つのベクトル ゲームです。 その中で、プレーヤーには、異なるアンカー ポイントをドラッグして正しい形に再形成する必要がある文字が表示され、100 点満点の類似度スコアが与えられます。カーン タイプと同様に、3 つのビューを切り替えて結果を比較することもできます。元の形。 ベクトル描画能力を磨くだけでなく、Shape Type は、さまざまな書体の解剖学的要素を間近で見るための優れた方法です。

ベクター スキルを向上させる最後のゲームは、ペン ツールを使用してより正確なグラフィックスを作成するのに役立つベジエ ゲームです。 イントロ チュートリアルでは、alt や shift などのコントロールを使用してアンカー ポイントを配置し、ベジエ ハンドルを操作する方法について説明します。 このゲームでは、単純な幾何学的形状と、ハートや車などのより複雑な形状を、できるだけ少ないアンカー ポイント (ノード) で描く方法を教えてくれます。 興味深いことに、レベルごとに特定の数のノードを取得し、ゲームは使用していないノードの集計を続けます。

このゲームが気に入っているのは、アンカー ポイントの配置とベジェ ハンドルの角度の関係を視覚化して、線や曲線を滑らかにするのに役立つからです。

基本的なコーディングのブラッシュアップ

キャリア開発であろうと開発者とのコラボレーションであろうと、HTML と CSS の基本を理解することで、デザイナーは学際的なチームにとって重要な資産になります。 さらに、フロントエンド プログラミングの知識は、設計者が現実的なパラメーターを使用してアイデアを調整するのに役立ちます。

Flexbox Froggy では、コーディングの基本を段階的に説明しています。 CSS flexbox は CSS3 Web レイアウト モデルであり、わずか 1 ～ 2 行のコードで Web ページ上の要素の配置制御、間隔、折り返しを可能にすることで、UI コンポーネントの配置を容易にします。

このゲームでは、いたずら好きなカエルとその仲間が画面上を飛び回るのを手助けするために、CSS コードを記述します。 各レベルでは、コード エディターの上にあるミニ チュートリアルで、使用できるさまざまなコマンドについて説明します。 画面の左側にコードを記述すると、対応する変更が右側に表示されます。 カエルがスイレンに到達した場合、コードは正しいです。

UI/UX の知識を高める

オンライン ゲームは、デザイナーが UI/UX の知識を向上させ、コンバージョン率と ROI を向上させる摩擦のないエクスペリエンスを作成するのにも役立ちます。

Can't Unsee は、階層、コントラスト、配置、タイポグラフィ、コンポーネントのスタイリングなどのデザイン概念に関する知識をテストすることで、全体的な UI/UX 能力を高めます。 画面には 2 つの設計コンポーネントが表示され、より使いやすいオプションを選択するよう求められます。 コンポーネントは訓練を受けていない人には同じように見えるかもしれませんが、熟練したデザイナーは、テキストの位置ずれや不均一なパディングなど、要素間の小さな違いに気付くことでそれらを区別できるはずです.

オンラインデザインゲームを最大限に活用する

デザイン業界の進化の速さに驚かされることがよくあります。 ときどき、新しいツールやテクニックに遅れないようにしなければならないというプレッシャーに圧倒され、私の創造性が妨げられることがあります。 子供のような精神で問題に取り組むとき、私は最高のデザイン作業を行います。それが私がこれらのゲームをとても楽しんでいる理由です。

スキルの再習得、スキルアップ、または新しい UI/UX テクニックの習得を目指している場合でも、オンライン デザイン ゲームは芸術的および技術的な才能をテストし、成長させるのに役立ちます。 パブロ・ピカソはかつてこう言いました。