البحث في الموقع

صار اليوم من السهل تطبيق فكرة مشروع برمجي ما بطريقة واحدة ليأخذ العديد من الأشكال ويطبق في العديد من المجالات وهي المواقع الإلكترونية وتطبيقات الجوالات وتطبيقات سطح المكتب (مع اختلاف أنظمة التشغيل مثل: Android، IOS، Windows، macOS) وهذا كله بفضل تقنية تطبيقات الويب التقدمية (PWA / progressive web application). حيث كان يصنع كل من الموقع الإلكتروني وتطبيق الجوال وتطبيق الحاسوب على حدة. بل كان يصنع كل تطبيق في نظام تشغيل منفصلًا عن غيره، لنحصل على النتيجة المرجوة من الـ PWA لمشروع واحد. ألقي نظرة على الموقع expensive-time والذي قمت بإعداده محتويًا على هذه التقنية. مفهوم تطبيقات الويب التقدمية تطبيقات الويب التقدمية (progressive web application) تم تطويرها بناءً على علامات تبويب المتصفحات ليتم استخدامها كمواقع وتطبيقات بنفس الوقت، ويتم بنائها كما هو الحال في مشاريع الويب لتعمل على جميع الأجهزة بمختلف مشغلاتها من جوالات وحواسيب مكتبية أو محمولة أو لوحية، دون الحاجة لاختلاف طريقة البناء. حاضر مميز ومستقبل متوقع لاقت تطبيقات الويب التقدمية إقبالًا كبيرًا وانتشارًا واسعًا خلال فترة قصيرة، حيث حققت نجاحًا باهرًا في عالم المواقع والتطبيقات من فاعلية وسهولة في الصناعة والاستخدام، فهي جمعت بين ميزات التطبيقات والمواقع، ويتوقع لها مستقبل أكبر وأعظم من تطويرٍ ودعمٍ وانتشارٍ أكثر واستغناء أكثر عن الطرق المعروفة في صناعة التطبيقات، لما حققت من الأهداف العظيمة في العديد من المجالات وغيرها من الميزات نتحدث عن بعضها بالتفصيل. بعض من خصائص وميزات PWA لها من العظمة بمكان جمعت تطبيقات الويب التطورية بين ميزات التطبيقات والمواقع، بل إنها تخلصت من العديد من عيوب التطبيقات والمواقع. فمن ميزات التطبيقات التي حققتها PWA أنها تعطي للمستخدم تجربة وعلاقة أقوى منها في المواقع ومع ذلك فهي حافظت على ميزة السلاسة والسهولة في التعامل كما هو الحال في المواقع من عدم الاضطرار لتحميل ملفات كبيرة وبدون صعوبة وطول التحميل والثقل على الجهاز وغيرها من ميزات في المواقع والتطبيقات. ونجحت من التخلص من عيوب في التطبيقات مثل إجراءات وتقييدات المتاجر المتعبة وبعض العيوب في المواقع مثل عدم الاستقلالية عن المتصفحات في الاستخدام وغيرها من العيوب. تتميز هذه التطبيقات بأنها تعمل على كل جهاز(جوال، حاسوب لوحي، حاسوب مكتب …)، على كل نظام تشغيل (Android, IOS, Windows …)، على كل متصفح (Google Chrome, Mozilla Firefox, Safari …) باختلاف إصداره. والفضل في ذلك يعود على اعتماد PWA في بنائها على استراتيجية الويب Progressive enhancement فهي عمودها الفقري. (نتحدث عنها أكثر فيما بعد). وتميزت بالعديد من الخصائص العظيمة مثل السرعة الكبيرة في التحميل حتى مع الشبكات البطيئة بل إنها تعمل بدون اتصال شبكة والفضل في ذلك يعود لتقنية عامل الخدمة Service Worker (نتحدث عنها أكثر فيما بعد)، وهي آمنة ومحمية من خلال بروتوكول Transport Layer Security-TLS الذي يعمل على منع التطفل والتلاعب بالمحتوى، يقوم المستخدم بتحميل واستخدام هذه التطبيقات بكل سهولة وبساطة دون متاعب وإجراءات متاجر التطبيقات، بل تقوم هذه التطبيقات بتحديث نفسها تلقائيًا دون الحاجة لإعادة تحميل كامل التطبيق، وصنعت لتعمل مع جميع إصدارات المتصفحات ولكن تعطي تجربة أفضل من الدرجة الأولى مع المتصفحات الحديثة التي تدعم التقنيات المتقدمة مثل عامل الخدمة Service Worker والاشعارات وشارة الاضافة إلى الشاشة الرئيسية وغيرها. سهولة مشاركتها من خلال عنوان الموقع سهل النسخ والفتح مما يساعد على انتشارها، تتيح لنا استخدام البرنامج كموقع أو كتطبيق جوال أو كتطبيق سطح مكتب. نسخة الموقع الإلكتروني يقوم المستخدم بتجربة البرنامج واستخدامه دون تحميله فهو يجربه مباشرة بفتح الموقع الإلكتروني ويقوم بتحميله إن احتاج. بل إن بعض المستخدمين لن يحتاج استخدام البرنامج إلا مرة واحدة وبالتالي يقوم باستخدامه كموقع دون تحميله. والكثير من المستخدمين يميل لاستخدام البرنامج كموقع ولا يفضل تحميله وهنا نترك مساحة للمستخدم للاختيار بين تجربة الموقع والتطبيق. نسخة تطبيق الجوال يتمكن المستخدم بتحميل التطبيق مباشرة من الموقع واستخدامه بتجربة مستقل عن المتصفحات ومطابقة لتجربة التطبيقات المعتادة ويمتلك أيقونة على الشاشة الرئيسية كما هو الحال بالتطبيقات(يمكنك استخدام هذه الأداة realfavicongenerator لمعرفة شكل أيقونة تطبيقك على مختلف الأجهزة أو إن كان هنالك مشكلة فيها كما تبين الصورة في الأسفل) بل ويتعرف عليه الجهاز على أنه تطبيق مستقل، وهنا يبني المستخدم علاقة مع التطبيق بكثرة الاستخدام وتوافر النسخة على الجهاز بشكل مستقل مما يضفي متعة وراحة وسهولة في تجربة المستخدم. نسخة تطبيق سطح المكتب PC معظم ما ذكرنا في نسخة تطبيقات الجوال تنطبق على نسخة سطح المكتب، حيث يمكن أن تحمل تطبيقات PWA على الجهاز وتعمل بشكل مطابق للتطبيقات الأصلية في الجهاز في نافذة مستقلة بتجربة جذابة للمستخدم، وبالرغم من انتشار تطبيقات الجوال واستخدامها إلا أن ذلك لا يقلل من أهمية وكثرة استخدام أجهزة الحاسوب، لذا جاءت الأهمية بتوفر نسخة لها. تمثل الصورة في الأسفل توزيع استخدام الأجهزة (جوالات، حواسيب، حواسيب لوحية) في اليوم. عناصر ساهمت بانجاح وتحسين تجربة المستخدم في PWA التحسين التدريجي الاستراتيجية المعروفة بـ Progressive enhancement كما ذكرنا Progressive enhancement هي أساس PWA والعمود الفقري لها وباختصار فإنها تعتمد على تقسيم البرنامج إلى طبقات يتم عرض كل طبقة حسب دعم المتصفح لها، لذا فإن البرنامج يعمل لدى الجميع إذ يحتوي على طبقة أساسية (المحتوى) تعمل وتعرض على جميع الأجهزة ويتم إضافة الطبقات الأخرى عند دعمها، وطبقات الإضافية والتكميلية تضفي تحسينًا وتجربة أفضل وميزات أعلى. تقنية service workers الكلام يطول كثيرًا في هذه التقنية المضافة إلى عالم الويب مؤخرًا، لكن نتطرق لبعض ما يهمنا فيها بموضوع PWA. فكما ذكرنا سابقًا أن هذه التقنية مسؤولة عن عمل التطبيق في حالة عدم الاتصال بالشبكة وتلعب دورًا مهما في سرعة أداء البرنامج حتى مع الشبكات البطيئة، فهو يقوم بتخزين الموارد التي ترتبط بالأحداث والتفاعل في البرنامج لاستخدامها بدون اتصال الشبكة أو ببطئها. وأيضًا يقدم تحميل فوري وسريع جدًا للمستخدمين الذين تكرر زيارتهم. ويوفر تجربة للجهاز حقيقية مع التطبيق منفصلة عن المتصفح ولا يشترط أن تكون خلال المتصفح. وإن كانت تعتمد فكرة البرنامج بشكل كامل على اتصال الشبكة فإن المستخدم سيحصل على هيكل وشكل جذاب ومناسب بعدم اتصال الشبكة ويتوافق مع شكل التطبيق الأصلي، وهذه التقنية مسؤولة عن التحديث المستمر للتطبيق. لذا إضافته إلى مشروعك يلعب دورًا هامًا في إنجاحه (راجع مقالي مفهوم Service Worker وتأثيره في أداء وبنية مواقع وتطبيقات الويب لمزيد من التفاصيل). ملف manifest لتطبيق الويب ملف بسيط بصيغة json متاح لمبرمج التطبيق للتحكم بكيفية ظهور التطبيق على جهاز المستخدم مثل الأيقونة التي تظهر على الشاشة الرئيسية، وعمل التطبيق بشاشة كاملة، مع التحكم في ظهور الشريط الذي يحوي العنوان URL والإعدادات وغيرها كما في علامات التبويب في المتصفحات، ويمكن التحكم باتجاه الشاشة (من الأعلى إلى الأسفل والعكس, أو من اليمين إلى اليسار والعكس) ولون الشريط العلوي في الشاشة. تطبيقات بشكل رسمي ومعترف إذ يتم التعرف عليها من الأجهزة والمتصفحات على أنها تطبيق والفضل بذلك يعود لمنظمة w3c من خلال كشوفها المقدمة للمحركات عن الرابط المعني ومن خلال نطاق التسجيل لـservice worker. ويقوم المتصفح بإضافة APK للتطبيق حتى يتعرف عليه الجوال على أنه تطبيق ويسجل في إعدادات التطبيقات في الجهاز، وأما في جهاز الحاسوب PC يتم إضافته إلى نافذة التطبيقات. لافتات التحميل تظهر لافتة اسفل الشاشة تقترح إضافة البرنامج للشاشة الرئيسية عند فتح الموقع على الجوال، وحتى تظهر هذه اللافتة يجب توفر ما يلي في مشروعك: ملف Web App manifest أن يكون مخدوم على عناوين HTTPS يحتوي على service worker مسجل وفعال يتم الزيارة من قبل المستخدم مرتين على الأقل يفصل بين كل زيارة خمس دقائق على الأقل أما في جهاز الحاسوب تظهر لافتة التحميل أعلى الشاشة بجانب شريط العنوان. الإشعارات لو سألنا مجموعة مبرمجين سابقًا عن الفرق بين المواقع الإلكترونية والتطبيقات لأجاب معظمهم بالإشعارات، ولكن مع تطور عالم الويب أصبحت تدعم الإشعارات، وهذا عاد بالكمالية لتطبيقات PWA وساهم في إنجاحها. ولكن حتى تتمكن من تفعيل وتمكين الإشعارات لابد أن يحتوي مشروعك على ملف Web App manifest، وأن يحتوي على service worker مسجل وفعال. تعرف على تفاصيل أعمق حول الإشعارات هنا. إتاحة التحكم بواجهة برمجة التطبيقات (API) بدأ دخول إمكانيات التحكم بـAPI على الويب منذ فترة ليست بالبعيدة وما زال الدعم والتطوير لها بتزايد كبير في مجال الويب كما يوضح التوزيع في الأسفل. تعرف على تفاصيل أعمق حول API في الويب هنا. إطارات عمل الجافاسكريبت (frameworks) تنسجم وتساهم في فكرة PWA لا يوجد فعليًا قيود تحظر وتمنع إدراج أي تقنيات من مكتبات أو إطارات عمل أو غيرها إلى مشروعك في pwa بالعكس الكثير منها يدعم ويساهم بتحسين نتائجها ويسهل صناعتها من أشهرها VUE و React و svelte. وينصح باستخدامها لما تتيحه من إمكانيات وتسهيلات تدعم المشروع (قمت باستخدام VUE في صناعة تطبيقي المطروح كمثال سابقًا). لا يعني بأن بناء التطبيق بطريقة Vanilla JS (نسمي عدم استخدام أي من frameworks في الجافاسكربت Vanilla JS) ضعفه وانخفاض مستواه أو سيكون فاشل بل يوجد الكثير منها مبني بهذه الطريقة وقد حقق نجاحًا باهر مثل مشاريع نقاية. مثال ناجح مشاريع نقاية وهي مجموعة مشاريع PWA تعتبر مثالًا ناجحًا وإبداعيًا جدًا عليها، حققت انتشارًا ونجاحًا باهرًا، تخدم التراث العربي والإسلامي، فأنصحك بالاطلاع عليها وتجريبها على مختلف الأجهزة. مراجع Getting started with Progressive Web Apps Your First Progressive Web App Progressive Web Apps on Desktop Understanding Progressive Enhancement Push Notifications on the Open Web Web Push Notifications: Timely, Relevant, and Precise progressive-web-apps Service Workers The core foundations of a delightful web experience are… Add to Home Screen Support for theme-color in Chrome 39 for Android The Web App Manifest WebAPKs on Android Progressive Web Apps: Apple App Store, Google Play Store, It Was Nice Knowing You اقرأ أيضًا برمجة تطبيقات سطح المكتب

معظمنا لا يدرك تأثيرها والقليل منا ربما من يتنبهون لذلك. رغم أن تأثير الألوان مبالغ في تقديره يمكننا الشعور بذلك بوضوح في بعض المواقف (تخيل نفسك مثلًا في غرفة مظلمة حمراء فسوف تشعر بالغضب والانفعال بالتأكيد، أو أنك في غرفة باللون السماوي فستشعر حينها بالهدوء والسكينة). سوف نتكلم اليوم عن التأثير النفسي للألوان في تصميم الويب والطرائق التي تنتهجها شركات عديدة في استخدامها للألوان وماهي الرسائل التي توجهها من وراء ذلك. كيف تعمل سيكولوجية الألوان؟ تنقسم الألوان إلى مجموعتين رئيستين: الألوان الدافئة:هي الألوان في المنطقة الحمراء مثل: الأحمر، والبرتقالي، والأصفر. الألوان الباردة: وهي الألوان التي تقع في المنطقة الزرقاء مثل: الأزرق، والقرمزي، والأخضر. الألوان الدافئة تستثير المشاعر التي تتدرج من الدفء والراحة (مثل النار المشتعلة في مساء يوم ماطر) وصولًا إلى الغضب والعداء. أما الألوان الباردة فهي تتصف بالهدوء والاطمئنان ويمكن أن ترتبط بالحزن أو اللامبالاة أيضًا. فقديمًا كان الناس يؤمنون أن الألوان تشفي من أمراض مختلفة. هذا العلم كان يسمى بالعلاج الكيميائي وبعض أسسه يمكن تلخيصها فيما يلي: الأحمر: يزيد من نشاط الدورة الدموية وبالتالي ينشط الجسم والعقل. الأصفر: يحفز الأعصاب وينعش الجسد. البرتقالي: يزيد من طاقتك. الأزرق: يعالج الآلام. النيلي: يخفف من مشاكل وأمراض الجلد. وعلى الرغم من أن غالبية علماء النفس تعاملوا مع نظرية الألوان بنوع من الشك إلا أن العديد من العلامات التجارية والشركات لم توافقهم الرأي. فقد قامت هذه الشركات بحملات تسويقية هائلة معتمدة على طريقة إدراكنا للألوان وجعل الناس يشترون منتجاتها. في ما يلي الجدول الذي يحتوي على الألوان والمشاعر/الأحاسيس المرتبطة بها على نطاق واسع. ولنحاول هنا تحليل مواقع الإنترنت لبعض الشركات المعروفة على مستوى العالم ونتعرف إلى الكيفية التي تنفذ بها تقنيات الألوان. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } اللون المعاني والمشاعر الأسود رمز التهديد أو الشر، ويشار إليه كدليل على القوة. ويرتبط بالموت والحداد وعدم السعادة والحياة الجنسية والالتزام والأناقة والغموض. الأبيض يرمز للنقاء والبراءة والبرود والنعومة والنظافة. الأحمر يثير مشاعر قوية مرتبطة بالحب والدفء والراحة. لا يزال يعتبر لونًا انفعاليًا يرمز للغضب ويخلق مشاعر الإثارة والشدة والنشاط الجنسي. الأزرق لون مفضل للعديد من الأشخاص كما أنه اللون المفضل لدى الرجال. يعطي الشعور بالهدوء و السكينة. يتصف بالسلام والأمن والنظام. الأخضر يرمز إلى الطبيعة والعالم الطبيعي. يمثل الهدوء والحظ السعيد والصحة والغيرة. يعتبر رمزًا للخصوبة وله تأثير مهدئ ويخفف من الإجهاد والضغط النفسي. الأصفر حماسي ودافئ، ولكنه قد يخلق أيضًا الشعور بالإحباط والغضب. أكثر إرهاق للعين (ولهذا السبب نادرًا ما تشاهد موقع ويب أصفر ساطع أو غرفة مطلية باللون الأصفر باستثناء قاعات اللعب المخصصة للأطفال). ومع ذلك فإن معظم الألوان التي تلفت الانتباه (ألوان رائعة جدًا للتفاصيل المهمة أو التنبيهات التي تحتوي إجراءً أو تذكيرًا أو تحذيرًا مثل تلك الرموز واللوحات الصفراء الخاصة بالتوقف/التنبيه والتحذير). الأرجواني المَلَكية والثروة، الحكمة والروحانية، الجنس والعلاقات الخفية والخاصة. البني لون طبيعي يوحي بالقوة والثقة والدفء والراحة والأمان. البرتقالي إن اللون الصارخ والفاقع يجعلك تشعر بالإثارة والحماس والدفء. كمزيج من الأحمر والأصفر، غالبًا ما يستخدم لجذب الانتباه. الوردي يرتبط بالحب والرومانسية والشباب والانتعاش، وقد يكون له تأثير مهدئ. يعتمد تأثير اللون الوردي على درجته وعمقه. والآن بمعرفتنا لما تعنيه الألوان والمشاعر التي تستحضرها، فلنحاول إجراء تحليل بسيط لمخططات الألوان التي تستخدمها 18 علامة تجارية عالمية معروفة على مواقع شركاتها على شبكة الإنترنت. هذا الأمر مثير حقاً، فقد بدأنا في اتخاذ الأمور على نحو مختلف. 1. كوكا-كولا Coca-Cola اللون الأساسي هو الأحمر المصبوغ على خلفية من الأبيض والرمادي الفاتح من أجل رؤية وتباين أوضح. الأحمر يفترض أن يخلق مشاعر الاستمتاع والحركة وعلى الرغم من أن الابيض من المرجح أنه يستخدم ليخفف حدة الأحمر كونه لون بارد, فانه من المفترض أن يمنح شعور البهجة ويمثل انعكاس الأفكار كما يقول العاملون المهرة "عمل رائع!". 2. ماكدونالدز McDonalds على الرغم من أن مطاعم ماكدونالدز تستخدم اللونين الأصفر والأحمر بهدف تحميس الأطفال إلا أن الموقع الإلكتروني يبدو أكثر رسمية باللونين الأبيض والأسود. ولا عجب في ذلك فبزيارته من قبل الوالدين الراغبين بمعرفة ماذا يأكل أبناؤهم وكم سببت لهم من سمنة فإن اللونين الأبيض والأسود حل مثالي لجعل الموقع يبدو أكثر اعتدالًا، ورسميًا، ومفهومًا، ونظيفًا مرتبًا. الآن تخيل لو أنه صمم باللونين الأصفر والأحمر (الذين يسببان الإثارة للعين) فإن ذلك سيُغضب الوالدين. وحسب رأيهم فإن: والدين محبطين = أموالًا أقل. 3. إم آند إمز M&M’s ألوان إم آند إمز والتي نراها عادة في التلفزيون من خلال الإعلانات هي الأصفر والأحمر (وهذا يضاعف الشعور بالحماس). الموقع نفسه مزيج من كل الألوان الممكنة بدءًا من الأزرق الخفيف في الخلفية للأزرق الغامق والأخضر والأصفر والبرتقالي والأحمر في البانرات والترويسة. رجال إم آند إمز M&M’s أذكياء للغاية، فكل منا يختار الحلوى التي يحبها، لكن هناك مشكلة واحدة وهي أن الموقع يبدو غير متناسق وأنه مكون من قصاصات غير متوائمة. 4. كولجيت Colgate الأحمر والأبيض والأزرق هي الألوان المتعارف عليها عالميًا والمشهورة لمعجون الأسنان وهي الثلاثة ألوان الوحيدة المستخدمة في الموقع الإلكتروني (حتى أن الأم والأطفال في الصورة على الترويسة يلبسون الأحمر والأبيض على خلفية زرقاء سماوية!). نرى أن الأحمر يعبر عن الطاقة والسعادة والأبيض يعبر عن اللمعان بينما يعبر اللون الأزرق عن البرودة المنعشة لسريان الماء والثقة بالنفس. وعلى الرغم من أنني أحببت معجون الأسنان هذا إلا أن منظمة ألوان الموقع لم تسعدني ولم تشعر عيناي بالراحة. فاللون الأحمر الفاقع جعلني أشعر بعدم الارتياح وغالبًا ما أفقدني التركيز على النص والمعلومات. 5. نستله Nestle شعار نستله يقول: (طعام جيد، حياة جيدة) ومنظومة الألوان المكونة من الأبيض-الرمادي-الأزرق ستشعرك بالهدوء والأمان والثقة بأن كل شيء سيكون على ما يرام. سوف تتذكر هذا الشعور حين تشتري منتجًا من نستله في المرة القادمة ستفكر بطريقة ما وتقول: "إنني أدرك بأن هذه الشركة معتمدة لإنتاج الطعام الجيد، ربما أكون قد قرأت هذا في مكان ما". وهذا يعتبر مثالًا عظيمًا يؤكد كيف أن التسويق مرتبط ارتباطًا وثيقًا بإدراكنا للألوان. 6. نسكافيه Nescafe هو أحد منتجات نستله ومع ذلك فإن موقع نسكافيه صُمّم بألوان الخوخ الغامقة المميزة -المكونة من مزيج من الأحمر الباعث على الدفء والنشاط والأرجواني المريح- والذي يجعلك تشعر بالتميز والانفراد. أنا أحب منظومة الألوان هذه، إنها ليس مزعجة كما اللون الأحمر وليست مرهقة كاللون الأرجواني إنها تجعلك تشعر بأنك مميز ومرتاح. 7. كادبوري Cadbury موقع إلكتروني مصنوع من ظلال اللون الأرجواني. أخمن أنه من المفترض القول بأن منتجات كادبوري مميزة للغاية، ولكن هذا يثير الشك في نفسي لبعض الأسباب. إنها نظرية مثيرة للاهتمام، بينما الشوكولاتة عادة ما ترتبط بالطاقة والنشاط (مثل سنكرز) أو الجنس (مثل الشوكولاتة السادة) ولكن نظرية الخدعة تجعل المنتج يصنف خارج المنظومة .أو ربما أنا الوحيد الذي يفكر بهذه الطريقة. 8. نوكيا Nokia أزرق، أخضر، رمادي، أبيض، وقليل من الوردي. أمّا الأزرق فهو للراحة النفسية والأخضر للطمأنينة والطبيعية والرمادي للمزج بشكل جميل بين الأزرق والأخضر، والأبيض للوضوح، أمّا الوردي فربما لجذب الفتيات. الموقع مصمم بألوان تشعرك بالثقة في الجودة وهذا التصميم بعيد عن منظومة الألوان الافتراضية والمكونة من الأزرق والرمادي والأبيض. من المعروف عن اللون الأخضر أنه يزيل التوتر وله تأثير مهدئ على بعض المحبطين والمنهكين من أعبائهم اليومية وأولئك الذين يأتون للبحث عن آخر التطورات. 9. كوداك Kodak على الرغم من أن منتجات كوداك مرتبطة باللون الأصفر (لاستثارة الانتباه) لكن الموقع مصمم بمنظومة الألوان الكلاسيكية المكونة من الرمادي-الأبيض -الأزرق وهذا ما يجعله مريحًا للعين ويسمح بالتركيز على النصوص والمعلومات. إنك تشعر بأنك ستحصل على المعلومة التي تريدها بطريقة واضحة، وبالتأكيد أنك لم تشعر بالرسمية بل بالطريقة الاحترافية لعرض الأشياء. 10. جيليت Gillette الأزرق هو اللون المفضل للرجال والقائمون على جيليت يعلمون هذا. "أفضل ما يمكن أن يحصل عليه الرجل"- اللون المفضل للرجال مع قليل من الأحمر والبرتقالي في العروض لجذب الانتباه. لقد عرفوا ماذا تحبون يا رفاق، وبالتالي فإنهم يعرفون كيف يبيعون منتجاتهم لكم. 11. إيكيا Ikea ترويسة الموقع مصممة بألوان مشرقة الأصفر والأخضر المصفر والأزرق السماوي الذي يجعلك تشعر إلى حد ما بالمتعة (والرغبة بشراء شيء ما). الصور المستخدمة في الفلاش المتحرك أيضا براقة وتشعرك بإثارة أكبر. جسم الموقع جميل وبسيط إلى حد ما - نصوص سوداء وزرقاء على خلفية بيضاء لتعطيك وضوحًا ووصولًا كاملًا للمعلومات. صفحة العروض المميزة يتربع بنر أحمر كبير في أعلاها ولا يمكنك أن لناظريك الابتعاد عنه! في اللحظة نفسها يظل عقلك يقرأ عبارة "عروض مميزة" مرة تلو أخرى … لقد استحوذت عليك إيكيا. 12. لوريال L'oreal ليس لدي الكثير لأقوله عن موقع لوريال المصمَّم بكافة الظلال الممكنة للون للأرجواني إنه يجعلك تشعر بالتميز حقًّا. مع منتجات لوريال سوف تكون مثيرًا وأنيقًا وواثقًا بنفسك ومميزًا بحق. 13. كِلوقز Kellogg’s منذ عام 1906 عرف الناس كلوقز كشركة يمكن الاعتماد عليها للمذاق الرائع، والأطعمة ذات الجودة العالية. كل ما في الموقع يتكلم عن المتعة والحماسة (الكثير من الأصفر والأحمر) وصور العائلات المبتسمة في رأس الصفحة التي تشعرك بسعادة أكبر. حتى الأطفال يحبون ذلك! فالنصوص على الموقع تتحدث عن ذلك "يسعدنا أن نعرض عليكم عروضنا الممتعة المتعلقة بمنتجاتنا." إنه ممتع! 14. غوتشي Gucci اللون البني الفاتح الطبيعي يجعلك تعتقد أن منتجات غوتشي كأنها طبيعية جدًا (بمعنى آخر لأنها مصنوعة من الجلد). ومثل لوريال الموقع المصمم بلون منفرد بينما الظلال المختلفة تشكل بقيته. ويقول الكاتب: "على الرغم من أنني ضد قتل الحيوانات من أجل الفراء والجلد، فقد أحببت موقع غوتشي، إنه مريح وطبيعي جدًا". 15. هاينز Heinz الصفحة الرئيسية للموقع فيها صورة كبيرة مستخدمة كخلفية، ويمكنك أن ترى السماء، والحقول وتتذوق الطماطم إنه ببساطة لأمر مؤثر. خلفية الموقع داخل الصفحات تتغير من صفحة إلى أخرى: البني الذي يمثل الأرض والأزرق الذي يمثل السماء والرمادي الذي يشبه السماء قبل هطول المطر. القائمون على موقع هاينز يستخدمون الألوان بشكل مؤثر جدًّا، فمغزى منتجاتهم نابع مما يزرعونه (أو مما يشترونه من طرف ثالث) إنهم يستخدمون كل الألوان الطبيعية والصور ليبينوا لك أن منتجهم هو خلاصة ما تعطيه لنا الطبيعة. 16. كونفرس Converse في حين أن منتجات كونفيرس متاحة بكل الألوان الممكنة، فإن موقعها مصمم بنمط وألوان تشبه حجارة الرصيف وبناطيل الجينز القديمة. إن النمط هنا ليس معتمدًا على الألوان ولكن على الجمهور الذين يجب أن ينجذبوا لهذا النمط من التصميم، العناصر المرسومة بخط اليد والشكل الغريب الذي يبدو عليه. 17. كلينكس Kleenex كلينكس مثال آخر رائع على تصميم المواقع باللونين الأخضر والأزرق الطبيعيين (لتشعرك بالثقة من أن المنتج طبيعي) المختلط بالعناصر البرتقالية لجذب الانتباه. إنه من الممتع أنني لم يلفت انتباهي سابقًا هذا القدر من المواقع الكثيرة التي تستخدم نفس منظومة الألوان ولكنها لا تزال لا تشير لبعضها. ربما لأننا لا ننظر إلى الألوان بطريقة أخرى تجعلنا ندرك ونتعرف على اللون، أعتقد أننا نراه كجزء مكمل للنظام. 18. دوراسيل Duracell موقع دوراسيل مصمم بثلاثة ألوان رئيسة مع ظلالها: الأسود، البرتقالي، والأخضر. الأسود ليصنع تباينًا أكثر للبرتقالي وليضيف بعض الرسمية والثبات. البرتقالي يعبر عن القوة، والطاقة، والمرح. الأخضر يمثل الطبيعة ويعمل بشكل رائع مع البرتقالي. "الطاقة الذكية" كما يصفون منتجهم، كل ما في الموقع يشعرك أن منتجات دوراسيل هي فقط ما تحتاجه، البطاريات قوية جدًّا ويمكنك الاعتماد عليها في أي موقف. وعلى كل حال فأنا أشتري بطاريات دوراسيل. ما هو الألوان التي ستستخدمونها في تصميم مواقعكم؟ وما هي ألوانكم المفضلة؟ ننتظر تعليقاتكم يا رفاق! ترجمة -وبتصرف- للمقال The Psychology of Colors in Web Design.

حسب موقع smart insights فإن 80% من مستخدمي الإنترنت يمتلكون هاتفًا ذكيًا، هذا يعني ملايين الأشخاص الذين يتصفحون الإنترنت ويحاولون أن يجدوا منتجات ومعلومات خلال تصفحهم. ولإرضاء الزبائن المحتملين يجب على كل شركة أن تجعل موقعها الإلكتروني قابلاً للتصفح على الأجهزة المحمولة. ها هي بعض النصائح المستوحاة من تجربتنا الخاصة في شركة Sonifi لتساعدك على تصميم وبرمجة موقع إلكتروني متوافق مع الأجهزة المحمولة. النصيحة الأولى: كل المواقع الإلكترونية على الأجهزة المحمولة تحتاج للخاصية name="viewport"‎ في العنصر meta تذكر بأن ترفق الخاصية viewport من العنصر meta عند انشائك لموقع الكتروني خاص بالأجهزة المحمولة. حجم الإطار المعروض (viewport) هو عبارة عن حقل وهمي مستخدم من قِبَل محركات البحث لتحديد كيفية قياس وتحجيم محتوى الموقع الإلكتروني لذلك يعد تضمين الخاصية viewport ضروريًا جدًا عند بناء تجربة متعددة الأجهزة. حجم الإطار المعروض يخبر متصفح الهاتف بأنه يجب عليه أن يتوافق مع شاشة أصغر وبدونه فإن الموقع الإلكتروني ببساطة لن يعمل بشكل جيد على الأجهزة المحمولة. وبالرغم من أي إعدادات تقرر أن تستخدمها لتحديد ما يتحكم به منفذ العرض الخاص بك، تأكد من أن تضعه في العنصر head من الصفحة. "80% من مستخدمي الإنترنت يبحثون عن المنتجات عبر هواتفهم الذكية" النصيحة الثانية: الحجم مهم في المواقع المتوافقة مع الأجهزة المحمولة هل جربت من قبل أن تزور موقعًا إلكترونيًا واحتجت أن تضغط على زر معين ولكن الزر كان صغيرًا جدًا بحيث أنك ضغطت على زر أخر عن طريق الخطأ؟ أو هل جربت من قبل أن تكبِّر الشاشة لتقرأ شيئًا معينًا؟ هذا الأمر مزعجٌ جدًا ولذلك إنه من المهم أخذ الحجم بعين الاعتبار عند تصميم الموقع الإلكتروني، وليس فقط حجم الصفحة، بل أيضًا حجم الخطوط والأزرار. الخطوط حجم الخط للمواقع على الهواتف يجب أن يكون 14 بكسل على الأقل، وعلى الرغم من أن هذا الحجم قد يبدو أكبر مما تريد ولكنه يسهل على الزائر أن يقرأ الصفحة بدون أي تكبير للصفحة أو أي صعوبة. أما الخط الأصغر يمكن أن يستخدم في العناوين والنماذج وبإمكانك تقليصه حتى 12 بكسل. الأزرار دائمًا تذكر هذا الإختصار «أ.أ.أ»: أي «الأزرار الأكبر أفضل»،إذ أن الأزرار الكبيرة تقلل من احتمالية الضغط بشكل خاطئ على زر آخر. بالنسبة لرواد الهواتف المحمولة مثل شركة "آبل" فهم ينصحون بأن يكون حجم الأزرار على الأقل 44 بكسل × 44 بكسل من أجل تحسين تجربة المستخدم وزيادة التحويلات في مواقع التجارة الإلكترونية. النصيحة الثالثة: النوافذ المنبثقة لا يجب استخدامها في تصميم مواقع الإنترنت الخاصة الأجهزة المحمولة كَون المتصفحات الخاصة بالهواتف لا تدعم النوافذ المنبثقة، فإن وجود هذه النوافذ يسبب الكثير من التشتت والقلق لتجربة المستخدم بشكل كامل، وحتى أصغر النوافذ تسبب هذا التشتت لمستخدمي الهواتف. وعلى مدار عملية التصميم، احرص جيدًا على تجنب استخدام النوافذ المنبثقة للحصول على أفضل النتائج واحرص ايضًا على تجنب التحديث الدوري للصفحة وذلك لعدم امتلاء ملفات ذاكرة التخزين المؤقت في الهاتف بل أعطِ المستخدم حرية التحكم في هذه العملية. النصيحة الرابعة: قلّل من استخدام الحقول الخاصة بالكتابة في قائمة التنقل لأنه وكما تعلم، من الصعب بعض الشيء إدخال النصوص والكتابة عند تصفح المواقع على الهاتف فينصح باستبدال هذه الحقول بأزرار او قوائم مما يمكن المستخدمين من اختيار ما يريدون بسهولة وبدون الوقوع في أي اضطرابات. وعليك الأخذ بعين الاعتبار بأن مستخدمي الأجهزة المحمولة لا يستطيعون استخدام لوحة مفاتيح او فأرة، على عكس مستخدمي الكمبيوتر، لذلك احرص على ايجاد طرق ابداعية أكثر لجعل تجربتهم هي نفسها وبدون اللجوء لاستخدام لوحة مفاتيح صغيرة او التصفح بصعوبة. بعض الحلول تشمل: القوائم القوائم المنسدلة الأزرار -خيارات الصور النصيحة الخامسة: استخدم وضع تصفح ذكي في تصميمك قد أجريتَ بالتأكيد بالعديد من الأبحاث قبل بنائك للموقع الإلكتروني لمحاولة فهم جمهورك وما يتوقعون وجوده في الموقع، قم بمراجعة المعلومات ثانيةً عند تطويرك لنموذج خاص بالأجهزة المحمولة لتستطيع تحديد كيف سوف يتصفح هذا الجمهور موقعك على الهاتف. إن كان جمهورك المستهدف من المستخدمين يرغب برؤية محتوى متجدد بشكل مستمر فعليك وضع قائمة التصفح أسفل المحتوى الرئيسي مما سيترك مساحة كافية للمحتوى والعناوين لتظهر أكثر وبدون إعاقة لمظهر الصفحة. أما إن كان المتابعون يريدون الوصول الدائم للتصفح حسب الفئة، إذن يجب عليك وضع قائمة التصفح في أعلى الصفحة. النصيحة السادسة: قم بتبسيط تصميم موقعك الإلكتروني حاول بأن تتخلص من المحتوى الغير ضروري في موقعك وقم بتبسيط التصميم الخاص بالصفحة لجعل الاستخدام أفضل، وتذكر بأن التصميم الخاص بالأجهزة المحمولة يدور حول نظرية الحد الأدنى (minimalism)، وتبسيط التصميم يساعد على تحسين الاستخدام. أنشئ موقعك بحيث تسمح للمستخدمين بتصفحه دون أي صعوبات وذلك عن طريق تجنب الجداول والإطارات والصيغ الأخرى. ودائمًا أبقِ الحشوة على أقل مستوى لأنه كلما زاد عدد المستخدمين الذين يضغطون على الروابط كلما زاد انتظارهم للتحميل، واجعل موقعك بسيطًا لخلق توازن بين المحتوى والتصفح. النصيحة السابعة: قسّم الصفحة لأجزاء صغيرة عملية عرض المحتوى الذي يتناسب تمامًا مع الشاشات الكبيرة للكمبيوتر وتعبئتها في أجهزة صغيرة ومحمولة باليد تشبه كثيرًا عملية ادخال قطعة مربعة في فتحة دائرية. قسّم الصفحة لأجزاء صغيرة بوضع الأقسام الطويلة من النصوص في عدة صفحات بدلاً من وضعها في صفحة واحدة طويلة تجعل المستخدمين يمررون بشكل مستمر لرؤية المحتوى وبإمكانك التخلص من المحتوى الأقل أهمية وعمل عمود واحد من النص لتجنب التمرير الأفقي في الصفحة. النصيحة الثامنة: قياس الصور يصنع فرقًا كبيرًا لمستخدمي الأجهزة المحمولة لاحظ جميع الصور المستخدمة في المحتوى وفي الخلفية، وتأكّد بأن الصورة مقاسها صحيح عند التصفح بالوضع العمودي أو الأفقي، وإذا كانت الصور لا تحقق الأبعاد المناسبة فعليك تغيير تنسيق صفحات في CSS لجعل الصورة بعرض 100% أو بأن تجعل الصورة نفسها مناسبة بداخل الصفحة (خاص بصور الخلفية). وباتباعك لهذه النصائح السهلة بإمكانك التأكد من أن تصاميمك مناسبة لكل من الحاسوب والهاتف وبالتالي يمكن للزائرين أن يحظوا بأفضل تجربة ممكنة. ترجمة -بتصرف- للمقال ‎8 tips for designing mobile-friendly websites لصاحبته: Sarah Almond

ثورة الأجهزة المحمولة ليست فقط اختراعًا تكنولوجيًا يمكننا من الابتعاد عنه بأي وقت، فلا يمكننا الابتعاد عن الهواء الذي نتنفسه أو عن الأقدام التي تحملنا. وعلى نفس الصعيد، فلا نستطيع الابتعاد عن أجهزتنا المحمولة وما عليها. لأنها تعد امتدادًا لشخصياتنا. وبالنسبة للشركات، هذا يعني التركيز على إسعاد الزبون بتجربة رائعة على الهاتف حيث يوجد السياق والخصوصية. كن لحوحًا: إما إسعادهم أو لاشيء آخر يستطيع معظمنا ببساطة البقاء بعيدًا عن التكنولوجيا. فعندما نريد عزل أنفسنا، نبتعد ببساطة عنها بمغادرة المكتب أو المصنع في نهاية اليوم مع إطفاء الحاسوب أو التلفاز. ولكن ماذا عن برامج ومنتجات الأجهزة المحمولة؟ هل نبتعد عنها كما نبتعد عن وسائل التكنولوجيا الأخرى؟ نتمنى بأن نستطيع إقفال هواتفنا المحمولة ببساطة، ولكن قليل منا من يستطيع فعل هذا. وفي الحقيقة، قد أظهرت الإحصائيات بأن 2 من أصل 3 أشخاص يضعون أجهزتهم المحمولة على المنضدة بجانب أسرّتِهم. إنها آخر ما نضعه قبل نومنا وأول ما نتفقّده عند استيقاظنا. أسعد المستخدمين أو اترك كل شيء لا نستطيع النوم وأجهزتنا المحمولة بعيدة عنا قليلًا، فنحن لا نرغب بالانفصال عنها فقد أصبحت ما يسمى بالتكنولوجيا اللصيقة (sticky technology) حيث أصبحنا مرتبطين بشكل قوي بأجهزتنا المحمولة وأصبح استخدامنا لها عادةً مستمرة وتقريبًا بدون إدراك. وازن هذا بالحقيقة القاسية بأن نصف تطبيقات الأجهزة المحمولة في متجر "آبل" للتطبيقات ليس لديها أي مستخدمين على الإطلاق. يجب على الشركات التي ترغب بالنجاح في نطاق الأجهزة المحمولة أن تتأكد من أنها تنشئ تجربة مستخدم تتوافق تمامًا مع التوقعات العالية للجمهور. تحدث بالأمور الشخصية: سياق الكلام يهم ومع ثورة الأجهزة المحمولة، فإن هنالك من البيانات عن كل شيء وكل شخص أكثر بكثير من أي وقت سابق، وهذا الشيء لا تراجع عنه. خذ على سبيل المثال شركة "فيسبوك"، فخلال فترة عملي هناك، أجرى فريقي اختبارًا لتحديد قابلية المستخدمين لتقبل الإشعارات المنبثقة، فقمنا باختيار مجموعة من المستخدمين الذين لم يرغبوا في استقبال الإشعارات المنبثقة وقمنا بعرض شاشة لهم بعدما قاموا مباشرة بإرسال رسالة فورية مما وضح لهم أهمية الإشعارات المنبثقة. الشيء الذي كان مخادعًا لنا خلال فحصنا هو كم استغرق المستخدمين حتى يكون ناجحًا، وكان قد احتاجوا ل5 خطوات لتغيير إعداداتهم. وعادةً ما تخسر شركات الأجهزة المحمولة 90% من مستخدميها مع كل خطوة لذلك لم نكن متفائلين. ولكن تفاجأنا بأن تقريبًا 1 من أصل كل 4 مستخدمين قام بالفعل بتغيير خصائصه. والشيء الذي وجدته مشوقًا حول هذا، هو كيف تطور سلوك المستخدم بسرعة على الأجهزة المحمولة. وتقريبًا بمدة 6 أشهر قبل أن نجري الاختبار، كان هنالك أغلبية من مستخدمي "فيسبوك" مشككين بالإشعارات المنبثقة لذلك رفضوا استقبالها. هم لم يكونوا متأكدين تمامًا من طبيعة هذه الاشعارات المنبثقة أو اذا كان لها أي قيمة على الإطلاق. وشعر بعضهم بالانتهاك من قِبل هذه الإشعارات، وفجأةً أدرك الناس بأن الإشعارات المنبثقة مكّنتهم فورًا من معرفة عندما ينشر أحد الأصدقاء صورةً لهم أو عندما يرسل لهم رسالة أو يشير لهم في منشور. لذلك أرادوا الإشعارات المنبثقة وما كان ملائمًا من قبل أصبح غير طبيعي. كمية البيانات المتاحة لشركات الهاتف المحمول تعني بأنهم يستطيعون تخصيص التجربة لكل واحد من المستخدمين حسب مزاجه، موقعه وسياقه. والشركات التي تحقق هذا سوف تربح. أظهر الاحترام ماذا لو كان جهازنا المحمول المفضل هو ساعة بدلاً من هاتف؟ زوج من العدسات اللاصقة؟ الرقعة الذكية؟ حبة دواء ذكية؟ نهاية عصبية رقمية؟ وكلما تصغر الأجهزة المحمولة تندمج أكثر وأكثر بأغراضنا اليومية التي تحيطنا وتصبح مترسخة بشكل عميق بداخلنا. المعلومات الغزيرة التي تجمعها أجهزتنا المحمولة مفيدة لنا غالبًا بالرغم من أنها تكشف حياتنا الشخصية أحيانًا بشكل يهدد مستوى راحتنا. مستوى الإفصاح الغير مسبوق للحياة الشخصية الذي تحتاجه ثورة الأجهزة المحمولة حتى تعمل بشكل صحيح مجهول لحد ما ولذلك سنحتاج لوضع حدود ولتوازن. عندما كان للحكومة وصول سهل لمعلوماتنا الشخصية في الماضي نتج عن ذلك عواقب وخيمة: الدول المراقبة، قوائم الأعداء واضطهاد المنشقين وفي مناطق مثل الصين هذا لا يزال قائمًا حتى يومنا هذا. ونفس الشيء ينطبق على التحكم التجاري لبياناتنا الشخصية. والجدل الأوروبي حول "الحق في أن تُنسى" يعد مثالاً على الديمقراطية في التصرف وعلى طلب الناس للمزيد من السيطرة على أتباعهم الرقميين. وضياع الخصوصية في الحقيقة هو موضوع مفرق للأجيال. معظم الشباب لا يعتقدون بأن هناك شيء يسمى خصوصية: ومعظم الناس كثيري الإنجاب يعتبرونه حقًا من حقوقهم. يعد الإطلاق المخيب للآمال لنظارات Google Glass مثالاً على ما قد يحدث عندما يفشل منتج من منتجات الأجهزة المحمولة في الوصول إلى التوقعات المتعلقة بالخصوصية. فقوة هذه النظارات تم اعتبارها مخيفة وخارجة عن أيدي المستخدمين. وشعر الناس بأنه تم صنعها لخدمة مصالح شركة Google الشخصية، وبأنه تم تصميمها لجمع البيانات لمصلحة هذا الوحش التقني بدلاً من خدمة احتياجات المستخدمين. فتم الطلب من الناس الذين يرتدون نظارات Google Glass بأن يغادروا الحانات، مسارح السينما والأماكن الحساسة. وتم سحب المنتج من الأسواق في بداية عام 2015. ترجمة -بتصرف- للمقال ‎3 ways to be just pushy enough on mobile لصاحبته SC Moatti

يستمر الجدل الدائر حول سكتش وفوتوشوب منذ الأزل. وليس هناك من ينكر أنه حتى يومنا هذا، لا يزال الفوتوشوب الأداة الأكثر استخدامًا لصنع النماذج المحاكية (Mockups) لتصاميم الجوال والويب. رغم أنّه كان يُقصد بأدوبي فوتوشوب في المقام الأول أن يكون أداة للمصوّرين لتحرير الصور التي يلتقطونها، فإن ميزاته الجذّابة تمكِّن مصممي الويب من بناء مواقع ويب رائعة ومفيدة أيضًا. لا يزال هناك الكثير من المصمّمين الذين يفضّلون فوتوشوب الفوتوشوب: معول المصمم لفترة طويلة، كان الفوتوشوب أداة أساسية بالنسبة للمصممين. في الواقع، لا يزال العديد من المصممين يعتبرون هذه الأداة معولهم الخاص. يدرك العديد من عملاء مصممي الويب ما هي ملفات PSD. تتكوّن هذه الملفّات المصنوعة في فوتوشوب من طبقات يمكن فكّها ومعالجتها. يطلب العملاء عادةً من مطوّري الواجهة الأمامية (front-end developers) استخدام هذه الملفّات كمراجع، بينما يعرف مصممّو الويب كيفية تطبيقها. من السهل جدََّا تحديث هذه الملفّات ومشاركتها مع الأعضاء الآخرين في فريق التصميم. ومع ذلك، منذ وصول نسخة فوتوشوب CC 2014، أثبت فوتوشوب أنّه أكثر من مجرّد أداة لتحرير الصور لأنه يمكن أن يكون أداةََ سهلة وصديقة لمصمّمي الويب وللذين يعملون على التصميمات الرقميّة أيضًا. سنعرض فيما يلي بعض ميزات برنامج أدوبي فوتوشوب ممّا يجعله أداةََ مفيدة لتصميم الويب: المكتبات Libraries: تتمّ مزامنة الأصول مع حساب Creative Cloud الذي يمكّبن استخدامه مرة أخرى في برامج أدوبي الأخرى وفي مختلف الملفات والمشاريع المستقبلية. كائنات ذكية (Smart Objects): تمامًا مثل المكتبات، يمكن إعادة استخدام الكائنات الذكية في العديد من المواقف، سواء في ملف واحد أو مع ملفات أخرى. استخراج الأصول (Extract assets): في هذه الأيّام، أتاح فوتوشوب لمصمّمي الويب استخراج الكائنات، العناصر والصور لعناصر الويب والجوال بعد دمج ميزات أكثر شمولية. وبمساعدة إضافات مثل Cut & Slice و DevRocket، فإن تصدير هذه الأصول يغدو أمرََا سهلََا للغاية. Layer comps: تُمكّن Layer comps المصمّم من صنع أشكال مختلفة من التصميم وذلك عن طريق تعديل سمات، وتموضع وقابليّة رؤية العناصر دون مشاحنات إنشاء ملفات متعدّدة. دعنا نواجه هذه الحقيقة: لا يزال فوتوشوب أداة التصميم الأولى التي يجب على المصمّم إتقانها. فأنا أعتبر برنامج فوتوشوب أمًا لكل برامج أدوبي وتصميم الويب. كل ما تحتاجه (أو بالأحرى جلّ ما تحتاجه) موجود في البرنامج، عليك فقط أن تطلق العنان لإبداعك قليلاََ. لكن نظرًا لكونه غير كامل أيضًا، فإنّ فوتوشوب له حدوده في بعض الأحيان. فمن الممكن أحيانا، ألّا يعمل الفوتوشوب بالطريقة التي نريده أن يعمل بها. غالبًا ما يواجه المصمّمون مشاكل عندما يريدون استعمال وظائف لا يدعمها الفوتوشوب. يستدعي هذا المأزق تنزيل برامج إضافية. ما يفعله المصممون في هذه الحالة هو البحث عن برنامج آخر وتنزيله وفتحه لتلبية احتياجات خيالهم وإبداعهم. أنت كمصمّم، لديك خيارين: إمّا أن تتخلّص من فوتوشوب وتبحث عن برنامج أكثر تنوّعًا (أعتقد أنه سيكون من الصعب جدًا، إن لم يكن مستحيلًا)، أو البحث عن حلول من شأنها تحسين الفوتوشوب وتطويره. ألا وهي الإضافات. الإضافات هي ملحقات يمكنك تنزيلها وتثبيتها داخل البرنامج. بحيث توفر لك الوقت، وتحل المشكلات، وفي المدى الطويل، من شأن الإضافات حفظ أموال المصمّمين وهذا يتيح لهم مجالاََ لتوسيع قدراتهم الإبداعية. لأنني أحب فوتوشوب كثيرًا، فقد بحثت عن الإضافات التي قد تساعد المصممين في احتياجات التصميم الخاصة بهم. وها هي ذا: صنع سكيتش طريقه إلى القمة بقوّة. نهضة سكتش "أنا أحبّ سكتش (Sketch). قمت بالانتقال إليه مؤخّرََا ولم أعقّب. لقد كنت مدافعةََ عن برنامج فوتوشوب طوال حياتي العملية إلى أن أتت شركة سكتش، وخلال أسبوع، كنت قد انتقلت إلى استخدامه بالكامل، ولم أندم على الإطلاق. أعرف الكثير من المصممين الذين قاموا بالتبديل، ولكن في الواقع لا يزال هناك الكثير من المصممين الذين أتحدث معهم في المؤتمرات، والذين لا زالوا يستخدمون كلا البرنامجين (50% فوتوشوب و 50% سكتش)، سوف يتغيّرون، وسوف يرون الضوء قريبًا!". سارة بارمنتير Sarah Parmenter بعد سيطرته الكاملة لأكثر من عقدين من الزمان، تم تحدّي تفوق فوتوشوب أخيرًا مع وصول سكتش. أصبح سكتش أحد الموضوعات المفضّلة للمناقشة من قبل أولئك الذين ينتمون إلى مجتمع الويب وتصميم واجهة المستخدم. ولكن، ما الذي جعل سكتش يُبقي صناعة تصميم الويب في حالة تأهّب في الآونة الأخيرة؟ لديك كلّ ما تحتاج مقارنةً بالفوتوشوب، فإنّ تنظيم جميع المستندات التي لديك وإجراء المراجعات على سكتش أسهل بكثير، ذلك بفضل واجهة سكتش النظيفة والبسيطة. ومع ذلك، لا يأتي هذا التطبيق إلا مع أدوات يمكن تعديلها باستخدام CSS3 و HTML. على عكس فوتوشوب، فإن تطبيق سكتش لا يحتوي على أدوات 3D ومرشحات الصور وميزات أخرى يمكن أن تؤثر على سرعة التصميم عندك. باختصار، يقدم برنامج سكتش الأشياء الحيوية لمشاريع الويب وواجهة المستخدم الخاصة بك، ممّا يتيح لك إنهاء عملك بوتيرة أسرع بكثير. بالطبع، ليس كل مصممي الويب مثل هذا. للتعويض عن نقص الأدوات، يحتوي سكتش على الكثير من الإضافات التي يمكن مقارنتها مع أدوات الفوتوشوب، وقد قام مطورو التطبيق بتغطية كل ما يمكن أن يحتاجه المصمم: من ملحق بسيط يمكّنك من تبديل لون الإطار أو العنصر نفسه إلى مجموعة واسعة من مولّدات المحتوى. لوحات الرسم (Artboards) يعدّ صنع ألواح الرسم باستعمال تطبيق سكتش من أسهل ما يمكن. فبمجرد الضغط على حرف A من لوحة المفاتيح تكون قد أنشأت لوح رسم، سيعرض سكتش بعد ذلك قائمة تحوي 28 حجم مختلف من أيقونات الشاشة الأكثر استخدامََا والتي يمكنك الاختيار من بينها. وهذا مفيد تمامًا عند إنشاء تصميم متجاوب لأن الحصول على الأبعاد الصحيحة عند إنشاء نموذج محاكي سيغدو أمرََا سهلََا. لوحات المزاج (Moodboards) يسهّل عليك تطبيق سكتش إنشاء لوحات المزاج وموارد المشاريع. أولاً، لاحظ أن جميع ملفاتك يمكن أن تعيش داخل مستند واحد. يحتوي سكتش على درج صفحة في الشريط الجانبي للوح الرسم والذي يتيح لك التمرير السريع بين الملفات. بالنسبة للمشاريع الكبيرة مثل هذا المشروع، كان من الجيّد بشكل خاصّ أن تكون قادرًا على القفز سريعًا ذهابًا وإيابًا داخل شجرة الموقع، لوحة المزاج والنماذج المحاكية أثناء التصميم أو إجراء تعديلات. صندوق أدوات سكتش (Sketch Toolbox) قبل استخدام سكتش، يوصى بشدة بتنزيل صندوق أدوات سكتش Sketch Toolbox أولاً. فهذا هو مدير الإضافات الذي يتيح لك تصفّح وتثبيت الاضافات التي تريدها بشكلِِ مباشر. صندوق الأدوات هذا سيساعدك أيضََا في مراقبة الإضافات الأخرى التي تستخدمها بشكلِِ جيّد. مبنيّ على المتّجهات نحن الآن في عصر التصميم المتجاوب، ومفتاح النجاح في تصميم مواقع متجاوبة هو استخدام المتجهات (Vector) أثناء التصميم. لذلك يحتاج المصممون إلى الأخذ بالحسبان الشاشات عالية الوضوح مقابل الشاشات العادية والشاشات الضيّقة مقابل الشاشات العريضة وأشياء أخرى كثيرة عند تفكيرهم في الخروج بتصميم معيّن. من الواضح أن العمل على تصميم يتجاوب مع جميع الأشكال والتنسيقات أمر في غاية الأهمية. ومع ذلك، فإنّ الخروج بنموذج محاكي لكل مجموعة من الأبعاد هو عملية دقيقة، تتطلب الكثير من الوقت. رغم ذلك، فإنّ هذه ليست مشكلة مع تطبيق سكتش بسبب الميزات التي تمكّنك من تغيير حجم الكائنات بحرية. بإمكانك تخيّل الوقت والطاقة التي يمكنك توفيرها فقط مع هذه الميزة وحدها. إضافة (Sketch Mirror) على عكس البرامج الأخرى المبنيّة على المتّجهات، فإن تطبيق سكتش يتعامل مع البكسل أيضا. نظرًا لأن الأشكال التي تنشئها تأتي دائمًا إلى أقرب بكسل، فلا داعي للقلق بشأن الخطوط الضبابية والصور. مع الإضافة (Sketch Mirror)، يمكنك بسهولة فتح مستنداتك ومعرفة كيف سيبدو التصميم الخاص بك على جهاز iPad أو iPhone. تسمح لك هذه الإضافة أيضًا بمعاينة التغييرات التي أجريتها على الفور، مما يساعدك في إجراء تعديلات نهائية بناءً على ما يريده عميلك، خاصةً إذا كنت مع العميل وجهََا لوجه. إضافة AEFlowchart ما تحتاجه لإنشاء مواقع لمواقع الويب التي تعمل عليها هو الإضافة AEFlowchart. ستساعدك هذه الإضافة في إنشاء مخطّطات لمراقبة وتتبّع عملية تأسيس المواقع الجديدة. وستسهّل عليك هذه الإضافة الإشارة لأي شيء في التصميم الذي تعمل عليه، دون الحاجة إلى إنشاء برنامج آخر قد يستهلك الكثير من وقتك. أنماط النص في تطبيق سكتش من بين الأمور المثيرة للاهتمام حول تطبيق سكتش هو أنه يمكّنك من إنشاء عناصر نصية بكل سهولة. على سبيل المثال، يمكنك الإتيان بأنماط النص التي يمكنك استخدامها في الأنماط المضمّنة، مثل العنوانين والعناصر المجمّعة لها. وفيما بعد، يمكنك تطبيق ما قمت بإنشائه في مستندات أخرى. إذا كان عميلك لا يحب نمط الخطّ الذي قمت بإنشائه، فكل ما عليك فعله هو تحديثه مرة واحدة وسيتم تحديث النمط في كل مشروعك تلقائيًا. الأمر الأكثر إثارة للإعجاب هو استخدام سكتش لخاصية عرض النص الأصلي. هذا يعني أن النص الذي استخدمته في ملف التصميم هو نفسه بالضبط الذي سيظهر في المتصفح. سهولة التعامل مع الألوان يعدّ تغيير وتعديل ألوان المشروع الذي تعمل عليه أيضًا من أسهل الأمور التي يمكنك القيام بها مع تطبيق سكتش، حيث يمكنك ببساطة إنشاء لوحة ألوان على لوحة المزاج. سيتم سحب الألوان الأكثر شيوعًا التي تستخدمها أعلى المراجع الخاصة بك بحيث يمكنك استخدامها بسهولة في المستقبل عند العمل في مشروع آخر. علاوة على ذلك، بما أن سكتش يسمح لك بالوصول إلى جميع ملفاتك من خلال مستند واحد، سيسهل عليك نسخ ولصق الكائنات وأنماط الكائنات، بما في ذلك تدرّجات الألوان والألوان الأحادية، من جميع ملفاتك. وهذا شيء مفقود في الفوتوشوب بوضوح، وربما لا تدرك شركة أدوبي السهولة التي توفرها هذه الميزة. شبكة التطبيق المدمجة تعتبر شبكة التخطيط المدمجة في تطبيق سكتش ميزة أخرى من أبرز الميزات التي ينفرد بها هذا الأخير. فعلى عكس فوتوشوب، لن تحتاج إلى الاعتماد على إضافة أو سلسلة من الإرشادات أو الطبقات المنفصلة التي تحتوي على شبكة مؤقتة، والتي يكون من الصعب تحريرها. مع سكتش، فإنّ مهامََّا كتثبيت دليل تخطيط شفاف أو تغيير أحجام الأعمدة والمزاريب تغدو سهلة كأكل قطعة من الكعك. إذا كنت ترغب في تعديل شبكة التخطيط، فأنت تحتاج ببساطة إلى الانتقال إلى "عرض View"، ثم انتقل إلى "إعدادات التخطيط Layout Settings". وإذا كنت ترغب في إيقاف تشغيل الشبكة، فما عليك سوى الكبس على Control + L. إمكانيّات CSS غير محدودة "أنا أيضًا أحب طريقة دمج سكتش لمنطق CSS في التطبيق. هذا يجعل تحويل التصميمات الخاصّة بك إلى CSS أسهل بكثير، حيث يجب عليك استخدام منطق CSS عند تطبيق النسق. وهناك ميزة أخرى مفيدة حقًا لتسريع مجرى التصميم أو التطوير وهي "التقطيع التلقائي" دان إدواردس Dan Edwards كما ذكرنا في القسم السابق من المقال، يمكنك فعل أي شيء تقريبًا في CSS باستخدام سكتش. إذا قمت بالنقر فوق الكائن وضبط الشعاع في الشريط الجانبي، يمكنك بسهولة التوصل إلى زوايا مدورة على الزرّ الذي تريده. إذا كنت تريد تراكبات متدرّجة على الصور، فلن تحتاج إلاّ إلى نقرة واحدة لإضافتها. على الرغم من أن أدوات CSS3 الأنيقة لا تقتصر على سكتش، فقد أثبت هذا التطبيق جدارته عن طريق تمكين المصممين من نسخ تنسيقات CSS بدقة لمختلف العناصر. كل ما يتطلّبه الأمر هو النقر بزر الماوس الأيمن فوق أي كائن لك لنسخ التنسيقات واسم الطبقة كتعليق أعلى الشفرة المحددة. هذا يؤسس اتصالًا سلسًا بين التصميم والتطوير. بالإضافة إلى ذلك، يمكّنك تطبيق سكتش من تحويل مجموعة من الكائنات إلى رمز يمكن نسخه وتكراره ومزامنته لجميع المواقف مع الحفاظ على التغييرات التي تمّ إجراؤها على الكائن. إن إنشاء ونسخ تنسيقات CSS وتصميم المحتوى المنسوخ باستخدام سكتش هو بالتأكيد خالِِ من أيّ إجهاد. سكتش "رمزي" من السهل كثيرََا اللعب بحجم الصور والنصوص والألوان وإجراء التجارب عليها باستخدام الرموز في نفس الوقت، فالرموز تجعل الحياة أسهل بكثير. حتى بين القوالب، تعمل الرموز (symbols) بالشكل المرغوب فيه وأفضل. وبالتالي، إذا كنت، على سبيل المثال، ترغب في استخدام نفس التخطيط في منشور قائمة صفحات المدونة، فكل ما عليك فعله هو نسخ مثيل الرمز هناك، وستتم مزامنة التغييرات التي تجريها تلقائيًا في كلِِّ من الجهات. إذا كنت تريد إضافة محتوى حقيقي، مثل عنوان أو صورة، فما عليك القيام به هو النقر بزر الماوس الأيمن وإزالة الكائن من الرمز الأول. أليس الأمر رائعََا ؟ بالتأكيد، يمكن لرموز سكتش أن تسهّل سير عملك وتوفر عليك الكثير من الوقت. الأزرار الديناميكية هي واحدة من أبرز ميزات سكتش أزرار سكتش الديناميكية على الرغم من أن الرموز رائعة بالنسبة لقوائم المنتجات ومنشورات المدونات، إلا أن إضافات الأزرار الديناميكية تعدّ رائعة بالنسبة للأزرار الموجودة في الصفحة. صنعت هذه الإضافات لخلق رمز للزر في المقام الأول. ومع ذلك، يتم ضبط حشوة الجوانب تلقائيًا بناءً على طول النص. سيوفر لك هذا الكثير من الوقت في العمل على التصميم الخاص بك، خاصةً إذا كنت تعمل على صفحات بها عدّة أزرار. ما عليك القيام به هو مجرد إنشاء طبقة نصية تحمل نص الزر الأولي، واختر الإضافة، ثم اكبس Command + J. النتيجة؟ زر ديناميكي يمكنك استخدامه مرارًا وتكرارًا خلال التصميم إذا قمت بتغيير نص الزر. إضافة Day Player سيكون من السهل عليك ملء العناصر النائبة من خدمات الصور المختلفة إذا كنت تستخدم إضافة Day Player. وسيكون القيام بذلك أسهل بكثير إذا كنت تستخدم Lorem Pixel للحصول على الصور التي تريدها. اختر الإضافة وخدمة الصورة التي تريدها، وقم بتعديل خيارات العنصر النائب، وأدخله في مجموعة كائنات المنتج. تخيل مدى سهولة تنفيذ المهمة مع هذه الإضافة مقارنةً بالبحث عن الصول للعناصر النائبة على الويب. إضافة Content Generator إضافة Content Generator هي ما تحتاج إليه إذا كنت ترغب في إضافة المزيد من محتوى الحشو. باستخدام هذا البرنامج المساعد، كل ما عليك فعله هو تحديد صناديق العناصر النائبة للصورة لكل عضو في الفريق وتحديد صورة شخصية لذكرِِ كانت أو أنثى في خيارات الإضافة. الجيل المدمج من القوائم النقطية من بين الميزات الأخرى المثيرة للإعجاب الجيل المدمج من القوائم المرتّبة وغير المرتّبة. يمكننا اعتبارها إحدى الميزات المهمة غير الموجودة في العديد من برامج التصميم، بما في ذلك في فوتوشوب. مع هذه الميزة، ليست هناك حاجة لك لإخضاع نفسك لعملية مملّة وتستغرق وقتًا طويلاً لإنشاء نصّ منسّق جيدًا ويبدو رائعًا في المتصفح. دعم لوحات فنية متعددة على لوحة قماشية واحدة باستخدام فوتوشوب، ستحتاج إلى إنشاء العديد من ملفات PSD والتبديل بين النوافذ أثناء العمل على العديد من النماذج المحاكية. لحسن الحظ، لدى سكتش ميزة تدعم العديد من اللوحات الفنية على لوحة قماشية واحدة. وبالتالي، يمكنك رؤية نماذج سطح المكتب والجهاز اللوحي والأجهزة المحمولة في واجهة واحدة فقط. وهذا يتيح لك العمل على جميع النماذج المحاكية في نفس الوقت. إذا كنت تقوم بتعديل الرموز، أو الألوان أو أنماط النص، فيمكنك أن تلاحظ تأثير التغييرات التي تجريها على جميع النماذج المحاكية. مع هذا، يمكنك بسهولة أن تدرك تدفق المحتوى والاتصالات التي تحدث بين الأجهزة المختلفة. تصدير الأصول "التصدير مهمّة شائعة، ولكن سكتش 3 يحسّن سير هذه المهمّة من خلال السماح لك بتحديد مستويات دقة مختلفة للمكوّنات المقطوعة. هذا يعني أنه يمكنك حفظ الشريحة نفسها في العديد من الملفات التي تدعم دقة شاشات مختلفة وذلك في آن واحد. " جيوف غراهام Geoff Graham أحد الأشياء الأكثر إثارة للاهتمام حول سكتش هو أنّه يجعل تصدير جميع الملفّات أسهل بكثير. على سبيل المثال، إذا كنت ترغب في تصدير أزرار الأيقونات المستخدمة في التنقل عبر الأجهزة المحمولة، فكل ما عليك فعله هو النقر فوق مجموعة من الطبقات والنقر فوق الزر "تصدير" الموجود في الركن الأيمن السفلي. يمكنك بعد ذلك حفظ هذه الرموز للويب إما بتنسيق SVG أو PNG. تتضمّن النافدة الظاهرة كل ما يتعلق بعرض الأصول على أجهزة مختلفة. إضافة Sketch Style Inventory يغدو إنشاء قائمة بجميع أكواد HEX الخاصة بالألوان والحوامل المستخدمة في الصفحة أمرًا سهلاً باستخدام إضافة Sketch Style Inventory. ومع ذلك، فإنّ هذا لا يقتصرعلى الألوان فقط، بل يمكنك استخدامه في أنماط النص أيضًا. لكلتا الأداتين إيجابيّات وسلبيّات سكتش مقابل فوتوشوب: من هو الأفضل بالنسبة إليك؟ إذََا ما الذي يجب عليك اختياره: أدوبي فوتوشوب المشهور أو سكتش الذي لا يمكن إيقافه؟ فيما يلي قائمة بالفرق الأساسي بين هذين البرنامجين: التصيير (rendering): من حيث التصيير، فإنّ طريقة عرض سكتش قريب من الويب. ولكن لسوء الحظ، لا يمكن قول الشيء نفسه عن فوتوشوب. الاختصارات: يفوز فوتوشوب بهذه الجولة لأنه يحتوي على الكثير من الاختصارات. يفتقر سكتش بوضوح للاختصارات التي يمكن أن تسهم في تسهيل العمل أكثر. المستندات: يحتوي سكتش على مستندات صغيرة بينما مستندات فوتوشوب كبيرة. فحجم ملف المستند الصغير هو ميزة مضمونة في التطبيق المتّجهية. نظرًا لأن معظم الملفات التي تم إنشاؤها باستخدام سكتش أقل من 4 ميجابايت، فإن هذه الملفات سهلة على محرك الأقراص الثابتة وتحميلها أو العمل عليها سريع أيضََا. المكتبات: يحتوي فوتوشوب على مكتبة واحدة، بينما لا يحتوي سكتش على أية واحدة. الشبكات: يحتوي سكتش على شبكات مدمجة، بينما يجب عليك إنشاء شبكات خاصة بك في فوتوشوب. التعامل مع الألوان: لدى أدوبي فوتوشوب إدارة ألوان ممتازة، بينما نجد نقيض ذلك بتطبيق سكتش. التطبيق: تربح سكتش هذه الجولة مرة أخرى لأنها تتيح تطبيقًا أسرع مقارنةً بفوتوشوب. الرموز والكائنات: تُنسب الرموز لسكتش والكائنات لفوتوشوب. رغم أنه يبدو تعادلََا هذه المرة إلّا أنّ رموز سكتش تأتي بنفس الحجم بينما تأتي كائنات فوتوشوب بأحجام مختلفة. ألواح الرسم: يتميّز سكتش بميزة واضحة لأنه يأتي مع ألواح رسم متعددة. هذا على عكس اللوحة الفنية الفردية في فوتوشوب. القياس: من الواضح أن سكتش يفوز بهذه الميزة. فباستخدام أداة التحديد، تقوم بفتح لوحة المعلومات، ورسم المسافة بين كائنين، ويمكنك بالفعل التحقق من النتائج. هذا، في الواقع، مقياس متقدم لا يمكن إلا لسكتش أن يقدّمه. إنّه لمن الواضح أن منهج سكتش ليس فقط أكثر مباشرة ولكنه أسهل أيضًا. ولكن إذا كنت تستخدم فوتوشوب، فهذا غير ممكن لأنّ المسطرة التي يقدّمها مرهِقة. تكبير شاشة العرض: يفوز فوتوشوب بهذه الجولة تذهب لأنه يحتوي على مستويات متعددة من التكبير. أمّا سكتش فلديه مستوى واحد فقط. التغيير والتبديل: بفضل التغيير المحافظ وغير المدمّر، تتربع سكتش القمّة مرة أخرى، فكل ما عليك القيام به هو إدخال قياس الشعاع، والكل سيكون على ما يرام. أمّا في حالة فوتوشوب، فأنت تحتاج إلى إدخال الشعاع وإعادة رسم الشكل الخاص بك، وتحتاج أيضا إلى التأكد من نسخ الأبعاد بدقّة. الحجم: إنّ سكتش خفيف الحجم موازنة بفوتوشوب ثقيل الحجم. قدرات تحرير الصور: حسنًا، هذه الجولة تذهب إلى برنامج فوتوشوب لأنه أُنشئ في المقام الأول لهذا الغرض. ومع ذلك ورغم خسارتها، فإن سكتش تعوّض عن ذلك بتوفيرها لميزات من شأنها تقديم تصميمات رقمية جيدّة. سهولة الاستخدام: سكتش هو تطبيق حصري فقط لنظام التشغيل ماك. ومع ذلك، يمكن استخدام فوتوشوب لكل من مستخدمي الماك والويندوز. سكتش: تهديد حقيقي للفوتوشوب "أنا مقتنع بأن سكتش، في الوقت الحالي، هو أفضل أداة لتصميم المواقع وواجهات المستخدم والتطبيقات." براين هوف Brian Hoff يبدو وبشكل واضح، أنّه مع العديد من مزايا سكتش، فقد انتصر هذا الأخير على فوتوشوب. هل هذا يعني أنه يجب عليك أن تستعمل سكتش بدلا من فوتوشوب، لا سيما إذا كنت مجرد مبتدئ في مجال تصميم الويب؟ حسنًا، سيكون هذا سؤالًا صعبًا للغاية. صحيح أن العديد من المصمّمين يقومون بالفعل بالانتقال إلى سكتش لأنه، من ناحية، لا يكلّف سوى 99 دولارًا. ومن ناحية أخرى، يمكن أن يجعلك Creative Cloud تنفق 49.99 دولارًا للاشتراك الشهريّ. يلعب الولاء دورًا كبيرًا في استمرار فوتوشوب سكتش تطبيق رائع، ولكن ما زال العديد مخلصين للفوتوشوب "أستطيع أن أرى المشاكل التي تحدث أثناء تبادل الملفات بين المصممين إذا لم ينتقل أحدهم إلى سكتش. ومع ذلك فإن جمال عالم الويب هو أنه يمكنك إنشاء الأصول التي تريدها، لذلك ومن هذا المنظور، باستطاعة سكتش أن يقوم بإخراج ملفات PNG أو أي نوع من الملفات مثلما يفعل فوتوشوب. " خوي فان Khoi Vin ومع ذلك، في هذه المرحلة، يبدو أن الانتقال الكامل إلى سكتش غير مرجح. وذلك لسبب واحد، وهو الناس، فهم بوجه عام يقاومون التغيير، بغض النظر عن مدى عظمة هذا التغيير. لسوء الحظ، فإن العديد من الشركات غير مستعدّة للتخلص من اعتيادها وراحتها في استخدام فوتوشوب لتصميم مشاريع واجهة المستخدم. يتطلب التبديل إلى سكتش وقتًا لكل فرد في الفريق لفهم كيفية عمل هذا التطبيق حتى يصبح في النهاية مريحًا في استخدامه. يمكننا القول أنه لا يزال من الآمن متابعة استخدام فوتوشوب. بمجرد أن تتقن استخدام فوتوشوب، يمكنك البدء بعد ذلك في تعلم سكتش. بعد كل شيء، ستقع على عاتقك مسؤولية تعلم أدوات جديدة باستمرار والتكيف مع استخدامها كلما كان ذلك ضروريًا. نأمل حقًا أن تكون لديك فكرة أفضل عن كلتا الأداتين الرائعتين، والآن نريد مشاركة بعض أوراق الغش الرائعة. خلاصة ما رأيك إذََا في فوتوشوب وسكتش، أيّهما تستخدم وما هي تجربتك معهم؟ هل جرّبت أيّ من تطبيقات الويب؟ شارك معنا رأيك أو تجربتك في قسم التعليقات. ترجمة -وبتصرف- للمقال Sketch vs Photoshop: 5 Expert Designers Share Their Thoughts لصاحبه Vincent Alocada

هذا خلاصة التصميم بمساعدة المطور الخاص بك، درس إلكتروني من InVision للكاتب كيفين توماسو. يدور التصميم من أجل التطوير حول إيجاد الحل الذي ينتج أفضل تجربة ممكنة للمستخدم بأقل عدد من الأجزاء المتحركة. لا تنتهي مشاريع تطبيقات الويب في جلسة واحدة؛ فهي تحتاج للنمو، والتطور والتغيير - يفضل بسرعة في بعض الأحيان. ويجب على المصممين عند اتخاذ القرار، وضع كيفية بناء التصميم في الحسبان. فالتصميم الذي يبدو رائعًا للمستخدم ولكنه يتعطل في كل مرة يريد فيها المطور أن يحدث تغييرًا، لا يعد تصميمًا - واجهة جميلة مع مشاكل كامنة خلفها. قد يبدو تصميمك جيدًا من الخارج، ولكن الشيفرة المستخدمة في إنشائه قد تكون في حالة فوضى. إن التصميم بمساعدة المطور يعني العمل ضمن فريق، وليس مجرد إكمال خطوة في الطريق. الهدف النهائي هو إنشاء منتج عظيم ليكون عبارة عن تجميع التصميم مع عملية التطوير. يمكن أن يحسن التصميم مع مدخلات المطور وشيفرة يمكن كتابتها بمساعدة المصمم. العمل معًا وفهم من أين قد جئتما، هو السبيل لتحقيق الأهداف والتغلب على العقبات بشكل كبير. "التصميم بمساعدة المطور يعني العمل ضمن فريق". أيضًا يُعنَى التصميم مع التطوير بمعرفة الأهداف النهائية واتخاذ قرارات صعبة من خلال المعرفة الواسعة بالصورة الكلية. عندما تستطيع النظر للغابة من خلال الأشجار، فإنك تستطيع الوصول إلى وجهتك بشكلٍ أفضل. وفي هذه الحالة تكون الوجهة عبارة عن منتجٍ رائع. ما الذي لا يعبر عن التصميم مع التطوير هذا ليس دعوة أو عذر لانتقاد المطور أو إعطاء تغذية راجعة. ولا يشير أيضًا إلى أن عملهم أهم بأي طريقة. لا يوجد للمنتج مكانًا في حياة المستخدم بدون تصميم، تمامًا كعدم إمكانية وجوده قبل عمل شيفرة له. ما يجذب المستخدمين ويبقيهم في موقعك هو التصميم وتجربة المنتج. فبدون تصميمٍ جيد، ستأمل أفضل المواقع والتطبيقات أن تنجح بغض النظر عن مظهرها (أنا أنظر إليك، كرايجلست). والحقيقة هي أن التصميم يحدث أولًا، ولذلك فإن معرفة الأدوات والتقنيات التي ستستخدم لإخراج تصميمك، تملك تأثيرًا أكبر من التأثير في الحالة العكسية. لا يضيف إعادة تعديل الصور من خلال ضبط levels & curves واستخدام أداة burn في برنامج الفوتوشوب، الكثير للمطور؛ لأنه في الوقت الذي ينتهون فيه منها، سيكون عليهم إضافة الصورة النهائية للموقع. ومن ناحيةٍ أخرى، إذا كنت تعرف أفضل الطرق لحفظ الصورة وتصغير حجم الملف ورفع الأداء، فإن منتجك سيتحسن. يمكنك التفكير بمساعدتهم في إنجاز عملهم بينما تعمل، ولكن العكس لا يعمل دائمًا هنا. أنت هو المصمم. ستكون محط اهتمام الجميع في حال كنت تعرف القليل حول كيفية قيام طاقم البناء بعمله. اتبع هذه الخطوات البسيطة لتصبح مصممًا رائعًا يُعنَى هذا الدرس التعليمي بمساعدتك على التصميم مع وضع التطوير في الذهن. أما بالنسبة لما لم يتم تناوله هنا، فيعني أن عملك الأول والرئيسي هو التصميم مع وضع المستخدمين في الذهن. أنت تعرف بهذا ولست بحاجة لسماعه مني، أنت رائعٌ في هذا. الهدف هو جعلك أفضل في الصورة الكبرى، بحيث يتحسن المنتج مع كل قرار تتخذه بطريقةٍ أو بأخرى. قائمة التحقق التي تمر من خلالها عندما تواجه أي قرار في التصميم هي كالتالي: عندما يكون فيها فائدة واضحة للمستخدم، افعلها. لا تدع أي مطور يخرجك منها إذا كانت توفر تجربةً أفضل للمستخدم بشكلٍ مؤكد. مثلًا: إذا احتاجت رسالة خطأ في موقعك لتكون بألوانٍ مختلفة، وكلماتٍ محددة وظهورها في الداخل مع عناصرها لتجنب مغادرة المستخدم بدلًا من رسالةٍ في أعلى الصفحة، افعلها. يستحق نجاح منتجك هذا العمل الإضافي في البداية. يمكن كتابة الشيفرة بشكل أفضل بمساعدة المصمم. اسأل حول كيفية إنجاز هذا. استخدم أي حقائق ومصادر ممكنة لتوضيح موقعك، ولكن لا تجعل المستخدم يعاني لأن هذا سيكون أكثر تحديًا عند التطوير. تحقق مما إذا كان هناك طريقة أخرى لخلق نفس التأثير من أجل مساعدة المستخدم وقاعدة الشيفرة. ففي الكثير من الأحيان، يكون هناك مجال لإنجاز ما تريده بطريقةٍ أخرى أسهل لا تسبب الفوضى. اطلب مدخلات المطورين، حيث أن منطقهم وعقلهم يمكن أن يخرج بحلٍ أفضل من الذي قد خططت له، ويعمل لصالح المستخدم وصالحهم أيضًا. مثلًا: يمكن تصنيف رسائل الأخطاء ووضع شيفرة الألوان في برنامج قابل لإعادة الاستخدام. وبدلًا من وجود رسالة مخصصة ولون لكل إدخال كما هو في المثال السابق، قد يكون هناك 3 فئات من الرسائل، كل واحدة بلون. يسمح هذا للمطورين بترتيب وإعادة استخدام الشيفرة بشكل أفضل، بينما يتواصل بوضوح مع المستخدم. عندما يحدث جدال حول صنف، أو عنصر في التصميم أو ميزة تخدم المستخدم، اختر الطريق الذي يجعل الشيفرة قابلة لإعادة الاستخدام، أو ثابتًا أو نظيفًا. هل يمكن لرسائلك التحذيرية استخدام اللون الأصفر المشترك بدلًا من اللون البرتقالي الاعتيادي؟ ينقل كل منهما طبيعة التحذير للمستخدم، ولكن استخدام لون مخزن وثابت يقلل من التعقيدات ويجعل الشيفرة أصغر حجمًا. ترجمة ـوبتصرف- للمقال What does it mean to design for development لكاتبه Kevin Tomasso

يقدم ووردبريس لريادة الأعمال الرقمية منصات رائعة لبيع السلع والخدمات. إن وظائف ووردبريس السهلة نسبيًا تجعله أداة رائعة لإنشاء عمل تجاري على الإنترنت. توجد الآن الكثير من الخدمات التي يمكنك استخدام ووردبريس من خلالها لإنشاء موقع تجاري. لكن هناك لاعبين أساسيين يهيمنان على تلك المواقع؛ إنهما شوبيفاي. وووكومرس. المرونة إن المرونة من المسائل المهمة للغاية في التجارة الإلكترونية. عليك أيضًا إضافة بعض الوظائف لموقعك لتحسين أدائه. بالطبع تريد أن تزود موقعك بإمكانات مثل التدوين. لماذا تعتبر المدونات هامة بالنسبة لموقع تجارة إلكترونية؟ الإجابة بسيطة: لأن المحتوى له تأثيرٌ كبير. وهذا يجعل التدوين مرشحًا تنافسيًا وقادرًا على البقاء في مستقبل التسويق. إليك بعض الأسباب التي تجعل التدوين وسيلةً للتسويق لمشروعٍ تجاريٍ على الإنترنت: التدوين ومشاركة المحتوى يرفع نسبة المشاهدة. (المزيد من المشاهدة = المزيد من جذب العملاء المحتملين) المنشورات التي تحصل على ترتيب أعلى في محركات البحث عادة ما تجلب الكثير من المشاهدة الطبيعية المدونة تضفي قوةً على الاسم التجاري. تنشئ المدونات مجتمعات لها اهتمامات مشتركة وتستطيع جذب مجموعة من العملاء لطرح تساؤلاتهم واستفساراتهم. التدوين وسيلة غير مباشرة للبيع. من حيث المرونة وإمكانات التدوين، تتفوق ووكومرس على شوبيفاي لأن الأخيرة صممت للتجارة الإلكترونية في الأساس، ولم تصمم من أجل المدونين. لذلك، ليس بها المزايا التي يستطيع نظام إدارة محتوى للمدونات تقديمها. بالإضافة إلى ذلك، أصبحت ووكومرس وسيلة للتدوين لأنها تستخدم كإضافة لووردبريس، التي هي أفضل نظام إدارة محتوى اليوم. لهذا السبب، يمكن استخدامه مع إضافات ووردبريس، مما يحسن من أداء للمتجر الإلكتروني. وبما أن 22.5 في المئة من المواقع اليوم تستخدم ووردبريس، سيجده المستخدم سهل الاستعمال بسبب انتشار الدورات التعليمية والأدلة الإرشادية التي تتناول تطوير وحل مشكلات مواقع ووردبريس. من مميزات استضافة ووردبريس لووكومرس أنها تجمع بين قوة أدوات إدارة المتجر الخاصة بووكومرس ومزايا لوحة تحكم ووردبريس البسيطة. ببساطة، فيما يتعلق بالتدوين على موقعك، تتفوق ووكومرس على شوبيفاي. الأسعار لا شك أن أحد أكبر الاهتمامات الآن هو التسعير. أليس كذلك؟ لن نخوض نقاش كيف تؤثر الأسعار على اختيار المستخدم، لكن ببساطة، أن تنفق أقل وتربح أكثر أفضل من أن تنفق أكثر وتربح أقل. لهذا السبب يريد المستخدمون أن تكون تكلفة الصفقة أقل ما يمكن. لنعقد مقارنة بين أسعار الخدمتين: شوبيفاي تبدأ خدمة شوبيفاي من 29 دولارًا شهريًا مقابل حصولك على: سعة تخزين 1 جيجابايت، عدد لا نهائي من المنتجات دعم فني على مدار الساعة 2% رسوم المعاملة هذا يشمل خدمة الاستضافة التي يوفرها شوبيفاي، مما يعني أنك لن تحتاج للاستعانة بأي خدمة استضافة أخرى. بعد ذلك، ستحتاج بالطبع إلى إنشاء قالب. تبحث على متجر إليكتروني وتختار القالب الذي تريده. لنقل أنه مجاني، أي أن التكلفة تساوي صفر. ستحتاج أيضًا إلى إضافات أساسية لتشغيل موقعك. إليك بضع إضافات أساسية: تسجيل الدخول عن طريق مواقع التواصل (9 دولارات شهريًا) محدد مواقع المتاجر (59.99 دوﻻرًا شهريًا) الدردشة الحية (2.99 دولارات شهريًا) في المجمل، إذا استخدمت قالبًا مجانيًا وبعض الإضافات الأساسية المدفوعة سيكلفك ذلك نحو 100.98 دولار شهريًا بالإضافة إلى رسوم المعاملات التي ستتم خلال الشهر. ووكومرس بما أن ووكومرس لا توفر خدمة الاستضافة، ستضطر إلى تسجيل النطاق بنفسك والعثور على خدمة استضافة جيدة. في المتوسط، ستنفق نحو 10 دولارات شهريًا كحدٍ أقصى لاستضافة تعطيك عدد نطاقاتٍ غير محدودٍ، وسعة استخدامٍ وتخزينٍ غير محدودة. (شوبيفاي يعطيك 1 جيجابايت فقط مقابل السعر الموضح أعلاه). أما بالنسبة للنطاق، ستنفق على الأرجح 10 دولارات أخرى مقابل حجز نطاق لمدة عام. وهكذا، تكون قد أنفقت 20 دولارًا في أول شهرٍ. بما أن ووردبريس و ووكومرس مجانيين، فلن تضطر إلى إنفاق المال على نظام إدارة المحتوى. ولن تضطر إلى إنفاق المال على القالب أيضًا، فهو أيضًا مجاني. لكنك تستطيع أن تشتري خدمة مميزة إذا أردت ذلك. كما هو الحال مع شوبيفاي، ستحتاج إلى إضافات التجارة الإلكترونية الأساسية لتشغيل موقعك. لنعقد مقارنة بين الأسعار لنفس الإضافات التي استخدمناها: تسجيل الدخول عن طريق مواقع التواصل (28 دولارات) محدد مواقع المتاجر (22 دوﻻرًا) الدردشة الحية (11 دولارات) إذا حسبنا التكلفة الكلية، ستجد أنك ستدفع 81 دولارًا في الشهر الأول. بما أن الإضافات التي اشتريتَها ليست بنظام الاشتراك الشهري، ستستطيع استخدامها دون أن تقلق بشأن المصروفات الشهرية. في الشهور التالية، ستكون تكلفة المشروع هي تكلفة الاستضافة فقط. على المدى البعيد، يعتبر ووكومرس أقل كلفة من شوبيفاي. ملاحظة: وُضعَت هذه الأسعار أثناء ترجمة المقال وقد تختلف أثناء قراءتك له. المساعدة والدعم الفني الدعم الفني من أهم سمات الخدمات المقدمة عبر الإنترنت. فكل حين تقابلك مشكلاتٌ أو ثغراتٌ أمنيةٌ محتملةٌ، لذلك أنت تحتاج إلى مساعدةٍ جيدةٍ ودعمٍ فنيٍ قويٍ. في هذا المجال، يتفوق شوبيفاي على ووكومرس. لأن شوبيفاي هو بالأساس حل متكامل، لن تعاني كثيرًا في البحث عن المساعدة حين تحتاجها. كل شيء منظَّم مركزيًا في إطار نظام واحد. على العكس من ووكومرس، عليك تحدِّد سبب المشكلة قبل أي شيء. بعد ذلك، تتواصل مع المطوِّر المسؤول عن الإضافة أو خدمة الاستضافة التي تبدو أنها تسببت في المشكلة، وفتح تذكرة والتحدث إليه من أجل إصلاح موقعك. من ناحية أخرى، قد يتسبب استخدام ووكومرس في بعض الصعوبات في المستقبل، فلن تتمكن من تشخيص أخطاء موقعك دون النظر إلى النواحي الأخرى التي يمتلكها. بالإضافة إلى ذلك، ولأن ووكومرس و ووردبريس خدمتان مجانيّتان، ليس من المتوقع أن يكون الدعم الفني عالي المستوى. حجم الأعمال لا شك أن حجم أعمالك أيضًا له أهميته، خاصة إذا كنت على وشك الاختيار بين شوبيفاي و ووكومرس. يجب أن تكون القدرة على تصميم المتجر الإلكتروني ليكون مناسبًا لحجم أعمالك من أولوياتك. في هذه النقطة، يتميز ووكومرس. مع نطاق أسعار شوبيفاي، من الملاحظ أن معظم خطط الأسعار وضعت لتناسب القليل من المواقع. لكن إن كان موقعك سيستضاف عبر ووردبريس وووكومرس، ستستطيع أن تنشئ موقعك دون القلق بشأن التوسع في الحجم أو القيمة. التباين قد يتراوح من الأعمال صغيرة الحجم إلى الأعمال ضخمة الحجم. أيهما أختار؟ بعد تقديم كل تلك الحجج، ليس من الصعب أن ترى أن ووكومرس يتفوق على شوبيفاي، ويعتبر المنصة الأفضل على الإطلاق للتجارة الإلكترونية. الميزة الأهم التي تميز ووكومرس على شوبيفاي هي المرونة، وقابليته للاستخدام مع مزايا ووردبريس الأخرى. وهو أيضًا يساعد على ظهور موقعك في ترتيب أعلى على محركات البحث. كما تستطيع كذلك إجراء تعديلات على مظهر موقعك. النقطة الأكثر أهمية هنا هي أن ووكومرس يقدم قيمة مناسبة للتكلفة. بجهد قليل وتكلفة معقولة يستطيع ووكومرس أن يتفوق على أي متجر إلكتروني لشوبيفاي. فإذا كنت ستختار منصة تجارة إلكترونية، ننصحك باستخدام ووكومرس لأنها الأرخص، والأكثر قابلية للتوسع من منافستها. كذلك إذا كنت تبحث عن الفوائد طويلة المدى، أعتقد أن ووكومرس تكتسب شعبيةً متزايدةً. ترجمة -وبتصرف- للمقال Shopify vs Woocommerce

ليست جميع المواقع الإلكترونية صالحةً لأن تستمر بالقوالب التي صممت عليها لوقتٍ طويلٍ جدًا، وهنا لابد من التفكير بشكلٍ أوسعٍ بخصوص ما الذي ينبغي عمله. سيتطرق المقال لشرح طريقة إدارة عملية إعادة التصميم للمواقع الإلكترونية القائمة بدءًا بالحديث عن الطرق الخاطئة التي تتبعها المؤسسات أثناء عملية إعادة تصميم المواقع الإلكترونية. لماذا تخطئ المؤسسات في إدارة عملية إعادة تصميم المواقع الإلكترونية القائمة عادةً ما تبدأ عملية إعادة تصميم المواقع الإلكترونية باستنتاجٍ شخصيٍ لفردٍ ضمن تلك المؤسسة بضرورة إعادة التصميم بغض النظر عن السبب. مع ذلك، نادرًا ما يعتمد هذا الاستنتاج على أي بياناتٍ محددة. عادةً ما يكون السبب وراء تلك الخطوة هو الشعور بأن التصميم قد أصبح قديمًا أو أن التكنولوجيا غير مناسبة للغرض. وذلك لأن المؤسسات ليس لديها أي فكرةٍ واضحةٍ عن مؤشرات الأداء الرئيسية لموقعها. وما يثير القلق أكثر أن قرار إعادة التصميم غالبًا ما يؤدي إلى التخلص من الموقع بأكمله والبدء من جديد. ويبدو أن هناك محاولةً صغيرةً لعزل المشكلة وحلها. بعد ذلك، يجتمع مختلف أصحاب المصلحة لتحديد ما يحتاجه الموقع الجديد من حيث الأداء الوظيفي. مرةً أخرى، نادرًا ما يعتمد أصحاب المصلحة على أساسٍ قويٍّ من البيانات أو تحليل احتياجات المستخدمين. إنهم يتخذون قرارهم بناءً على ملاحظاتهم و استنتاجاتهم. فقط بمجرد اتخاذ هذه القرارات، تجلب المؤسسة خبراء رقميين. غالبًا ما يكون ذلك في صورة تكليف من وكالة خارجية، ولكن يمكن أن يشمل أيضًا نقل الملخصات إلى فريق عملٍ داخليٍ يُعامل غالبًا على أنه ليس أكثر من قسم خدمات يُتوقع منه أن ينشئ الموقع. في كلا الحالتين، تُحدد مواصفات إعادة تصميم الموقع الحالي دون أي مدخلاتٍ من أولئك الذين يفهمون معظم الإمكانات والمحددات الرقمية. في هذه المرحلة، تُعطى عروض الأسعار وتُعيّن الجداول الزمنية مع مناقشاتٍ محدودةٍ فقط حول ما إذا كان المشروع ضروريًا أم أن أهدافه ونطاقه صحيح. بمجرد قبول السعر يبدأ العمل ويتمثل الخطر في نطاق الزحف كما وأن المواعيد النهائية غير قابلةٍ للتأجيل. لا يترك ذلك أي مجال في إعادة تصميم موقع ويب حالي للتعلم والتكيف أثناء مرحلة البناء. نعم، قد يتم إجراء بعض التعديلات الطفيفة على طول الطريق، ولكن مع قيود المواصفات والمواعيد الزمنية والميزانية المحددة، لن يحدث تغييرٌ حقيقيٌ كبير. مرةً أخرى يتم تجاهل تعليقات المستخدمين إلى حدٍ كبير. والنتيجة هي أن المنظمة ليس لديها وسيلةً لمعرفة ما إذا كان كل هذا الجهد والمال يستحق العناء حتى بعد إطلاق الموقع. عندها فقط سيعرفون ما إذا كان موقع الويب الجديد يعمل بشكلٍ أفضل من الموقع القديم، على افتراض أن لديهم أي مقاييس لقياس نجاحه. والأسوأ من ذلك أنه بمجرد إطلاق موقع الويب، فإن الأموال تجف، وينتقل الأشخاص، مما يعني أنه لا توجد موارد لإصلاح أي مشكلاتٍ رئيسيةٍ قد تطرأ. نعم، سيكون هناك بعض الصيانة البسيطة، لكن هذا كل شيء. كيف يمكن إذن تجنب هذه المشاكل؟ 10 خطوات لإعادة التصميم الناجح لموقع ويب موجود إن مفتاح الحل لإعادة التصميم الناجح لموقع ويب حالي هو إدراك أنه لا ينبغي تشغيل المشروعات الرقمية مثل المشروعات التقليدية. مع التكنولوجيا الرقمية، من السهل التعرف على ما يصلح وما لا يصلح، وكذلك التكيف بسرعةٍ مع ما نتعلمه. مع وضع ذلك في عين الاعتبار، إليك الخطوات العشر لاتباعها عند إعادة تصميم موقع ويب موجود. امتلك أهدافًا واضحة قبل أن تفكر في إعادة تصميم موقع ويب حالي، أنشئ رؤيةً واضحةً لما سيبدو عليه النجاح. بدون أهدافٍ واضحة، لن تتوفر لديك أي فكرةٍ عما إذا كنت بحاجةٍ لإجراء إعادة التصميم أو ما الذي يجب على الموقع الجديد تحقيقه. ستحتاج إلى جعل هذه الأهداف قابلةً للقياس حتى تتمكن من تقييم الموقع الحالي وإبلاغ الاختبارات أثناء تطوير الموقع الجديد. من الجيد التركيز على ثلاثة مجالاتٍ أساسية: مقاييس معدل التحويل. مقاييس المشاركة. مقاييس قابلية الاستخدام. بمجرد أن أتمكن من التعبير بوضوحٍ عن أهداف عمل موكلي من حيث المقاييس القابلة للقياس، أقوم بتحويل انتباهي عما يريده العمل إلى ما يحتاجه المستخدم. أجري بحث المستخدم الخاص بك لتشجيع الأشخاص على التفاعل مع موقعٍ ما فأنت بحاجةٍ إلى معرفتهم. ما هي التساؤلات التي تنتابهم، وما هي المهام التي يريدون إنهائها وكيف يودّون التفاعل مع موقع العميل. هذا يعني أنه من المهم أن تُجري عملية بحث المستخدم قبل أن تبدأ التفكير في مواصفات المشروع. ليس من المنطق أن تحدد المحتوى والوظائف قبل أن تتعرف على نوعية المستخدمين ممن هم بحاجتها. تحقق من الموقع الإلكتروني الموجود خذ مؤشرات الأداء الرئيسية وأبحاث المستخدم التي عملت عليها مع العميل واستخدمها لتقييم الموقع الحالي. بإمكانك أيضًأ أن تجري بعض اختبارات قابلية الاستخدام على موقع الويب أيضًا وتطلع في بعض الأحيان إلى المنافسة للحصول على إطارٍ مرجعي. القيام بذلك يوفر لك رؤيةً أكثر موضوعيةٍ لحالة الموقع، بدلًا من مجرد إلقاء عبء إعادة تصميمه على كاهل العميل. حتى لو كان من الواضح أن إعادة التصميم مطلوبة وواجبةً لا تزال هذه الخطوة مستحسنة. قد يكون العميل مخطئًأ، وحتى لو لم يكن الأمر كذلك، فإن تقييم موقع الويب الحالي سيُساعد في التأكد من حجم التصميم المطلوب إعادة النظر فيه. حدد ما الذي من الممكن الاحتفاظ به (إن وُجد) ليس من الحكيم أن ترجع إلى نقطة الصفر، بإمكانك الاستفادة من تصميم الموقع الحالي وتجديده. فإذا كان محتوى الموقع جيدًا فاحفظه، وإذا كانت منصة التكنولوجيا تقوم بمهمتها فلا تغيرها لمجرد أن المطورين يرغبون بلعبة جديدة لامعة. الأهم من ذلك كله ألا تبدأ بتصميم جديد كليًا إذا كان بإمكانك تطوير التصميم الحالي. هذا ليس مجرد اعتبارٍ نقدي. هذا أيضًا لأن المستخدمين الحاليين لا يستجيبون جيدًا عند إجراء التغييرات. يمكنك كسر النموذج العقلي للموقع وبالتالي زيادة الحمل المعرفي. إذا كان ذلك ممكنًا فمن الأفضل تجنب ذلك. من المهم أيضًا التأكد من عدم وجود سببٍ تحتاجه لتغيير كل شيءٍ دفعةً واحدة. في بعض الأحيان يكون من السهل ترقية موقع الويب على مراحل. يجب أن تتخذ هذا الحكم على أساس كل حالةٍ على حدة وهنا لا توجد قواعد صارمةٍ وسريعة. ابدأ بالمحتوى يبدو أن المحتوى هو الجزء الأكثر إهمالًا في أي إعادة تصميم لموقع ويب حالي. غالبًا ما يكون العملاء غير راغبين في دفع أموال لأحد المحترفين لإنشاء محتواهم، وغالبًا ما يكون هذا هو العنصر الأخير في إعادة تصميم موقع ويب موجود يعالجه العميل. يعد هذا الموقف تجاه المحتوى خطيرًا لأنه السبب الذي يجعل المستخدمين يزورون موقع الويب الخاص بك وليس بدافع التصميم أو التكنولوجيا. أيضًا من المستحيل إنشاء واجهة مستخدمٍ جذابة لموقع ويب دون فهم المحتوى الذي سيدعمه. لذلك ابدأ عملية إعادة تصميم موقع ويب موجود بالمحتوى وتأكد دائمًا من أن المحتوى يبدأ باحتياجات المستخدم وليس فقط ما ترغب الشركة في قوله عن نفسها. لا تفكر في التصميم إلى حين حصولك على المسودة الأولى لبعض المحتوى على الأقل، ستحتاج أيضًا إلى مخططٍ تفصيليٍ لجميع المحتويات التي تحتاج إلى إنشاء من أجل هيكلة بنية المعلومات. العمل على هيكلة المعلومات بمجرد فهم المحتوى الذي يحتاج إلى إنشاء، ابدأ في معالجة بنية المعلومات. غالبًا ما يحدث هذا قبل التصميم، لأنك ستعتمد على عملية إنشاء بنية المعلومات لإنشاء التسلسل الهرمي المرئي. من الممكن الاعتماد على تحليل المهام العليا وفرز البطاقات لإنشاء بنية المعلومات الخاصة بك. وهذا يضمن أن تتوافق مع النموذج العقلي للمستخدم ويعالج أسئلتهم. النموذج الأولي واختبار الواجهة قد لا تكون الاستكشافات الأولى في مرحلة إعادة التصميم للموقع الحالي أكثر من بضعة رسومات. ومع ذلك يمكن اختبارها لمعرفة ما إذا كان المستخدم يفهم الفرضية الأساسية للموقع وبرى المكونات الهامة. في بعض الأحيان من الممكن الانتقال إلى الرسومات للبدء في تحسين التصميم. يمكن اختبار هذه النماذج الأولية باستخدام اختبارات الفلاش واختبارات التفضيل وغيرها من أشكال اختبار التصميم. ومع ذلك فإن المشكلة في أدوات مثل الاسكتش أو الفوتوشوب في أنها ربما تكون أسوأ طريقةٍ لإظهار الطبيعة التفاعلية والديناميكية لموقع الويب. لهذا السبب انتقل بسرعةٍ إلى المتصفح. بمجرد الدخول إلى المتصفح بإمكانك البدء في إنشاء نموذجٍ أوليٍ لبُنية الموقع وحتى إدخال أول تمرير للمحتوى. قد يفتقر هذا النموذج الأولي إلى تصميمٍ مصقول، ولكنه سيسمح لك بإجراء اختبار قابلية الاستخدام على بنية المعلومات وإمكانية العثور على المحتوى. تدور مرحلة النماذج الأولية هذه حول الاختبار والتكرار مع تقدم النماذج الأولية بشكلٍ متزايدٍ نحو نهجٍ يمكنك الوثوق به. سيصبح التكرار النهائي لهذا النموذج هو القالب الذي سيبنى الموقع النهائي منه. يحل هذا محل المواصفات، ولكنه بدلاً من ذلك يعتمد على الأدلة ويسمح لك بتجنب النقاش والحوار اللانهائِيين. بمجرد أن تثق في النموذج الأولي الخاص بك، انتقل إلى بنية إعادة التصميم النهائية للموقع الحالي. بناء Beta يستخدم الإصدار التجريبي أساسًا النموذج الأولي كنقطة انطلاقٍ ولكنه ينتج عنه مستوى جاهز للإصدار مع وظائف كاملةٍ وقدرةٍ على العمل على نطاقٍ واسع. اعمل مع العميل على تحسين محتواها وبعد الاختبار اقضِ بعض الوقت مع المطورين لمساعدتهم على فهم النموذج الأولي وكن واضحًا بشأن ما يقومون ببنائه. قضاؤك المزيد من الوقت مع العميل والمُطورين والمصممين الذين ينشئون نظام تصميمٍ ومكتبة أنماطٍ مرتبطةٍ للموقع المعاد تصميمه. يعد هذا جزءًا مهمًا من العملية حيث سيُساعد ذلك على ضمان تطور الموقع الإلكتروني بعد الإطلاق. لا تنتظر أن يكون الموقع مثاليًا قبل البث المباشر وهذا ما يجعل النقطة السابقة مهمة. إطلاق منتج قابل للنمو بالحد الأدنى الكثير من عمليات إعادة التصميم تأخرت نظرًا لأن المتورطين قد قاموا بتعديل لا نهاية له. وهذا مذهلٌ بشكلٍ سخيف لأنه في معظم الحالات يكون الموقع بالفعل أفضل بكثيرٍ مما هو موجود حاليًا. أعتقد أن هذا ينبع من عقلية الطباعة والشعور بأنه بمجرد نشرها لن تتاح لك الفرصة لتغيير الأشياء. لكن لا ينبغي أن يكون هذا هو الحال مع الويب إذا كان لديك الموقف الصحيح والتمويل والعلاقة مع المطورين. في معظم الحالات تعامل مع لحظة البدء المباشرة على أنها حوالي ثلثي الطريق على المشروع بدلًا من النهاية. بدلًا من إطلاق موقع مثالي، ابدأ بمنتج الحد الأدنى القابل للتطبيق. يخشى بعض العملاء من أنهم قد ينفرون المستخدمين إذا أطلقوا موقع ويب أقل من الكامل. في مثل هذه الحالات ابدأ بإصدار تجريبي عام. في هذا السيناريو يظل الموقع الحالي متصلًا بالانترنت ويدعى المستخدمون إلى تجربة الموقع الجديد. في كلتا الحالتين راقب عن كثب سلوك المستخدم عند البدء بالعمل حتى تتمكن من التعلم والتكرار عليه. احتضان التكرار المستمر بمجرد تشغيل موقعٍ ما، من الجيد القيام بالتحليلات واستخدام الأدوات مثل Fullstory لمشاهدة جلسات المستخدم. إذا كان الموقع تجريبيًا مفتوحًا، شاهد عن كثبٍ عدد المستخدمين الذين يقومون بمراجعة الموقع الجديد وعدد الذين يعودون إلى الموقع السابق. ولكن سواءً كان الإصدار التجريبي المفتوح أو الموقع المباشر، اتبع المقاييس المحددة مع العميل في البداية لتحديد مدى أداء الموقع مقارنةً بالإصدار السابق. بناءً على ما تلاحظه ابدأ في تحسين الموقع وإدخال التحسينات. إذا اكتشفت شيئًا ما أقل أداءً أجري اختبار A/B باستخدم الإصلاحات الممكنة ومعرفة ما إذا كان أداؤها أفضل. بمرور الوقت قد تتراجع لكن العمل مستمرٌ مع تولي العميل دور مراقبة الموقع واختبار التحسينات الممكنة. من خلال التحسين المستمر والتكرار على الموقع الحالي فإنه يتجنب الدخول إلى حالةٍ يحتاج فيها إلى إعادة تصميمٍ كاملةٍ مرةً أخرى. بالطبع للتأكد من أن الموقع سيستمر في الحصول على الاهتمام الذي يحتاجه سوف يحتاج إلى فريقٍ من الأشخاص الذين يعملون عليه باستمرار. سينتقل الموقع من حساب رأس المال إلى حساب تشغيلي. على الأقل سيحتاج الموقع إلى مالكٍ منتجٍ يكون مسؤؤلًا في النهاية عن نجاحه. لسوء الحظ غالبًا وعلى الرغم من بعض التحذيرات من الممكن أن تتعثر مواقع الويب بمجرد العودة إلى الوراء فلا أحد يكرس نفسه لنجاحها. بدلًا من ذلك من الممكن تقسيم المسؤولية بين الكثيرين وبالتالي تنتهي في أسفل قائمة مهام الجميع. لذلك تأكد من إنهاء الواجبات الرئيسية للتأكد من أن إعادة التصميم التالية هي آخر عملية إعادة تصميم. المفاتيح الرئيسية تجنب إعادة تصميم موقع الويب الخاص بك إذا كان ذلك ممكنًا. بدلًا من ذلك أجري عليها التطويرات اللازمة كما هو مطلوب. التوقف عن التعامل مع موقع الويب الخاص بك على أنه مصدر لرأس المال كل بضع سنوات وبدلًا من ذلك استثمر فيها بشكلٍ مستمر. امتلك أهدافًا واضحةً لموقع الويب الخاص بك. تحقق واختبر كل مرحلة أثناء تقدمك في العمل. استخدم النماذج الأولية بدلًا من كتابة المواصفات الطويلة. ابدأ بالمحتوى. تأكد من أن شخصًا ما يمتلك الموقع ويكون مسؤولًا عن نجاحه. إذن كانت هذه لمحة سريعة عن منهجي عمل قد تساعدك خلال عملية إعادة التصميم التالية. ترجمة -وبتصرف- للمقال How to Redesign an Existing Website the Right Way لصاحبه Paul Boag

في حالة كنت عالقًا في كهف طيلة السنوات القليلة الماضية، دعني أخبرك هذه الأخبار الرائعة: التصاميم المسطحة (Flat Design) للمواقع هي الرائجة الآن. علينا الآن أن نودع تلك التصاميم التقليدية التي سيطرت عليها الفراشي، وتدرجات الألوان، والظلال، وكل تلك الأنواع من التصاميم. أكرر، البساطة هي التوجه الجديد. إن التوجه للتصميم المسطح هو ظهور نمط من التصميم يستخدم الأشكال المسطحة والأيقونات. وبالأساس يتمحور حول استخدام المستطيلات، والدوائر، والمثلثات وأشكال أخرى مع غياب عناصر التصميم الأخرى كالظلال، والحدود والتدرجات اللونية. لقد أصبحت معروفة بفضل مايكروسوفت التي أدخلتها ضمن أنظمة حواسيبها، خاصة نظام التشغيل الجديد ويندوز 8. بساطة المواقع مسطحة التصميم إنها حالة التصميم التي تتجنب استخدام التعقيدات. فالتصميم المسطح البسيط يبتعد عن استخدام الظلال، والحدود وعناصر التصميم الأخرى. السبب وراء ذلك هو أن الناس الآن يقدرون الأنماط البسيطة والسهلة التمييز. ومع ظهور تصفح الهاتف، حيث مساحة الشاشة محدودة، فإن استخدام الصور البسيطة سوف يضاعف استخدام البكسلات على الشاشة. النمط المصغر أيضًا يُطبّق حين يركز المصممون على التباعد بين الأيقونات، والصور والعناصر في صفحة الويب أو التطبيق. زد على ذلك، فإن الصور البسيطة والمسطحة يتم تحميلها أسرع من تلك في التصميمات المعقدة لأن المتصفح لن يحمل عناصر التصميم مجتمعة مع الصورة الرئيسية. في الوقت نفسه، فإن أسس قابلية القراءة تتحقق جميعها في النمط المصغر. ومع مزيد من "المسافات البيضاء" (أو المساحات الفارغة) فإن النص سيكون أكثر وضوحًا. ومع غياب الظلال، والحدود والتدرجات اللونية سيحقق القراءة السهلة للنص المضمّن في الصفحة. فيس بوك هي أول من تبنّى هذا التصميم. قبل سنوات غيرت فيس بوك مخططات تصميمها بشكل واضح، بحيث أتاحت للمستخدمين رؤية أيقونات بسيطة، وتصميمات أكثر راحة للعين. جوجل أيضًا اقتفت نفس الأثر بتغيير أيقوناتها إلى أخرى مسطحة بسيطة وزاهية الألوان. إنها الحقيقة، فتوجه التصميم المسطح غزا بتدريج وثقة مواقعنا، وتطبيقاتنا وحواسيبنا. وقريبًا جدًّا سوف يحكمنا تمامًا. وقبل أن يحدث ذلك فلنتعرّف على فلسفة التصميم البسيط. سوف نتكلم عن عناصر التصميم وكيفية توظيفها للاستفادة الكاملة من مساحة الشاشة. في الحقيقة هناك خمسة عناصر يتصف بها التصميم المسطح: غياب العمق استخدام العناصر البسيطة الطباعة اللون البساطة لقد انتهى العمق في التصميم لم يعد للعمق وجود الآن. اتجاه جديد للتصميم بات يحكم الجميع. فعلى عكس اتجاهات التصميم السابقة حيث لم نتمكن من العيش دون الظلال الساقطة، والحدود، والبروزات والتدرجات اللونية، يركز نمط التصميم المسطح الجديد بشكل أكبر على مخطط بسيط ثنائي الأبعاد. تتناقض فلسفة التصميم المسطح تمامًا مع التصميم الانسيابي، حيث يتم إعداد الصور لمحاكاة شكل، أو لون أو كائن حقيقي. وعادةً ما تحتوي مواقع الويب والتطبيقات انسيابية التصميم بطبيعة الحال على صور خلفية واقعية في الطبيعة. هذه المواقع تستخدم البنيات والأنماط الموجودة في العالم الواقعي. مثال جيد على هذا النوع من التصميم هو تصميم iOS6 (والإصدارات السابقة من iOS). فمن المفترض أن يكون كل تصميم تقليدًا للكائن الحقيقي. استخدام الصور ثلاثية الأبعاد المنشأة بوساطة الحاسوب، واستخدام التدرجات، والأنسجة، والحدود، والبروزات، والزخارف لجعل الصورة تبدو وكأنها حقيقية. يشبه تطبيق newsstand كشك بيع صحف حقيقي مصنوع من الخشب. على النقيض، تتم إزالة هذه العناصر في التصميم المسطح. ويزيل مخطط التصميم المسطح تلك العناصر ثلاثية الأبعاد. ويسقط العمق. ويزيل كل تلك الظلال والتدرجات والحدود الخارجية! ستبقى البساطة عنوان الجمال بإزالة العمق في التصميمات، من الطبيعي أن تصبح الصور، والأيقونات وعناصر التصميم الأخرى بسيطة بصريًا. تصنع الأيقونات الآن حتى تكون مسطحة وتستخدم أشكالًا هندسية أساسية مثل الدوائر، والمربعات، والمستطيلات. وهذا سيعطي واجهة مستخدم رسومية بسيطة وسهلة الاستخدام. لن يشعر الشخص العادي بعد الآن بالحاجة إلى دليل استخدام لأن الكائنات المرئية تقدم نفسها أثناء استخدامها. عندما ترى أيقونة " الحرف f" موضوعًا في مربع أزرق، ستعرف بسهولة أنها فيسبوك. عندما ترى رمز الترس، فسيخبرك بسهولة أنها قائمة إعدادات. التصميم المسطح يعمل هكذا. عندما ترى شكل قرص مرن، ستعلم تلقائيًا أنها أيقونة الحفظ. أو عندما ترى حرف M أصفرًا كبيرًا على خلفية حمراء، فسيتجه تفكيرك دائمًا نحو McDonald. انظر، كلما أصبح الشعار أكثر بساطة، كلما كان إدراك الأشياء أفضل. ما تراه هو ما تحصل عليه في الأساس. الطباعة، كما أخبرتكم سابقًا للطباعة مكانتها في التصاميم المسطحة. فهي تضيف نسقًا حتى مع النصوص وتمنحك واجهة سهلة القراءة. لا مزيد من تنسيق الخطوط. استخدم خطوطًا واضحة مع رسائل أقصر متناسقة مع الألوان والأشكال. لمزيد من المعلومات حول هذا، اقرأ برنامجنا التعليمي حول الطباعة. الألوان كما ذُكر سابقًا أن اللون مهم. فبإمكانه تكوين صفحتك أو تدميرها. إنه يحدد بشكل أساسي الشعور الكامل بموقعك أو صفحتك. في مبدأ التصميم المسطح، يُنصح باستخدام ألوان الحلوى قليلة الإشباع لأنها تميل إلى إضافة جمالية إلى صفحتك دون أن تجهد عيون القارئ بسبب كثرة السطوع. فتجذب ألوان الحلوى قليلة الإشباع العين بشكل أفضل لأنها جذابة، ويمكن تكاملها وتباينها بسهولة مع الألوان الأخرى. تذكر فقط أن الألوان موجودة في كل مكان؛ فلا تجعل الناس يشعرون بالملل باختيارك ألوانًا غير مناسبة. التدرجات اللونية أيضًا لم تعد جميلة. تجنب استخدام الأصفر الفاتح، الفسفوري، والأحمر الساطع والبرتقالي الساطع. لا تجعل زوار موقعك ساخطين. فن البساطة (كلما نقصت التفاصيل، ازداد الجمال) البساطة هي فن إزالة التشويش من صفحتك أو شاشتك. نشأ هذا المبدأ من مجلات الوسائط المطبوعة حيث تكون المساحات البيضاء أكثر وضوحًا من النص نفسه. أي أنها تعطي مساحة للحشو أو متنفسًا لنصوصك وطباعة سليمة. اترك الكثير من المساحات الفارغة. تخلص من العناصر غير الضرورية واحصل على إعجاب الناس. البساطة جميلة. التصميم المسطح يمكن أن يكون بسيطًا كما يبدو، لكن الإبداع يظل كل شيء. فعند التفكير في احتمالية استخدام هذا التصميم، تذكر أن تصفي ذهنك. فكر في التصميمات الأحدث والأكثر أناقة. هذا النمط من التصميم سيبقى أنيقًا، لكنّ عمل أجزاء منه لن يجعله محبّذًا. كن مبدعًا. حاول وجرب. شاهد المواقع الجذابة. جرب أن تصنع تصميمك الخاص، ارتكب الأخطاء، صححها وكن فنانًا أفضل! اعلم أنك تعرف كيف تكون بسيطًا. فلنكن جميعًا بسطاء. ترجمة -وبتصرف- للمقال Getting Started With Flat Web Design

يشهد عالم البرمجة في عصرنا تطورًا هائلاً لا حدود له، إذ يُركز المطورين والمبرمجين على تحسين أداء الأعمال البرمجية من أنظمة، وبرامج، ومواقع وغيرها، وراحة المستخدم في التعامل معها، ومن أهم وأبرز عناصر وأركان هذا التطور سرعة استجابتها وأدائها. لاحظ الفرق في الصورة السابقة بين الحالتين، إذ تجد إحداها أسرع في العرض عند طلبها من الأخرى، والسبب في ذلك تطبيق تقنية prefetching فيها. تكمن تقنية prefetching (الجلب أو الاحضار المسبق) في تجهيز وتحميل الملف أو مجموعة الملفات قبل البدء بفتحها واستخدامها، وهي معروفة في كثير من مجالات البرمجة، حيث تستخدم في المعالجات لتسريع جلب البيانات والتعليمات قبل الحاجة لها، وفي ذاكرة DDR SDRAM، وفي أنظمة تشغيل الحاسوب، وفي المواقع الإلكترونية وهي من أبرز تطبيقاتها. سيكون الحديث هنا مقيدًا في مجال المواقع. المقصود من prefetching في مجال المواقع: تنقل أسرع بين صفحات الموقع من خلال تحميل الصفحات أو جزء منها قبل الشروع باستخدامها، أي بكل بساطة نخبر المتصفح بجلب الموارد قبل فتحها، وعند طلب المستخدم فتح الصفحة فإنها تُعرض مباشرةً كونها جاهزة للعرض كما ظهر في الصورة السابقة. كيفية إضافة هذه تقنية والاستفادة منها يستفاد من هذه تقنية في تسريع عرض صفحات الموقع أو جزءٍ منها كملفات JavaScript أو ملفات CSS (من أبرزها الخطوط حيث يتم عرض الخطوط من دون انتظار تحميل DOM و CSSOM)، أو الوسائط (صور ومقاطع مرئية وصوتية)، أو المستندات. يمكن إضافتها بعدة طرق، الأكثر شيوعًا باستخدام الوسم link في لغة HTML، وذلك بإدراجه في الصفحة السابقة للمراد تطبيق تقنية فيها، وفيه rel من نوع prefetching كما يلي: <link rel="prefetch" href="URL"> يوضع مكان URL رابط الملف المراد تحميله سابقًا وتجهيزه للعرض مباشرةً عند طلب المستخدم فتحه. نظرة أعمق لآلية عمل prefetching عند اكتمال تحميل الصفحة التي تحوي الوسم link من النوع prefetching (للمراد تطبيق تقنية الجلب المسبق فيها)، يرسل طلب تحميل الملف (المطبق عليه تقنية) بواسطة ترويسة HTTP التالية: Link: </js/chat-widget.js>; rel=prefetch بعدئذٍ يتم تحميل الملف وتخزينه في ذاكرة المتصفح المؤقتة، ومن المهم معرفته أنها تأخذ أقل أولوية بالتحميل (priority:lowest)، ويتم حفظها مدة لا تتجاوز الخمسة دقائق، خلال هذه المدة تكون جاهزة للعرض وما إن يقوم المستخدم بطلب فتح الصفحة تظهر مباشرةً، وتنتقل إلى إعدادات وقواعد cache-control الافتراضية لأي صفحة عادية، وإن لم يفعل وانتهت المدة يتم حذفها وتفقد هذه تقنية. تحديد الصفحة الأنسب والأولى بالتحميل المسبق تضاف هذه التقنية إلى الصفحات التي تملك الاحتمال الأكبر من انتقال المستخدم إليها، على سبيل المثال عند فتح موقع في صفحته الرئيسية يمكن للمستخدم أن ينتقل إلى 20 صفحة ثانوية، ولكن إحدى هذه الصفحات هي الأهم وأغلب المستخدمين ينتقلون إليها مباشرة عند فتح الموقع. ويتم إضافة تقنية إلى الصفحة التي من المؤكد انتقال المستخدم إليها كخطوة تالية، على سبيل المثال عند دخول إلى موقع تظهر في البداية صفحة إدخال بيانات شخصية وعند إتمام ذلك يتم الانتقال إلى الصفحة الرئيسية. وهذا يتطلب معرفة جيدة لوظيفة الموقع وطريقة استخدامه من قبل الزائرين، ومعرفة الصفحات الأكثر زيارة، ومما يساعد على ذلك الأداة Next Page Predictor فهي أداة تقترح الصفحة التالية التي تناسب تطبيق التقنية عليها. ولكن عند التعمق والتشعب أكثر في الموقع تصبح عملية اختيار الصفحة المناسبة لذلك أكثر صعوبة، ولكن من الممكن باستخدام بيانات إضافية التنبؤ بالصفحة الأنسب لإضافة التقنية، فعند فتح أي رابط URL من الموقع تحديد الصفحة التالية الأنسب لذلك وإضافة لها الوسم <link rel="prefetch" href="URL"‎>، مما يضفي لمسة تقنية أفضل أداءً للموقع كامل، ويمكن التعديل على الاختيارات يدويًا، وهذا ما تقدمه مكتبة Guess المعدة من قبل فريق تابع لجوجل، والتي تستند في نتائجها على استخدام الموقع (عدد الدخولات على الصفحات، وتحليلات جوجل) وعلى التعلم الآلي (Machine Learning) والتنبؤ بالصفحات التالية ذات الصلة بالحالية، وتقوم أيضًا بتجميع مصادر JavaScript المتوفرة بالصفحة الحالية والتي تلزم ببناء الصفحة التالية. توخي الحذر عند استخدام prefetching قد لا يتم الاستفادة من البيانات المحملة مسبقًا، بسبب عدم استخدامها وفتحها أو لانتهاء مدة تخزينها المؤقت أو غيرها من الأسباب، مما يتسبب بسحب وتبديد لبيانات الإنترنت من دون فائدة، وهذا قد يؤثر تأثير كبير على بعض المستخدمين الذين يملكون بيانات محدودة وشحيحة متاحة للسحب من الانترنت. يمكن التخفيف من هذه المشكلة بمعرفة نوع الشبكة بواسطة لغة JavaScript مع navigator.connection.effectiveType، حيث يقوم بإعطاء نوع الشبكة، فمثلا إن كانت الشبكة 4G على الأقل يتم تطبيق التقنية. ومن المشاكل التي قد ترتبط بهذه التقنية، طلب المستخدم فتح الصفحة قبل اكتمال الجلب المسبق لها، فذلك يؤدي إلى حذفها وإعادة تحميلها من جديد، لذا يفضل أن يحرص المبرمج على عرض جزء منها للمستخدم قبل حذفها. وعلى المبرمج أن يتنبه إلى أن التخزين المؤقت للملفات المالكة لهذه التقنية محدود، لذا يفضل عدم إدراج التقنية إلى ملفات كبيرة الحجم، بل إنه قد يعطي الخطأ: Failed to load resource: net::ERR_CACHE_WRITE_FAILURE وذلك لأن حجم الملف المطلوب جلبه مسبقًا كبير بشكل لا يمكن تخزينه في ذاكرة المتصفح المؤقتة. أمثلة عملية الموقع الياباني Nikkei: عندما وثقوا بانتقال المستخدمين إلى صفحات معينة، لم يتركوا المستخدم ينتظر تحميل الصفحة عند طلبها، بل قاموا بإدراج تقنية prefetching إلى تلك الصفحات مما أدى إلى تخفيض الوقت الكلي لعملية الانتقال إلى الصفحات من 880 ملي ثانية إلى 37، أي تخفيضها بنسبة 96% وهو فرق شاسع. شركة Netflix إذ قامت باستثمار هذه التقنية بتسهيل التنقلات إلى الصفحات. موقع Craigslist استفاد من هذه التقنية في تسهيل الوصول إلى صفحات نتائج البحث. موقع IndieGogo استفاد من هذه التقنية في تسهيل التعامل مع صفحات بطاقات الائتمان قبل الدخول إليها. المتصفحات التي تدعم هذه التقنية في ما يلي شكلٌ توضيحي من CanIUse للإصدارات التي تتيح تطبيق تقنية prefetching (الإصدار المظلل باللون الأخضر يدعم تقنية prefetching، والإصدار المظلل باللون الأحمر لا يدعمها): مراجع Speed up next-page navigations with prefetching Prefetching wikipedia Speeding up your website using Prefetching techniques Faster Page-Loads by Prefetching Links During Idle Time Prefetching, preloading, prebrowsing Prefetch W3C ‎<link rel="prefetch/preload"> in webpack Can I use prefetch‎?‎ Nikkei achieves a new level of quality and performance with their multi-page PWA Guess.js announcement

غالبًا ما تشكّل الخطوط مشكلةً للعديد من مستخدمي الحاسوب، فهل سبق لك مثلًا وأن صَممت منشورًا رائعًا، وعند أخذك للملف للطباعة في مكان ما وجدت أنّ جميع عناوين تصميمك تحولت إلى خط Arial لأن تلك الطابعة لا تملك الخط المزخرف الجميل الذي استخدمته في التصميم؟ بالطبع هناك طرق للحيلولة دون ذلك: يمكنك مثلًا تحويل الكلمات في خطوط معيّنة إلى «مسارات» ( paths)، أو تجميع الخطوط في PDF، أو تجميع الخطوط مفتوحة المصدر مع ملفات التصميم خاصتك، أو - على الأقل – تسجيل قائمة الخطوط المطلوبة. ومع ذلك لا تزال هذه تُعدّ مشكلة لأننا بشر وننسى. يواجه الويب ذات النوع من المشاكل. حتى وإن كان لديك فهمًا لأساسيات CSS، فمن المحتمل أنك رأيت نوعًا من التصاريح كهذا: h1 { font-family: "Times New Roman", Times, serif; } إنّها محاولة من المصمم لتحديد خط معين، وتوفير خط احتياطي في حال لم يكن لدى المستخدم خط Times New Roman مثبتًا على جهازه، وتقديم خط احتياطي آخر في حال لم يكن خط Times متوفرا لدى المستخدم أيضًا. إنّها أفضل من استخدام رسومٍ بدلًا من النّص، لكنّها لا تزال طريقةً غير مألوفةٍ وغير ملائمةٍ لخطٍ بدون إدراة، ومع ذلك، كان هذا كل ما يمكننا عمله في الأيام الأولى من الويب. خطوط الويب webfonts ثم جاءت خطوط الويب، ونُقلت إدارة الخطوط من العميل إلى الخادم. فبدلًا من مطالبة متصفح الويب بالعثور على الخط المطلوب على نظام المستخدم، أصبحت الخطوط تُوَفَّر للعميل على مواقع الويب من قبل الخادم نفسه. تستضيف Google ومزوّدو الخدمات الأخرى الخطوط المرخّصة ترخيصًا مفتوحًا والتي يمكن للمصمّمين تضمينها على مواقعهم باستخدام قاعدة CSS بسيطة. إن المشكلة في هذه الميزة المجانيّة هي أنّها بالطبع لا تأتي بدون تكلفة تمامًا. إنّها مجانيّة من ناحية الاستخدام، لكن المواقع الرئيسيّة مثل Google تحبّ تتبّع من يشير إلى بياناتهم بما في ذلك الخطوط. إذا لم تجد حاجة لمساعدة Google لبناء سجل لنشاط كل شخص على الويب، فإنّ الأخبار السارة هي أنّه بالإمكان استضافة خطوط الويب الخاصّة بك، والأمر بسيط ببساطة تحميل الخطوط إلى مضيفك واستخدام قاعدة CSS واحدة سهلة. وكميزة جانبيّة، قد يُحمّل موقعك بشكل أسرع حيث ستجري استدعاءات خارجية أقل عند تحميل كل صفحة. خطوط الويب المُستضافة ذاتيًّا إنّ أول شيء تحتاجه هو خط مرخّص ترخيصًا مفتوحًا. قد يكون هذا أمرًا مربكًا بعض الشيء إن لم تكن معتادًا على التفكير في تراخيص البرامج المبهمة أو الاهتمام بها، خاصّة أنه يبدو وكأن كل الخطوط مجانيّة. يُدرك عدد قليل جدًا منّا أنّهم يدفعون مالًا من أجل الخطوط، مع العلم أنّ معظم الناس لديهم خطوط مرتفعة الثمن على حواسيبهم. فقد يكون حاسوبك وبفضل اتفاقيات الترخيص قد شُحِن مع خطوط لا يُسمح لك قانونيًا بنسخها وإعادة توزيعها. إنّ بعض الخطوط مثل Arial و Verdana و Calibri و Georgia و Impact و Lucida و Lucida Grande و Times و Times New Roman و Trebuchet و Geneva والعديد من الخطوط الأخرى مملوكة لشركة Microsoft و Apple و Adobe. إذا اشتريت جهاز حاسوب مُثبّت عليه مسبقًا نظام تشغيل Windows أو MacOS، فأنت إذًا تدفع مقابل استخدام حزمة الخطوط المُضمّنة، لكنك لا تملك هذه الخطوط ولا يُسمح لك بتحميلها إلى خادم الويب (ما لم يُذكر خلاف ذلك). إنّ جنون المصدر المفتوح لحسن الحظ قد وصل إلى عالم الخطوط منذ زمن طويل، وهناك مجموعات ممتازة من الخطوط المرخّصة ترخيصًا مفتوحًا من المنظمات والمشاريع مثل League of Moveable Type وFont Library وOmnibus Type وحتى Google وAdobe. يمكنك استخدام تنسيقات ملفات الخطوط الأكثر شيوعًا، بما في ذلك TTF و OTF و WOFF و EOT وما إلى ذلك. سأستخدم في هذا المثال الخط Sorts Mill Goudy لأنّه يتضمن إصدار WOFF (تنسيق خط Open Web، طٌوِّر جزئيًا من قبل Mozilla). تعمل التنسيقات الأخرى على أيّة حال بنفس الطريقة. لنفترض أنّك تريد استخدام الخط Sorts Mill Goudy على صفحة الويب خاصتك: حمّل ملف GoudyStM-webfont.woff إلى خادم الويب الخاص بك: scp GoudyStM-webfont.woff seth@example.com:~/www/fonts/ قد يوفّر مضيفك أيضًا أداة تحميلٍ رسوميّة من خلال cPanel أو لوحة تحكم ويب مشابهة. أضف قاعدة ‎@font-face مشابهة لما يلي في ملف CSS الخاص بموقعك: @font-face { font-family: "titlefont"; src: url("../fonts/GoudyStM-webfont.woff"); } قيمة الواصفfont-familyهي تسمية تختارها للخط. إنها اسم أو وصف مألوف للإنسان بغض نظر عمّا تمثله قاعدة ‎@font-face للخط. استَخدمتُ القيمة "titlefont" في هذا المثال لأنني أتصوّر أنّ هذا الخط سيُستخدم للعناوين الرئيسية في موقع وهميّ. يمكنك ببساطة استخدام أيّة قيم أخرى مثل "officialfont" أو "myfont". قيمة الواصفsrc تُحدَد المسار إلى ملف الخط. يجب أن يكون هذا المسار موافقا لبنية ملف الخادم الخاص بك، لدي في هذا المثال المجلد fonts بجانب المجلد css. قد لا يكون موقعك منظمًا بهذه الطريقة، لذا اضبط المسارات بما يناسبك مع الآخذ بالحسبان أن نقطة واحدة (.) تعني هذا المجلد ونقطتان (..) تعنيان مجلدًا آخرًا للخلف (المجلد الحاوي [الأب] للمجلد الحالي). الآن وبعد تحديد اسم الخط وموقعه، يمكنك استدعائه في أي صنف class من أصناف CSS أو معرّف ID تريده. على سبيل المثال، إذا كنت ترغب في عرض <h1> بخط Sorts Mill Goudy، فعليك جعل قاعدة CSS الخاصّة به تستخدم اسم خطك المخصّص: h1 { font-family: "titlefont", serif; } أنت الآن تستخدم وتَستضيف خطوطك الخاصّة. ترجمة وبتصرف للمقال How to host your own webfonts لصاحبه Seth Kenlon

أُعَد حاليًا مصمم تجربة المستخدم الأساسي في شركة DNV GL Energy. وهي شركة عالمية تقدم نصائح متخصصة وخدمات الشهادات لقسم الطاقة المتجددة حول العالم. نقوم كجزء من عملنا بتقديم منتجات وخدمات برمجية ومصنوعة بأيدي فريق التطوير الخاص بنا. مجال الطاقة المتجددة، وبمشاريعه ذات التركيز التقني والمخاطر العالية، لا يرتبط عادةً بعمل تجربة المستخدم ولكن البحث والتصميم على الصعيد الآخر يعتبران مهمين جدًا في عملية البرمجيات الخاصة بنا. يتوقع مستخدمونا الذين يعملون في هذا المجال بأن تتمكن أدواتهم البرمجية من مواكبة آخر التطورات في التكنولوجيا وبأفضل استخدام وأن يكون عملهم قادرًا على التعامل مع الهندسة والفيزياء المعقدة بعض الشيء. لذلك من المهم جدًا أن يفهم فريق التطوير الخاص بنا ما يحتاجه المستخدمون، فيعتبر بحث المستخدم واحدًا من أكثر الأنشطة المهمة لدينا في الشركة. يعتبر دور الباحث دورًا محوريًا كشخص يستطيع التعامل بشكل مباشر مع الأشخاص والكشف عن حاجاتهم، وحتى تلك الحاجيات التي لا يعرفون بأنهم يحتاجونها، ومن ثم يقوم الباحث بترجمة كل هذا على شكل تغذية راجعة لفريق التطوير حتى يستطيعوا العمل عليه فورًا. بعض أفضل تقدماتنا في العام الماضي كانت بشكل مباشر ناتجة عن المعلومات المتجمعة من خلال أنشطة البحث. على الرغم من أن عدد الشركات التي تدرك مدى الأهمية الموجودة في هذا النوع من العمل آخذ بالازدياد، يعتبر هذا من الصعب عمله على أية حال، خصوصًا إن كنت أنت وشركتك حديثي عهد لهذا التدريب. تأتي المهارة الحقيقية بالممارسة، ولكنني أؤمن بأن معرفتك لكيفية التصرف خلال مقابلة او موقف اختبار لتحصل على أكبر فائدة ممكنة، هي خطوة أولى ومهمة لكي تصبح باحث مستخدم. 1. سهِّل على الناس لن يعطيك المشاركون في البحث نتائجًا صادقة أو صريحة إن فقدوا الشعور بالراحة. قضاء الدقائق الأولى من الجلسة بالتحدث مع المشاركين وجعلهم يرتاحون بإمكانه أن يُحدث فرقًا شاسعًا بالنتائج. 2. قم بتهيئة الأجواء ابدأ الجلسة بتوضيح أهدافك، كن مباشرًا وصريحًا، لا تفترض بأن هنالك أي أحد يفهم المصطلحات البرمجية أو يعرف أي شيء عن مشروعك. لاحقًا، سوف تحتاج للرجوع للأهداف التي ذكرتها مسبقًا، لذلك قم بتدوينها. 3. اتّبع خطة معينة وليس سيناريو قبل بدء الجلسة، قم بتدوين ما تريد أن تعرفه والأسئلة التي تود سؤالها. كن جاهزًا للسير حسب الجلسة فسوف تحصل على مفاجآت كثيرة. على سبيل المثال: ليس من الغريب في عالم الطاقة المتجددة أن تجد مستخدمين يزيدون في المنتجات باستخدام أدوات الجداول (Spreadsheet tools) في حال لم يعجبهم البرنامج. تعلمك للمرونة وتغيير الأشياء سوف يأتي مع الخبرة. 4. عامل المستخدمين وكأنهم خبراء أنت موجود للاستماع وتقدير مستخدميك ووجهة نظرهم. عامل المشاركين في بحث تجربة المستخدم كخبراء واطلب نصيحتهم، سيكون المشتركون أكثر قابلية لإعطاء تغذية راجعة حقيقية إن جعلتهم يشعرون بأهميتهم أو اعطائهم الفرصة للتعبير عن خيباتهم واقتراحاتهم. 5. كن نزيهًا ليس من السهل على المصممين أن يبقوا غير متحيزين، ولكن يجب عليك ان تكون نزيهًا عند اختبارك لمنتجك. عادةً ما أقوم بالبداية بذكر أنني لم أحصل على المشاركة الكافية في التصميم، لذلك بإمكان المستخدمين أن يكونوا صريحين معي. يحتاج الناس لأن يشعروا بأنه من المقبول أن لا يعجبهم شيء ما أحيانًا وأنه لن تتم إهانة أي منهم إن تحدث عن ما يجول في عقله. 6. ادعُ إلى الانتقاد لا تقم بالدفاع عن منتجك. كن متقبلًا للانتقاد، سوف يساعدك هذا على المدى البعيد. إن كان شيءٌ ما ليس على ما يرام، فمن الأفضل أن يتم معرفته بينما لا يزال هنالك وقت لتعديله. 7. اسأل أسئلة صريحة وليست غامضة قم دائمًا باختيار أسئلتك بعناية تامة وتجنب الدفع بأفكارك المسبقة على الآخرين. بدلًا من ذلك، قم بدعوة مستخدميك لتشكيل اجاباتهم الخاصة، حيث أن الأسئلة الصريحة والمفتوحة لديها فرصة أكبر لجعلك تكتشف أشياء جديدة. وبدلًا من سؤالك: "هل ذهبت لتلك الشاشة لإكمال مشروعك؟"، اسأل: "لماذا ذهبت لتلك الشاشة؟". وبدلًا من سؤالك: "هل أعجبتك هذه الميزة الجديدة؟"، اسأل: "هل بإمكانك إخباري عن رأيك بالميزة التي جربتها للتو؟". 8. قم بالسؤال باستخدام "لماذا؟" و"كيف؟" عندما يحدث أمر مثير للاهتمام وتريد أن تعرف المزيد عنه، قم بالسؤال. هذه فائدة وجود خطة بحث تمكنك من أن تكون مرنًا في حال قام مستخدمك بعمل شيء غير متوقع ومثير للاهتمام. أسئلة بسيطة مثل: "لماذا فعلت ذلك؟" أو "هل يمكنك أن تخبرني المزيد عن ذلك؟" تكفي لكشف المزيد من المعلومات المفصلة. 9. أبقِ سَير الجلسة حسب المخطط أحيانًا، تحتاج المحادثة لدَفعات خفيفة لتبقى على المسار، خاصًة بوجود وقت محدود والعديد من الأشياء المهمة لتحرّيها. إن كنت قد هيأت الأجواء مسبقًا في البداية، بإمكانك دائمًا أن تعرّج على الأهداف التي قمت بذكرها حتى تتمكن من معرفة أي الأشياء ذات صلة بالأهداف. وتذكر مجددًا أن تبقى منفتحًا للأشياء الجديدة في حال أراد مستخدمك أن يعبّر عن شيء مهم بالنسبة له، وحاول أن تخلق وقتًا إضافيًا لذلك. 10. اسأل السؤال ليتم توضيحه وليس ليتم قوله فقط تقريبًا، من المفضل دائمًا أن تشاهد الناس يستخدمون منتجك بالفعل، فسوف ترى أشياءً لم يكونوا يعتقدون بأنها مهمة أو أشياء قد نسوا ذكرها. سوف تجد أيضًا أشياءً بارزة وأكثر سهولة للفهم بفضل هذا السياق. 11. ابحث عن الأشياء الغير متحَدّث عنها الباحث الجيد يلاحظ ردود الفعل الغير مفصح عنها، حيث أن ما يقول أو يفعل الناس قد يكون مختلفًا جدًا، لا يمكنك أن تعتمد فقط على كلمات المشاركين. 12. قم بالانتقال والتوثيق بشكل خفيف كن كذبابة على الحائط وحاول قدر المستطاع أن لا تشوش على أجواء الناس. محاولة التسهيل على الناس وأخذ الملاحظات في نفس الوقت صعب جدًا، لذلك أوجد طريقةً لأخذ ملاحظات قصيرة وفعّالة بنفس الوقت أو قم بطلب المساعدة من زميلٍ لك. ابتعد عن شاشة الحاسوب إن أمكن وقم بالنظر إلى الناس وجهًا لوجه، حيث أنك تريد أن تختلط معهم وتسهّل الأمور عليهم. 13. اكتب تلخيصًا بالنتائج في أسرع وقت ممكن لأنك سوف تنسى بسرعة، قم بكتابة ملخص عن نتائجك بينما لاتزال المعلومات جديدة في عقلك. 14. اكتب استنتاجات مختصرة وقابلة للمشاركة يعتبر بحثك عقيمًا، ما لم يستطع الأخرون من فهم توصياتك والتصرف بها، لذلك خذ بعين الاعتبار كل من جمهورك، أصحاب المصلحة، مدراء المنتج، المطورون ...إلخ، وقم بإعطائهم ردود فعل مختصرة بلغة يسهل عليهم فهمها. ترجمة -بتصرف- للمقال How to conduct yourself in a UX research session‎ لصاحبه Matt Corrall

عندما تقرِّر إنشاء متجرك الالكتروني الخاص، ستجد نفسك تائهًا وقلقًا بخصوص خطوات بناء المتجر بحدّ ذاته، و من الممكن أن تنسى واحدة من الخطوات المصيرية لنجاح متجرك، ألا وهي التّسويق. وعندما أقول التّسويق فأنا لا أقصد أنّك تحتاج فريقًًا للتّسويق الذّاتي. كلّ ما عليك القيام به هو متابعة وسائل التواصل الاجتماعي والبدء بالتدوين وانتزاع أرصدة الدعاية المجّانية للمضيفين. إنّ مظهر المتجر الإلكتروني أهمّ بكثير من إشهاره وجعله بارزًا. فإن كنت تمتلك شعارًا فريدًا من نوعه، ومحتوى تسويقي مريح للعين وموقع جميل، فسيجعلك هذا ممّيزََا في عالم التجارة الإلكترونية. ومن حسن حظِّك، فلن تحتاج أن تكون مصممًا متمرسًا كي تقوم بإنشاء تصاميم لائقة. كل ما عليك فعله هو أخذ فكرة عن أساسيات التصميم، وستكون قد بدأت فعلا برسم طريقك نحو الاحتراف. أهمية التصميم الجرافيكي من السهل البدء في التصميم الجرافيكي رغم أنه مجال صعب الإتقان. ولكن عندما يتعلق الأمر بتسويق موقع تجارة إلكترونية، أو أي نوع آخر من المواقع، فإن الاستعمال الجيد للتصميم الجرافيكي هو المفتاح. يجب على كل من متجرك، والإعلانات والصور التي تنشرها على مواقع التواصل الاجتماعي أن يحظى بمظهر أصلي و جذاب، و إلا سيضجر الزوار من متجرك سريعًا و يغادرون. المظهر يجب عليك أن تعلم أن أول شيء يجب أن تأخذه بالحسبان هو نوع المظهر الذي تريد: بسيط؟ عصري؟ فني؟ و يجب أن تعلم أيضًا أنَّ المنتج الذي تبيعه يلعب دورا مهما في اختيارك للمظهر المناسب. فمثلا المتجر الذي يبيع قطع الحواسيب أو الألعاب الإلكترونية سيحتاج مظهر داكن لكي يُكَمِّل المنتج. إن كان متجرك يبدو بمظهر جيد، فيمكنك الاحتفاظ بنفس المظهر أو يمكنك تغييره لتصميم مشابه. حاول اختيار مظهر ينجسم مع منتجاتك، أو شركتك أو شكل موقعك. أسعى وراء الأصالة والابداع قبل كل شيء، فهذا ما يجعل موقعك، أو إعلاناتك أو بريدك مختلف عن أي أحد آخر. التموضع لا يتجسد التصميم الجرافيكي في الفن وإعداد الصور فقط، كما يظن الكثير، فوضع العناصر وتنسيقها بشكل صحيح واستعمال التباعد (المساحة المتواجدة بين العناصر) الملائم بين العناصر أمور ضرورية أيضًا. ارسم أو استخدم برنامجًا لتحرير الصور لرسم موضع كل عنصر. لا داعي للقلق بشأن المحاذاة والتماثل حتى الآن. انظر فقط كيف يظهر النسق على الورق. حاول أن ترى كيف تنسجم القطع (العناصر) مع بعضها البعض، و شدّ عينيك جيدا كي تستطيع تقييم مظهر الموقع من نسقه فقط دون وجود كل التفاصيل. استخدم نصًا نائبًا وصورًا حتى تكون لديك فكرة جيدة عن شكل المنتج النهائي. إذا لم تكن مرتاحا مع فكرة البدء من نقطة الصفر، فلا تخجل من استخدام قالب. على الأقل، يجب عليك دراسة ما فعله الآخرون، سواء كنت تغيّر مظهر موقع ويب أو تنشئ إعلانًا أو تكتب منشورًا لنشره في مدونة. حاول تذكر القاعدة الوحيدة للفن: استخدم دائمًا الصور المرجعية. الخطوط والأشكال على الرغم من بساطتها، يمكن استخدام الخطوط والأشكال البسيطة بشكل كبير في الصورة. فغالبًا ما يكون التصميم المباشر والبسيط أفضل من التصميم مفرط التعقيد. يمكن للخطوط فصل المحتوى أو ربطه، ومن الممكن أن تحيط أو تميز أجزاءً مهمة من الصورة. بإمكان أشكال بسيطة رسم العين. لذلك فالجمع بين أنواع مختلفة من الأشكال يمكن أن يجعل الصورة ديناميكية وجذابة إن الصور القوية والتي يتم تحتوي على أشكال جريئة ومميزة ترسخ في أذهان العملاء. الألوان تعدُّ الألوان واحدة من أهم جوانب التصميم. اختيارك للألوان يمكن أن يخلق متعة للعينين كما يمكن أن يخلق فوضى شديدة. مما يجعل اختيارك للألوان الجيدة قرارََا قابلاََ للنقاش، ولكن هناك بعض القواعد التي يجب تذكرها: لا تستعمل الكثير من الألوان، بل حاول أن تستعمل لونين على الأقل ولا تتعدى 4 ألوان في المجمل وسيكون هذا مثالي. تباين الألوان ملفت للنظر وجيد عند استعماله بالإعلانات، ولكن يمكن أن يكون مبهرجًا ومزعجًا. الألوان المتناظرة أكثر تناسقًا، ولكنها قد تبدو باهتة دون تباين. لنأخذ بالحسبان المزاج المراد إيصاله من خلال الصورة. هل تحاول خلق الإثارة؟ سيلفت اللون الأحمر المشتعل الانتباه بالتأكيد. أم أنك من النوع الذي يفضل الألوان الهادئة بالعمل؟ الأزرق اللطيف، الأخضر والأبيض كلها ألوان مثالية لتحقيق مبتغاك. أما إذا كنت تبيع منتجات لطيفة مثل الألعاب، فقد يكون الباستيل مناسبًا. إن لم تكن متيقنا من الألوان المناسبة لمشروعك، فأفضل حل أمامك هو الحصول على نظام الألوان من أي موقع يوفر هذه الخدمة. أسلوب الخط يمكننا القول أن أسلوب الخط هو الأكثر أهمية في التصميم الجرافيكي. يُعدُّ العثور على الخط واللون والموضع الصحيح أمرًا ضروريًا إذا كنت تريد أن ينتبه الأشخاص لما تقوله الكلمات التي تكتبها. استعمل أحجام خطوط مختلفة كلما اختلف نوع النص (الترويسة، النص الأساسي، الأزرار)، ولكن احتفظ بنفس هذه الأحجام في مختلف صفحات موقعك. يجب ألا يتعدى عدد أنواع الخطوط داخل موقعك الثلاثة أنواع. الصور الصغيرة مثل البنر ستظهر بشكل رائع بخط أو خطين. لا تفرط في استخدام الخطوط الأسلوبية أو المخطوطة. تأكد من أن يكون النص سهل القراءة. وذلك باستخدامك للونِِ متباينِِ بحيث ينبثق النص ويسهل قراءته. كن حذرًا عند كتابتك للمحتوى كذلك. حاول أن تصل إلى ما ترمي إليه بسرعة، وذلك باستخدام كلمات وجمل قصيرة. قم بتضمين نصوص تشجع الناس على "النقر هنا" أو "الاتصال الآن". البساطة في عالم التصميم الجرافيكي، من الأفضل عمومًا اتباع أسلوب بسيط فهو أسهل من ناحية التنفيذ وغالبًا ما يبدو أفضل. لا تحشر كل المساحة الحرة بنصوص عملاقة وصور عشوائية أو أي فوضى أخرى. المساحة البيضاء بمثابة النعمة، فهي تلفت الانتباه نحو العناصر البصرية كما تخفف الجهد على عين الإنسان. حاول أن تستخدم الأشكال البسيطة والأساسية قبل التفكير في استعمال الصور المعقدة. عمومًا، استخدم أقل قدر ممكن من الخطوط والألوان والرسومات. حاول اختيار خطوط ولوحة ألوان صغيرة والمجموعة التي تكفيك من الصور. من الأفضل أن يطلق على إبداعك "عادي" أضعف الإيمان بدلًا من "قبيح". كيف توظف التصميم في التسويق الآن وبعد أن تعرفت على الأساسيات، كيف ومتى يتم تطبيقها؟ يمكنك الجزم بأنَّ التسويق لا يقتصر على الإعلانات وحملات البريد الإلكتروني فهو يبدأ بموقعك وكل ما تنشره عبر الإنترنت. الشعار وتصميم الموقع إن كنت تفكر في إنشاء متجرك الإلكتروني ولم تبدأ بعد بإنشائه، فإن أساسيات التصميم هذه ستخدمك بشكل جيد. ينبغي أن تكون سهولة الاستخدام والبساطة هدفك الرئيسي. إذا لم يستطع أحد العثور على متجرك وسط كل المتاجر الموجودة، فأنت تخسر المال. وبدلًا من ذلك، جرب مرة أخرى وأنشئ موقعًا يسهل التنقل فيه ويحسن النظر إليه. قد يكون استخدام منصة للتجارة الإلكترونية مثل BigCommerce هو الحل. فموقع الويب الخاص بك هو أهم جزء من استراتيجية التسويق الخاصة بك - ما فائدة الإعلان إذا كان موقع الويب الخاص بك غير متساوٍ أو منافس للمواقع الآخرى ؟ تحتوي حزمة التجارة الإلكترونية على ميزات حيوية مثل أداة إنشاء السحب والإفلات (drag-and-drop builder)، ونظام إدارة المحتوى مع إمكانية الاطلاع على التحاليل والاحصائيات، وإدارة المخزون وأدوات البيع. قد يكون من الصعب تضمين هذه الميزات دون الاعتماد على هذه الحزمة، حتى لو كنت مطور ويب بارع. و لكن الأمر يغدو سهلًا و سلسًا من خلال منصات التجارة الإلكترونية. بالنسبة للشعار، فإن استعمال الألوان الفاتحة والأشكال البسيطة لإنشائه ستكون أفضل طريقة لصنع شيء راسخ ولا يُنسَ. استخدام ثلاثة ألوان سيكون مثاليًا، فما لا تعلمه هو أن هناك بعض الشعارات الشهيرة جدا والتي تحوى لونًا واحدًا وحتى شكل أو شكلين. لا تنسَ الاهتمام بمدونة شركتك. فيجب أن لا تكون المنشورات مجرد كتلة نصية، بل عليك استخدم الصور و أسلوب خط ذكي لإنشاء مدونة أكثر جمالا. الاعلانات عندما يتعلق الأمر بالإعلانات، يجب عليك مقاومة رغبتك في صنع إعلان وامض أو مشع للغاية. فلا أحد يحب مشاهدة أحد هذه الإعلانات منبثقًا على شاشته، و ستجد نفسك في الأخير ضمن القائمة السوداء. بدلاً من ذلك، جرب أن تنشئ شييًا بسيطًا يبرز من صفحة ويب نموذجية وفي نفس الوقت يلفت الأنظار. قم بدمج حركات بسيطة لجذب الانتباه أكثر، دون تعطيل أو إزعاج المشاهدين. التسويق عبر البريد الإلكتروني قد يتم إنشاء رسائل البريد الإلكتروني في المقام الأول من الكلمات، ولكن هذا ليس عذرََا كافيًا لتجاهل كيف يبدو شكل الرسالة في الأخير. فشكل النص والصور هو الفرق بين حملة البريد الإلكتروني الناجحة وبين تلك التي ينتهي بها المطاف في سلة المهملات. استخدم الصور دائمََا، فرسائل البريد الإلكتروني التي تحوي النص العادي فقط مملة بصريا. لإنشاء تصاميم أكثر إرضاء لبريدك، فكر في استخدام خدمة مثل MailChimp. تحتوي مواقع مثل هذه على قوالب يمكنك تخصيصها وسحب الصور إليها بسهولة. مواقع التواصل الاجتماعي حتى على Twitter، يلعب التصميم الجرافيكي دورًا كبيرًا. فمثلا، الحساب المليء بالروابط و المنشورات النصية فقط هو حساب ممل و لا توجد أي متعة في تصفحه؛ ستحصل على المزيد من المتابعين إذا كانت صفحات التواصل الاجتماعي الخاصة بك ممتعة و يوجد بها التنوع. على الرغم من أن هذا يندرج تحت تحرير الصور والفيديو، فلا يزال بإمكاننا تطبيق مبادئ الألوان وأسلوب الخط السابق ذكرها. اصنع شيئًا بارزًا مع معرفتك بالتصميم وكيفية تطبيقه، يجب أن تكون قادرًا على إطلاق حملة تسويقية ناجحة وجميلة. فقط تذكر: اعتمد البساطة والألوان والأشكال القوية والمواضع الواضح والطباعة الجيدة. حاول أن تكون تصاميمك لافتة للنظر، و ليست مشتتة للانتباه في نفس الوقت. ضع هذه الإرشادات بعين الاعتبار، و سيسهل عليك إنشاء مواقع ويب جميلة دون عناء، أو تصميم لافتات إعلانية لافتة للنظر، أو حتى إنشاء تدوينات ورسائل بريد رائعة. ولن تحتاج لتوظيف مصمم مجددا! ترجمة -وبتصرف- للمقال The Marketing Design Elements Every eCommerce Website Needs لصاحبته Brenda Stokes Barron

في فنّ التبسيط (minimalism)، يتمّ تشريح التصميم وتجريده من أي زوائد بشكل يتمّ الاحتفاظ بالعناصر الأساسية فقط. على الرغم من صعوبة إتقانه، إلا أن التبسيط فنّ يمكنك تعلمه بسهولة. إذا كنت ترغب في تجربة التبسيط في أي مسعى فنيّ، يجب عليك تشفية العمل وتخفيفه إلى أقصى حد ممكن. يتعلّق الأمر كلّه بتجريد العمل حتى تتم إزالة كل ما لا لزوم له. بناءًا على هذه الأغراض والأهداف، يركّز المصممون على حذف العناصر غير الضرورية من التصميم، و مؤخّرََا أصبح المزيد منهم يقفزون إلى هذا المجال الشائع. لقد زادت شعبية التبسيط بسرعة حيث نرى أن التصميم المسطّح قد غزا السوق مؤخّرََا. من خلال التصميم المسطّح، الذي يطبِّق المفاهيم والتقنيات التي يدعمها فنّ التبسيط، قام عددُُ متزايد من المواقع بتبنّي فكرة أنّ القليل هو فعلا كثير (Less is truly more). و لكن هل سبق أن سألت نفسك لماذا فنّ التبسيط شائعُُ إلى هذا الحدّ؟ ما الذي يكمن وراء شعبيّة مفهوم التصميم هذا؟ و نحن كمصمّمي مواقع إلكترونية، كيف نستغلّ هذه الشعبيّة لجعل تصاميمنا أكثر فعاليّة و جمالََا؟ لنكتشف هذا معًا. القليل كثير من المحتمل أن المهندس المعماري الرائد لودفيج ميس فان دير روه Ludwig Meis van der Rohe لم يعرف أبدًا أنه عندما قال "أقل هو أكثر"، فإنّه سيؤثّر على الكثير من العقول اللامعة التي عاشت بعده. تلخّص هذه الكلمات الثلاث جوهر فنّ التبسيط ومفهومه الحقيقي: موجز ومباشر. عند تصميم موقع ويب، يجب أن تسأل نفسك دائمًا سؤالًا، "ما هي وجهة نظري؟" وبهذه الطريقة، ستفهم دائمََا أين يتوجّب عليك قيادة مشاهديك. وجود تصميمِِ مبعثر سيمنع وصول المعنى لا غير. بحيث تميل العناصر غير الضرورية إلى أن تصبح عقباتِِ بدلاً من أن تكون جسورًا وممرّاتٍ في إرسال هدفك إلى المُشاهد. لماذا هذا سيئ؟ وجود البعثرة في التصميم سيشوّش المستخدم ويصرفه في أشياء أخرى بدلا من الاستجابة إلى دعوتك له للقيام بفعل معيّن. التصميم المشوّش يبعثر الصفحة أو النافذة مما يجعلها صعبة الفهم. كيف تحقّق الكثير من القليل؟ ضع خطّة موقع الويب الخاص بك بعناية كبيرة. فهذا يمنعك من إضافة العناصر غير الضرورية حتى قبل أن تلمس التصميم. حدّد هدفك، إذا كان عنصر التصميم لا يساعدك على تحقيق هدفك، فقم بإزالته. اقض بعض الوقت في سؤال نفسك، "هل أحتاج فعلا إلى هذا؟" حاول استخدام بعض برامج تتبع النقرات على موقع الويب الخاص بك لتحديد العناصر التي لا يستخدمها المشاهدون مطلقًا. بعد ذلك، قم بتقييم ما إذا كان سيتم حذف العناصر غير المستخدمة أو نقلها إلى موضع آخر. ارجع دائمًا للأساسيات. تجاوب التصاميم على مختلف الأجهزة مع زيادة عدد مستخدمي الهواتف الذكية كلّ يوم، يجب أن تكون مواقع الويب متجاوبة مع مختلف الشاشات. بمجرّد مشاهدة موقعك على الويب وتجاوبه بشكل جميل، فإنك تزيد من فرصك للوصول إلى هدفك. الآن، لماذا أشرت إلى تصميم مواقع الويب المتجاوبة هنا؟ وما هو الدور الذي يلعبه في شعبية فنّ التبسيط؟ نقطة مهمة يمكن أن تمتاز مواقع الويب المتجاوبة، في حالة استخدام تصميم هيكلي (wire-frame) و نظام شبكي فريدين من نوعهما، بانتقالِِ سلس من شكلها على الحاسوب إلى شكلها على الهاتف النقّال. مع وجود محتوى أقلّ، وعدد أقلّ من التجميعات وعناصر التصميم (التي تلتزم بفنّ التبسيط)، بالإضافة إلى الكثير من المساحات البيضاء، تتمتّع مواقع الويب التجريدية بفرص أكبر للتحوّل إلى نسخ جميلة على الهاتف المحمول. هناك شيء آخر حول التجاوب وارتباطه بالتبسيط وهو المستخدمون. فمستخدمو الهاتف المحمول أقلّ صبرًا، ومشغولون طوال الوقت ودائمو التنقّل. في معظم الأوقات، يكون لديهم ولوجًا محدودًا للإنترنت وجدولًا زمنيًا أكثر محدودية. ولكن يمكن أن يكون وصول مستخدم الهاتف المحمول العادي إلى المعلومات مفيدًا للغاية. تذكّر، إذا أراد المستخدمون شيئا، فاعطيه لهم في أسرع وقت ممكن. إليك بعض الأشياء التي تحتاج إلى تذكّرها حول التصميم المتجاوب: فكِّر بشكل متجاوب. هناك تخطيطات مثالية لعمل تصميم متجاوب كما هناك تخطيطات أخرى ليست كذلك. فهم هذا من شأنه أن يجعلك تصمم مواقع تتجاوب مع أي جهازِِ كان. إيلاء الاهتمام لنقاط الفصل. تحتوي القرارات على نقاط توقف مختلفة. ستكون نقاط التوقف هذه هي دليلك في التصميم لأحجام مختلفة للشاشة. يجب أن تكون الصور مرنة. عند تغيير عرض الصفحة، تأكّد من أن تتجاوب صورك مع هذا التغيير قدر الإمكان. مواقع ويب أخفّ حجمًا تخيّل نفسك في منطاد الهواء الساخن. تخطو إلى الداخل، تشغّل الموقد، ويتمدّد البالون. لكن لا يمكنك الإقلاع لأن هذه الأكياس الثقيلة من الرمال تسحب البالون إلى الأرض. ماذا كنت ستفعل؟ ربما تكون الإجابة هي أن المواقع الإلكترونية الأخفّ هي المساهم الرئيسي في شعبية فنّ التجريد. وجود عناصر قليلة في التصميم سيعني موقع ويب أخفّ. تعني قلة المحتوى، عناصر واجهة المستخدم وعناصر التصميم داخل موقعك أنّ هناك بيانات أقلّ تحتاج إلى تنزيل بيانات بواسطة متصفحك، ممّا يمنحك تجربة مستخدم أسرع وأخفّ حجمًا وأكثر كفاءةََ وإنتاجية. يجب عليك بالأساس أن تقوم بمراعاة التجاوب وأنت تصمّم لأنّ ذلك سيلعب دورََا فى مدى سرعة تحميل الموقع على الهواتف المحمولة. بناءك لمواقع ويب خفيفة يعني سهولة تحديثتها، صيانتها أو اكتشاف الخلل فيها. تذكّر، ليس هناك أي شخص عاقل سيحب موقعا يتطلب الدّهر لتحميله. إليك بعض النصائح: احذف الإضافات غير المستخدمة. أزل أي شيء غير فعّال. إن استطعت إنشاء أيّ عنصر تصميم باستخدام الكود، فقم بذلك. علم متى يجب عليك استعمال PNG أو GIF أو JPG. المزيد من المحتوى الموجه أراهن أنّنا جميعََا نعرف أنّ المحتوى هو أهمّ شيء. لذلك أعتقد أنّ ما يدفع الناس نحو التبسيط هو عقليّتها القائمة على أهمّية المحتوى. نظرًا لأنّ مواقع الويب التجريديّة ترغب في التخلّص من العناصر غير الضروريّة، وتقسيم التصميم إلى أبسط شكلِِ ممكن، فإنها تجعل المستخدم يركّز على أكثر الأشياء أهمّيةََ: المحتوى. بدون كل مصادر الإلهاء، يمكن للمستخدمين العثور بسهولة على ما يحتاجون إليه للتجاوب مع دعوات القيام بنشاط ما. وهذا يجعل كفاءة مواقع الويب أعلى لأنها تحقّق أفضل تجارب استخدام بأقلّ جهد ممكن في التصميم والصيانة. كيف تصمم من أجل المحتوى؟ استخدم المحاذاة المناسبة. استغلّ المساحات الفارغة. استعمل الخطوط المناسبة. الحجم مهمّ. الخلاصة لماذا فنّ التجريد شعبيُُّ جدّا؟ حسنًا، إنّ هذا الفنّ يعكس طريقة الحياة التي تشجّع الاستبطان. ما هي الأشياء التي لستُ بحاجة إليها؟ ما هي الأشياء الأساسية بالنسبة لي؟ وكمصمّم، فإنّ الإجابة على هذا السؤال ستقودك إلى إدراك ما الذي يساعدك حقًا وما يجب عليك التمسّك والاحتفاظ به. تصميم سعيد! ترجمة -وبتصرف- للمقال The Rise in Popularity of Minimalism in Web Design للفريق Editorial Team

كلمة حركات مستمدة من الفعل «حرَّك» والتحرُّك سمةٌ تعطينا الإحساس بالحيوية وتجعل أحداث الطبيعة تبدو أكثر واقعيةً بالنسبة لنا، فالحركات تجذب انتباه الناظر وتجعلة يشعر بإثارة الموقف وتبرز المشاهد الأكثر أهميةً وإقناعًا من غيرها. أمَّا العناصر الساكنة التي تجلس بلا حراك، فتشعرك أنَّها ميتة، حتى وإن كان تصميمها جذابًا. يعدُّ التحريك فنًا مثله كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وصارفي هذه الأيام علمًا يُدرّس وعملًا يُنجَز، حتى أنه أصبح متأصلًا في روح تصميم الويب ويبدو أنه إضافة رائعة إلى العديد من عناصر موقع الويب. هل تجلب الحركات المزيد من الحياة للتصميم أم أنها قد تفسده أحيانًا؟ دعنا نتعرف على الفوائد التي يمكن أن تقدمها الحركات لموقع الويب وما هي الحالات التي يكون من الأفضل تجنبها. كيف ظهرت الحركات في تصميم المواقع ظهرت الحركات في الويب منذ وقت طويل. أولاً، كانت هناك ملفات ‎.gif صغيرة الحجم بها صور متحركة ومقاطع فيديو متنوعة. كانت تلك العصور المظلمة مع الكثير من بطاقات Flash وأشياء نفضل أن لا نراها. في تلك الأيام، لم يكن أحدًا يعتبر الحركات وسيلة لتحسين قابلية استخدام موقع الويب. كانت تستخدم في الغالب للتزين أو للمتعة فقط. اليوم، يمكنك استخدام تأثيرات الحركة لتحسين التنقل والاستخدام لموقعك. منذ وقت ليس ببعيد، أُنشئت جميع العناصر والتأثيرات المتحركة على مواقع الويب بمساعدة تقنية Flash. بالطبع، لقد كانت تقنية ثورية في ذلك الوقت على الرغم من أنها كانت ثقيلة جدًا وزادت من وقت تحميل الموقع بشكل كبير. في هذه الأيام، تُصمّمم الحركات باستخدام شيفرات JavaScript و CSS الخفيفة التي تساعد على إضافة عناصر متحركة إلى الموقع دون زيادة تحميله. والأهم من ذلك، تُستخدم الحركات هذه الأيام لتحسين UX، وليس فقط للمتعة. إنها وسيلة رائعة لمصممي الويب التي تساعد في جعل موقع الويب أفضل وأسهل في الاستخدام. كما في الحالات التالية: تحسين قابلية الاستخدام بالحركات في كثير من الحالات، تُستخدم تأثيرات الحركة لجذب انتباه المستخدم لتفاصيل مهمة تساعده لاتخاذ القرار الصحيح بشأن إمكانية النقر فوق عنصر من بين أشياء أخرى. وبالتالي، تستخدم العديد من مواقع الويب تأثيرًا هزَّازًا في نماذج تسجيل الدخول لتبين للمستخدمين أن هناك خطأ ما وأن المعلومات قد أُدخلت بشكل غير صحيح، مثل كلمة السر الخاطئة. هذا الأسلوب يحاكي هزِّة رأس إنسان يقول "لا". هناك العديد من الطرق الأخرى لاستخدام الحركات لتحسين تجربة المستخدم UX. يمكن استخدامها في أشرطة التنقل لفصل الفئات الرئيسية عن الفئات الفرعية؛ أو ضمن خيارات متعددة، عندما تتلاشى جميع العناصر باستثناء العنصر المختار. موقع Etechevent مع عناصر متحركة يمكن استخدام الحركات لتوجيه المستخدمين حول الموقع وحتى جعلهم يشترون. إن إضافة عناصر تفاعلية وجذب انتباه المستخدمين إليها بمساعدة تأثيرات الحركة يمكن أن يساعد مواقع الويب التجارية على تحسين العقارات وعائد الاستثمار. ويمكن أن تستفيد مواقع رواية القصص أيضًا من تضمين الحركات. حيث يمكنها أن تبين للمستخدمين ما الخطوة التالية التي يجب أن تكون أو كيفية اختيار مكان الانتقال في موقع الويب. استخدام الحركات في التصميم الماديّ (Material Design) أثبتت فكرة الحركات في تصميم الويب أنها مفيدة للغاية إذا لم تستخدم بطريقة تزيينية فقط. غالبًا ما يستخدمها مصممو UI و UX لتحسين سير العمل لديهم. حتى Google تدرك أهمية الحركة لسهولة الاستخدام، وهكذا ظهر التصميم الماديّ. أصبح التصميم المادي أكثر وأكثر عصرية ويُستخدم هذه الأيام في العديد من التطبيقات وتَصاميم المواقع. سر شعبيته هو اهتمامه الكبير بكيفية إدراك الكائن أو العنصر؛ كيف يمكن للحركة أن تخبر المستخدمين أكثر عن هذا العنصر وكيفية استخدامه. تنص Google في دليلها للتصميم المادي على أن الحركة يمكن أن تخبر المستخدمين أن أي كائن هو خفيف أو ثقيل أو مرن أو كبير أو صغير. يجب استخدام الحركات لتزويد المستخدمين بِفهم أفضل لطبيعة الكائن، وبالتالي، كيف يمكن وينبغي أن تستخدم داخل التصميم. تتقدم Google إلى أبعد من ذلك مع الحركات وتوصي باستخدام العناصر المتحركة التي تغير سرعتها ومدتها اعتمادًا على الهدف أو التأثير الذي ترغب في الحصول عليه. وبالتالي، تقدم Google العناصر الواردة والصادرة التي تظهر على الشاشة عندما ينبغي جذب الانتباه، أو إزالته من الشاشة عندما لم تعد هناك حاجة إليه. نصائح لاستخدام الحركات في المواقع عند إضافة الحركات إلى موقعك، يجب أن تفكر جيدًا في جميع مخاطرها أيضًا. العناصر المتحركة يمكن أن تضر بأداء موقع الويب وتجربة المستخدم UX. أولًا، يجب إعادة التفكير في استخدام الحركات إن كانت تبطئ من سرعة تحميل موقعك وأداءه العام. يمكن الكشف عن ذلك بمقارنة بسيطة لموقعك بحركاته مع أداء ألعاب الحاسوب الثقيلة. إذا كانت اللعبة تعمل بسلاسة على سطح المكتب أكثر من موقعك فيجب أن يكون هذا سببًا في إعادة النظر في استخدام الحركات. موقع التوقعات السعيدة استفد من CSS عند إنشاء حركات لموقعك. تعد مكتبة jQuery مثاليةً وتستخدم في العديد من المشاريع، لكنها يمكن أن تبطئ بالفعل من أداء موقعك. تسمح شيفرة CSS بإنشاء حركات خفيفة ستبدو رائعةً على أي جهاز دون إِثْقال التصميم. يجب أن تتأكد أن حركاتك متجاوبةً (responsive). موقع الويب المتجاوب أمر لا بد منه إن كنت ترغب في النجاح. ولكن إذا كان الأداء يبدو رائعًا على شاشة سطح المكتب فقط، فقد تخسر المعركة مع المستخدمين. هناك العديد من الأدوات التي تسمح بإنشاء حركات مُتجاوبة (مثل Adobe After Effects أو Invision) فبُناة مواقع الويب (مثل Webflow أو MotoCMS) تتضمن تأثيرات حركية متجاوبة وتوفر أنواع مختلفة من الحركات التي يمكن استخدامها داخل المواقع لتحسين تصميمها وقابليتها للاستخدام مثل: التلاشي (اليسار ، اليمين ، أعلى ، أسفل) (Fade in). الارتداد(Bounce in). التدوير (يسار ، يمين ، أعلى ، أسفل) (Rotate). الزلق (اليسار ، اليمين ، أعلى ، أسفل) (Slide in). اللمعان والنبض(Flash and Pulse). التذبذب (Wobbling). الاهتزاز (Swinging) وإلى آخره. الحركات يجب أن تلفت الانتباه ولكن ليس كثيرًا. تأكد من أن الحركة لا تستغرق وقتًا طويلاً ولا تدوم طويلًا على الشاشة. هذا هو الحال خاصةً إذا كنا نتحدث عن العناصر التي يجب على المستخدمين التفاعل معها كثيرًا. قد يكون الأمر ممتعًا مرةً أو مرتين، لكن مع الاستخدام المتكرر قد يصبح الأمر معرقلًا للغاية. موقع Laerepenger مع حركات غامضة ابدأ باستخدام العناصر الصغيرة بالحركة على الموقع. في الواقع، الحركات وسيلة للهدف، وليست الهدف نفسه. يجب عليك عدم تضمينها أينما تريد. يجب أن يكون هناك ما يبرر لاستخدامها. من الأفضل تضمين الحركات في عناصر واجهة المستخدم أو العناصر التي يتفاعل معها المستخدمون أكثر، مثل قوائم التنقل أو نماذج الاشتراك. وفكر قبل إضافة حقل قفَّاز وصور منزلقة: كيف ستؤثر على تجربة المستخدم، هل ستحسن التفاعل مع الموقع؟ تعد الحركات رائعةً لصنع تصميم موقع لا ينسَ. فهي لا تزال تستخدم على نطاق واسع في تصميم الموقع على الرغم من النظرات المختلفة حولها مثل سرعة التحميل أو عدم الاستجابة. ولكن الشيء الرئيسي الذي يجب أن تتذكره عند تقديم عناصر متحركة لموقعك هو تأثيرها على قابليتها للاستخدام. الأمر متروك لك - تحديد أين ومقدار دمج الحركة في التصميم الخاص بك. فيما يلي ملخص قصير لمواقع الويب التي تستخدم الحركات لدرجة كبيرة: موقع KiKK تصميم موقع مقهى مثلجات موقع شركة JD للاستشارات موقع VN Star تصميم شركة Soane Capital المالية موقع وكالة Nodeplus الرقمية تصميم موقع Creative Cruise للفنادق تصميم مواقع صناعي مع تحريك تصميم موقع وكالة Pomade الرقمية موقع مجوهرات Puca تصميم موقع Carioca Promo الترويجي موقع Ultranoir مع تحريك إبداعي تصميم موقع Mahno الشخصي تصميم منظر حديقة Vintage المتحرك ترجمة -وبتصرف- للمقال Animation in Web Design: Why and When to Use من موقع line25

إذا كنت مثلي، ترغب في إعادة تصميم موقعك كل سنة أو سنتين، فلقد قمتُ بإعادة تصميم موقعي للتو ليعكس التغييرات على الخدمات التي أقدمها ونوع الكتابة التي أكتبها. لكن لن تحصل على مال عند إعادة تصميم موقعك، لذلك سترغب بجعل العملية أسهل وأسرع ما يمكن. في هذا المقال، سأريك تقنية بسيطة يمكنك إتباعها باستخدام إضافتين تابعتين لنا (Snapshot Pro و Cloner). سنستخدم إضافة Cloner كثيرًا، لكن إضافة Snapshot Pro مهمة أيضًا، ستعمل هذه التقنية إذا كنت تشغّل WordPress Multisite مع موقعك كواحد من المواقع (ربما الموقع الرئيسي) في الشبكة. سأوضح لك كيف يمكنك استخدام Cloner لإنشاء نسخة من موقعك القديم، ومن ثم العمل على هذه النسخة لتطوير وتجربة موقعك الجديد، ثم ستستخدم Cloner مجددًا لنقل ما فعلته في الموقع القديم. يجب عليك أيضًا استخدام Snapshot Pro لإنشاء النسخ الاحتياطيّة واستيراد البيانات أو الملفات التي تحتاج إليها. الشروع في العمل قبل البدء، ستحتاج إلى بعض الأشياء: شبكة Multisite (متعددة المواقع) تشّغل موقعك حيث أنك مشرف المواقع عليها. إضافة Cloner مثبّتة ومفعّلة. إضافة Snapshot Pro مثبّتة ومفعّلة. لن تحتاج إلى كتابة أي شيفرة برمجية في هذا المقال، لذلك لن تحتاج إلى محرر شيفرات برمجيّة، وصول FTP أو أي شيء مثل هذا. نسخ موقعك القديم الخطوة الأولى هي إنشاء نسخة من موقعك القديم، ومن ثم يمكنك العمل على هذه النسخة، والتبديل عندما تكون النسخة الجديدة جاهزة. أنصح دائمًا بإجراء الجزء الأكبر من أعمال إعادة تطوير على نسخة محلية من موقعك، لذلك قد يكون لديك بالفعل ثيم أو/و إضافات التي طوّرتها أو التخصيصات التي ترغب في رفعها، هذه التقنية تعني أنه يمكنك رفع هذه وتجربة عمل كل شيء في الخادم عن بعد قبل تطبيق التغييرات على الموقع الحي، وربما لديك الكثير من المحتوى الذي لم تنسخه في الموقع المحلي الذي تطوّره، بالإضافة إلى القدرة على التجربة في نسخة من موقعك على شبكتك يعني التأكد من العمل مع جميع البيانات من موقعك الرئيسي. في شبكة Multisite، اذهب إلى Network Admin‎‏ > Sites وستجد العديد من المواقع في شبكتك: الآن، مرر المؤشر على الموقع الذي تريد نسخه، سترى 4 خيارات Edit، Dashboard، Visit و Clone، اضغط على Clone. سيأخذك هذا إلى شاشة Clone Site: ستحتاج هنا إلى تحديد بعض الخيارات لنسخ موقعك: إنشاء موقع جديد/استبدال الموقع الحالي: ترغب في إنشاء موقع جديد لذلك اختر هذا الخيار، واكتب slug لموقعك الجديد. عنوان الموقع: يمكنك اختيار استخدام نفس العنوان القديم كموقعك الجديد أو إنشاء واحد جديد، ولتجنب الإرباك، أُعْطيه دائما اسم حتى أعرف أنه مجرد نسخة، فإذا كان اسم موقعي الأصلي هو Rachel McCollin، فسأدعو الموقع الجديد RM Dev Site، وحاول استخدام عنوان له نفس طول الأصلي بحيث يتلاءم في الرأس (header) بالطريقة نفسها. إمكانية رؤيته من محركات البحث: اختر خيار تثبيط المحركات البحث من فهرسة موقعك، فلا تريد أن يعثر الناس على موقعك الجاري تطويره بدلا من الذهاب إلى النسخة الحيّة من موقعك. خيارات متقدمة: إذا كنت تستنسخ الموقع الرئيسي، يمكنك اختيار جداول قاعدة البيانات للشبكة بدلا من الموقع، ولن ينسخ محتواها. في النهاية، اضغط على زر Clone Site لإنشاء الموقع الجديد، اجلس وانتظر حتى يعمل Cloner سحره، وسيخبرك Cloner بتقدم النسخ: تستغرق الوسائط المتعدّدة بعض الوقت، لذلك إذا كان يحتوي موقعك على الكثير من الصور، اذهب واشرب قهوة في الوقت الذي تنتظر فيها Cloner لإنشاء النسخة، وبما أن موقعي كبير فسأقوم بذلك وأنا أكتب. بعد انتهاء Cloner، ستنّقل إلى لوحة التحكم لنسخة موقعك: إعادة تطوير موقعك لا يمكنني إعطاءك الكثير من التوجيهات في الخطوة التالية، يمكنك إما رفع قوالب أو إضافات جربتها أو طوّرتها محليًا، أو يمكنك تجربة قوالب خارجية على نسخة موقعك. تأكد من أداء موقعك، حيث يمكنك تجربة الموقعين باستخدام Hummingbird للتأكد من أن موقع الجديد سريع على الخادم. بمجرد أن ترضى عن أداء الموقع الجديد، حان الوقت لنقله إلى موقعك الأصلي. عمل نسخ احتياطية لكن انتظر، قبل أن تتحمّس كثيرًا، دعونا ننتظر للحظة حتى نقوم بعمل نسخة احتياطيّة. في شاشات شبكة المدير، اذهب إلى Snapshot‏ >Snapshots وأنشئ لقطتين جديدتين: واحدة للموقع الأصلي وواحدة للموقع الذي طوّرته. إذا تمت إضافة أي محتوى أو رفع جديد إلى موقعك الأصلي في الوقت الذي تجرّب فيه الموقع الذي تطّوّره، ستحتاج إلى عمل لقطة جديدة للموقع الأصلي لاستيراد البيانات بعد نسخ الموقع المطوّر، اعمل نسخة احتياطية بالملفات والجداول التي تحتاج إلى استيرادها فقط. إذا لم تتم إضافة أي محتوى أو رفع جديد فلن تحتاج إلى فعل هذا، لكن يجب عليك إنشاء نسخة احتياطيّة للاحتياط. ملاحظة: أوصي باستخدام هذه التقنية لتجربة الشيفرة البرمجيّة التي تتطلّب وقتًا لإنشاءها في الموقع التطوير المحلي، وهذا يعني أنك ستنشئ النسخة الثانية في وقت ليس ببعيد من النسخة الأصلية ولم يتغير المحتوى والملفات في الموقع، سأخبرك ماذا تفعل إذا لم تكن هذه حالتك في آخر هذا المقال لكن يمكنك أن تعقد الأمور وهي خطيرة، لذلك لا أنصح بها. حصلّت على لقطاتك؟ جيّد، لنستنسخ. نسخ الموقع المُطوَّر حان الآن وقت نسخ موقعك الجديد المعاد تصميمه إلى موقعك الجديد، في شبكة المدير اذهب إلى شاشة Sites ومرر المؤشر على الموقع الجديد الذي تعمل عليه ثم اضغط على خيار Clone. ستجد نفسك في شاشة Clone Site مجددًا لكن ستختلف الخيارات التي ستختارها: إنشاء موقع جديد/استبدال الموقع القديم: اختر Replace existing site واترك الحقل فارغ للنسخ إلى الموقع الرئيسي إذا كان هذا ما تفعله، أو اكتب slug للموقع إذا لم يكن هذا موقعك الرئيسي. عنوان الموقع: اختر Overwrite blog title واكتب اسم الأصلي للمدونة. إمكانية رؤية محركات البحث: لا تختر خيار تثبيط محركات البحث من فهرسة موقعك، فأنت تريد بالتأكيد أن يتمكن الأشخاص من العثور على موقعك مباشرةً. خيارات متقدّمة: لن تطبّق هذه لأنك لم تستنسخ الموقع الرئيسي هذه المرّة. بمجرد انتهاءك من هذا، اضغط على Clone Site واذهب مرة أخرى واعمل قهوة مجددًا. استرد المحتوى إذا كنت بحاجة إلى ذلك إذا تغيّر محتوى موّقعك أثناء إجراء إعادة تصميم أو عند رفع أي ملفات وسائط متعدّدة جديدة فستحتاج إلى استيراد هذه إلى نسخة الحيّة الجديدة من موقع باستخدام اللقطة التي أنشأناها قبل نسخ الموقع المطوّر. في شاشة مدير الشبكة، اذهب إلى Snapshot > ‏Snapshots وابحث عن اللقطة التي أنشأتها من موقعك الأصلي (وليس لقطة موقع المطوّر). تسمى لقطتي بـ Pre-cloning snapshot: مرر المؤشر فوق النقاط الثلاثة على يمين اللقطة وانقر على Restore، وسيسترد Snapshot الملفات و/أو الجداول مع اللقطة. ملاحظة: إذا غيّرت أية إعدادات أثناء قيامك بعمل إعادة التطوير، ستحتاج إلى تعديل هذا يدوّيا، لا تسترد اللقطة لجدول wp-options وإلا سيلغي التغييرات على الثيم وإعدادات الإضافات عند إعادة تصميم موقعك. تجربة موقعك في النهاية، جرّب موقعك، تأكد من عمل جميع الروابط، تحميل الوسائط المتعددة بشكل صحيح وأن كل شيء يعمل جيّدًا. عندما تكون سعيدًا بموقعك الجديد، احذف الموقع المُطوَّر، فلا تريد تشويش الشبكة أو الارتباك، اذهب إلى شاشة Sites في شاشة شبكة المدير واضغط على Delete لذلك الموقع. سرّع إعادة تصميم موقعك باستخدام Cloner و Snapshot هذه التقنيّة ستجعل عملية إعادة تصميم موقعك سريعة وسهّلة، وهي مفيدة عند تجربة قوالب من مصدر خارجي أو إضافات يمكنك تثبيتها على الموقع الذي تطوّره، أو عندما تمتلك الشيفرة البرمجية التي جربتها في النسخة المحليّة عند تطوير موقعك وتريد اختباره في بيئة الموقع الحيّة. إذا كانت التغييرات التي تجريها على موقعك مهمة، فقد تفضّل استخدام موقع تجريبي لتجربة الأشياء قبل كتابتها على موقعك الأصلي، لكن إذا أردت تعديل القوالب أو تغيير إعدادات الإضافة، على سبيل المثال، فهذه طريقة سريعة وسهلة للقيام بذلك. ترجمة -وبتصرّف- للمقال How to Make a Multisite Redesign Pain-Free with Cloner and Snapshot لصاحبه Rachel McCollin

تعد Univision شبكة القنوات المتحدثة باللغة الإسبانية الأولى على العالم. وباستهداف اللاتينيين في الولايات المتحدة، فهي تركز بشكل رئيسي على المسلسلات التلفزيونية والبرامج المتنوعة والرياضية. وفي عام 2015، أعدنا تصميم موقع Univision.com بشكل كامل حيث أن آخر مرة كان قد أُعيد تصميمه كانت في عام 2011، ولكن حان الوقت لإصلاح التنقُّل المعقَّد بداخل الموقع والأشكال الغير متناسقة، وفي النهاية، جعله موقعًا سريع الاستجابة. استمر بالقراءة لأخذ فكرة عن ما قمنا به. المشاكل التي تم التخلص منها في إعادة التصميم التنقل المعقد التنقل في الموقع كان ولا يزال أحد أكبر مشاكلنا. كيف يتنقَّل الزوار عبر موقع Univision.com وما الذي يبحثون عنه؟ ومنذ إعادة التصميم التي تمت في عام 2011، فقد عانى الموقع في ما يتعلق بهويته (هل هو شبكة أم بوابة إلكترونية؟) وكان الانتقال قد تضمن المزيد والمزيد من الأجزاء المتراكمة خلال الفترة ما بين 2011-2015. وتعد هذه مشكلةً بالنسبة للزوار الجدد للموقع، بينما يعرف زوار موقع Univision الدائمين طريقهم لما يبحثون عنه مثل الأبراج وآخر الإشاعات والقصص الحديثة. الأشكال غير المتناسقة للقوالب نتجت هذه الأشكال غير المتناسقة عن مجموعة من التجارب الفاشلة على مر السنين حيث أن الفرق الصغيرة في مؤسستنا حاولوا أن يوسموا أنفسهم على الموقع وقام كل فريق من فرق النشر بإضافة أزرار الانتقال حسب الحاجة لمساعدة الزوار بإيجاد المحتوى وأدى هذا إلى وجود 3 أزرار انتقال في كل صفحة وما يقارب 11 عنصرًا في كل زر. في النهاية، كان من الصعب إيجاد أي شي، لأنه لم يتم التخلص من الأشياء الغير مهمة، وبسبب صعوبة إيجاد الأشياء، كان يجب إما وضعها في القمة أو تكرارها مرتين وثلاثة. وعلى سبيل المثال، فإن القسم الترفيهي من الموقع كان يشمل: 9 عناصر انتقال رئيسية 4 رؤوس انتقال فرعية 16 رابطاً إضافيًا لم يكن الموقع متجاوبًا 80% من مستخدمي موقع Univision.com يستخدمون إصدار الأجهزة المحمولة. ولعدة سنوات، كان الناشرون والمحررون مطالبين بصنع المحتوى ليناسب جهاز الحاسوب ومن ثم نشر المحتوى مرة أخرى ليناسب الجهاز المحمول في سلسلة مختلفة من العمل. أو كان بإمكانهم اختيار محتوى معين لكي لا يتم نشره على "التجربة المبسطة" للجهاز المحمول مما حرم معظم جمهورنا من التجربة الكاملة للموقع. التنقل المبسط بشكل مفرط كان أيضًا من العوائق: قمنا باستعراض التنقل الرئيسي والثانوي بجانب بناء صفحات المحتوى الخاصة بنا أولاً (مقالات وفيديوهات وشرائح عرض). عملية التصميم الخاصة بنا قمنا بالعمل بشكل سريع جدًا خلال فترات قصيرة أسبوعيًا، وبالتزامن مع الفريق الذي كان يبني نظام إدارة المحتوى CMS من الصفر بالإضافة لإنشائه للتجربة الخاصة بالموقع. هذه العملية لم يكن من السهل مواكبتها وذلك لاحتوائها على انتقادات يومية للتصميم بين الفرق الصغيرة وتكرارات يومية للتفاعلات المعقدة والقوالب المتجاوبة هذا وبالإضافة لانتقادات أصحاب المصلحة والتي قد تتطلب مراجعات ومواصفات متأخرة جدًا ومكتوبة، كل هذا في أسبوع واحد. ولكن الجانب المشرق الوحيد من وراء هذا كان بأن فريقنا صنع قراراتٍ بشكل سريع وتقدم للأمام بدون إهدار الوقت في محاولة جعل كل شيء مثاليًا. الأدوات استخدامنا لبرنامجي Sketch و InVision جعل عمليتنا تتم بسلاسة كبيرة. تسليم التصاميم وفي نهاية كل أسبوع، كنا نسلم مجلدًا بالملفات النهائية وصفحات المواصفات التي قد تضاف لمجلد التنسيقات في برنامج Dropbox لفريق البرمجة. وكانت الملفات النهائية تتضمن مستندات Sketch لعناصر التصميم والمراجع المرئية بالإضافة لملف Omnigraffle مع شرح مرئي عن كيفية تغير التنسيقات عند نقاط مختلفة. وعند التسليم الأولي للتصاميم، كنا نتلقى انتقادًا على الملفات المسلّمة وكنا نجيب على أي أسئلة لدى فريق التطوير. ومنذ ذلك الحين، وبعملنا بنظام سريع على فترات قصيرة على مدار أسبوعين، سلّمنا ملفات عن طريق صناعة مستويات في برنامج JIRA لتعيين المهام. راجعنا، وسجلنا الملاحظات، واختبرنا. التحسينات التي أجريت نظام تنقّل عام مبسط ب7 عناصر: انتقال عاملي موحد لجميع خصائص Univision وتقليل عدد القوائم المنسدلة وتبسيط كيفية إيجاد المستخدم للمحتوى. تنقّل متجاوب للهاتف المحمول: جعل تجربة الهاتف المحمول والحاسوب هي نفسها مما يسمح للمستخدمين بإيجاد المحتوى في نفس المكان بالرغم من الجهاز المستخدم. ترك المساحات في القوائم المنسدلة والتي تمكن من الترويج للأحداث المميزة: وذلك يعني الترويج للأحداث في مساحة كافية مما يسهل على المستخدمين إيجادها بشكل متكرر خلال عرض هذه الأحداث مباشرةً على التلفاز. التنقل التفصيلي الذي يساعد المستخدم: وبسبب كثرة مراحل التنقل وخاصةً في القسم الرياضي، فإن مستخدمينا قد احتاجوا لطريقة لإرجاعهم للخلف لرؤية الفرق الرياضية والدوريات الأخرى. الدروس المستفادة أيقونة المزيد "Más" غير مفهومة: حاولنا في تصفح الهاتف المحمول أن نستخدم هذه العلامة لمساعدة المستخدم على إظهار المزيد من عناصر التنقل ولكن المستخدمين لم يفهموا هذه العلامة. بعض الوظائف لم نستطع إنشائها كما هي مصممة (مثل اللافتات الرأسية والانتقال التفصيلي): بسبب محدودية القالب، فإن الصور من نوع full-bleed (أي عدم وجود حاشية بين حافة الصورة وحافة الشاشة) و full-browser-width (أي امتداد العرض على كامل نافذة المتصفح) لم تعمل. واحتاج الانتقال التفصيلي لوقت أكثر للتنفيذ بناءًا على كيف تم انشاء الصفحات بالتسلسل الهرمي. لم يكن المحررون يستخدمون القائمة كما هو مخطط: استخدم المحررون والناشرون عناوين لم تلتزم بالحد الأقصى للأحرف واستخدموا عمود التنقل على اليسار كوصلة للصفحة الرئيسية مما أدى لخلل عند استخدام التنقل على الهاتف المحمول. بالإضافة للنظر في كيفية نجاح انتقالنا، فقد رجعنا للخلف ونظرنا إلى ما كان يعمل وما لم يكن يعمل في عمليتنا: دليل تصميم InDesign مسطح أصبح بحجم 189 صفحة. أدركنا بأن تعديل وتحديث هذا الملف كان مربكًا لنا وللمستفيدين من المشروع والمطورين بالإضافة لضمان الجودة Quality Assurance. كانت المواصفات غير واضحة مطلقًا مما أدى للحصول على منتج مختلف عن ما تم تصميمه. انجازات التصميم المسطح لم تكن مثالية. الملف ونقل المعرفة لم يشاركوا نفس الغرض. لذلك قمنا بتكرار عمليتنا كما قمنا أيضاً بتكرار المنتج. أفكار ما بعد إعادة التصميم طرحنا موقعنا على الإنترنت ولكننا لا نزال نجري بعض التحسينات عليه. وعمليتنا الجديدة تتضمن الفحص الشهري بشكل موحد مع عمليات التطوير السريعة وفريق المصممين والمطورين الذين يختبرون كيف يبدو المنتج. نعمل الآن بانتظام على شكل فترات مكونة من اسبوعين سريعي الإيقاع بجانب الفرق الأخرى ونقدم تصاميم مرئية على برنامج Sketch وأيضًا ملفات المواصفات بواسطة Frontify بالإضافة إلى نماذج تجريبية للمطور. استغرقنا الأمر بعض التصاميم السريعة بينما كان المستفيدون من المشروع يراجعون نموذج تجريبي متجاوب ولكننا أصدرنا نظام انتقال محدث ليتم اختباره عن طريق مستخدمينا. تحسينات على نظام التنقُّل الخاص بنا: تقليل ارتفاعه حتى يأخذ مساحة أقل. استخدام الاسلوب التفصيلي كعنصر انتقال ما هو مصمم في البداية. إظهار المزيد من الانتقال للمستخدم على الهاتف المحمول بينما قمنا بإزالة علامة "المزيد". استبدال لافتات العلامات التجارية بشعارات أكثر أناقة وجودة. خلال اختبار ردود الفعل القيمة والمعطاة، كانت قد أظهرت لنا بأنه لايزال لدينا بعض العمل لنقوم به والمزيد من الاختبار وإعادة التصميم بشكل أساسي. ما وصلنا له في التصميم والمعالجة يعتبر بالفعل نجاحاً لنا وبجلبنا لجمهور عالمي ولشركة كبيرة بجانبنا، فأنا أعتقد بأن هذا بنفسه يعد إنجازاً. ترجمة -بتصرف- للمقال Redesigning Univision.com لصاحبته: Jenna Marino

يستعرض هذا المقال الأمور الرئيسية التي كنتُ بحاجة إلى توضيحات بشأنها حتى أتمكَّن من العمل كمطور ووردبريس حر. أخبرني العديد من الأشخاص بأنَّهم يريدون البدء في مجال تطوير الووردبريس –وأغلبهم يرغبون في العمل لحسابهم الخاص كمطوِّري ووردبريس مستقلين-، ولكنَّهم لا يعلمون كيف يبدؤون. كلَّما فكَّرتُ في هذا الأمر، رأيته منطقيًا، إذ أنَّ تطوير الووردبريس مجال واسع وحدوده تتخطَّى تقنية الووردبريس (المربِكة جدًا) نفسها. في هذا المقال، سأسرد وأستعرض الأمور الجوهرية التي كنتُ بحاجة إلى اكتشافها ومعرفتها بنفسي لكي أتمكَّن من العمل كمطور ووردبريس حر ناجح، وتنقسم هذه الأمور إلى ثلاث فئات: الأمور الاستراتيجية: ما ينبغي عليك معرفته عن هذا المجال وعن الحياة نفسها لكي تنجح في العمل كمطور ووردبريس حر. الأمور العملية: التفاصيل المتعلقة بالمُعدّات والخدمات التي تحتاجها لكي تبدأ العمل بالفعل. الأمور التقنية: المواضيع التكنولوجيّة التي ينبغي عليك فهمها لكي تكون قادرًا على تقديم عمل جيِّد للعملاء الذين يستخدمون الووردبريس. ذكرتُ فيما يلي كل ما استطعت أن أذكره لمساعدتك في البدء بكل فئة من هذه الفئات، إذ تحدَّثتُ عن المسائل التي أنت حقًا بحاجة إلى أن يكون لديك حلول لها -أو على الأقل أن تكون قد فكرَّت فيها بعمق- حتى تستطيع النجاح في عملك كمطور ووردبريس حر. إحدى الأشياء التي يجدُر توضيحها هي أنَّ قسم «الأمور الاستراتيجية» قد كتبته وأنا أضع مطوِّري الووردبريس المستقلين نصب عينيّ: أي المطوِّرين أمثالي الذين يركِّزون على العمل مع عملاء، والذين يعملون لحسابهم الخاص أو يعملون كجزء من وكالات صغيرة جدًا، وهؤلاء هم الفئة الكبرى من مطوِّري الووردبريس المحترفين. هناك بالتأكيد وظائف أخرى في مجال تطوير الووردبريس إلى جانب العمل الحر! يمكنك أن تعمل لصالح وكالة كبيرة، ويمكنك أن تبيع الإضافات المدفوعة، ويمكنك أن تعمل في الدعم الفني لشركة استضافة، وغير ذلك. إذا كان لديك معرفة بسيطة جدًا بهذه الوظائف، فبرأيي أنَّه من المؤكد أنَّ قسم «الأمور التقنية» في هذا المقال سيكون ملائمًا لك مهما كانت الوظيفة التي اخترتَها في مجال تطوير الووردبريس، كما أنَّ قسم «الأمور العملية» سيكون ملائمًا إلى حدٍ ما، ولكنَّ درجة ملائمة قسم «الأمور الاستراتيجية» غير محددة. كن مطور ووردبريس حر: الأمور الاستراتيجية الأساسية التي ينبغي مراعاتها وضع دوافع وتوقعات واضحة إنَّ العمل في مجال تطوير الووردبريس -مثله مثل أي شيءٍ آخر- له إيجابيات وسلبيات، وله محاسن ومساوئ. يجب أن تكون دوافعك وتوقعاتك المتعلقة بعملك كمطور ووردبريس حر واضحة للغاية وواقعية. سأبدأ حديثي بإخبارك عن تجربتي في العمل. الأمور التي أحبُّها بشأن العمل في مجال تطوير الووردبريس باحترافية المرونة: يمكنني وضع كل ما يتعلق بعملي في حقيبة ظهر، وسيبقى هناك متسعًا كبيرًا للملابس. وبفضل هذا الأمر، تمكَّنتُ من الانتقال مع زوجتي إلى نيو أورلينزعندما أرادت ذلك، كما أنَّني أستطيع زيارة والديّ في هاواي لفترات طويلة أربع أو خمس مرَّات في السنة دون أن يؤثِّر ذلك على عملي. ولأنَّني مدير نفسي، أستطيع أخذ إجازات وقضاء أوقات في السفر بقدر ما يسمح به دخلي الخاص. شعور الإتقان: أصبحت محترفًا في تطوير الووردبريس منذ عام 2012، وأشعر الآن بأنَّني جيدٌ جدًا جدًا في عملي؛ فعندما يحتاج الناس إلى مساعدة في الجوانب التقنية المتعلقة بالووردبريس، عادةً ما أكون قادرًا على إنجازها بسرعة أكبر مما يتوقعون أو إسداء نصائح رائعة لهم تساعدهم على التقدُّم. هذا الأمر مدعاة للسرور، خصوصًا عندما تكون في صدد إصلاح مشروع ووكومرس تكلفته مائة ألف دولار قد أخفق المطوِّر السابق غير الكفء تمامًا في إنجازه، أو عندما تساهم بشكل كبير في تحديث وتحسين وجود مؤسسة -تهتم حقًا بها- على شبكة الإنترنت. إنَّ تطوير الووردبريس مهنة حقيقية، وإتقانك لها يمنحك شعورًا رائعًا. يُمكن أن يكون ممتعًا: يتضمن العمل الحر في مجال تطوير الووردبريس الكثير من التعاملات مع الناس، والكثير من عمليات حل المشكلات البسيطة أو المتوسطة، والكثير من البحث عبر الإنترنت، والكثير من الأمور التي تتطلَّب منك الإبداع. بمجرد أن تصبح خبيرًا في المجال، ستصبح عملية التطوير (وتقابلها عملية إدارة العلاقات مع العملاء) كأنَّك تقضي يومك في حل السودوكو وبناء مجسَّمات الطائرات. إنَّه ليس عملًا سيئًا. الفائدة العامة: الجميع تقريبًا يمتلكون أو يحتاجون أو يريدون موقعًا لغرضٍ أو لآخر، وغالبًا ما يكون الووردبريس هو الخيار الأمثل. لهذا، تتلاءم إمكانياتك في مجال تطوير الووردبريس بطريقة رائعة مع أي مشروع قد يقع بين يديك. الأمور التي لا أحبُّها بشأن العمل في مجال تطوير الووردبريس باحترافية قد لا تحصل على ما تسدّ به جوعك: الأجر الذي أقبضه في نهاية الشهر يكون لقاء العمل الذي أنجزتُه لأشخاص محدَّدين (الأشخاص الذين حوَّلتُهم إلى زبائن) خلال ذلك الشهر. إذا استنفدتَ كل طرق جذب العملاء المحتملين، أو إذا مررتَ بشهرٍ سيء على نحوٍ غير متوقع، فمن المحتمل جدًا ألّا تجني مالًا. بعبارة أخرى: أنت لا تملك أمانًا وظيفيًا، وكل ما تملكه هو ما توفِّره وما تعيل به نفسك. أنت عُرضَة للطلب: لا أحبِّذ -بصراحة- الأوقات التي يرن فيها الهاتف أو تصلني فيها رسالة بريد إلكتروني لأنَّه في كثير من الأحيان يتعلق الأمر بعميل لديه مشكلة مريعة (أو تبدو مريعة) يريد مني أن أحلّها، إذ يعتمد الأشخاص عليّ في ذلك. هناك طرق لإدارة التوقعات والتعامل معها بطريقة مناسبة، ولكن هذا لا يزيل التوتر الكامن في كونك مسؤولًا عن المساعدة في إيجاد الحلول لأي مشكلة قد تنشأ عن عشرات المواقع. لحسن حظي أنّني جيّد في عملي؛ فمن واقع خبرتي، يمكن أن يكون وجود أشخاص يعتمدون عليك بهذه الطريقة مزعجًا جدًا إذا لم تكن ذا معرفة بما تقوم به. من الصعب التفاوض مع العملاء حول الميزانية: بعض المطوِّرين قد لا تواجههم هذه المشكلة، ولكن طريقتي الخاصة في العمل بسيطة وغير رسمية إلى حدٍ ما -وهي تختلف كثيرًا عن طريقة الوكالات الكبيرة التي تتولّى العمل على مشاريع تبلغ تكلفتها مئات الآلاف من الدولارت ويستغرق إنجازها عدة سنوات-، إذ أميل إلى جذب أصحاب الأعمال التجارية الصغيرة الذين أُفضِّل العمل معهم على أي حال. في هذا السياق، تكون الميزانيات محدودة، وهناك حاجة دائمة إلى الشفافية. من المرهق جدًا حل المشكلات التقنية المرتبطة بالمشاريع التي تواجه مشكلات استراتيجية لا يمكنني مساعدة مالكي المواقع على التعامل معها (من الواضح أنَّهم عادةً ما يكونون مصدر هذه المشكلات)، إذ أشعر بأنَّني أساعد الناس على إنفاق أموالهم بطريقة غير عقلانية في هذه الحالة. الشعور بالصدمة: معظم عملائي لا يكونون على معرفة بي في بداية رحلتهم عبر الويب؛ بل يجدونني في منتصفها، وهم يشعرون بخيبة أمل بسبب العديد من المطوِّرين نصف المؤهلين الذين لم يكونوا على دراية بكيفية التواصل. المواقع الخاصَّة بهؤلاء العملاء تنمُّ عن الاختيارات التقنية غير الصائبة، ومن واقع ما رأيت فإنَّ معظم مواقع الووردبريس عبارة عن تجربة سيئة بالنسبة لمستخدميها النهائيين، وذلك بسبب قلة عدد "مطوِّري" الووردبريس المؤهَّلين بالفعل ولأنَّ أسوأ الأجزاء في نظام الووردبريس هي التي يتم تسويقها على النحو الأفضل، والتفكير يوميًا في هذا الأمر يبعث على الإحباط حتى لو كنت جزءًا من الحل. هذه مجرد وجهة نظري، والمغزى هو أنَّ عليك فهم ما أنت مُقبِلٌ عليه وسبب إقبالك عليه. تحدَّث إلى الأشخاص الآخرين الذين يقومون بما ترغب في القيام به، واحرص على أنَّ يكون هناك انسجام بينك وبينهم. في هذه الحالة، يمكنك العثور على الكثير من هؤلاء الأشخاص في اللقاءات التي تُعقد للحديث عن الووردبريس في مجتمعك المحلي. اعرض عليهم أن تشتري لهم وجبة غداء، وسيقبل معظمهم عرضك، كما قد يكون بعضهم -في الحقيقة- بحاجة إلى وجبة الغداء. أنصحكم أيضًا بشدة بقراءة هذا المقال الذي كتبَتْه كاري ديلز (Carrie Dils) وقد تحدَّثَتْ فيه عن مميزات أن تكون مطور ووردبريس حر، إلى جانب التحديات المصاحبة لذلك. الأمور التي قد تجعل العمل الحر في مجال تطوير الووردبريس غير مناسب لك نقطة أخيرة متعلقة بهذا الموضوع: لا أنصح أي أحد بالخوض في العمل الحر في مجال تطوير الووردبريس إذا انطبقت عليه إحدى العبارتين التاليتين أو كلتيهما: أنت لا تملك مهارات عامة قوية في الجوانب التقنية وفي حل المشكلات، وهذا يعني أنَّك لا تستطيع عمومًا التعامل مع المشاريع التقنية المعقدة (مثل مشروع jailbreak my phone) والتغلُّب على تحدياتها من خلال البحث عبر الإنترنت ومحاولة إدخال التعديلات والتحسينات عليها. تنزعج كثيرًا من خدمة العملاء، وهذا يعني أنَّك لا ترغب في التعامل مع الناس، ولا تفهم ما يريدونه، وتكره مضايقاتهم، وتكره تقديم التفسيرات، وتخوض في الجدالات بسهولة، وهكذا. إذا كنت تعاني من نقطتي الضعف السابقتين ولديك شريك يمكنه التغلُّب عليهما، فلا بأس في هذا. لكن إذا كنت تعمل لوحدك وتحاول أن تبني عملك الحر على هذا الأساس، فسوف تواجه عقبات في طريقك. المخطط الزمني والالتزام بالوقت ما هي ظروف حياتك الحالية –من حيث أوقات الفراغ ووضعك المالي- وكيف يتلاءم العمل الحر في مجال تطوير الووردبريس معها؟ هل تريد أن تتخذ من تطوير الووردبريس عملًا بدوام كامل؟ إذا كنت ستفعل ذلك، ما هو مخططك الزمني لتحقيق ذلك؟ وكيف ستشدُّ من أزر نفسك خلال عملية التحوُّل؟ تختلف الظروف من شخصٍ لآخر، لذلك لن أحاول إسداء النصائح لحالات معينة؛ بل سأذكر بعض المعلومات والحلول لتأخذها في الاعتبار مهما كانت ظروفك الحالية: ستقضي وقتًا صعبًا في سبيل الحصول على ما يكفي من الساعات مدفوعة الأجر إلى أن تؤتي الطرق التي تنتهجها لإيجاد العملاء أُكُلها، وتبدأ قائمة عملائك تمتلئ بعملاء رائعين. إذا كنت تريد أن تصبح مطور ووردبريس حر بدوام كامل، فمن المرجَّح أن يكون العائد الذي ستجنيه خلال الثلاثة أشهر الأولى على الأقل -وربما الستة أشهر- ضئيلًا، وأن تمضي سنة كاملة أو أكثر دون أن تكون واثقًا ممّا إذا كنت ستجني شهريًا ما يعادل راتب الطبقة المتوسطة. لا تستغرق الأعمال التي تقوم بها للحصول على عملاء –مثل الذهاب إلى فعاليات التشبيك، وإنشاء موقع إلكتروني لعرض نماذج أعمالك، والاستفادة من شبكة علاقاتك الحالية- 40 ساعة أسبوعيًا، إذ ينتهي بك المطاف إلى قضاء الوقت في انتظار أن يتواصل معك أحد العملاء المحتملين، أو في انتظار أن يحين موعد فعالية التشبيك الأسبوعية التالية، وما إلى ذلك. بعبارة أخرى: من الصعب جعل «عملية الحصول على عملاء» عملًا بدوام كامل إلا إذا لم تكن تمانع التسويق باستخدام أسلوب الاتصال البارد (cold calling)، أو توزيع النشرات الإعلانية الخاصة بالأعمال التجارية المحلية، وغيرها. لن تكون لك قدم ثابتة في الجوانب التقنية لمدة عام على الأقل، وهذا يعني أنَّه ستواجهك باستمرار مشكلات لا تعرف كيفية حلّها. هذه النقطة هي مجرد تنبيه لك حتى تستعد لخوض فترة صعبة وبعض اللحظات المروِّعة. (ألق نظرة على بند «من الذي سيكون طوق نجاتك» المذكور لاحقًا للتعرُّف على المزيد من الاقتراحات المتعلِّقة بهذا الأمر.) لا أعلم ما إذا كان من الأفضل مواجهة هذ الفترة من خلال العمل كمطور ووردبريس بدوام كامل أم بدوام جزئي، ولكن ربما يكون العمل بدوام كامل هو الأفضل لأنَّه لن يكون لديك خيار سوى التصدِّي للعقبات عندما تعترض طريقك. ذكرتُ هذه النقطة هنا لأنَّه ينبغي عليك أن تنظِّم أمورك المالية لفترة طويلة نسبيًا بينما تحاول التسويق لنفسك بصفتك مطور ووردبريس يتقاضى أجرًا، دون أن تكون متأكدًا ما إذا كنت ستحصل حقًا على المال. غالبًا ما يبدأ العمل الحر في مجال تطوير الووردبريس بالنمو ببطء، كغيره من الأمور الأخرى. لذا، أنصحك بأن يكون لديك قدرًا لا بأس به من الادخار الشخصي، أو أن تحافظ على التزاماتك الحالية إلى أن تصبح متأكدًا من أنَّ عملك في مجال الووردبريس سيكفيك مؤنتك. في الحقيقة، لم أفعل ذلك وقد انتهى الأمر على ما يرام، إذ أنَّ الطريقة الصعبة التي انتهجتُها كانت مفيدة جدًا، ولكنَّها لم تكن ممتعة. كيف تحدِّد تسعيرة عملك؟ أنا أُفضِّل أن يكون تسعير الأعمال في مجال تطوير الووردبريس على أساس الساعة، ما لم يكن لديك سبب قوي لاختيار أسلوب آخر. الكثير من الأشخاص لا يعجبهم التسعير على أساس الساعة، ويفضِّلون التسعير على أساس المشروع أو التسعير على أساس القيمة (value pricing)، ولكنّني شخصيًا وجدتُ أنَّ جميع الأساليب عدا التسعير على أساس الساعة من الصعب جدًا على المستقل أن يطبِّقها مع معظم العملاء. يؤدِّي التسعير على أساس المشروع إلى الخوض في عمليات طويلة لتقدير قيمة المشروع والتفاوض مع الزبائن، أما التسعير على أساس القيمة يوقعك في حبال العمل التجاري الخاص بالزبون على نطاق أوسع. لا بأس بهذه الأساليب إذا كنت ستساهم على نحو كبير لمدة سنوات في توجيه دفة العديد من الجوانب الاستراتيجية الواسعة للعمل التجاري الخاص بالعميل، ولكن إذا كانت وظيفتك مقتصرة على تقديم الحلول التقنية لجزء واحد من أجزاء العمل التجاري (هذا هو حال أغلب مشاريع العمل الحر)، فستصبح وكأنَّك سبَّاكًا يتقاضى أجره من خلال الحصول على حقوق ملكية عقارية! إرشادات عامة بشأن التسعير فيما يلي بعض الإرشادات العامة بشأن تسعير الأعمال في مجال تطوير الووردبريس على أساس الساعة (حسب ما هو متعارف عليه في الولايات المتحدة لمطوري الووردبريس المستقلين): ينبغي عليك ألا تطلب سعرًا أقل من 50$ في الساعة مقابل خدماتك. يُعَدُّ 50$ أو 60$ سعرًا متواضعًا ومناسبًا في بدايات عملك، ولكن ينبغي عليك أن تتطلَّع إلى أن يصل السعر إلى ما لا يقل عن 75$ في غضون سنة، وإلى ما لا يقل عن 100$ في غضون سنتين. ملاحظة: تختلف الأسعار من بلدٍ لآخر، وغالبًا ما تكون الأسعار في البلاد العربية أقل بكثير من الأسعار التي سبق ذكرها. ما يهم حقًا هو مدى براعتك في الأمور التي تتقاضى أجرًا على أساس الساعة للقيام بها. بالنسبة لي، أطلب إما 100$ أو 125$ مقابل الساعة. خبرتي أكبر من خبرة المطورين المبتدئين وتكلفة توظيفي أرخص بكثير من تكلفة توظيف مطور مبتدئ يطلب 50$ مقابل الساعة، إذ أنَّ هؤلاء المطورين سيكلِّفونك آلاف الدولارات بسبب حلولهم السيئة، وسيبقون عالقين في مسألة لساعات، وبعدها سيضعون الحل الخطأ. لقد تطلَّبت مني حوالي 80% من مشاريع العمل الحر التي عملتُ على إنجازها قضاء الساعات لتعديل العمل الذي قام به المطور السابق الذي لم يكون كفئًا، ومن الأمثلة على تلك المشاريع: بناء برمجي متهالك وغير متوافق مكوَّن من 50 إضافة، أو التعامل مع تركيب تكنولوجي سيء (HostGator، وقالب Divi، ومئات الإعدادات للحقول المخصصة المتطورة [AFC]، و Visual Composer)، أو أخطاء تعرقل عمل الموقع، أو مشكلات في SEO، وما إلى ذلك. ملاحظة مهمة: هذه الأسعار من وجهة نظر الكاتب وموقعه وقد لا تنطبق على العالم العربي وتكون أقل من ذلك بكثير، فأرجو أخذ ذلك بالحسبان. ارفع أسعارك دائمًا عندما ترتقي في سلَّم الثقة والكفاءة، ينبغي عليك أن ترتفع أسعارك وفقًا لذلك. لا أستطيع أن أرسم لك منحى محدَّد يوضح كيف ومتى تغيِّر أسعارك، ولكنَّني سأقول: ارفع أسعارك فحسب؛ فالعملاء لا يبالون بالقدر الذي تظنه، كما أنَّ المال الإضافي الذي ستكسبه واقعي جدًا. فيما يلي بعض المصادر الجيِّدة التي يمكن أن تساعدك في البدء في فهم الأمور الماليّة كمطور ووردبريس حر، وفي معرفة كيفية تحديد أسعارك الخاصة على أساس الساعة: حاسبة تكلفة العمل الحر على أساس الساعة تكاليف تطوير مواقع الووردبريس المخصصة مقدار الوقت الذي يستغرقه إنجاز مشاريع الووردبريس تكلفة إنشاء إضافة ووردبريس (التعامل مع أسئلة العملاء ذات النهايات المفتوحة بخصوص التكلفة) دليل جيِّد يتحدَّث عن استراتيجيات التسعير التي لا تبيع بأسعار أقل من المنافسين (على اعتبار أنَّك متعاقد) دورة تدريبية مجانية عبر البريد الإلكتروني حول التسعير للمستقلين كيفية العثور على عملاء بالنسبة لمطوِّري الووردبريس المستقلين، فإنَّ الإجابة عن سؤال «كيف أحصل على عملاء؟» هي التي تحدد ما إذا كانوا سيكسبون مالًا أم لا. لو كان لهذا السؤال إجابة سهلة، لكنتَ تعرفها بالفعل، ولكن هناك إرشادات جيِّدة تساعدك على البدء. أقترح عليك الاطلاع على هذين المقالين -هنا وهنا-، إذ يلقيان نظرة عميقة على هذا الموضوع. أضع أمامك أيضًا القواعد الرئيسية التي أظنُّها فعّالة في بداية انطلاقتك: حضور فعاليات التشبيك بين الأشخاص. استغلال شبكة علاقاتك الشخصية الحالية. التخصُّص وإقامة العلاقات مع من يعملون في مجالك. استحضار قائمة الأشخاص المرجعيين من عملائك الأوائل القلائل، وحتى من الأشخاص الذين عرفتهم من خلال وظائفك السابقة أو التدريبات أو المشاريع التطوعية، وغيرها. ملخَّص العناصر الأربعة السابقة هو: تحدَّث شخصيًا إلى أي شخص يمكنك الحديث معه داخل شبكة علاقاتك الحالية أو خارجها. قد تكون الاستراتيجيات طويلة المدى –مثل التسويق بالمحتوى والتسويق عبر وسائل التواصل الاجتماعي- ممتازة، ولكنَّها من غير المحتمل أن تكون مصدرًا للحصول على العملاء المحتملين في المدى القريب. من الذي سيكون طوق نجاتك في المواقف الصعبة دائمًا ما كان شريكي ديفيد هو سلاحي السري في مجال تطوير الووردبريس؛ فهو مطوِّر أمهر مني باستمرار ويسبقني في المجال التفني بمقدار 12 إلى 24 شهرًا. لقد تعاملتُ مع الكثير من استراتيجيات العمل وعلاقات العملاء، وأعلم -حتى هذا اليوم- أنَّ ديفيد سيكون موجودًا لينتشلني إذا ما تعرَّضت إلى مسألة تقنية صعبة (مثل أوامر Git المعقدة). بالنسبة للذين ليس لديهم شريك موهوب يعمل كمهندس برمجيات، أدرك أهمية امتلاكهم طريقة لـِ "السباحة" عوضًا عن "الغرق" عندما يواجهون موضوع تقني لا يفهمونه أثناء عملهم على مشروع لأحد العملاء. ما الذي أنصح به؟ بصراحة، لا يوجد حاليًا شيء متين وراسخ يمكن اعتباره طوق النجاة لمطور الووردبريس الحر، ولكن هذه أفضل ثلاثة اقتراحات يمكنك تطبيقها في وقتنا الحالي: اذهب إلى اللقاءات التي تُعقد للحديث عن الووردبريس في مجتمعك المحلي؛ فهذه اللقاءات تكون ممتلئة بالمطوِّرين الذين ستكون سعيدًا بمساعدتهم لك في تعلُّم أشياء لا تعرفها؛ بل حتى في تعلُّم أشياء لا تعرف أنَّك لا تعرفها. انضم إلى مجموعة IWP ومجموعة AWP على فيسبوك واستغلّهما بأريحية. حاول أن تقيم علاقة مع مطوِّر متمكِّن في مجالك، واعرض عليه أن تعطيه أجرًا على أساس الساعة مقابل أن يساعدك في استكشاف الأخطاء التقنية وإصلاحها عند الحاجة. في ماذا تتخصَّص؟ ليس من السهل أن تكون «مجرَّد مطور ووردبريس»؛ فما يقع تحت هذا المُسَّمى ضيِّق إلى حدٍ ما، كما أنَّك قد تسمع الأسئلة الآتية من العملاء: من الرائع أنَّك قمت بتثبيت الإضافة المناسبة، ولكنَّها تبدو الآن سيئة للغاية، هل يمكنك أن تجعلها أكثر أناقة وعصرية ومتناغمة مع هوية علامتنا التجارية؟ يخبروننا أنَّنا من المفترض أن يكون لدينا قسم المدونة، ولكن لا أملك أدنى فكرة عمّا أكتب فيه. أريد أن يكون موقعي الإلكتروني متوافقًا مع محركات البحث، هل تستطيع تحقيق ذلك؟ هل ينبغي علينا إنشاء نشرة بريدية؟ هل نحن بحاجة إلى أن يكون لدينا حساب إنستجرام وماذا ننشر عليه؟ متى سيبدأ الموقع الإلكتروني في تحقيق المبيعات؟ تشير كل هذه الأسئلة إلى مجموعة من المهارات التي تقع خارج حدود المهارات الأساسية الخاصة بتطوير الووردبريس، ومن المؤكَّد أنَّك ستجذب لنفسك المزيد من الانتباه في سوق العمل إذا كنت قادرًا على تقديم المساعدة في مجالات متعددة. على حد علمي، فإنَّ أفضل تخصُّص من التخصصات الواقعة ضمن الحدود التقنية لتطوير الووردبريس هو التجارة الإلكترونية، خاصةً الووكومرس. إنَّه في الوقع عالم قائم بذاته، وهناك الكثير من الأموال التي يمكن جنيها من خلاله لأنَّ العملاء أنفسهم في هذا المجال يجنون الأموال. اقتراحي الوحيد هو أن تبدأ التعامل مع العملاء الذين يستخدمون الووكومرس بتواضع؛ فالووكومرس يتطلَّب بضعة مئات من الساعات حتى تتمكَّن من فهمه جيدًا لأنَّ الزبائن سيأتونك بمختلف الحالات الفريدة، وإذا كنت تتقدَّم بغرور، فمن الممكن أن تتسبَّب في انهيار أعمال ومشاريع حقيقية، وليس مدونات مختصَّة بالسفر. المهارات التكميلية لتطوير الووردبريس أفضل ما يمكن القيام به -من وجهة نظري- هو أن تبني مجموعة مهارات خارج إطار تطوير الووردبريس، وأن تبيع خدماتك كحزمة واحدة. تشمل المسمَّيات الوظيفية الرئيسية الأخرى -غير «مطور ووردبريس»- التي يحتاجها معظم العملاء ما يلي: خبير SEO. مصمِّم ويب وجرافيك. مسوِّق إلكتروني: التسويق عبر وسائل التواصل الاجتماعي والتسويق بالمحتوى. كاتب محتوى (يتطلَّب فهمًا عميقًا لتحسين محركات البحث والتسويق بالمحتوى). إذا كنت تمتلك ذوقًا بصريًا، فمن الرائع أن تكون مصمِّمًا/مطوِّرًا. إذا كنت تجيد المهارات العامة لحل المشكلات، فمن المرجَّح أن يكون تعلُّم واحتراف SEO أقل تعقيدًا من تعلُّم تطوير الووردبريس بالنسبة لك، كما أنَّهما يشكِّلان معًا مزيجًا رائعًا. إذا كنت شخصًا اجتماعيًا، فإنَّ الكثير من العملاء لا يملكون أدنى فكرة عن كيفية التسويق لأنفسهم وهم بحاجة ماسَّة تمامًا إلى توضيحات بشأن هذا الأمر. إذا كنت تستطيع الكتابة، فهذا رائع، ولكنَّك أيضًا ستحتاج معظم الأمور المذكورة أعلاه. تحديد الأشياء غير الملموسة التي تجعلك متفرِّدًا لقد خاض العديد من الأشخاص الكثير من التجارب السيئة مع مطوِّري الووردبريس. كيف تميِّز نفسك عنهم بناءً على هذه المعلومة؟ هل أنت ودود على نحو استثنائي؟ متجاوب على نحو استثنائي؟ هل أنت شريك في الاستراتيجية الخاصَّة بالعميل (على العكس من شخص ينجز ما يطلبه الناس منه فحسب)؟ هل لديك أسلوب تسعير استثنائي يتَّسم بالوضوح والشفافية؟ أو قدرة استثنائية على التغيير والتحسين بسرعة وفاعلية؟ أو قدرة استثنائية على التكيُّف مع ميزانية ضئيلة؟ تكون الإجابات في الوضع المثالي «نعم»، ولكن ما يهم هو قضاء بعض الوقت في معرفة الأسباب التي ستجعل العملاء سعداء بتوظيفك أنت بدلًا من توظيف شخص آخر بنفس السعر لإنجاز نفس العمل. ما هي الأشياء غير الملموسة المرتبطة بطريقتك في إنجاز الأعمال بصفتك مطور ووردبريس حر والتي تجعل العمل معك هو الخيار الأمثل لعملائك المحتملين؟ عندما تكون مدركًا لهذه الأشياء غير الملموسة، وعندما تدعمها بطريقة تعاملك على الهاتف، وطريقة عرضك لإنجازاتك وشهاداتك وما إلى ذلك، سيبدأ الناس حينها في إيلاء الاهتمام لك. التعاقد مع محترفين في المجالات الأخرى في الحقيقة، لا يستطيع شخص واحد فقط أو حتى شخصان امتلاك جميع المهارات التي يحتاجها العملاء العاديون لجعل مشاريعهم ناجحة في سوق العمل، ولذلك ستحتاج إلى تكوين علاقات مع أشخاص محترفين يمتلكون المهارات التي لا تمتلكها، وستُحيل إليهم عددًا من الأعمال، والأمر الرائع أنَّهم سيُحيلون إليك أعمالًا أيضًا! خلاصة الموضوع هي أنَّ الأعمال التي قد تحتاج إلى أن تسندها للغير تتضمن الآتي: خبير SEO. مصمِّم ويب وجرافيك. مسوِّق إلكتروني: التسويق عبر وسائل التواصل الاجتماعي والتسويق بالمحتوى. كاتب محتوى (يتطلَّب فهمًا عميقًا لتحسين محركات البحث والتسويق بالمحتوى). إذا كنت لا تعلم أين تبدأ في العثور على هؤلاء الأشخاص، فاذهب إلى اللقاءات المحلية التي تُنظَّم للحديث عن المهارة التي تبحث عنها. كن مطور ووردبريس حر: الأمور العملية الأساسية التي ينبغي مراعاتها هذا القسم هو الأقل أهمية من بين الأقسام الثلاثة، وهو يتحدَّث عن الأشياء الملموسة التي ينبغي أن تقوم بها لكي تصبح جاهزًا للانطلاق في رحاب العمل الحر في مجال تطوير الووردبريس. إجمالًا، ينبغي أن يكون توجُّهك مبنيًا على السرعة والبساطة؛ افعل أبسط وأرخص الأشياء بقدر ما تستطيع لأنَّ الأمر برُمَّته مرتبط بأن تعثر على العملاء المناسبين (جانب استراتيجي) وأن تعرض عليهم القيمة أو الخدمة المناسبة (جانب استراتيجي وتقني) حتى ينجح عملك ويستمر. سنتحدَّث الآن عن التفاصيل. تسجيل عملك ليصبح رسميًا يمكنك تأجيل هذا الأمر حتى تجد نفسك جادًّا بشأنه، ولكن هناك مزايا من حيث الضرائب والالتزامات لكونك مسجَّلًا رسميًا عندما تبدأ في الحصول على عوائد حقيقية. لقد سجَّلنا أنفسنا كشركة تجارية صغيرة (مدرجة تحت تصنيف S Corp في الولايات المتحدة) من خلال شركة Rocket Lawyer (شركة LegalZoom تقدِّم خدمات مماثة)، وكانت تكلفة ذلك رخيصة نسبيًا ولم تتجاوز 500$. عمومًا، كلَّما استطعت أن تولي اهتمامًا أقل لهيكل الشركة، كان ذلك أفضل من واقع تجربتنا. بناء موقع إلكتروني لعرض نماذج أعمالك بصفتك مطور ووردبريس حر قد بدأ رحلته للتو، فسوف تحتاج إلى مراعاة المعايير الثلاثة التالية عندما تبني موقعًا إلكترونيًا تعرض فيه نماذج أعمالك: أن يبدو احترافيًا. أن يبيِّن مكانتك التي ترغب في إظهارها. أن يكون رخيص الثمن ويُبنى بسرعة. لا ينبغي عليك الاهتمام كثيرًا بتفاصيل الموقع الذي ستعرض فيه أعمالك وكأنَّه جزء مهم جدًا من عملك؛ بل يكفي أن تجعل هدفك هو أن يبدو الموقع احترافيًا وأن يعرض علامتك التجارية بطريقة مناسبة، ولا يجب أن يكون مبتكَرًا للغاية أو مبنيًا من نقطة الصفر (ربما تودُّ القيام بهذا لكي تثبت أنَّك قادرٌ على بنائه؟!) أو ما شابه ذلك. إذا كنت لا تعلم من أين تبدأ، فأقترح عليك إلقاء نظرة على متاجر القوالب المذكورة فيما بعد. لا بأس في أن تدفع بضعة مئات من الدولارات لمصمِّم جيِّد مقابل حصولك على نصائح بخصوص الشعار وتصميم الموقع إذا لم تكن متمكِّنًا في هذا المجال. لكن -إجمالًا- ينبغي أن يكون هذا المشروع رخيص الثمن وبسيطًا، وأن يكون التركيز منصبًا على المحتوى: كيف ستُظهِر مكانتك من خلاله؟ هل يبيِّن موقعك للزوَّار لماذا ينبغي عليهم أن يختاروك أنت بدلًا من اختيار غيرك بطريقة مقنعة؟ تحتاج -أيضًا- إلى أن يكون في موقعك قسم يعرض نماذج أعمالك حتى تثبت للآخرين أهليتك. إذا كنت جديدًا في عالم التطوير، ففي هذه الحالة عليك أن تكون مبدعًا؛ فمثلًا: إذا كنت قد تطوَّعت في المكتبة المحلية وأجريت بعض التحسينات على الموقع الإلكتروني الخاص بها، يمكنك أن توضِّح ذلك في معرض أعمالك. يعتبر وجود عنصر أو عنصرين في معرض أعمالك كافيًا للبدء في العمل الحر في مجال تطوير الووردبريس، إلى جانب قدرتك على أن تشير إلى خبرتك السابقة أثناء تفاعلك مع العملاء. العتاد أقصد بكلمة «عتاد» المعدَّات والأجهزة التي تحتاجها للقيام بعملك، وأهم ما يمكنني إخبارك به في هذا السياق هو أنَّ طراز العتاد لا يهم. سأذكر فيما يلي قائمة المعدَّات التي أستخدمها لتنفيذ عملي بصفتي مطور ووردبريس حر: حاسوب محمول يمكن لأي حاسوب محمول قد صُنع خلال السنوات العشر الماضية أن يؤدِّي الغرض. أنا أستخدم جهازًا يعمل بنظام ويندوز، ولكن إذا كنتَ شخصًا قابلًا للتكيُّف، فمن الأفضل لك استخدام جهاز ماك. يكره الأشخاص التقنيّون نظام ويندوز، ويفترضون أنَّك تستخدم نظام الماك عندما يكتبون شروحاتهم. يعتبر سطر الأوامر في نظام ويندوز سيئًا، ولكن لن يشكِّل هذا مشكلة حقيقية لعملك إلا إذا كنت تقضي زمنًا حقيقيًا وأنت تعمل على سطر الأوامر، وحتى لو كان الحال كذلك فهو ليس بدرجة كبيرة من السوء. هاتف لقد أضعت هاتفي القديم مؤخرًا، لذلك أحضرتُ بديلًا له من متجر وول مارت بقيمة 30$، ولكن من الضروري امتلاك هاتف في جميع الأحوال. سماعات الرأس السماعات التي تحجب الضوضاء جيِّدة حقًا، ولكن لا بأس في سماعات الأذن رخيصة الثمن إذا كانت ميزانيتك محدودة. ميكروفون أستخدم ميكروفون Blue Yeti حوالي مرتين في الشهر لتسجيل مقاطع فيديو، كما أستخدمه إذا لم يكن صوتي واضحًا أثناء إجراء المكالمات عبر برنامج Zoom أو برنامج Skype، ولكن من المؤكَّد أنَّ الميكروفون من الأجهزة التي يمكن تأجيل شرائها. البرامج العملية المطلوبة لا تساعدك هذه البرامج في تطوير الووردبريس بطريقة مباشرة، ولكنَّها مهمة لتنظيم وإنجاز عملك. برامج إدارة الوقت أنت بحاجة إلى معرفة الطريقة التي تمضي بها وقتك، وذلك لزيادة الوقت الذي تتقاضى عليه أجرًا ولتحديد مقدار المال الذي ستطلبه من زبائنك. إنَّ برنامج Toggl جيِّد لهذا الغرض. برامج إدارة الحسابات وجدول الرواتب يُعَدُّ برنامج QuickBooks Online جيّدًا لإدارة الحسابات وإعداد الفواتير، ويمكنك استخدامه أيضًا لجدول الرواتب إذا أردت. نحن نلجأ إلى شركة محاسبة قانونية محلية معتمدة، وهذا يفيدنا جدًا لأنَّها تتولّى كل أمورنا المتعلقة بالاستقطاعات والضرائب، ونحن واثقين من صحة ما تقوم به. تصل قيمة التكاليف الخاصة بنا إلى 60$ شهريًا مقابل الرواتب وحوالي 700$ سنويًا مقابل الضرائب. برامج مكالمات الفيديو إنَّ برنامج Zoom ممتاز. ينبغي أيضًا أن يكون لديك برنامج Skype، ولكن أرى أنَّه يزداد سوءًا منذ أن اشترته شركة مايكروسوفت. برامج تخزين الملفات أحبُّ استخدام دروب بوكس وجوجل درايف، والنسخة المدفوعة من دروب بوكس جديرة بالشراء إذا لم تكن تعاني من ضائقة مالية. برامج إدارة المشاريع يُعَدُّ برنامج Trello رائعًا، وهو مناسب للاستخدام الفردي، ولإدارة المشاريع مع فريق العمل، ولإدارة المشاريع الخاصة بالعملاء أيضًا. برامج الدردشة والمحادثة إذا كان لديك شركاء في العمل، فقد تحتاج إلى امتلاك حساب مجاني في برنامج Slack حتى تتعاونوا مع بعضكم بعضًا. برامج تعديل الصور بطبيعة الحال، من المهم أن يكون لديك معرفة بسيطة بكيفية تعديل الصور. يعدُّ برنامج GIMP جيّدًا جدًا ومجانيًا وهو نسخة مقلَّدة من برنامج الفوتوشوب. أنصحكم بالحصول عليه وتعلُّم أساسياته. كن مطور ووردبريس حر: الأمور التقنية الأساسية التي ينبغي مراعاتها على الأرجح أنَّك كنتَ تظنُّ أن يكون محور حديث المقال كلّه حول هذا القسم التقني، والذي ستتعرف من خلاله على المهارات البرمجية التي أنت بحاجة إلى امتلاكها حتى تبدأ في التسويق لنفسك كمطور ووردبريس حر. من المؤكَّد أنَّ هذا القسم مهم جدًا، وبدونه لن تقوم لك قائمة في العمل الحر في مجال تطوير الووردبريس. سنتناول فيما يلي بشيء من التفصيل عناصر الووردبريس التقنية الأساسية التي ينبغي أن تكون على علم بها بصفتك مطور ووردبريس حر. ما المشاريع التي تصلح الووردبريس في تطويرها؟ لماذا؟ متى تستخدمها؟ ما الذي يجعل الووردبريس مُجديًا؟ لماذا هو أفضل من Joomla ومن Drupal؟ لماذا ينبغي أن أستخدم الووردبريس في تطوير موقعي؟ أخبرني رئيسي أنَّ الووردبريس غير آمنة، فهل هذا صحيح؟ يوجد لدى موقع GoDaddy منشئ صفحات خاص به، فلماذا لا أستخدمه؟ أليس تكلفة إنشاء المواقع باستخدام Wix أرخص بكثير إذا أخذنا في الاعتبار الاستضافة وغيرها من الأمور؟ تحتاج إلى أن يكون لديك إجابات ذكية عن هذه الأسئلة، وليس ذلك لكي تخبرها لعملائك فحسب، ولكن لكي تكون أيضًا مدركًا للخدمات التي تقدِّمها في سوق العمل. إنَّ تحديد البرامج التي ستستخدمها ومعرفة طبيعة عملها -ما يمكنها القيام به وما لا يمكنها القيام به وكيف تتوافق مع البرامج الأخرى- هو من المسائل التقنية. ستقدِّم لك المقالات التالية إرشادات عامة بشأن الأسباب التي تدفعك إلى استخدام الووردبريس، وبشأن الحالات المناسبة لاستخدامها: المقال الأول: يستعرض مخطط يعطي فكرة بسيطة ومفيدة عن أنواع المشاريع التي تكون الووردبريس مناسبة لها وأنواع المشاريع التي لا تكون الووردبريس مناسبة لها. المقال الثاني: يتحدَّث فيه شريكي ديفيد عن الأسباب التي تدفعك لاستخدام الووردبريس. المقال الثالث: يقدِّم مقدمة عن Squarespace، ويبيِّن الحالات التي يكون فيها استخدام Squarespace أنسب من استخدام الووردبريس والعكس. البرامج المخصَّصة للمطورين ينطبق هنا ما ذكرناه سابقًا وهو أنَّ «طراز العتاد لا يهم»، إذ ينبغي أن تكون البرامج التي تستخدمها للتفاعل تقنيًا مع الووردبريس بسيطة جدًا. أخبرني بيبين ويليامسون (Pippin Williamson) ذات مرة بأنَّ البرامج المثبَّتة على حاسوبه المحمول بسيطة لدرجة أنَّه يستطيع إلقائه في بحيرة وأن يكون جاهزًا بعد 30 دقيقة للعمل على حاسوب جديد. أن يأتي هذا الكلام من المسؤول عن شركة تقدَّر قيمتها عدة ملايين من الدولارات وتعمل في مجال تطوير إضافات الووردبريس، فهذا يعني أنَّ مطوِّري الووردبريس المستقلين بإمكانهم أن يقوموا بالشيء ذاته. البرامج التي أحتاجها لإنجاز أي مشروع عادي هي: Sublime Text لتحرير النصوص البرمجية. FileZilla لنقل الملفات عبر بروتوكول نقل الملفات. WAMP الذي يمكن من خلاله تشغيل برامج الويب وتطويرها على شبكة محلية (أو MAMP لمستخدمي نظام الماك). متصفح ويب؛ أُفضِّل استخدام متصفح جوجل كروم وأدوات المطوِّر التي يوفرها. في الحقيقة، هذه البرامج فقط هي البرامج التي ستحتاجها للعمل على معظم المشاريع، وجميعها مجانية، ولن يستغرق معك تعلُّم أساسيات كلٍ منها أكثر من ساعة واحدة. المعرفة الأساسية باللغات التقنية اللغات الأساسية الأربعة اللازمة لتطوير الووردبريس -مرَّتبة حسب أهميتها- هي: PHP، وHTML، وCSS، وJavaScript. من الجيِّد أن يكون لديك خبرة بسيطة باللغات الثلاثة الأولى، ولكن حتى لو لم يكن لديك خبرة في لغة PHP، فإنَّه يمكنك -إلى حدٍ ما- أن تتعلَّمها من خلال تعلُّمك للنظام الأساسي الخاص بالووردبريس. لذا، إذا كنت لا تعرف استخدام لغة PHP، فأقترح عليك أن تتعلَّم PHP بينما تتعلَّم كتابة الشيفرات البرمجية في الووردبريس، لا أن تتعلَّمها على حدة، إذ أنَّ الووردبريس لا تستخدم إلا جزءًا صغيرًا من لغة PHP، وما تستخدمه في الواقع مخصَّص لها فقط بدرجة كبيرة. بعبارة مشابهة: من الأفضل لك أن تتعلَّم كيفية إنشاء أحواض السباحة بدلًا من أن تحصل على شهادة في الهندسة المعمارية بهدف أن تتمكَّن من إنشاء أحواض السباحة (إذا كان ذلك منطقيًا). إذا حاولتَ تعلُّم شروحات تطوير الووردبريس ووجدتَ نفسك تائهًا، فقد تكون بحاجة إلى علاج سريع لمواطن قصورك في أي لغة من اللغات السابق ذكرها والتي تمنعك من إحراز أي تقدُّم. نصيحتي لك هي اللجوء إلى موسوعة حسوب التي تقدِّم معلومات وافية عن كل لغة من هذه اللغات. إذا كان لديك معلومات تقنية عامة، يمكنني القول بأنَّ أسبوعًا من التعلُّم الجادّ للغات PHP و HTML و CSS كافٍ جدًا للدخول إلى صُلب الموضوع ألا وهو تعلُّم تطوير الووردبريس. أساسيات تطوير الووردبريس أعرض فيما يلي قائمة تحتوي على عدد من مفردات الووردبريس العشوائية التي تستثير ذاكرتك لكي تختبر مدى تقدُّمك في مجال تطوير الووردبريس، وينبغي أن تحفِّز كل مفردة من هذه المفردات مطوِّري الووردبريس المتمرِّسين على استحضار الكثير من الارتباطات والخبرات والذكريات والأفكار. add_action, add_filter, functions.php, stylesheet, customizer, wp_enqueue_script, wp_enqueue_style, the Loop, get_template_part, add_image_size, get_post_meta, get_the_content, get_the_ID, the_title, new WP_Query, template hierarchy, $args, foreach, is_singular, get_header, get_footer, Plugin Name: , Template: , while, wp_reset_postdata, update_option, get_option, add_shortcode, do_shortcode, get_the_terms إذا بدا لك كل ما في القائمة مألوفًا، فمن المؤكَّد أنَّك مطور ووردبريس بدرجة ما. كلَّما زاد عدد المفردات الغامضة بالنسبة لك، كان هذا مؤشِّرًا على أنَّك بحاجة إلى المزيد من الدراسة والمزيد من الخبرات حتى تصبح ضليعًا في تطوير الووردبريس. ملاحظة بشأن هذا التمرين: تتضمن القائمة السابقة بعض المفردات الأساسية التي اختيرت عشوائيًا والتي ينبغي على كل مطور ووردبريس أن يعلمها، ولا تحتوي القائمة على جميع -أو حتى معظم- المفاهيم الأساسية في مجال الووردبريس. يجب على جميع مطوِّري الووردبريس أيضًا أن يعلموا كيف يتناغم كل مفهوم من مفاهيم التطوير مع النظام التقني الكلي للووردبريس لكي يتمكَّنوا من استخدامه بالطريقة السليمة. إنَّ هذا التمرين هو مجرَّد اختبار عشوائي لتحديد مدى إلمامك ببعض المفردات الأكثر شيوعًا في مجال تطوير الووردبريس. أدوات تقنية أساسية تابعة لأطراف خارجية هذه الأدوات هي عبارة عن تقنيات الووردبريس الخارجية -مثل: القوالب، والإضافات، ومواقع الاستضافة، وغيرها- التي تؤثِّر بطريقة مباشرة على قدرتك على تقديم قيمة لعملائك. ينبغي عليك أن تحدِّد بعض الحلول التقنية التي ستلجأ إليها لكي تقدِّم المساعدة لعملائك عند الحاجة. شركة استضافة ينبغي أن تكون على علم دائم بشركة الاستضافة التي ستنصح عملاءك بالتعامل معها. أقترح أن يقع اختيارك المبدئي على شركة SiteGround (أو شركة WP Engine إذا احتاج العميل أو طلب استضافة مُدارة (managed hosting)). يمكنك معرفة المزيد من التفاصيل عن الأسباب التي جعلتنا نفضِّل هذا الخيار من خلال هذا الرابط. ينبغي أن تعلم أيضًا ما إذا كان نقل الموقع إلى استضافة أخرى يستحق العناء. بوجه عام، تكون عملية النقل ملائمة أكثر في الحالات التالية: هناك موقع واحد فقط على حساب الاستضافة. لا يزال الموقع في بداياته؛ وذلك حتى لا تضطر إلى ترحيل عشرات الرسائل الإلكترونية على سبيل المثال. المشكلات الموجودة في الاستضافة الحالية تُعيق الموقع عن النجاح؛ وليست مجرَّد مصادر إزعاج. ينبغي توجيه الانتباه للحالة الثالثة، إذ أنَّ الاستضافة البطيئة حد الإزعاج والمشكلات المرتبطة ببروتوكول SSL والدعم التقني السيئ وغيرها جميعها مصادر إزعاج رئيسية، ولكن لا تشكِّل هذه المشكلات عوائقًا استراتيجية أمام نجاح الموقع إلا في بعض الأحيان. إذا شعرت بأنَّ الاستضافة السيئة عائق استراتيجي، فاشرع في عملية النقل. أمَّا إذا كانت مجرَّد مصدر إزعاج، فتكيَّف معها. من الصعب التمييز بين الأمرين، ولكن سيزداد ذلك سهولة بمرور الزمن. منشئ النماذج (Form Builder) على الأغلب أنَّ النماذج هي أكثر الطرق شيوعًا لتفاعل المستخدم على مواقع الووردبريس، وتعتبر نماذج الاتصال (Contact forms) من الأمثلة الواضحة عليها. يمكننا إنشاء النماذج لأي غرض نريده بما في ذلك التسجيل للفعاليات أو حتى من أجل تفاعلات المستخدم المعقدة مثل التطوع لتبنِّي حيوان أليف. بالنسبة لي، أستخدم إضافة Gravity Forms لإنشاء النماذج. مع أنَّ هناك بعض الأشياء التي لا يمكنها القيام بها، إلا أنَّها خيار أولي ممتاز لإنشاء أي نموذج أحتاجه تقريبًا إلى أن يدفعني المشروع على استخدام خيار آخر. تُعَدُّ إضافة Ninja Forms وإضافة Caldera Forms من الإضافات الجيِّدة أيضًا، كما أنَّ إضافة Contact Form 7 مجانية وممتازة في إنشاء نماذج الاتصال. سأكون مرتابًا حيال استخدام أي إضافة لم أتطرَّق إلى ذكرها لإنشاء النماذج؛ فمع أنَّ هذا سيكون جائرًا بحق المشاريع الآخرى وبحق مطوِّريها، إلا أنَّ الإضافات التي ذكرتُها هي الخيارات الجيِّدة ذائعة الصيت، ومن غير المحتمل أن تحلَّ الخيارات الأخرى مشكلات لا تستطيع هذه الإضافات أن تحلَّها. منشئ الصفحات (Page Builder) يوجد في وقتنا الحالي إضافة ووردبريس جيِّدة جدًا لإنشاء الصفحات تُسمَّى Beaver Builder، وقد أحدثت تغييرًا جذريًا على الطريقة التي أعمل بها في مجال الووردبريس. من وجهة نظري، ينبغي عل كل مطور ووردبريس حر أن يحصل عليها وأن يتعلم كيفية استخدامها وأن تكون خياره الأول عندما يطلب منه العملاء إنشاء صفحة بتخطيط مخصَّص. إذا كنت ترغب في معرفة سبب تفضيلي لإضافة Beaver Builder عن برمجيات إنشاء الصفحات الرئيسية الأخرى، فقد كتبتُ مقالاً يقارن بطريقة مفصَّلة بين أربعة منها، ويمكنك الاطّلاع عليه من خلال هذا الرابط. ماذا عن استخدام Gutenberg؟ ماذا عن استخدام حلول إنشاء الصفحات التي توفِّر خدمة الاستضافة مثل Squarespace؟ دائمًا ما كنتُ متحمِّسًا لتجربة تأليف وتحرير المحتوى في الووردبريس، ولذلك كتبتُ الكثير بشأن هذا الموضوع خلال السنوات القليلة الماضية، وكتبتُ خصوصًا عن طريقة التفاعل المعقَّدة بين تقنيات معينة مثل Squarespace و Beaver Builder و Gutenberg، وألخِّص فيما يلي النقاط الرئيسية: لن تتسبَّب Gutenberg في اندثار إضافات الووردبريس مثل Beaver Builder في وقت قريب، حتى بعد صدور نسخة ووردبريس 5.0. أصبحت إضافة Beaver Builder أفضل من ذي قبل بعد صدور النسخة 2.0 منها (وهو من أفضل الإضافات لإنشاء صفحات الووردبريس من وجهة نظري). تجربة تأليف المحتوى باستخدام Squarespace أكثر روعة منها في Beaver Builder، كما يعتبر Squarespace تقنية أبسط من الووردبريس بوجه عام إذا أخذنا في الاعتبار الاستضافة وغيرها، وهو خيار جيِّد للمواقع البسيطة جدًا. أمّأ Beaver Builder فهو يوفِّر تجربة مشابهة للمشاريع التي تتطلَّب استخدام الووردبريس. ينبغي عليك أن تبتعد عن معظم إضافات الووردبريس الأخرى الخاصَّة بإنشاء الصفحات. من الصعب جدًا تطوير منشئ صفحات جيِّد للووردبريس، وقد بُنيت معظم المشاريع التي تهدف لذلك على نهج خطأ تمامًا (خاصةً اعتماد عناصر تخطيط الصفحة على الأكواد المختصرة). يعدُّ Visual Composer وDivi Builder أضخم مشروعين ولكنَّهما –أيضًا- من أسوأ المشاريع. تعدُّ إضافة Elementor من الإضافات الجيِّدة، ولكنَّني شخصيًا أُفضِّل Beaver Builder. القوالب ومتاجر القوالب من الصعب العثور على القوالب الجيِّدة، إذ أنَّ سوق القوالب يعجُّ بالقوى السوقية التي تعطي أولوية للمظاهر الفارغة على حساب محتوى القوالب وتصميمها المتقَن. إنَّ بناء موقعك الإلكتروني بالاعتماد على قالب سيئ هو أحد أسهل الطرق التي تجعل المشروع فظيعًا. من المؤكد أنَّه ينبغي عليك العثور على المتجر الذي تراه مناسبًا، ولكن أنصحك بالابتعاد عن متجر ThemeForest، وأقترح عليك متاجر القوالب الأتية: Solo Pine Elmastudio ThemeBeans Codestag قد ترغب في الاستغناء تمامًا عن القوالب التجارية نتيجة التطوُّر الكبير الذي طرأ على برامج إنشاء الصفحات. عمومًا، يُعجبني Understrap كقالب يمكن استخدامه لجميع الأغراض، وStorefront كقالب يمكن استخدامه للووكومرس، ولكن عليك أن تعلم بأنَّ قالب Understrap متقدم للغاية (يملك حوالي 8000 ملف على شكل اعتماديات وجميعها مرتبطة بمنفذات مهام [task runners] ومدراء الاعتماديات [dependency managers] وأوراق أنماط Sass المُصرَّفة وما إلى ذلك)، أمَّا قالب Storefront فيعتمد على مبدأ الخطافات (hook-based) بدرجة كبيرة. من الجيِّد أيضًا أن تتعلَّم كيفية تقييم القوالب قبل شرائها من خلال هذا الرابط. ينبغي عليك أيضًا أن تبتعد عن صنفين من القوالب وهما: القوالب القبيحة متعددة الأغراض الموجودة على متجر ThemeForest، وأي قالب يوفِّره موقع Elegant Themes بما في ذلك قالب Divi بصورة خاصة (يؤسفني قول هذا). حلول النسخ الاحتياطي وتصدير البيانات شخصيًا، لستُ مواظبًا على القيام بالنسخ الاحتياطي اليدوي كما "ينبغي" أن أكون، وذلك لأنَّ شركة SiteGround تحتفظ بنسخ احتياطية، ودائمًا ما أنقذني هذا في الحالات النادرة التي أفسدتُ فيها شيئًا. تجدر الإشارة -أيضًا- إلى نظام النسخ الاحتياطي الأوتوماتيكي الرائع الخاص بشركة WP Engine](e بسبب الخدمات التي تقدِّمها. من المؤكَّد أنَّ عملية النسخ الاحتياطي مهمة، وتعتبر إضافة BackupBuddy خيارًا جيِّدًا للقيام بها. إنَّ إضافة All-in-One WP Migration هي من حلول النسخ الاحتياطي وتصدير البيانات التي تعجبني بشدة. يمكنني الجزم بأنَّ هذه الإضافة يمكن الاعتماد عليها وهي توفِّر عليك الوقت على نحوٍ لا يُصدَّق، كما أنَّها تقدِّم حلًا كاملًا لإجراء النسخ الاحتياطي -كما هو واضح من اسمها-، إذ أنَّها تخزِّن بيانات موقعك بالكامل. الخلاصة تحدَّثنا في هذا المقال عن كيفية الاستعداد للانطلاق في العمل الحر في مجال تطوير الووردبريس، وقد تحدَّثنا عن أمور كثيرة، أليس كذلك؟ لا تُجهد نفسك، إذ أنَّك سوف تتقن هذه الأمور بمرور الزمن دون أن تضطر إلى التخطيط لجميع هذه الأمور مسبقًا. هذا المقال بمثابة الدليل الذي سيرشدك إلى "عيش حياة سعيدة". هناك الكثير من الأمور التي ينبغي التفكير فيها، ولكن لا يُشترط التفكير فيها جميعًا دفعة واحدة ولا قبل أن يحين وقتها. أتمنى أن يكون هذا المقال قد بيَّن لك الطريق الذي عليك أن تسلكه لكي تصبح مطور ووردبريس حر، وأن يكون أيضًا قد نبَّهك إلى نقاط ربما كنتَ غافلًا عنها. معظم الأمور التي ذكرتُها هي أمور تجاهلتُها حتى لم يعد أمامي خيار سوى التعامل معها، ولذلك كان الطريق الذي سلكتُه كمطور ووردبريس حر أطول وتشوبه الكثير من الصعوبات. إذا كان لديك أفكار أخرى عن كيفية الاستعداد للانطلاق في العمل الحر في مجال تطوير الووردبريس، فأخبرنا بها من خلال التعليقات. ترجمة -وبتصرف- للمقال Become a Freelance WordPress Developer: How to Make a Career of It لصاحبه Fred Meyer

لا يخفى على أي مطور ويب خصوصًا مطوري واجهة المستخدم الأمامية (front end developers) أهمية إضفاء بعض الحيوية في المواقع التي يصممونها عبر الحركات، إذ هنالك عدة فوائد يمكن تحصليها من إضافة الحركات إلى صفحات الموقع أهمها الابتعاد عن السكون الممل، ولفت الانتباه، وتحسين التواصل مع الزائر أو المستخدم ...إلخ. تحاول هذه المقالة تسليط الضوء على الحركات وأهميتها في مواقع الويب مع ذكر لمحة تاريخية عنها، وتوفر للقارئ مصادر علمية نظرية وعملية لتعلم كيفية إنشاء الحركات عبر CSS باحتراف. جدول المحتويات حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة، سنذكر هنا جدول المحتويات باختصار: ما هي أهمية الحركات؟ ظهور الحركات في الويب أريد تعلم إنشاء الحركات، فمن أين أبدأ؟ دروس نظرية: مبادئ الحركات والتحريك دروس تطبيقية عملية ما هي أهمية الحركات؟ لا شك أنَّك لاحظت من خلال تصفحك للمواقع كمية الحركات المُطبَّقة فيها بدءًا من الحركات الصغيرة في الأزرار والقوائم وحتى الصور المتحركة (GIFs) والفيديوهات التي تعمل تلقائيًا. وبمناسبة الإشارة إلى الصورة المتحركة، فقد انتشرت كثيرًا في الآونة الأخيرة وهذا طبيعي بالموازنة مع الصور الساكنة المملة. فيمكنك عبر صورة متحركة رواية قصة قصيرة أو إيصال فكرة للناظر بطريقة تتفوق فيها على عدة فقرات مكتوبة. بعبارة أخرى، معلومٌ أنَّ الإشارات والحركات أبلغ من الكلمات وتترك أثرًا أعمق في الذهن، فكيف لا وهي اللغة التي يمكن أن يتخاطب بها جميع البشر مهما كانت لغتهم وخلفيتهم! أي يمكنك عبر الحركات التواصل مع شريحة أوسع من المستخدمين. إذا نظرت حولك عمومًا أو أمعنت النظر في الطبيعية خصوصًا، ستجد أنَّ الحركة في كل مكان وهي سمة الطبيعية الأساسية، فكلمة «حيوية» هي مصدر صناعي من «حياة» ويراد بها الفاعلية والنشاط. وتركبية جسم الإنسان وعدد مفاصله تؤكد أهمية الحركة التي تمثِّل سمة أساسية فيه. فمثل التحريك كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وأصبح في عصرنا هذا علمًا يُدرّس وعملًا يُنجَز. هل خطر في ذهنك الآن أفلام الرسوم المتحركة؟ تمامًا، فهذا ما قصدته. لابد أنَّك تعرف ديزني وشخصيتها المشهورة ميكي ماوس والمحقق كونان وشهرة سلاسل المانغا اليابانية (أي القصص المصورة) وتطورها إلى رسوم متحركة (أنمي)؛ فكل ذلك أساسه الحركة والتحريك وإبداع الإنسان في توظيف الحركة في شتى المجالات. ظهور الحركات في الويب إن كنت من جيل الثمانينات والتسعينات، فلابد أنَّك زرت الكثير من المواقع التي كانت تستعمل حركات شتى مثل بطاقات لامعة أو نجوم مشعة أو قطط راقصة أو غيرها من الأشكال والتي كنت أراها مزعجة لي في بعض الأحيان؛ فلا أحب الاستعمال الزائد للحركة كثيرًا وكنت أهرب من المنتديات التي تفرط في استعمالها. أغلب ذلك كان يجري عبر تقنية Flash (الفلاش) التي أحدث ثورة في الحركات والتحريك آنذاك (بعد الصور المتحركة GIF). على أي حال، كانت ذلك يُسبِّب بطئيًا كبيرًا في تحميل الموقع مما يؤثر سلبًا عليه. في هذه الأيام ومنذ فترة ليست ببعيدة، ظهرت تقنيات حديثة يمكن عبرها إضفاء الحيوية والحركة إلى مواقع الويب وذلك عبر HTML و CSS وجافاسكربت وصور SVG دون أن تؤثر على الأداء تأثيرًا ملحوظًا أو سلبيًّا. وبالتالي، دخلت الحركة إلى أغلب عناصر الصفحة بأدق تفاصيلها. فلم يعد الغرض منها إضفاء الحيوية والمتعة للمستخدم فقط، بل تحسين تجربة وواجهة المستخدم أيضًا (UX/UI) مما يجعل الموقع أفضل وأسهل للاستخدام خصوصًا إذا كان موقع الويب (أو تطبيق الويب) تفاعليًّا مع المستخدم. أريد تعلم إنشاء الحركات، فمن أين أبدأ؟ حسنًا، إن اقتنعت بضرورة وأهمية الحركات في صفحات الويب، فقد تتساءل: من أين أبدأ وهل يوجد مرجع يشرح لي التحريك شرحًا كافيًا ووافيًا؟ أجيبك، نعم يوجد وبالعربية أيضًا. وفرنا في أكاديمية حسوب سلسلة مقالات عن تعلم التحريك في CSS والتي تأخذك خطوة بخطوة لإنشاء حركات احترافية وإضافتها إلى موقعك. هذه السلسلة هي ترجمة لفصول كتاب CSS Animation 101. ستغطي هذه المقالات المواضيع التالية: أولًا: ما هي الحركات؟ سنحاول أن نفهم سبب استخدام الحركات. سنقدم أيضًا الخاصيتين transition و animation، إضافة إلى بعض مصادر الإلهام. ثم: سنتحدث بتفصِيل عن الخاصية transition. ونتعلم كيفية عمل الانتقالات، والخاصيات التي تُمكّننا من التحكم في الحركة. بعد ذلك: سنركز على الخاصية animation، ونتعلم كيفية إنشاء الإطارات المفتاحية التي تتيح لنا فعل أشياء تتجاوز إمكانيات الانتقالات البسيطة. أخيرًا: سنجمع كل ما تعلمناه في الفصول السابقة. سندرس بعض الأمثلة المتقدمة التي تستخدم كلا الخاصيتين، ونتعلم الرابط بين الحركات وسهولة الوصول (accessibility)، ونشارك بعض مصادر CSS المفيدة التي يمكنك تطبيقها في مشاريعك، وأدوات JavaScript التي يمكن استخدامها لإنشاء تأثيرات أكثر تقدمًا. بعد قراءتك هذه السلسلة، ستفهم مبادئ التحريك في CSS فهمًا جيدًا، بالإضافة إلى الأدوات اللازمة لإنشاء الحركات وإضافتها إلى مشاريعك. تجمع مقالات هذه السلسلة بين الأمثلة النظرية والعملية. سوف تتعلم كيفية إعداد بيئة العمل الخاصة بك، وستطالع الكثير من الأمثلة العملية عن الحركات في ثنيّات الطريق. دروس نظرية: مبادئ الحركات والتحريك سأكتب عناوين مقالات سلسلة التحريك في CSS مع شرح مبسط عن ما ستتعلمه فيها هنا لسهولة الوصول إليها: 1. ما هي استخدامات الحركات؟ هذه المقالة هي أول مقالة في السلسلة وتناقش سبب إضافة الحركات وتبنيها في مواقع الويب وكيف يمكن أن يستفيد منها مصممو مواقع الويب. 2. تجهيز بيئة العمل لإنشاء الحركات ستتعلم في هذه المقالة كيفية تجهيز بيئة العمل لديك لإنشاء الحركات عبر CSS وتشغليها إضافةً إلى تحديد سير العمل. سيكون العمل إمَّا باستعمال المتصفح نفسه (سيكون الاعتماد غالبًا على CodePen) أو بتجهيز بيئة تطوير محلية. سيتطرق المقال إلى أداة البناء Gulp لأتمتة بعض العلميات الروتينية. 3. مدخل إلى الإنتقالات: التنقل بين الحالات تشرح هذه المقالة كيف يجري تحريك عنصر عبر توضيح مبدأ تحويل إحدى خصائصه وصفاته ونقلها تدريجيًّا بزمن محدَّد لتوليد شعور بالحركة. ستلقي هذه المقالة أيضًا نظرة تفصيلية على خاصية التحويل transition في CSS وكيفية استعمالها في ذلك الغرض مع أمثلة عملية. 4. مدخل إلى الحركات: مفهوم الحركة يشرح هذا المقال أولًا الفرق بين الإنتقال والحركة ويوضح كيف يُنفِّذ المتصفح حركة ما على عنصر. يعرِّفك هنا على خاصية الحركة animation في CSS شقيقة خاصية التحويل transition وكيفية استعمالها لإنشاء الحركات. يعرض أيضًا مثالين عمليَّين ويحللهما لفهم كيف تجري الحركة. يشرح أخيرًا متى تُستخدَم الحركة ومتى يُستخدَم الانتقال. 5. تطبيق عملي: الانتقالات تتعمق هذه المقالة في استعمال الخاصية transition وتعرض مثالًا عمليًّا عن تطبيقها على زر لتغيير حالته أثناء تحويم مؤشر الفأرة فوقه. تناقش المقالة أيضًا موضوع دعم هذه الخاصية عبر مختلف المتصفحات. 6. خاصيات الانتقالات تشرح هذه المقالة جميع خاصيات الانتقالات المرتبطة بالخاصية transition مع عرض بعض الأمثلة. أي أنها ستعرض الصياغة المختزلة والصياغة التفصيلية المطوَّلة لها. ستتطرق أخيرًا إلى شرح موضوع مهم يتعلق بالأشياء التي لا يطبَّق الانتقال عليها. 7. دوال التوقيت تتحدث هذه المقالة عن دوال التوقيت (timing function) وكيفية استعمالها مع الانتقالات المطبقة على العناصر، وتشرح أشهر أنواع دوال التوقيت المستعملة حاليًّا مع عرض صور وأمثلة توضيحية تساعد على فهمها. 8. الانتقالات المتعددة سترى في هذه المقالة ما يحدث عند تطبيق عملية انتقال واحدة على عنصر تغير فيه عدة حالات، أي كيف يمكن توليد حركة جديدة عبر تطبيق عملية انتقال واحدة على عنصر واحد تحدث له عدة تغييرات. يجري تطبيق ذلك على مثاليين عمليين ملهمين. 9. الانتقالات وجافاسكربت تتحدث هذه المقالة عن طريقتين لتطبيق الانتقالات على العناصر عبر استخدام لغة جافاسكربت هما: إضافة وإزالة الأصناف (أي إضافة تنسيقات مكتوبة مسبقًا أو إزالتها)، أو التحكم مباشرةً في الانتقالات (أي تعديل شيفرة CSS مباشرةً). 10. تطبيق عملي: التحريكات ستلقي هذه المقالة نظرة أعمق على الخاصية animation شيقية الخاصية transition والمكملة لها في توليد الحركات مع ذكر عدة تطبيقات عملية عليها. سيجري أيضًا شرح الإطارات المفتاحية (keyframes) وارتباطها الوثيق بتلك الخاصية وكونها أساس الحركة. 11. خاصيات الحركات تشرح هذة المقالة الصياغة المختزلة والصياغة التفصيلية المطوَّلة للخاصية animation وتشرح بعدها الخاصيات المرتبطة بها ووظيفة كل منها. تتطرق أخيرًا إلى كيفية استخدام دوال التوقيت ضمن الإطارات المفتاحية. 12. تطبيق عملي: الإطارات المفتاحية تلقي هذه المقالة نظرة أعمق على الإطارات المفتاحية (keyframes) وصياغتها وكيفية استعمالها مع الحركات لتحريك العناصر تحريكًا مخصَّصًا. سيجري شرح كل ذلك شرحًا تفصيليًّا عبر تطبيق عملي لتحريك زر حركة مُخصَّصة. 13. الحركات المتعددة المتزامنة تتحدث هذه المقالة عن كيفية استخدام عدة مجموعات من الإطارات المفتاحية (keyframes) لإنشاء حركة معقدة مؤلفة من عدة حركات تعمل بشكل متزامن مع بعضها بعضًا. المثال العملي في هذا الدرس هو إنشاء إشارة مرور. 14. موجز الحركات نتوقف هنا في هذه المقالة للالتقاط الأنفاس وأخذ استراحة بسيطة يجري فيها مراجعة وتلخص كل ما تعلمته مسبقًا في المقالات السابقة عن الحركات والانتقالات وتطبيقها لتحريك العناصر في CSS. 15. رواية القصص عبر الحركات تطبِّق هذه المقالة كل ما تعلمته مسبقًا لإنشاء حركات هادفة مفيدة، إذ تشرح مفهوم الصورة الرئيسية المستعملة بكثرة في الصفحات الرئيسية للموقع وصفحات الهبوط والتي تحكي هدف الوقع أو تُعلِّم كيفية استخدامه. 16. حرب النجوم (Star War) سنطبق في هذه المقالة كل ما تعلمته في المقالات السابقة لصنع حركة متجِهيًّة (SVG) مرحة، وذلك بالعمل على تحريك عنوان فيلم حرب النجوم من إعلان "The Force Awakens" ليظهر وكأنه ثلاثي الأبعاد. في أثناء ذلك، سيجري شرح الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎. 17. إظهار المحتوى أثناء التمرير سوف تتعلم في هذه المقالة كيفية إظهار العناصر عند تمرير (scrolling) إليها وعرضها على نافذة المتصح مع إضافة حركة إليها. يعرض لتحقيق ذلك إطاري عمل هما: Wow.js و Animate.css مع عدم نسيان الدعم الذي يوفره Modernizr احتياطًا من أولائك المستخدمين الذين لا يشغّلون JavaScript لسبب ما. 18. سهولة الوصول تنتقل هذه المقالة بعيدًا عن الحركات للتحدث عن سهولة الوصول (accessibility)، إذ لا تقل عملية تسهيل وصول جميع الأشخاص للمحتوى أهمية عن عملية إنشاء الحركات. تدور رحى هذه المقالة حول مناقشة العبارة التالية: ما الفائدة من الحركات إن منعت بعض الأشخاص (مثل الذين يستخدمون قارئات الشاشة مثلًا) من الوصول إلى المحتوى وعرضه، أو سببت إزعاجًا لآخرين وأعاقتهم عن استخدام موقعك أو تطبيقك بأريحية وكفاءة. 19. نهاية الرحلة تعرض هذه المقالة الأخيرة من سلسلة التحريك في CSS بعض المصادر والمراجع المفيدة في إنشاء حركات متقدمة وتحاول توجيهك إلى الخطوات اللاحقة لتطوير نفسك والانتقال إلى مراحل متقدمة في مجال التحريك. دروس تطبيقية عملية @media screen and (min-width: 650px) { .response_image { width: 33%; display: inline-block; vertical-align: top; margin-top: 0px; } .response_descrip { width: 64%; display: inline-block; margin-right: 10px; vertical-align: top; margin-top: 0px; } } تحوي الأكاديمية على مقالات عدة تتحدث عن الحركات في CSS بمستويات متفاوتة ومواضيع متنوعة تصب جميعها في موضوع واحد ألا وهو «التحريك في CSS»، لذا جمعت لك جميع هذه المقالات لسهولة الوصول إليها من مكان واحد ولتكون لك مرجعًا تستعين به في المستقبل. مبادئ التحريك في صفحات الويب باستخدام CSS تشرح هذه المقالة المبادئ الاثنا عشر لأساسيات التحريك عبر CSS - المنشورة بكتاب عنوانه: "وهم الحياة: الرسوم المُتحركة في ديزني" - وتناقش كيف لها أنّ تُطبَّق في صناعة صفحات الويب مع أمثلة توضيحيّة وإتاحة الوصول إلى مصدر شيفرة HTML و CSS الخاصّة بهذه الأمثلة. تأثيرات حركية على عناصر قوائم HTML باستخدام CSS ستتناول هذه المقالة كيف يُمكن للحركات المُساعدة على تقديم مُحتوى جديد، وذلك عبر إظهار وإخفاء عناصر القوائم. تتطرق أيضًا إلى شرح كيفية استخدام JavaScript لإضافة عناصر جديدة إلى القائمة، إذ يجري تطبيق حركة عليها أثناء إظهارها. تحريك شبه العناصر (pseudo-elements) في CSS ستتعرف في هذه المقالة على كيفية استخدام عنصر زائف (pseudo-element) لإضافة تأثير بصري على زر في CSS. يشرح أولًا ماهية شبه العناصر (أو العناصر الزائفة) وفائدتها وكيفية الاستفادة منها في إنشاء الحركات، ثم ينتقل إلى كيفية توظيفها في إنشاء زر برَّاق عبر الحركات. تحريك زر تفضيل التغريدة الخاص بتويتر باستخدام CSS فقط يعرض هذه المقالة طريقة لمحاكاة حركة زر "التفضيل" في تويتر الذي حدثه مؤخرًّا المعتمدة على سلسلة من الصور ولكن ستجري عملية محاكاة الحركة وتقليدها باستعمال CSS مع دوال التوقيت بالإضافة إلى شرح مفهوم وهم الحركة. تنبيهات مؤقتة باستخدام CSS ستتعلم في هذه المقالة البسيطة كيفية عمل تنبيهات مؤقتة بحركة جميلة باستخدام CSS فقط حتى تخطر المستخدم بوجود شيء جديد. ما سيجري تطبيقه هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفاؤها. وسنضيف شريط تقدم (progress bar) لنعرف كم تبقى من الوقت حتى يختفي التنبيه. كيفية إنشاء قائمة متحركة من نوع off-canvas في CSS يشرح هذا المقال كيفية إنشاء قائمة تنقل من النوع الذي يكون خارج الشاشة (off-canvas)، إذ ستتعلم ببناء شيء شبيه بهذه المعاينة (انظر إلى Demo2) بحيث تكون الأيقونة التي تفتح القائمة موجودة في أعلى يسار الشاشة والحد (border) يكون اسمك من جهة اليسار. تأثير الانتقال في مشهد فضائي يشرح هذا الدرس طريقة إنشاء تأثير الانتقال في مشهد فضائي يضم الأرض والقمر ، إذ يهتم المقال بتعليمك كيفية استخدام الانتقالات لدب الحياة في محتوى الصفحة، بالإضافة إلى إنشاء تأثيرات مرور الفأرة فوق العناصر لتبدو بأجمل مظهر. أضف إلى ذلك أنها تناقش مفهوم الانتقالات والحركات والفرق بينهما وأيهما يجب أن تستخدمه. كيف تنشئ ساعة ذات عقارب باستخدام تحريكات CSS و JavaScript يشرح هذا الدرس طريقة إنشاء ساعة متحركة باستخدام تأثيرات CSS و JavaScript. أساس إنشاء هذه الساعة سيكون باستخدام HTML و CSS وخلفية SVG إضافةً إلى بعض أسطر JavaScript. ستستعمل أيضًا التحريكات Animations والانتقالات Transitions في CSS، وسنعتمد على JavaScript لضبط التوقيت الابتدائي. تحريك وانتقال العناصر في CSS3 (الانتقال) يشرح هذا المقال كيفية تطبيق الانتقالات (الخاصية transition) على العناصر عبر في CSS فقط مع ذكر أهم خصائص العناصر القابلة للانتقال مع أمثلة عملية. يتطرق أيضًا إلى زمن وسرعة الانتقالات، والتأخير في الانتقالات، وكيفية تطبيق الانتقال بتعليمة واحدة مختزلة. تحريك وانتقال العناصر في CSS3 (التحريك) يكمل هذا المقال شرح مفهوم تحريك العناصر وتطبيق التأثيرات البصرية عبر الحركات (الخاصية animation) في CSS ويوضح كيفية تحريك العنصر بين عدة حالات مع أمثلة عملية. المواضيع التي يتحدث المقال عنها أيضًا هي الإطارات المفتاحية، ومدة الحركة ودوال التوقيت، وتأخير تشغيل الحركة، واتجاه الحركة وحالتها، وتخصيص الحركات، وكيفية تطبيق حركة بتعليمة واحدة مختزلة. تأثير الانتقال والحركة في CSS يُعرِّفك هذا المقال على تأثيرات الانتقالات (Transitions) والحركات (Animations) في CSS3 بالإضافة إلى الحديث عن دعم المتصفحات لها، والخصائص التي تسمح بتطبيق تأثيرات الانتقال عليها، ومدة وتوقيت تأثير الانتقال، والإطارات المفتاحية في الحركات، ودوال التوقيت، وأزمنة الحركات، وتكرار واتجاه وحالة الحركة، وغيرها. أفضل 25 مكتبة تحريك في CSS يعرض لك هذا المقال أفضل مكاتب التحريك في ‏CSS، والتي تساعدك في حفظ وقتك عند تصميم ‏موقع الويب الخاص بك من خلال استخدامك لهذه المكاتب التي تضفي بعض الديناميكية والتفاعل إلى ‏عملك، إذ تحوي هذه المكتبات على العديد من الحركات والمؤثرات لأي نوع من أنواع عناصر صفحات الويب كالنصوص، الصور، الإطارات، الأزرار، والبطاقات والعديد غيرها. تأثيرات إبداعية لإضافة وإزالة عناصر قائمة باستخدام تحريكات CSS يشرح هذا المقال استخدام الحركات (animations) والانتقالات (transitions) في CSS3 لإعطاء تأثيرات عند إضافة أو إزالة عناصر من قائمة بالإستعانة بتقنية التخزين المحلي للمتصفح، إذ من الضروري أن يكون للانتقالات والحركات هدف واضح ومحدّد، ألا وهو تحسين تجربة المستخدم. كيفية إنشاء قائمة تنقل دائرية باستخدام CSS Transforms يعلمك هذا المقال كيفية إنشاء قائمة تنقل (navigation) دائرية الشكل باستخدام الانتقالات في CSS. يراعي المقال شرح ذلك خطوة بخطوة بالإضافة إلى الحسابات والمنطق البسيط وراء هذه الطريقة حتى يتسنى لك فهم كيفية عمل هذه القائمة المميزة. استخدام المحدد target: ضمن CSS لإنشاء تأثيرات واجهة المستخدم UI بدون JavaScript يشرح هذا المقال كيفية استخدام المحدد target: ضمن CSS لتحديد وتنسيق مظهر العنصر أو الفقرة الموجودة ضمن نفس الصفحة والمعرفة عبر الخاصية href ضمن رابط ما، إذ يتم تطبيق هذه التنسيقات على العنصر الهدف عند النقر على ذلك الرابط بدون اللجوء لاستخدام JavaScript. يشرح المقال أيضًا كيفية استعمال الخاصية animation لتطبيق تنسيق ما بشكل متدرج.

إن اسم التطبيق Visual Composer معروف جيدًا في جميع أرجاء صناعة تطوير صفحات الويب. ولأسباب سوف نشرحها بعد قليل، يبدو أن تغيير الاسم هو شيء جيد. ولقد أخذنا الخطوات الضرورية للتأكد من أن التغيير سيتم بشكل سلس، ذلك فقط لنكتشف أن النتيجة كانت تتلخص في كلمة واحدة وهي الفوضوية. بالنظر إلى الماضي، كان علينا أن ندرك أنه عندما يختفي اسم كان يعد ميزة في الكثير من خصائص الوورد بريس Word Press الأكثر شهرة فجأة، فإنه كان لزاما أن يُحدث ذلك ارتباك. نحن نود أن نعتذر لشركائنا القدامى و مستخدمي برنامج Visual Composer في كل مكان من أجل الارتباك وسوء الفهم الذي تسببنا فيهما. ولكي نضع الأمور في نصابها، فنحن نود أن نأخذك في جولة عبر ما أصبح Visual Composer Page Builder. ولماذا قررنا أن نعيد تسميته على وجه التحديد. والمنطق وراء إعادة تسمية Visual Composer Page Builder. إن إعادة تسمية منتجنا كانت شيء لم نكن نود أن نفعله، ولكن بما أن الأمور كانت قد تغيرت، فلم يكن أمامنا خيار. بدأت المشكلة التي واجهناها عندما أنشأنا منتجًا جديدًا، التطبيق Visual Composer Website Builder، أداة إنشاء صفحات الويب والتي تخدم أغراضًا مختلفة عن الأداة Visual Composer Page Builder. فمنشئ المواقع على شبكة الإنترنت VC Website Builder ليس اسما جديدا لمنشئ صفحات الويب VC Page Builder. إن تطبيق إنشاء صفحة الويب Visual Composer Page Builder هو منتج حصري لشركة Envato "إينفيتو"، ومثل كل المنتجات المُباعة بواسطة Envato، فإنه يوجد رخصة مدى الحياة تأتي مع كل عملية شراء. فإذا ما كان قد تم تطبيق نفس الأمر- رخصة مدى الحياة - على تطبيق VC Website Builder لكان كل شيء سار على ما يرام، وتغيير الاسم لم يكن ليكون ضروريا. ومع ذلك فإن تطبيقVC Website Builder أكثر تعقيدا من تطبيق VC Page Builder، أكثر تعقيدًا بكثير. ولذلك ففي الواقع فإن تكلفة تطويره كانت مرتفعة جدًا لدعم نموذج رخصة مدى الحياة له. ولذلك فقد لجأنا لتبديل ذلك النموذج بنموذج الرخصة السنوية، عندما قمنا بالتسويق لتطبيق VC Website Builder. هل تم بذلك حل المشكلة؟ لسوء الحظ، ليس تمامًا. فسرعان ما اكتشفنا إنه بسبب بعض القيود في اتفاقياتنا التعاقدية مع marketplace، فنحن لم نستطع بيع منتج أخر بالعلامة التجارية الخاصة بتطبيق Visual composer، خارج المنصة المخصصة للبيع. كان ذلك معناه إننا لدينا خيارين: تغيير اسم تطبيق Visual Composer Page Builder، والذي سيسمح لنا بتسويق VC Website Builder بنموذج الرخصة السنوية. تقليل المميزات و القدرات التشغيلية لتطبيق VC Website Builder، للحد الذي يمكننا من تحمل تكاليفه لتسويقه بنموذج رخصة مدى الحياة. في حين انه لم يكن أيا من هذه الخيارات جيدا، فقد اخترنا تغيير الاسم حيث أننا لم نتمنى الاضطرار إلى تقليل جودة وقدرات تطبيق VC Website Builder. ومن هنا، تم تغيير اسم تطبيق Visual Composer Page Builder، إلى WP Bakery. وإذا كنا نستطيع القيام بالأمر كله مرة أخرى، لكنا قد أبلغنا شركائنا والمستخدمين مقدما بما كان على وشك الحدوث، ولماذا بدا و كأن تطبيق VC Page Builder قد اختفى فجأة، وما إذا كان هناك أي شيء مختلف حول تطبيق VC Website Builder، ولماذا ظهر WP Bakery إلى الصورة فجأة وما هو الغرض منه. الآن وبعد أن تم تسوية كل شيء على نحو يرضيكم، دعونا نلقي نظرة أقرب على كلا من التطبيقين، تطبيق visual Composer Website Builder، و تطبيق WP Bakery لنرى أوجه الشبه و الاختلاف بينهما. WP Bakery WP Bakery هو ببساطة الاسم الجديد لتطبيق Visual Composer page builder، الإضافة الأولى الخاصة بنا، وكل المميزات التي استخدمتموها واحببتموها فيه لا تزال موجودة، فالشيء الوحيد المختلف هو الاسم. ما الذي يقوم به برنامج Visual Composer Website Builder يمكنك إنشاء موقع إلكتروني كامل من الصفر بواسطة تطبيق VC Website Builder، فبواسطة مميزات السحب والإفلات المقرونة بقوالب صفحات word press متنوعة، فإن عملية انشاء موقع إلكتروني اصبحت سهلة وسريعة، بالإضافة إلى ذلك فبإمكانك استخدام منشئ المواقع على شبكة الإنترنت مع أي نوع من Word Press. وتُبنى صفحة الويب باستخدام المُحرر الأمامي وطريقة الشجرة في عرض الواجهة، فطريقة الشجرة في العرض تتيح لك رؤية التغييرات التي تحدث عند تعديل الصفحة في نفس الوقت، و التي تعمل كموفر حقيقي للوقت. يتوفر إصداران من التطبيق، إصدار مجاني وإصدار مدفوع ويوفر الأخير العديد من المميزات الإضافية بما في ذلك الوصول إلى رأس وتذييل الصفحة، ومحرر الشريط الجانبي. ما الذي يميز كلا من الإصدارين كما أشرنا سابقا، فإنهما منتجان مختلفان، فيمكنك بناء موقع إلكتروني بالكامل من لا شيء بواسطة VC Website Builder، بما في ذلك المحتوى، والرأس، والذيل، والشريط الجانبي، وتخطيط الصفحة، ولكن في تطبيق WP Bakery فأنت مُقيد فقط بالمحتوى. وتجدر الإشارة أيضا إلى أن WP Bakery يعتمد على الرمز المختصر، في حين أن VC Website Builder ليس كذلك. فبما أن VC Website Builder لا يستخدم رموز مختصرة فإنه يُمكنك من صنع أكواد نظيفة، ويجنبك المشكلات المزعجة `تحدث حينما يتعطل التطبيق. كما توجد ميزة رائعة أخرى في تطبيق VC Website Builder يمكنك الحصول عليها وهي القائمة المركزية المعتمدة على التخزين السحابي. فيمكنك الإستفادة من المجموعة الواسعة للقائمة المركزية من عناصر التصميم المثيرة والإضافات المفيدة، لزيادة خياراتك وقدراتك التصميمية. فكلا من التطبيقين يتميزان بمجموعة رائعة من الفوائد, وبما أننا نهتم كثيرا بعملائنا ونريد أن نوفر أفضل تجربة ممكنة لعملائنا، فنحن نستمر في تطوير كلا منهما. نتمنى بصدق أن نكون قد وضحنا كل شيء من أجل إرضاءكم، فإذا كانت لا تزال لديكم اسئلة متعلقة بمنتجاتنا، اتركوا تعليق، وسوف نرد عليكم في أقرب وقت ممكن. ترجمه -وبتصرف- للمقال What's in a name? we changed the name of our products. here's waht happened لصاحبه Kate Dagli

هل تواجه شركتك بعض المشاكل في تحديد مدى أهمية تجربة المستخدم؟ لا تقلق، فقد قام "جوزيف توث"، كبير مستشاري واجهة المستخدم أو تجربة المستخدم UX/UI في شركة فايزر "Pfizer" بإجمال بعض أقوى الإحصائيات المتعلقة بتجربة المستخدم. 1- التمرير المستمر والذي هو خاصية تحميل المحتوى كلما مررت بالصفحة لأسفل بإمكانه أن يخفض عدد الزوار لموقعك، فنسبة الزوار لموقع Time.com كانت قد انخفضت بمقدار 15% بعد أن قاموا باستخدام خاصية التمرير المستمر. المصدر 2- استثمار بقيمة 10 آلاف دولار في الشركات المتخصصة بالتصميم قد يعود خلال 10 سنوات بربح بنسبة 228% أكثر من نفس قيمة الاستثمار في البورصة الأمريكية "S&P". المصدر 3- زادت إيرادات موقع ESPN.com بقيمة 35% بعد أن استمعوا لجمهورهم وللاقتراحات المتعلقة بتصميم صفحتهم الرئيسية. المصدر 4- اختيار درجة معينة من اللون الأزرق والتخلي عن بعض الدرجات الأخرى نتج في زيادة الأرباح السنوية بمقدار 80 مليون دولار لشركة Bing. المصدر 5- قيمة الربح العائدة على كل 1 دولار يتم إنفاقه على التسويق عبر البريد الإلكتروني هي بمعدل 44.25 دولار. المصدر 6- 88% من المستهلكين عبر الإنترنت قد لا يعودون لزيارة موقعًا إلكترونيًا ما بعد تجربة سيئة. المصدر 7- المواقع التي تستغرق وقتًا أطول في التحميل تكبد تجار التجزئة عبر الإنترنت خسائر تقدر بـ 2.5 مليار دولار سنوياً. المصدر 8- الحكم على مصداقية الموقع تعتمد بنسبة 75% على المظهر الكلي للموقع والكماليات. المصدر 9- الانطباع الأول عن الموقع تعتمد بنسبة 94% على التصميم. المصدر 10- 85% من الأشخاص البالغين يعتقدون بأن نسخة الأجهزة المحمولة لموقع إلكتروني خاص بشركة يجب أن يكون بنفس جودة نسخة الحاسوب إن لم يكن أفضل منها. المصدر 11- في تقييم لـ200 موقعًا إلكترونيًا خاصًا بشركات صغيرة، وُجد بأن 70% منها لم تعرض حثًا واضحًا للتفاعل على صفحاتها الرئيسية كالعروض الخاصة والنشرات الإخبارية عبر البريد الإلكتروني والأدلة الإرشادية والنسخ التجريبية والأدوات التفاعلية. المصدر 12- 90% من الأشخاص يستخدمون شاشات متعددة بشكل متعاقب. المصدر 13- هنالك فرصة بأن تتسلق قمة إيفرست 279.64 مرة على أن تضغط على لافتة إعلانية! المصدر ترجمة -بتصرف- للمقال ‎13 Impressive statistics on user experience لصاحبه: Jozef Toth

أنا متأكد تمامًا من أنك تفهم أهمية قائمة التنقل في موقع الويب وارتباطها بمشاركة الموقع فيما يلي عشر نصائح لجعل تجربة المستخدم UX سلسلة وأكثر قابلية للاستخدام. تعد إمكانية التنقل داخل موقعك جزءًا مهمًا لأي موقع ويب من أيًا كان مجاله أو نشاطه التجاري. يُعد التنقل هذا هو الطريقة الوحيدة للتعرف على منتجاتك وخدماتك. لن يعمل محتوى التنقل الخاص بموقعك جيدًا مع جميع روابط الصفحات، إذ يجب أن تكون حذرًا في الشكل الذي سيظهر به تنقلك وما الذي سيتضمنه. إذا كنت مرتبكًا أو تبحث عن بعض الاقتراحات حول ما يجب مراعاته عند تصميم قائمة التنقل في الموقع، فهناك ثماني نقاط لمساعدتك! 1. التنقل الثابت يعد وجود شريط تنقل ثابت في أعلى صفحة الموقع مفيدًا جدًا للزائرين حيث يمنحهم سهولة حقيقة عند التنقل في موقع الويب الخاص بك. بفرض أن موقعك يحتوي شريط تنقل أفقي، فسيمرر زائر الموقع وصولًا لنهاية الصفحة ثم قد يريد بعد ذلك إلقاء نظرة على صفحة «حول الموقع» (About Our Website)! سيحتاج آنذاك إلى التمرير طويلًا للأعلى للعثور على رابط الصفحة المنشودة .القائمة الثابتة في أعلى الصفحة تساعدك على حل هذه المشكلة. يرجى التأكد من ظهور عناصر قائمة التنقل الأفقية في أعلى الصفحة كما هي على جميع أحجام الشاشة المختلفة. أنا أتحدث عن مختلف أحجام شاشات الكمبيوتر والحواسيب المحمولة .يساعدك توحيد التنقل في موقعك على توفير تجربة متسقة على جميع الأجهزة. 2. الاهتمام بعملية التنقل على نسخة الهاتف المحمول لا يمكنك تجاهل زائري الجوال لموقعك. وفي عصر تصميم مواقع الويب للهواتف المحمولة أولًا، كانت الأطر سريعة الاستجابة مثل bootstrap توجهك لإيلاء الاهتمام المناسب لنظام التنقل في الأجهزة المحمولة لموقع الويب الخاص بك. الجوانب السلبية الوحيدة لنظام التنقل في موقع الويب خاصتك عبر الأجهزة المحمولة هي أنهم لا يحصلون على دعم الحومان (hover). لذلك، إذا كنت قد كتبت استعلام الوسائط (media query) بطريقة تعتمد على التنقل مع تأثيرات الحومان (hover)، قد تبدو موحدة على الأجهزة المحمولة ولكنها لن تؤدي نفس العمل. في حين أن إطار العمل bootstrap لديه دعمًا جيدًا لنظام التنقل لكل من عرض الهاتف المحمول والحاسوب. مع ذلك فإنه يحتوي على أنماط جامدة. تأكد أثناء بنائك نظام التنقل الخاص بموقعك عدم مبالغتك في استخدام شيفرة JavaScript التي قد تعطي للمستخدمين تأثيرًا مرئيًا رائعًا ولكنها تسبب صعوبة لبرامج الزحف (crawlers) لمثل Googlebot عند الزحف إلى نظام التنقل الخاص بموقعك وفهمه. إن جعل نظام التنقل الخاص بموقعك مستحيل الزحف هو أسوأ شيء يمكنك القيام به أثناء بنائه. على الرغم من أن تجربة المستخدم هي أهم أولوياتنا، إلا أننا بالتأكيد لا نستطيع تجاهل هذه القضية. 3. وضع شريط للبحث بقدر ما يتعلق الأمر بتجربة المستخدم، فإن جعل موقعك قابلاً للبحث هو أفضل شيء يمكنك القيام به على الإطلاق في موقعك. إذا كان موقعك يحتوي على الكثير من الصفحات، فيجب أن يكون في أولويتك أن تجعله قابلًا للبحث. كان هناك دائمًا تردد حول أين يجب أن أضع شريط البحث؟ كيف يمكنني ملاحظة مربع البحث الخاص بي دون تشتيت انتباه المستخدم أو التأثير على تجربة المستخدم؟ لقد قرأت مقالتين تقترحان إبقاء مربع البحث مخفيًا خلف أيقونة بارزة يجلب النقر عليها لك مربع البحث، وسيؤدي إدخال استعلام البحث وطلبه إلى إنجاز المهمة. وقرأت أيضًا بعض الدراسات حول إخفاء مربع البحث خلف أيقونة بارزة سيؤدي إلى إرباك المستخدمين حول كيفية البحث في موقع الويب هذا وماذا سيفعل هذا الرمز! بالإضافة إلى ذلك، ساهمت هذه القضية في عدد أقل من عمليات البحث في بعض مواقع الويب. لذا، أقترح أن يكون لديك مربع بحث مرئي في نظام التنقل الخاص بك، لا تخفيه في أي مكان لتوفير مساحة قليلة من البكسلات، وإذا أردت أن يكون مربع البحث الخاص بك ملفتًا للمستخدمين، يمكنك وضعه على الجانب الأيسر من التنقل، تمامًا مثل Facebook و YouTube! 4. قائمة أفضل تنظيما قد يكون لديك الكثير من المنتجات أو الخدمات لتضمينها في تصفح موقع الويب الخاص بك. سيكون من الجيد أن تتمكن من تنظيمها وفق ترتيب ما. إذا كان لديك عددًا كبيرًا من العناصر للتنقل بينها في موقع الويب الخاص بك، فيمكنك التفكير في بناء قائمة ضخمة لتجميع عناصر القائمة التي لها نفس الأصل معًا. كما لو كنت وكالة إنشاء تقدم خدمات تصميم متنوعة من الرسوم والويب وتطبيقات الهاتف المحمول وغيرها الكثير، ثم قد تفكر في تصميم الجرافيك كفئة رئيسية لك تحوي خدمات مثل تصميم الكتب، وتصميم المنشورات، وتصميم الشعارات . تجميع الأشياء تجعل القراءة السريعة للزائرين سهلة عند التنقل. بالإضافة إلى ذلك، يساعدهم في تحديد موقع العناصر المطلوبة فقط من خلال النظر في تصنيف المجموعة. هذا يجعل القراءة السريعة والبحث سهلًا بعض الشيء. أود أن أقترح عليك أن تتجنب العدد الكبير جدًا من عناصر القائمة الفرعية. إن امتلاك قائمة يصل عدد عناصرها الفرعية إلى سبعة عناصر يُسهِّل على الزائرين للموقع فهم العنصر (العناصر) المطلوبة والعثور عليها بسهولة. ضع في حسبانك قاعدة واحدة وهي أنَّ زوار موقعك سيهتمون بأول عنصر في القائمة وآخر عنصر فيها. تأكد من وضع الروابط على كلا موقع العنصريين. إن وجود زر التحقق / رابط الذي يميز نفسه مع عناصر التنقل الأخرى سيزيد من فرصة النقر عليه. 5. القائمة العمودية حسنًا، أعرف أن القائمة الرأسية هي طريقة المدرسة القديمة لتنظيم روابط التنقل. انتظر أنا لا أتحدث عن استبدال قائمتك الأفقية الرائعة بقائمة رأسية. أنا أقترح عليك أن يكون لديك قائمة رأسية لصفحاتك الداخلية حيث تحتاج إلى إظهار بعض الخيارات المتداخلة. هناك بعض الحالات التي تحتاج فيها إلى إظهار قائمة إضافية للصفحة. وجود قائمة أفقية أخرى سيؤدي بالتأكيد إلى زعزعة تجربة المستخدم الخاصة بك. هل أنت على دراية بتصاميم مواقع التجارة الإلكترونية؟ هل شاهدت تصميم الصفحة عندما تضغط على قسم الحاسوب؟ أنا أتحدث عن القائمة الرأسية نفسها للصفحات الداخلية حيث يمكنك عرض خيارات إضافية، وروابط، ومعلومات، وعناصر أخرى. يساعدك هذا على جعل التنقل في موقع الويب الخاص بك منظمًا وواضحًا. سيشاهد الزوار القائمة الرأسية فقط عند زيارة الصفحات الداخلية. 6. تقييم عناصر القائمة يوجد سوء فهم في أن جميع الزوار يأتون إلى موقع الويب الخاص بك من خلال الصفحة الرئيسية. تحقق من تحليلاتك، إذ لديك نقاط دخول متعددة للموقع. بمعنى أن عناصر التنقل ليست هي المكان الذي سيذهب منه زائرو موقعك إلى صفحات المنتج أو الخدمات الأكثر تفصيلًا. نتيجة البحث الأساسية هي من تنقلهم إلى تلك الصفحات. لذلك، ليس عليك دائمًا تضمين كل رابط / صفحة في التنقل الخاص بموقعك. احتفظ فقط بالعناصر المهمة حقًا لعملك والعناصر التي يُنقَرعليها عند التنقل. قد تكون الأداة Google Analytics أفضل طريقة لك لمعرفة روابط التنقل التي يتم النقر عليها. وترشِّح الأداة Goto Behavio Filter النتيجة التي تبدأ بـ / أو الصفحة الرئيسية. يساعدك ذلك على فهم ما هي عناصر القائمة التي يهتم بها زوار موقعك. طبّق نفس الشيء على الصفحات التي تتحكم في حركة سير موقع الويب الخاص بك للحصول على فكرة أفضل عما يجب الاحتفاظ به وما الذي يجب تغييره وتخطيه. بمجرد الانتهاء من هذا التدقيق، عدِّل قائمة التنقل. سيكون للتنقل الجديد عناصر أقل بكثير، وفوضى أقل، وقائمة تنقل أفضل تنظيمًا. 7. تجنب الكثير من التشعبات كما هو مذكور في النقطة أعلاه، احتفظ بالروابط المهمة فقط بناءً على سلوك الزوار. إنها تساعدك على جعل الأمور واضحة. بالإضافة إلى ذلك، تجنب وجود الكثير من تداخل التصنيفات والفئات الفرعية والعناصر. وجود مستوى واحد من التداخل مثل الصنف الأب -> العناصر، سوف يفي بالغرض بشكل جيد للغاية. 8. أشياء متنوعة بسيطة هناك بعض الأشياء المتنوعة التي يمكنك أخذها بالحسبان أثناء تصميم قائمة التنقل وهي: تجنب التصاميم الغريبة تجنب تصميم قائمة تنقل خاصة بموقعك تصميمًا غريبًا وفريدًا فقط من أجل أن تكون مختلفًا. إن إنشاء وتصميم التنقل في أضيق الحدود يختلف عن طريقة إنشاء التنقل غريب المظهر لكسب التميز. لا تفعل ذلك. قد تفهمها وتحبها، لكن زوار موقع الويب خاصتك لن يكونوا بنفس مستوى الإدراك هذا. أن تكون متسقة الاتساق يعطي طابع الانتظام .استخدم قائمة التنقل نفسها في جميع صفحات موقع الويب الخاص بك. سيجعل زائرك أكثر دراية به وسيجدون أنه من السهل تحديد العناصر المطلوبة. اجعلها واضحة تصويرية كن واضحًا عند اختيار اسم عنصر التنقل. عند النقر عليه، يجب أن تفتح الصفحة التي قصدتها في الاسم. تجنب استخدام الأسماء العامة مثل «منتجات وخدمات»، كما في النصيحة السادسة في هذه المقالة احصل على اسم وصفي للعناصر مثل تصميم الشعار، وإصلاح شاشة الجوال، وحلول تخطيط موارد المؤسسات، وربط بوابة الدفع. قم بتجريبها أعلم أنك تستخدم بعض إطارات العمل الموثوقة مثل bootstrap لتصميم موقع الويب وقائمة التنقل. لكن احتفظ ببعض الوقت واختبر قائمة التنقل على جميع متصفحات الويب الرئيسية. تحقق من الوظيفة على كل من إصدار سطح المكتب من المتصفح وكذلك إصدارات الأجهزة المحمولة. الخلاصة لا يتطلب الأمر سوى استخدام بيانات موقع الويب والأفكار الإبداعية وبعض الاهتمامات الشائعة لإنشاء قائمة تنقل قابلة للاستخدام بشكل جيد وجذابة للغاية. ستساعدك النقاط الثمانية التي تمت مناقشتها هنا في تحديد ما يجب القيام به مع قائمة التنقل الخاصة بك التالية. ترجمة -وبتصرف- للمقال Eight tips to make website navigation menu more usable لصاحبه Darshan