رمز التصميم VS - لماذا يجب أن يسيروا جنبًا إلى جنب؟

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

عندما نتعمق في هذا التصميم مقابل معضلة الكود ، يحدث لنا أن كلاهما ، في الواقع ، مكمل لبعضهما البعض. لكن السؤال لماذا؟ لماذا يتعين على مصممي UI / UX تعلم الكود وأساسياته وينطبق نفس الشيء على المطورين أيضًا من حيث التصميم.

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

لكن أولاً وقبل كل شيء ، دعنا ننتقل إلى الأساسيات بمثال.

التصميم مقابل الترميز: التشابه مع الاختلاف

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

هل يجب أن يتعلم المصممون البرمجة ويتعلم المطورون عن UI / UX؟

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

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

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

فيما يلي الأسباب التي تجعل الفرد يجب أن يتعلم أساسيات أي من المهارات (الرمز أو التصميم) بصرف النظر عن خبرته الأساسية

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

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

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

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

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

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

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

من اين نبدأ؟

البداية دائما فكرة جيدة بالنسبة للمصممين ، فإن الأساسيات التي يجب تعلمها هي HTML و CSS وقليلًا من JS / jQuery. هناك الكثير من منصات التعلم عبر الإنترنت والمواقع الإلكترونية المزودة بأدوات IDE الحية لتتمكن من ممارستها والتعلم.

HTML: الهيكل الأساسي لأي تصميم يأتي أولاً ، وهو رمز أي منتج.
JS / jQuery: يمكن تحقيق المتزلجون والنوافذ المنبثقة والقوائم المنسدلة والمزيد باستخدام هذه العناصر
Sandbox: أداة مباشرة للتلاعب بالكود الخاص بك
CSS / SCSS : تصميم الهيكل هو عملية إبداعية ويمكنك تحقيقه عن طريق CSS / SCSS
W3Schools: منصة تعليمية بسيطة عبر الإنترنت وواحدة جيدة للبدء بها
Codrops (Tympanus): مكتبة واسعة بتصميم وعقل مطور في نفس النظام الأساسي

للمطورين ، يمكنك البدء باتباع أفضل الممارسات حول UI / UX مع -
Behance: مجموعة تصميم كاملة للمحفظة المهنية والإلهام
Dribbble: صمم أفكارًا للنشر والاستلهام منها
مزلي: مدونات ، إلهامات ، أفكار
الوسيط: مدونات حول أي مجال (تقريبًا) وأفضل الممارسات والبرامج التعليمية
Awwwards: مواقع الويب المرشحة لأفضل تصميم والفائزين للحصول على الإلهام
XD / Figma / Sketch: أدوات لتصميم نماذج بالحجم الطبيعي ، إطارات سلكية لواجهة المستخدم / UX

للمصممين

للمطورين

تطوير الواجهة الأمامية في دروبال

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

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

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