قم ببناء مكتبتك المرئية: نصائح وتحديات التصميم

واحدة من الاختلافات الكبيرة بين المصمم المتمرس والمصمم المبتدئ هي المكتبة المرئية التي يقوم ببنائها.

ما هي المكتبة المرئية؟

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

دعنا نعطي مثالاً: كمصمم ، أنت مكلف ببناء موقع ويب جديد.

ما الموقع؟ ربما تسال. حسنًا ، هذا كل ما لديك من متطلبات. تحد من زميل زميل في العمل. أوه ، أيضًا ، لديك ساعة واحدة للقيام بذلك. هذا تحدٍ قمنا به في DevriX وإليك إحدى النتائج بعد 3600 ثانية:

تصميم أليكس ديميتروف

لم يكن هناك الكثير من الوقت للنظر في الموضوع ، لذلك كان في رأس الصفحة. ما هي مكونات الرأس؟

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

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

فقط كم عدد الطرق التي يمكنك تصميم الرأس؟ مئات الطرق. هناك العديد من الأنواع المختلفة من العناصر والتضاريس والألوان والتراكبات والأزرار والعناصر وغير ذلك الكثير. إنها تجربة مثيرة للاهتمام.

كيفية بناء مكتبة مرئية

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

وفيما يلي بعض الأمثلة على ذلك:

موقع التواصل الاجتماعي الفيسبوك:

مصدر الصورة: Dribbble

Gmail:

مصدر الصورة: Dribbble

تويتر:

مصدر الصورة: Dribbble

هناك الكثير من الأمثلة. كلما كان التصميم أكثر تعقيدًا ، زادت سرعة تقدمك. لكن كيف تعمل بالضبط؟

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

مصدر الصورة: Dribbble

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

يحتاج جميع الفنانين التشكيليين إلى بناء مكتبات

مثال صارخ على ذلك هو Kim Jung Gi - عبقري يمكنه صنع عمل فني يشبه الحياة باستخدام أي منظور.

فن كيم جونغ جي

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

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

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

رسم سوزان هيلمي

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

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

مصدر الصورة: Artstation

تحديات مكونات تصميم الويب

الآن ، دعنا نلقي نظرة مرة أخرى على بعض المكونات الشائعة التي ستستخدمها كثيرًا في تصميم الويب وبعض الممارسات التي يجب القيام بها:

1 - الأزرار

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

مصدر الصورة: Dribbble

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

2 - البطاقات

تعد البطاقات أو الصناديق مكونًا آخر شائعًا. يمكن أن يحتوي على أي نوع من المحتوى ، على الرغم من أن بعض العناصر المشتركة يمكن أن تكون رأس / تذييل + محتوى رئيسي.

مصدر الصورة: Dribbble

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

3 - التعليقات

تحتوي جميع المدونات تقريبًا على شكل من أشكال نظام التعليق. لكن هل اعتبرت أن مكون التعليق قد لا يحمل تعليقًا فعليًا ولكنه يشبه إلى حد كبير تغيير "الحالة"؟

مصدر الصورة: Dribbble

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

الهدف من هذه التمارين هو إيجاد طرق للقيام بالعناصر المشتركة بطرق جديدة لم تكن تعرفها من قبل.

4 - سلايدر

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

مصدر الصورة: Dribbble

المهمة: تصفح الويب والتصميمات المختلفة لمعرفة المزيد حول التخطيطات والأساليب المختلفة. ربما يمكنك إلقاء نظرة على مكتبات JS حيث يقومون بعمل شرائح لمعرفة ما لديهم. من هناك ، صمم 10-15 تصميمًا مختلفًا للشرائح. مرة أخرى - حاول أن تجعل كل تصميم مختلفًا قدر الإمكان عن السابق ، ولا تستخدم فقط تحسينات طفيفة.

5- استمارات المدخلات

تعد نماذج الإدخال جزءًا أساسيًا آخر من أي موقع ويب تقريبًا. المثير للاهتمام معهم هو أنهم يتلقون المعلومات بدلاً من الناتج الأول.

مصدر الصورة: Dribbble

المهمة: مهمتك هنا هي التوصل إلى أغرب أنواع المعلومات التي قد يحتاجها شخص ما على موقع ويب. قم بتحميل ملف PDF أو PSD (اختر واحدًا) ، ومعلومات بطاقة الائتمان ، وأضف وصفة لملفات تعريف الارتباط ، وحساب نسب خلط الطلاء ، وإنشاء مُكوِّن لبيع السيارات. أي شيء يتبادر إلى الذهن ، كلما كان فريدًا كان ذلك أفضل. مرة أخرى استمر في تصفح المواقع لرؤية الحلول الحقيقية. صمم ما لا يقل عن 10 أشكال فريدة مختلفة بتصميمات فريدة.

ملخص

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

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