صقل مهاراتك من خلال الألعاب الممتعة عبر الإنترنت للمصممين

نشرت: 2022-09-08

يرتقي المصممون الناجحون بشكل روتيني بالمهارات ويعيدونها لتعزيز الأساسيات المستخدمة عبر الأدوات والمشاريع والتخصصات. ومع ذلك ، فإن إيجاد وقت إضافي للتعلم خلال أسبوع العمل ليس بالأمر السهل. لحسن الحظ ، تعد الألعاب عبر الإنترنت طريقة ممتعة وتعليمية لمصممي UI / UX لصقل مهاراتهم واكتساب مهارات جديدة. من خلال تجارب الألعاب التفاعلية والغامرة (وغالبًا ما تكون مجانية) ، يمكنك صقل المهارات التقنية مثل المحاذاة والطباعة ونظرية الألوان.

بالإضافة إلى تعلم تقنيات التصميم الجديدة ، وجدت أن ممارسة الألعاب عبر الإنترنت تجعلني في حالة مزاجية أخف ، وتعزز إبداعي ، وتساعدني على الاستفادة بشكل أفضل من مبادئ التصميم الأساسية. كلما كان لدي وقت فراغ أو أواجه مشكلة تصميم مستعصية ، ألعب إحدى هذه الألعاب وأخرج بمنظور جديد.

عزز إحساسك بالمحاذاة

المحاذاة هي مبدأ تصميم أساسي يوجه التكوين البصري ويدعم قابلية الاستخدام والقراءة.

تم توسيطه وهذا أمر رائع لتدريب إحساسك بالمحاذاة ومساعدتك على اكتشاف أخطاء التباعد بسرعة. الهدف هو تحديد ما إذا كانت النقطة متمركزة داخل الشكل. إنه مفهوم بسيط ، لكن اللعبة تمثل تحديًا لأن النقاط غالبًا ما توضع بالقرب من المركز بشكل مؤلم. تبني اللعبة وعيًا تركيبيًا من خلال إجبارك على التفكير في الهندسة والعثور على نقاط مرجعية في الأشكال المتداخلة والمتجاورة.

بداية It Centered That ، لعبة على الإنترنت للمصممين. تتضمن الشاشة صليبًا أزرقًا كبيرًا في المنتصف ، ورمزًا مبتسمًا على اليسار ، ورمزًا حزينًا على اليمين.
تم توسيطه يختبر إحساس اللاعبين بالمحاذاة من خلال مطالبتهم بتحديد ما إذا كانت النقطة متمركزة.

قم بتوسيع معرفتك بتصميم الخط

يمكن أن يساعد فهم الفروق الدقيقة في المحارف المصممين في إنشاء تسلسل هرمي مرئي ، وضمان وضوح النص ، وإيصال معنى النسخ بشكل أفضل.

تختبر اللعبة التي قمت بتصويرها باستخدام serif مدى السرعة التي يمكنك من خلالها التعرف على خطوط serif. للبدء ، يتم تقديمك بحرفين ، أحدهما خط serif ، ومطلوب منك "تصوير الرقيق" بالنقر فوقه قبل نفاد الوقت. كلما تقدمت ، تظهر لك المزيد والمزيد من الأحرف في وقت واحد ، مما يجعل من الصعب العثور على أنماط serif المختلفة وتصويرها.

هذه اللعبة سوف تبقيك على أصابع قدميك! ألعبها كل أسبوع ، ودائمًا ما أتفاجأ بمدى صعوبة الأمر بعد بضع جولات.

في البداية قمت بتصوير لعبة serif ، وهي لعبة على الإنترنت للمصممين. اثنا عشر حرفًا بخط serif و sans-serif أبيض عبر خلفية داكنة.
لقد قمت بتصوير تحديات serif حول مدى سرعة اللاعبين في التعرف على خطوط serif المختلفة و "تصويرها".

Typewar هو مدرب محرف آخر ، يتحدى قدرتك على تحديد الخطوط المختلفة. في كل جولة ، يتم عرض حرف رسومي ويجب اختيار اسم الخط الصحيح من زوج من الخيارات. تكسب أو تخسر نقاطًا لكيفية إجابتك على السؤال ، ويعتمد مقدار النقاط الممنوحة في النهاية على عدد اللاعبين الآخرين الذين أجابوا على نفس السؤال بشكل صحيح. ستحفزك التعليقات الفورية والإحصاءات في الوقت الفعلي والتعرض للخطوط غير المعروفة على مواصلة التعلم.

بداية الآلة الكاتبة ، لعبة على الإنترنت للمصممين. يوجد حرف كبير "D" في وسط الشاشة ويظهر خياران للمحرف تحته.
يساعد Typewar اللاعبين على تحسين قدرتهم على تحديد الخطوط المختلفة.

تحسين عينك لتقنين الأحرف

تتمثل إحدى طرق تحسين قابلية قراءة النص الرقمي في ضمان تقنين الأحرف الفعال ، أو التباعد بين الأحرف. غالبًا ما يطير تقنين الأحرف تحت رادار المصممين لأنه محدد مسبقًا في ملفات خطوط كل محرف. ولكن من المفيد معرفة كيفية ضبط المسافة بين الحروف عندما تبدو العلاقة بين الأحرف متوقفة ، أو إذا كنت بحاجة إلى إنشاء شعار أو خط مفصل للعميل.

يساعدك Kern Type على تحسين مهارات تقنين الأحرف الخاصة بك عن طريق اختبار قدرتك على مسافات الأحرف بشكل صحيح داخل الكلمات. لكل كلمة تقنينها ، تحصل على درجة من 100 وخيار للتبديل بين ثلاث طرق عرض: التباعد والتباعد الأمثل ومجموعة من الاثنين للمقارنة.

أستمر في العودة إلى هذه اللعبة لأنه من الصعب تسجيل 100 ، وهذا يذكرني بأن هناك دائمًا مجال للتحسين.

بداية Kern Type ، لعبة على الإنترنت للمصممين. كلمة "انتظار" في وسط الشاشة.
تختبر Kern Type قدرة اللاعبين على تحسين المسافات بين الأحرف.

قم بترقية لعبة الألوان الخاصة بك

من خلال تحديث مهارات الألوان لديك ، يمكنك اتخاذ قرارات أكثر ذكاءً وذات مغزى عبر مجموعة من مشاريع التصميم والتخصصات. Color هي لعبة تتحداك في تحديد درجات الألوان والتشبع ، بالإضافة إلى أزواج الألوان التكميلية والمماثلة والثالثة والرباعية. تعرض الواجهة عجلة ألوان تفاعلية مع لون مميز في المنتصف. يجب تحديد اللون (أو الألوان) داخل عجلة الألوان في 10 ثوانٍ أو أقل ، وهي مهمة تزداد صعوبة أثناء محاولتك مطابقة الألوان لأنظمة الألوان الثلاثية والرباعية.

بداية اللون ، لعبة على الإنترنت للمصممين. عجلة ألوان تعرض ألوانًا متكاملة وجهاز توقيت داخلي في المنتصف.
يساعد اللون اللاعبين على تحسين مهاراتهم في مطابقة الألوان من خلال تحديهم لتحديد درجات ألوان وتشبع وألوان معينة.

صقل تقنية المتجه الخاصة بك

تسمح الأدوات القائمة على المتجهات مثل Figma و Sketch و Adobe Illustrator للمصممين بإنشاء رسومات رقمية تتناسب مع الحجم دون فقدان الجودة - على عكس صور البكسل التي تفقد الدقة مع زيادة حجمها. لكن رسم أشكال ومنحنيات المتجهات ومعالجتها يمكن أن يكون عملية صعبة.

تعلمك لعبة Boolean عن العمليات المنطقية التي تُستخدم لبناء الأشكال ثنائية الأبعاد وتعديلها بسرعة في أدوات التصميم القائمة على المتجهات. في اللعبة ، يظهر لك شكل لتنسخه. بعد بضع ثوانٍ ، يتحول الشكل إلى مخطط تفصيلي. يوجد على يسار الشاشة عدة أشكال يمكنك سحبها إلى المخطط التفصيلي لإعادة إنتاج الشكل النهائي. يوجد في الجزء السفلي من الشاشة أربع عمليات منطقية: الاتحاد ، والطرح ، والتقاطع ، والفرق. يؤدي النقر فوق الزر "متابعة" إلى تشغيل رسم متحرك خطوة بخطوة يوضح لك كيفية دمج الأشكال باستخدام العملية المنطقية المختارة. عندما يتم اختيار عملية غير صحيحة ، فإن هذه الرسوم المتحركة تساعدك على تصور أخطائك.

بداية Boolean ، لعبة على الإنترنت للمصممين. على اليسار ، قائمة التنقل. يوجد تحديد لمخططات الشكل في المنتصف ، ومجموعة من الأشكال البيضاء على اليمين.
تعلم اللعبة المنطقية اللاعبين كيفية استخدام العمليات المنطقية في الرسومات المتجهة.

نوع الشكل هي لعبة ناقلات أخرى يمكنك تجربتها. في ذلك ، يتم تزويد اللاعب بحرف يحتاج إلى إعادة تشكيله في شكله الصحيح عن طريق سحب نقاط ربط مختلفة وإعطاء درجة تشابه من 100. مثل Kern Type ، يمكنك أيضًا التبديل بين ثلاث طرق عرض لمقارنة نتيجتك مع الشكل الأصلي. بالإضافة إلى تحسين قدرات الرسم المتجه ، يعد Shape Type طريقة رائعة لإلقاء نظرة فاحصة على العناصر التشريحية للأنماط المختلفة.

بداية Shape Type ، لعبة على الإنترنت للمصممين. في وسط الشاشة ، يوجد حرف كبير "B" مع درجة مئوية وثلاثة خيارات للتبديل وزر "التالي" على اليمين.
يتحدى نوع الشكل اللاعبين لممارسة إعادة تشكيل أشكال الحروف المتجهة.

لعبة Bezier هي واحدة من الألعاب الأخيرة التي ستساعدك على تعزيز مهاراتك في المتجه ، والتي تساعدك على إنشاء رسومات أكثر دقة باستخدام أداة القلم. توضح البرامج التعليمية التمهيدية كيفية استخدام عناصر التحكم ، مثل alt و shift ، لوضع نقاط الربط والتعامل مع مقابض Bezier. تعلمك اللعبة كيفية رسم أشكال هندسية بسيطة مع أشكال أكثر تعقيدًا ، مثل القلب والسيارة ، مع أقل عدد ممكن من نقاط الربط أو العقد. لإبقاء الأمور ممتعة ، تحصل على عدد معين من العقد لكل مستوى ، وتحتفظ اللعبة بإحصاء مستمر للعقد التي لا تستخدمها.

تعجبني هذه اللعبة لأنها تساعدني على تصور العلاقة بين وضع نقطة الارتكاز وزوايا التعامل مع Bezier ، مما يؤدي إلى خطوط ومنحنيات أكثر سلاسة.

بداية The Bezier Game ، لعبة على الإنترنت للمصممين. يقع مخطط القلب مع نقاط الربط في وسط الشاشة.
تساعد لعبة Bezier اللاعبين على صقل المهارات المهمة التي يأخذها القلم ، مثل وضع نقاط الربط وسحب مقابض البيزير.

صقل على الترميز الأساسي

سواء للتطوير الوظيفي أو التعاون مع المطورين ، فإن فهم أساسيات HTML و CSS يجعل المصمم رصيدًا كبيرًا للفرق متعددة التخصصات. علاوة على ذلك ، تساعد معرفة البرمجة الأمامية المصممين على تعديل أفكارهم بمعايير واقعية.

يقسم Flexbox Froggy أساسيات الترميز خطوة بخطوة. إنه يعلم CSS flexbox ، وهو نموذج تخطيط ويب CSS3 يجعل تحديد موضع مكونات واجهة المستخدم أسهل من خلال تمكين التحكم في المحاذاة والتباعد والتفاف العناصر على صفحات الويب بسطر واحد أو سطرين فقط من التعليمات البرمجية.

في اللعبة ، ستساعد ضفدعًا مؤذًا ورفاقه على القفز عبر الشاشة عن طريق كتابة سطور من كود CSS. في كل مستوى ، يصف برنامج تعليمي صغير فوق محرر الكود الأوامر المختلفة التي يمكنك استخدامها. أثناء كتابة الرمز على الجانب الأيسر من الشاشة ، تحدث التغييرات المقابلة على اليمين. إذا وصل الضفدع إلى lilypad ، يكون الرمز صحيحًا.

بداية Flexbox Froggy ، لعبة على الإنترنت للمصممين. على اليسار محرر التعليمات البرمجية والتعليمات. على اليمين ، أربعة رسوم متحركة مختلفة الألوان للضفادع.
يعلم Flexbox Froggy اللاعبين كيفية كتابة كود CSS الأساسي المرن.

عزز معرفتك بواجهة المستخدم / تجربة المستخدم

يمكن للألعاب عبر الإنترنت أيضًا مساعدة المصممين على تحسين معرفتهم بواجهة المستخدم / تجربة المستخدم وإنشاء تجارب خالية من الاحتكاك تزيد من معدلات التحويل وعائد الاستثمار.

يُثري Can't Unsee قدراتك الإجمالية في UI / UX عن طريق اختبار معرفتك بمفاهيم التصميم ، مثل التسلسل الهرمي والتباين والمحاذاة والطباعة وتصميم المكونات. تعرض الشاشة عنصرين من عناصر التصميم وتطلب منك تحديد الخيار الأكثر سهولة في الاستخدام. قد تبدو المكونات متطابقة مع العين غير المدربة ، ولكن يجب أن يكون المصمم الخبير قادرًا على التمييز بينها من خلال ملاحظة الاختلافات الصغيرة بين العناصر ، مثل النص غير المحاذي أو الحشو غير المتساوي.

بداية Can't Unsee ، لعبة على الإنترنت للمصممين. يوجد صندوقان للدردشة بهما تعليمات للاعب أسفلهما مباشرة. يظهر شريط مؤشر التقدم عبر الجزء السفلي من الشاشة.
يطلب Can't Unsee من اللاعبين تحديد الخيار الأكثر سهولة في الاستخدام لتصميمين.

حقق أقصى استفادة من ألعاب التصميم عبر الإنترنت

غالبًا ما أدهشني مدى سرعة تطور صناعة التصميم. في بعض الأحيان ، قد يكون الضغط لمواكبة الأدوات والتقنيات الجديدة ساحقًا ويخنق إبداعي. أقوم بأفضل أعمال التصميم الخاصة بي عندما أتعامل مع المشاكل بروح طفولية ، ولهذا السبب أستمتع بهذه الألعاب كثيرًا: فهي تسمح لي بالتعلم والممارسة مع الحفاظ على إحساس اللعب والتساؤل.

سواء كنت تتطلع إلى إعادة الصقل أو تحسين المهارات أو تعلم تقنية جديدة لواجهة المستخدم / تجربة المستخدم ، يمكن أن تساعدك ألعاب التصميم عبر الإنترنت في اختبار وتطوير القطع الفنية والتقنية الخاصة بك. كما قال بابلو بيكاسو ذات مرة ، "أفعل دائمًا ما لا يمكنني فعله ، حتى أتعلم كيفية القيام بذلك."