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

أضحى إنشاء مواقع ذات تصميمات عالية الجودة أمرًا يسيرًا هذه الأيام للمصممين وغير المصممين على السواء، بسبب انتشار أنظمة إدارة المحتوى التي لا تتطلب خبرة كبيرة لاستخدامها، وكذلك انتشار قوالب التصميم الجاهزة. لكن هناك فرق كبير بين تصميم جميل في مظهره لكنه لا يخدم الهدف الوظيفي المطلوب منه، وآخر يقوم بوظيفته بكفاءة، لهذا نحتاج في مجال التصميم إلى الإلمام بتصميم تجربة المستخدم، فذلك الفرع من التصميم يقدّم منظورًا أكثر صرامة وعمقًا لتصميم الويب كما نعرفه، فهو يفرض على المصمم كثيرًا من البحث والتخطيط والاختبار كي يضمن أن المنتج سواء كان موقعًا أو غيره يقدم تجربة استخدام مهيأة للمستخدم الأخير. وإليك الآن في هذا المقال ثلاثين مصطلحًا لتجربة المستخدم أرى ألا غنى عنها لأي مصمم ويب، سواء كان يعمل في المجال بالفعل أو لا زال يخطو خطواته الأولى. 1. اختبار أ/ب (A/B Test) هو تجربة عدة نسخ مختلفة من الموقع في نفس الوقت لتحديد الاختلافات في سلوك المستخدم وتفضيلاته في كل مرة. 2. تخطيط المتشابهات (Affinity Diagramming) هو أحد طرق تنظيم البيانات، وتوضع فيه الأفكار داخل مجموعات لإيجاد علاقات وروابط بينهم، ويُستخدم هذا الأسلوب في مجال تجربة المستخدم من أجل تخطيط واجهات المواقع أو محتواها. 3. التحليل (Analysis) هذه هي المرحلة التي يدرس فيها أعضاء الفريق كل البيانات التي جمعوها، ثم يستخدمون النتائج التي يخرجون بها في تحديد أي منظور أفضل من حيث تجربة الاستخدام. 4. الإطلاق التجريبي (Beta Launch) هو الإطلاق الأولي للموقع، ويعطي فرصة للمصممين وغيرهم كي يروا الموقع ويتفاعلوا معه بشكل حي ومباشر، وكذلك فإنه فرصة لاكتشاف المشاكل في التصميم قبل الإطلاق الرسمي. 5. تصنيف البطاقات (Card Sorting) يشير هذا المسمّى إلى تصنيف البطاقات -الحقيقية أو الرقمية- التي تُستخدَم لتجميع بيانات عن أجزاء الموقع المختلفة (مثل المحتوى، وروابط مسارات التنقل "Breadcrumb link Trails") وتنفّذ بأسلوب منظَّم للغاية من أجل تسهيل التخطيط اللاحق للموقع. 6. نظرية الألوان (Color Theory) ترجع الفكرة وراء هذه النقطة إلى أن الألوان لها تأثير على سلوك المستخدم، لهذا تُعرف أحيانًا باسم علم نفس الألوان. 7. تحليل المنافسين (Competitor Analysis) هو دراسة مواقع المنافسين للوقوف على مواطن القوة والضعف فيها، وتساعد نتائج تلك الدراسة المصممين على تشكيل خطة مبنية على ما أثبت نجاحه مع الشريحة المستهدفة من الموقع، لكن ذلك لا يمنع أن يكون الموقع متميزًا عن غيره. 8. التحليل الموازن (Comparative Analysis) هذه النقطة شبيهة بسابقتها في أنها دراسة للمواقع المنافسة بهدف معرفة نقاط القوة والضعف، إلا أنها تركز أكثر على مقارنة عناصر أو أجزاء داخل المواقع، وليس المواقع ككل. 9. مراجعة المحتوى (Content Audit) يُفهرَس كل المحتوى الحالي أثناء مرحلة المراجعة والتقييم الأولية، ويُقيَّم من حيث قابليته المستمرة للنشر. 10. خطة المحتوى (Content Strategy) هي أي شكل من أشكال التخطيط التي تحدد كيفية كتابة وهيكلة محتوىً ما داخل موقع ويب، وتعد خطوتي تخطيط المتشابهات وتصنيف البطاقات أجزاءً من هذه العملية. 11. الاستعلام السياقي (Contextual Enquiry) هو التفاعل مع المستخدم في الوقت الفعلي الذي يستخدم فيه الموقع، وهذا يساعد مصممي تجربة المستخدم في إدراك شعور المستخدمين أثناء تفاعلهم مع عناصر بعينها في الموقع. 12. دراسة اليوميّة (Diary Study) هذه الدراسة شبيهة بالاستعلام السياقي الذي ذكرناه بالأعلى، إلا أنها تُنفَّذ على مدى طويل، ودون ملاحظات فورية، بل يسجّل المستخدمون تجاربهم ثم يشاركونها في موعد لاحق. 13. تخطيط التجربة (Experience Architecture) تخطيط التجربة –أو الخريطة- هو طريق محدد بوضوح داخل الموقع يجب أن يسلكه المستخدم ليبلغ هدفًا ما (التحويل إلى عميل مثلًا). 14. المراجعة الإرشادية (Heuristic Review) هي جزء من مرحلة التقييم والمراجعة، ويُقيَّم الموقع فيها لاكتشاف مشاكل قابلية الاستخدام التي ستُعرض للمناقشة في مرحلة تالية. 15. التصميم التفاعلي (Interactive Design) هو شكل من أشكال تصميم الويب، يركز على إنشاء صلة قيّمة بين الزائر والموقع. 16. التصميم التكراري (Iterative Design) بدلًا من التصميم العادي الذي له نقطة بداية ونهاية، فإن التصميم التكراري له طبيعة حلَقيّة، تُكرَّر فيها عملية المراجعة والتخطيط وإخراج النموذج الأولي "prototyping" والتطبيق "implementation" ومرحلة ضمان الجودة "Quality Assurance"، إلى أن تتحقق النتيجة النهائية. 17. لوحة المزاج العام (Mood Board) تساعد لوحة المزاج العام مصممي تجربة المستخدم على تحديد أسلوب معين للموقع عبر صورة من الصور والألوان والنصوص وعناصر الدعاية الأخرى. وعلى عكس أساليب جمع البيانات ومعالجة التصميمات، فإن هذه الطريقة أقرب لملصقات وصور حرة منها إلى مخططات منظمة. 18. الشخصيات (Personas) هذا مصطلح تسويقي عام، يراد به إنشاء هويات واضحة للجمهور المستهدف، وترجع أهميته في تجربة المستخدم إلى أن توقع رغبات وسلوك المستخدم هو ما يؤثر في كيفية إنشاء الموقع بالدرجة الأولى. 19. الكشف التصاعدي (Progressive Disclosure) هو فرع من التصميم التفاعلي، ويُقصد به تبسيط تجربة المستخدم لأقصى حد، بأن تُعطى المعلومات للمستخدم في جرعات صغيرة ببطء بدلًا من عرض البيانات كلها مرة واحدة. 20. النموذج الأولي (Prototype) النموذج الأولي هو رسم تخطيطي عام للموقع، ولا يحتوي النموذج الأولي ذو المستوى المنخفض –low level prototype- عادة إلا على الهيكل الأساسي مما سيبدو عليه الموقع، أما النماذج عالية المستوى فتحتوي تفاصيل أكثر، لكنها لا ترقى بحال من الأحوال إلى نموذج كامل بالحجم الطبيعي للموقع –full website mockup-. 21. البحث النوعي (Qualitative Research) يستخدم مصممو تجربة الاستخدام عدة أساليب في مرحلة جمع المعلومات، من المقابلات مع المستخدمين إلى الاستعلامات السياقية ودراسة اليوميّات وغيرها، والهدف من هذا هو فهم كيفية تفاعل المستخدمين مع الموقع، وبالتالي يركزون على جودة هذا التفاعل. 22. البحث الكَمّي (Quantitative Research) إذا اعتبرنا أن البحث عملة من وجهين فإن البحث الكَمّي هو وجهها الآخر، فبدلًا من التركيز على جودة تجربة المستخدم لموقع ما، فإن البيانات هي ما يهم هنا، وتُعدّ اختبارات ا/ب وتحليل المنافسين من الأمثلة على البحث الكمّي. 23. السيناريو (Scenario) يمثّل السيناريو قصة يتخيلها المصمم للمستخدمين، وتبدأ عادة بنظرة افتراضية على حياة الجمهور المستهدف، ثم يأتي السيناريو ليرسم كيف يحل الموقع مشكلة يواجهها المستخدمون في الحياة اليومية. 24. التصور الرسومي (Storyboard) قد يكون التصور الرسومي أو القصصي في تجربة المستخدم رسومات بصرية لسيناريو –إذ تترجم Storyboard إلى "القصة المصورة"- أو حتى تخطيطات سريعة وعامة للهيئة التي يتصورها المصمم للموقع. 25. عناصر واجهة الاستخدام (UI Elements) هي الأجزاء التي يتحكم المستخدم بتجربته من خلالها، مثل الأزرار وأشرطة التنقل وأسهم التمرير وأي شيء آخر قد يتفاعل معه من أجل التنقل داخل الموقع. 26. سهولة الاستخدام (Usability) هي مقدار سهولة التفاعل مع الموقع والتنقل فيه. 27. التصميم المرتكز حول المستخدم (User-centered Design) هو الهدف الرئيسي لتصميم تجربة المستخدم، أن تُصمم موقعًا يتمحور حول تحسين تجربة المستخدم. 28. رحلة المستخدم (User Journey) رحلة المستخدم هي الطريق الذي ينشئه مصمم تجربة الاستخدام لزوار الموقع من نقطة الدخول إلى التحول إلى عملاء، وقد يشار إليه باسم تدفق تجربة الاستخدام "UX Flow". 29. بحث المستخدم (User Research) هو مصطلح آخر لكل المهام التحليلية التي يجب تنفيذها من أجل فهم الجمهور بشكل أفضل، ويُعد البحث النوعي والكمي من الأمثلة على هذه النقطة. 30. اختبار المستخدم (User Test) الفرق الجوهري بين اختبار المستخدم والاستعلام السياقي هو أن المستخدمين هنا يُراقَبون بشكل مباشر وشخصي بينما يتفاعلون مع الموقع. 31. عناصر تجربة المستخدم (UX Assets) هي الأدوات التي تُستخدم مرة بعد أخرى لبناء تصميم لموقع ما، مثل النماذج الأولية والإطارات السلكية ولوحات الجو العام، والنماذج الحقيقية –mockups- وغيرها. 32. الإطارات السلكية (Wire Frames) تأتي خطوة الإطارات السلكية قبل وضع النموذج الأولي، وهدفها هو إنشاء وتصميم الهيكل الأساسي للموقع. ترجمة –بتصرف- لمقال Thirty Common UX Terms Every Web Designer Should Know لصاحبته Brenda Stokes Barron

يثير اللون الأحمر الحماس وفقًا لدراسة على الديناميكا اللونية، وهذا يفسر اللون الأحمر لموقع شركة كوكا كولا، الذي يمنحك شعورًا بيوم صيف حار مضجر، وهو الوقت الذي تشعر فيه بالحاجة إلى شرب الكولا، لكن أهمية الألوان في تصميم المواقع تتجاوز الجانب العاطفي، فيميل الناس إلى إنفاق أموالهم أكثر في الأضواء الحمراء من الزرقاء، وهذا يفسر استخدام المدن الباذخة لكثير من الأضواء الحمراء. للألوان أثر على الأداء في العمل، فتجعل الأضواء الحمراء الناس يتصرفون أسرع وتشعرهم بالقوة، إلا أن هذا ليس إيجابيًا بالضرورة، إذ أن الأزرق يجعلهم أكثر تأنيًا وتفكرًا قبل التصرف، وهذا السبب وراء اللون الأحمر لإشارات المرور الآمرة بالتوقف، إذ أن الوضع يتطلب أن تتصرف بسرعة وتوقف مركبتك قبل أن تصبح في خطر. يمكنك الإستزادة من هذا بالقراءة عن سيكولوجية الألوان في عالمي التسويق والعلامات التجارية، والتأثير النفسي للألوان في تصميم الويب، واختيار أفضل المجموعات اللونية للمواقع التي تصممها. مزج الألوان مزج الألوان أمر مُجدٍ إذا تم بالشكل الصحيح، بما في ذلك مزج الألوان المكملة، إلا أن هذا يجب أن يُفعل نادرًا، نظرًا لتأثيرها السلبي على النظر، فموقع أسود بنص وردي لهو صورة فظيعة لا أرغب ببقائها في رأسي. هناك حيلة جيدة لمزج الألوان المكملة معًا، تتضمن رسم خط رفيع في المنتصف باللون الأبيض، أو الرمادي، أو الأسود، بين الشكلين الملونين لتتمكن العين من رؤيتهما منفصلين، ويمكن ملاحظة هذا بالنظر إلى شعار شركة بيبسي في الأسفل: حيث يفرّق بين اللونين الأحمر والأزرق ليس بطبقة رقيقة من الأبيض بل سميكة. العلاقة بين الألوان والثقافات تحمل الألوان معانٍ مختلفة باختلاف الأماكن في العالم، فالأحمر يبشر بالحظ في الصين، بينما يشير إلى النقص لدى الألمان. تنفق شركات ضخمة مبالغ طائلة على دراسة آثار الألوان المختلفة على مختلف الثقافات، قبل الانخراط في أحد الأسواق. وقد يظن البعض هذا مستحيلًا لكن يمكن خسارة العملاء بسبب استخدام الألوان الخاطئة. وعلى الرغم من توظيف شركات كبيرة لخبراء للقيام بهذه الأبحاث لهم، إلا أن النتائج ليست دومًا إيجابية، فكل مصمم، بل كل شخص، يميل للون ما أو زوجٍ ما من الألوان يفضل استخدامه في مناسبات مختلفة لأنه يحبه شخصيًا، وهذه نقطة سلبية في هذه الحالة، لذا على كل المصممين أن يتجردوا من كل تفضيلاتهم الشخصية ويركزوا على العملاء واحتياجاتهم. اختيار الألوان لموقع إلكتروني اختيارك للون موقع إلكتروني ليس مجرد اختيارك للونك المفضل كواجهة له، بل يعني اختيارك اللون الصحيح الذي يحقق الاستجابة المطلوبة من الجمهور، فإذا كنت تعرف جمهورك واكتشفت اللون الذي يناسبهم فتكون هكذا قد قطعت نصف الطريق، إلا أنه من المستحيل اختيار لون يلائم كل زوار موقع فردًا فردًا، لذا فإنه من المهم تحديد اللون اللون الذي يلائم أغلبية الفئة المستهدفة. نصف الحالات التي يزور فيها الزوار الموقع مرة واحدة بلا عودة سببها لون تصميم الموقع، وفقًا لمصادر مختلفة، فأول شيء يحتاج الزوار إلى التقاطه هو الألوان الرئيسية، فإذا احتوى الموقع على عدة ألوان لا يوجد واحد منها سائد بارز على الأقل، فعليك عندها تغيير التصميم. إذا كان لديك منظومة لونية زرقاء، فستكون استجابة الناس إيجابية اعتمادًا على حسن مزاجهم، وإذا كنت ستجعلها بيضاء صافية فلا بأس لكن سيكون عليك جعلها أكثر إثارة، بوضع الأحمر الفاتح أو البرتقالي في بعض المواضع، يتماشى الأبيض والأخضر بشكل رائع، ويمكنك استخدام الأبيض والرمادي للظهور بمظهر عصري وأنيق دون الحاجة إلى الألوان الحادّة، وكل مزيج يظهر شيئًا من البريق، والنعومة، والغضاضة والصفاء. انظر النموذج الراقي في الأسفل. إذا كنت تفضل الظلال الداكنة، فكل شيء يليق بالأسود طالما أن الأسود ليس اللون المهيمن، يمكن للون الأسود في الخلفية أن يعطي الموقع مظهرًا جيدًا وراقيًا، لكن سيجعل القراءة صعبة، لذا فإن أبسط مزيجين هما الأسود مع الأبيض أو الرمادي الفاتح مع واحد منهما، ويمكن للونين شديدي التناقض كالأسود والبرتقالي أن يلقيا ببعضهما، لكن قد يحتاجان إلى الأبيض لتحقيق التوازن. إذا كنت ترغب بدمج كلٍ من الأبيض والأسود مع لون آخر، فإن الأزرق خيار جيد، واحرص على هيمنة الأبيض، وإلا ستحتاج إلى أزرق فاتح جدًا ليحل محله، ولا تعطِ الأسود حضورًا كبيرًا في هذا المزيج، ويمكنك رؤية مثال جيد في الأسفل، فالمثال الثاني فقير ككل ويظهر مدى التعديلات التي يمكن إجراؤها على هذا المزيج، فالتصميم ليس فقط قديمًا بل إن الألوان تزيد الطين بلة. يليق الأسود والأبيض بالأحمر أيضًا، لكن احرص على ألا يطغى الأحمر، جاعلًا التصميم حادًا ويسبب تعاكسًا مزعجًا مع الأسود، يمكنك رؤية مثالين جيدين في الأسفل. والمزيج الثالث الذي يُنصح به هو الأسود، مع الأبيض والأخضر، ويمكنك للمثال في الأسفل أن يظهر لك السبب. والآن بعد أن مررنا بالمنظومات اللونية المختلفة للمواقع وكيفية مزجها، هل وضعت الألوان من قبل بعين اعتبارك بصفتها عوامل مؤثرة في مدى قابلية موقعك للقراءة؟ إذا كانت الإجابة لا، فسوف يعجبك الجزء التالي. ترجمة -وبتصرف- للمقال The Website Color Schemes that Stimulate Human Sense للفريق التحريري لموقع 1st Web Designer

كونك مصمم ويب مستقل، فهذا يوفر لك العديد من المميزات، فأنت تختار العمل الذي تريده، ونوع العملاء الذين تريد العمل معهم؛ وسواءً كان عملك ضمن تخصص معين، أو في المجال العام، فالقرار الأول والأخير يرجع لك. وإذا نجحت في الاستمرار مدة كافية، فسوف تجد مستوًى معين من النجاح؛ وهذا بسبب المزج بين العمل الجادّ والمهارات المميزة. لكن هناك نقطة محددة قد يجد فيها حتى أمهر المطورين وأكثرهم موهبة نفسه في حالة من الركود. إن تحقيق النمو يمكن أن يكون صعبًا على أي عمل؛ لكنه يكون أكثر صعوبة على الشخص الذي يعمل منفردًا. على أية حال، لكل شخص طاقته في العمل، لذا من الطبيعي أن تصل الأمور في نهاية المطاف إلى ذروتها. بناءً على ذلك، كيف يمكنك النمو عندما تواجه القيود التي تأتي مع عمل المصمم المستقل؟ الإجابة تكمن في المثل الشائع: اعمل بذكاء، وليس بِجِدّ. تجاربك لها قيمة إن التجارب شيء لا يمكن أن يُتعلم، إنه شيء يُكتسب. كل تجربة ناجحة أو فاشلة، أو تجمع النجاح والفشل؛ قد جلبت إليك معرفة قيّمة؛ تأخذ بيدك إلى المحطة المقبلة في رحلة الحياة. بينما لا تجعلك التجارب وحدها محصنًا من الأخطاء، فإنها تدعمك بصورة أفضل عن الأعمال التي تُجدي نفعًا والتي لا تُجدي. نظريًا، فهذا يعني عملية بناء موقعٍ أكثر سلاسة لك ولعملائك؛ وفي أسوأ الأحوال، فهذا يعني معرفتك بكيفية التعامل مع المشكلات التي تعترض طريقك، وهذه يستحق ثمنًا. يجب أن يعكس سعرُك الخبرةَ التي أتيت بها إلى العمل. لذا، إن كنت تفرض نفس السعر الذي كنت تفرضه من 5 سنوات، فهذا يعني أنك في عداد المفقودين. في رحلتي الخاصة، يمكنني أن أخبرك أن معدلات سعري قد ارتفعت بشكل جوهريّ على مدى العقدين من الزمن اللذين قضيتهما في المجال. وما يثير الدهشة، أن الغالبية الساحقة من العملاء لا زالوا متمسكين بي رغم ارتفاع معدلات السعر. يمكن لهذا الأمر أن يكون صعبًا بعض الشيء؛ وبشكل عام فإنه من الأفضل رفع الرسوم بكميات معقولة؛ فأنت لا تريد أن تضاعف أسعارك بين عشية وضحاها؛ الزيادات التدريجية أسهل للعملاء أن يتقبلوها. الجزء الآخر من المعادلة هو أن توضح المنطق وراء رفع معدل السعر؛ الناس يكونون أكثر تفهمًا حين تكون صريحًا معهم؛ فإرسال فاتورة مع زيادة في معدل السعر دون سابق إنذار من المرجح أن يكون أمرًا مزعجًا. التجميع إن إحدى الأسباب التي تجعل عمل المصمم المستقل يُصاب بالركود تلك الصعوبة المتمثلة في الحصول على عائد أعلى من العملاء الحاليين؛ لذا فإن رفع معدل السعر قد يعطي نتائج جيدة بشأن نفس العمل الذي تنجزه لهم؛ هذا الأمر لا يُجدي نفعًا كبيرًا نحو إغرائهم لبدء مشاريعَ جديدة، لذا يتطلب الأمر بعض الإبداع من ناحيتك لحثهم على قبول الأمر. إن تقديم عروض مختلفة يُعدّ أمرًا جيدًا لتعزيز قبول أعمالك؛ على سبيل المثال، إذا كنت تتقاضى أجرًا معينًا في الساعة مقابل الصيانة، فقدم لعملائك المستعدين أن يدفعوا مسبقًا سعرًا مخفضًا، ربما يكون ذلك بمثابة ساعة عمل مجانية أو بعض الأشياء الجيدة الأخرى. ربما يوفر لك هذا بعض الإيرادات المدفوعة مسبقًا، أو يشجع عملائك على الدفع. بالطبع لن يستفيد الجميع من فوائد الأمر؛ وسوف تنجح في بعض المواقف دون أخرى. وحتى لو كانوا يستنفدون كل الجهد إلى آخره، فإنك تكون قد أقنعتهم أن يدفعوا أكثر مما كانوا عليه من قبل. هناك فرصة أخرى متاحة عند العملاء الذين يمتلكون مواقع إلكترونية منذ مدة طويلة؛ من المرجح أن يكون موقعهم لا يدعم التوافق مع الجوال، أو أنهم يستخدمون تكنولوجيا قد عفا عليها الزمن. القِ نظرة على المستوى الذين وقفوا عنده، وحاول الوصول إلى أولئك الذين يمكنهم الاستفادة من خدماتك، واعرض عليهم خدمة مقدمةً لإجراء التحسينات. كل ما يلزمه الأمر هو عدة ردود إيجابية للحصول على بعض الإيرادات الجديدة، ومع الطريقة التي تتطور بها تكنولوجيا الويب لصالحك، فكن متأكدًا أنك تمتلك العديد من التحسينات لاقتراحها عليهم. ابحث عن الفرصة المناسبة حين نأتي لاختيار عملاء جُدُدٍ، فإن عليك أن تكون انتقائيًا، هذا أمر مهم للغاية خصوصًا إذا كنت تمتلك عملًا ناضجًا، وإذا كان لديك بالفعل الكثير من العملاء، فليس من المنطق الجري وراء الحصول على مزيد من المال السريع؛ وبدلًا من ذلك، ركز على العملاء الجيدين والمناسبين في الوقت الحالي وفي المستقبل. من الناحية المثالية، سترغب في اختيار العمل مع العملاء الذين يتفقون مع طريقة عملك؛ وإذا كنت تبحث عن شخص سيكون معك لسنوات، فليس من الحكمة أن تختار من يدفع القليل مقدمًا مع إمكانية قليلة لتعديل السعر حال استجد شيء خلال المشروع، غالبًا ما يكون هذا النوع من العملاء أكثر تسببًا في المشاكل مما يستحقه الأمر. يختلف الأمر عما إذا كنت جديدًا في المجال، فأنت تقبل وتسوي الأمر بينك وبين هذا النوع ما العملاء لأنك تحتاج إلى العمل، لكن مع مرور الوقت سوف تأسف لذلك؛ لأنك سوف تتعثر في حالات لن تنسجم مع طريقة عملك. الآن وقد صرت أكبر و- آمل- أكثر حكمة، يمكنك أن تختار الفرص التي تشجع نمو العمل. احصل على بعض المساعدة من الصعوبة أن تحلق منفردًا، قد لا تكون لديك الطاقة الكافية للاستمرار في بعض الأوقات، وحتى تستطيع أن تكمل الطريق، فمن المنطقي أن تجلب مستقلًا آخر ليساعدك في العمل. لا يعني هذا أن تقوم باستئجار موظف بالمعنى التقليدي، الأمر أشبه ما يكون بالاعتماد على زميل موثوق به وقت الحاجة؛ يقوم بالاهتمام بالمهام الصغيرة بينما تهتم أنت بالبنود الأكبر في جدول الأعمال، وبما أنه عملك، فأنت من تقرر متى وكيف تستفيد من المساعدة الإضافية. والتحدي هنا يكمن في إيجاد شخص جدير بالثقة وسعره معقول؛ ما تريده بداية، هو شخص يفعل ما تطلبه منه وليس خائفًا من طرح أسئلة عن العمل؛ ثانيًا، أنت لا زلت ترغب في الحصول على بعض المال من هذه المهام التي أوكلتها إليه؛ ولا تريد أن ينتهي بك الأمر في موقف حيث قد فوّتّ موعدك النهائي، ونفدت ميزانيتك. إن العثور على الشخص المناسب سوف يستغرق بعض الوقت، ربما عليك تجربة عدة مستقلين حتى تحصل على الشخص المناسب؛ وإحدى الطرق للحد من المخاطر هي العمل مع مرشح على بعض المشاريع الصغيرة وانظر كيف ستسير الأمور، وإذا سارت بشكل جيد، فقد حصلت حينئذ على مصدر موثوق لتقديم المساعدة وقت الحاجة. النمو نحو الأفضل إن الحفاظ على عمل التصميم الخاص بك فعّالًا ونشيطًا دائمًا يتطلب الكثير من الإبداع؛ ويتعلق بإيجاد طرق فعالة لتحقيق إيرادات إضافية من العملاء الحاليين والجدد؛ وفوق ذلك، تحتاج إلى التفكير في كيفية تطوير عملك مع مرور الوقت، وكيفية اتخاذ القرارات التي تساعد في إبقاء الأمور على هذا النحو. في نهاية المطاف، عليك أن تقرر المسار الخاص بك في النمو، والأمر ليس سهلًا دائمًا؛ وهذا يُعدّ من الجوانب الفريدة لكونك مصممًا مستقلًا. ترجمة- وبتصرف- للمقال The Struggle for Freelance Growth لصاحبه Eric Karkovack.

ليست جميع المواقع الإلكترونية صالحةً لأن تستمر بالقوالب التي صممت عليها لوقتٍ طويلٍ جدًا، وهنا لابد من التفكير بشكلٍ أوسعٍ بخصوص ما الذي ينبغي عمله. سيتطرق المقال لشرح طريقة إدارة عملية إعادة التصميم للمواقع الإلكترونية القائمة بدءًا بالحديث عن الطرق الخاطئة التي تتبعها المؤسسات أثناء عملية إعادة تصميم المواقع الإلكترونية. لماذا تخطئ المؤسسات في إدارة عملية إعادة تصميم المواقع الإلكترونية القائمة عادةً ما تبدأ عملية إعادة تصميم المواقع الإلكترونية باستنتاجٍ شخصيٍ لفردٍ ضمن تلك المؤسسة بضرورة إعادة التصميم بغض النظر عن السبب. مع ذلك، نادرًا ما يعتمد هذا الاستنتاج على أي بياناتٍ محددة. عادةً ما يكون السبب وراء تلك الخطوة هو الشعور بأن التصميم قد أصبح قديمًا أو أن التكنولوجيا غير مناسبة للغرض. وذلك لأن المؤسسات ليس لديها أي فكرةٍ واضحةٍ عن مؤشرات الأداء الرئيسية لموقعها. وما يثير القلق أكثر أن قرار إعادة التصميم غالبًا ما يؤدي إلى التخلص من الموقع بأكمله والبدء من جديد. ويبدو أن هناك محاولةً صغيرةً لعزل المشكلة وحلها. بعد ذلك، يجتمع مختلف أصحاب المصلحة لتحديد ما يحتاجه الموقع الجديد من حيث الأداء الوظيفي. مرةً أخرى، نادرًا ما يعتمد أصحاب المصلحة على أساسٍ قويٍّ من البيانات أو تحليل احتياجات المستخدمين. إنهم يتخذون قرارهم بناءً على ملاحظاتهم و استنتاجاتهم. فقط بمجرد اتخاذ هذه القرارات، تجلب المؤسسة خبراء رقميين. غالبًا ما يكون ذلك في صورة تكليف من وكالة خارجية، ولكن يمكن أن يشمل أيضًا نقل الملخصات إلى فريق عملٍ داخليٍ يُعامل غالبًا على أنه ليس أكثر من قسم خدمات يُتوقع منه أن ينشئ الموقع. في كلا الحالتين، تُحدد مواصفات إعادة تصميم الموقع الحالي دون أي مدخلاتٍ من أولئك الذين يفهمون معظم الإمكانات والمحددات الرقمية. في هذه المرحلة، تُعطى عروض الأسعار وتُعيّن الجداول الزمنية مع مناقشاتٍ محدودةٍ فقط حول ما إذا كان المشروع ضروريًا أم أن أهدافه ونطاقه صحيح. بمجرد قبول السعر يبدأ العمل ويتمثل الخطر في نطاق الزحف كما وأن المواعيد النهائية غير قابلةٍ للتأجيل. لا يترك ذلك أي مجال في إعادة تصميم موقع ويب حالي للتعلم والتكيف أثناء مرحلة البناء. نعم، قد يتم إجراء بعض التعديلات الطفيفة على طول الطريق، ولكن مع قيود المواصفات والمواعيد الزمنية والميزانية المحددة، لن يحدث تغييرٌ حقيقيٌ كبير. مرةً أخرى يتم تجاهل تعليقات المستخدمين إلى حدٍ كبير. والنتيجة هي أن المنظمة ليس لديها وسيلةً لمعرفة ما إذا كان كل هذا الجهد والمال يستحق العناء حتى بعد إطلاق الموقع. عندها فقط سيعرفون ما إذا كان موقع الويب الجديد يعمل بشكلٍ أفضل من الموقع القديم، على افتراض أن لديهم أي مقاييس لقياس نجاحه. والأسوأ من ذلك أنه بمجرد إطلاق موقع الويب، فإن الأموال تجف، وينتقل الأشخاص، مما يعني أنه لا توجد موارد لإصلاح أي مشكلاتٍ رئيسيةٍ قد تطرأ. نعم، سيكون هناك بعض الصيانة البسيطة، لكن هذا كل شيء. كيف يمكن إذن تجنب هذه المشاكل؟ 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

في الآونة الأخيرة، كان هناك الكثير من التطورات في تصميم مواقع الإنترنت وهي آخذة بالانتشار يوميًا. هل أنت جزء من مجتمع مصمميّ الويب؟ إن كنت كذلك، وكنت تعمل على تطوير تصاميم لواجهات الويب، إما في مجال تطوير لوحات التحكم، أو كجزء من موقع على شبكة الإنترنت. فقد ازدادت أهمية دور مصمم الويب، و سيزداد الدور أهمية في المستقبل، نظرًا لأن العديد من الشركات الناشئة بدأت تركز على التصميم أكثر يومًا بعد يوم. قد يجد المصممون قليلو الخبرة صعوبة في التعامل مع واجهات الويب. ففي سبيل إنشاء تصميم مذهل لواجهة المستخدم، تحتاج للتركيز على العديد من العوامل. ومع ذلك، فإن السرّ يكمن في دقة التفاصيل. هل ترغب بأن تكون مصممًا ناجحًا لواجهة المستخدم؟ دعني أعلمّك. وسنبدأ مع الأساسيات. نصائح متعلقة بالبداهة كلما سهل استخدام موقعك، ارتفع عدد الزوار والعكس بالعكس. يحمل التصميم البديهي (Intuitive design) أهمية كبيرة حتى عندما نتحدث عن السهولة. وهذا يعني أن موقعك يجب أن يكون لديه طرق استخدام واضحة بمجرد أن يفتحه الزائر. عادةً ما يكون التصميم البديهي غير ظاهريًا و هذه أكبر ميزة له. لا توجد خطوط عريضة افتراضية وإنما نهج معتاد لمعظم المستخدمين يمكّنهم من فعل ما يريدون بسهولة. يساعد التصميم البديهي الأشخاص في التركيز على جودة التجربة. كل زائر يرغب في إكمال مهمة دون أن يخسر وقته في المقاطعات. التصميم غير البديهي مُقلق ومشوّش. لا يمكن رؤية التصميم البديهي ولكن هذا لا يعني أن الزوار ليسوا على دراية بوجوده. وسيلاحظون أن جميع العناصر ترتبط بالعمل الذي يقومون به، مما سيجعلهم سعداء بذلك. مبادئ تصميم واجهات المستخدم هناك ثلاثة مبادئ تحدد استخدام اللغة المرئية: التواصل - يظهر بطريقة مألوفة للمستخدمين التنظيم - تقديم بنية متناسقة ودقيقة الاقتصاد - يستخدم سلسلة من التوجيهات بكفاءة طبيعة تصميم واجهة المستخدم الهدف الرئيسي من واجهات المستخدم هو تقديم تفاعل نوعي، وبالتالي، إتاحة تجربة مستخدم مذهلة. إذا رغب المستخدمون بإكمال مهمتهم بسهولة،فلا بد أن يتعاملوا مع تصميم فعال ومباشر. أهمية تصميم واجهة المستخدم بالنسبة للتطوير في بعض الأحيان، يعقد أصحاب العمل اجتماعات لمناقشة ردود أفعال المستخدمين وإيجاد طرق لتطبيق ملاحظاتهم على التصميم. والنتيجة هي تجربة مستخدم مذهلة بسبب مزيج من البساطة والفعالية. ما الدور الذي تلعبه واجهة الويب أثناء التطوير؟ يتم إجراء بحث معتمد على احتياجات المستخدم وتفضيلاته. يناقش أصحاب الشركة كل منها للتوصل إلى تطبيق الممكن منها. من المهم الإصغاء إلى احتياجات العملاء والتغذية الراجعة منهم لضبط التصميم وفقًا لما سبق، آخذين بالحسبان أفضل ممارسات تصميم واجهة المستخدم. قواعد تصميم واجهة المستخدم قاعدة الوضوح - يتوقع المستخدمون رؤية عناصر واجهة واضحة وبسيطة. يتجنب الأشخاص المحتوى المعقد عندما يكونون على الإنترنت. كما أنهم لا يريدون قضاء الوقت في تعلم كيفية القيام بما يُفترض أنه عمل بسيط. قاعدة الأولوية - سيشعر المستخدمون بالثقة عندما يكون لديهم فكرة عما هو متوقع منهم. قاعدة السياق - يجب أن تتيح واجهة المستخدم للمستخدمين قدرة التحكم بما يرون بأنه يجب عليهم التحكم فيه. قاعدة الوضع الافتراضي - إن كان موقعك واضحًا، فلن يحاول المستخدمون تغيير الإعدادات الافتراضية. من المهم أن يكون لديك وضع افتراضي: تأتي أجهزة التلفزيون مع إعدادات افتراضية والتي نادرًا ما يتم تغييرها. نادرا ما يتم تغيير درجة حرارة الثلاجة نجد الأوضاع الافتراضية في كل جانب من جوانب الحياة الأوضاع الافتراضية جوهرية لكل تجربة تأكد من أن الأوضاع الافتراضية عمليّة وقابلة للتطبيق. فنادرًا ما يتم تغييرها. نصائح إنشاء واجهة جديدة معرفة المستخدمين: فرّق بين أهدافهم وأهدافك. أدرجها ضمن قائمة الأولويات. بعد ذلك، خُض في خبراتهم واختصاصاتهم لمعرفة ما يحتاجونه. تعرف على الواجهات المفضلة لديهم واستخدمها. تجنب الصيحات الحديثة وخصائص التصاميم التي بالكاد تمّ طرحها . الطريقة الوحيدة لمساعدة عملائك على إنجاز مهامهم هي بالتركيز عليهم. التنقُّل وهيكل تصميم واجهة المستخدم: حاول التوصل إلى حلول تركز على التفاعل بين المستخدمين والمنتج وتساعد المستخدمين على إنجاز مهمتهم. صنّف الحلول وفقا للأهمية والقوة ودور المستخدم وبالاعتماد على سهولة الاستخدام. اعتنِ بالهيكل، وبنية البيانات، والتنقُّل وصمم واجهة المستخدم تصميمًا عمليًّا مع محتوى غني. إعداد الوثيقة النهائية: يجب أن تحتوي الوثيقة النهائية على بنية واجهة المستخدم بأكملها. ولا بد أن تعرض نهج المنتج من مرحلة التهيئة إلى المرحلة النهائية عندما يتم عرضها على المتصفح. اتبع الأنماط: يصادف المستخدمون معظم الأوقات واجهات مختلفة عن الواجهة الخاصة بك. بعض المواقع التي يصادفها معظم المستخدمين يوميًا هي الفيسبوك و تويتر ومواقع الأخبار و الووردبريس. ربما كنت تعرف مدى نجاح هذه الواجهات لذا يتوجب عليك ألّا تعيد اختراع العجلة. بدلا من ذلك، استعن بتلك المنصات للبحث عن حلول للمشاكل التي تواجهها. فمن الجيد أن تمتلك أنماط مألوفة لواجهة المستخدم. ابحث في التعليقات: يجب عليك دومًا الاستجابة لاحتياجات المستخدمين. يجب أن تمنح المستخدمين الإرشادات وتفسّر سوء الفهم وتصحح الأخطاء. تأكد من إعلام المستخدمين بأي تغييرات. إبقائهم كذلك سيشعرهم كما لو أنهم جزء من عملية التغيير. في نهاية المطاف، وستكون واجهتك هي ما يريده المستخدمون. جعل واجهات الإنترنت سهلة التعلم كلما كان التفاعل أبسط مع واجهة المستخدم، سهل على المستخدم تذكر وظائفها. وهذا يعني أنك تحتاج إلى تصميم واجهة بطريقة تتيح للمستخدم أن يمتلك عددًا قليلًا من الأمور ليفعلها. وللقيام بذلك، سيتوجب عليك تبسيط المعلومات إلى أجزاء صغيرة قابلة للفهم. يجب عليك أيضًا مراعاة عرض ميزات الواجهة على الشاشة. لا تقذفها في وجوه المستخدمين، بل فكر في إضافتها إلى مكان ما على الشريط الجانبي، أو في الجزء السفلي من الشاشة لتجنب تشتيت انتباههم. جعل واجهات الويب بديهية إن أهم عامل يحدد أداء تطبيق الويب هو واجهة المستخدم. هل لديها تصميم بسيط للوحة التحكم؟ إن لم تكن كذلك، فحاول تبسيطها. يمكن لواجهة المستخدم أن تظهر أساليب بسيطة لتحقيق النتائج. لا يهم إذا كان لديك برامج قوية، فالناس تتجاهل تصميم لوحة التحكم عديم الفعالية. ما يهم هو تفاعل المستخدمين مع البرنامج أثناء مساعدتهم على تحقيق هدفهم. ولذلك، فتصميم المواقع الإلكترونية قائم على التركيز على المستخدم أكثر فأكثر. اجعل قرارات المستخدم بسيطة كل شيء يبدأ بجعل التصميم بسيطًا قدر الإمكان. لماذا؟ التصاميم المعقدة تشوش المستخدمين وتصعّب عليهم اتخاذ القرار. ما الذي يمكنني النقر عليه؟ أين؟ هل هو الزر الأحمر هنا؟ هل هو الزر الأخضر هناك؟ طبقّ هيكلًا بصريّا. ما هي أهم الأشياء في واجهتك؟ أبرزها لينصب تركيز المستخدمين عليها. يمكنك التلاعب بالحجم والألوان، والطباعة، والمساحة البيضاء، وغيرها. نمط الخط ربما كنت تقول "حسنًا، أنا أعرف نمط خطوط رائع". وهذا لا يكفي. فوجود خط جيد في تصميمك يصبح عديم الفائدة إن كنت لا تعرف كيفية استخدامه، أو أين تستخدمه، أو ما هو الخط الذي يمكنك استخدامه إلى جانبه. وضع خطوط فريدة في كل مكان لن يحميك، إذ كل خط له صفاته الخاصة ويصلح لجمهور معين. بالإضافة إلى اختيار الخط المناسب لجمهورك، يجب عليك أيضًا التأكد من استخدام حجمه المناسب، لتسليط الضوء على أجزاء معينة من التصميم. يجب أيضًا استخدام الألوان، ولكن كن حذرًا مع مجموعات ألوان معينة. الخلاصة التصميم الجيد للواجهة يُشبه الهواء الذي نتنفسه. لا يمكننا أن نرى أو نفكر فيه. ومع ذلك، فهو يلبي احتياجاتنا. إذا كنت قد صادفت سابقًا واجهة المستخدم سيئة، فستقدّر الموقع الذي يملك واجهة مستخدم سهلة. يجب على التصميم الجيد أن يُشعرك بالثقة دائمًا طالما كنت تركز على مهمتك ويقضي على القلق من أن ارتكابك للخطأ. يجب أن تكون التطبيقات ومواقع الويب عملية ويجب على المصممين وضع المزيد من الجهد والوقت على سهولة استخدام المنتج. ترجمة -بتصرف- لمقال Designer’s Guide for Designing Web App Interfaces لصاحبه Iggy

سيُزار موقعك الإلكتروني هذه الأيام من مجموعةٍ واسعةٍ من الأجهزة: أجهزة الحواسيب المكتبيّة ذات الشاشات الكبيرة وأجهزة الحواسيب المحمولة متوسطة الحجم والأجهزة اللوحيّة والهواتف الذكيّة وغيرها. يتوجب على موقعك من أجل تحقيق تجربة المستخدم المثلى كمطوّر واجهة أماميّة (front-end engineer) ضبط تخطيط الصفحة (layout) استجابةً لهذه الأجهزة المختلفة (على سبيل المثال، دقّة الشاشة وأبعادها المتنوعة). يُشار إلى عملية الاستجابة لشكل جهاز المستخدم باسم (ربما توقعت ذلك) تصميم الويب المتجاوب (RWD). لماذا يجدر بك صرف وقتك لدراسة أمثلة تصميم الويب المتجاوب وتحويل تركيزك إليه؟ يعمل بعض مصممي الويب على سبيل المثال على التأكّد من الحصول على تجربة مستخدم مستقرة عبر جميع المتصفحات، حيث يمضون غالبًا أيامًا في معالجة قضايا صغيرة باستخدام المتصفح Internet Explorer. هذا نهج فاشل. يُمضي بعض مصممي الويب أيامًا في معالجة المشكلات الصغيرة لمستخدمي متصفح Internet Explorer ويتركون مستخدمي الأجهزة المحمولة لديهم كزوار درجة ثانية. وهذا نهج فاشل. أطلق Mashable على عام 2013 عام تصميم الويب المتجاوب. لماذا ا؟ لأن أكثر من 30 ٪ من «حركة مرور البيانات» (traffic) الخاصّة بهم تأتي من الأجهزة المحمولة. إنّهم يتوقعون أن يصل هذا العدد إلى 50٪ بحلول نهاية العام. في الويب بشكل عام، جاءت 17.4٪ من حركة مرور بيانات الويب من الهواتف الذكيّة في عام 2013. يمثل استخدام Internet Explorer في الوقت نفسه على سبيل المثال 12٪ فقط من إجمالي حركة مرور بيانات المستعرض، بانخفاض وقدره 4٪ تقريبًا عن مثل هذا الوقت من العام الماضي (وفقًا لـ W3Schools). إذا كنت تعمل على التحسين لمتصفح معين، بدلًا من مستخدمي الهواتف الذكيّة العالميين، فأنت تضيع في التفاصيل. يمكن أن يُشكّل هذا في بعض الحالات الفرق بين النجاح والفشل - التصميم المتجاوب له آثار على معدلات التحويل (conversion rates) وتحسين ظهور الموقع في محركات البحث (SEO) ومعدلات الارتداد (bounce rates) وغيرها. نهج تصميم الويب المتجاوب إنّ الأمر الأكثر أهميّة في RWD عادةً لا يتعلق فقط بضبط مظهر صفحات الويب الخاصّة بك، بل إنّ التركيز يجب أن يكون على تكييف موقعك منطقيًا للاستخدام عبر أجهزة مختلفة. على سبيل المثال: لا يوفّر استخدام الماوس تجربة المستخدم نفسها التي توفّرها شاشة اللمس. ألا توافقني الرأي؟ يجب أن يعكس تخطيط هاتفك المحمول مقابل تخطيطات الأجهزة المكتبيّة هذه الاختلافات. أنت لا تريد في الوقت نفسه إعادة كتابة موقعك بالكامل من أجل كل حجم من عشرات الأحجام المختلفة للشاشة التي قد يُعرض عليها - فهذه الطريقة ببساطة غير مُمكنة. إنّ الحل البديل هو استعمال عناصر تصميم متجاوبة مرنة تستخدم نفس شيفرة الـ HTML للتكيّف مع حجم شاشة المستخدم. يكمن الحل من وجهة نظر تقنيّة في هذا الدليل للتصميم المتجاوب: في استخدام استعلامات وسائط CSS والعناصر الزائفة وضبط تخطيطات الشبكة المرنة، وأدوات أخرى للتكيُّف ديناميكيًا مع دقّة معيّنة. استعلامات الوسائط في التصميم المتجاوب ظهرت أنواع الوسائط للمرة الأولى في HTML4 و CSS2.1، مما أتاح وضع ملف CSS منفصل للشاشة و آخر للطباعة. وبهذه الطريقة، أصبح بالإمكان تعيين أنماط منفصلة لعرض الصفحة على الحاسوب بشكل مقابل للنسخة المطبوعة. <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> أو @media screen { * { background: silver } } يمكنك في CSS3 تحديد تنسيق الصفحة وتخطيطها اعتمادًا على عرض الصفحة. ولأن عرض الصفحة يرتبط بحجم جهاز المستخدم، فإنّ هذه الإمكانية تتيح لك بالتالي تحديد تخطيطات مختلفة للأجهزة المختلفة. ملاحظة: تُدعم استعلامات الوسائط من قبل جميع المتصفحات الرئيسية إنّ هذا التعريف ممكن من خلال إعداد الخصائص الأساسية: max-widt وdevice-width وorientation وcolor وهناك تعريفات أخرى ممكنة كذلك، ولكن في هذه الحالة فإنّ أهم الأشياء التي يجب وضعها في الحسبان هو الحد الأدنى من الدقّة («العرض» (width)) وإعدادات الاتجاه (أفقي أو عمودي). يوضّح مثال CSS المتجاوب أدناه الإجراء لبدء ملف CSS معين اعتمادًا على عرض الصفحة. ستُطبّق على سبيل المثال الأنماط المحدّدة في الملف main_1.css إذا كان الحد الأقصى لدقّة شاشة الجهاز الحالي هو 480 بكسل. <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" /> يمكننا أيضًا تحديد أنماط مختلفة داخل ورقة أنماط CSS نفسها بحيث تُستخدم فقط في حالة استيفاء قيود محدّدة. لن يُستخدم على سبيل المثال هذا الجزء من ملف CSS المتجاوب إلا إذا كان عرض الجهاز الحالي أكثر من 480 بكسل: @media screen and (min-width: 480px) { div { float: left; background: red; } ....... } التكبير الذكيّ (smart zoom) تَستخدم متصفحات الهاتف المحمول ما يسمى «التكبير الذكي» (smart zoom) لتزويد المستخدمين بتجربة قراءة "ممتازة". يُستخدم التكبير الذكيّ في الأساس لتقليل حجم الصفحة بشكل متناسب. وهذا يمكن أن يظهر بطريقتين: (1) التكبير الذي يبدؤه المستخدم (على سبيل المثال، النقر مرتين على شاشة iPhone للتكبير على موقع الويب الحالي)، و(2) عرض نسخة مكبّرة منذ البداية من صفحة الويب عند التحميل. نظرًا لأنه يمكننا فقط استخدام استعلامات الوسائط المتجاوبة لحل أي من المشكلات التي قد يستهدفها التكبير / التصغير الذكيّ، فمن المستحسن في كثير من الأحيان (أو حتى الضروري) تعطيل التكبير والتأكّد من أنّ محتوى صفحتك يملأ المتصفح دائمًا: <meta name="viewport" content="width=device-width, initial-scale=1" /> إننا نتحكم في مستوى تكبير الصفحة الأولي (أي مقدار التكبير عند تحميل الصفحة) عن طريق ضبط قيمة initial-scale إلى القيمة 1. إذا صُممت صفحة الويب الخاصة بك لتكون متجاوبة، فإنّه عليك أن يملأ التصميم الديناميكي المتكيّف شاشة الهاتف الذكي بطريقة ذكيّة دون الحاجة إلى أي تكبير أولي. يمكننا إضافة إلى ذلك تعطيل التكبير / التصغير بالكامل باستخدام user-scalable=false. عرض الصفحة (page widths) افترض أنك ترغب بتوفير ثلاثة تخطيطات مختلفة للصفحة المتجاوبة: واحدة من أجل أجهزة الحواسب المكتبيّة، وأخرى للأجهزة اللوحيّة (أو أجهزة الحواسيب المحمولة)، وثالثة للهواتف الذكيّة. ما هي أبعاد الصفحة التي يجب أن تستهدفها كقوالب (على سبيل المثال، 480 بكسل)؟ لا يوجد لسوء الحظ معيار محدّد يمكن اعتماده لعرض الصفحة (page width)، ولكن غالبًا ما يتم استخدام قيم التجاوب التالية: 320 بكسل 480 بكسل 600 بكسل 768 بكسل 900 بكسل 1024 بكسل 1200 بكسل يوجد مع ذلك عددًا من تعريفات العرض المختلفة. يحتوي على سبيل المثال عرض 320 وما فوق على خمس زيادات افتراضية لاستعلام الوسائط في CSS3 وهي:480، 600، 768، 992، 1382 بكسل. يمكنني أن أعدّد عشرة أساليب أخرى على الأقل إضافة إلى المثال الوارد في هذا الدليل لتطوير الويب المتجاوب. يمكنك تغطية معظم أجهزة العرض مع أي من هذه المجموعات المنطقية من الزيادات. عمليًا لا توجد حاجة عادةً للتعامل بشكل منفصل مع جميع الأمثلة المذكورة أعلاه لعرض الصفحة- سبعة خيارات دقّة مختلفة تُعدّ مبالغةً نوعًا ما. إنّ 320px و 768px و 1200px هي القيم الأكثر استخدامًا اعتمادًا على تجربتي. يجب أن تكون هذه القيم الثلاثة كافيةً للتعامل مع الهواتف الذكيّة والأجهزة اللوحيّة / أجهزة الحواسيب المحمولة وأجهزة الحواسيب المكتبيّة بالترتيب. العناصر الزائفة (Psuedo-Elements) قد ترغب أيضًا بناءً على أفضل استعلامات الوسائط المتجاوبة لديك في المثال السابق بإظهار أو إخفاء معلومات معيّنة برمجيًّا وفقًا لحجم شاشة جهاز المستخدم. يمكن لحسن الحظ تحقيق ذلك أيضًا باستخدام CSS صرف كما هو موضّح في الدليل أدناه. بالنسبة للمبتدئين، يمكن أن يكون إخفاء بعض العناصر (display: none;‎) حلاً رائعًا عندما يتعلق الأمر بتقليل عدد العناصر التي تظهر على شاشة التخطيط الخاص بالهاتف الذكيّ حيث لا تتوفر دائمًا مساحة كافية. يمكنك من جهة أخرى أيضًا أن تكون مبدعًا باستخدام عناصر CSS الزائفة (محددات (selectors))، مثل ‎:before و‎:aft. ملاحظة: مرّةّ أخرى، تُدعم العناصر الزائفة من قبل جميع المتصفحات الرئيسية. تُستخدم العناصر الزائفة لتطبيق أنماط محدّدة على أجزاء محدّدة لعنصر HTML، أو لتحديد مجموعة فرعيّة معيّنة من العناصر. يتيح لك على سبيل المثال العنصر الزائف :first-line تحديد الأنماط المطبّقة فقط على السطر الأول لمحدّد معين (على سبيل المثال، p:first-line سيُطبّق على السطر الأول من كل عناصر الفقرة p). وبالمثل، فسيُتيح لك العنصر الزائف a:visited تحديد الأنماط المطبّقة على كافة عناصر a مع الروابط التي زارها المستخدم سابقًا. كان هذا مفيدًا صراحةً. فيما يلي مثال بسيط لتصميم متجاوب، حيث نُنشئ ثلاثة تخطيطات مختلفة لزر تسجيل الدخول لكل من أجهزة الحواسيب المكتبيّة والأجهزة اللوحيّة والهواتف الذكيّة. سيكون لدينا على الهاتف الذكيّ فقط أيقونة، بينما سيكون على الحاسوب اللوحيّ الأيقونة نفسها مرفقةً بعبارة "User name"، سنُضيف أخيرًا للأجهزة المكتبيّة أيضًا رسالة توضيحيّة قصيرة ("Insert your user name"). .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } } يمكننا إنجاز ما يلي اعتمادًا فقط على العناصر الزائفة التالية:before و:after:: لمعرفة المزيد عن سحر العناصر الزائفة، يوجد لدى Chris Coyier " وصف تفصيلي جيد عن حيل CSS)(CSS-Tricks. إذًا، من أين أبدأ؟ أنشأنا في هذا الدليل بعضًا من العناصر الأساسيّة لتَصميم ويب متجاوب (أي استعلامات الوسائط والعناصر الزائفة) وقدّمنا بعض الأمثلة لكل منها. ولكن إلى أين سنذهب الآن؟ الخطوة الأولى التي يجب اتخاذها هي تنظيم جميع عناصر صفحة الويب الخاصة بك من أجل أحجام مختلفة للشاشة. ألقِ نظرة على إصدار الأجهزة المكتبيّة للتخطيط المقدّم أعلاه. يمكن في هذه الحالة أن يكون المحتوى على اليسار (المستطيل الأخضر) كنوع من أنواع القائمة الرئيسية. ولكن عند استخدام الأجهزة ذات الدقة المنخفضة (على سبيل المثال، جهاز لوحي أو هاتف ذكي)، فقد يكون من المنطقي إظهار هذه القائمة الرئيسية بالعرض الكامل. يمكنك تطبيق هذا النهج باستخدام استعلامات الوسائط كما يلي: @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } } لسوء الحظ، غالبًا ما يكون هذا النهج الأساسي غير كافٍ مع زيادة تعقيد الواجهة الأماميّة. ونظرًا لأن تنظيم محتوى الموقع غالبًا ما يختلف اختلافًا كبيرًا بين إصدارات الأجهزة المحمولة والأجهزة المكتبيّة، فإنّ تجربة المستخدم تعتمد في نهاية المطاف ليس فقط على استخدام CSS المتجاوب، ولكن أيضًا على استخدام HTML وJavaScript. هناك عدة عناصر رئيسيّة مهمّة عند تحديدك لتخطيطات متجاوبة للأجهزة المختلفة. يُعد التطوير بالنسبة للهواتف الذكيّة أكثر تطلبًا بخلاف الإصدارات الخاصّة بالحواسيب المكتبيّة حيث تتوفر مساحات كافية لعرض المحتوى. فمن الضروري أكثر من أي وقت مضى تجميع محتويات محدّدة وتحديد أهميّة الأجزاء الفرديّة هرميًّا. إنّه من المهم أكثر من أي وقت مضى بالنسبة للهاتف الذكي تجميع محتويات محدّدة وتحديد أهمية الأجزاء الفرديّة هرميًّا. إنّ الاستخدامات المختلفة لمحتواك مهمة أيضًا. فمثلًا عندما يكون لدى المستخدم إمكانية استخدام الفأرة يمكنه عندها ضبط المؤشر فوق عناصر معيّنة للحصول على معلومات إضافيّة، بحيث يمكنك (كمطوّر ويب) ترك بعض المعلومات لتُجمّع بهذه الطريقة - لكن الحال لن يكون ذاته عند استخدام الهاتف الذكيّ. بالإضافة إلى ذلك، إذا وضعت أزرارًا على موقعك والتي ستظهر على الهواتف الذكيّة بحجم أصغر من الحجم النموذجي للإصبع، فسَتخلق حالةً من عدم اليقين وعدم الارتياح في استخدام موقعك وفي مظهره. لاحظ إنّ عرض الويب القياسي في الصورة أعلاه (على اليسار) يجعل بعض العناصر غير قابلة للاستخدام تمامًا عند عرضها على جهاز أصغر. سيزيد هذا السلوك أيضًا من فرص قيام المستخدم بخطأ ما، مما يؤدي إلى إبطاء تجربته. يمكن أن يتجلى ذلك في الممارسة العمليّة في انخفاض عدد مرات عرض الصفحة، وانخفاض المبيعات، ومشاركة أقل بشكل عام. عناصر تصميم متجاوبة أخرى يتوجب تذكّر سلوك جميع عناصر الصفحة عند استخدام استعلامات الوسائط وليس فقط العناصر المستهدفة -لا سيما عند استخدام «الشبكات المرنة» (fluid grids)- وفي هذه الحالة (وعلى عكس الأبعاد الثابتة) ستُملئ الصفحة بالكامل في أي وقت، وسيكبر ويصغر حجم المحتوى بما يتناسب معها. نظرًا لتعيين قيم العرض بالنسب المئوية، يمكن أن يحدث تشوه للعناصر الرسوميّة (أي الصور) أو تلفها عند استخدام الشبكات المرنة. إنّ أحد الحلول للصور هو كما يلي: img { max-width: 100% } يجب التعامل مع العناصر الأخرى بطرق مماثلة. فمثلًا يُعدّ استخدام IconFontsحلًّا رائعًا للأيقونات في تصميم الويب المتجاوب. نبذة عن أنظمة الشبكات المرنة عندما نناقش عملية التكيّف الكامل للتصميم فإننا غالبًا ما نتطلع إلى تجربة المشاهدة المثلى (من وجهة نظر المستخدم). يجب أن تتضمن مناقشة كهذه الحد الأعلى لسهولة الاستخدام ولأهميّة العناصر (استنادًا إلى مناطق الصفحة المرئية) ولسهولة القراءة وللتنقل السهل. يُعدّ ضبط عرض المحتوى (content width) من أهم المكونات من بين التصنيفات السابقة. حدَّدت على سبيل المثال ما يسمى بأنظمة الشبكات المرنة عناصر تعتمد على العرض النسبي كنسب مئوية من الصفحة الإجمالية. وبهذه الطريقة تُضبط تلقائيًا جميع العناصر في نظام تصميم الويب المتجاوب بما يتناسب مع حجم الصفحة. على الرغم من أن أنظمة fluid grids هذه ترتبط ارتباطًا وثيقًا بما ناقشناه هنا، إلا أنّها في الحقيقة كيان منفصل بالكامل يتطلب تعليمًا إضافيًا للمناقشة التفصيليّة. لذلك سأذكر هنا فقط بعضًا من الأُطر الرئيسيّة التي تدعم مثل هذا النهج: Bootstrap و Unsemantic و Brackets. الخلاصة كان تحسين موقع الويب حتى وقت قريب مصطلحًا مخصّصًا حصريًا لتخصيص الوظائف استنادًا إلى متصفحات الويب المختلفة. يفترض هذا المصطلح الآن إلى جانب الصراع المحتوم مع معايير المتصفح المختلفة التي نواجهها اليوم التكيف مع الأجهزة والأحجام المختلفة الشاشة ومع تصميم الويب المتجاوب أيضًا. ولكي يتناسب مع شبكة الإنترنت الحديثة. يجب أن يعرف موقعك ليس فقط من يتصفحه ولكن كيف يتصفحه. ترجمة وبتصرف للمقال Introduction to Responsive Web Design: Pseudo-Elements, Media Queries, and More لصاحبه Tomislav Krnic.

هل تبحث عن أيقونات مصممة وفق التصميم المادي (Material Design Icons) ذات جودة عالية لإضافتها لمشاريعك؟ أنت في المكان الصحيح! لقد جمعت لك قائمة ضخمة من أيقونات مصممة وفقًا للتصميم المادي (Material Design Icons) التي يمكنك توظيفها في تصاميمك المستقبلية. تمتلك الأيقونات دورًا مميزًا في أي تصميم إذ تضفي انطباعًا بصريًا جميلًا للعديد من الحركات، والأدوات، والمنتجات، والخدمات ...إلخ. بإمكانك توظيف أيقونات التصميم المادي هذه في مشاريع متعددة، وإضافة لذلك، فإن تصاميمها تواكب آخر الصيحات. أثِر اهتمام مستخدميك بتصاميم الأيقونات الملفتة هذه. ستكتشف العديد من الأيقونات المتجهية مصممة بتصاميم يدوية وسلسة، ومصنوعة بأيدي مصممين خبراء. تحتوي هذه المقالة على مجموعة كبيرة جدًا ويوجد ما يناسب الجميع. قم بتحميلهم بعدة صيغ، حسب حاجتك. إضافة لذلك، فإن تصاميم هذه الأيقونات تغطي الكثير من الزوايا والمواضيع المختلفة. Material Design Icons Custom Shape هذه مجموعة كبيرة تضم 431 أيقونة تصميم من الفوتوشوب. يمكن تحميل هذه التصاميم واستخدامها بالمجان. Android L Icon Pack by Icons8 لديك هنا مجموعة ضخمة تحتوي على 840 أيقونة مصممة وفق التصميم المادي (Material Design Icons) وهي متاحة بصيغة PNG. وتشمل أيقونات التواصل الاجتماعي، والأسهم، والخدمات ...إلخ. Material Design Icon Grid صمَّم هذه الأيقونات المصمم Jiangping Hsu ويمكن تحميلها بصيغة ملفات PSD. بإمكانك استخدامها في أشرطة العمل كأيقونات بدء. Google Material Icons أيقونات جوجل هذه تم صنعها خصيصًا لتطبيق Sketch. ألق نظرة على كل شيء وحدد إذا ما كانت هذه التصاميم مفيدة لمشاريعك. Material Design Powerpoint & Keynote Icons يوجد هنا مجموعة كبيرة مكونة من 425 أيقونة بإمكانك استخدامها في برنامج Powerpoint و Keynote. بإمكانك تغيير الألوان حتى تناسب ما تريد وضعها معه. Isometric Material Icons وهي مجموعة رائعة تشمل أيقونات مصممة تصمميًا جيدًا. بإمكانك تحميلها بأكثر من صيغة ملف مثل PNG، و PSD، و AI. Material Design Icons with Bounds 250 أيقونة تصميم مادي (Material Design Icons) بإمكانها أن تندمج بداخل مشاريع Sketch الخاصة بك. تفقد هذه الأيقونات وحدد إن كنت تستطيع استخدامها في تصاميمك الحالية. Material Design Icon Templates سوف تجد هنا العديد من قوالب أيقونات التصميم المادي (Material Design Icons) المختلفة والتي بإمكانك استخدماها في تصاميمك الحالية أو المستقبلية. Material Icons Pack وهي مجموعة كبيرة أخرى مكونة من 435 أيقونة مصممة وفق التصميم المادي (Material Design Icons). بإمكانك تحميل هذه العناصر في برنامج Sketch وصيغة SVG. Material Design System Icons أيقونات النظام هذه تم صُنعها بواسطة Walmyr Carvalho. ستجد في الرابط الموجود بالعنوان 20 أيقونة جميلة بإمكانك استخدامها في كل من Sketch وبصيغة PNG. Material Design Icons by Google لديك 900 أيقونة مصممة وفق التصميم المادي (Material Design Icons) بين يديك وجاهزة للاستخدام فورًا. هذه الأيقونات لديها تصاميم بسيطة ولكن مذهلة وسوف تترك انطباعًا إيجابيًا لدى مستخدميك. Mprphing Material Design SVG Icons – SVG Morpheus يوجد هنا مجموعة رائعة من أيقونات SVG المرسومة والتي يمكنك استخدامها في تصاميمك. اضغط على الرابط المرفق بالأسفل لتشاهدها. Material Design Webfont Icons هذه مجموعة مميزة وتضم أكثر من 1900 أيقونة مصممة وفق التصميم المادي (Material Design Icons). هذه المجموعة تشمل تصاميم أيقونات متعددة الاستخدام ومتوفرة بعدّة صيغ وألوان وأحجام. Material Design Icons ألق نظرة على أيقونات التصميم هذه بصيغة PSD الرائعة والتي يمكنك تحميلها واستخدامها في مشاريعك مجانًا. هذه الأيقونات لديها تصاميم ذات تفاصيل مفعمة بالألوان وسوف تبدو رائعة في مشاريعك. Material Design Icon Templates ستجد هنا مجموعة رائعة من قوالب أيقونات التصميم المفيدة والتي بإمكانك استخدامها لصنع عناصرك الخاصة. Free Set of Server – Hosting Material Design Icons تشمل هذه المجموعة 12 أيقونة جميلة مصممة وفق التصميم المادي (Material Design Icons) والتي تتعلق بالخوادم والمستضيفات. بإمكانك تحميلها بصيغة PSD أو PNG ويمكنك أيضًا استخدامها في كلا المشاريع المجانية والتجارية. Google Maps & Streetview Icons تجد هنا بعض الأيقونات المرسومة الخاصة بخرائط جوجل (Google maps) ووضع رؤية الشارع (Streetview) والتي يمكنك استخدامها في مشاريعك الحالية أو القادمة. Angular Material Icons (eps) لديك هنا مجموعة رائعة من الأيقونات الزاويّة التي يمكنك تحميلها واستخدامها بالمجان. هذه العناصر لديها تصاميم مفصّلة بألوان جميلة. Material Design +420 Free Icons (SVG, EPS, PSD, PNG Files) أيقونات التصميم هذه متواجدة بصيغة vector مما يجعلها مثالية لأي مشروع، مهما كان حجمه. بإمكانك الاختيار بين أكثر من 420 أيقونة مجانية وتأتي بصيغة SVG، و PNG، و PSD وصيغ ملفات أخرى. ترجمة -بتصرف- للمقال ‎7000+ Material Design Icons - Ultimate Icon Roundup لصاحبه Iggy

كلمة حركات مستمدة من الفعل «حرَّك» والتحرُّك سمةٌ تعطينا الإحساس بالحيوية وتجعل أحداث الطبيعة تبدو أكثر واقعيةً بالنسبة لنا، فالحركات تجذب انتباه الناظر وتجعلة يشعر بإثارة الموقف وتبرز المشاهد الأكثر أهميةً وإقناعًا من غيرها. أمَّا العناصر الساكنة التي تجلس بلا حراك، فتشعرك أنَّها ميتة، حتى وإن كان تصميمها جذابًا. يعدُّ التحريك فنًا مثله كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وصارفي هذه الأيام علمًا يُدرّس وعملًا يُنجَز، حتى أنه أصبح متأصلًا في روح تصميم الويب ويبدو أنه إضافة رائعة إلى العديد من عناصر موقع الويب. هل تجلب الحركات المزيد من الحياة للتصميم أم أنها قد تفسده أحيانًا؟ دعنا نتعرف على الفوائد التي يمكن أن تقدمها الحركات لموقع الويب وما هي الحالات التي يكون من الأفضل تجنبها. كيف ظهرت الحركات في تصميم المواقع ظهرت الحركات في الويب منذ وقت طويل. أولاً، كانت هناك ملفات ‎.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

إذا كانت وظيفتك هي إنشاء تصميمات ويب عالية الجودة، عليك أن تدرك أنّ مساهمتك في العملية التسويقية مهمة جدًا، لذلك، فإن قضاء بعض الوقت لصقل معرفتك بتعلم مصطلحات التسويق المشهورة سوف يمنحك فهمًا أكثر لعملك من خلال سياق أكبر في التسويق. كميزة إضافية، من الممكن تعلم بعض المصطلحات التي تستطيع استخدامها في نقاشاتك مع المُشغلين والعملاء وإثارة إعجابهم بمعرفتك وتمكنك في هذا المجال. هذه بعض المصطلحات التي تحتاج للبدء بالتعرف عليها: اختبار أ/ب (A/B Testing) هو نسخة المسوق في المنهج العلمي. عندما تكون هناك مشكلة ما في تصميم موقع، بدلًا من إجراء تعديل شامل على التصميم، او تغيير المحتوى والخطوط أو تغيير الألوان بشكل كامل، يعمد المسوقون لاستخدام اختبار أ/ب كأداة لتجريب نُسخ بديلة للموقع وعادةً ما يتم تغيير عنصر واحد فقط. التحليلات (Analytics) يشير مصطلح التحليلات ببساطة الى بيانات كأرقام. معدل فتح البريد الإلكتروني، وعدد زائري مدونة ما، وعدد النقرات المدفوعة، وعدد المشاهدات وغيره من الأرقام، كل ما سبق يُمثّل مجموعة متنوعة من البيانات التي يُمكن استخلاصها من تحليلات عملية التسويق. B2B يُشير مصطلح B2B الى مفهوم "من قطاع أعمال إلى قطاع أعمال" ونقصد به هنا الطرفان المباشران لعملية التسويق، ويُمثل الطرفان قطاعي أعمال مختلفان بحيث يكون جمهور قطاع أعمال ما هو قطاع أعمال أخر. B2C يشير مصطلح B2C الى مفهوم "من قطاع أعمال إلى المستهلك" وفيه يستهدف قطاع أعمال ما جمهورًا من المستهلكين العاديين (ليسوا قطاع أعمال). معدل الارتداد (Bounce Rate) معدل الارتداد هو نسبة الزائرين الذين يغادرون موقعك بمجرد الدخول لصفحة واحدة. هذه الإحصائية يتم متابعتها لتحديد الجزء الذي يفقد فيه الزائر الاهتمام بالموقع. ستجد هنا دليل يُساعدك في تحسين معدل الارتداد لموقعك. هوية العلامة التجارية (Brand Identity) تتضمن هوية قطاع أعمال ما كل شيء يربطه الناس بالعلامة التجارية الخاصة بهذا القطاع. من الممكن أن تتضمن هوية قطاع الأعمال كل من اسم الشركة، شعار الشركة، ألوان العلامة التجارية، نوع خطوط الطباعة، الصور، محتوى صوتي وهكذا. شخصية المشتري (Buyer Persona) ينشئ قطاع الأعمال هوية جمهوره من خلال بناء ما يًسمى بـ "شخصية المشتري" وتُبنى معالم هذه الشخصية باستخدام المعلومات الجغرافية والسكانية أو تاريخ سلوك المستخدمين وغيره من المعلومات، وتمنح هذه الشخصية الجمهور القدرة على تشكيل محتواه، وتحديد جهود التسويق بالطريقة التي يرغبها. دعوة إلى الإجراء (Call-to-Action) كل صفحة في الموقع لابد أن يكون لها هدف واضح لجمهور الأعمال وكل جزء من التسويق لابد أن يكون مضمونًا. دعوة إلى الإجراء يمثل رسالة تقوم بتوجيه الزائر للقيام بالخطوة التالية لإكمال تحقيق الهدف المُراد منه. المحتوى (Content) المحتوى هو كل شيء يحتويه الموقع من نصوص، وصور، ومقاطع فيديو، ونداء إجراء، ومكونات القائمة الجانبية، والحركات والأيقونات ...إلخ. التحويل (Conversion) التحويل هو غاية التسويق وهدفه النهائي، ويتغير شكل التحويل من موقع لأخر، فالتحويل في مواقع العضويات يتحقق باشتراك الزائر في العضوية. في مواقع التجارة الإلكترونية، التحويل هو شراء سلعة أو منتج. للمدونات، التحويل هو الاشتراك في المدونة ومتابعة الخلاصات فيها. الاشتراك (Engagement) يشير مصطلح الاشتراك الى أي تفاعل بين قطاع أعمال ما والمستخدم النهائي لديه. يستخدم المسوقون هذا المصطلح للإشارة عادةً إلى التفاعل الحاصل في المنصات الاجتماعية والذي يحدث بأشكال متعددة مثل الإعجاب، المشاركة والتعليق. محتوى متجدد (Evergreen Content) يكون المحتوى متجددًا عندما لا يتقيد بوقت ما. وبكلمات أخرى، يبقى هذا المحتوى قيمًا وذو علاقة بغض النظر متى يقوم شخص رؤيته. الارتباك والمقاومة (Friction) تحدث حالة الارتباك ومقاومة التحويل في عملية التسويق عند إزعاج المستخدم وإرباكه أثناء محاولته إتمام إجراء معين. التسويق الضمني (Inbound Marketing) يتطلب التسويق الضمني تكتيكات خفية، وغالبًا يركز على التجربة وشرح الخبرة والمعرفة أكثر من محاولة البيع. الاصطياد (Jacking) الاصطياد (مثل الاختطاف) يحدث عند استخدام فكرة رائجة لصالح قطاع أعمال ولغرض خاص. من أمثلة ذلك هو استخدام newsjacking (تصيد الأخبار الشائعة)، و trendjacking (تصيد المواضيع الشائعة), و memejacking (تصيد النهفات والنكات الشائعة). مؤشر الأداء الأساسي (Key Performance Indicator) نعني بهذا المصطلح (يُختصر بـ KPI) قياس درجة النجاح في تحقيق هدف ما. الكلمة المفتاحية (Keyword) الكلمات المفتاحية هي ما يُركز عليه المسوقون في بناء كل جزء من المحتوى المكتوب. الكلمات المفتاحية هي أحد الطرق التي تُستخدم في تهيئة المحتوى ليناسب محركات البحث. صفحة الهبوط (Landing Page) كل صفحة في موقع ما هي صفحة هبوط. بلغة التسويق، وبشكل خاص، تُصمم صفحات الهبوط لتحقيق هدف خاص بالبيع. العميل المحتمل (Lead) يشير مصطلح Lead في لغة التسويق إلى العميل المحتمل. التسويق المؤتمت (Marketing Automation) التسويق المؤتمت هو عملية تشغيل "مهمة تسويقية" وتنظيمها باستخدام برمجية ما. التهيئة للأجهزة المحمولة (Mobile Optimization) التهيئة للأجهزة المحمولة هو المصطلح العام المستخدم عند تصميم موقع وأخذ الهاتف المحمول في الحسبان. التصميم المتجاوب وتقييم سرعة الصفحة هما مثالان للتهيئة للأجهزة المحمولة. تحسين الصفحة – الداخلي (On-page Optimization) يشير هذا المصطلح إلى أي نوع من التحسينات المتعلقة بعملية البحث التي يتم تطبيقها داخل صفحة ويب. يشمل ذلك استخدام التخطيط المتجاوب وتهيئة النص باستخدام البيانات الوصفية. تحسين الصفحة – الخارجي (Off-page Optimization) يشير هذا المصطلح إلى أي نوع من التحسينات المتعلقة بعملية البحث التي يتم تطبيقها خارج الموقع. الشبكات الاجتماعية وفرص الارتباط هما مثالان على ذلك. التسويق التقليدي (Outbound Marketing) هي العملية التقليدية للتسويق وتكتيكاتها محصورة بغرض البيع المباشر. نقطة الألم (Pain Point) كل حل أو منتج أو خدمة الهدف منه هو حل نقطة ألم للزبون. غالبًا يتم تعريفها عند بناء شخصية المشتري. التطويع (Repurposing) التطويع هو استخدام جزء من محتوى وتجديده كشيء اخر، فمثلًا، يقوم المسوقون بأخذ منشور مدونة ومناقشته خلال جلسة فيديو حية. التهيئة لمحركات البحث (Search Engine Optimization) يشير مصطلح التهيئة لمحركات البحث (السيو SEO) الى أي تكتيك تسويقي يهدف إلى تحسين ترتيب الموقع خلال ظهور نتائج البحث. تحسين الصفحة داخليا وخارجيا هما مثالان للسيو. الإثبات الاجتماعي (Social Proof) يشير الإثبات الاجتماعي إلى اعتماد المستهلك على شهادة الغير من المستخدمين لتحديد نظرته وموقفه تجاه علامة تجارية ما. الشهادات، مراجعات المنتج، التقييمات وصور منتجات الشركة المُصورة من قبل المستخدمين هي أمثلة على الإثبات الاجتماعي. القائد المُفكر (Thought Leader) يُنظر للقائد المُفكر كشخص مؤثر وخبير في مجال مُعين. من منظور تسويقي، يُشير المسوقون للمحتوى التسويقي الداخلي كمحتوى قائد مُفكر. تجربة المستخدم (User Experience) في التسويق، يُستخدم مصطلح تجربة المستخدم (UX) للإشارة غالبًا الى خبرة المستخدم في استخدام شيء ما. يوجد طريقة في تصميم الويب تُسمى تصميم UX والتي تُركز بشكل كبير على بناء كل إنش في الموقع بناءً على إعدادات المستخدمين، سلوكهم وأهدافهم. ترجمة -وبتصرّف- للمقال The Marketing Terms You Need to Know as a Web Designer لصاحبه Brenda Stokes Barron

هناك العديد من شركات تطوير صفحات الويب التي تستخدم أُطُر تصميم مواد حصرية لمشاريع تطوير صفحات الويب وتطبيقات الهواتف المحمولة الخاصة بتجربة المستخدم UX أو واجهة المستخدم UI. وبما أنّ أُطُر تصميم المواد هي مصادر مفتوحة، فإنها توفر أُطُر ومكونات واجهة مستخدم مصممة مسبقًا تساعد في تطوير تطبيقات مخصصة للهاتف المحمول وصفحات الإنترنت. تم إطلاق مفهوم إطار تصميم المواد من قِبَل جوجل في عام 2014. وقد تم استخدامه في البداية لتحسين تصاميم تطبيقات آندرويد، وتطبيقات الويب، ونظام تشغيل Chrome، وتطبيقات iOS وما إلى ذلك. وساعد الإطار كثيرًا في إنشاء واجهات سهلة الاستخدام للتطبيقات التي تمكّن المستخدمين من فهمها واستخدامها بسهولة. تقدّم العديد من أطر تصميم المواد الحديثة، واجهات مفيدة ومكونات أخرى مثل الأيقونات، والأزرار، ومربعات الاختيار، والألوان، والخطوط، وغيرها. تساعد هذه العناصر في تطوير تطبيقات مبتكرة للغاية وسهلة الاستخدام لجميع مشاريع التطبيقات القائمة على صفحات الويب والهواتف المحمولة. إضافةً إلى أنّ الأُطُر توفر مرونة لإجراء التغييرات اللازمة في التطبيقات وتعزيز نهجها سهل الاستخدام للعميل. ومع ذلك، فقد قامت أُطُر تصميم المواد بتحديث طريقة عمل تصميم التطبيقات واقتراح السُبُل المناسبة للمطورين لإكمال مشاريع تطبيقات صفحات الويب والهواتف المحمولة بنجاح. لنستكشف بعض أُطُر تصميم المواد المطلوبة بشدةّ والتي يستخدمها المطورون بشكل متكرر في مشاريعهم، مثل: Material UI هذا إطار عمل CSS، ويتضمن مجموعة من مكونات واجهة المستخدم المفيدة التي تستخدم تصاميم المواد من جوجل. إنّها مجموعة من العديد من العناصر سهلة الاستخدام مثل مفاتيح التحويل، ومربعات الحوار، وأشرطة الأدوات، والقوائم المنسدلة، وخانات الاختيار، وما إلى ذلك. يمكنك استخدام هذه الواجهات في تطبيقاتك ويمكنك جعلها سهلة الاستخدام للعميل. Ionic Material هذا إطار متقدم، يُستخدم على نطاق واسع لتطوير التطبيقات الهجينة في HTML5. يمكن للمطورين الذين يعملون على إطار عمل Ionic، استخدام هذا التصميم لإنشاء تطبيقات سهلة الاستخدام لمشروع العميل المرتكز على صفحات الويب. Materialize هذا إطار متجاوب بالكامل، يستند إلى دليل تصميم المواد (material design) من جوجل. ويوفر مجموعة من مكونات CSS مثل grid، و table، و color، و shadow وغيرها. علاوةً على ذلك، يستخدم أيضًا مكونات الـ JavaScript مثل القائمة المنسدلة، ومربعات الحوار، واختلاف الموضع، وعلامات التبويب، والانتقال وغيرها. Leaf إنه إطار حديث لتصميم المواد القائمة على CSS وفقًا لمعايير جوجل. يوفر هذا الإطار مكونات مفيدة ومتنوعة لإضافتها في التطبيقات مثل الأزرار والصور، والقوائم المنسدلة، والرموز، والشبكة، والألوان وغيرها الكثير. Angular Material سيساعدك استخدام إطار تصميم المواد هذا على جعل مكونات واجهة المستخدم قابلة لإعادة الاستخدام ويسهل الوصول إليها من المعرض. تتوفر جميع عناصر تصميم المواد في هذا الإطار، كموجهات Angular وخدمات يمكن تخصيصها بناءً على المتطلبات. MUI هو إطار مجاني مفتوح المصدر ولا يزال قيد التطوير. يتيح لك تخصيص تصميم التطبيق عن طريق تغيير لونه، وخطه، ونقطة توقفه وغيرها. Bootstrap Material Design هذا إطار عمل للجودة يعتمد على السمات ويوفر 740 أيقونة مفيدة لتصميم المواد التي يمكن استخدامها لمشاريع تطوير تطبيقات صفحات الويب والهاتف المحمول. يمكنك أيضًا العثور على هذه الرموز في معرض تصميم المواد من جوجل. Lum X هذا إطار آخر مفيد لتصميم المواد لمحبي Angular. إنه إطار متجاوب بالكامل، تم تطويره باستخدام أساس jQuery ويوفر أداء أفضل في مشاريع التطبيقات القائمة على صفحات الويب. Polymer يعتمد هذا الإطار على مكونات صفحات الويب التي يمكن تخصيصها أيضًا وفقًا للمتطلبات. يوفر Polymer دعمًا أفضل لجميع المتصفحات الحديثة مثل Firefox و Safari و Chrome وما إلى ذلك. سيساعدك هذا الإطار في استخدام مكونات صفحات الويب بطريقة مخصصة ويمكن الوصول إليها من خلال جميع المتصفحات. Paper إنّه سمة مخصصة تنفذ تصميم المواد باستخدام المواد الأولية، والأيقونات والخطوط من جوجل. يمكّن هذا الإطار من تطوير أنماط تصميم مواد مخصصة جاهزة للاستخدام ويمكن تعديلها وفقًا للمتطلبات. الخلاصة لتطوير تطبيقات الويب وتطبيقات هاتف محمول سهلة الاستخدام وإبداعية، يمكنك استخدام أُطُر تصميم مواد واجهة المستخدم وتجربة المستخدم الأنسب لك والتي اقترحتها جوجل. توفر هذه الأُطُر العديد من المكونات المفيدة لتنفيذها في التطبيقات وإنشاء تطبيقات فعّالة للغاية للعميل. ترجمة – وبتصرف – للمقال Best Material Design Frameworks for Modern UX/UI Web Design لصاحبه Tom Hardy

اليوم، تبدأ التجارب عادةً على أروقة الإنترنت قبل نزولها إلى الشارع. وفي بعض الحالات، تنتهي التجربة بمجرد عودتها إلى الويب. إذا كنت ترسم فراغًا، لا تنظر إلى أكثر من ذلك. يعرف الزبائن مدى جودة الأكل على الإنترنت من خلال التقييمات و التوصيات. وحتى بعد اختيار المكان المثالي على الإنترنت، يأخذ الزبائن محتوى Yelp معهم - متذكرين أي من مقدمي الخدمة هو الأفضل أو أي الساندويشات تكون "بخبزٍ جيد". بعد ذلك، وبعد انتهاء الوجبة يعود الزبون للتقييم ويتفاعل مع الآخرين. إنّ علاقة الإنترنت - بدون إنترنت (online-offline) ليست محدودة بتطبيقات التقييم. في الواقع، تؤكد أحد أحدث المبادرات الشخصية في InVision على تحويل العلامة التجارية الرقمية خاصتنا إلى تجربة ملموسة - ونحن نشارك الأفكار والرؤى الداخلية مع أي شركة تبحث عن هذا. أشياء رئيسية لوضعها في الحسبان قبل إحضار علامتك التجارية للحياة عندما يكون هدفك هو خلق تجربة، سيكون هناك الكثير من المصاعب قبل أن يتم أي شيء بشكل صحيح. 1. تحديد الزمن إنّ تحديد وقت زمني في البداية يساعد على توضيح إمكانيات كل من له دور. لذلك، يمكن للتجربة أن تتمدد أو تتقلص لتناسب الفترة - أسابيع أو حتى ساعات- لتنافس الأولويات، كما يجب توقع المشاكل. وعندما تبدأ الكرة بالدوران، تستطيع القيام بقرارات استراتيجية عمّا يجب احتواءه أو تجاهله بناءً على كمية الوقت التي تملكها مقارنةً بالنتائج المتوقعة. 2. وضع مصادر الأفكار وجمع الإلهام الداخلي تتضمن الخطوة الثانية، العمل الجماعي. في الوقت الذي تقوم به بتحضير تفاصيل التجربة التي تريد إنشاءها، قم بجمع المصادر من فريقك. عند هذه النقطة، سيكون كل شيء نظريًا - وإن دمج وجهات نظر من مجالات وظيفية متعددة- هي طريقة مؤكدة لتمثيل علامة تجارية كاملة، ليس فقط أفكار منظمي الاحتفالات والأحداث وخبراء التسويق. كيف نعلم أنّ هذه الخطوة خطوة أساسية؟ لأننا نعلم من واقع خبرتنا أنّ إخراج الأفكار هو تجربة تأتي بعد الدعوة إليها فقط، وأنّ فكرة استخدام تنسيق غداء قابل للتطور أتت من عضوٍ في الفريق. جرى تصميم العشاء الجماعي للتفكير في التصميم حول عدة مواقع واتجاهات. 3. اختر إما الوكالة أو داخل المؤسسة عندما يكون لديك ولفريقك أفكار قوية وثابتة وخط زمني للعمل عليها، أنشئ نصًّا موجزًا ولوحة مرئية عنها. سيربط مصدر الثقة هذا خبرتك مع المشاركين الآخرين. ستحتاج هنا إلى رسم خط. هل ستُنشِئ كل شي داخل مؤسستك، أم ستوكل أعمال التصميم إلى وكالة مختصة؟ إنّ القيام بهذا العمل داخليًا يعني في حالتنا، أننا سنتحكم بشكل أكبر بكل جماليات التصميم. كما أننا أردنا أن تكون التجربة مؤمنة بشكلٍ كبير. كل وحدة صورية تكون ذات أهمية كبيرة في عالم التصميم الرقمي- كما هي اللمسات الفنية في كل شخص. 4. قم باتخاذ القرارات المهمة المتعلقة بالعلامة التجارية في الكثير من الأوقات، الحل الأول هو طباعة لافتة كبيرة أو ملصق جداري مع اسم الفعالية وشعار الشركة. يغيِّر ذلك كيفية استقبال الزوار للفعالية وما قمنا بخلقه - خاصة إذا لم تترجم علامتك الرقمية إلى عرض تجاري أو وليمة. إن قرارات العلامة التجارية التي تتخذها هي المفتاح لتأسيس الإحساس بتجربتك. وقبل أن تبدأ بوضع الأشياء مع بعضها، قرِّر عدد العناصر التجارية الخارجية التي ستكون جزءًا من الخليط. هل ستستعمل ألوان الشركة؟ هل سيكون شعار الشركة موجوداً على كل عناصر التصميم؟ وهل هدفك هو التعريف عن علامتك التجارية أم أنّ هناك هدف آخر؟ هناك فرق كبير بين وضع علامتك التجارية على رأس البيئة الموجودة، والتي تعمل بشكل طبيعي. تصميم تجربة دون العلامة التجارية العلنية عندما يحين الوقت لإظهار شخصية شركتك، ركز على السبب وليس الكيفية. ستتمكن من التحكم في شعور الحاضرين من خلال تأطير كل قرار من قرارات العلامة التجارية الخاصة بك حول الأهداف، وتوليد العملاء المتوقعين في سوقٍ جديدٍ، والالتقاء بالعملاء وإظهار التقدير للمجتمع. قالت ميكايلا أليكساندر، مديرة الفعاليات التسويقية التي قادت حفل العشاء الجماعي للأفكار في التصميم: في هذا السيناريو، كان "السبب" هو إعطاء رواد التصميم بيئة ملهمة للإبداع لمناقشة تحديات هذا المجال والتفكير في التصميم دون ضغطٍ من حضورٍ إعلامي أو غيره. كان شعار أسبوع التصميم في سان فرانسيسكو ، "اسأل عن كل شيء". مع وضع كل هذه الأشياء في الحسبان، جعلت InVision كل تفاصيل الأمسية مفاجئة بطريقةٍ أو بأخرى من خلال تصميمها. باستثناء عدد قليل من التفاصيل الصغيرة، حيث أنّ شعار الشركة لم يكن موجودًا، وبالتأكيد لم يكن نقطة الارتكاز. باستخدام السرد الذي استخدمناه في مراحل التخطيط وبالتزامن مع موضوع أسبوع التصميم، اعتمدنا في كل قرار للتصميم، على تجربتنا المستهدفة. عند القيام بذلك لعلامتك التجارية الخاصة، فكر في الطريقة التي تجسد بها تجربتك في شعار الشركة أو مهمتها. يعد هذا بمثابة علامتك التجارية، دون الحاجة لمئات الشعارات. ولإثارة الفكرة القائلة بأن قادة القرار سيجتمعون في بيئة نخبوية ومريحة، أضفنا العديد من اللمسات الشخصية. ومن بين الأشياء الأخرى التي قمنا بها لتجسيد علامتنا التجارية، ما يلي: استخدام البيئة لتعزيز مقاصدنا جعل التجربة مرنة كالسوائل من خلال دمج أماكن متعددة التحكم في أجواء كل مكان بالتعاون مع البائعين اختيار البائعين مع فلسفات التصميم المتطابقة والمناهج التي تطابق الجمالية التي يتم إنشاؤها المكونات الرقمية المبدئية للاحتفال بالتصميم خارج مجتمع الإنترنت ركز على نقاط الاتصال هذه لتنشيط علامتك التجارية مع وضع جميع الاعتبارات الأخرى جانبًا، وجدنا أنّ هذه المناطق هي الأكثر أهميةً لإنشاء تجربة خارج الشبكة العنكبوتية. تُرسم كل نقطة اتصال من تجاربنا الخاصة، ولكن يمكن تكييفها بسهولة للعمل مع علامتك التجارية. اختر البيئة التي تدعم سردك بشكل أفضل عندما يكون هدفك هو ربط الناس، فإن البيئة التي تضعهم فيها مهمة بقدر أهمية المحادثات. اقترب من ذلك مثل مصمم صفحات الإنترنت الذي يأخذ في الحسبان المحددات الرقمية للواجهة وكيف يؤثر ذلك على رحلة المستخدم عبر موقع الإنترنت أو التطبيق. ولكن بدلًا من رحلة على الشاشة، فأنت تقوم بتصميم رحلة فعلية. ولتعيين نغمة هذه التجربة وربطها بالخط الزمني والتنسيق، استخدمنا صفحةnVite . عكست اللغة تطور الفعالية، ونقلت الجدول الزمني، وألمحت إلى الجمالية العامة. ونظرًا لأننا أردنا تسهيل الاتصالات الأصلية والحفاظ على قدرة تخمين الحضور، فإن العشاء الرائع في أماكن متعددة منح الضيوف رحلةُ واضحةً، إذ أُلهمت كل أمسية من اقتباس مختلف عن التصميم من قادة الصناعة المختلفين. تحديد الأماكن والبائعين اللازمين لإكمال التجربة على غرار اختيار البيئة المناسبة، يتم اختيار البائعين المناسبين - وأماكن أخرى، إذا لزم الأمر – للإحاطة بكل الجوانب. لا يتم إنشاء البيئة دائمًا في مساحة واحدة فقط. ولجعل الحركة جزءًا حقيقيًا من التجربة، اخترنا 3 أماكن تكميلية لترسيخ كل مرحلة. في كل مكان، تم تعريف الحضور على سؤالٍ مختلف حول التصميم أو تحدياته. عندما يتعلق الأمر بالبائعين، اخترنا مقدمي خدمات محترمين تتشابه أساليبهم مع الحِرَف بالطريقة التي تتبعها شركات تقديم الأفكار في التصميم. ونتيجةً لذلك، ساعدت كل التفاصيل في تشكيل التجربة وتعزيز الأفكار ذاتها التي استخدمناها لبناء الفعالية. تصور العناصر المرئية وكيف ستقوم بإنشائها للحصول على جوهر إنشاء تجربة قائمة بذاتها - وليس مجرد امتداد لعلامة تجارية في علامة تجارية أخرى متوازنة مع الهدف. لذلك، أرَدتُ أن أبتعد عن الخيارات المعتادة. وباعتباري مسوقةً، هناك دافع لجعل العلامة التجارية ذات صدىً عالٍ قدر الإمكان من خلال لافتات وشعارات قابلة للسحب عند كل منعطف. بدلًا من ذلك، أردت أن أرتقي وأدمج ذلك في التجربة - ميكايلا ألكساندر- ، مديرة فعاليات التسويق. وهناك واحدة من أكثر الطرق إبداعًا لإكمال علامتك التجارية، وهي استخراج العناصر المرئية التي تساعد في التعرف عليها على الإنترنت، ثم تطبيقها على المساحة المادية. على سبيل المثال، عملنا مع البائعين لإضافة نقاط من اللون الوردي لـ InVision إلى القائمة دون الابتعاد عن نظام الألوان العام. قد تتعرض لمحددات بصرية لكن هذا هو المكان الذي تلعب فيه الحلول الإبداعية. يختلف تصميم الويب عن الطباعة. في بعض الحالات، قد تؤدي هذه الاختلافات إلى إلقاء نظرة خاطفة على خططك نظرًا لارتباطها بالجمالية العامة. وقال كونور مورفي، مصمم InVision الذي أنشأ العشاء الجماعي للتفكير في التصميم: على سبيل المثال، كانت لدينا مواد سوداء وذهبية لطيفة مع خطة لجعلها وكأنها مختومة. لقد أضاف عنصرًا فاخرًا، لكنه لم يكن قابلاً للتنفيذ في ذلك الوقت. من أجل حل المشكلة، نظرت إلى درجات أخرى من الذهبي واخترت واحدة أعطت تأثيرًا مماثلًا. ترجمة المكونات الرقمية إلى التفاصيل المادية من المحتمل أنك قد اعتدت على العمل مع العناصر الرقمية لعلامتك التجارية. تحتوي الأدلة على التفاصيل، ويوفر كل مشروع نظرة ثاقبة لتحديات الواجهة وأفضل الممارسات التي تظهر على الشاشة. لسوء الحظ، فإن نقل كل ذلك من الشاشة إلى المشهد ليس سهلًا كما يبدو. الألوان يناسب اللون الأسود والذهبي العشاء الجماعي للتفكير في التصميم بشكل أفضل، لذلك لم نواجه التحدي المتمثل في مطابقة نقاط InVision الوردية المعتادة. إذا اخترت المزيد من العلامات التجارية التقليدية، ستكون الألوان أمرًا يجب مراعاته بالتأكيد. إن ترجمة الشيفرات الست عشرية إلى PMS لا تسفر دائمًا عن تطابق تام، لذلك يجب عليك اختيار بديل يحافظ على العلامة التجارية. قرارات أسلوب المحتوى تم دمج الاقتباسات من قادة التصميم في الصورة لإعطاء أفكار أكبر عن التصميم، ولكن تم طباعتها — على عكس معظم ميزات المحتوى من InVision. يختلف التصميم للطباعة أو لأي مواد مادية عن تصميم شيء ما على الشاشة. من خلال الشاشة، يمكنك رؤية الشكل الذي سيبدو عليه التصميم تمامًا - مع كل الألوان الصحيحة والخطوط المناسبة وجودة الصورة وما إلى ذلك. أما في الطباعة، يكون الأمر أصعب قليلًا. لا تظهر الألوان عادة على الورق كما تظهر على الشاشة، وقد تتغير الخطوط عند الطباعة، وتصبح القراءة أكثر صعوبة. - كونور ميرفي ، مصمم-. تؤثر الفروق الدقيقة في الطباعة أيضًا على المكونات الأخرى للتصميم. كانت إحدى نقاط الأمسية الوحيدة التي تحمل علامة تجارية هي الشاشة مع شعار InVision والكلمات "Question Everything". ومع ذلك، فقد تم عرض هذا نهارًا في مساحة كبيرة إلى حدٍ ما، لذلك لم يكن نظام الألوان أو الخط ذاته بهذه السهولة. كان العنصر الثاني الذي قمنا بتضمينه هو غلاف الحاسوب المحمول المخصص لكل ضيف، منقوشًا عليه InVision. ومع ذلك، فقد بدا التصميم العلوي المصغر من علامة InVision مختلفًا تمامًا ومختومًا في الجلد في صفحة المنتج الرئيسية. في النهاية، قررنا الابتعاد عن الشعار المعتاد كما قررنا استخدام جميع الحروف الكبيرة. الأحجام والنسب يجب أن يُؤخذ حجم الكتابة في الحسبان عندما يتعلق الأمر بالمواد المادية. هل سيحتاج الناس إلى قراءة رسالة من بعيد أم أنها ستكون أمامهم مباشرة؟ كيف يمكن أن تكون الرسالة مثيرة للاهتمام دون أن يصبح بسيطًا أو يصعب قراءته؟ وأخيرًا، هل يلزم دمج الخطوط للطباعة؟ دمج طرق أصيلة للسعادة إنّ تصميم تجربة برعاية عالية كانت طريقتنا في مفاجأة وإسعاد الضيوف. يتماشى اختيار الأشياء من أجلهم فقط مع فكرة الاحترام وتكريم الآراء المختلفة من قادة التصميم، وجعل الأمسية مرحبة بـ InVision كمضيف – ليست نقطة محورية. قال مورفي: مفاجأة الضيوف بشكل جيد مع موضوع السؤال عن كل شيء. في وقتٍ مبكر، اقترح أحد أعضاء الفريق أن نستخدم أغطية الطاولات لعمل تحدي افتراض ما هو صالح للأكل. وبعد التعاون مع متعهد الطعام، قررنا أن نجعل السلطات جزءًا من تصميم الأزهار الفعلي. كيف تريد أن ينخرط الناس ويتواصلوا مع شيء تنتجه علامتك التجارية - خاصة عندما تكون ملموسة - هي فرصة كبيرة لترك انطباع دائم. وأحيانًا، تتكلم أكثر عندما لا تشوش الرسالة. الذهن المنير والحاد يأخذك بعيدًا، والتواصل مع السرد والهدف يمكن أن يأخذك أبعد من ذلك. أكبر فوز لديك هو جعل الناس يتواصلون إنّ التجربة بأكملها مهمة عندما تقوم بترجمة علامتك التجارية الرقمية إلى العالم الواقعي. يجب التفكير في كل نقطة اتصال من منظور العلامة التجارية والتصميم — وقد تقود الاختلافات في التصميم اللعبة النهائية. إذا كنت مصممًا، فهذا يعني التفكير في التفاصيل الصغيرة وفي تجربة المستخدم في سياق الغرفة أو المساحة المادية، وضبط الأنماط الرقمية لتكملة العناصر الخارجة عن سيطرتك. من منظور التسويق والعلامة التجارية، يعني هذا تجربة "لماذا" الخاصة بك بما تنتجه. يجب فحص كل شيء بدءًا من قوائم الكوكتيل وحتى رسائل الترحيب من خلال عين الشخص وليس الاحتمالات. إذا تم ذلك مع الاهتمام بالتفاصيل والهدف، فإنّ إنشاء تجربة - بدلاً من مجرد فعالية آخرى - يمكن أن يلبي حاجة يتردد صداها مع الناس لعدة أشهر. ترجمة- وبتصرف -للمقال How to transform your digital brand into a real world experience لصاحبه Kaysie Garza

سأقدِّم لك أداةً رائعةً للتصميم: أرأيت؟ ألم ترَ؟ إنها الفراغات البيضاء! حسنًا، ربما مزاحي لم يكن في محلّه، أعترف بذلك. أنا آسف. صحيحٌ أنَّ تعريفي للفراغات البيضاء لك لم يكن مثاليًا، لكن الفراغات البيضاء هي من أهم الأدوات في تصميم الويب، ولكن يغفل عنها الناس معظم الوقت. أعلمُ أنَّ من الممتع العمل على عناصر أخرى من تصميم الويب، مثل سمة الألوان، أو الخطوط، أو التخطيط العام للصفحة… خصوصًا عندما تُنشِئ مشروعًا لعميلٍ ما (ملاحظة شخصية: لا أظن أنَّ هنالك عميلًا في العالم يلقي بالًا لطريقة تحسين الفراغات البيضاء لموقعه الجديد!). ومع ذلك، قد تستفيد من الفراغات البيضاء خيرَ استفادة إن استطعت استخدامها استخدامًا صحيحًا. وسأتطرّف في هذا الدرس إلى آلية فعل ذلك. لماذا الفراغات البيضاء مهمة في تصاميم الويب بدايةً، الفراغات البيضاء ليست مفهومًا جديدًا في عالم التصميم، إذ استعمِلَت لقرون كالأداة رقم 1 لإعطاء تركيز على العناصر المهمة في التصميم. والأمر سيانٌ في يومنا هذا. على سبيل المثال، إذا كانت لديك لوحةٌ جميلةٌ وتريد أن تُظهِر اهتمامك بها، فإن أفضل طريقة هي: (1) وضع إطار حولها، و (2) ألّا تضع أيَّ شيءٍ آخر على ذاك الجدار (انظر الصورة أدناه). وبشكلٍ مشابه، أفضل طريقة لإعطاء أولوية لأحد عناصر صفحة الويب هي عدم وضع أي شيء حوله، وكلما قلَّت الأشياء التي حول ذاك العنصر، كلما كان ذلك أفضل. ما رأيك أن ترى مثالًا بدلًا من إطالة الكلام (الصورة خيرٌ من ألف كلمة). هذا موقعٌ تدخل إليه يوميًا: يستعمل موقع Google هذا المظهر منذ سنوات، وربما أصبح شكله مألوفًا، لهذا قد لا تفكّر في تصميم الصفحة كثيرًا. لكن دعنا نتوقف قليلًا ونفكِّر كم أنَّ من السهل أن تضع Google بعض الأشياء الإضافية في الصفحة. إذ يستطيعون تضمين الأخبار (من Google News) وسيكون بعض الأشخاص سعداء بذلك. ويستطيعون أيضًا تضمين مربع لبريد Gmail لكي يتمكن الجميع من التحقق من الرسائل التي تأتيهم على بريدهم مباشرةً. أو أن يضعوا مربعًا لتقويم Google، وهلم جرًا… الاحتمالات والإمكانيات غير محدودة، إلا أنَّ Google قرروا عدم وضع أيّا من تلك الاحتمالات في الصفحة الرئيسية؛ إذ قرروا أنَّ يضعوا حقل البحث فقط (بالإضافة إلى الشعار، وبعض الأشياء في الركن العلوي الأيمن إن سجَّلتَ دخولك). لكن لماذا؟ لماذا وضعوا حقل البحث فقط؟ الجواب بسيطٌ للغاية، وإنّي واثقٌ أنَّك تعرفه مسبقًا: بوضع حقل البحث في الصفحة بمفرده، فسيظهر الغرض من الصفحة جليًا أمامك. فسيعلم زائر الصفحة بعد دخوله إليها مباشرةً ما الغرض منها وكيف يستعملها، فلا يضيع وقته بمحاولة «فهم» ما الذي يجري في الصفحة. وهذا يتوافق تمامًا مع هدف Google الرئيسي. يريدونك أن تستعمل محرك البحث الخاص بهم، وتُشكِّل الفراغات البيضاء أحد الأشياء التي يستعملها مطورو Google لكي يحثوك على فعل ذلك. لتلخيص ما سبق، يمكن للفراغات البيضاء المُستعمَلة استعمالًا صحيحًا أن: تساعد في حثّ المستخدم على القيام بأمرٍ معيّن تساعد على التركيز على أحد العناصر تساعد في توضيح الغرض من الموقع تعطي تركيزًا على الأشياء المهمة تجعل الأشياء التي ليست مهمة جدًا بأولوية منخفضة تساعد الزائر على المسح البصري للصفحة وتقرير ما الذي يهمه مباشرةً سنتحدث الآن عن كيفية استعمال الفراغات البيضاء بفعالية، بعد بأخذ كل ما سبق بعين الاعتبار. كيف تستعمل الفراغات البيضاء بفاعلية في تصاميم الويب لنتحدث عن الفراغات البيضاء من ناحية منهجية التعامل معها، وبعض المعلومات التقنية الأساسية لكيفية إنشاءها (لكنا لن نشرح الأدوات والطرق المستعملة لذلك). أولا: استعمل الفراغات البيضاء لتدعيم الهدف الأساسي من موقعك حسنًا، هنالك هدفٌ من إنشاء كل صفحةٍ أو كل موقعٍ على الويب. ومن الممكن أن يكون هنالك هدفٌ وحيدٌ لكل صفحات الموقع، أو أن يكون لكل صفحةٍ هدفٌ خاصٌ بها. أيًّا كان، يمكنك أن تستعمل الفراغات البيضاء لجعل تلك الأهداف واضحةً كالبدر في الليلة الصافية. على سبيل المثال، لنلقِ نظرةً على الصفحة الرئيسية لموقع Bigcommerce: من الواضح أنَّ الهدف الرئيسي من الصفحة هو إقناعك -أي الزائر- أن تُسجِّل تجريبيًا في Bigcommerce. وفي الواقع، لا يوجد أيٌ شيءٍ في الصفحة سوى عنوان بخطٍ كبير الذي يحاول إقناعك، بالإضافة إلى فراغات بيضاء كبيرةٍ حوله. حسنًا، تُمثِّل الصورة مثالًا عن المنتج، لكنها موجودةٌ في مركز الصفحة، مما يزيد في إضفاء الأهمية على العنوان. لم يسبق لي التّعامل مع Bigcommerce، إلا أنني متأكدٌ أنَّهم يستطيعون إضافة أشياءٍ كثيرةٍ في الصفحة الرئيسية؛ إلا أنَّهم قرروا عدم فعل ذلك. لماذا؟ لتدعيم الغرض الرئيسي من الصفحة. ثانيا: استعمل الفراغات البيضاء للحث على القيام بإجراء معين هذه إحدى قواعد التصميم الجيد للويب: افترض دومًا أنَّ الزائر لا يعرف ماذا عليه أي يفعل في الخطوة القادمة. أنَّى لهم أن يعلموا؟ لا تنسَ أنهم لم يصمموا أو يبرمجوا الصفحة، وإنما أتو لتوهم إليها … ربما عن طريق الخطأ! استعمل الفراغات البيضاء لمساعدة الزوار ليعلموا ماذا عليهم أن يفعلوه. الفكرة بسيطة: إذا لم يكن هنالك الكثير من الأشياء في الصفحة فيمكن للزائر أن يتفاعل مع الأشياء القليلة المتبقية في الصفحة. هذا مثالٌ من Crazy Egg: قد نعتبر أنَّ الصفحة السابقة فارغة تقريبًا، إذ أنَّ التصميم شبيهٌ جدًا بتصميم صفحة Google الرئيسية؛ لكنه يوضِّح ماذا يستطيع أن يفعل المستخدم. حتى لو لم تتعامل مع Crazy Egg من قبل، فيمكنك أن تعرف ماذا عليك أن تفعل بسرعة. حيث يوجد حقل إدخالٍ فيه تلميحة ("Your website URL") وزر يقول "Show Me My Heatmap". الغرض من هذه الصفحة واضحٌ ألا وهو حثّ المستخدم على اتخاذ إجراء، وتساعد الفراغات البيضاء بذلك، وتجعل الصفحة أكثر "نظافةً". ثالثا: ليس من الضروري أن تكون الفراغات البيضاء "بيضاء" ربما هذه اللحظة مناسبة لكي أصحِّحَ لبسًا في المفاهيم: ليس من الضروري أن يكون لون الفراغات البيضاء هو اللون الأبيض. بأبسط الكلمات، الفراغات البيضاء تعني عدم وجود أي عناصر ذات محتوى، ولا تعني أنَّ تلك الفراغات لونها أبيض. بهذا الخصوص، تستطيع استخدام مختلف العناصر كفراغات بيضاء. يمكنك أن تستعمل الألوان التي تحبها، على سبيل المثال Marshall: أو يمكنك أن تستعمل خلفية مشوشة (blurred) أو نقوش. مثالٌ من Zapier: في النهاية، يمكنك أن تخاطر باستخدام صور غير مشوشة لطالما كان هنالك تباينٌ كبيرٌ بينها وبين محتوى الصفحة. يمكنك رؤية مثالٍ عمليٍ عنها في موقع Grammarly: رابعا: استخدم الفراغات البيضاء في القسم العلوي للصفحة شاعت في الآونة الأخيرة ما نسميه أقسام hero‏ (hero sections) أو صور hero ‏(hero images) التي هي الأقسام التي تظهر في أول الصفحة والتي تسترعي انتباه الزوار. ترويسة الموقع أو قسم hero هو المكان الملائم لاستخدام الفراغات البيضاء. حيث ستجد أنَّه من السهل جدًا استعمال الفراغات البيضاء في تلك الأماكن، وستعطيك مكانًا رائعًا للتحدث فيه عن خدمتك التي تقدمها. الذي أقصده هو أنَّ هذا القسم في أعلى الصفحة وسيراه كل زائر… حيث لا يمرر إلى أسفل الصفحة إلا القليلون، بينما سيرى جميع الزوار القسم العلوي منها. لذا ركِّز على هذا وتأكّد أن تستغل الفراغات البيضاء جيدًا في هذا القسم. على سبيل المثال، إحدى صفحات موقع Teespring: سنرى الكثير من العناصر في القسم الذي يلي قسم hero مع فراغات بيضاء قليلة. إلا أنَّ المنطقة العلوية تقوم بعملها على أتم وجه بدعم بتدعيم الهدف الرئيسي من الصفحة وتوضيح الأمور للزائر. خامسا: استخدم الفراغات البيضاء للتلاعب بالمشاعر هنالك الكثير من الأدوات بحوزتك إن كنت تسعى خلف التأثير عاطفيًا على الزائر فيمكنك أن تستعمل الألوان، أو صورة جيدة، أو قد تستفيد من الفراغات البيضاء! جميع العناصر السابقة لها دورٌ عندما يأتي الأمر إلى إنشاء استجابة عاطفية، لكن الفراغات البيضاء تضفي لمسةً من «الدراما» إلى الموقف. فبنفس الطريقة التي تستطيع الفراغات البيضاء تدعيم هدف الصفحة، ستستطيع أن تدعِّم العاطفة التي تود التأثير عليها عند الزائر. لننظر إلى هذا المثال من Todoist: Todoist هو أداة لإنشاء قائمة بالمهام. لكن باستخدامهم للمسافات البيضاء استخدامًا جيدًا حول العنوان الرئيسي، جعلوا الصور بارزةً وأضفت بعض المشاعر الإيجابية. فبدلًا من عرض صورة للمنتج نفسه، عرضوا صورةً لشخصٍ سعيدٍ يبدو أنَّه يستمتع بيومه، بعد أن أنهى مجموعةً من المهام الموكلة إليه. سادسا: حارب نزعة المصمم لملء الفراغات حسنًا، نحن البشر نحب أن نملأ الفراغات؛ فعندما نرى مكانًا فارغًا، سنفكر -لا إراديًا- كيف نستطيع أن نملأه. لكن هذه العقلية -الطبيعية جدًا- قد تسبب مشكلةً للمصمم. فعلى عكس رفوف المكتبة، ليس عليك في تصميم الويب أن تطمح إلى ملء جميع الفراغات. لذا ابدأ هكذا: ضع هدفًا للصفحة واختر عنصرًا وحيدًا يستطيع تحقيق ذاك الهدف؛ الذي يمكن أن يكون «عنوانًا رئيسيًا + دعوةً إلى إجراءٍ ما». ضع ذاك العنصر في منتصف التصميم. ضع فراغات حوله. أضف عناصر أخرى حول تلك الفراغات. سابعا: فكر بما تستطيع حذفه، لا بما تستطيع إضافته هذه النقطة مرتبطةٌ بالنقطة التي تسبقها؛ لكن بالمقلوب. بعد أن تنتهي من تصميمك، قد تشعر أنَّ هنالك أشياءً كثيرةً هنا وهناك، وستبدأ بالتفكير بالعناصر التي تستطيع حذفها من الصفحة والتي لا تؤثر تأثيرًا سلبيًا على الهدف الرئيسي. فكلما قللت العناصر، كلما كان ذلك أفضل. ويمكنك أن تعتبر أنَّ تصميمك كاملٌ إن لم يبقَ شيءٌ تستطيع حذفه، لا إضافته. ثامنا: كلما كبر حجم الخط، كلما احتجت إلى فراغ أكبر العناوين الكبيرة أصبحت "موضة" في هذه الأيام، وخصوصًا في عصر التصميمات المسطحة والعقلية السائدة المؤيدة لها. لكن الخطوط الكبيرة تحتاج إلى مساحة للتنفس؛ فإن لم تكن هنالك فراغات كافية حول العناوين الضخمة في تصميمك، فستخسر قوتها وستبدو كأنها صعبة القراءة… بغض النظر أنَّها لم تعد فعالةً. لذا ستكون القاعدة كالآتي: استخدم نصًا كبيرًا إذا ما استطعت توفير فراغات بيضاء كبيرة حوله. انظر هذا المثال من Dior: لاحظ حجم الخط الكبير جدًا للعنوان، وكمية الفراغات البيضاء التي حوله. الفراغات البيضاء على الهواتف المحمولة؟ كن حذرًا هنا. صحيحٌ أنَّ القواعد والمبادئ العامة تنطبق على تصاميم مواقع الهواتف المحمولة، ومن المحتمل أن تستفيد من الفراغات البيضاء فيها؛ إلا أنَّ هنالك حدًا دقيقًا فاصلًا بين "الاستخدام الجيد للفراغات البيضاء" وبين "ترك فراغات كثيرة بين العناصر". يكون الحد الفاصل عادةً هو عدِّة بكسلات في أحد الاتجاهات، ومن السهل جدًا أن تنتقل من تجربةٍ رائعةٍ للمستخدم إلى واجهةٍ صعبة التصفح نتيجةً لوجود الكثير من الفراغات. أرى أن تحاول جعل كل كتلة من المحتوى المهم (مثل العنوان + عبارة لحث المستخدم على اتخاذ إجراء) تملأ شاشة الهاتف بأكملها، وإن كانت هذه المهمة صعبةً في بعض الأحيان. على سبيل المثال، انظر إلى هذا التصميم من Evernote عندما يُعرَض على هاتفٍ محمول: ستُعرَض الكتلة الرئيسية من المحتوى على كامل الشاشة، ومن ثم سيبدأ المستخدم بالتمرير إلى الأسفل ليرى ماذا تحتوي بقية الصفحة. النقطة الصعبة هنا هي أنَّه عليك أن تتعامل مع أجهزةٍ مختلفةٍ، وفي حين أنَّك تستطيع اختبار التصميم على أكثر الأجهزة شيوعًا، إلا أنَّه من المستحيل أن يبدو تصميمك بشكلٍ صحيح على كل الأجهزة. أضف إلى ذلك أنَّك تريد أن يُعرَض عرضًا سليمًا على الحواسيب أيضًا؛ مما يزيد التعقيد كثيرًا. الرسالة الرئيسية التي أريد أن أوصلها لك هنا هي أن تبقى حذرًا، والزم المبادئ العامة لآلية استغلال الفراغات البيضاء دون الإفراط باستخدامها، وسيكون الأمر على ما يرام. ترجمة -وبتصرّف- للمقال The Importance of Whitespace in Web Design لصاحبه Karol K.