أحمد إسماعيل2

الأعضاء
  • المساهمات

    14
  • تاريخ الانضمام

  • تاريخ آخر زيارة

كل منشورات العضو أحمد إسماعيل2

  1. اصنع نموذج تصميم موقع تعليمي متكامل بدءًا ببناء التخطيط الأولي، ومن ثم الانتقال لتصميم العناصر الفردية للصفحة. والنتيجة هي نسق صفحةٍ إلكترونيةٍ عصرية وجذابة وناضرة وجاهزة للبرمجة. وبأخذ العبرة من العديد من التصاميم العصرية للمواقع الإلكترونية، سوف ننتج هذا التصميم الجذاب والناضر. تشمل المميزات الأساسية على الأشرطة الأفقية التي تقسّم المحتوى لمناطق محددة مثل أن تكون منطقة رأس الصفحة مفعمة بالألوان وتعرّف عن الموقع، أو أن يكون هنالك رسالة ترحيبية بها أمثلة عن الأعمال الخاصة بالموقع، أو حتى نسق رئيسي ذو عمودين وذيل صفحةٍ مليء بالمصادر. البداية الأمثل لأي تصميم هي الرسم التخطيطي على ورقة، إذ أن التملك والتحكم بالقلم يساعد على تجسيد النسق الصعب بسهولة. إيجاد تخطيط شبكي (Wireframe) يساعد على تطوير شكلٍ هرمي، بالإضافة إلى إعطاء رؤية عن أفضل الأماكن للعناصر الأساسية في التصميم. أنشئ ملفًا جديدًا في فوتوشوب. بالنسبة لي، فأنا أميل لجعل حجم العمل الفني مشابهًا للحجم المتداول للشاشات الكبيرة، حيث أن هذا يعطي توضيحًا أفضل للشكل الكلي للموقع. ضع خطوطًا إرشادية بعرض "960 بيكسل " في منتصف صفحة الويب. واصنع شبكةً بسيطة لتساعدك على وضع عناصر الصفحة عليها. إبدأ بصناعة شريط رأس الصفحة، وارسم تحديدًا (Selection) يحيط بعرض الصفحة كلها ومن ثم املأها (Fill) باللون الأبيض. إضغط بشكلٍ مزدوج على الطبقة (Layer) لعرض تنسيقات الطبقة وقم بإضافة تغطية بالتدرج اللوني (Gradient Overlay) من اللون الأبيض للون الرمادي متدرج بشكل عمودي. فيما بعد، ارسم منطقة الرأس الأساسية حيث سيتم وضع المحتوى المميز فيها، وفي طبقة جديدة، ارسم تحديدًا (selection) ومن ثم أضف تدرجًا لونيًا باستخدامك للونين فاقعين، وقم أيضًا بإضافة ظل داخلي رقيق لإضفاء العمق على التصميم. اللمسات الرقيقة لنسيج التصميم بإمكانها أن تضيف الحياة للتصميم. وبينما يتم تحديد منطقة الرأس بواسطة قناع (Mask)، قم بالضغط على كل من أزرار CMD+SHIFT+C للقيام بنسخها بشكل مندمج وموحد، ومن ثم قم بإلصاقها على طبقة جديدة. ثم بالذهاب لقائمة "Filter>‏ Noise>‏ Add Noise" لخلق نسيج بسيط، ثم قم بضبط وضع المزج (Blending Mode) على الاختيار (Multiply) وقم بتقليل التعتيم حتى يصل للدرجة المناسبة. ألصق شعار الشركة، ومن ثم قم بتحريكه على الشاشة حسب الشبكة التي سبق أن أنشأتها. أضف بعض اللمسات من خلال خيارات نسق الطبقة (Layer Style Options) وأضف تدرجًا لونيًا ليتناسب مع ألوان قائمة الرأس المميزة، ومن ثم اصنع ظلًا داخليًا ناعمًا جدًا. استخدم أداة الكتابة (Type Tool) لانشاء نص على شريط التنقل الرئيسي للموقع، اجعل الخط بلون رمادي متوسط، بينما تقوم باستخدام درجة أغمق للرابط النشط. يعد رأس الصفحة البارز أو المميز منطقةً رائعة للتعريف عن الموقع، ومع ألوانٍ فاقعة في الخلف، فإنه يجذب التركيز الأكثر من المستخدمين. استخدم هذه المساحة لكتابة عنوان تقديمي مفاجئ وغير متوقع بخط معدل يتناسب مع العلامة التجارية للشركة. استمر بتجسيد المحتوى التقديمي، ولكن هذه المرة استخدم خط (Arial) أو (Helvetica) حتى تتمكن من وضع النص بتنسيق "html" التقليدي وبدون أساليب استبدال الصور. ضع صورة حاسوب محمول في المنطقة المميزة (وهنا مجموعة من الأمثلة)، وهذا يتناسب بشكل تام مع طبيعة الشركة التخيلية، وتوفر منطقة مركزية ممتازة لعرض أمثلة على الأعمال على شاشة الجهاز المحمول. قم بلفت الانتباه والتأكيد على هذه المنطقة المركزية بوضعك لتدرج لوني دائري منبعث من خلف الحاسوب المحمول. فإن هذا يضيف تفصيلًا صغيرًا يبرز العنصر عن باقي الصفحة. أما أسفل المنطقة الرئيسية في الرأس، فقم بعمل تحديد جديد واملأه بتدرج لوني بين الأبيض والرمادي. قم بتجزئة القسم الأوسط من الصفحة لعمودين باستخدام خطوط الإرشاد حسب الشبكة التي قمت بعملها، بحيث يكون المحتوى الرئيسي في العمود الأيسر، بينما يحتوي العمود الأيمن على شريط جانبي أقل سماكة. وباستخدام أداة الكتابة، قم بإضافة محتوى وهمي. ثم قم بتغيير الحجم والاتجاه لتعطي قطعة من النص سهلة في القراءة والفهم. أسفل منطقة النص الرئيسي، بإمكانك صنع منطقة لعرض آخر منشورات المدونة. قسِّم العمود لعمودين آخرين وثم أنشئ تحديدًا لمثال عن واجهة المنشور. ويجب أن تكون روابط العنوان واضحة للمستخدم حتى يضغط عليها، لذلك غيّر ألوانها لجذب الانتباه. استخدم أداة المستطيل المدور (Rounded Rectangle Tool) لرسم صندوق في الشريط الجانبي. ولا يهم اللون الأساسي، إذ سنغيّره في المرحلة التالية. اضغط ضغطة مزدوجة على الطبقة وأضف مجموعة من تنسيقات الطبقة، بما فيها التدرج بين الأبيض والرمادي، والحد الخارجي (Stroke) وظل داخلي ناعم. استخدم هذا الشريط الجانبي لصنع قسم خاص للإعلان عن آخر المشاريع المميزة على الموقع. بإمكان العناصر أن تكون عبارة عن قصاصات صور صغيرة ونصوص. ارسم مستطيلًا دائريًا آخر ليتم استخدامه كزر، ثم قم بإضافة القليل من تنسيقات الطبقة مثل التدرج اللوني والحد الخارجي (stroke) لإعطاء تنسيق للزر يتناسب مع الشكل الكلي للصفحة ذو اللون الرمادي الجذاب. اصنع علامةً وصفية وقصيرة للزر الذي يدعوا المستخدم للاستمرار في تصفح الموقع ورؤية المشاريع والأعمال التالية. قم بالإشارة لنهاية المحتوى بواسطة رسم منطقة ذيل للصفحة، ثم قم بتعبئة المنطقة بلون رمادي باهت لتمييزها عن منطقة المحتوى الرئيسي. ارسم ستارًا دائريًا ومن ثم عبّئه بتدرج لوني دائري بين الأسود والشفاف. قم بالضغط على CMD+T لتستطيع التحكم بالتحديد، ثم قم بضغط أو تمديد التدرج اللوني للحصول على رسم شبيه بالظل. حرِّك الظل لمنتصف الشاشة، ثم احذف المنطقة الزائدة فوق ذيل الصفحة. سوف تحصل على ظل رقيق يبرز الصفحة الرئيسية ويضيف بعض التفصيل للتصميم. تعد منطقة ذيل الصفحة منطقةً مناسبة لعرض العناصر الثانوية للصفحة، على سبيل المثال: بإمكانك وضع بيانات تسجيل الدخول الخاصة بالعميل. قم بتجسيد التصميم باستخدام أداة الكتابة، ثم ارسم صندوقي إدخال صغيرين، وقم بتنسيق الصندوقين بظل داخلي خفيف. استخدم المنطقة الوسطى لذيل الصفحة لكي تعرض رسالة معينة عن الشركة. اضبط النص باستخدام نفس خطوط رأس وحاشية الصفحة. وفي النهاية، أضف بياناتٍ للتواصل في يمين المنطقة السفلية. هذه التفاصيل سوف تصبح مفيدة للمستخدم عند استخدامه للموقع. قم بإبراز أهم الجوانب من خلال الحجم أو اللون. يشمل التصميم النهائي على كل العناصر المطلوبة بعناية بداخل الصفحة من خلال إبقاء كل شيء حسب الشبكة التي أنشأناها في البداية. والنتيجة هي تنسيق منظم وجذاب مع الكثير من اللون الرمادي الرقيق لإضفاء العمق للموقع، وعندها يتم استخدام الألوان لتحديد المناطق المميزة والمحتوى المهم. ترجمة -بتصرف- للمقال ‎Create a Clean Modern Website Design in Photoshop
  2. أنت كمصمم, إذا قمت يومًا ما بتسليم أعجوبتك المرئية لمطور فأنت تعرف تمامًا مدى الجدل الذي ينتج عن ذلك. هل ما تخيلته قابل للعمل عند النظر إليه من المنظور التطويري؟ هل يعلم المطور ما الآلية التي كانت تدور في عقلك؟ هل يقوم مطوّرك حقًا بالتطوير؟ القائمة تطول وتطول ولكن دائمًا ما يكون هنالك طرفين للقصة. وماذا عن المطور الذي ينتظر تصميمك؟ وللإجابة على هذا السؤال وعلى أسئلة أخرى قمنا بمقابلة فريقنا الخاص في KlientBoost للخروج بهذه الست نصائح لتعاون أفضل بين المطور والمصمم. كل هذا يبدأ بالتركيز على المستخدم يجب على كل من المطورين والمصممين أن يعملوا دائمًا وأن يُبقوا المستخدم في الحسبان. إن لم تكن التجربة أفضل للمستخدم فلا فائدة من تصميم او حتى بناء أي شيء أي أن جهودك المبذولة لن تكون متماثلة مع أهداف العمل. فإما إن كنت تصمم موقعًا جديدًا أو تطور خصائص جديدة للمنتج فيجب من البداية على فِرق التصميم والتطوير أن يكون لديها هدفًا مشتركًا لتطوير تجربة المستخدم. ولكن كيف بالإمكان أن نعرف ما هو أفضل للمستخدم؟ بالاختبار. وحسب "تن كادويك" من وكالة Five, فإن تجربة المستخدم واختبار المنتج يبدآن بمجرد بدء الأسبوع الأول من المشروع. والاختبار لتحسين تجربة المستخدم لا يتوقف أبداً خلال فترة حياة المشروع. تعطينا مجموعة Nielsen Norman قائمةً يجب على كل من المصممين والمطورين أن يتبعوها عندما يتعلق الأمر باختبار قابلية الاستخدام. وبمجرد اكتمال مرحلة ما قبل الاختبار, فإن فرق التصميم والتطوير تتقارب أكثر وتعلم بالضبط ما يجب التركيز عليه. كلما كان مبكرًا، كان أفضل لن تعلم فِرق التطوير أي شيء عادةً عن المشروع حتى تصلهم ملفات التصميم. وإذا كانت هذه الملفات من الصعب جدًا تنفيذها, فإن هذا يعني بأن المصمم أهدر وقته وأن عليه الآن العودة منذ البداية. ولتجنب حدوث هذا, فإن المصممين والمطورين يحتاجون للعمل سوياً منذ البداية. والانخراط منذ المراحل الأولى يضمن بأن تبقى كل الأطراف متوافقة سوياً ولديها نفس التركيز طوال الوقت. وجدت دراسة في قسم الهندسة الصناعية والإدارة في جامعة "أولو" بفنلندا بأن التعاون المبكر في مشروع ما بين جميع الأطراف يؤدي إلى: فرصة ضئيلة في تطوير تصاميم ركيكة. رضى أكبر بكثير عن عمل المنتج واستخدامه من قبل المستخدم. خلق مساحة للحلول الإبداعية والتبادل المكثف للأفكار قبل فوات الأوان. ولا يختلف المصممون والمطورون في هذا الشأن. أنظمة أقوى تعني عمليات أفضل. عندما تمتلك كل الفرق الأدوات والمعرفة المطلوبتين لإنجاز شيء ما فهي عادةً ما تنجح في انجازه. ولكن أحد الأخطاء الشائعة التي ستجدها بين المصممين والمطورين هي أحياناً أشياء بسيطة مثل: معايير التسمية. الأحجام. الهوامش. الحشوات. الشبكات. ولكن وجود ترتيب موحد من العمليات وطريقة معينة للتعامل معها يساعد على تسريع الأمور, وذلك لأنه لن يتم اهدار الوقت في الإجابة على أسئلة من السهل الإجابة عليها. وهذا يساعد على الوصول لهدف موحد لكل من المصممين والمطورين والذين لن يتعثروا بالمشاكل اللوجستية. وعندما يتعلق الأمر بالأنظمة والعمليات, فإنه هنا تحديداً يجب عليك الحصول على قائمة مفصلة يتّبعها كل فريق من الفرق قبل الانتقال للمرحلة التالية من المشروع. مما يؤدي إلى... ما قبل التسليم بتتبعك لكل نصائحنا حتى هذه النقطة فإنك بالتأكيد تدرك مدى أهمية تسليم مشروعك جاهزًا وبدون أي نقص للتحرك للمرحلة التالية. وبينما يقترب المصممون من إكمال أعمالهم, فإنه من المهم أن تعرج على الأهداف الرئيسية للمشروع للتأكد من اجتيازه للفحص. أسئلة مثل المذكورة بالأسفل ستساعدك على أن تجد تحديثات يجب أن تحدث قبل تمرير المشروع لفريق التطوير: هل جودة التصميم عالية وهل أنت راضٍ عنها؟ هل يحسّن التصميم تجربة المستخدم؟ هل تم اختبار التصميم من قِبل الزبائن الواقعيين؟ بالإجابة بنعم على كل الأسئلة السابقة, فإنك تقلل من فرصة عمل أي إعادة تصميم أو إعادة عمل. سيكون من الصعب عليك أن تجري أي تعديلات على التصميم بمجرد وصوله لأيدي المطور. كيف تسير الأمور؟ 10 مرات بإمكانك قراءة نبرة صوت أحد أو لغة جسده عندما تقابله, ولكن هل هذا كله يختفي عند قراءتك لنص أو لبريد إلكتروني؟ هذا هو نفس الشيء الذي يحدث مع المصممين والمطورين. بمجرد مرور المشروع من مرحلة ما لأخرى, فإن هنالك فرصة كبيرة بأن ترجمة المشروع سوف تختلف من عضو فريق لآخر. هل قصدت أن تعمل هذا لتصميمك أم ذاك؟ وبالفحص المتكرر بين المصممين والمطورين, يمكن للمشروع أن يستمر بالتحرك وذلك بفضل إزالة مشاكل التواصل والتفسير. التواصل الواقعي كلما عمل المصممون والمطورون سويًا على مشاريعك, زادت فرص التوتر. ومع فرقنا في KlientBoost, وجدنا بأنه من سرعان ما نسينا بأننا نعمل كفريق واحد للوصول لنفس الهدف. أما بوجود الوعي الذاتي والإيثار عند التواصل مع أعضاء الفريق الآخرين ستكون قادرًا على إيجاد حل منطقي لأي مشكلة قد تحدث وبسرعة. وباتّباع ال5 نصائح السابقة, بإمكانك وضع أساسات صلبة للتواصل تمنع المشاكل من التصاعد في المقام الأول. والآن حان دورك الفرق التي تتواصل بشكل منفتح وبشكل متكرر تبني منتجات أفضل. جرب هذه النصائح الستة في مؤسستك ونؤمن بأنك ستجد المشاريع أكثر سلاسة وسرعة وسيحظى الناس بالمزيد من المرح أيضًا. ترجمة -بتصرف- للمقال ‎6 tasty ways for designers and developers to collaborate better لصاحبه Johnathan Dane
  3. تعد Univision شبكة القنوات المتحدثة باللغة الإسبانية الأولى على العالم. وباستهداف اللاتينيين في الولايات المتحدة، فهي تركز بشكل رئيسي على المسلسلات التلفزيونية والبرامج المتنوعة والرياضية. وفي عام 2015، أعدنا تصميم موقع Univision.com بشكل كامل حيث أن آخر مرة كان قد أُعيد تصميمه كانت في عام 2011، ولكن حان الوقت لإصلاح التنقُّل المعقَّد بداخل الموقع والأشكال الغير متناسقة، وفي النهاية، جعله موقعًا سريع الاستجابة. استمر بالقراءة لأخذ فكرة عن ما قمنا به. المشاكل التي تم التخلص منها في إعادة التصميم التنقل المعقد التنقل في الموقع كان ولا يزال أحد أكبر مشاكلنا. كيف يتنقَّل الزوار عبر موقع Univision.com وما الذي يبحثون عنه؟ ومنذ إعادة التصميم التي تمت في عام 2011، فقد عانى الموقع في ما يتعلق بهويته (هل هو شبكة أم بوابة إلكترونية؟) وكان الانتقال قد تضمن المزيد والمزيد من الأجزاء المتراكمة خلال الفترة ما بين 2011-2015. وتعد هذه مشكلةً بالنسبة للزوار الجدد للموقع، بينما يعرف زوار موقع Univision الدائمين طريقهم لما يبحثون عنه مثل الأبراج وآخر الإشاعات والقصص الحديثة. الأشكال غير المتناسقة للقوالب نتجت هذه الأشكال غير المتناسقة عن مجموعة من التجارب الفاشلة على مر السنين حيث أن الفرق الصغيرة في مؤسستنا حاولوا أن يوسموا أنفسهم على الموقع وقام كل فريق من فرق النشر بإضافة أزرار الانتقال حسب الحاجة لمساعدة الزوار بإيجاد المحتوى وأدى هذا إلى وجود 3 أزرار انتقال في كل صفحة وما يقارب 11 عنصرًا في كل زر. في النهاية، كان من الصعب إيجاد أي شي، لأنه لم يتم التخلص من الأشياء الغير مهمة، وبسبب صعوبة إيجاد الأشياء، كان يجب إما وضعها في القمة أو تكرارها مرتين وثلاثة. وعلى سبيل المثال، فإن القسم الترفيهي من الموقع كان يشمل: 9 عناصر انتقال رئيسية 4 رؤوس انتقال فرعية 16 رابطاً إضافيًا لم يكن الموقع متجاوبًا 80% من مستخدمي موقع Univision.com يستخدمون إصدار الأجهزة المحمولة. ولعدة سنوات، كان الناشرون والمحررون مطالبين بصنع المحتوى ليناسب جهاز الحاسوب ومن ثم نشر المحتوى مرة أخرى ليناسب الجهاز المحمول في سلسلة مختلفة من العمل. أو كان بإمكانهم اختيار محتوى معين لكي لا يتم نشره على "التجربة المبسطة" للجهاز المحمول مما حرم معظم جمهورنا من التجربة الكاملة للموقع. التنقل المبسط بشكل مفرط كان أيضًا من العوائق: قمنا باستعراض التنقل الرئيسي والثانوي بجانب بناء صفحات المحتوى الخاصة بنا أولاً (مقالات وفيديوهات وشرائح عرض). عملية التصميم الخاصة بنا قمنا بالعمل بشكل سريع جدًا خلال فترات قصيرة أسبوعيًا، وبالتزامن مع الفريق الذي كان يبني نظام إدارة المحتوى CMS من الصفر بالإضافة لإنشائه للتجربة الخاصة بالموقع. هذه العملية لم يكن من السهل مواكبتها وذلك لاحتوائها على انتقادات يومية للتصميم بين الفرق الصغيرة وتكرارات يومية للتفاعلات المعقدة والقوالب المتجاوبة هذا وبالإضافة لانتقادات أصحاب المصلحة والتي قد تتطلب مراجعات ومواصفات متأخرة جدًا ومكتوبة، كل هذا في أسبوع واحد. ولكن الجانب المشرق الوحيد من وراء هذا كان بأن فريقنا صنع قراراتٍ بشكل سريع وتقدم للأمام بدون إهدار الوقت في محاولة جعل كل شيء مثاليًا. الأدوات استخدامنا لبرنامجي Sketch و InVision جعل عمليتنا تتم بسلاسة كبيرة. تسليم التصاميم وفي نهاية كل أسبوع، كنا نسلم مجلدًا بالملفات النهائية وصفحات المواصفات التي قد تضاف لمجلد التنسيقات في برنامج Dropbox لفريق البرمجة. وكانت الملفات النهائية تتضمن مستندات Sketch لعناصر التصميم والمراجع المرئية بالإضافة لملف Omnigraffle مع شرح مرئي عن كيفية تغير التنسيقات عند نقاط مختلفة. وعند التسليم الأولي للتصاميم، كنا نتلقى انتقادًا على الملفات المسلّمة وكنا نجيب على أي أسئلة لدى فريق التطوير. ومنذ ذلك الحين، وبعملنا بنظام سريع على فترات قصيرة على مدار أسبوعين، سلّمنا ملفات عن طريق صناعة مستويات في برنامج JIRA لتعيين المهام. راجعنا، وسجلنا الملاحظات، واختبرنا. التحسينات التي أجريت نظام تنقّل عام مبسط ب7 عناصر: انتقال عاملي موحد لجميع خصائص Univision وتقليل عدد القوائم المنسدلة وتبسيط كيفية إيجاد المستخدم للمحتوى. تنقّل متجاوب للهاتف المحمول: جعل تجربة الهاتف المحمول والحاسوب هي نفسها مما يسمح للمستخدمين بإيجاد المحتوى في نفس المكان بالرغم من الجهاز المستخدم. ترك المساحات في القوائم المنسدلة والتي تمكن من الترويج للأحداث المميزة: وذلك يعني الترويج للأحداث في مساحة كافية مما يسهل على المستخدمين إيجادها بشكل متكرر خلال عرض هذه الأحداث مباشرةً على التلفاز. التنقل التفصيلي الذي يساعد المستخدم: وبسبب كثرة مراحل التنقل وخاصةً في القسم الرياضي، فإن مستخدمينا قد احتاجوا لطريقة لإرجاعهم للخلف لرؤية الفرق الرياضية والدوريات الأخرى. الدروس المستفادة أيقونة المزيد "Más" غير مفهومة: حاولنا في تصفح الهاتف المحمول أن نستخدم هذه العلامة لمساعدة المستخدم على إظهار المزيد من عناصر التنقل ولكن المستخدمين لم يفهموا هذه العلامة. بعض الوظائف لم نستطع إنشائها كما هي مصممة (مثل اللافتات الرأسية والانتقال التفصيلي): بسبب محدودية القالب، فإن الصور من نوع full-bleed (أي عدم وجود حاشية بين حافة الصورة وحافة الشاشة) و full-browser-width (أي امتداد العرض على كامل نافذة المتصفح) لم تعمل. واحتاج الانتقال التفصيلي لوقت أكثر للتنفيذ بناءًا على كيف تم انشاء الصفحات بالتسلسل الهرمي. لم يكن المحررون يستخدمون القائمة كما هو مخطط: استخدم المحررون والناشرون عناوين لم تلتزم بالحد الأقصى للأحرف واستخدموا عمود التنقل على اليسار كوصلة للصفحة الرئيسية مما أدى لخلل عند استخدام التنقل على الهاتف المحمول. بالإضافة للنظر في كيفية نجاح انتقالنا، فقد رجعنا للخلف ونظرنا إلى ما كان يعمل وما لم يكن يعمل في عمليتنا: دليل تصميم InDesign مسطح أصبح بحجم 189 صفحة. أدركنا بأن تعديل وتحديث هذا الملف كان مربكًا لنا وللمستفيدين من المشروع والمطورين بالإضافة لضمان الجودة Quality Assurance. كانت المواصفات غير واضحة مطلقًا مما أدى للحصول على منتج مختلف عن ما تم تصميمه. انجازات التصميم المسطح لم تكن مثالية. الملف ونقل المعرفة لم يشاركوا نفس الغرض. لذلك قمنا بتكرار عمليتنا كما قمنا أيضاً بتكرار المنتج. أفكار ما بعد إعادة التصميم طرحنا موقعنا على الإنترنت ولكننا لا نزال نجري بعض التحسينات عليه. وعمليتنا الجديدة تتضمن الفحص الشهري بشكل موحد مع عمليات التطوير السريعة وفريق المصممين والمطورين الذين يختبرون كيف يبدو المنتج. نعمل الآن بانتظام على شكل فترات مكونة من اسبوعين سريعي الإيقاع بجانب الفرق الأخرى ونقدم تصاميم مرئية على برنامج Sketch وأيضًا ملفات المواصفات بواسطة Frontify بالإضافة إلى نماذج تجريبية للمطور. استغرقنا الأمر بعض التصاميم السريعة بينما كان المستفيدون من المشروع يراجعون نموذج تجريبي متجاوب ولكننا أصدرنا نظام انتقال محدث ليتم اختباره عن طريق مستخدمينا. تحسينات على نظام التنقُّل الخاص بنا: تقليل ارتفاعه حتى يأخذ مساحة أقل. استخدام الاسلوب التفصيلي كعنصر انتقال ما هو مصمم في البداية. إظهار المزيد من الانتقال للمستخدم على الهاتف المحمول بينما قمنا بإزالة علامة "المزيد". استبدال لافتات العلامات التجارية بشعارات أكثر أناقة وجودة. خلال اختبار ردود الفعل القيمة والمعطاة، كانت قد أظهرت لنا بأنه لايزال لدينا بعض العمل لنقوم به والمزيد من الاختبار وإعادة التصميم بشكل أساسي. ما وصلنا له في التصميم والمعالجة يعتبر بالفعل نجاحاً لنا وبجلبنا لجمهور عالمي ولشركة كبيرة بجانبنا، فأنا أعتقد بأن هذا بنفسه يعد إنجازاً. ترجمة -بتصرف- للمقال Redesigning Univision.com لصاحبته: Jenna Marino
  4. ثورة الأجهزة المحمولة ليست فقط اختراعًا تكنولوجيًا يمكننا من الابتعاد عنه بأي وقت، فلا يمكننا الابتعاد عن الهواء الذي نتنفسه أو عن الأقدام التي تحملنا. وعلى نفس الصعيد، فلا نستطيع الابتعاد عن أجهزتنا المحمولة وما عليها. لأنها تعد امتدادًا لشخصياتنا. وبالنسبة للشركات، هذا يعني التركيز على إسعاد الزبون بتجربة رائعة على الهاتف حيث يوجد السياق والخصوصية. كن لحوحًا: إما إسعادهم أو لاشيء آخر يستطيع معظمنا ببساطة البقاء بعيدًا عن التكنولوجيا. فعندما نريد عزل أنفسنا، نبتعد ببساطة عنها بمغادرة المكتب أو المصنع في نهاية اليوم مع إطفاء الحاسوب أو التلفاز. ولكن ماذا عن برامج ومنتجات الأجهزة المحمولة؟ هل نبتعد عنها كما نبتعد عن وسائل التكنولوجيا الأخرى؟ نتمنى بأن نستطيع إقفال هواتفنا المحمولة ببساطة، ولكن قليل منا من يستطيع فعل هذا. وفي الحقيقة، قد أظهرت الإحصائيات بأن 2 من أصل 3 أشخاص يضعون أجهزتهم المحمولة على المنضدة بجانب أسرّتِهم. إنها آخر ما نضعه قبل نومنا وأول ما نتفقّده عند استيقاظنا. أسعد المستخدمين أو اترك كل شيء لا نستطيع النوم وأجهزتنا المحمولة بعيدة عنا قليلًا، فنحن لا نرغب بالانفصال عنها فقد أصبحت ما يسمى بالتكنولوجيا اللصيقة (sticky technology) حيث أصبحنا مرتبطين بشكل قوي بأجهزتنا المحمولة وأصبح استخدامنا لها عادةً مستمرة وتقريبًا بدون إدراك. وازن هذا بالحقيقة القاسية بأن نصف تطبيقات الأجهزة المحمولة في متجر "آبل" للتطبيقات ليس لديها أي مستخدمين على الإطلاق. يجب على الشركات التي ترغب بالنجاح في نطاق الأجهزة المحمولة أن تتأكد من أنها تنشئ تجربة مستخدم تتوافق تمامًا مع التوقعات العالية للجمهور. تحدث بالأمور الشخصية: سياق الكلام يهم ومع ثورة الأجهزة المحمولة، فإن هنالك من البيانات عن كل شيء وكل شخص أكثر بكثير من أي وقت سابق، وهذا الشيء لا تراجع عنه. خذ على سبيل المثال شركة "فيسبوك"، فخلال فترة عملي هناك، أجرى فريقي اختبارًا لتحديد قابلية المستخدمين لتقبل الإشعارات المنبثقة، فقمنا باختيار مجموعة من المستخدمين الذين لم يرغبوا في استقبال الإشعارات المنبثقة وقمنا بعرض شاشة لهم بعدما قاموا مباشرة بإرسال رسالة فورية مما وضح لهم أهمية الإشعارات المنبثقة. الشيء الذي كان مخادعًا لنا خلال فحصنا هو كم استغرق المستخدمين حتى يكون ناجحًا، وكان قد احتاجوا ل5 خطوات لتغيير إعداداتهم. وعادةً ما تخسر شركات الأجهزة المحمولة 90% من مستخدميها مع كل خطوة لذلك لم نكن متفائلين. ولكن تفاجأنا بأن تقريبًا 1 من أصل كل 4 مستخدمين قام بالفعل بتغيير خصائصه. والشيء الذي وجدته مشوقًا حول هذا، هو كيف تطور سلوك المستخدم بسرعة على الأجهزة المحمولة. وتقريبًا بمدة 6 أشهر قبل أن نجري الاختبار، كان هنالك أغلبية من مستخدمي "فيسبوك" مشككين بالإشعارات المنبثقة لذلك رفضوا استقبالها. هم لم يكونوا متأكدين تمامًا من طبيعة هذه الاشعارات المنبثقة أو اذا كان لها أي قيمة على الإطلاق. وشعر بعضهم بالانتهاك من قِبل هذه الإشعارات، وفجأةً أدرك الناس بأن الإشعارات المنبثقة مكّنتهم فورًا من معرفة عندما ينشر أحد الأصدقاء صورةً لهم أو عندما يرسل لهم رسالة أو يشير لهم في منشور. لذلك أرادوا الإشعارات المنبثقة وما كان ملائمًا من قبل أصبح غير طبيعي. كمية البيانات المتاحة لشركات الهاتف المحمول تعني بأنهم يستطيعون تخصيص التجربة لكل واحد من المستخدمين حسب مزاجه، موقعه وسياقه. والشركات التي تحقق هذا سوف تربح. أظهر الاحترام ماذا لو كان جهازنا المحمول المفضل هو ساعة بدلاً من هاتف؟ زوج من العدسات اللاصقة؟ الرقعة الذكية؟ حبة دواء ذكية؟ نهاية عصبية رقمية؟ وكلما تصغر الأجهزة المحمولة تندمج أكثر وأكثر بأغراضنا اليومية التي تحيطنا وتصبح مترسخة بشكل عميق بداخلنا. المعلومات الغزيرة التي تجمعها أجهزتنا المحمولة مفيدة لنا غالبًا بالرغم من أنها تكشف حياتنا الشخصية أحيانًا بشكل يهدد مستوى راحتنا. مستوى الإفصاح الغير مسبوق للحياة الشخصية الذي تحتاجه ثورة الأجهزة المحمولة حتى تعمل بشكل صحيح مجهول لحد ما ولذلك سنحتاج لوضع حدود ولتوازن. عندما كان للحكومة وصول سهل لمعلوماتنا الشخصية في الماضي نتج عن ذلك عواقب وخيمة: الدول المراقبة، قوائم الأعداء واضطهاد المنشقين وفي مناطق مثل الصين هذا لا يزال قائمًا حتى يومنا هذا. ونفس الشيء ينطبق على التحكم التجاري لبياناتنا الشخصية. والجدل الأوروبي حول "الحق في أن تُنسى" يعد مثالاً على الديمقراطية في التصرف وعلى طلب الناس للمزيد من السيطرة على أتباعهم الرقميين. وضياع الخصوصية في الحقيقة هو موضوع مفرق للأجيال. معظم الشباب لا يعتقدون بأن هناك شيء يسمى خصوصية: ومعظم الناس كثيري الإنجاب يعتبرونه حقًا من حقوقهم. يعد الإطلاق المخيب للآمال لنظارات Google Glass مثالاً على ما قد يحدث عندما يفشل منتج من منتجات الأجهزة المحمولة في الوصول إلى التوقعات المتعلقة بالخصوصية. فقوة هذه النظارات تم اعتبارها مخيفة وخارجة عن أيدي المستخدمين. وشعر الناس بأنه تم صنعها لخدمة مصالح شركة Google الشخصية، وبأنه تم تصميمها لجمع البيانات لمصلحة هذا الوحش التقني بدلاً من خدمة احتياجات المستخدمين. فتم الطلب من الناس الذين يرتدون نظارات Google Glass بأن يغادروا الحانات، مسارح السينما والأماكن الحساسة. وتم سحب المنتج من الأسواق في بداية عام 2015. ترجمة -بتصرف- للمقال ‎3 ways to be just pushy enough on mobile لصاحبته SC Moatti
  5. هل تواجه شركتك بعض المشاكل في تحديد مدى أهمية تجربة المستخدم؟ لا تقلق، فقد قام "جوزيف توث"، كبير مستشاري واجهة المستخدم أو تجربة المستخدم UX/UI في شركة فايزر "Pfizer" بإجمال بعض أقوى الإحصائيات المتعلقة بتجربة المستخدم. 1- التمرير المستمر والذي هو خاصية تحميل المحتوى كلما مررت بالصفحة لأسفل بإمكانه أن يخفض عدد الزوار لموقعك، فنسبة الزوار لموقع Time.com كانت قد انخفضت بمقدار 15% بعد أن قاموا باستخدام خاصية التمرير المستمر. المصدر 2- استثمار بقيمة 10 آلاف دولار في الشركات المتخصصة بالتصميم قد يعود خلال 10 سنوات بربح بنسبة 228% أكثر من نفس قيمة الاستثمار في البورصة الأمريكية "S&P". المصدر 3- زادت إيرادات موقع ESPN.com بقيمة 35% بعد أن استمعوا لجمهورهم وللاقتراحات المتعلقة بتصميم صفحتهم الرئيسية. المصدر 4- اختيار درجة معينة من اللون الأزرق والتخلي عن بعض الدرجات الأخرى نتج في زيادة الأرباح السنوية بمقدار 80 مليون دولار لشركة Bing. المصدر 5- قيمة الربح العائدة على كل 1 دولار يتم إنفاقه على التسويق عبر البريد الإلكتروني هي بمعدل 44.25 دولار. المصدر 6- 88% من المستهلكين عبر الإنترنت قد لا يعودون لزيارة موقعًا إلكترونيًا ما بعد تجربة سيئة. المصدر 7- المواقع التي تستغرق وقتًا أطول في التحميل تكبد تجار التجزئة عبر الإنترنت خسائر تقدر بـ 2.5 مليار دولار سنوياً. المصدر 8- الحكم على مصداقية الموقع تعتمد بنسبة 75% على المظهر الكلي للموقع والكماليات. المصدر 9- الانطباع الأول عن الموقع تعتمد بنسبة 94% على التصميم. المصدر 10- 85% من الأشخاص البالغين يعتقدون بأن نسخة الأجهزة المحمولة لموقع إلكتروني خاص بشركة يجب أن يكون بنفس جودة نسخة الحاسوب إن لم يكن أفضل منها. المصدر 11- في تقييم لـ200 موقعًا إلكترونيًا خاصًا بشركات صغيرة، وُجد بأن 70% منها لم تعرض حثًا واضحًا للتفاعل على صفحاتها الرئيسية كالعروض الخاصة والنشرات الإخبارية عبر البريد الإلكتروني والأدلة الإرشادية والنسخ التجريبية والأدوات التفاعلية. المصدر 12- 90% من الأشخاص يستخدمون شاشات متعددة بشكل متعاقب. المصدر 13- هنالك فرصة بأن تتسلق قمة إيفرست 279.64 مرة على أن تضغط على لافتة إعلانية! المصدر ترجمة -بتصرف- للمقال ‎13 Impressive statistics on user experience لصاحبه: Jozef Toth
  6. بإمكانك إضافة ثلاث تغييرات بسيطة لمحتواك لإضفاء بعض المتعة عند قراءته، وهذه النصائح لا تنطبق فقط على التصميم، بل بإمكانك تطبيقها على المحتوى النصي أيضًا. الأسماء الخاصة بكل مبدأ قد تكون صعبة بعض الشيء، أما فهمها واستخدامها فهو سهل جدًا. جزء من ملخص رواية البؤساء لتوضيح النص الغير منسق. ملاحظة مهمة: يختلف كل نوع من الخطوط عن الآخر, لذلك عليك القيام بتعديل قياساتك إذا كان المحتوى لا يبدو بالشكل الصحيح، وتذكر بأن ما يهم هو أن يحصل القارئ على قراءة مريحة وأن تبدو القراءة مناسبة للعين. استخدم التسلسل الهرمي للطباعة لإعطاء فهم أوضح لتركيب الصفحة والتسلسل الهرمي هو تسلسل النص على شكل هرم في داخل الصفحة. لك أن تتخيل كتابًا، فيه العنوان الرئيسي أو عنوان الفصل يكون بارزًا أكثر من العنوان الفرعي والذي بدوره أكثر بروزاً من المحتوى الرئيسي أو الحشوة. يجب استخدام هذا المبدأ في التصميم أو المحتوى النصي. يجب أن تكون أحجام الخطوط كلها مشتقة من النص الرئيسي أو الحاشية حيث أنها أكثر ما يتم قراءته في كل صفحة. وهذه بعض الخطوات التي بإمكانك اتباعها لعمل التسلسل الهرمي: النص الرئيسي: بإمكانك تكبير أو تصغير الخط حتى تراه مريحًا للقراءة (نستخدم الحجم 22 نقطة في هذا المقال). العنوان الرئيسي: يجب أن يكون أكبر بنسبة 180% حتى 200% من النص الرئيسي، (بين 40-44 نقطة في حالتنا). العنوان الثانوي: يكون %130 حتى 150% من الحاشية، (بين 29-33 نقطة). وهذا هو شكل الصفحة بعد إتباع الخطوات السابقة: ملاحظات إضافية: هذه الدرجات لم تكن ضرورية لهذا المقال ولكن يجب عليك الأخذ بالحسبان استخدام عنوان ثالث ونص وصفي للصور. العنوان الثالث بإمكانه أن يكون من 100% حتى 125% أكبر من الحاشية, (بين 22-28 نقطة) وصف الصورة يتراوح بين 70% حتى 75% من الحاشية, (بين 15-17 نقطة) استخدم التباعد العمودي لجعل النصوص أسهل في القراءة. هذا يعني التباعد بين الأسطر خلال تمرير القارئ للصفحة، ويجب علينا أن نجعل التباعد بين الأسطر وبين الفقرات مناسبًا ليسمح للعين والعقل بقراءة الحروف والكلمات بشكل مناسب. التباعد بين الفقرات جعل تباعد بين الفقرات سهلُ ولكنه مختلف جدًا عن ما نقوم به في مستندات وورد بالضغط مرتين على زر "سطر جديد"، حيث انه الضغط مرتين على الزر سوف يجعل التباعد بين الفقرات كبيرًا جدًا بحيث لا نستطيع تحديد إذا ما كانت الفقرة التالية تتبع السابقة أم أنها قسم جديد من المحتوى. في أغلب الحالات يجب أن يكون التباعد بين الفقرات مساويًا لحجم الخط الرئيسي للنص، فمثلًا لو كان حجم النص 16 نقطة نقوم بعمل التباعد بين الفقرات على حجم 16 نقطة أيضًا. في تطبيقات التصميم وتنسيقات CSS فإن هذا يشبه وضع الهامش السفلي للفقرات على حجم 16 بكسل أو 1 em. في المستندات مثل وورد، حدد قيمة ما بعد الفقرة على نفس حجم النص. التباعد بين الأسطر التباعد بين الأسطر يجب أن يكون تقريباً 120% حتى 160% من حجم النص، وكلما كان النص أصغر، كان التباعد بين الأسطر أكبر، لإعطاء كل كلمة مساحة كافية. إذا كان حجم النص 22 نقطة فإن ارتفاع السطر لهذا النص يجب أن يكون بين 26-35 نقطة. في CSS, بإمكانك عمل هذا باستخدام الوحدة em أو عبر قيم لا بعدية مثل 1.2، ولكن هذا قد يتطلب بعض التعديل لجعله مناسبًا. في المستندات مثل وورد، ارتفاع السطر يكون بالكسور العشرية حيث أن 1.2 تساوي 120% من النص الذي يتم تعديله. عدل عرض السطر لجعله مريحًا في القراءة الأسطر العريضة من النصوص صعبة في القراءة بينما الأسطر الأقل عرضًا أسهل. ويعَد الحد المثالي من الأحرف لكل سطر هو 65-75 كلمة، ويجب أن يتم تحديد العرض بالرجوع للنص الرئيسي وليس للعنوان الرئيسي أو الفرعي. نصيحة: سطر من الأحرف والأرقام يتكون من 62 حرفاً ورقماً، وهذا مقياس بسيط لصنع عرض مريح. وعندما تكون قد وضعت 65-75 حرفاً في السطر, قلل عرض النص حتى يكون على وشك الالتفاف، وعندها ستجد العرض مريحًا. النتيجة النهائية بمجرد اتباعك لهذه الخطوات، فإن إمكانية قراءة محتواك سوف تتطور بشكل كبير كما هو موضح أسفل. ضبط الكتابة ليس بمهارة صعبة، بإمكانك اتباع بعض الخطوات البسيطة لجعل كل جزء من النص سهل القراءة ومريحًا للعين. ابق على هذا الجزء من صناعة محتواك مستمرًا دائمًا وسوف يحصل القارئون على أفضل النتائج. ترجمة -بتصرف- للمقال Typography tips for a more comfortable read لصاحبه Luke Jones
  7. حسب موقع smart insights فإن 80% من مستخدمي الإنترنت يمتلكون هاتفًا ذكيًا، هذا يعني ملايين الأشخاص الذين يتصفحون الإنترنت ويحاولون أن يجدوا منتجات ومعلومات خلال تصفحهم. ولإرضاء الزبائن المحتملين يجب على كل شركة أن تجعل موقعها الإلكتروني قابلاً للتصفح على الأجهزة المحمولة. ها هي بعض النصائح المستوحاة من تجربتنا الخاصة في شركة Sonifi لتساعدك على تصميم وبرمجة موقع إلكتروني متوافق مع الأجهزة المحمولة. النصيحة الأولى: كل المواقع الإلكترونية على الأجهزة المحمولة تحتاج للخاصية name="viewport"‎ في العنصر meta تذكر بأن ترفق الخاصية viewport من العنصر meta عند انشائك لموقع الكتروني خاص بالأجهزة المحمولة. حجم الإطار المعروض (viewport) هو عبارة عن حقل وهمي مستخدم من قِبَل محركات البحث لتحديد كيفية قياس وتحجيم محتوى الموقع الإلكتروني لذلك يعد تضمين الخاصية viewport ضروريًا جدًا عند بناء تجربة متعددة الأجهزة. حجم الإطار المعروض يخبر متصفح الهاتف بأنه يجب عليه أن يتوافق مع شاشة أصغر وبدونه فإن الموقع الإلكتروني ببساطة لن يعمل بشكل جيد على الأجهزة المحمولة. وبالرغم من أي إعدادات تقرر أن تستخدمها لتحديد ما يتحكم به منفذ العرض الخاص بك، تأكد من أن تضعه في العنصر head من الصفحة. "80% من مستخدمي الإنترنت يبحثون عن المنتجات عبر هواتفهم الذكية" النصيحة الثانية: الحجم مهم في المواقع المتوافقة مع الأجهزة المحمولة هل جربت من قبل أن تزور موقعًا إلكترونيًا واحتجت أن تضغط على زر معين ولكن الزر كان صغيرًا جدًا بحيث أنك ضغطت على زر أخر عن طريق الخطأ؟ أو هل جربت من قبل أن تكبِّر الشاشة لتقرأ شيئًا معينًا؟ هذا الأمر مزعجٌ جدًا ولذلك إنه من المهم أخذ الحجم بعين الاعتبار عند تصميم الموقع الإلكتروني، وليس فقط حجم الصفحة، بل أيضًا حجم الخطوط والأزرار. الخطوط حجم الخط للمواقع على الهواتف يجب أن يكون 14 بكسل على الأقل، وعلى الرغم من أن هذا الحجم قد يبدو أكبر مما تريد ولكنه يسهل على الزائر أن يقرأ الصفحة بدون أي تكبير للصفحة أو أي صعوبة. أما الخط الأصغر يمكن أن يستخدم في العناوين والنماذج وبإمكانك تقليصه حتى 12 بكسل. الأزرار دائمًا تذكر هذا الإختصار «أ.أ.أ»: أي «الأزرار الأكبر أفضل»،إذ أن الأزرار الكبيرة تقلل من احتمالية الضغط بشكل خاطئ على زر آخر. بالنسبة لرواد الهواتف المحمولة مثل شركة "آبل" فهم ينصحون بأن يكون حجم الأزرار على الأقل 44 بكسل × 44 بكسل من أجل تحسين تجربة المستخدم وزيادة التحويلات في مواقع التجارة الإلكترونية. النصيحة الثالثة: النوافذ المنبثقة لا يجب استخدامها في تصميم مواقع الإنترنت الخاصة الأجهزة المحمولة كَون المتصفحات الخاصة بالهواتف لا تدعم النوافذ المنبثقة، فإن وجود هذه النوافذ يسبب الكثير من التشتت والقلق لتجربة المستخدم بشكل كامل، وحتى أصغر النوافذ تسبب هذا التشتت لمستخدمي الهواتف. وعلى مدار عملية التصميم، احرص جيدًا على تجنب استخدام النوافذ المنبثقة للحصول على أفضل النتائج واحرص ايضًا على تجنب التحديث الدوري للصفحة وذلك لعدم امتلاء ملفات ذاكرة التخزين المؤقت في الهاتف بل أعطِ المستخدم حرية التحكم في هذه العملية. النصيحة الرابعة: قلّل من استخدام الحقول الخاصة بالكتابة في قائمة التنقل لأنه وكما تعلم، من الصعب بعض الشيء إدخال النصوص والكتابة عند تصفح المواقع على الهاتف فينصح باستبدال هذه الحقول بأزرار او قوائم مما يمكن المستخدمين من اختيار ما يريدون بسهولة وبدون الوقوع في أي اضطرابات. وعليك الأخذ بعين الاعتبار بأن مستخدمي الأجهزة المحمولة لا يستطيعون استخدام لوحة مفاتيح او فأرة، على عكس مستخدمي الكمبيوتر، لذلك احرص على ايجاد طرق ابداعية أكثر لجعل تجربتهم هي نفسها وبدون اللجوء لاستخدام لوحة مفاتيح صغيرة او التصفح بصعوبة. بعض الحلول تشمل: القوائم القوائم المنسدلة الأزرار -خيارات الصور النصيحة الخامسة: استخدم وضع تصفح ذكي في تصميمك قد أجريتَ بالتأكيد بالعديد من الأبحاث قبل بنائك للموقع الإلكتروني لمحاولة فهم جمهورك وما يتوقعون وجوده في الموقع، قم بمراجعة المعلومات ثانيةً عند تطويرك لنموذج خاص بالأجهزة المحمولة لتستطيع تحديد كيف سوف يتصفح هذا الجمهور موقعك على الهاتف. إن كان جمهورك المستهدف من المستخدمين يرغب برؤية محتوى متجدد بشكل مستمر فعليك وضع قائمة التصفح أسفل المحتوى الرئيسي مما سيترك مساحة كافية للمحتوى والعناوين لتظهر أكثر وبدون إعاقة لمظهر الصفحة. أما إن كان المتابعون يريدون الوصول الدائم للتصفح حسب الفئة، إذن يجب عليك وضع قائمة التصفح في أعلى الصفحة. النصيحة السادسة: قم بتبسيط تصميم موقعك الإلكتروني حاول بأن تتخلص من المحتوى الغير ضروري في موقعك وقم بتبسيط التصميم الخاص بالصفحة لجعل الاستخدام أفضل، وتذكر بأن التصميم الخاص بالأجهزة المحمولة يدور حول نظرية الحد الأدنى (minimalism)، وتبسيط التصميم يساعد على تحسين الاستخدام. أنشئ موقعك بحيث تسمح للمستخدمين بتصفحه دون أي صعوبات وذلك عن طريق تجنب الجداول والإطارات والصيغ الأخرى. ودائمًا أبقِ الحشوة على أقل مستوى لأنه كلما زاد عدد المستخدمين الذين يضغطون على الروابط كلما زاد انتظارهم للتحميل، واجعل موقعك بسيطًا لخلق توازن بين المحتوى والتصفح. النصيحة السابعة: قسّم الصفحة لأجزاء صغيرة عملية عرض المحتوى الذي يتناسب تمامًا مع الشاشات الكبيرة للكمبيوتر وتعبئتها في أجهزة صغيرة ومحمولة باليد تشبه كثيرًا عملية ادخال قطعة مربعة في فتحة دائرية. قسّم الصفحة لأجزاء صغيرة بوضع الأقسام الطويلة من النصوص في عدة صفحات بدلاً من وضعها في صفحة واحدة طويلة تجعل المستخدمين يمررون بشكل مستمر لرؤية المحتوى وبإمكانك التخلص من المحتوى الأقل أهمية وعمل عمود واحد من النص لتجنب التمرير الأفقي في الصفحة. النصيحة الثامنة: قياس الصور يصنع فرقًا كبيرًا لمستخدمي الأجهزة المحمولة لاحظ جميع الصور المستخدمة في المحتوى وفي الخلفية، وتأكّد بأن الصورة مقاسها صحيح عند التصفح بالوضع العمودي أو الأفقي، وإذا كانت الصور لا تحقق الأبعاد المناسبة فعليك تغيير تنسيق صفحات في CSS لجعل الصورة بعرض 100% أو بأن تجعل الصورة نفسها مناسبة بداخل الصفحة (خاص بصور الخلفية). وباتباعك لهذه النصائح السهلة بإمكانك التأكد من أن تصاميمك مناسبة لكل من الحاسوب والهاتف وبالتالي يمكن للزائرين أن يحظوا بأفضل تجربة ممكنة. ترجمة -بتصرف- للمقال ‎8 tips for designing mobile-friendly websites لصاحبته: Sarah Almond
  8. في عام 2003، قرأت مقالةً في مجلة "نيويورك تايمز" كانت قد تضمنت هذا الاقتباس عن "ستيف جوبس": روعة هذا التعبير غيرت مهنتي كمبرمج بشكل كامل. في نهاية اليوم أنا من يكتب"الشيفرة" ومن ينشئ المنتج بيديه. فكيف لأحد آخر أن يحدد كيف يعمل المنتج في النهاية؟ الحقيقة الكامنة لكل المبرمجين هي أنهم غارقون في الخلف ولا يتعاملون بشكل مباشر مع المستخدم. فالمستخدم لا يتعامل مباشرةً مع عملهم بل يتعامل مع ما يصنعه المصممون. اختلاف المنظور هو ما يمنع المبرمجين من رؤية الصورة بشكل كامل فهم يفتقدون أهم جزء وهو المستخدم. أيها المبرمجون، تعَلُّم التصميم يجعل من الممكن أن تقوموا بتجميع كامل النظام في عقولكم، من كيفية تعامل المستخدم مع منتجكم وحتى آخر مرحلة حيث تقومون بتخزين المعلومات في قاعدة البيانات الخاصة بكم. هذا المسار المتكامل يمكنك من تطوير منتج أفضل من المنتجات المنافسة. كَوني مبرمجًا منذ أكثر من 15 سنة فإن تعلمي للتصميم قد طوّر أدائي تطويرًا جذريًا. كثيرًا ما نسمع بأنه يجب على المصممين أن يتعلموا البرمجة ولكنني أؤمن بالعكس, للحصول على منتجات رائعة فإن المبرمجين عليهم أن يتعلموا التصميم. فهم التصميم يؤدي لفهم المستخدم عندما بدأت بتعلم التصميم كانت إحدى أكثر اللحظات التي وقفت وتساءلت فيها هي أنه على الرغم من أنني أعمل في الخلفية إلا أن ما اصنعه يجب عليه أن يجعل حياة المستخدم أسهل، فمستخدموك لديهم العديد من المشاكل التي يحاولون حلها وإذا ركزت فقط على حل المشاكل التقنية فقد لا تستطيع التوصل لحل للمشكلة. إحدى أفضل الطرق للتأكد من أنك على المسار الصحيح لخدمة الاشخاص الذين سيستعملون منتجك بالفعل هي الانخراط مبكرًا في عملية التصميم، ويفضَّل أن يكون منذ اليوم الأول. وإدراكك لمشاكل المستخدم منذ البداية يمكنك من اتمام العمل بسلاسة وبشكل تام. صرّح الريادي المشهور ومؤسس شركة "Y Combinator"، "بول غراهام" بالتالي: كل شيء ليس كما يبدو عليه سوف أعيد القول بأنه تقريباً من المستحيل أن يمر يوم بدون رؤيتك لمقال عن إذا ما كان يجب على المصممين أن يتعلموا البرمجة. ما يجهله الناس هو أن المبرمجين قادرون على تعلم التصميم ويجب عليهم تعلم التصميم للعمل بشكل أفضل مع المصممين والحصول على منتجات رائعة حقًا. ولسوء الحظ, هنالك نوع من التنافسية بين المبرمجين والمصممين على من يمتلك الوظيفة الأصعب، ومن على صواب، ومن على خطأ، ومن يعرف أكثر والعديد من النقاط الأخرى، وهذا التنافر عن العمل سويًا لا يفيد بأي شكل من الأشكال. بمجرد تعلمك للتصميم ستلاحظ بأن عمل المصممين ليس سهلاً كما يبدو، ومن الناحية الأخرى، تعَلَّم البرمجة وسوف تدرك بأن المبرمجين ليسوا متجهمين وهدفهم ليس افساد تصاميمك. عندها، سوف يتمكن كل من المصممين والمبرمجين بتقدير عمل الآخر واحترام ما يقومون به مما يؤدي لعملهم سوياً كفريق. استمتع أكثر بأداء عملك بالنسبة لي، أفضل شيء بالنسبة لتعلم التصميم هو أنني أستمتع بعملي أكثر من السابق. أصبحت قادرًا على الانخراط في محادثات هادفة مع المصممين عن طريق التحدث بلغتهم التي يفهمونها مما أكسبني شعورًا كبيرًا بالرضى، بالإضافة لذلك, اصبحت متلهفاً أكثر كلما اقتربنا من الاعلان عن مشروع جديد وهذا لأن مشاركتي تخطّت الجوانب التقنية التي تحدث في الخفاء. أيضًا, تعلُم التصميم يساعد المبرمجين على خلق منتج يعادِل بين الإبداع والمنطق بدون "مستند خصائص التشغيل" ومن الممكن تجنب قوالب الفوتوشوب "PSD" وبرمجة تصاميمك وتنسيقاتك بطريقة فعالة خلال كتابتك لشيفرة البرمجة. وعندما تجد ثغرات في تصميمك و في صفحات النسق (style sheets) فبإمكانك إصلاحها فورًا وإنهاء عملك بدون أي تأخير او قلق. التأقلم هنالك تدفق كبير للأجهزة الحديثة التي يتم انتاجها يومياً بمختلف الأشكال والأحجام لذلك فإن القدرة على التأقلم بأسرع ما يمكن هي شيء أساسي. يجب على المبرمجين أن يعملوا بتصميم متوافق مع هذه المتطلبات والمواصفات، وهذا يعني بأنه من المهم أن يكون المبرمجون قادرون على ملاحظة وتحديد هذه التغييرات. كيف سيتصرف التصميم عندما تنتقل من جهاز الكمبيوتر للهاتف المحمول أو الساعة الذكية؟ سوف تتمكن بمعرفتك التصميمية من التعامل مع عملك بأسلوب مختلف عما كنت سوف تفعل عادةً, مما يعطيك ميّزة تنافسية كبيرة وسوف توفّر الكثير من الوقت عليك وعلى فريقك. كثيرًا ما يختلط التصميم بالبرمجة في شركتي، وعندما يكون المبرمج يعرف عن التصميم فإن النتائج تكون أفضل على صعيد كل من سرعة العمل والجودة فيما ننتجه. كيف تعلمتُ التصميم أولى خطواتي كانت على موقع "DesignLab" حيث ساعدني احد المرشدين طوال الوقت، وقمت أيضًا بالانتساب لبرنامج التصميم على موقع "BLOC" وكان كلا الموقعين رائعين حقًا, ولكن بالطبع لا شيء يغني عن الممارسة المستمرة لذلك يجب عليك الممارسة يوميًا حتى تصل للدرجة المطلوبة. ترجمة -بتصرف- للمقال Why developers should learn design لصاحبه Christian Rennella