المحتوى عن 'تصميم'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML
    • HTML5
  • CSS
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 46 نتائج

  1. ربّما تكون شاشات اللّمس أحد الأسباب التي جعلت الأجهزة الجوّالة ذات شعبيّة كبيرة جدّا. تحذف شاشات اللمس المسافة بين الشخص والجهاز التفاعليّ، ونتيجةً لذلك، يحسّ الأشخاص بأنّ شاشات اللمس بديهيّة وسهلة الاستخدام. لهذا السبب، يمكن إدماج المنزلقات (Sliders) بسهولة في الأجهزة الجوّالة. تشجّع المنزلقات المستخدمين على استكشاف محتوى موقع بسهولة عن طريق إجراء حركات أفقيّة على الشاشة. رغم ذلك، فإنّ المنزلقات خيار قليل الاستخدام للتصفّح على الجوّال. تقدّم المنزلقات خيّار تصفّح رائعًا للمواقع والتطبيقات التي لديها عناصر قليلة لاستكشافها. تبدو المنزلقات طبيعيّة للمستخدمين، وتوفّر طريقة مرحة لتعديل الإعدادات أو استكشاف الميزات. يسهُل على الزوّار التعرّف على المنزلقات، ممّا يجعلها سهلة الاستخدام؛ وبالتالي، خيّارًا عمليًّا جدًّا ليستغلّه المصمّمون. ما لذي تصلُح له المنزلقات المنزلقات سهلة الفهم والاستكشاف، وهو ما يجعلها بديهيّة. تمثّل المنزلقات - نظرًا لكونها لا تأخذ مساحة كبيرة - خيّارًا جيّدًا في الأجهزة التي تستخدم شاشات لمس، التي هي شاشات صغيرة. كما أنّ المنزلقات مناسبة لما تمثّله من إضافة لتصميم واجهات المستخدم. تساعد المنزلقات المستخدمين في التحرّك جيئة وذهابًا، أو زيّادة السرعة أو الصوت، وتمنح حسَّا نسبيًّا للأنشطة (جعل مستوى الصوت أرفع ممّا هو عليه الآن). مصاعب عند استخدام المنزلقات النظر إلى التصميم من زاويّة المستخدم أمر مهمّ في سبيل التأكد من قابليّة الاستخدام (Usability). مستخدمو الجوّال – في الغالب – مستعجِلون أو مشتّتو الانتباه عند استخدام أجهزتهم. يمكن أنْ يستخدموا أجهزتهم وهم يتجوّلون في مركز تسوّق، أو يتناولون الطعام، أو يتنزهون في الحديقة. عندما يمرّ المستخدمون على منزلق، فهم يفعلون ذلك في الغالب مشتّتي الانتباه أو مستعجِلين. يعني هذا غالبًا دفع المنزلق كثيرًا إلى أحد الجانبيْن أثناء محاولة إبعاد أصابعهم عن الشاشة. يمكن أن تكون المنزلقات كذلك صعبة الاستخدام بالنسبة للأشخاص الذين لديهم صعوبات حركيّة. قد يكون من الصعب جعل المنزلق يعمل بالطريقة التي تفضّل أن يعمل بها إذا تلقّى ضغطًا زائدًا قليلًا على الشاشة. قد تكون المنزلقات كذلك صعبة الاستخدام بالنسبة للمستخدمين المتقدّمين في السنّ الذين ترتعش أيديهم؛ وهو ما يجعل ضمان نتيجة محدّدة صعبًا أثناء استخدام المنزلق. ربّما يفقد المستخدمون في مثل هذه الحالات الأمل في إمكانيّة تصفّح الموقع. ضع الجمهور المستهدَف من الموقع بالحسبان. إنْ كنت تستهدف زوّارًا متقدّمين في السن، أو أشخاصًا لديهم صعوبات حركيّة أو صحيّة، فلن يكون المنزلق خيّارك الأمثل. فكّر في مشاكل قابليّة الاستخدام بعد التأكّد من ملاءمة استخدام المنزلقات لجمهورك المستهدَف، يأتي الوقت للتفكير في قابليّة استخدام التصميم. يعتمد مستخدمو شاشات اللمس – غالبًا – الأصابع عند العمل على أجهزتهم. بما أنّك تريد أن يكون تصميمك قابلًا للاستخدام، فمن المهمّ استكشاف أماكن شاشة اللمس التي سيشغلها الأصبع أو اليد عند استخدام الجهاز الجوّال. سيساعد ذلك في وضع المنزلق بحيث يمكن استخدامه والتعامل معه. يختلف التصميم لسطح المكتب، حيث تُستخدَم الفأرة لتحريك المنزلق، عن الأجهزة بشاشات لمس. يجب أن تسعى في حالة شاشة لمس إلى التقليل من إمكانيّة الخطأ، أو الضغط على روابط أخرى، أو تغطيّة التعليمات أثناء وضع المستخدمين أصابعهم على الشاشة. يجب أن تظهر جميع اللافتات (Labels) والقيّم التي تفسّر المنزلق بجانب أصابع المستخدم وزرّ التمرير، أو فوقهما. استخدم المنزلقات لترك انطباع بصريّ واضح يفيد غالبًا استخدام المنزلق لتقديم متتاليّة من الصوّر البصريّة للمستخدمين إذا كان لديك محتوى مهمّ لعرضه، ولكنّ به معلومات كثيرة جدًّا، يصعُب استكشافها أو استيعابها على زوّار الموقع. على سبيل المثال، إنْ رغبت في عرض سلسلة من الأحداث التي يمكن للمستخدم متابعتها بهدف شراء منتَج من موقع تجارة إلكترونيّة، فإنّ مجموعةَ صوّر واضحة تقود المستخدم عبر خطوات متتاليّة يمكن أن تكون مفيدة ولا تتطلّب الكثير من العمل. تقتصد الطريقة السابقة أعلاه من وقت الزائر وتجعل الموقع سهل التصفّح. يمكن استخدام هذه العمليّة في حالات كثرة لمساعدة المستخدم في تصفّح موقع أو تطبيق للجوّال. أنواع المنزلقات التي يمكنك استخدامها توجد أنواع عدّة يمكن استخدامها عند تصميم موقع أو تطبيق: المنزلقات المنفردة (Single sliders): مناسبة للعمل مع قيمة وحيدة في كلّ مرة. المنزلقات المزدوجة (Double sliders): مناسبة للعمل مع مجال من القيم (مثلًا، منزلق للقيمة الدنيا وآخر للقيمة القُصوى). المنزلقات المتواصلة (Continuous sliders): تسمح المنزلقات المتواصلة بتحديد موقع نسبي على مجال مُحدَّد بقيمتين دنيا وقُصوى. المنزلقات المتقطّعة (Discrete sliders): تتميّز بنقاط توقّف يمكن للمستخدم استعمالها لإعطاء قيمة دقيقة. الدقة أم التخمين؟ قد يكون صعبًا أو معقّدًا بالنسبة للزائر استخدامُ منزلق بصورة دقيقة. يتأكّد هذا الأمر على شاشات اللمس. من الصعب جدًّا الحصول على الدقّة في التحديد إذا كنت أمام مؤشّر تمرير صغير على شاشة لمس. يكون استخدام المنزلقات – غالبًا – أسهل عندما لا تكون دقّة القيمة المُختارة مهمّة. إنْ كان المستخدم يستطيع استخدام المنزلق لمشاركة قيمة تقريبيّة، فسيكون ذلك – غالبا – كافيّا. مالعمل إنْ احتجت لقيمة دقيقة؟ يمكن إنشاء منزلق بقيم عدديّة قابلة للتعديل إذا كان من اللازم على المستخدم إدخال قيمة مضبوطة. يعني هذا أنّه سيكون باستطاعة المستخدم لمس المنزلق ثم إدخال عدد في صندوق نصّيّ. يمكن أن يُصبح الصندوق قابلًا للتعديل كلّ ما لمس الأصبعُ المنزلق. رغم ذلك، إنْ كانت واجهة المستخدم تتطلّب قيمة دقيقة من أجل قابليّة الاستخدام، فسيكون من الأفضل عدم استخدام المنزلقات. عرض مجال قِيم تسخدم بعض المنزلقات قيمًا عدديّة بحيث يمكن للزائر تحديد اختيّارات. يمكن لتطبيق تجارة إلكترونيّة أن يوفّر مجموعة من المنتجات تبدأ أسعارها من دولار واحد، لكنّها تصل إلى 999 دولار. يكون من المفيد في هذه الحالة – غالبًا – عرضُ مجال القيّم المتوفّرة على المتجر بدقّة. تمنح هذه الطريقة المستخدم إمكانيّة إنشاء مجال مخصَّص للعناصر التي يريدون استكشافها. تتجنّب بتخصيص مجال من القيّم حصول الزائر على إجابة بمجموعة عناصر فارغة. ستوفّر مجموعة قليلة من قيّم البحث نتيجة بعناصر أقلّ، في حين يوفّر مجال بحث أوسع عناصر أكثر. على الرغم من ذلك، لن يحدّد المستخدمون مجموعةً من القيّم إلّا لسبب، ولن يزعجهم غياب مجموعة من الخيّارات لا يمكنهم دفع ثمنها. أعط للمستخدمين القدرة على استكشاف التطبيق، حتى ولو لم يكونوا يفهمون مغزى المنزلق والمجالات التي يتيحها للمستخدم. وفّر تغذيّة راجعة بصريّة للمستخدمين أضف تغذيّة راجعة بصريّة لتفاعلات المستخدمين مع المنزلق، فتلك هي طريقة العمل التي يتوقّعها المستخدم. وفّر إجابة بصريّة فوريّة للمستخدم عند استخدامه لمنزلق أو عندما يُدخل معلومات في صندوق إدخال. يمكن استخدام التحريكات (Animations)، حالات الحومان (Hover)، والتأشير فوق العناصر (Rollover) للتواصل مع المستخدم. تجذب هذه الميزات انتباه المستخدم وتخلُق بالتالي قناة اتّصال معه. مواقع الويب التفاعليّة جذّابة دائما. عندما تمدّ المستخدم بتغذيّة راجعة بصريّة فإنّه يشعُر بالتقدير، ممّا ينتُج عنه إحساس بالثقة في قدرته على تصفّح الموقع. خاتمة تبدو المنزلقات بديهيّة وسهلة الاستخدام في تطبيقات الويب؛ كما أنّها خيّار جمالي، إلّا أنّها ليست دائمًا الأداة الأفضل للاستخدام. إنْ كنت تبحث عن قيم نسبيّة، وتعلم أنّ الجمهور المستهدَف لديه قدرة حركيّة جيّدة، فإنّ المنزلقات قد تكون خيّارًا جيّدا. أمّا إذا كنت تبحث عن قيّم دقيقة، فسيكون من المفيد توفير خيّارات لإدخال تلك القيّم. اعمل، بوصفك مصمِّمًا، على إنشاء شرائط تمرير يمكن للمستخدم من خلالها اختيار مجال من القيّم يمكن استغلاله على الموقع. يساعد هذا الأمر المستخدمين الذين قد يجدون صعوبة في تحديد قيم دقيقة عند استخدام المنزلق. ترجمة – بتصرّف – للمقال How to Create a Good UI Slider in Mobile Design لصاحبه Bogdan Sandu.
  2. قمنا مؤخرًا بتحديث تصميم صفحة "?Why Should You Attend" التي كانت ماتزال تحتفظ بالتصميم القديم للموقع وقد احتجنا إلى أن نوائمها مع باقي الموقع. وعندما بدأنا العمل عليها قررنا أن نحسّن تصميم هذه الصفحة بأحدث التقنيات المستخدمة في التصميم حاليًا ألا وهي: الأشكال العائمة غير المستطيلة non-rectangular float shapes وميزة الكشف المباشر من قبل المتصفح عن قدرته على تطبيق تعليمات css وهذا مايعرف بـ feature queries. ولكن ليكن واضحًا بأننا لم نقم ببناء هذا المثال المتطور من دون أن يزودنا Mike Pick صاحب Monkey Do بالتصميم حيث أدركنا بأن رؤيته تتوافق بشكل جميل مع ميزات CSS الحديثة وقد كنا سعداء جدًا بالنتائج التي حصلنا عليها من خلال هذه التقنيات الحديثة لذلك أردنا مشاركتها معكم. تصميم الفقاعات styling bubbles هنا يوجد بعض المقتطفات من تصميمنا الأولي (التصميم النهائي لم يتم إنشاؤه كبطاقة صور لذلك لايمكنني عرض الشكل النهائي ولكن هذا الشكل قريب جدًا). مايهمني في هذا المثال هو طريقة استخدام الصور الدائرية، التي كنا نشير إليها باسم "الكُوّة portholes" ولكن بعد التفكير أفضل تسميتها بـ "الفقاعات". عندما بدأت التحضير لتنفيذها من خلال التعليمات البرمجية عدت بالتفكير إلى ما قالته جين سيمون عن الاتجاه الفني الحقيقي في الويب. وبالتحديد كنت أفكر حول الأشكال في CSS وكيف يمكن أن أكون قادرًا على استخدامهم بحيث تكون أسطر الكتابة مرتبة حول محيط الدائرة بشكل انسيابي. تقوم طريقة بناء هذا التنسيق على دمج مجموعة من التقنيات المستخدمة في التعامل مع الأشكال في CSS وهي Ragged Float وفكرتها تقسيم الصورة المنحنية إلى مجموعة من الشرائط مستطيلة الشكل ثم عرضها بالتسلسل لتظهر الشكل النهائي المنحني. و Sliced Sandbags التي تقوم على مبدأ بسيط هو بناء مجموعة من div التي تتوضع فوق الصورة الأساسية وبالتالي هذه الأقسام لاتكون الصورة الحقيقية التي سيتوضع النص حولها وإنما عبارة عن مجموعة من تعليمات php. الآن نمتلك الأشكال العائمة float shapes حيث يمكننا أن نعرّف دائرة أو مضلع ثم نقوم بتوصيف كيفية انسياب النص حول الشكل. أعلم ستقول بأنك لم تسمع أبدًا عن دعم هذه الأشكال في المتصفحات، بالتأكيد هذا صحيح حيث أن المتصفحات التي تدعمها إلى الآن هي WebKit/Blink family—Chrome, Safari, and Opera ولكن ذلك لايشكل عائقًا أمام هذه التقنية لأن المتصفحات التي لاتدعم الأشكال العائمة float shapes ستنفذ الطريقة القديمة boxy float في التعامل مع هذه الأشكال وذلك من خلال عرضها كألبوم صور. من أجل إضافة فقاعة سيكون الشكل الأساسي لتعليمات CSS هو: img.bubble.left { float: left; margin: 0 40px 0 0 ; shape-outside: circle(150px at 130px 130px); } img.bubble.right { float: right; margin: 0 0 0 40px; shape-outside: circle(150px at 170px 130px); } وبالمناسبة هذه الصور الفقاعة هي عبارة عن صور مربعة أبعادها 260px سوف يتم عرضها على سطح المكتب بهذا الحجم ولكن عند تصغير العرض إلى مساحات أصغر سيتم تحجيمها بنسبة 30% لتتناسب مع العرض الجديد. طريقة توضع الشكل لنفهم طريقة إعداد شكل الفقاعة النهائي سنقوم بحساب عدد بكسلات توضع الصورة، أولًا أبعاد الصورة الفقاعة هو 260×260 بكسل ونقوم بإضافة 40 بكسل عند الهامش الأيمن للصورة وبالتالي يتشكل لدينا مربع يحوي الصورة وأبعاده هي 300 بكسل بالعرض و 260 بكسل بالطول وتشغل الصورة الأساسية القسم اليساري من هذا المربع. إذًا وعند القيام بحساب بسيط نجد مركز الدائرة هو عند النقطة 130px 130px ونصف قطر الصورة الدائرية الفقاعة هو 130 بكسل ونمدد المحيط الخارجي للفقاعة 20 بكسل فيصبح نصف قطر الدائرة النهائي هو 150 بكسل. وبنفس الطريقة نبني الفقاعات الموجودة على الجانب الأيمن، حيث تنزاح نقطة المركز إلى 170px 130px لأننا أضفنا 40 بكسل كهامش أيسر للصورة، وستشرح الصورة كيفية توضع مركز كل دائرة من أجل كل صورة سنلاحظ مايلي: الصندوق الأزرق الفاتح يُظهِر العنصر نفسه المعرف بالصف img. المربع البرتقالي الفاتح هو منطقة الهامش الأساسية وعرضها 40 بكسل. الدائرة البنفسجية والتي تمّ تعريفها في تعليمات css بالمعرف shape-outside. بالإمكان ملاحظة كيفية انسياب النص إلى المنطقة البرتقالية حيث يصل إلى أعلى الدائرة البنفسجية وهذا هو تأثير خاصية shape-outside. المناطق خارج هامش الشكل يكون طريقة عرض النص فيها عادي. نلاحظ أن الدائرة البنفسجية تمتد خارج منطقة الهامش وذلك لأنه باستخدام خاصية shape-outside يتم قص الدائرة بحسب الأبعاد المعطاة بغض النظر عن مربع الهامش، لذلك فإنه إذا قمنا بزيادة نصف قطر الدائرة مثلًا 400 بكسل فهذا يعني أن الصورة ستغطي نصف الصفحة مع أن التصميم الأساسي للنص سيبقى حول حواف هامش الصورة العائمة كما لو أنه لايوجد أي شكل على الإطلاق. استجابة الأشكال Being Responsive حتى الآن طريقة التصميم جيدة فالنص ينساب حول الشكل العائم بطريقة سلسلة في متصفحات chrome /safari / opera ويتعامل مع الأشكال كما لو أنها مربع شكل عادي في Firefox /Edge وستبقى هذه طريقة تعامل المتصفحات مع الأشكال جيدة طالما أنه لم يتم تصغيير نافذة المتصفح وتتسبب في التفاف النص بين الفقاعات ولكن بالطبع يمكن حدوث ذلك في هذه الحالة بالنسبة للصور العائمة على اليمين لن يكون الوضع سيئًا على عكس الصور اليسارية التي لن يكون الأمر جميلًا بالنسبة لها. ففي بعض الحالات سيكون الالتفاف مقبولًا كما شاهدنا في الصورة السابقة وذلك في حالة كون النص عبارة عن عدة أسطر، أما في حالة كان النص فقط كلمة أو كلمتين وعند حدوث الالتفاف لهما سيكون شكلهما غير مقبول قليلًا ولذلك من الأفضل تغيير طريقة إعداد الهوامش في النصوص بحيث لايتم الالتفاف حول الفقاعات المرافقة للنص. على سبيل المثال: .complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; } أي أنه من كل الكتل div الأبناء زوجية الأرقام (وليست الابن الأخير) نضيف 20% كهامش على المحتوى ونقوم بنفس الأمر من أجل الكتل الأبناء أصحاب الأرقام الفردية. بإضافة هذه التعليمات الجديدة سيظهر شكل النصوص عند تصغيير نافذة المتصفح بشكل جيد في Chrome حيث سيتم التفاف النص على طول الفقاعة وسيتم إدخال النصوص إلى داخل هوامش الصورة بقيم معقولة ولكن في متصفح firefox الذي لايزال يمتلك النظام القديم boxy float في التعامل مع الصور لن يكون هناك التفاف في النص ودفع إلى الداخل وإنما سيتم إظهار شريط التمرير على طول الصفحة ومن جهة أخرى فإن زيادة قيمة الهامش من أجل اصطفاف السطور كما في firefox (الهامش كان بنسبة 33%) لامعنى له في الأشكال العائمة float shape في chrome وذلك لأن النص لن يصل أبداً حتى النصف السفلي من الدوائر. دعم ميزة Querying feature تشغيل ميزة feature query يتم من خلال إضافة سطر supports@ إلى التعليمات حيث نستطيع من خلال هذه الطريقة معرفة المتصفحات التي لاتدعم الأشكال العائمة التي أضفناها فتقوم تعليمة support@ بتعديل الهوامش إلى 33% كما أنها تقلل هذه الهوامش في حال كانت المتصفحات تستطيع التعامل مع هذه الأشكال، ويتم هذا من خلال إضافة تعليمات: .complex-content div:nth-child(even):not(:last-child) p { margin-right: 33%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 33%; } @supports (shape-outside: circle()) { .complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; } } وبهذا سيظهر تصميم العناصر بشكل جيد في جميع المتصفحات، بالرغم من وجود بعض الأشياء الصغيرة جدًا التي يمكن إضافتها. ولكن بشكل عام طريقة العرض في جميع الحالات التي تدعم الأشكال العائمة أو لا تبعث على السرور في الفيديو الأول طريقة العرض في متصفح chrome تحميل الفيديو الأول والفيديو الثاني يظهر طريقة العرض في متصفح firefox الذي لايدعم الأشكال العائمة تحميل الفيديو الثاني بالأخير إنها نعمة وجود ميزة مثل feature queries تسمح للمتصفحات مثل firefox و MS Edge الحصول على دعم لإظهار الأشكال العائمة. ومع أنه لايوجد تحسينات قريبة للمتصفحات ولكن يتم العمل بشكل دائم على إدخال التحسينات على CSS نفسها بحيث سيصبح شعارها قريبًا "صمم وانسى"، كما يمكن القول بأن التعديل الأساسي في CSS هو طريقة التعامل مع الأشكال وتحسين عمليه استجابتها من دول وجود الدعم الكافي في المتصفحات لها. ترجمة –وبتصرّف- للمقال A Redesign with CSS Shapes لصاحبه Eric Meyer
  3. قد ينتهي المطاف بمعظمنا إلى كتابة مراجعة عن موقع إلكتروني بحكم خبرتنا في المجال الرقمي وعالم الإنترنت؛ عندما نريد القيام بذلك فإنَّنا بحاجة إلى التعمق والنبش عن بعض التفاصيل عوضًا عن أخذ الأمور بسطحية. لقد أدركت، مثل حال أغلب زملائي، أنَّني كنت أتناول موضوع مراجعات المواقع بطريقة خاطئة تمامًا لذا سأشارك في هذه المقالة تجربتي عن مراجعات المواقع والطريق الذي يؤدي إلى كتابة مراجعة جيدة وذات تأثير كبير. هل يحوي المنهج الذي تتَّبعه في مراجعات المواقع خللًا؟ يُفترض أن تضم مراجعات المواقع قائمة بأعطال الموقع، ومشاكل الأداء، والجوانب التقنيَّة، وسهولة الاستعمال، وجمالية المظهر، والمحتوى، وغيرها من الأخطاء؛ تبدو وكأنَّها أوسع بكثير من أن تحوي أسماء مواقع التواصل الاجتماعي ومحركات البحث وعناوينها. يجب أن تسلِّط مراجعات المواقع الضوء على المشكلات بدقة متناهية مستعينة ببعض أنظمة التقييم ثمَّ تقترح الحلول المتوافرة لها، كما توصي بإجراء التحسينات للأداء. حسنًا، هذا يبدو مفيدًا جدًا ولكنَّه للأسف نادر الوجود في الواقع. قد تتطرق مراجعات المواقع في الحقيقة إلى تلك المواضيع بسطحية وتحاول إصلاح بعض الأمور التي تحسِّن من الموقع باقتضاب دون أن تُحدث فرقًا شاسعًا مع مرور الوقت. بعبارة أخرى، إنَّها تحاول معالجة أعراض تلك الحالات دون التمحيص في مسبِّباتها. هل تركِّز على على الأعراض وتتجاهل المرض؟ هل يعقل أن يركِّز طبيب على أعراض سرطان الرئة مثلًا دون مناقشة المريض في السبب الذي أدى إلى المرض وهو عدد مرات تدخينه التي تصل إلى أربعين مرة يوميًّا؟! هكذا تفعل أغلب المراجعات حيث تضع لزقة جرح على أعطال حسَّاسة ومهمَّة دون التطرق للأسباب التي أدت إلى حدوثها، وهذا الفشل في معالجة جذور المشكلة هو سبب نفوري من مراجعات المواقع؛ أعلمُ أن المسؤول الأول عن تلك المشكلة هو الفريق الرقمي (digital team)، وهو الفريق المسؤول عن تطوير وتجريب وتنفيذ الاستراتيجيات اللازمة لتحقيق الأهداف وجذب الجمهور عبر الوسائل التقنية مثل الويب، والذي أنشأ تلك المراجعات ولكن بحسب الخبرة التي اكتسبتها فإنَّ ذلك قلَّما يكون مصدر المشكلة. لنأخذ مثالًا عن هندسة المعلومات (information architecture) لموقع ما حيث أغلب المواقع التي راجعتها تكون هيكلة ومعمارية المعلومات فيها مرعبة والتي لا تعكس رؤية وتطلعات المستخدمين. من جهة أخرى، إن كانت جميع مراجعات الويب التي أكتبها تشير إلى هذه المشكلة وتقترح حلًا لها فأنا حقيقةً لا أقدم شيئًا ذو قيمة إذ يَعرف أغلبية الفريق المسؤول عن الموقع مسبقًا طريقة هيكلة وهندسة المعلومات بما يتوافق مع حاجة المستخدم؛ أي أنَّني أخبرهم في النهاية بما يعرفونه وأعطيهم لائحة أوامر لتوجيههم وهذا قد يعطي انطباعًا بأنَّهم حمقى لعدم إصلاحهم تلك المشكلة، وهذا المثال ينطبق على جميع المجالات. يَعرف معظم الفريق المسؤول عن الموقع حق المعرفة أنَّه يجب أن يكون الموقع سريعًا، وسهل الوصول إليه، وسهل الاستخدام، ويظهر في أعلى نتائج البحث ...إلخ. كما أنَّهم يمضون كل ساعة من عملهم في فحص الموقع وسيكتشفون بالتأكيد جميع ما أشرتُ إليه ويحتمل أنَّهم يعرفون الحل أيضًا ولا تظنَّنَّ أنَّهم لم يفكروا بتلك المشكلات قط. ما هي الأشياء المفيدة التي يفترض أن تقدمها مراجعات المواقع؟ إن كان الفريق المسؤول عن الموقع يعلم الجواب مسبقًا فهذا يدعنا أمام السؤالين التاليين: ما هي الأشياء المفيدة التي يجب أن تقدمها مراجعات الويب؟ ولماذا لم يعمل الفريق على إصلاح المشكلات إن كان يعرفها ويعرف الحلول المقابلة لها مسبقًا؟ لم يسبق لي أن قابلت فريقًا يتكاسل عن إصلاح المشكلات التي تعترض مواقعهم أو يغض الطرف عنها؛ يُعزى السبب دائمًا لبعض الأمور الخارجية التي تحد من قدرتهم والتي لا يمكنهم التغلب عليها. عندما انظر إلى موقعٍ فلا أرى التصميم والكود والمحتوى فقط بل ألاحظ وجود القيود التي تعترض الشركة أو التي تتصف بها، وأرى كيف تقيِّم وتتفهم الشركة العالم الرقمي، وأرى كيف تبدو من الداخل وكيف لا تعي حاجات المستخدم. الموقع الإلكتروني هو كنافذة يطل على جوهر الأعمال، كما يكشف كل عيوبها ونقاط ضعفها للعالم. ركز على قصور الأعمال لا على فريق الموقع يجب أن تركز المراجعة الجيدة على النقائص والعيوب في الموقع لا على الأشياء الجمالية والظاهرية فقط، ويجب أن تركز أيضًا على ضعف الأعمال لا على فريق الموقع بالإضافة إلى لفت الانتباه للمشاكل الأخرى مثل تلك المتعلقة بهندسة المعلومات. يجب أن يُذكر فيها أنَّه يجب البدء بحل تلك المشكلات حتى يكون الموقع سهل الاستخدام. ربما تودُّ الإشارة إلى ضعف الأداء، عند الحديث عن الأداء، والذي قد يكون بسبب انشغال الفريق بمشاريع أخرى. عندما تواجه مشكلة مثل الافتقار إلى سهولة الاستخدام فلا تشير إلى المشكلة وحلها فحسب بل حاول شرح الحاجة لإنشاء معايير ثابتة لفحص سهولة الاستخدام، وأشر إلى القيود والأشياء التي يُسبِّب وجودها تلك المشكلة. بعبارة أخرى، لا تصف المشكلة والحل فقط بل سلِّط الضوء على الأشياء الرئيسيَّة التي أدت إلى حدوثها. تحديد المشكلات الأساسيَّة والمهمَّة ربما لا تستطيع تحديد درجة أهمية المشكلات وأولويتها دومًا لذا استعن بأحد مصممي الويب فهو يستطيع مساعدتك وقد يحدِّد لك سبب وجود تلك المشكلات التي تحتاج إلى ذكرها. مع مرور الوقت يمكنك أن تخمن الجواب دون سؤال أحد عنه؛ لقد رأيت الكثير من المشكلات التي لها المسببات ذاتها مرات عديدة بدءًا من واجهة سيئة التصميم أنشأها أحد المختصين بمجالات أخرى مثل الطباعة وحتى كتابة المحتوى من قبل شخص ليس لديه أي خبرة بالكتابة في مواقع الويب، لذا أستطيع الآن معرفتها بسهولة بمجرد النظر إلى أي موقع. رأيت مرارًا وتكرارًا مشكلات مثل نقص الاستثمار وضعف القيادة والعداء بين أعضاء الإدارة وغيرها والتي يجب تحديدها ضمن المراجعة. الدور الحقيقي لمراجعات المواقع قد تحوي بعض مراجعات المواقع على لهجة غير ودودة وأنا أتفهم سبب ذلك. على أي حال، إن كان لدي الخيار بين كتابة مراجعة أو إجراء اختبار مع المستخدمين للموقع فسأختار الخيار الثاني دومًا، ومع ذلك فأنا أعتقد أنَّ المراجعة إن كتبت بشكل صحيح مع أخذ الملاحظات السابقة بعين الاعتبار فسيكون لها تأثير كبير مشابه للخيار الأخير. سيساعدك اختبار سهولة الاستخدام على تحديد المشكلات وإصلاح بعض الأشياء السطحية ولكنَّها نادرًا ما تُظهر ما هي مسببات المشكلة. من المفيد الحصول على وجهة نظر خارجيَّة إن كان المراجع (الناقد) سيلقي نظرة عميقة نحو الجذور مبتعدًا عن القشور السطحية. ترجمة -وبتصرف- للمقال Website Reviews: Why they suck and how to make them better لصاحبه Paul Boag. حقوق الصورة البارزة محفوظة لـ Freepik
  4. أن تكون مبدعًا فهو أمر عميق شخصيًا. حيث يبدو وكأنك تضع قطعًا من ذاتك في كل عمل تقوم بإبداعه. وبالنسبة لكثير من المصممين، فإن العمل يكون حقًا نابعًا من الحب. إن فكرة مشاركة العميل بتصميم جديد مميز هو أمر مثير. فإن كنت متحمسًا للعمل الذي قمت به للعميل، يجب عليه أن يشعر بنفس الشعور بشأن ما يراه. لسوء الحظ فإن الأمور لا تسير دائمًا بهذه الطريقة. قد لا يرى العملاء الأمور بنفس الطريقة التي تراها بها أنت. وأحيانًا قد تكون تعليقاتهم بنّاءة؛ وأحيانًا قد تكون قاسية بعض الشيء. وفي كلتا الحالتين، فإن رؤية العمل الذي بذلت فيه قلبك وروحك لإبداعه دون أن يتم تقييمه بشكل مناسب هو أمر سيء. يتعرض المصمم بشكل دائم لتلقي ردود فعل سلبية وغير سارّة. لذا دعونا نلقي نظرة على بعض الطرق التي يمكننا فيها التعامل مع ردود الفعل تلك بشكل أفضل. ردود الفعل تلك غير شخصية إن تلقي الانتقادات يمكن أن يكون أمرًا صعبًا للغاية - وخاصة بالنسبة للمصممين الذين لا يتمتعون بالخبرة. عندما يقول أحدهم بأنه لم يعجب بما قمت به، فمن الممكن أن يجعلك ذلك تشعر بالفشل. لقد أمضيت ساعات من العمل الجاد ليأتي هذا الشخص الذي تراه غير مؤهل لنقد تصميم ويقوم بنقد أفكارك. في الحقيقة جميعنا نواجه هذا الأمر. ففي حياتي المهنية، أستطيع أن أذكر الحالات التي شعرت فيها كما لو أني أسوأ مصمم ويب في العالم. عليك أن تبدأ بالتفكير بأن الآخرين ليس لديهم ثقة بقدراتك لإنجاز هذه المهمة. عليك أن تبدأ بالتساؤل فيما إذا كانوا على حق أم لا. أحيانًا تولي عقولنا الكثير من الأهمية للمواقف أكثر مما تستحق في الواقع. وفي معظم الحالات، فإنه يتم نقد التصميم – ولا يتم نقدك شخصيًا. في الواقع، قد يكون الشخص الذي تتعامل معه يحترمك بشدة ولا يرغب بإيذائك بأي شكل من الأشكال. لكنه في الوقت ذاته صادق بآرائه - سواء اتفقت معها أم لا. كلما تعاملت أكثر مع مواقف كهذه يصبح من الأسهل بالنسبة إليك تقسيم النقد الموجه للتصميم بشكل أفضل. قد تشعر بالإحباط نتيجة إجراء بعض التغييرات، ولكن يجب ألا يجعلك ذلك تشعر بالفشل. تذكر، حتى أفضل الرياضيين لا يتمكنون من الفوز من المرة الأولى. فهم بحاجة ليقوم ببعض التعديلات ومن ثم يعودون للعبة بشكل أقوى. وينطبق الأمر ذاته على التصميم. العمل ليس طفلك من الطبيعي أن تكون صاحب ملكية ما قمت بابتكاره - حتى إن كنت قد عملت عليه لصالح شخص آخر. ولذا فإننا نشعر بشعور سيء عندما لا يشعر شخص ما بسعادة غامرة تجاه التصميم مثلنا. وفي الحقيقة، يمكن اعتبار ذلك ميزة جيدة حيث تظهر مدى الرعاية التي توليها لعملك. ومن ناحية أخرى، فإن ملكية العمل الذي تقوم به لصالح شخص تعود إليه في النهاية. لذلك لذا لا تنسى حين تشعر بخيبة أمل بأنهم يمتلكون الحق في إبداء استيائهم من جزء معين في التصميم. في بعض الأحيان قد يكون لدى العميل اقتراح أو طلب ترى بأنه سيدمر مفهوم التصميم بأكمله. شخصيًا، أجد أنه من الصعب تقبل هذا الأمر. ولكن هناك بعض الطرق التي يمكن استخدامها للتعامل مع حالة كهذه. قم أولًا بتوضيح رأيك. اشرح بهدوء أسبابك التي تدعوك لاتخاذ بعض الخيارات المحددة للتصميم. لقد تم اختيارك بسبب خبرتك لذا فإنك تمتلك الحق في التعبير عن رأيك المهني. أحيانًا يكون ذلك كافيًا لتساعد العميل في رؤية الأمور من وجهة نظرك، أو لتساعده في إيجاد حل وسط. إن لم تجدي تلك الطريقة نفعًا، عليك أن تقوم ببساطة بما يطلبه منك العميل مستخدمًا أفضل القدرات لديك. الأمر ليس بسيطًا كما يبدو. فعندما تكون على يقين من أن التغيير سيكون له تأثير سلبي على التصميم، سيكون من الصعب عليك أن تشعر بما يكفي من الحماس للقيام بالتعديل. لذلك فإنك تحتاج لتذكير نفسك بأنك تعمل لصالح عميلك - وليس العكس. ابذل قصارى جهدك وقم بتنفيذ العمل بصدق وبأفضل طريقة ممكنة. حاول أن تظهر بأنك على استعداد لتقوم بمحاولة القيام بذلك بشكل مهني حيث سيكون ذلك محل تقدير كبير. إنه جزء من عملك إن قمت بتوظيف شخص لإعادة تصميم مطبخك، فإنك سترغب في التعبير عن رأيك بشأن رؤيتك للمطبخ بعد التصميم. قد يكون هناك بعض الجوانب التي تريد تغييرها أثناء ذلك العمل، وبالتالي فإن ردود فعلك هي تأثير جانبي طبيعي. وبتلك الطريقة يجب علينا التعامل مع الموضوع. عندما تتعلم قبول النقد كجزء من العمل في التصميم، ستكون أفضل بكثير في التعامل معه. إن مراقبة الأمور المختلفة التي يرغب بها الأشخاص الآخرون يمكن أن يكون موردًا قيّمًا في مشاريعك المستقبلية. ستصبح مستمع أفضل وستصبح أكثر تركيزًا على وجهة نظر العميل. إن تعلم كل ذلك يمكن أن يجعلك مصمم أفضل. في المرة القادمة التي تتلقى فيها ردود فعل سلبية، فكر بأنها ليست إهانة ولكنها فرصة للتطور. ترجمة –وبتصرّف- للمقال Not Taking Negative Feedback from a Client Too Personally لصاحبه Eric Karkovack حقوق الصورة البارزة محفوظة لـ Freepik
  5. سنتعلم في هذا الدرس – المكوّن من أجزاء - كيفية إنشاء هاتف محمول واقعي باستخدام الأشكال والتدرجات البسيطة في إلستريتور. وسنقوم باستخدام لوحات المحاذاة Align، مستكشف المسار Pathfinder والحدود Stroke بالإضافة إلى دمج العناصر للحصول على النتيجة النهائية. لنبدأ! تبدو النتيجة النهائية على النحو التالي. أنشئ ملفًا جديدًا 1: افتح برنامج إلستريتور ثم اضغط على Ctrl+ N لإنشاء ملف جديد. اختر Pixels من القائمة المنسدلة Units، أدخل 1308 في حقل العرض width و876 في حقل الارتفاع height ثم انقر على زر Advanced لفتح الخيارات المتقدمة. اختر RGB، Screen (72ppi)، وتأكّد من إلغاء تأشير مربّع الخيار Align New Objects to Pixel Grid قبل أن تنقر على OK. أنشئ الشكل الأساسي للهاتف 2: باستخدام أداة رسم المستطيلات Rectangle Tool (M) قم بإنشاء مستطيل بأبعاد 247 × 222 بكسل. بعد ذلك أظهر المساطر عبر المسار View> View Rulers> Show Ruler أو باستخدام مفتاحي الاختصار Ctrl +R، ثم قم بسحب دليل guide عمودي من المساطر (إذا كانت الدلائل مقفلة، إذا اذهب إلى View> Guides> Lock Guides أو اضغط على Ctrl +Alt + ; حدّد المستطيل الأحمر، اضغط على Shift، ومع الاستمرار بالضغط انقر على الدليل الذي أنشأته للتو، أفلت المفتاح Shift ثم انقر على المستطيل الأحمر مجددًا لتثبيت موضعه. بعد ذلك افتح لوحة المحاذاة Align عبر المسار Window> Align وانقر على زر Horizontal Align Center. الآن اختر أداة إضافة النقاط Add Anchor Point (+) وانقر على النقطتين المميزتين بالأزرق. بعد ذلك قم بتحديد النقطة العلوية الوسطى وحرّكها إلى الأعلى بمقدار 50 بكسل، ثم اضغط على زر Covert selected anchor points to smooth من شريط الخصائص Properties. بعد ذلك قم بتعديل مقابض النقاط التي قمت بتحريكها لتصبح بالشكل الموضّح في الصورة التالية مستخدمًا أداة التحديد المباشر Direct Selection Tool (A) والمفتاح Shift. الآن حدّد النقطة السفلية الوسطى وحرّكها بمقدار 12 بكسل إلى الأسفل. وأخيرًا اختر أداة تحويل النقاط Convert Anchor Point Tool (Shift +C)، انقر على النقطة التي قمت بتحريكها للتو واسحبها إلى اليسار أثناء الضغط على المفتاح Shift. في النهاية يجب أن يصبح العنصر الجديد كما موضّح في الصورة الأخيرة أدناه. 3: قم بإنشاء مستطيل بإبعاد 215 × 220 بكسل باستخدام أداة رسم المستطيلات (M) وضعه في الموضع الموضّح أدناه. الآن حدد العنصر الأحمر الذي قمت بإنشائه في الخطوة 2، اضغط على Shift، انقر على المستطيل الأزرق الذي أنشأته في هذه الخطوة، أفلت المفتاح Shift، وانقر على العنصر الأحمر مجددًا لتثبيت موضعه، ثم انقر على زر Horizontal Align Center من لوحة المحاذة Align. حدد النقطة العلوية اليسرى للمستطيل الأزرق وحرّكها بمقدار 15 بكسل إلى اليسار، ثم حدد النقطة العلوية اليمنى وحرّكها بمقدار 15 بكسل إلى اليمين: 4: باستخدام أدار رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 100 × 50 بكسل وبلون أسود، ثم ضعه في الموضع الموضّح أدناه. الآن حدّد العنصر الأزرق الذي قمت بإنشائه في الخطوة 3، اضغط على Shift، انقر على المستطيل الأسود الذي أنشأته في هذه الخطوة، أفلت المفتاح Shift، وانقر على العنصر الأزرق مجددًا لتثبيت موضعه، ثم انقر على زر Horizontal Align Center من لوحة المحاذاة. وبمساعدة الأداة Add Anchor Point Tool (+)، قم بإضافة نقطتي ربط باللون الأحمر للعنصر الأزرق. بعد ذلك قم بإزالة المستطيل الأسود ثم أعِد تحديد النقطتين التي أنشأتهما للتو وحرّكهما بمقدار 48 بكسل إلى الأسفل. استخدم الأداة Convert Anchor Point Tool (Shift +C) وانقر على النقطة السفلية اليسرى للعنصر الأزرق، ثم اسحب النقطة إلى اليمين بينما تضغط على المفتاح Shift. كرّر نفس الخطوات للنقطة السفلية اليمنى. بعد ذلك استخدم أداة إضافة النقاط (+) وقم بإضافة نقطة مميزة بالأحمر وحرَكها إلى الأعلى بمقدار 2 بكسل للحصول على الشكل الموضّح في الصورة الأخير أدناه. 5: بعد الانتهاء من تعديل الشكل الأزرق، قم بإعادة تحديد هذا الشكل واملأه باللون R=35، G=31، B=32. بعد ذلك حدد العنصر الأحمر واملأه بلون متدرّج خطي linear كما موضّح أدناه، ثم قم بإضافة حدّ بعرض 2 بكسل وبلون R=65، G=64، B=66. 6: باستخدام أداة رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 290 × 6 بكسل وبلون أحمر، ثم ضعه في الموضع الموضّح أدناه. حدّد الشكل الأسود الذي أنشأته في الخطوة 5 واعمل نسخة ثانية منه (Ctrl +C، Ctrl +F). ثم حدّد هذه النسخة من الشكل الأسود، اضغط على Shift ثم انقر على المستطيل الأحمر الذي أنشأته في هذه الخطوة. بعد ذلك افتح لوحة مستكشف المسار Pathfinder (Window> Pathfinder) وانقر على زر Intersect. استخدم أداة إضافة النقاط (+) لإضافة نقطة مميزة بالأصفر للعنصر الأحمر، ثم حرّك النقطة الجديدة بمقدار 70 بكسل إلى الأسفل. استعِن بالأداة Convert Anchor Point Tool (Shift +C) لتعديل شكل العنصر الأحمر ليصبح كالذي تراه في الصورة السادسة أدناه. بعد الانتهاء من تعديل شكل العنصر الأحمر، قم بتطبيق تدرّج خطي جميل كما موضّح في الصورة الأخيرة أدناه. 7: في هذه المرحلة يجب أن يبدو شكل الهاتف كالتالي: أنشئ زر التحكّم 8: ابدأ برسم دائرة بلون أحمر وبأبعاد 56 × 56 باستخدام الأداة Ellipse Tool (L)، ثم ضع هذه الدائرة في الموضع المناسب كما موضّح أدناه. املأ الدائرة باللون R=35، G=31، B=32 ثم قم بإضافة حدّ لها باللون R=167، G=169، B=172 وبسمك 3 بكسل. واصل تحديد هذه الدائرة ثم افتح لوحة الحدود (Window> Stroke) وانقر على أيقونة Align Stroke to Inside. بعد ذلك افتح لوحة المظهر (Window> Appearance)، انقر على زر Add New Stroke (يوجد هذا الزر على الزاوية السفلية اليسرى من لوحة المظهر). هذه الخطوة ستضيف حدًّا ثانيًا للدائرة. املأه باللون R=188، G=190، B=192 وغيّر سمك الحدّ إلى 1.5 بكسل. 9: حدد الدائرة التي أنشأتها في الخطوة 8 ثم اذهب إلى Object> Transform> Scale، قم بتأشير الخيار Uniform ثم أدخل القيمة 16 في حقل Scale، وانقر على Copy. لا تُلغِ تحديد الدائرة الجديدة وافتح لوحة المظهر (Window> Appearance) ثم قم بإزالة الحد ذي السُمك 3 بكسل لهذه الدائرة. بعد ذلك استبدل لون الحدّ الحالي باللون R=128، G=130، B=133 واستبدل لون التعبئة الحالي باللون R=209، G=211، B=213. تأكد من أنّ شكل الدائرة الناتج ما زال محدّدًا، افتح لوحة الحدود (Window> Stroke) وانقر على أيقونة Align Stroke to Outside. 10: باستخدام أداة رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 1.5 × 50 بكسل وبلون R=65، G=64، B=66. حدّد الدائرة التي أنشأتها في الخطوة 9، اضغط على Shift، انقر على المستطيل الذي أنشأته للتو، أفلِت المفتاح Shift، ثم انقر على الدائرة التي أنشأته في الخطوة 9 مجددًا لتثبيت موضعها. بعد ذلك افتح لوحة المحاذاة (Window> Align) وانقر على زر Horizontal Align Center، قم انقر على زر Vertical Align Center. حدّد المستطيل الذي أنشأته في هذه الخطوة من جديد ثم اذهب إلى Object> Transform> Rotate، أدخل القيمة 90 في حقل Angle وانقر على Copy. وأخيرًا، حدّد المستطيلين الذَين أنشأتهما في هذه الخطوة وقم بإخفائهما خلف الدائرة التي أنشأتها في الخطوة 9. 11: باستخدام أداة رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 14 × 9 بكسل وبلون R=199، G=190، B=192. حدد النقطة العلوية اليسرى للمستطيل الجديد وأزِلها. ثم حدد النقطة العلوية اليمنى وحرّكها بمقدار 7 بكسل إلى اليسار. ضع المثلث الجديد في الموضع المناسب كما موضّح في الصورة الثالثة أدناه. باستخدام أداة إضافة النقاط (+) انقر على مركز الجزء السفلي من المثلث ثم حرّك النقطة الجديد بمقدار 5 بكسل إلى الأعلى. بعد ذلك اسحب دليلًا أفقيًا من المساطر. حدّد الدائرة التي أنشأتها في الخطوة 9، اضغط على مفتاح Shift، انقر على الدليل الأفقي، أفلِت المفتاح Shift، ثم انقر على الدائرة التي أنشأتها في الخطوة 9 مجددًا لتثبيت موضعها. بعد ذلك افتح لوحة المحاذاة (Window> Align) وانقر على زر Vertical Align Center. الآن أعِد تحديد الشكل الأبيض الذي أنشأته في هذه الخطوة، اختر أداة التدوير Rotate Tool (R)، اضغط على المفتاح Alt وانقر على نقطة التقاطع للدليلين. في مربّع الحوار Rotate، أدخل الزاوية 90 في حقل Angle وانقر على Copy، ثم اضغط على Ctrl +D مرّتين للحصول على النتيجة الموضّحة في الصورة السادسة أدناه. 12: حدّد الدائرة التي أنشأتها في الخطوة 8 واذهب إلى Object> Transform> Scale. قم بتأشير الخيار Uniform وأدخل القيمة 95 في حقل Scale وانقر على Copy. حرّك هذه النسخة إلى المقدمة (Ctrl +Shift+ [)، املأها بتدرّج قطري radial كما مبيّن أدناه، ثم احذف الحد منها. بعد ذلك غيّر قيمة Blending Mode للدائرة الناتجة إلى Soft Light. عند هذه الخطوة، يجب أن يبدو شكل الهاتف كما مبيّن في الصورة أدناه. ترجمة- بتصرّف - للمقال How to create a Realistic Cell Phone لصاحبه Bao Nguyen.
  6. سنقوم برسم تصميم ثلاثي الأبعاد بنمط Isometric لرمز الوجه المبتسم باستخدام برنامج انكسكيب. ولنستطيع الرسم بشكل صحيح ودقيق سيتوجب علينا رسم مخطط مسطح للتصميم للعمل انطلاقًا منه، ولذلك رسمت هذا المخطط. وبما أننا سنرسم بنمط الإيزومترك فسيكون علينا تحضير المكعب الأساسي الذي سنقوم بنسخه وتوزيعه للحصول على الشكل المطلوب. افتح برنامج الإنكسكيب ثم كبّر منظور العرض إلى القياس الطبيعي عبر القائمة View > Zoom > Zoom1:1 استخدم أداة رسم النجمة والمضلعات، عدّل عدد الزوايا في شريط أدوات الأداة إلى 6 لنحصل على مضلع سداسي (مسدس) مع اختيار رسم شكل المضلع بدل النجمة ثم ارسم المسدس مع الاستمرار بالضغط على Shift+Ctrl أثناء سحب الشكل باستخدام الفأرة وذلك لنحصل على شكل مسدس مركزه نقطة بداية السحب وليكون بمحاذاة عمودية مثالية. تأكد من جعل الشكل كما في الصورة تمامًا. سنحتاج إلى تحديد ميزة المطابقة لتصبح عملية التصميم أكثر سهولة ودقة. في حال لم يكن شريط المطابقة Snap موجودًا، قم بإظهاره عبر الذهاب إلى القائمة View > Show/Hide > Snap Controls Bar وتأكّد من وجود إشارة التفعيل بجانب Snap Controls Bar. ثم فعّل خيار المطابقة الموضح في الدائرة الحمراء وهو خيار Snap cusp nodes. استخدم أداة رسم منحنيات البيزير (يقابلها أداة القلم في برامج أدوبي المختلفة) ثم ارسم خطًّا مستقيمًا من إحدى زوايا المسدس إلى الزاوية المقابلة مستعينًا بميزة المطابقة Snap. والآن ارسم خطًّا آخر من زاوية أخرى. وأخيرًا ارسم خطًّا آخر عموديًّا من الزاوية العلوية إلى السفلية. ارسم باستخدام ذات الأداة شكلًا رباعي الأضلاع يمتد من الزوايا العلوية الثلاث للمسدس ومع نقطة التقاط الخطوط السوداء في المركز. وبما أن هذا الشكل الجديد ما يزال مُحدّدًا قم بإزالة لون الحدود وإضافة لون للتعبئة وليكن الأزرق بشكل مبدئي. ارسم الجانب الأيمن للمكعب عبر رسم شكل ممتد بين النقطة اليمنى العلوية والسفلية والنقطة السفلية إلى نقطة التقاء الخطوط في مركز الشكل. أزِل لون الحدود وأضِف لون تعبئة مختلف وليكن الأخضر. وأخيرًا ارسم الجانب الأيسر من ما بقي من شكل المسدس. وبنفس الطريقة أزِل لون الحدود ولوّن هذا الجانب باللون الأصفر. استخدم أداة التحديد والتحويل Select and Transform ثم حدّد الجانب العلوي ثم اضغط باستمرار على مفتاح Shift وانقر على الجانب الأيمن واستمر بالضغط على مفتاح Shift ثم انقر على الجانب الأيسر وأفلت مفتاح Shift وبذلك يكون قد تم تحديد الجوانب الثلاثة الملونة بدون تحديد شكل المسدس والخطوط المتقاطعة الموجودة تحت أشكال هذه الجوانب. اجمع هذه الأشكال في مجموعة واحدة عبر النقر على خيار Group في شريط الأدوات أو من خلال الاختصار Ctrl+G. حرّك مجموعة الأشكال هذه بعيدًا عن الأشكال الأساسية التي تحتها. احذف الأشكال الأساسية المستخدمة لرسم المكعب وهي شكل المسدس بالإضافة إلى الخطوط السوداء المتقاطعة. حدّد مجموعة المكعب ثم ألغِ التجمّع عبر الخيار Ungroup في شريط الأدوات أو من خلال الاختصار Shift+Ctrl+G وذلك لنقوم بإعادة تلوين جوانب المكعب بشكل صحيح. حدّد الجانب العلوي ثم لوّنه باللون الأصفر الفاتح ذو القيمة RGBA تعادل FFE680FF. والجانب الأيسر بلون أصفر فاقع بقيمة FFCC00FF. وأخيرًا الجانب الأيمن بلون أصفر داكن بقيمة AA8800FF. قم بجمع الجوانب مجدّدًا عبر الاختصار Ctrl+G أو من خيار Group في شريط الأدوات. في تصميمنا هذا لم نحدّد حجم التصميم أو الصفحة ولا أحجام المكعب وباقي الأشكال وذلك لأننا لا نقوم بتصميم محدّد بل الهدف من هذا التصميم هو تعلّم الرسم بتقنية Isometric لذلك قد تكون جوانب الصفحة ظاهرة وهو ما قد يشوش عملية التصميم في هذه الحالة لذا سنقوم بإزالة هذه الحدود عبر الذهاب إلى القائمة File > Document Properties أو من خلال الاختصار Shift+Ctrl+D. أزِل تفعيل خيار Show Page Border ثم أغلق نافذة الخصائص. سنقوم الآن بالبدء بعملية رسم التصميم المطلوب، وعبر الاستعانة بمخطط التصميم الأساسي في بداية الدرس سنقوم بالبدء برسم الجزء الأيسر من حدود الوجه. حدّد شكل المكعب ثم ضاعفه عبر الاختصار Ctrl+D ثم اسحب الشكل الجديد للأعلى مستعينًا بمزايا المطابقة لوضع الشكل الجديد بشكل مطابق فوق الشكل الأول. ضاعف الشكل الأخير عبر الاختصار Ctrl+D مجدّدًا ثم اسحبه بذات الطريقة نحو الأعلى أيضًا. من خلال المخطط فإن الجانب الأيسر المستقيم للوجه وكذلك بقية الجوانب بحجم خمس مكعبات. لذلك تابع مضاعفة الأشكال ورفع النسخ الجديدة للأعلى حتى يصبح عدد المكعبات خمسة. ضاعف الشكل الأخير ثم حرّكه بمقدار مكعب للأعلى وبمقدار مكعب أيضًا لليمين وذلك بحسب المخطط مع الاستعانة بمزايا المطابقة المفعلّة التي ستحقق مطابقة تامة للزوايا في تحريك الأشكال. ضاعف الشكل الأخير وحرّك النسخة الجديدة للأعلى. ضاعف النسخة الأخيرة وحرّكها للأعلى واليمين. كرّر ذات العملية الأخيرة تمامًا. ضاعف المكعب الأخير وحرّك النسخة لليمين (لاحظ أننا وبالعودة إلى شكل مخطط التصميم فإننا نتبع إرشادات المخطط بحذافيرها). ضاعف الشكل الأخير ثم حرّكه للأعلى واليمين. ضاعف هذا الشكل الأخير أربع مرّات إضافية وحرّكها لليمين في كل مرّة لتحصل على خمسة مكعبات في صف واحد. والآن اصنع نسختين جديدتين وضعهما كما في الصورة وبحسب المخطط. واصنع نسخة أخرى وحرّكها للأسفل واليمين. وواحدة أخرى بعد بذات الطريقة والاتجاه. اصنع نسخة عن الشكل الأخير ثم حرّكها للأسفل. هنا ستلاحظ أن الشكل الجديد قام بتغطية الشكل السابق ما يجعل المنظور غير متناسق ومنطقي. ولتصحيح هذا الوضع حدّد الشكل الجديد ثم أرسله للأسفل عبر الخيار Lower Selection to Bottom أو من خلال المفتاح End من لوحة المفاتيح، وبذلك سيتم إرسال هذا الشكل أسفل الشكل السابق ويصبح منظور التصميم منطقيًا وصحيحًا. اصنع نسخة جديدة وحرّكها للأسفل واليمين. اصنع نسخة جديدة وحرّكها للأسفل. ستلاحظ تكرار عملية الترتيب غير الصحيح للأشكال في هذه المرحلة وذلك بحسب شكل المكعب وترتيب النسخ الجديدة. مجدّدًا قم بإرسال النسخة الجديدة للأسفل عبر الخيار Lower Selection to Bottom أو من خلال المفتاح End من لوحة المفاتيح. كرّر هذه العملية مع إرسال النسخة الجديدة للأسفل في كل مرّة حتى يصبح لدينا خمسة مكعبات فوق بعضها. حرّك نسخة جديدة من المكعب الأخير للأسفل واليسار ولاحظ أن عملية التحريك الأخيرة توحي بأن المكعب الجديد موجود أمام المكعب السابق بصورة مختلفة عن نسق سير التصميم وهذه هي روعة تصميم الإيزومترك حيث أن مجالات الإبداع فيها كبيرة وتسمح لنا برسم تصاميم محيّرة للعقل وجميلة في نفس الوقت ولكننا هنا لسنا بصدد تصميمٍ من هذا النوع لذلك سنقوم في الخطوة التالية بتصحيح الوضع. من جديد أرسل الشكل الأخير للأسفل عبر الخيار Lower Selection to Bottom أو من خلال المفتاح End من لوحة المفاتيح. والآن أصبح شكل التصميم صحيحًا ومطابقًا للمخطط الأساسي. حرّك نسخة جديدة للأسفل ثم أعد ترتيبها أسفل بقية الأشكال بذات الطريقة. تابع الرسم بحسب المخطط وبذات الأسلوب حتى تتم رسم دائرة حدود الوجه كاملًا. وأخيرًا ارسم مكعبات جديدة مع تغيير ألوانها إلى تدرجات الرمادي وضعها بحسب المخطط مكان العينين والفم المبتسم. يمكنك إضافة خلفية تدرج دائري بسيطة لإنهاء التصميم بشكل بسيط وناعم. أو يمكنك تعديل التصميم للحصول على الشكل التالي أيضًا. هذه هي إحدى طرق رسم الإيزومترك في الإنكسكيب وهناك طرق أخرى لرسم المكعب الأول في التصميم بتقنية الإيزومترك وهي: طريقة ثانية لرسم مكعب إيزومترك في الإنكسكيب: تعتمد هذه الطريقة على تجهيز إعدادات المستند بشكل يظهر فيه شبكة إيزومترك جاهزة وصحيحة ليتم استخدامها مع تفعيل مزايا المطابقة لرسم المكعب. افتح ملفًّا جديدًا في الإنكسكيب ثم اذهب إلى القائمة File > Document Properties أو من خلال الاختصار Shift+Ctrl+D ستقوم بفتح نافذة خصائص المستند. افتح تبويب Grids. ثم اختر من قائمة Creation الخيار Axonometric grid ثم اضغط على New بجوارها لتظهر شبكة مضلعة مع خصائص هذه الشبكة وهنا يمكنك اختيار حجم هذه الشبكة من خيار Spacing Y كما يمكن تحديد دمج خطوط الشبكة لكل عدد محدد من الخلايا. والآن استخدم أداة رسم منحنيات البيزير مع الاستعانة بمزايا المطابقة لرسم الجانب العلوي من المكعب كما في الصورة. وباستخدام ذات الأداة ارسم الجانب الأيمن. ثم الجانب الأيسر. أزِل ألوان الحدود من الأشكال الثلاثة ثم لوّن الجوانب الثلاثة بألوان مناسبة. يمكنك إزالة تفعيل ظهور الشبكة من خلال خصائص المستند وتبويب Grids ثم إزالة تفعيل Enable أو يمكن الإبقاء على هذه الشبكة لسهولة رسم تصاميم الإيزومترك بالاستعانة بها. طريقة ثالثة لرسم مكعب إيزومترك في الإنكسكيب: ارسم باستخدام أداة رسم النجمة والمضلعات ذات شكل المسدس وبذات الطريقة المشروحة في هذا الدرس ولوّنه بلون أزرق مع إزالة لون الحدود واجعل مستوى التعتيم Opactiy عند 50%. مع تفعيل مزايا المطابقة المستخدمة في هذا الدرس تحديدًا قم بمضاعفة هذا الشكل وتحريكه إلى الجانب السفلي الأيسر من الشكل الأساسي. ضاعف الشكل الأخير وحرّكه إلى الجهة اليمنى تمامًا كما في الصورة. اصنع نسخة جديدة وضعها في مركز هذه الأشكال كما في الصورة. ضاعف الشكل الأوسط ثم حدّده مع الشكل العلوي باستخدام مفتاح Shift ثم اذهب إلى القائمة Path > Intersection ليتم قص الجزء المشترك بين الشكلين وهو في هذه الحالة الجانب العلوي من المكعب المطلوب. لوّن هذا الشكل الأخير بلون مختلف لتمييزه كجانب علوي. ضاعف مجدّدًا الشكل الأوسط ثم حدّد النسخة الأخيرة مع الشكل الأيسر ثم اذهب إلى القائمة Path > Intersection ليتم قص الجانب الأيسر للمكعب. لوّن هذا الجانب بلون مناسب بحسب اللون الأول. الآن لست مضطرَّا إلى مضاعفة الشكل الأوسط لأنه لم يتبقَ إلّا جانب واحد. حدّد الشكل الأوسط والشكل الأيمن ثم اذهب إلى القائمة ذاتها لقص الجانب الأيمن للمكعب. لوّن الجانب الأيمن باللون المناسب وبذلك نحصل على المكعب المطلوب. إن مجالات التصاميم الإيزومترك كبيرة وواسعة ولا يحدّها إلّا خيال المصمم فقط، وفي هذا الدرس تعلّمنا أساسيات الرسم بهذا الأسلوب وطرق رسم المكعبات المختلفة وما عليك إلا متابعة العمل الجاد لتطوير مهاراتك في رسم تصاميم إبداعية بهذا الأسلوب.
  7. نأتيكم بدرس جديد من سلسلة دروس تعلم التصميم باستخدام مجموعة من الصورة والتقنيات على برنامج Photoshop، مستوى الدرس متوسط وبه تقنيات جد ممتازة للتعلم. ستكون نتيجة درسنا اليوم كما في الصورة التالية: قبل البدء أدعوكم لتحميل الحزم المرفقة مع الدرس (الرابط) افتح مشروعًا جديدًا على Photoshop بالإعدادات التالية: 1920x1080pixels Resolution 720Dpi Color Mode RVB8bit باستعمال أداة الطلاء (G) نلوّن الخلفية باللون #acbfd7. في طبقة جديدة Ctrl+Shift+N وباستعمال أداة الفرشاة (B) بالخصائص التالية : الحجم 500-600 بكسل الشفافية: 0% التدفق -Flow- 30% : ثم نرسم باللون #3a5475 الشكل : أيضا باللون #9acbe7 نجلب الصورة التالية للمشروع. من القائمة Menu > Edit > Free Transform>Distort نغير شكل الصورة في طبقة جديدة وبأداة الفرشاة باللون الأبيض نرسم دائرة في أعلى الصورة ثم نضيف صورة أخرى للمشروع، كما هو مبين: نزيل بأداة الممحاة (E) أطراف الصورة نذهب إلى القائمة : Menu>Filter>Blur>Gaussian Blur نغير خصائص الدمج إلى القيمة Screen نجلب صورة البناية التالية للمشروع باستخدام أداة التحديد Lasso Tool (L) نحدد البناية ثم نضغط الاختصار Ctrl+j للحصول على طبقة بها الجزء المحدد فقط بنفس الطريقة مع باقي صور البنايات حتى نحصل على صورة مشابهة للصورة ندمج طبقات البنايات عن طرق تحديد الطبقات واستعمال الاختصار Ctrl+E ثم من القائمة : Menu > Image >Adjustments > Hue/Saturation و Menu>Filter>Blur>Gaussian Blur ننسخ طبقة البنايات Ctrl+J ثم Ctrl+T لتغيير حجمها – نكبّر حجم الطبقة قليلا- نجلب صورة العربات الحربية للمشروع. ثم Menu>Filter>Blur>Gaussian Blur و Menu > Image >Adjustments > Hue/Saturation في طبقة جديدة Ctrl+Shift+N وباستعمال أداة الفرشاة (B) بالخصائص التالية : الحجم 20 بكسل الصلابة -Hardness- 100%: الشفافية: 60% التدفق -Flow- 100% : ثم نرسم بالألوان #ffdf00، #9a8b48، #ff9c04، #ff0404، #fffff أضواء البنايات كما في الصورة – الأمر سيتطلب بعض الصبر- نذهب إلى القائمة Menu>Filter>Blur> Motion Blur نخفض قيمة الشفافية إلى 56 نجلب صورة الأرضية و من القائمة Menu > Edit > Free Transform>Distort نغير في شكلها : إلى Menu>Filter>Blur>Gaussian Blur في طبقة جديدة، باستعمال الفرشاة باللون #6a82a2 نرسم خطًا أفقيًا ثم باللون #363d45 نستعمل أداة ( Clone Stamp Tool (S لأخذ عينة من منطقة ولصقها في منطقة أخرى (لأن قبعة الجندي غير مكتملة) بأداة الممحاة نزيل الشوائب حتى تبدو القبعة مكتملة . نذهب إلى Menu > Layer >New Adjustments Layer > Hue/Saturation في طبقة جديدة Ctrl+Shift+N وباستعمال أداة الفرشاة (B) بالخصائص التالية : الحجم 300-400 بكسل الصلابة -Hardness- 0%: الشفافية: 60% التدفق -Flow- 30% : نرسم باللون الأسود في المكان باللون الأحمر في طبقة جديدة وبنفس الطريقة نلون على مستوى ركبتي الجندي نغيّر خصائص الدمج إلى القيمة Overlay ننسخ الطبقة نضيف الصورة للمشروع ومن Menu > Edit > Free Transform>Distort نغير من شكلها. نُغيّر خصائص الدمج إلى القيمة Color Dodge مع استعمال الممحاة لإزالة الأطراف في طبقة جديدة وبفرشاة ذات لون أبيض نرسم : نُغيّر خصائص الدمج إلى القيمة Soft Light نفس العملية على مستوى الركبتين مع خصائص الدمج إلى القيمة Overlay في طبقة جديدة باللون الأبيض بفرشاة نضفي بعض اللون فوق السيارة والجندي ونخفض من قيمة الشفافية نجلب الصورة نغيّر خصائص الدمج إلى القيمة Screen ننسخ طبقة الصورة – الضوء – ونموضعها في أماكن مختلفة حتى تعطينا منظر أضواء البنايات لتغير لون الضوء ننسخ إحدى الصور ونغير خصائصها عن طريق Menu > Image >Adjustments > Hue/Saturation باستخدام نفس الطريقة يمكننا الحصول على ألوان مختلفة في طبقة جديدة مع أداة الفرش باللون #fa7f00 نغير خصائص الدمج إلى القيمة Color ثم نقوم بجلب الصورة . نغير خصائص الدمج إلى القيمة Screen ننسخ الصورة ونضعها في أماكن أخرى كما هو مبين. في طبقة جديدة وبفرشاة باللون السابق (#fa7f00) نلون امتداد أضواء السيارات. مع تغيير خصائص الدمج إلى القيمة Color نضيف الصورة التالية للمشروع ونضعها في الأعلى : إلى القائمة Menu>Filter>Blur>Gaussian Blur نغيّر خصائص الدمج إلى القيمة Screen في طبقة جديدة من القائمة Menu>Filter>Render >Clouds باستعمال الاختصار Ctrl+T نكبّر من حجم طبقة السحب نذهب إلى القائمة Menu>Layer>Layer Mask>Hide All مما سيخفي جميع الطبقات ، ثم نحدد Mask بجانب الطبقة في نافذة الطبقات وباستعمال أداة الفرشاة (B) بالخصائص التالية : الحجم 420 بكسل الصلابة -Hardness- 0%: الشفافية: 50% التدفق -Flow- 40% : باللون الأبيض كما هو موضح نغيّر خصائص الدمج إلى القيمة Overlay نضيف الصورة التالية للمشروع: نغيّر خصائص الدمج إلى القيمة Lighten Color في طبقة جديدة نلون بالفرشاة ذات اللون #3e738c كما هو مبين نغيّر خصائص الدمج إلى القيمة Screen نذهب إلى القائمة Menu>Layer>New Layer Adjustment> Balance Color ثم Menu>Layer>New Layer Adjustment> Hue/Saturation في طبقة جديدة نلون بالفرشاة ذات اللون # ff1a00 كما هو مبين نغيّر خصائص الدمج إلى القيمة Overlay و الشفافية إلى 59 في طبقة أخرى باللون #fc8a39 ثم خصائص الدمج إلى القيمة Overlay في طبقة ثالثة باللون #f9c43d و #fecb69 ثم خصائص الدمج إلى القيمة Overlay ننسخ الطبقة ونزيحها قليلا ثم إلى القائمة Menu>Layer>New Layer Adjustment> Curves نغيّر خصائص الدمج إلى القيمة Overlay ننسخ الخط مرات كثيرة وفي كل مرة نزيحه حتى نعطي للصورة تدرجًا في الخطوط- تموجات- ننشئ نسخة تدمج جميع الطبقات عن طريق الاختصار Ctrl+Alt+Shift+E من القائمة Menu>Filter>Sharpen > Sharpen ترجمة -وبتصرّف- للدّرس: Réaliser l’effet de Battlefield 4 avec Photoshop لصاحبه Grafolog
  8. المخططات البيانية مهمة جدًّا لتتبع سير العمل ومدى النجاح والإخفاق في المشاريع، أو لشرح أفكار أو نظريات وحتى لتوضيح بيانات معينة، فمجالات استخدام المخططات البيانية واسع جدًّا. تقدّم البرامج والتطبيقات المختلفة أدوات خاصة لرسم هذه المخططات البيانية بأسلوب بسيط كحزم برامج المكتب وغيرها، ولكننا قد نحتاج في بعض الأحيان إلى رسم مخطط بياني أنيق وأكثر حيوية من المخططات البيانية البسيطة لجذب الانتباه أو لاتباع نمط معين في العرض التقديمي على سبيل المثال. وباستخدام برنامج أدوبي إليستريتور يمكننا رسم مخطط بياني مميز وحفظه بصيغة فكتور ما يمنحنا الحرية في تكبير حجم المخطط وتصغيره بحسب التصميم الذي نعمل عليه بالإضافة إلى سهولة تعديل الخطوط البيانية وتغيير ألوانها وإضافة أو إزالة بعض الخطوط بحسب الحاجة. كما نرى فهذا مخطط بياني لبيان عدد الزيارات التي تمت لمواقع إحدى الشركات وذلك لتتبع الأيام الأكثر زيارة والقيام بنشر أهم البيانات عليها للحصول على الاهتمام الأكبر من قبل الزائرين للموقع وخصوصًا إذا كان الموضوع يتعلق بإعلان معين. وسنقوم في هذا الدرس باستخدام الأدوات الأساسية مع خصائص المظهر وبعض التأثيرات كالظلال والتحريك البسيط للحصول على خطوط بيانية بارزة وحيوية أكثر من الخطوط العادية البسيطة مع إضافة تدرج لوني بسيط وجميل للخلفية في نهاية الدرس. افتح برنامج أدوبي إليستريتور وقم بفتح مستند جديد بحجم 800 في 800 وفي خيار Advanced قمت باختيار نمط ألوان RGB مع دقة 72ppi وذلك لأن تصميمي سيكون مخصصًّا للعرض على الشاشة وليس للطباعة. أمّا إذا كنت تنوي طباعة المخطط فيجب عليك اختيار نمط ألوان CMYK ودقة تصل إلى 300ppi للحصول على نتائج أفضل في الطباعة. من المهم أن تعوّد نفسك كمصمم على استخدام الشبكة Grid للعمل على التصاميم بدقة أكبر. لذلك قم بتفعيل إظهار الشبكات وفعّل ميزة المطابقة إلى الشبكات عبر الاختصارين ”+Ctrl و”+Shift+Ctrl أو عبر القائمتين التاليتين على التوالي: View > Show Grid View > Snap to Grid علينا الآن تخصيص إعدادات الشبكة عبر الذهاب إلى القائمة Edit > Preferences > Guides & Grid وفي حقل Grid ضع القيمة 10px في خانة Gridline every وذلك حتى يتم إعداد خطوط الشبكة كل 10 بكسل، ثم ضع القيمة 1 عند خانة Subdivisions وذلك لجعل خانة من خانات الشبكة بدون تقسيم. والآن سنرسم مربع الخلفية عبر استخدام أداة رسم المستطيلات Rectangle Tool ثم النقر نقرًا مزدوجًا على لوح الرسم لتفتح نافذة إنشاء المستطيلات. ضع القيم 800 للعرض والطول معًا وذلك لأننا جعلنا حقل الرسم بهذا الحجم عند إنشاء المستند ليغطّي كامل مساحة لوح الرسم. لوّن هذا المربع باللون الأحمر الداكن المائل للبني ذو القيمة اللونية 440000#. ولجعل المربع المرسوم يطابق لوح الرسم بشكل مثالي وخصوصًا أنهما بذات الحجم افتح لوحة المحاذاة Align من قائمة Window ثم اضغط على الأيقونة في الزاوية السفلية اليمنى من اللوحة واختر من القائمة خيار المحاذاة إلى لوح الرسم Align to Artboard وذلك لنقوم بمحاذاة المربع إلى لوح الرسم تحديدًا ثم حدّد المستطيل وحاذه إلى الوسط أفقيًّا وعموديًّا. افتح لوحة الطبقات Layers من قائمة Window ثم أنشئ طبقة جديدة من الأيقونة أسفل لوحة الطبقات ثم قم بالنقر بجانب رمز العين لطبقة الخلفية لوضع قفل للطبقة وبذلك لن نستطيع تعديل أو تحريك الخلفية ممّا يُسهّل علينا العمل لاحقًا فوق هذه الخلفية بسهولة. سنرسم الآن جدول المخطط البياني لذلك استخدم أداة رسم الشبكة المستطيلة Rectangular Grid Tool التي تجدها بالضغط المستمر على أداة الخط Line لتظهر بقية الأدوات المرتبطة في القائمة أسفل أداة الخط. انقر نقرًا مزدوجًا على لوح الرسم باستخدام هذه الأداة لتفتح نافذة أدوات إنشاء الشبكة. اختر حجم الشبكة ليكون بعرض 600 وارتفاع 400 بكسل وبعدد 10 أقسام أفقية و12 عمودية ثم اضغط OK. ضع الشبكة في النصف السفلي من المخطط لوضع العنوان وبيانات الشرح في الأعلى لاحقًا. حدّد هذه الشبكة ثم انقر بالزر الأيمن واختر Ungroup من القائمة. قم بحذف الإطار الخارجي المحيط بالشبكة عبر تحديده هو فقط والضغط على مفتاح Delete من لوحة المفاتيح . وسنقوم بجعل خطوط شبكة المخطط منقطّة وذلك عبر تحديد جميع الخطوط الطولية والعرضية ثم فتح لوحة الحدود Stroke، أبقِ على جميع الإعدادات الأولية على حالها ثم فعّل خيار Dashed Line ثم ضع القيمة 5px في dash وgap الأولى فقط وشاهد النتيجة بنفسك. يُعتبر dash هو الخط في التنقيط وgap هو الفجوة التي تلي الخط dash ويمكن تخصيص شكل تنقيط معيّن عبر تعبئة باقي الخانات للخطوط والفجوات المتبقية في لوحة الحدود ولكننا في هذه الحالة نريد أن يكون حجم الخط في التنقيط 5 بكسل مع وجود فجوات بين الخطوط بحجم 5 بكسل أيضًا لذلك اكتفينا بالخانتين الأوليتين ليتم تكرار هذه القيم على طول الخطوط المُحدّدة. خفّف مستوى ظهور هذه الشبكة عبر تحديدها والذهاب إلى لوحة الشفافية Transparency ثم تخفيف التعتيم Opacity لنحو 32%. سنضيف تأثيرًا إضافيًّا على هذه الشبكة بإنشاء ظل خفيف لها. حدّد الشبكة ثم اذهب إلى القائمة Effect > Stylize > Drop Shadow في نافذة خيارات الظلال اختر النمط Soft Light ثم خفّف التعتيم Opacity إلى 30% ثم ضع القيمة 1px في خانتي الإزاحة على المحورين x وy وباللون الأسود لهذه الظلال اضغط على OK. الآن سنرسم الخط البياني الأوّل. في هذا الدرس سنتعلّم فقط كيفية تصميم رسوميات المخطط البياني ولن نهتم لدقة البيانات والخطوط بينما في العمل الحقيقي سيتوجب علينا أولًا تحديد القيم على المحورين العمودي والأفقي أوّلًا ثم تحديد القيمة الحقيقية للبيانات ومن ثم رسم الخط البياني بدقة بناء على ما هذه البيانات. في هذا الدرس سنختصر الوقت ونرسم خطًّا عشوائيًّا غير دقيق. استخدم أداة القلم Pen Tool وابدأ برسم خطٍّ عشوائيٍّ على شبكة المخطط وستشعر بأنك مقيّد الحركة ضمن نقاط محدّدة وذلك لأننا فعّلنا خيار المطابقة على خطوط الشبكة لذلك ستتحرك أداة القلم للرسم بمستوى 10 بكسل في كل حركة بناءً على الإعدادات التي خصصّناها في بداية الدرس. اختر لونًا مميزًا وليكن اللون السماوي 00CFFF#. هذا الخط حاد جدًّا عند المنحنيات لذلك سنقوم بتنعيم هذه المنحنيات. حدّد الخط البياني السماوي ثم اذهب إلى لوحة الحدود Stroke ثم اختر الخيار الأوسط (المنحني) في Corner ولاحظ النتيجة. وسنجعل نهايات الخط مستديرة عبر ذات اللوحة (Stroke)، اختر الخيار الأوسط (المستدير) في Cap ولاحظ النتيجة أيضًا. سنقوم الآن بإضافة تأثيرات البروز الحيوية. افتح لوحة المظهر Appearance من قائمة Window ثم حدّد الخط البياني وستشاهد عناصر مظهر هذا الخط وهي التعتيم الافتراضي ولون التعبئة لا يوجد ولون الحدود السماوي بحجم 4 بكسل. حدّد الحدود ثم انقر على أيقونة New لإنشاء نسخة عن عنصر الحدود. انقر على أيقونة اللون للحدود الجديدة ثم اختر لونًا سماويًّا كلون الحدود الأساسي ثم انقر عليه نقرًا مزدوجًا لتفتح نافذة تعديل اللون بحيث يمكنك الآن تعديل اللون وتخصيصه. سنجعل اللون الجديد داكنًا أكثر لذلك ضع القيم التالية R:0 G:133 B:222 وستلاحظ الفرق بين اللون القديم والجديد في المربعين الصغيرين على يسار النافذة بحيث يظهر اللون القديم في المربع العلوي والجديد في السفلي. خفّف سماكة الحدود الجديدة إلى 3 بكسل. تأكّد من أنك تُحدّد الحدود الجديدة في لوحة المظهر ثم اذهب إلى القائمة Effect > Distort & Transform > Transform وفي نافذة Transform Effect أضِف إزاحة بمقدار 1px على المزلاج العمودي وألغِ تفعيل الخيارات أسفل النافذة باستثناء خيار Transform Objects. وبذلك سيتم تحريك الحدود الجديدة عموديًّا إلى الأسفل بمقدار 1 بكسل فقط. وبعد هذه الخطوة فقط بدأ الخط البياني يصبح أفضل مظهرًا، ولكننا لم ننتهِ بعد. ضاعف الحدود الأخيرة من لوحة المظهر بنفس الطريقة المُتّبعة سابقًا. هذه المرّة خفّف سماكة الحدود الجديدة إلى 1px وغيّر اللون إلى لون أكثر قتامةً من السابق بالقيم التالية R:0 G:97 B:216. ومجدّدًا اذهب إلى القائمة Effect > Distort & Transform > Transform وقم بذات التعديلات السابقة من إزاحة مزلاج المحور العمودي بمقدار 1px وأبقِ على خيار Transform Objects فقط مفعّلًا. وهكذا سيبدو الخط البياني مع التعديلات والمزايا المُضافة كما في لوحة المظهر. ومن لوحة المظهر حدّد الحدود الأولى ذات اللون السماوي الفاتح والحجم 4 بكسل ثم اذهب إلى القائمة Effect > Stylize > Drop Shadow واجعل النمط Soft Light ومستوى التعتيم Opacity 50% وإزاحة المحور X 0 وإزاحة المحور Y بمقدار 2 مع اختيار اللون الأسود. وبهذه الظلال المُضافة أصبح الخط حيويًّا ونابضًا بالحياة وبعبارة أخرى أصبح غير مسطّح وجميل المظهر. وعلى الرغم من أننا جعلنا الانحناءات ناعمة ومستديرة وغير قاسية إلا أن المظهر العام للخط يبدو قاسيًّا عند المنحنيات لذلك سنقوم بجعلها أكثر انحناءً. حدّد كامل مسار الخط البياني من لوحة المظهر Path ثم اذهب إلى القائمة Effect > Stylize > Round Corners ضع القيمة 10px عند خانة نصف القطر. ولاحظ زيادة الانحناء للمنعطفات في الخط البياني. الآن أصبح الخط البياني جاهزًا. وإذا كنّا سنقوم برسم خطوط بيانية أخرى فيجب علينا حفظ هذا النمط من التعديلات الرسومية على الخط في لوحة Graphic Style وذلك حتى لا نضطّر لإعادة جميع المراحل السابقة على كل خط بياني جديد سنقوم برسمه. حدّد الخط البياني ثم افتح لوحة Graphic Style من نافذة Window ثم اضغط على أيقونة نمط جديد أسفل اللوحة ليتم حفظ النمط المستخدم على هذا الخط ضمن الأنماط الموجودة في اللوحة. ارسم خطًّا بيانيًّا جديدًا بشكل عشوائي (لا تنسَ أننا نرسم خطوطًا عشوائيةً في هذا الدرس لشرح عملية التصميم ولكن في المخططات الحقيقية يجب عليك اتباع قيم البيانات التي تعمل عليها لرسم الخطوط البيانية). حدّد الخط البياني الجديد ومن لوحة Graphic Style انقر على النمط الذي سبق وأن حفظناه في الخطوة السابقة. ستلاحظ أن الخط الجديد أصبح يمتلك بروزًا وظلالًا كالخط القديم تمامًا وبنقرة واحدة فقط. هذه العملية مفيدة جدًّا خصوصًا عندما نعمل على تصميم عناصر كثيرة في التصميم الواحد ويكون الكثير منها مرسومًا بذات النمط وله نفس التأثيرات المختلفة بحيث لن نضطّر لإعادة القيام بكل تلك الخطوات بل سنكتفي بنقرة واحدة للقيام بذلك. كل ما علينا القيام به هنا هو الذهاب إلى لوحة المظهر Appearance وتغيير ألوان الحدود الثلاثة للخط الجديد فقط لتمييزه عن الخط القديم مع الانتباه إلى جعل الحدود قاتمة أكثر بالتدريج من الأسفل إلى الأعلى كما في نمط الخط الأول. في هذه الحالة اخترت سلسلة من الألوان البنية لتلوين الخط الجديد. ارسم خطًّا بيانيًّا ثالثًا. طبّق عليه النمط أيضًا. غيّر ألوان الحدود الثلاثة إلى سلسلة من الألوان الخضراء. والآن لسنا مضطّرين لإبقاء عملية الرسم على الشبكة Grid بمستوى 10 بكسل في كل حركة. سنعيد ضبط إعدادات الشبكة من القائمة Edit > Preferences > Guides & Grid ثم ضع القيمة 1 بكسل في خانة Gridline every. استخدم أداة النص بالخط الذي تراه مناسبًا لتصميمك. أنا اخترت خط Adobe Arabic القياسي وبحجم 30px ثم اكتب القيم على المحور العمودي.وباعتبار أننا نرسم مخطّطًا بيانيًّا لبيان عدد الزيارات اليومية لمواقع الإنترنت فسنضع القيم من 100 إلى 1000 كما في الصورة. وكما قلنا فهو مخطط بياني لعدد الزيارات اليومية لذلك سنضع أسماء الأيام في الخط الأفقي أسفل المخطط. حدّد جميع النصوص وطبّق ظلًّا عليها من خلال الذهاب إلى القائمة Effect > Stylize > Drop Shadow اجعل النمط المستخدم Soft Light كالعادة والتعتيم 85% والإزاحة على المحورين بقيمة 2px. أصبحت النصوص حيوية أكثر بوجود الظلال تحتها. اكتب عنوان المخطط أعلى التصميم مع زيادة حجم الخط إلى 42 ولتطبيق ذات التأثير الأخير اضغط الاختصار Shift+Ctrl+E أو اذهب إلى القائمة Effect > Apply Drop Shadow ارسم ثلاثة خطوط صغيرة فوق بعضها أسفل العنوان مباشرة إلى جهة اليمين وطبّق عليها النمط المستخدم على الخطوط البيانية واستخدم ألوان الخطوط البيانية الثلاثة. حدّد الخطوط الثلاثة ثم افتح لوحة المحاذاة Align وغيّر خيار Align to أسفل يسار اللوحة إلى Align to Selection ثم اختر الخيار الخيار العمودي من Distribute Spacing بحيث ستقوم هذه العملية بتوزيع المسافات بالتساوي بين الخطوط. أكتب أسماء المواقع الثلاثة الافتراضية بجانب الخطوط الثلاثة. اذهب إلى لوحة الطبقات Layers ثم ألغِ القفل من طبقة الخلفية. استبدل لون التعبئة الجامد للخلفية بتدرج لوني ثم قم بتعديل اللون الأيسر للتدرج اللوني عبر النقر المزدوج عليه واختيار اللون 440000#. ثم غيّر اللون الأيمن من التدرج اللوني إلى اللون 220000#. استخدم أداة التدرج اللوني من لوحة الأدوات ثم ارسم اتجاه التدرج بشكل قطري من الركن العلوي الأيسر إلى الركن السفلي الأيمن. وبهذا نكون قد انتهينا من تصميم مخطط بياني أنيق وحيوي وجميل ومفعم بالألوان والتأثيرات المتنوعة. تعلّمنا في هذا الدرس أهمية حفظ كامل النمط من تأثيرات وتعديلات على المظهر من لوحة المظهر عبر وضعها في نمط واحد يمكن الرجوع إليه وإعادة تطبيقه مجدّدًا على عناصر جديدة من خلال لوحة Graphic Style، كما تعلمنا كيفية إضافة حدود على العنصر وتلوينها وتحريكها وتعديل أحجامها للحصول على بروز وتأثير جميل على العنصر بالإضافة إلى تطبيق تأثير الظلال على العناصر المختلفة.
  9. سواءًا كنت تعمل على صفحة هبوط لمنتج، لخدمة أو على صفحتك الشخصية من أجل عملك الحر، فإن كل الصفحات تشترك في عدة أمور بينها. اليوم سنشاهد دور كل واحد منها، وأنواعاها ومتى نستعلمها وما الفائدة منها. في هذا الدرس سنتطرق إلى 6 أجزاء مهمة في كل صفحة، وهي على الترتيب كالتالي: رأس الصفحة (Header) التعريف القيمة أو الشيء المميز محل الثقة نقطة التحويل (Call to action) ذيل الصفحة (Footer) سنستعين برسوم تويضحية في الطريق لفهم وشرح كل نقطة وكيف نستخدمها على أتم وجه، وفي نهاية الدرس ستكون قادرا على إنشاء صفحة هبوط أو صفحة شخصية بكل سهولة. لكن تذكر، لا صفحة تشبه الأخرى، ولا منتج يشبه الآخر، لذا قد لا يفيدك هذا الأمر تماما ولا يغطي احتياجياتك. ماهي صفحة الهبوط؟حتى نعرف ما الذي نقوم به، علينا أن نعرف أولا ماهي صفحة الهبوط، حسب موقع unbounce فإن صفحة هبوط هي: إذا، حسب هذا المفهوم، صفحة الهبوط تستطيع أن تكون صفحة لبيع كتاب، لبيع منتج ما، للتسجيل في خدمة، لطرح فكرة، لتقديم خدمة... كل هذه الأمور مختلفة، ولكنها تشترك في شيء واحد وهي أنّها تريد أن تحول الزائر إلى زبون. صفحات الهبوط تنقسم إلى قسمين اثنين، صفحات التحويل (Click Through) وصفحات التجميع (Lead Generation). صفحات التحويلصفحات التحويل هي كل الصفحات التي تحول المستخدم إلى صفحة أخرى، صفحات مثل هذه تحول المستخدم إلى متجر، إلى منصة البيع، أو بشكل عام هذه الصفحات تقدم المعلومات الشاملة للشيء، وليست مسؤولة عن تحويل المستخدم إلى زبون بشكل مباشرة، ولكن لها علاقة كبيرة بالأمر. صفحات التجميعصفحات التجميع هي الصفحات الأخرى، وتكون هذه الصفحات للتسجيل، للبيع مباشرة، للاشتراك، أو لملأ استمارة ما، أو للتواصل المباشرة، للحصول على نسخة الكترونية من كتاب أو منتج ما أو للتعريف بمنتج ما (مع هدف مشاركة المستخدم له عبر حساباته في الشبكات الاجتماعية). 1. رأس الصفحة (Header)من بين كل الأجزاء الأخرى، رأس الصفحة يكاد يكون أهم جزء في أيّ صفحة، فهو يستغل منطقة fold وهي المنطقة التي يراها المستخدم فور وصوله للصفحة بدون التمرير للأسفل، نشر أحمد مجدي في معمل ألوان مقالا ممتازا عن هذه النقطة. بهذه المنطقة بالتحديد، على المصمم أن يستعرض بعض النقاط المهمة، وهذه النقاط تكون كالتالي: الفكرة الموجزة تكون هذه الفكرة عادة عنوانا كبيرا بخط عريض في وسط الصفحة ليدل المستخدم على ماهية المنتج أو الخدمة (برنامج، أو خدمة ويب). أو عنوانا لكتاب مع شرح بسيط له وغلاف الكتاب: أو الاسم ومجال التخصص في حال كانت صفحة شخصية لمستقل أو شركة: في الحالات السابقة يتم إضافة شعار فوق الفكرة الموجزة، وفي حال صفحة شخصية يتم إضافة صورة شخصية، في حال منتج ككتاب أو شيء مشابه، يتم إضافة الغلاف. نقطة التحويل (Call to action) يتم إضافة هذا الجزء للهيدر عادة لأهميته. سنتكلم عن التفاصيل أكثر في جزئه المخصص، أما هنا فنشرح أهم النقاط. عادة هذا الجزء يكون زرا، أو مُدخلا (input). الزر يسمح للشخص بالانتقال إلى جزء الشراء، أو إلى صفحة التسجيل، أو إلى استمارة التواصل: وعندما لا يوجد شيء ليقود له هذا الجزء، يتم استعمال زر للتنقل إلى الجزء الذي بعده. يمكن أن يكون مُدخلا للاشتراك في قائمة بريدية من أجل التنبيه، أو للتسجيل في الخدمة، أو للحصول عل المنتج عبر إرساله في البريد. روابط التصفح (navigation) تكون روابط التصفح عادة موجزة ومسؤولة عن التصفح داخل الصفحة وليس من أجل روابط لخارج الصفحة، تحتوي القائمة على أقسام الصفحة (مثل التعريف، نقطة التحويل، التسعير...) يستحسن أن تكون متلصقة (sticky أو fixed) من أجل أن تكون في متناول اليد دوما. يوجد أكثر من نوع لذلك الجزء، تستطيع مثلا وضع زر للتسجيل بداخله: لإبقاء الزر قريبا من المستخدم دوما، عادة يحدث هذا للصفحات التي تبيع منتجا أو تقدم خدمة، بحيث في أيّ نقطة ما يكون المستخدم قد حصل على ما يكفي من المعلومات وهو بالتالي مستعد للطلب أو التواصل. 2. التعريفالتعريف هو جزء مهم في بعض الحالات ولكنه أمر اختياري في حالات أخرى، مثلا في صفحات لمنتج ما أو خدمة فيمكن الاستغناء عن التعريف حيث أنّه سيكون مدمجا في جزء "القيمة"، في حالات أخرى قد يكون مفيدا، في حال كنت مستقلا أو شركة أو خدمة جديدة، فالتعريف سيعطي الزائر فكرة عن الموقع أو الخدمة، التعريف يكون نصيا، التعريف التي يستخدم الصور محله يكون في جزء "القيمة". كمثال تعريف لمستقل يجب أن يحتوي على اسم المستقل، ربما البلد (في حالات معينة) ومجال الاختصاص وما ستقوم به بالتحديد عادة، نبذة عن الشخص وعن مراكز عمله السابقة ستعطي ثقة أكثر للعميل، حيث سيدرك أنه لا يتواصل مع آلة بل مع انسان فعلي. نفس الأمر ينطبق على الشركات، حاول أن تجعل الجزء قصيرا ومباشرا، لا أحد يملك الوقت لقراءة نص طويل. إذا وجدت أن "الفكرة الموجزة' رأس الصفحة تكفي لتشرح الفكرة فلا داعي لوضع تعريف. كما قلنا التعريف أمر اختياري تماما والعديد من الأشخاص يختارون عدم استخدامه. 3. القيمةالقيمة أو الشيء المميز هي أهم جزء في أيّ صفحة هبوط، فهي تشرح الخواص والمميزات لمنتج ما، أو خدمة ما، تقدم شرحا وافيا للكتاب، أو تقدم مجالات خبرة المستقل أو خدمات الشركة. أحيانا يختار المستقل تجاهل هذه المرحلة وجعل العمل يتكلم عن نفسه في جزء "محل الثقة" لكن ليتم هذا على المستقل أو يصف كامل مهاراته في الجزء الأسبق وهو "التعريف". بالنسبة للتطبيقات فهي تستغل هذه النقطة في عرض مميزات للتطبيق مثلا: أما عن المواقع أو خدمات الويب فهي تعرض المميزات على شكل نقاط مع أيقونة لكل جزء: 4. محل الثقةلأنّك لا تستطيع أن تقفز على شخص في الطريق من اللامكان ثم تخبره أنّ عليه أن يشتري منتجك المذهل أو يستأجرك للعمل، أنت أيضا لا تستطيع أن تطلب من زائر دخل لتوه الموقع أن يشتري منتجك، لذا عليك أن تبني ثقة لدى الزائر، وهنا يأتي جزء محل الثقة. محل الثقة قد تعني أكثر من شيء، ولكنها بالمجمل العام المكان الذي يُكسب الزائر ثقة في المنتج أو المشروع أو الشخص. ويكون له أكثر من شكل: العملاء: عادة ما يستخدم هذا بكثرة مع المستقلين ومع البرامج والخدمات. جزء العملاء يكون بأن يتم وضع مجموعة من شعارات أهم العملاء الذين مروا على العميل/منتج [figure 11]. يكسب العميل ثقة مباشرة في المنتج في حال رؤية شعارات شركات معروفة، هذا يعني له أنّ المنتج جيد وبالتالي يستحق المال الذي سيصرفهالتغطية الإعلامية: التغطية الإعلامية تكون عندما لا يوجد عملاء لاستخدامهم، أو عندما لا يكون من المنطقي استخدام عملاء (كتاب مثلا). في هذه الحالات يتم إضافة شعارات المواقع الإخبارية التي قامت بتغطية المنتج ويكون شكلها شبيها بشكل العملاء السابقيين، التغطية الإعلامية تُكسب قدر جيد من الثقة أيضا.الشهادات: الشهادات هي الخيار الثالث ومن أكثر الخيارات شيوعا، ببساطة تعتمد طريقة الشهادات على إدراج شهادات حقيقية من العملاء السابقين أو أشخاص جربوا الخدمة. أن تقول جملة عشوائية لوحدك، وأن تقول نفس الجملة ثم تُرفق أنها من قول العالم الفلاني أمران مختلفان، فالأخير يكسب ثقة أكبر في الجملة وبالتالي يجعلها ذات مصداقية، لذلك شهادات العملاء يجب أن تتبع نفس النسق، لذا ينصح أن يتم إضافة اسم صاحب الشهادة، وكذى صورته، حيث الصورة تجعل الزائر يعرف أنّه يسمع من شخص ما ربما قد رآه من قبل. وإضافة منصب العمل قد يكون مهما أيضا، أنت ستثق بمسؤول التصميم في شركة ما إذا كان يتكلم حول برنامج تصميم مثلا.الشبكات الاجتماعية: في حال لم يتوفر شيء مما سبق، فخيار آخر هو الشبكات الاجتماعية، لكن الأمر لا يصلح دوما، فعدد قليل من الصفحات تستفيد من الشبكات، ولكن إن كانت خدمتك أو موقعك يملك جمهوريا جيدا على الشبكات الاجتماعية، فمن المستحسن أن تضيف عدد المتابعين أو المعجبين من الشبكات الاجتماعية.صاحب المنتج: قد يبدو الأمر غريبا بعض الشيء لأول وهلة، ولكن إذا قرر بيل غيتس إنشاء صفحة لمنتجه فالأغلب أنه سيضيف صورته أو يجعل الأمر واضحا أنّه هو المالك . الأمر لا ينجح كثيرا لأننا لست دوما مشاهير، ولكن ربما كنت تسوق كتابا لكاتب معروف، فإضافة صورته ونبذة عنه تولد بعض الثقة أيضا. المشاريع السابقة: الأمر مخطط للمستقلين أو الشركات والوكالات بشكل خاص. المشاريع السابقة أو معرض الأعمال (Portfolio) هو أهم جزء في صفحة هبوط لمستقل، أن تقول أنّك مصمم بارع، وأن تظهر للزائر أنّك مصمم بارع بعرض أمثلة حقيقية هما أمران مختلفان. النمط السائد في عرض في المشاريع هو على شكل مربعات (grid) ولكن أنت حر بعرضها بأيّ طريقة تشاء.5. نقطة التحويل (Call to action)يأتي أهم جزء في كل الصفحات، أو كما يقول المثل الشعبي (الزبدة). فكل ما سبق كان لتحضير الزائر لهذه النقطة بالتحديد. لقد عرفت المنتج، أعطيت قيمته الفعلية، وبنيت الثقة لدى الزائر، تأتي النقطة التي يحين فيها تحويل الزائر إلى زبون، عادة هذا الجزء يكون زرا يقود لصفحة للتسجيل، أو لتحميل ملف ما، لإدخال معلومات للتسجيل في نشرة، جدول للاشتراكات. دعنا نشاهد أشكاله المختلفة: الزر: هذا الشكل هو الأكثر شيوعا وهو يتكون من زر كبير نسبيا، ويكون واضحا ويملك لونا مختلفا عن بقية العناصر حتى يستقل عنهم، يجب أن يكون بعبارة واضحة وغير خادعة للزائر، كأن تعرض فترة تجريبية وعندما يسجل الزائر لا يجد شيئا. العبارة يجب أن تكون لطيفة وغير عدائية، عبارات مثل "اشتري الآن" أو "حمل الكتاب" أو "سجل معنا" أو "تواصل" هي عبارات معتادة ولا تقدم الكثير من الحماس أو الرغبة للزبون لذا عليك أن تجرب عبارات تبدو وكأنها صدرت من انسان أو أقل عدائية مثل "هيا لنبني شيئا معا". اللون شيء مهم في كل زر، إلا أذا كنت ملزما بلون واحد لهوية الموقع أو المنتج، فعليك أن تختار الألوان بحذر، في تجربة قام بها موقع Performable وُجد أن تغيير لون الزر من الأخضر إلى الأحمر رفع نسبة التحويل (وهي عدد الزبائن على عدد الزوار) بنسبة 21% حيث أنّ اللون الأحمر يصنع شعورا بالعجلة ويَبرز أكثرمن بقية الألوان، والقاعدة العامة هي أنّ كل الألوان الساخنة (أحمر، برتقالي، أصفر، بنفسجي محمر...) مرحب بها. استمارة: وهو النوع الثاني الأكثر شيوعا وهو يتكون من استمارة يملأها الزائر من أجل الاشتراك في نشرة بريدية، أو من أجل الاشتراك في الخدمة، أو من أجل التواصل الجداول: شكل آخر شائع هو الجداول، فهي تسمح لك بعرض خطط الاشتراك، الاستضافة، باقات الشراء، وأيّ شيء تستطيع أن تبيعه في أكثر من باقة بأكثر من سعر، عادة يتم التركيز على العرض أو الباقة الأكثر شيوعا ووضعه في المنتصف وتمييزه عن البقية. 6. ذيل الموقع (Footer)ذيل الموقع لا تكون له أهمية كبيرة في بعض الصفحات، بعض الصفحات تختار أن تزيله تماما لأنها تريد أن ينصب تركيز الزائر على جزء التحويل فحسب. إذا كانت الصفحة هي تقديما لموقع ما، فالأحرى أن تضيف الذيل لتضع فيه روابط ترسل إلى أماكن أخرى، إلى جانب الصفحات الاجتماعية نظرة على صفحات حقيقيةفي هذا الجزء سنلقي نظرة على صفحات هبوط من الواقع، وكيف طبقت القواعد البسيطة العامة. صفحة كتاب Zero to oneكتاب Zero to one كتاب رائع قد سبق وأن قرأته، وكتاب رائع كهذا لابد أنّه سيملك صفحة رائعة لبيعه: Zero to One book. رأس الصفحة مباشر ويحتوي أهم المعلومات المتوقعة، فهو يحتوي على روابط للتصفح داخل الصفحة مثل معلومات حول الكتاب وحول صاحبه، الواجهة تملك صورة لغلاف الكتاب إلى جانب سطر تشويقي للكتاب، مع وجود زرين، أول زر وهو أهمهم ويعمل بصفته زر Call to action من أجل شراء الكتاب، الزر الثاني هو من أجل قراءة مقتطف من الكتاب بشكل مجاني. عند النزول تحصل على شهادات حول الكتاب من شخصيات معروفة وهذا لبناء الثقة حول المنتج. الموقع مقسم إلى أكثر من صفحة للتوزيع الجيد للمحتوى، مع تواجد جزء التحويل (call to action) أسفل كل صفحة لضمان وجوده قرب المستخدم دوما. تطبيق التصميم InvisionInvision هو منصة وتطبيق لصنع التصاميم الأولية (prototype) جنبا إلى جنب مع فريقك. في الأغلب ستتوقع تصميما ممتازا من منصة للتصميم، وهذا ما ستحصل عليه مع صفحة هبوط تطبيق Invision. رأس الصفحة يقدم أهم العناصر اللازمة لأيّ زائر، جزء التصفح يملك روابطا تأخذك إلى أجزاء مهمة في المنصة إلى جانب زر بارز للتسجيل. تحتوي الصفحة على عنوان كبير يصف المنصة إلى جانب سطر آخر للشرح. مع وضع زر CTA. بالنزول نجد مميزات المنصة وإلى جانب كل واحدة منها شهادة أحد الزبائن إلى جانب شعار شركته من أجل بناء الثقة في كلامه. في الأسفل نجد جزء بناء الثقة حيث يقوم التصميم بعرض أهم العملاء وقصصهم مع التطبيق. أخيرا يتم التطرق إلى جزء التحويل حيث أنّه استمارة للاشتراك في التطبيق خاتمةفي هذه المقالة تطرقنا إلى مامعنى صفحة هبوط، وإلى أهم الأساليب والعناصر في كل صفحة، كما عرضنا بعض الأمثلة الناجحة من الحياة اليومية. في المقالين القادمين سنقوم بتصميم وبناء صفحة هبوط خاصة بنا باتباع ما تكلمنا عنه هنا.
  10. سنحاول هنا أن نحيط قدر الإمكان بجوانب هذا الفن الرائع ورسوماته المذهلة عبر معرفة ماهيته، أنواعه، تطورّه، تاريخه وأهم البرامج المستخدمة في رسمه. وسنتعلّم لاحقًا كيفية رسم رسومات البكسل المتنوعة. ما هو فن البِكسل؟ فن البِكسل أو Pixel Art هو فن رسومات قديم يشبه من حيث المبدأ الحياكة الصوفية كالرسومات على الملابس الصوفية إلا أن بداية هذا النوع من الفنون بدأ مع بدء ظهور أجهزة اللعب والحواسيب حيث لم يكن بمقدور تلك الأجهزة القديمة عرض رسوميات معقدّة وكثيرة الألوان وثلاثية الأبعاد كما في يومنا هذا لذلك اعتمد مطوّرو الألعاب في ذلك القوت على هذا النوع الوحيد المتوفّر لرسم خلفيات وشخصيات الألعاب بألوانها البسيطة، وعلى الرغم من بساطتها في ذلك الوقت إلا أنها كانت رائعة وممتعة للغاية ولعّل ألعاب Pacman و Mario وStreet Fighters وKingKong وSonic أبرز ألعاب تلك المرحلة شاهد ومثال رائع على روعة تلك الرسومات في تلك الحقبة من الزمن. ويعتمد الرسم هنا على رسم النقاط الصغيرة بجانب بعضها بحيث تكون النقطة الواحدة بحجم بكسل واحد فقط ما يجعل هذه الرسومات دقيقة وصغيرة نسبيًّا بالنسبة إلى المقاسات المعتمدة في الأجهزة المتطوّرة في أيامنا هذه بينما كانت أكثر من كافية لأجهزة تلك الحقبة القديمة. لذلك عند الرسم بأي برنامج للرسم عليك تكبير منظور العمل إلى أكبر درجة ممكنة تستطيع معها التعامل مع نقاط البكسل بسهولة وعند العودة للحجم الطبيعي ستشاهد نتيجة العمل الذي قمت به. هذا مثال رسمته باستخدام برنامج الرسام Paint الموجود ضمن نظام الويندوز Windows حيث تظهر نقاط البكسل بوضوح عند التكبير وفي شكل الرأس الصغير تظهر النتيجة بالحجم الطبيعي. وكانت رسومات البكسل بسيطة جدًّا في البداية حيث اعتمدت نظام ألوان 8bit لتتطور إلى 16bit ومنها إلى أكثر وأكثر حتى أصبحت متطورة جدًّا لدرجة أن الرسومات الحديثة منها أصبحت تتضمن تدرجات لونية عادية بعد زيادة حجم العمل وعدد الألوان المستخدم. على الرغم من انتشار الرسومات عالية الدقة والرسومات ثلاثية الأبعاد إلا أن رسومات البكسل مازالت موجودة بقوة وبخاصة في ألعاب الأجهزة المحمولة كالهواتف الذكية وغيرها. ومن الممكن رسم هذه الرسومات باستخدام تقنيات وأدوات اعتيادية كأدوات برنامج الرسّام Paint والفوتوشوب Photoshop أو يمكن رسمها بدون أدوات وبشكل يدوي وهو ما ينتج إبداعًا مميزًا قد لا تستطيع الأدوات تقديمه. أنواعه: تم تقسيم رسومات البِكسل إلى نوعين: الإيزومِترِك Isometric: ويُطلق عليها اسم ثلاثي البعاد أو متساوي القياس أيضًا وهي رسومات بكسل تبدو بثلاثة أبعاد وتظهر فيها ثلاث جوانب للأشكال المرسومة ما يعطي انطباعًا بأنها ثلاثية الأبعاد وعادة ما تكون بمنظور جانبي بزاوية معينة وتكون غالبًا 30 درجة وتستخدم لرسم مناظير معينة لمواقع شهيرة أو افتراضية وفي بعض الأحيان لرسم خلفيات لعبة من هذا النمط وقد ظهرت بعض الألعاب التي تعتمد على هذا النمط من الرسوميات خصوصًا للأجهزة المحمولة كالهواتف الذكية فيما يتباهى الآن المصممون برسوماتهم المعقّدة والرائعة باستخدام هذا النمط. وهذه صور لبعض الألعاب القديمة التي تستخدم هذا النمط سلسلة ألعاب Age of Empires Diablo Transport Tycoon وهذه صور لبعض ألعاب الهواتف المحمولة تستخدم هذا النمط من الرسومات Pocket Harvest Zombie Commando وهذه بعض الرسومات لهذا النمط لبعض المصممين للمصممة Sylvia Flores Espinoza للمصمم Robert Podgórski للمصمم Sergey Kostik غير الإيزومِترِك Non-Isometric: وهو نمط رسومات بِكسل عادي والأكثر انتشارًا وهو الصورة بشكل مباشرة من جهة واحدة من الأمام أو الجانب أو حتى من الأعلى بدون زوايا وهو معروف في عالم الألعاب القديمة وأيضًا الحديثة الخاصة بمنصات الأجهزة المحمولة عادة. ولعل أشهر الصور والألعاب المعروفة التي تستخدم هذا النمط هو ألعاب ماريو وسونيك وغيرها بالإضافة إلى الألعاب الجديدة على منصات الهواتف المحمولة وهذه بعض الأمثلة Random Heroes 2 Sword Of Xolan وقد اشتهرت مؤخرًا هذه الرسمات كثيرًا في رسم الوجوه التعبيرية (سمايلات) وخصوصًا في رسم الأيقونات التي تعتمد بشكل كبير على هذا النوع من الرسومات وبخاصة أيقونات مواقع الإنترنت. ولتوضيح الفرق بين نوعي فن البيكسل إليك هذا المثال Non-Isometric Isometric وسنتعلّم في الدرس التالي كيفية تصميم رسومات بفن Pixel Art بنوعية Non-Isometric وكذلك في الدرس الذي يليه سنتعلّم كيفية تصميم نوعية Isometric. مصادر الصور: صور المصممين من صفحاتهم على Behance. صورة التلفاز التوضيحية من موقع ويكيبيديا تحت رخصة CC BY-SA 3.0.
  11. فن الزخرفة والتزيين، وهو فن عريق ورائع تميّزت به الحضارة الإسلامية وخاصة في العهد الأندلسي وقد أذهلت بقية الحضارات إلى يومنا هذا، ويتميز هذا الفن بالأشكال الهندسية والخطوط المتداخلة وكذلك استخدام الأوراق والأزهار وغيرها. سنتعّلم في هذا الدرس كيفية رسم بعض أنواع من الزخارف الإسلامية التابعة لهذا الفن ببرنامج الإليستريتور ويمكنكم القياس على هذه التمارين لتصميم المزيد من الأشكال الزخرفية والهندسية. سنتعلم في الدرس تصميم شكلين من أشكال فن الأرابيسك. لنبدأ بالشكل الأول، افتح برنامج الإليستريتور ثم أنشئ مستندًا جديدًا، الأبعاد غير مهمة ولكنني اخترت حجمًا يؤمّن لي المساحة الكافية للعمل 1280 × 800. استخدم أداة رسم المستطيلات Rectangle Tool ثم اسحب مربّعًا باستخدام الفأرة على لوح الرسم مع الاستمرار بالضغط على مفتاح Shift لضمان الحصول على مربّع مثالي (متساوي الأضلاع). انقر بالزر الأيمن للفأرة على المربع ثم اختر من القائمة Transform > Rotate حدّد الزاوية 45 درجة ثم انقر على زر COPY. بهذه الطريقة أنشأنا نسخةً عن المربع الأول مع الاختلاف في الزاوية بمقدار 45 درجة والحفاظ على المربع الأصلي. حدّد كلا المربعين ثم انقر على الزر Unite من لوحة Pathfinder لتدمج الشكلين في شكل واحد. وبذلك نحصل على هذا الشكل الذي يعتبر النواة الأساسية لتصميم الأرابيسك الأول الذي نعمل عليه في هذا الدرس. فعّل الأدلّة الذكية عبر الاختصار Ctrl+U وذلك لنتمكّن من الرسم بدقةٍ وتوازٍ ومحاذاةٍ مثاليةٍ في كافة الاتجاهات خصوصًا وأننا في صدد العمل على تصميم هندسي متناظر. حدّد هذا الشكل الجديد واختر أداة التحديد Selection Tool ثم اضغط باستمرار على مفتاح Alt واسحب هذا الشكل باتجّاه اليمين مع الاستعانة بالأدلّة الذكية، وبعد بدء عملية السحب مباشرة اضغط باستمرار على مفتاح Shift مع المحافظة على الاستمرار بضغط مفتاح Alt الذي بدأنا بضغطه مسبقًا. إن استخدام مفتاح Alt مع استخدام أداة التحديد سيقوم بسحب نسخة عن الشكل المحدّد كما أن استخدام مفتاح Shift يحافظ على ثبات المحاور أثناء عملية السحب. استعن بالأدلّة الذكية لجعل النسخة الجديدة تبدأ عند نهاية النسخة الأصلية تمامًا. سنقوم بعمل نسخٍ إضافية مشابهة وحتى لا نكرّر ذات العملية فإن الإليستريتور يؤمن طريقة سهلة للقيام بذلك وهي اختصار يقوم بتكرار العملية الأخيرة على البرنامج وهو Ctrl+D. اضغط هذا الاختصار عدّة مرات ليقوم بإنشاء نسخٍ على نفس النمط الأول عدّة مرات حتى تملأ الصف بهذه الأشكال. حدّد جميع الأشكال في الصف ذاته ثم انسخها للأسفل بذات الطريقة الأولى. مجدّدًا اضغط على الاختصار Ctrl+D لتكرار العملية الأخيرة. هذا شكل من أشكال الزخرفة يمكن استخدامها لصنع خلفية أرابيسك جميلة ويمكنك أن تضيف لونًا آخر على التصميم عبر رسم مستطيل باستخدام أداة المستطيلات باللون الأسود مثلًا وترسله للأسفل عبر الاختصار Shift+ctrl+[ وتجعل لون التعبئة للأشكال الهندسية باللون الأبيض وتشاهد النتيجة الجديدة. وبإمكانك اعتماد إنشاء نقش أو نمط تستطيع تكراره بالقدر الذي تريد على أي شكل أو مساحة أو خلفية بدلًا من نسخ الشكل وتكرار العملية كما فعلنا في الخطوات السابقة. يتم ذلك عبر تحديد الشكل المراد جعله نمطًا ثم الذهاب إلى القائمة Object > Pattern > Make الآن سيتم فتح نافذة إنشاء الأنماط والذي سيعطيك مثالًا عن كيفية ظهور النمط الذي حدّدته بشكل متكرر بالإضافة إلى وضع هذا النمط ضمن لوحة الحوامل Swatches كما يمكنك التعديل على إعدادات هذا النمط كتغيير اسمه مثلًا وطريقة تكراره وغيرها من التعديلات. بعد الانتهاء من تجهيز النمط انقر على زر Done أعلى نافذة خيارات النمط ليتم حفظ هذا النمط ضمن لوحة الحوامل وتستطيع استخدامه لاحقًا. ولتجربة هذا الأمر وفهم كيفية عمل النمط قم برسم مستطيل أسود. استخدم لوحة الحوامل لتحديد النمط الذي قمنا بإنشائه مع التأكّد من تحديد المستطيل سلفًا ليتم تعبئة هذا المستطيل بالنمط الذي قمنا بإنشائه سابقًا. وكما قلت سابقًا هذا الشكل هو النواة الأساسية لتشكيلات عديدة يمكن البناء عليه لإنشائها وسأعلّمكم إحداها وأترك البقية لخياراتكم وإبداعاتكم. حدّد الشكل الأساسي ثم انسخه Ctrl+C وألصقه في المقدمة Ctrl+F ثم عدّل الحجم لتصغيره من خلال أداة التحديد Selection Tool عبر النقر على السهم في زاوية الشكل والسحب نحو الداخل لتتم عملية التصغير، ولا تنسَ أن تستمر في الضغط على مفتاحي Shift وAlt أثناء عملية السحب للمحافظة على تساوي الأبعاد من جهة والمحافظة على مركزية عملية التحجيم من جهة أخرى. صغّر حجم النسخة الجديدة قليلًا كما في الشكل التالي. افتح لوحة الحدود Stroke وزِد حجم الحدود لنحو 20pt. مع القيام بعملية التكرار وإضافة الألوان إلى تعبئة الأشكال جميعها وإلى حدودها سنحصل على أشكال مثيرة وجميلة توضّح جوهر فن الأرابيسك. قم بعملية إنشاء نمط (نقش) جديد بالأشكال الجديدة الملونة لترى روعة تصاميم الأرابيسك. بالإمكان إضافة وتعديل هذا الشكل للحصول على أشكال أخرى مرتبطة بالشكل الأساسي كقاعدة للتصميم. سنقوم الآن برسم الشكل الهندسي الآخر وهو أكثر تعقيدًا وصعوبة، هناك عدّة طرق لرسم هذا النموذج منها الطريقة التي شَرَحَتها المصمّمة جومانا مدلج والتي تحتاج لرسم الكثير من الخطوط المتقاطعة في المركز ومن ثم وصلها بطريقة معينة للحصول على الشكل. ولكنني سأشرح كيفية رسمه بطريقة يدوية بسيطة تقريبية. استخدم أداة رسم المضلعات Polygon Tool واسحب شكلًا وأثناء السحب وقبل افلات زر الفأرة اضغط على سهم الأعلى من مفاتيح الأسهم في لوحة المفاتيح لزيادة عدد الأضلاع، اجعلها ثمانية، كذلك استمر في الضغط على مفتاح Shift للمحافظة على استقامة الشكل أفقيًّا. انقر بالزر الأيمن للفأرة واختر القائمة Transform > Rotate وذلك لتدوير الشكل. من نافذة خيارات التدوير أدخل القيمة 22.5 درجة في زاوية الدوران Angle ثم اضغط OK. سيصبح الشكل كما في الصورة التالية. فعّل الأدلة الذكية من الاختصار Ctrl+U ثم استخدم أداة القلم Pen Tool وارسم الشكل الواضح بالنقاط بالترتيب من 1 إلى 4 بالاستعانة بالأدلّة الذكية واستخدام مفتاح Shift للمحافظة على استقامة زاوية الرسم أثناء رسم الخطوط الأفقية. عليك جعل النقطة 1 في أقل من منتصف الضلع المرسوم عليه تلك النقطة. حدّد الشكل الجديد الذي أنشأناه بأداة القلم ثم انقر بزر الفأرة الأيمن عليه واختر القائمة Transform > Reflect اختر الخيار الأفقي Horizontal ثم اضغط على زر COPY لإنشاء نسخة معكوسة عن هذا الشكل. حرّك النسخة الجديدة مع الاستعانة بالأدلة الذكية إلى أسفل الشكل الأصلي مع المحافظة على تطابق الضلع الطويل الأفقي بين الشكلين. حدّد كلا الشكلين واختر الخيار Unite من لوحة Pathfinder ليندمج الشكلان في شكل واحد. حدّد الشكل الجديد وانقر بالزر الأيمن للفأرة عليه واذهب إلى القائمة Transform > Rotate لتدوير هذا الشكل. أدخل القيمة 45 درجة ثم اضغط على زر COPY لإنشاء نسخة مختلفة بالزاوية عن هذا الشكل. اضغط على الاختصار Ctrl+D مرتيّن لتكرار العملية الأخيرة وإنشاء نسختين جديدتين بزاوية إضافية 45 درجة في كل مرّة. ألغِ لون التعبئة وحافظ على لون الحدود الأسود. امسح شكل المضلع الثُماني. هذا الشكل الأخير رائع ويمكن استخدامه على وضعه الحالي في العديد من التصاميم. ولكنه ليس الشكل النهائي الذي نطمح له. حدّد أحد الأشكال المُكَوِّنَة للشكل الكلّي ثم اذهب للقائمة Object > Path > Add Anchor Points كرّر العملية مرة أخرى للحصول على ثلاث نقاط على كل ضلع. استخدم أداة التحديد المباشر Direct Selection Tool وقم بتحريك النقاط على كل ضلع بحيث نحافظ على النقطة الوسطى في مكانها ونجعل كل نقطة من النقطتين الأخريين عند تقاطع الضلع مع الضلع المائل من الشكل المائل المتداخل مع الشكل الأساسي الذي نعمل عليه. الآن وباستخدام ذات الأداة حدّد النقطة الوسطى واضغط على المفتاح Delete من لوحة المفاتيح لتمسح النقطة والخطوط التي تصل بينها ويصبح الشكل الأساسي فارغ في المنتصف. حافظ على هذا الشكل الجديد وامسح بقية الأشكال ثم حدّد كافة أضلاع هذا الشكل وانقر بالزر الأيمن للفأرة عليه واذهب للقائمة Transform > Rotate أدخل ذات القيم الأخيرة وهي الدرجة 45 مع الضغط على زر Copy ثم اضغط الاختصار Ctrl+D مرتين للحصول على الشكل الذي نريده بالفعل. ارسم مربعًا مؤقتًّا بشكل يلامس رؤوس الأشكال ثم أكمل باستخدام أداة القلم أو أداة رسم الخطوط رسم خطوطٍ إضافيةٍ امتدادًا لرؤوس الأشكال حتى حدود المربع المؤقت. كرّر العملية مع رؤوس الأشكال الأخرى على الزوايا الأربعة. الآن امسح المربع المؤقت وقم بإنشاء نمط (نقش) بذات الطريقة التي استخدمها خلال هذا الدرس. وهذه النتيجة الرائعة التي ستحصل عليها عند استخدام هذا النمط لتعبئة مستطيل ما مثلًا. يمكنك أن تلون أجزاء الشكل بالألوان التي تريد. وتستخدمها كنمط أيضًا للحصول على أشكال فن أرابيسك مذهلة. يمكنك أيضًا التعديل على الشكل الأخير للحصول على أشكال هندسية زخرفية مختلفة ومميزة. أضِف لمستك وإبداعك على تصاميم فن الأرابيسك الرائع وهذين المثالين ما هما إلا نموذجين بسيطين عن مزايا هذا الفن الرائع.
  12. سنتعلّم في هذا الدرس كيفية استخدام تقنيات رسم الأشكال المختلفة وأساليب التلوين والكتابة والأنماط المختلفة في برنامج الإليستريتور لتصميم شعار خيالي لمدينة دبي. سنرسم رموزًا تعبيرية لأهم معالم المدينة بالإضافة إلى وضع بعض الأنماط على اسم المدينة وإدراج صور شعارات المدينة السياحية والدولة. افتح برنامج أدوبي إليستريتور وأنشئ مستندًا جديدًا بأبعاد 1600x1200، سنعتمد هذا الشعار للويب لذلك سندع نظام الألوان RGB والدقة 72ppi. استخدم أداة رسم الأشكال البيضوية وارسم دائرة مثالية مع الاستمرار بالضغط على مفتاح Shift أثناء سحب الشكل للمحافظة على تساوي الأبعاد وبالتالي الحصول على دائرة مثالية. اجعل حجم هذه الدائرة يغطي النصف الأعلى من لوح الرسم. استخدم أداة رسم المنحنيات Arc Tool وارسم قوسًا يبدأ من النقطة اليسرى للدائرة وينتهي في أسفل لوح الرسم بالتوازي مع منتصف الدائرة. لتتمكن من القيام بذلك بدقة وسهولة قم بتفعيل الأدلّة الذكية من الاختصار Ctrl+U واتبع الخطوط الخضراء التي ستقدّم لك المساعدة في الحصول على المطابقة أثناء الرسم. انقر بالزر الأيمن للفأرة على القوس واختر القائمة Transform > Reflect ومن نافذة Reflect اختر الخيار العمودي Vertical ثم انقر على زر COPY للحصول على نسخة معكوسة من القوس عموديًّا. حرّك النسخة الجديدة مع الاستعانة بالأدلّة الذكية إلى الجهة المقابلة من التصميم. استخدم أداة القلم Pen Tool لرسم الشكل التالي اعتبارًا من منتصف الدائرة تقريبًا. كرّر العملية السابقة لإنشاء نسخة معكوسة عن هذا الشكل وحرّك تلك النسخة إلى مكانها الصحيح في الجهة المقابلة. حدّد كلا الشكلين وافتح لوحة Pathfinder ثم اختر الخيار Unite لدمج هذين الشكلين في شكل واحد. استخدم أداة النص Text Tool لكتابة عبارة "مدينة دبي" مع مراعاة الحجم الكبير المتناسب مع حجم الشعار. اختر خطًّا عريضًا، أنا اخترت هنا خط Motken Noqta II. والآن استخدم مجدّدًا أداة القلم لرسم هذا الشكل أيضًا بذات الطريقة أسفل اسم المدينة. كرّر العملية ذاتها من إنشاء نسخة معكوسة وحرّكها إلى موضعها الصحيح ثم أدمج الشكلين معًا في شكل واحد. سنبدأ الآن برسم معالم المدينة، وسيكون برج خلفية أعلى برج في العالم أول ما سنبدأ به. استخدام أداة القلم لرسم شكل تخطيطي تقريبي يشبه البرج. وضعه فوق النصف العلوي من الدائرة. ارسم الآن باستخدام أداة القلم أيضًا شكلًا يمثّل انعكاس الإضاءة داخل شكل البرج للجهة اليسرى. لوّن شكل البرج الأساسي بلون أسود وأبقِ الشكل الداخلي باللون الأبيض. سنرسم الآن شكلًا رمزيًّا لفندق برج العرب. استخدم أداة القلم لرسم الخطوط الخارجية لشكل الفندق الخارجي. ويجب أن يكون أقصر من شكل برج خليفة. زِد حجم الحدود من لوحة الحدود Stroke واجعلها 8 ثم ارسم شكل انعكاس الإضاءة في الجزء الأيسر من المبنى أيضًا مع رسم الشكل العلوي المميز للفندق، وارسم شكلًا بيضويًّا مضغوطًا في الأعلى يمثّل مهبط الطائرات. لوّن شكل الفندق بالأسود وشكل الإضاءة بالأبيض. استمر بذات الطريقة والأسلوب وارسم أشكالًا إضافية تمثّل أهم مباني ومعالم المدينة الأخرى. يجب الانتباه إلى توافق الارتفاعات بشكل متناسب مع الواقع إلى حد ما، كما يجب التنبّه إلى المحافظة على وحدة جهة انعكاس الإضاءة لجميع المباني. حدّد شكل الشريط الملتوي العلوي واذهب إلى لوحة الحدود Stroke ثم زِد حجم الحدود لنحو 12. لوّن هذا الشكل باللون الأسود. أنشئ نسخة عنه وصغّر حجمها قليلًا واجعل لونها أبيض واستخدم أداة التحديد المباشر Direct Selection Tool لتحريك النقاط السفلية من الجزء العلوي من الشريط للداخل قليلًا لمنح شعور وجود ظلال كثيفة أسفل الشكل العام للشريط. زِد حجم الحدود بذات الطريقة والقيمة للشريط السفلي. سنقوم بإنشاء ظلال بطريقة مختلفة هذه المرّة وذلك لتتعلموا كيفية استخدام الطرق المختلفة للقيام ببعض الأمور. حدّد شكل الشريط واذهب للقائمة Effect > Stylize > Drop Shadow نحن بصدد تصميم شعار مسطّح لذلك لا نريد استخدم أية توهّجات حول الأشكال أو ظلال متلاشية لذلك اجعل قيمة Opacity عند 100% وقيمة Blur عند 0، وبما أننا جعلنا ظلال الشريط العلوي للأسفل تحديدًا فيجب علينا أن نطبّق التناسق بين عناصر التصميم لذلك اجعل قيمة المحور x عند 0 وقيمة المحور y عند 10، وسيكون اللون هو الأسود. سنقوم بتجهيز النص الآن. كبّر حجم الخط للنص إلى 175. انقر على زر Warp لتفتح خيارات التحويل الخاصة به. اختر من قائمة Style الخيار Bulge ثم ضع الخيار Bend عند -6%. حدّد النص واذهب إلى القائمة Object > Path > Offset Path ضع القيمة 8 عند خيار Offset واضغط OK. ألغِ تجمّع الشكل الجديد عبر الزر الأيمن للفأرة والخيار Ungroup ثم حدّد الشكل الإضافي الأكبر من النص الأصلي ولوّنه بلون مختلف وبدون لون للحدود. لوّن النص الأساسي باللون الأبيض والحدود بالأسود وزِد حجم الحدود لإبرازها. ارسم هذا الشكل فوق النص السفلي من النص. يمكنك رسم هذا الشكل باستخدام أداة القلم أو باستخدام رسم مستطيل والتعديل عليه للوصول إلى هذا الشكل. أنشئ نسخة عن الشكل الأساسي للنص عبر Ctrl+C للنسخ وCtrl+F للصق ثم حدّد النسخة الجديدة مع الشكل الأسود الذي يغطي نصف النص السفلي واختر Intersect من لوحة Pathfinder. لوّن الشكل الجديد بلون رمادي فاتح. الشكل العام للشعار بدأ يتضّح أكثر فأكثر. لوّن الدائرة بتدرج لوني من الأزرق إلى البرتقالي الفاتح. ارسم شكلًا هندسيًّا بنمط فن الأرابيسك الذي يرمز إلى الأصالة العربية والإسلامية للمدينة. يمكنك تعلّم كيفية رسم مثل هذه الأشكال من درس فن الأرابيسك. سنقوم الآن بدمج أشكال الشعار الخارجية والتي تتضمن الدائرة والقوسين. حدّد جميع هذه الأشكال ثم انقر بزر الفأرة الأيمن واختر Join وبذلك سيتم وصل القوسين وتشكيل شكل موّحد يتضمن ما بينهما. حدّد الدائرة والشكل الجديد ثم انقر على خيار Unite من لوحة Pathfinder ليتم توحيد جميع هذه الأشكال ضمن شكل واحد. لوّن الشكل الكلي بتدرج لوني مطابق للتدرج المستخدم من قبل. أصبح هذا الشكل فوق شكل الأرابيسك لذلك اختفى نموذج الأرابيسك ولاستعادته قم بإرسال الشكل الكلي الجديد للخلف عبر النقر بالزر الأيمن للفأرة واختيار القائمة Arrange > Send to Back أضِف حدودًا سوداء للشكل الكلي الجديد وبحجم 10pt. استخدم أداة التحديد المباشر Direct Selection Tool واختر النقطة السفلية للشكل وحرّك للأعلى لتضغط الشكل عموديًّا. ومن شريط خيارات الأداة في الأعلى اختر من قسم Convert الزاوية الحادة. أضِف مستطيلًا مستدير الزوايا من خلال استعمال أداة رسم المستطيلات مستديرة الزوايا وضعه في منتصف الشريط السفلي بشكل يمتد من أعلى وأسفل الشريط. لوّنه باللون الأبيض وأضِف له حدودًا مطابقة لحدود الشريط باللون الأسود. احصل على شعار دبي السياحي من البحث في الإنترنت من أحد المصادر المجانية ثم أدرجه داخل المستطيل الأخير. أضِف نصًّا جديدًا بلون أسود وبخط عادي عريض واكتب عبارة " تأسست 1833 " ثم اجعل النص منحنيًّا بذات انحناءة الشريط وضعه داخل الشريط السفلي وعدّل الحجم بما يتناسب مع حجم الشريط. والآن أضِف نصًّا جديدًا "مدينة المستقبل" وضعه بإعدادات متناسبة ضمن الشريط العلوي مع وضع ثلاثة نجوم على كل من طرفي الشريط. استخدم أداة القلم لرسم زاويتي إشعاع بيضاء أسفل شكل الشعار الكلي. احصل على شعار دولة الإمارات وأدرجها في المساحة الفارغة في أسفل شكل الشعار الكلي. هذا هو شكل الشعار النهائي ويمكن إنشاء شعارات لمدن أخرى على ذات النمط والأسلوب مع تغيير رموز معالم المدن وشعاراتها. ومع تعديل الألوان وإلغاء التدرجات اللونية سنجعل الشعار مسطّحًا بالكامل ونجعله بنمط مختلف، طبعًا لكل منّا أسلوبه التصميمي المميز وقد يضطر المصمم إلى إجراء الكثير من التعديلات بما يتناسب مع رغبة العميل أو الرؤية العامة للمشروع الذي يعمل عليه.
  13. إن مصطلح Polygons أي المضلعات معروف لدى مصممين الرسوميات (الجرافيك) وخصوصًا لدى مصممي الرسومات ثلاثية الأبعاد حيث يتألف سطح المجسم ثلاثي الأبعاد من مجموعة من الأشكال المضلعة أو ما يعرف بالمضلعات، وكلما زاد عدد المضلعات ازدادت نعومة سطح المجسم وأصبح أكثر دقة وواقعية. ولكن في عالم التصميم ثنائي الأبعاد كالصور الفوتوغرافية وتصاميم الرسم فإن هذا المصطلح يستخدم كأحد فنون التصميم مثل فن Pixel وفن WPAP وغيرها من فنون التصميم، فن التصميم المعروف باسم Low Poly أي المضلعات الخفيفة أو القليلة هو فن يعتمد على رسم تصاميم مؤلفة من أشكال مضلعة متلاصقة ومتجاورة لتشكيل لوحة فنية، أو تحويل صورة فوتوغرافية إلى مجموعة من المضلعات المتلاصقة والمتناسقة بالأشكال والألوان للحصول على لوحة فنية متميزة، ويعتبر فن التصميم WPAP ART أحد فروع فن Low Poly إلا أنه يختلف عنه من حيث استخدام ألوان عشوائية مختلفة غير متناسقة مع الصورة الأصلية ولذلك يعتبر WPAP ART فنًا تجريديًا. في هذا الدرس سنتعلّم الأسلوب التقليدي لتحويل صورة فوتوغرافية إلى لوحة مضلعات خفيفة Low Poly بشكل مبسّط وسريع وذلك عبر رسم عدد مخفّف من المضلعات وذلك لسهولة وصول الفكرة الأساسية لهذا الفن. هناك بعض البرامج والمرشحات (الفلاتر) وحتى بعض مواقع الإنترنت التي تقوم بتحويل الصور بشكل تلقائي إلى لوحات مضلعات خفيفة، ولكن الرسم اليدوي يمنح التصميم جمالية وأناقة أكثر حيث لا تستطيع هذه البرامج التلقائية التركيز على التفاصيل المهمة والمميزة لكل صورة ما يُفقدها رونقها وميزتها الحقيقية، لذلك لا أنصح باستخدام هذا الأسلوب لتحويل الصور، بل على المصمم الحقيقي الاعتماد على نفسه لإنشاء تصاميمه حتى يضع أسلوبه الخاص وبصمته على جميع التصاميم التي يعمل عليها. سنبدأ أولًا باختيار الصورة التي سنقوم بتحويلها، أنا اخترت هنا صورة هذه القطة الرمادية. يمكن القيام بهذه التصاميم بأي برنامج تصميم سواء أكان برنامج تصميم نقطي أو فكتور، ولكننا في هذا الدرس سنتعلّم القيام بهذا التصميم باستخدام برنامج أدوبي إليستريتور. افتح برنامج الإليسترتيور وأنشئ مستندًا جديدًا بأبعاد 1280 في 874 وهو نفس حجم صورة القطة. ولإدراج صورة القطة داخل لوح الرسم اذهب إلى القائمة File > Place… أو عبر الاختصار Shift+Ctrl+P. ثم أدرج الصورة بحيث تملأ كامل مساحة لوح الرسم. افتح لوحة الطبقات من خلال الاختصار F7 ثم أنشئ طبقة جديدة، ومن ثم سنبدأ برسم المضلعات عليها. قم بقفل طبقة الصورة الأساسية للقطة حتى لا تتأثر أثناء عملية الرسم. الفكرة الأساسية في رسم هذه النوعية هي التناظر، لذلك سنقوم برسم نصف الصورة فقط ثم سننسخ ذلك النصف ونعكس النسخة الجديدة ونضعها في الجهة المقابلة للحصول على تصميم متناظر، كما أن هذه الطريقة تختصر الوقت بحيث سنرسم نصف الصورة فقط، بالإضافة إلى أن صورة الحيوانات وحتى البشر عادة ما تكون متناظرة بطبيعة الحال. لذلك سنقوم برسم دليل يقسم الصورة إلى نصفين، اضغط على الاختصار Ctrl+R لإظهار المساطر على جانبي التصميم إن لم تكن موجودة أصلًا ثم اسحب من المسطرة الجانبية دليلًا وضعه في منتصف الصورة تمامًا بحيث تقسمها بشكل متناظر إلى نصفين قدر المستطاع. في حال لم تكن الصورة مستقيمة عموديًّا فيمكنك رسم خط مائل يقسم الصورة إلى نصفين متناظرين ومن ثم تحويله إلى دليل. اختر أداة القلم Pen Tool وألغِ لون التعبئة واختر لونًا للحدود كاللون الأبيض مثلًا ثم اختر نقطة لتبدأ منها. أنا اخترت الأنف للبدء برسم مضلع. عادةً ما تكون تصاميم المضلعات مؤلفة من مثلثات على الغالب ولكن تتخلل هذه التصاميم بعض الأشكال المضلعة التي تتألف من عدد أكبر قليلًا من الأضلاع إلا أن العدد يجب أن يبقى قليلًا، كلما زاد عدد الأشكال المضلعة كلما زادت جمالية التصميم. كبّر منظور العرض بحيث تركّز على الأنف ثم ارسم مثلّثًا حول الجزء العلوي من الأنف. المهم في رسم الأشكال المضلعة هو التركيز على اختلاف الألوان والظلال ودرجات اللون الواحد بحيث يجب أن تحاول قدر الإمكان حصر كل لون وكل درجة لونية متقاربة في مضلع خاص به. ارس مثلثات ومضلعات لباقي شكل نصف الأنف بناءً على هذه القاعدة. سنقوم بتلوين هذه الأشكال الآن عبر اختيار لون من أصل اللوحة وهي الصورة الأساسية، لذلك سنحتاج إلى استخدام أداة القطّارة Eyedropper Tool من شريط الأدوات أو عبر الضغط على مفتاح I من لوحة المفاتيح وكذلك أداة التحديد Selection Tool عبر الضغط على مفتاح V من لوحة المفاتيح، بحيث نضغط V أولًا لتحديد المضلع المراد تلوينه ثم نضغط على I لاستخدام القطارة واختيار اللون العام الذي يمثّله ذلك المضلّع من أرضية الصورة الأساسية، ومن ثم الانتقال إلى المضلع التالي وهكذا... . من المهم الانتباه لعدم تلوين مضلعين متجاورين بلونين متماثلين أو متقاربين جدًّا وإلا سيبدو المضلعان مضلعًا واحدًا. قم بإخفاء طبقة الصورة الأساسية الخلفية من لوحة الطبقات وذلك بإزالة إشارة العين من جانب تلك الطبقة لتبقى الخلفية البيضاء الافتراضية مع طبقة المضلعات فوقها. يمكنك الاطلاع على كيفية ظهور التصميم في كل حين للتأكد من الشكل العام ومن الاختيار الصحيح للألوان وتصحيح الأخطاء. قد تظهر بعض الفجوات بين المضلعات وذلك أمر طبيعي بسبب الرسم اليدوي التقريبي غير الدقيق لذلك سنقوم بتصحيح هذه المشكلة. الأفضل القيام بالتدقيق في هذه المسألة بعد رسم مجموعة قليلة من المضلعات لسهولة البحث عن الفجوات في منطقة صغيرة نسبيًّا. انتقل إلى نمط الخطوط الخارجية Outline عبر الضغط على الاختصار Ctrl+Y أو من القائمة View > Outline لتظهر لك الخطوط الخارجية لأشكال المضلعات. اختر أداة التحديد المباشر Direct Selection Tool من شريط الأدوات أو من خلال الاختصار A ثم ارسم تحديدًا حول مجموعة النقاط المتباعدة بين المضلعات والتي تُشكّل الفجوة لتقوم بتحديد هذه النقاط. يمكنك الذهاب إلى لوحة المحاذاة Arrange والقيام بمحاذاة النقاط عموديًّا وأفقيًّا مع بعضها لتجعلها متطابقة أو اختصار ذلك بالذهاب إلى القائمة Object > Path > Average… أو بطريقة أسرع، استخدم الاختصار Alt+Ctrl+J لتفتح صندوق Average. يمكنك اختيار المحاور الأفقية أو العمودية وفي هذه الحالة سنختار كليهما من الخيار الثالث والأخير Both ثم اضغط OK. تمت مطابقة النقاط المحدّدة مع بعضها لتصبح في الموضع ذاته وبذلك تم حل مشكلة الفجوة. عُد مجدّدًا إلى النمط الطبيعي عبر الضغط مجدّدًا على الاختصار Ctrl+Y لتشاهد اختفاء الفجوة. تابع رسم المضلعات انطلاقًا من النقطة التي انتهينا عندها مع مراعاة فوارق الألوان والدرجات اللونية والعناصر الأساسية في الصورة كالأنف والعين. قم بتلوين المضلعات الجديدة بنفس الأسلوب التي اعتمدناه سابقًا مع تجنّب اختيار ألوان متطابقة للمضلعات المتجاورة. في بعض الأحيان قد يَصعُب تحديد بعض المضلعات ما يمنعنا من تلوينها كما حصل في هذه الحالة هنا. ولحل هذه المشكلة افتح لوحة الطبقات ثم انقر على السهم المجاور لاسم الطبقة لتفتح لك قائمة بجميع المضلعات المرسومة. ابحث عن المضلعات غير الملونة وانقر عليها لتقوم بتحديدها وتستطيع تلوينها. تابع رسم باقي المضلّعات لبقية الصورة. قم بتلوينها بذات الطريقة المتّبعة في السابق. وكما جرت العادة سنقوم بعد رسم مجموعة من المضلعات بالانتقال إلى وضعية الخطوط الخارجية Outline بالاختصار Ctrl+Y وذلك لإزالة الفجوات بين المضلعات. ومجدّدا استخدم أداة التحديد المباشر Direct Selection Tool لتحديد مجموعة النقاط المتجاورة والتي بينها مسافة تسبب ظهور الفجوة. وأيضًا بالاختصار Alt+Ctrl+J سنقوم بدمج موقع هذه النقاط في نقطة مركزية موحّدة. لنحصل على نقطة واحدة وتختفي الفجوة. ونعود للنمط الطبيعي بالضغط مجدّدًا على Ctrl+Y لنشاهد النتيجة. سنضطّر أحيانًا للقيام بعمليات دمج متكرّرة لنقاط متجاورة بحيث قد تظهر فجوات جديدة بسبب محاولة إخفاء فجوات أخرى لذلك يجب التدقيق بشكل دائم في كافة أنحاء التصميم والتحقق من عدم وجود الفجوات. وبعد التخلص من جميع الفجوات سيظهر التصميم بهذا الشكل. للحصول على النصف الآخر علينا بتحديد جميع الأشكال المضلعة المرسومة ثم القيام بنسخها Ctrl+C ومن ثم إنشاء طبقة جديدة من لوحة الطبقات وبعدها لصق النسخة الجديدة فوق الطبقة الجديدة عبر الاختصار Ctrl+F. اضغط على النسخة الجديدة بالزر الأيمن للفأرة واختر القائمة Transform > Reflect أو حدّد النسخة الجديدة بالكامل واذهب إلى القائمة Object > Transform > Reflect اختر من النافذة المنبثقة الخيار العمودي Vertical ثم اضغط OK. حرّك هذه النسخة الجديدة المعكوسة بمفاتيح الأسهم أو بالفأرة مع الاستمرار بالضغط على مفتاح Shift وذلك للمحافظة على المحاور أثناء التحريك وضعها في الجهة المقابلة للنسخة الأصلية. وبعد التحقّق من موضع النسخة الجديدة سيبدو التصميم بهذا الشكل. والآن سنرسم بعض التفاصيل المهمة والتي ستضفي رونقًا خاصًّا على التصميم. افتح لوحة الطبقات ثم أنشئ طبقة جديدة وأخفِ طبقتي نصفي الوجه وأظهِر طبقة الصورة الأساسية. ارسم أشكالًا مضلعة فوق الخطوط الداكنة على وجه القطة بالإضافة إلى بؤبؤ العين. لوّن هذه المضلعات بالألوان الموجودة أصلًا على الصورة الأساسية بنفس الطريقة المُتّبعة سابقًا في هذا الدرس. وبذات الطريقة قم بنسخ هذه الأشكال ولصقها في طبقة جديدة ثم اعكسها وضعها في الجهة المقابلة. أنشئ طبقة جديدة وارسم عليه مضلعات طويلة ورقيقة فوق شعر شارب القطة ولوّنها باللون المشابه للون شوارب القطة. ثم انسخها أيضًا واعكسها وضعها في الجهة المقابلة. الشكل النهائي يبدو جميلًا ولكنه بعدد مضلعات خفيف جدًّا ومن الممكن زيادة عدد المضلعات وأن يكون أغلبها مثلثات للحصول على تصميم متميّز حيث توجد تصاميم ذات عدد مضلعات كبير وأخرى قليلة.
  14. سنتعلم في هذا الدرس كيفية تصميم لوحة لوجه طفل بأسلوب الفن الراقي الحديث WPAP ART وكما ترى في صورة النتيجة النهائية فإن اللوحة مفعمة بالألوان والأشكال المضلعة ما يجعلها مميزة وجميلة ومن السهل تصميم هذا النوع من الفنون، سنقوم بذلك في برنامج الإليستريتور. ما هو فن WPAP ART؟ هو فن متميز بإعادة رسم الوجوه بشكل خاص وبطريقة فنية مبتكرة ويمكن رسم شخصيات أو حيوانات أو حتى أشكال جامدة بهذا الأسلوب إلّا أن روّاد هذا الفن يقومون برسم الوجوه في الغالب. اختصار WPAP هو لعبارة Wedha’s Pop Art Potrait وذلك لأن هذا الفن منسوب باسمه بالكامل لمؤسسه الفنان المصمم وضاح عبد الرشيد وهو إندونيسي يستخدم الإليستريتور في التصميم وهذا الفن مميّز بكثرة ألوانه والمضلعات المتكسرة بحيث يبدو منبثقًا بطريقة ما من فن البكسل. وجميع اللوحات المصممة بهذا الأسلوب تعتبر تصاميم مسطحة. بكل الأحوال لا يحتاج إلى أية أدوات خاصة فقط برنامج الإليستريتور أو الفوتوشوب أو الإنكسكيب أو الكوريل درو أو أي برنامج قادر على رسم أشكال فكتور سيكون قادرًا على رسم هذه التصاميم. كيفية الرسم بأسلوب WPAP ART؟ سأعتمد في هذا الدرس على أسلوب مؤسس هذا الفن المصمم وضاح عبد الرشيد. سنحتاج إلى صورة أساسية لنقوم بتحويلها إلى لوحة WPAP ART لذلك حمّلت هذه الصورة المجانية لطفل صغير من موقع Flicker. افتح برنامج الإليستريتور ثم افتح ملفًّا جديدًا وهو بأبعاد 1067×1600 بكسل كما في الصورة التالية. وسندرج الصورة الأساسية عبر القائمة File > Place ثم نختار الصورة المطلوبة ونضعها بشكل تملأ لوح الرسم. وحتى نستطيع العمل فوق الصورة الأساسية بكل حرية سنقوم بقفل طبقة هذه الصورة من لوحة الطبقات. ثم سنقوم بإنشاء طبقة جديدة وهي الطبقة التي سنعمل عليها. يمكنك أن تستخدم أداة رسم المستطيلات Rectangle Tool لرسم أجزاء كثيرة من اللوحة وفي هذه اللوحة سنقوم بالرسم اعتمادًا على أداة القلم Pen Tool بالكامل. ابدأ برسم مسار حول الأجزاء الداكنة من العين وهي بؤبؤ العين بشكل موصول مع الرموش العليا. كما تشاهد فطريقة الرسم ليست دقيقة على الإطلاق بل هي تعبيرية وتجريدية أكثر بحيث ستشعر بالراحة والحرية أثناء الرسم وهو ما يجعل الرسم بهذه الطريقة سهلًا وممتعًا على عكس ما قد يبدو من خلال النتائج النهائية للوحات المصممة بهذا الأسلوب، إذ قد تبدو للوهلة الأولى معقدة وصعبة. من أهم مميزات هذا الأسلوب أن جميع خطوط الرسم مستقيمة فلا انحناءات فيها. فكما تشاهد في الصورة السابقة قمتُ برسم الرموش بشكل تقريبي فوق الرموش الأصلية كما أن حدود البؤبؤ مضلعة وليست دائرية. يمكنك في أي وقت أثناء عملية التصميم أن تقوم بإزالة إشارة العين من جانب طبقة الصورة الأصلية المقفلة في لوحة الطبقات لإخفائها والإبقاء فقط على طبقة التصميم لتشاهد كيفية ظهور التصميم والتعديل عليه إن اضطررت لذلك. قم بإزالة اللون من حدود الشكل والإبقاء فقط على لون التعبئة. الآن ارسم بياض العين بلون فاتح جدًّا وبنفس الطريقة عبر أداة القلم وبخطوط مضلعة فقط. والآن سننتقل إلى جفون العين وهنا سنبدأ بالإبداع بطريقتنا الخاصة حيث أننا لسنا مضطرين إلى رسم الجفن كله كجزء واحد كما فعلنا مع العين بل سنقوم برسم الجفون بعدّة أشكال مضلعة متداخلة ملونة بألوان مختلفة. ابدأ برسم الشكل الأول ولوّنه باللون الذي تريده. كما تلاحظ قمتُ برسم هذا الشكل متداخلًا مع أشكال العين وفوق بعض مساحة العين وذلك حتى لا أترك أي فراغات بين الأشكال. لهذا يجب علينا بعد الانتهاء من رسم كل شكل إرسال هذا الشكل الجديد خلف بقية الأشكال وذلك عبر الضغط على الاختصار ]+Ctrl+Shift في كل مرة أو بالذهاب إلى القائمة Object > Arrange > Send to Back والآن سنتابع بنفس الأسلوب بحيث سنرسم شكلًا جديدًا يكون متراكبًا قليلًا فوق الأشكال المحيطة المرسومة سابقًا لتجنب وجود أي فراغات في التصميم ثم نرسله للخلف وهكذا مع تغيير الألوان في كل مرّة. وسنتابع مع مراعاة بعض الأجزاء الأساسية في اللوحة الأصلية كالحاجبين بحيث سنقوم برسمها بشكل تقريبي مضلع وبلون داكن يمثّل وجودهما. أمّا باقي الأشكال الأخرى فستكون أيضًا متداخلة وملوّنة. ويمكنك في أي وقت أن تغيّر ألوان بعض الأشكال التي رسمتها في حال وجدتها غير متناسقة بالطريقة التي تريد رسم اللوحة بها. ولستَ مضطرًّا لرسم الأجزاء الكبيرة كالأنف والفم بشكل واحد كبير بل يجب أن يتم رسم عدّة أشكال بحيث تغطّي مساحة العنصر مع توضيح وجود هذا العنصر. هنا رسمتُ الأنف بشكلين منفصلين مع ترك المساحة الوسطى فارغة ما يجعلها تظهر في النتيجة النهائية باللون الأبيض بما أن لون الخلفية النهائي سيكون باللون الأبيض في هذا التصميم كما رسمتُ فتحتي الأنف بشكل منفصل أيضًا. يمكننا أن نرسم أشكالًا مضلعة رقيقة فوق منطقة الشعر للدلالة على اتجاه الشعيرات مثلًا أو قد يمكننا القيام بذلك فوق مساحات انعكاس الإضاءة على الشعر ولكنها في النهاية ستبقى أشكالًا مضلعة وغير منحنية، ولا ننسى تغيير الألوان. سنرسم الشعر بعدة أشكال متداخلة كما سنرسم الأذن أيضًا بعدة أشكال متداخلة مع مراعاة الشكل الأصلي والرسم فوق تفاصيل أجزاء العضو. نلاحظ أننا قمنا برسم الشعيرات الصغيرة قبل رسم كتل الشعر الكبيرة وذلك حتى لا تكون الأشكال الصغيرة خلف الأشكال الكبيرة لأننا نقوم بإرسال كل شكل جديد للخلف. ارسم الآن حلي الطفل. الدقة غير مطلوبة بحيث من الممكن أن نجعل الحلي على شكل مستطيلات فقط للتعبير عن وجودها. ارسم الشفتين واللسان وداخل الفم والسن الصغير الظاهر مع رسم بعض الأشكال المتعرجة فوق الشفاه للدلالة على انعكاس الإضاءة. تابع رسم باقي أشكال الوجه الملونة المتداخلة. والآن انتهينا من رسم أشكال الوجه كاملًا. يمكنك في أي وقت أن تعدّل ألوان الأشكال المرسومة. من الممكن الاكتفاء بهذا القدر من الرسم وذلك بحسب طبيعة التصميم الذي تعمل عليه في حال كنت بحاجة إلى الوجه فقط. ارسم أشكال الملابس بذات الطريقة مع مراعاة انحناءات الملابس وأجزاءها. الآن قم بإخفاء طبقة الصورة الأصلية وشاهد التصميم النهائي. أية تعديلات على الأشكال يمكنك القيام بها عبر أداة التحديد المباشر Direct Selection Tool كما يمكنك القيام بالتعديلات على الألوان أيضًا. وبعد الانتهاء من كافة التعديلات سنقوم بوضع اللمسة الأخيرة وهي الخلفية بحيث يمكنك جعلها بلون مختلف مع رسم بعض المضلعات العشوائية أو المربعات والمستطيلات العشوائية الملونة فيها أو أن تقوم برسم أشكال كبيرة بسيطة تغطي بعض الأجزاء منها كما فعلتُ هنا حيث رسمتُ شكلين كبيرين يغطيان مساحة كبيرة من الخلفية مع ترك باقي الخلفية باللون الأبيض. يمكننا بعدها نقلها إلى الفوتوشوب للقيام ببعض التعديلات كإضافة تأثير الجرونجي بالخامة المناسبة عبر وضع طبقة خامة الجرونجي فوق طبقة التصميم ثم تغيير خصائص مزج هذه الطبقة إلى Multiply مع تخفيف التعتيم للنصف تقريبًا حتى لا يطغى تأثير الخامة على التصميم الأساسي ومن ثم إضافة التوقيع أو الشعار. هذه لوحة مرسومة بأسلوب فن WPAP ART بسيطة وسهلة وجميلة. يمكنكم أيضًا القيام بذلك فالأمر سهل وغير معقّد. المصادر: صورة الطفل من موقع Flicker مجانية بالترخيص CC BY 2.0 للمصوّر GeniusDevil. صورة خامة الجرونجي مجانية ضمن حزمة Mega Freebie Bundle من موقع AlienValley.com.
  15. في الدرس السابق قمنا باستخدام برنامج فوتوشوب لتصميم واجهة موقع لغابة افتراضية باسم "Pinewood Forest". أمّا في هذا الدرس فسوف نقوم بتكويد ذلك التصميم باستخدام لغتي HTML وCSS وتحويله إلى صفحة ويب كاملة. كما سنقوم أيضًا باستخراج الصور الموجودة في التصميم لاستعمالها في الموقع. في حال أنك لم تقرأ الدرس السابق، أنظر إلى الصورة في الأعلى لترى التصميم الذي سوف نقوم بتكويده. يحتوي الموقع على صورة خلفية كبيرة وثابتة لتسمح لمحتوى الموقع بالتمرير(scroll) فوقها، والمحتوى نفسه مجزأ إلى عدة أجزاء، وتم استخدام مجموعة من الصور لجذب انتباه الزائر. استخراج الصور الموجودة في التصميم ستكون الخطوة الأولى قبل البدء بتكويد التصميم هي استخراج الصور من التصميم. بعض أجزاء التصميم يمكن عملها باستخدام CSS فقط ولكن أجزاء أخرى من التصميم سنحتاج فيها إلى الصور. يحتوي الجزء الرئيسي للموقع على صورة خلفية كبيرة، وسوف نحتاج إلى ضغط هذه الصورة لتقليل حجمها الكبير وذلك عن طريق اللجوء إلى خيار Save for web. كما قلنا سابقًا، سيحتوي الموقع على خلفية ثابتة وسوف يظهر المحتوى فوق هذه الصورة، وبالتالي فإن العناصر مثل الشّعار سنحتاج إلى استخراجها بصيغة PNG-24 لأن هذه الصيغة تدعم الشفافية (transparency). ستكون خلفية المحتوى الرئيسي للموقع ذات طابع شفاف أيضًا وبالتالي سوف نحتاج إلى استخراجها بصيغة PNG، وهذه الخلفية سيتم تقسمها إلى ثلاثة أقسام؛ قسم علوي وقسم سفلي وقسم مكرر في المنتصف. المجموعة النهائية للصور سوف تحتوي على صور بصيغة PNG وأخرى بصيغة JPEG. بعض الصور ستكون بحجم صغير، وهذه الصور سيتم تكريرها (باستخدام CSS) لإنشاء خلفيات مزخرفة، أمّا الصور الأخرى فسوف تكون صورًا بديلة عن النصوص لاستخدامها كعناوين. بنية ملف HTML <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Visit Pinewood Forest</title> <link href="styles.css" rel="stylesheet" /> </head> <body> <div id="container"> </div> </body> </html> سيحتوي الملف الرئيسي (index file) على أكواد HTML. يُستخدم <doctype html!> لتعريف المتصفح بإصدار HTML المُستخدم ويعتبر أيضًا من الممارسات الجيدة في عالم تصميم الويب، لذلك احرص على أن يكون موجودًا في كل موقع تقوم بتصميمه. يتبع ذلك وسم <head> ويحتوي هذا الوسم على عنوان الصفحة وعلى رابط لملف CSS. وأخيرًا يوجد وسم <div> وسيحتوي هذا الوسم على بقية عناصر/وسوم الصفحة. <body> <div id="container"> <div id="header"> <p id="logo"> <a href="#" title="Return to the homepage"> <img src="images/pinewood-forest-logo.png" alt="Pinewood Forest logo" /> </a> </p> <ul> <li><a href="#">Visit</a></li> <li><a href="#">Discover</a></li> <li><a href="#">Trails</a></li> <li><a href="#">Maps</a></li> </ul> </div> </div> </body> </html> يبدأ التصميم بوسم div مع إعطائه id بقيمة "header" وسيحتوي هذا الوسم على الشّعار وعلى عناصر القائمة الرئيسية (navigation items)، وسيكون الشعار عبارة عن صورة داخل وسم <img> موضوعة في وسم <a>. تُستخدم title الموجودة في وسم <a> لتعريف المستخدم بالوجهة التي سيصل إليها حال نقره على الرابط، أمّا alt في وسم <img> فإنها تُستخدم لإعطاء المستخدم وصفًا عن الصورة في حالة عدم ظهور الصورة. يُعتبر وسم <ul> هو الوسم الشائع عند عمل القوائم الرئيسية لأنّه يُصوّر لنا وبدقة تلك القائمة على هيئة HTML حتى لو لم يكن هناك تنسيقات CSS. وبالرجوع إلى التصميم يمكنك ملاحظة أن الشعار موجود في الوسط بين قوائم العناصر الرئيسية، ولكننا سنبقي كلا العنصرين (الشعار والقائمة الرئيسية) مفصولين عن بعضهما حتى نحصل على هئية وملف HTML نظيف ومُرتّب، وسنلجأ لاحقًا إلى استخدام CSS لتحريك تلك العناصر حتى نحصل على نتيجة مرضية ومطابقة للتصميم. <div id="content"> <div id="feature"> <div id="feature-content"> <h1>Explore the forest</h1> <p>Find everything you need to explore and discover the mysteries of the forest, from maps and trail guides to must see attractions</p> <p class="btn"><a href="#">Begin your journey</a></p> </div> </div> </div> بعد الترويسة (header) تأتي منطقة المحتوى الرئيسي (main content)، ولجعل هيكل ملف HTML نظيفًا فسوف يتم وضع جميع العناصر في وسم <div> واحد، كما وستظهر منطقة الـfeature في بداية الصفحة وداخل وسم <div> ليتم تموضعها بشكل دقيق ومناسب. أمّا بالنسبة للعنوان الرئيسي في الصفحة (الذي يحتوي على النص "Explore the forest") فسوف يتم وضعه داخل وسم <h1>. لاحظ أيضًا أنه تم إضافة "class="btn إلى العنصر <p> ليمكننا تحويل هذا العنصر إلى زر باستخدام CSS. المستوى الثاني من العناوين سيكون موجودًا داخل وسم <h2>، وسيكون المحتوى الرئيسي منقسمًا إلى عمودين، بحيث يكون العمود الأكبر عبارة عن div مع id بقيمة "main" وبداخل هذا العمود توجد النصوص (عناصر <p>). لا تنسى تحويل الروابط إلى عناصر <a> وأي رموز خاصة (characters) إلى ما يقابلها من HTML entities (مثل رمز "&" يتم تحويله إلى "&"). وفي الأسفل من نفس العمود يوجد قسم "upcoming events"، ويمكننا استخدام عناصر <dl> ،<dt> و<dd> (اختصار للكلمات "Definition List"، "Definition Term" و"Definition Description" على التوالي) بحيث تحتوي عناصر dt على تاريخ الحدث وعناصر <dd> على وصف بسيط للحدث. لاحظ أننا استعملنا وسوم <span> داخل عناصر <dt> وذلك لإعطائها تنسيقات مميزة باستخدام CSS. <div id="side"> <div class="aside"> <a href="#"><img src="images/tracks-and-trails.jpg" alt="Tracks and Trails" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/mountain-biking.jpg" alt="Mountain Biking" /></a> <p>Pinewood Forest is home to some of the most demanding XC and Freeride Mountain Biking routes<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/christmas-events.jpg" alt="Christmas Events" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> </div> </div> <div id="footer"> <p id="back-to-top"><a href="#">Back to top</a></p> </div> </div> بالنسبة للعمود الأصغر فسوف يكون موجودًا داخل عنصر div آخر مع id بقيمة "side". تتكون القائمة الجانبية (sidebar) من ثلاثة أقسام رئيسية وكل قسم يحتوي عنوان على شكل صورة وعلى وصف بسيط لكل قسم، ولأن كل صورة تحتوي على نص بداخلها فقد قمنا باستخدام alt لكل صورة حتى نحافظ على ما يسمى بالـaccessibility. وفي نهائية الصفحة قمنا بإغلاق وسم <div> الخاص بالمحتوى وتحتها يوجد div خاص بالـfooter وبادخله نص "Back to top" ليأخذنا إلى أعلى الصفحة عند الضغط عليه. انتهينا إلى الآن من هيكلة ملف HTML ويمكنك إلقاء نظرة إلى الصورة في الأعلى لترى كيف يجب أن يظهر بدون CSS. لاحظ أنه يمكن قراءة الملف حتى بدون تنسيق الملف باستخدام CSS. تنسيق الصفحة باستخدام CSS body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { font: 14px/26px Georgia, Serif; color: #444a54; background: #2d3237 url(images/bg-photo.jpg) center top no-repeat fixed; } #container { width: 960px; margin: 50px auto; } لنبدأ الآن بتنسيق الموقع باستخدام CSS. يُستخدم السطر الأول من أجل إزالة أي تنسيقات افتراضية للمتصفحات (يسمى هذا "CSS reset")، وبعد ذلك يوجد داخل المحدد body الخصائص العامة للخطوط في الموقع وصورة خلفية، ولأننا نريد هذه الصورة أن تكون ثابتة لا تتحرك مع باقي الصفحة عند التمرير(scrolling) فقد قمنا بإعطائها القيم "fixed" ،"top" و"center". وقد قمنا بإضافة لون أزرق (2d3237) حتى تظهر الخلفية بشكل أفضل لمن لا يمكنه رؤية الصورة لسبب أو لآخر وكذلك لمن يمتلك شاشات بدقة وأبعاد ضخمة. أمّا بالنسبة للحاوي الرئيسي (main container) فقد تم إعطاؤه عرض ثابت بقيمة 960px وتم توسيطه باستخدام الطريقة الشائعة margin: 0 auto. header { background: url(images/content-top.jpg) center bottom no-repeat; overflow: hidden; } header p#logo { position: relative; width: 295px; margin: 0 auto -74px auto; } header ul { width: 916px; margin: 0 auto 110px auto; overflow: hidden; list-style: none; } header li { float: left; } header li:nth-child(1) { margin: 0 70px 0 0; } header li:nth-child(2) { margin: 0 325px 0 0; } header li:nth-child(3), header li:nth-child(4) { margin: 0 0 0 70px; } header li a { font-size: 16px; letter-spacing: 9px; color: #4e5761; text-decoration: none; } header li a:hover { color: #7c8896; } يمكنك ملاحظة أنه تم إضافة صورة كخلفية للقسم العلوي من جزء المحتوى إلى الأسفل من الترويسة. ولموضعة الشعار وعناصر القائمة الرئيسية كما هو موجود في التصميم، فقد استخدمنا الخاصية margin بقيم سالبة. ولأن عناصر القائمة موجودة في كلا الجانبين من الشعار فقد تم استخدام nth-child لتحديد كل عنصر من العناصر الأربعة وإعطائه قيمة margin مناسبة، وعن طريق استخدام letter-spacing استطعنا تنفيذ التباعد بين الحروف(tracking) الموجود في التصميم. content { padding: 0 52px; overflow: hidden; background: url(images/content-repeat.png) center top repeat-y; } content #feature { width: 916px; height: 420px; position: relative; margin: 0 0 30px -30px; background: url(images/feature-bg.jpg); } content #feature #feature-content { position: relative; width: 384px; top: 92px; left: 460px; } content #feature #feature-content h1 { widht: 384px; height: 91px; margin: 0 0 5px 0; background: url(images/explore-the-forest.png); text-indent: -9999px; } content #feature #feature-content p { color: #fff; margin: 0 0 15px 8px; } content #feature #feature-content p.btn a { display: block; widows: 163px; height: 39px; background: url(images/begin-your-journey.png); text-indent: -9999px; } content #feature #feature-content p.btn a:hover { margin: -1px 0 0 0; } بما أنّ ارتفاع div الخاص بالمحتوى سيختلف من صفحة لأخرى، فقد قمنا باستخدام صورة ليتم تكريرها حتى نسمح لجزء المحتوى أن يتمدد بدون قيود، واستخدمنا padding على اليمين واليسار حتى نُبعد محتوى الصفحة عن الحواف. ولأنّ منطقة المحتوى ستحتوي على عمودين وكل منهما يحتوي على الخاصية float، فسوف نحتاج إلى استخدام overflow: hidden حتى يظهر كل شيء بشكل جيد. إعطاء قسم الـfeature الخاصية position: relative سيسمح للمحتوى بالتحرك في مكانه، كما أنّ القيمة السالبة للخاصية margin ستعوّض عن قيمة padding التي تم إعطاؤها لـdiv المحتوى وذلك لنسمح لذلك القسم بالتمدد إلى أقصى أطراف الصفحة. كما أنه تمّ استخدام صورة في وسم h1، ولكن تم تنسيق الفقرة باستخدام خصائص font في CSS. وبالنسبة للزر، فقد تم استخدام صورة وإعطائه بعض التنسيقات حتى يظهر بشكل جيد. content #main { width: 536px; float: left; margin: 0 20px 0 0; } content h2 { font-size: 20px; font-weight: normal; margin: 0 0 20px 0; } content p { margin: 0 0 20px 0; } content a { color: #3f6489; } content a:hover { color: #0d3965; } content dl { } content dt { float: left; width: 40px; height: 50px; margin: 0 15px 0 0; background: #a1a3a5 url(images/date-bg.png); font-size: 30px; color: #fff; text-align: center; } content dt span { display: block; font-size: 12px; font-weight: bold; text-transform: uppercase; } content dd { float: left; width: 480px; } content dd h3 { float: left; font-size: 20px; font-weight: normal; } content dd span { float: left; margin: 4px 0 0 10px; visibility: hidden; } content dd p { clear: left; } content dd:hover span { visibility: visible; } سيكون الـdiv الرئيسي هو الأعرض بين العمودين؛ بعرض 536px. وسيكون العرض لكل من main وside بالإضافة إلى الـmargin بينهما هو العرض الخاص بـdiv الأب منقوصًا منه قيمة padding اليسار واليمين. تم تحويل عناصر dt إلى أيقونة التاريخ عن طريق إعطائها عرض وطول ولون خلفية رمادي. وباستخدام تنسيقات font مناسبة أمكننا جعل نص التاريخ كبيرًا وبلون أبيض، كما أنّه تم جعل الخط الخاص بالعنصر span أصغر بقليل حتى يظهر الشهر أسفل رقم اليوم بشكل جميل. وحتى تظهر عناصر dt وdd بجانب بعضها فقد تم إعطاؤها الخاصية float: left. لاحظ أننا استخدمنا visibility: hidden على العنصر span وذلك حتى نخفيه عن أنظار الزائر إلى أن يضع مؤشر الفأرة فوق عنصر dd لنقوم عندها بإظهار رابط "View more info". content #side { width: 300px; float: left; } content .aside { padding: 17px 0 0 17px; margin: 0 0 30px 0; background: url(images/aside-bg.png) center top no-repeat; } content .aside img { margin: 0 0 15px 0; } footer { padding: 70px 22px; background: url(images/content-bottom.png) center top no-repeat; } footer p#back-to-top { float: right; font-size: 11px; } footer p#back-to-top a { color: #fff; text-decoration: none; } footer p#back-to-top a:hover { color: #d7d9d8; } كل عنصر aside. تم إعطاؤه خلفية مزخرفة، وبالنسبة للخطوط فإنها ستأخد التنسيقات الخاصة بـ div المحتوى بسبب ما يسمى بالتوريث (inheritance). أمّا بالنسبة لرابط "back to top" فسوف نضطر إلى إعطائه تنسيقات جديدة لأنه موجود خارج div المحتوى، ولأنّ هذا الرابط موجود ضمن خلفية داكنة وخارج المحتوى الرئيسي فإننا سنحتاج لتعديل الألوان وجعلها مختلفة عن البقية الموجودة في باقي الصفحة. بقي شيء واحد قبل أن ننتهي من هذا الدرس وهو أنّه يجب عليك أن تعرف أن خاصية nth-child غير مدعومة في بعض إصدارات متصفح Internet Explorer، لذلك إذا أردت أن تدعم تلك المتصفحات فيجب عليك استخدام jQuery: $(document).ready(fucntion() { $("#header ul li:nth-child(1)").css("margin-right", "70px"); $("#header ul li:nth-child(2)").css("margin-right", "325px"); $("#header ul li:nth-child(3)").css("margin-left", "70px"); $("#header ul li:nth-child(4)").css("margin-left", "70px"); }); إلى هنا نكون قد أنهينا درسنا وحصلنا على صفحة كاملة وجاهزة. يمكنك أيضًا تصفح الموقع بشكله النهائي إذا أحببت ذلك. أو تصفح الملفات المصدرية. ترجمة -وبتصرف- للمقال: Design a Textured Outdoors Website in Photoshop لصاحبه: Iggy.
  16. هنالك الكثير من القواسم المشتركة بين مسوِّقٍ عبر الشّبكات الاجتماعيّة وبين مُعلنٍ رائع كان يعمل في الستّينيّات من القرن المنصرم. وقد اشتهر David Ogilvy، وهو الأب الرّوحي للإعلان، بأنّه يقضي الكثير من الوقت في انتقاء العناوين، لأن العنوان هو أكثر سطرٍ يقرأه النّاس، وهو في غاية الأهميّة. وكان Ogilvy أستاذًا في أشياء كهذه، أي في ترتيب الأشياء بحسب أهميّتها. لو عاش وشَهِد زمن الشّبكات الاجتماعيّة، فأنا متأكّدٌ من أنّه سيقول شيئًا من قبيل: لم تكن الصّور بهذه الأهميّةً من قبل في الشّبكات الاجتماعيّة. فقد أصبحت الآن مفتاحًا لجذب المزيد من التّفاعل عبر الإنترنت، ويشبه في ذلك العنوان في الإعلان. المشكلة الوحيدة هنا هي عندما لا تكون بارعًا تمامًا في تصميم الرّسوم البيانيّة، وقد يكون إنشاء صورٍ ملفتة للنّظر ومثيرة للاهتمام عندئذٍ أمرًا صعبًا. كيف يمكن لغير المصمّمين أن يقوموا بإنشاء صورٍ رائعة للشبكات الاجتماعيّة؟ يمكن فعل ذلك من خلال تعلّم مبادئ تصميم بسيطة قابلة للتّكرار. وإليك ثلاث مبادئ أساسيّة في التّصميم تساعدك على إنشاء صور ملفتة للشّبكات الاجتماعيّة كلّ مرّة: المبدأ الأول: قم بإنشاء مخطط بسيط ومتوازن هكذا بدت طاولتي في Airbnb اليوم صباحًا وهكذا بدت طاولتي بعد حوالي 30 ثانية. هل تلاحظ أيّ فرق؟ تحتوي كلتا الصّورتين على نفس العناصر. لم يتم إزالة أي شيء من الطّاولة، ومع ذلك فالصّورة الثّانية تبدو أفضل بكثير عند إجراء تعديلٍ طفيف على التّنسيق، على الأقل بالنّسبة لي. ويمكن أن نتعلّم درسًا بسيطًا من ذلك، وهو أنّ تنسيق العناصر في الصّور يُحدِث فرقًا كبيرًا. ألقِ نظرةً على هذين المثالين الأساسيين: ألا تبدو الصّورة الثّانية أفضل بكثير؟ ذلك بسبب مبدئين اثنين من مبادئ التّصميم المتعلّقة بتنسيق الصّورة، وهما التّقارب proximity والمحاذاة alignment. التقارب كما يوضّح Bakari Chavanu: في المثال أعلاه، وفي الصّورة الأولى تم وضع الأيقونة والنّص بشكل متقارب جدًا. وذلك يحرم كلًا من العناصر من الوقوف لوحدها والقيام بدورها. توصل الأيقونة بصريًا فكرة ركوب الأمواج يوصل النّص تفاصيل عن ركوب الأمواج يعني تطبيق مبادئ التّقارب أنّه يجب توجيه المشاهد مباشرةً إلى الأيقونة ثم إلى النّص بشكلٍ واضح. ممّا يتيح للمشاهد فهم ما يُراد إيصاله بشكلٍ أفضل. في المثال الثّاني، تمّ تجميع النّص إلى جانب النّص فقط. إنّ تطبيق مبدأ التّقارب يضفي الوحدة unity والتّتابع continuity على الصّور. المحاذاة إنّ محاذاة العناصر في الصّورة بشكلٍ مناسب يساعد في الحفاظ على التّوازن. وإليك مثال صور مدرسة التّزلّج مرّةً أخرى. أعلى الأيقونة والنّص متحاذيين في كلتا الصّورتين. النّص بأكمله متراصف في الصّورة اليُمنى فقط. أسفل الأيقونة والنّص متحاذيين في الصّورة اليُمنى فقط. تسهم جميع هذه الاختلافات الصّغيرة في جعل الصّورة اليُمنى أكثر توازنًا وجذبًا. كيفيّة إنشاء صور متوازنة وبسيطة عندما يكون لديك عناصر مختلفة في الصّورة التي تقوم بإنشائها، كالنّص، والأيقونات والرّسوم الإيضاحيّة، فعليك أن تفكّر بالدّور الذي يلعبه كلّ عنصر في الصّورة. حافظ على نوعٍ من المحاذاة بين العناصر المختلفة، سواء كان عموديًا، أو أفقيًا أو مائلًا. المبدأ الثاني: يحدث اللون فرقا كبيرا تقول Leslie Cabarga، مؤلّفة كتاب دليل المصمّم إلى تركيبات الألوان The Designer’s Guide to Colour Combinations: إنّ اللّون ليس مجرّد عنصر مرئي فحسب، وإنّما عنصرٌ شعوري أيضَا. وبما أنّ اللّون يثير مشاعر معيّنة، فغالبًا ما قد يحدّد فيما إذا كان النّاس ينجذبون إلى الصّور التي تقوم بإنشائها أم لا. وذلك لا يعني أنّ الأمر ببساطة الابتعاد عن درجات ألوانٍ معيّنة، وإنّما يعني ضرورة التّفكير بالدّور الذي يلعبه لونٌ معيّن في ما تبتكره. وذلك الدّور بسيط هو إحداث تباين في صورك. وتصف Callie Kavourgias وظيفة اللّون والتّباين هذه كما يلي: وإليك مثالين بسيطين عن ذلك في الصّورتين التّاليتين، لكلّ زوج من الدّوائر اللّون نفسه في المنتصف، لكن يبدو كلٌ منهما مختلفًا عن الآخر. وقد تلاحظ تغيّرات في العمق مع تغييرات الألوان المختلفة: ويُظهِر هذا التّباين أنّ إدراك الألوان المستَخدمة في صورك قد يختلف اختلافًا كبيرًا بحسب طريقة مزجك لها. إنّ المبدأ الأساسي عندما يكون الأمر متعلّقًا بالألوان والتّباين: حافظ على البساطة، فغالبًا ما يكون الأقل هو الأقوى تأثيرًا. من الضّروري أن تختار مزيجًا من الألوان المتناسبة، لكن كيف تختار الألوان؟ كيفية اختيار ألوان متباينة Paletton من الأدوات الرّائعة التي اكتشفتها مؤخّرًا للمساعدة في اختيار الألوان المتباينة. وهي أداةٌ تختار ألوانًا متباينة ومتمّمة لبعضها البعض لئلا تضطرّ للتّفكير بالموضوع كثيرًا. في هذا المثال، اخترت الأحمر كلونٍ أساسي، والمتمثّل بأعلى نقطة في عجلة الألوان، وطلبت نسق الألوان الأحاديّة، وهو نسق الألوان الذي يرتكز على ظلال ودرجات لونٍ واحد. عندما أقوم بالمرور فوق المربّعات المختلفة على اليمين، تظهر لي رموزًا ست عشرية، مثل FF6B6B الذي يمكن رؤيته في الجزء الأيمن من الصّورة أعلاه، والذي يمكن أن أستخدمه في تصميماتي. في المثال الثّاني، استخدمت الأحمر أيضًا كلونٍ أساسي، لكنّني طلبت هذه المرّة نسق ألوانٍ تكاملي ثلاثي، أي ثلاث ألوان متموضعة بشكلٍ متساوي في الخطوط حول عجلة الألوان. ومرّة أخرة، أستطيع اختيار ألوانٍ متباينة تتلاءم مع بعضها. هنالك أداةٌ أخرى أستخدمها كثيرًا وهي Brand Colors، عبارةٌ عن مجموعة رموز ألوان رسميّة للشّركات ذات الشّهرة العالميّة. يظهر الرّمز السّت عشري عند المرور فوق أيّ لونٍ من الألوان، كما فعلت هنا مع شركة Addvocate،. عندما أشعر بالعجز ولا أتمكّن من التّفكير في مزيجٍ عظيم من الألوان، فغالبًا ما أستخدم أداة Brand Colors لأستوحي الأفكار. وهذا النّوع من الأدوات ينقذ غير المصمّمين من أمثالي. المبدأ الثالث: اختر خطوطا متناسقة وتسهل قراءتها قد يكون هذا التّشبيه مستخدمًا كثيرًا، لكنّ اختيار الخط يشبه اختيار الملابس التي ترتديها إلى حدٍ ما. إنّ اختيارك لملابسك يعكس جزءًا من شخصيّتك وأسلوبك. فالدّخول إلى اجتماع وأنت ترتدي بدلة مقابل أن ترتدي قميصًا بكمّين قصيرين وسروالًا قصيرًا يترك انطباعات مختلفة عنك لدى الآخرين. ومن هذا المنطلق، فعندما تستخدم خطوطًا في الصّور التي تضعها على الشّبكات الاجتماعيّة فإنّها توصل رسالة أساسيّة عنك وعن شركتك. لنستخدم مثالًا على ذلك، إليك صورتين للشبكات الاجتماعيّة يمكن الاختيار بينهما، أيّهما تفضّل؟ في الحقيقة أنا أميل نحو الصّورة على اليسار لسببين: لأن قراءتها أسهل الخطّان يبدوان متكاملين أكثر وذلك لا يعني أنّ الصّورة الأخرى سيئة للغاية، وإنّما يوضّح أهميّة التّركيز على دور النّص. يلخّص Max Luzuriaga، وهو مصمّم ومطوِّر ويب، الأمر بشكلٍ جيد: وذلك يطرح سؤالًا هامًا للغاية، كيف نختار الخط الذي نستخدمه؟ يمكن أن نعتمد هنا على نصيحة Dan Mayer الحكيمة عندما يقول: أفضل ما في اختيار الخطوط هو أنّك غير مضطرٍ للقيام بالكثير من العمل. تكشف لك بعض المواقع مثل Font Pair الخطوط التي تتماشى مع بعضها البعض إنّ إجراء بحثٍ سريع على جوجل، (كالبحث عن "best fonts for business quotes”) ، يقدّم لك أمثلة رائعة يمكن نسخها كيف تختار الخطوط للصّور التي تقوم بإنشائها: البسيط أفضل من المزخرف كن ثابتًا واستخدم نفس الخط بشكلٍ متكرّر عند إضافة خطٍ ثانٍ، اختر شيئًا مختلفًا فعليًا لكن ببساطة الخط الأوّل ختاما يسعدنا أن نسمع رأيك: كيف تقوم أنت بإنشاء صورٍ جذّابة للشّبكات الاجتماعيّة؟ ما هي المصادر التي ساعدتك على إنشاء تصاميم رائعة؟ ما هي المبادئ التي لم أذكرها والتي أثبتت جدواها بالنّسبة لك؟ ترجمة -وبتصرّف- للمقال How to Create Engaging Images for Social Media: A Simple Guide For Non-Designers لصاحبه Roy Olende.
  17. يُدرك كل مصمّم جرافيك أنّ مهمّة اختيار تركيب ومزج الألوان وتناسقها هي واحدة من أهم أجزاء عمليّة التّصميم، سواء أكان ذلك التّصميم موجّه للطّباعة أم للعرض على شبكة الويب. لا يوجد أي تركيبة ألوان عالميّة وموحّدة بإمكانها أن ترضي جميع العملاء. بالنّسبة لبعض المصمّمين فإنّ عمليّة تركيب الألوان هي مسألة التّجربة وتحديد الأخطاء ثم التجربة مجدّدًا وهكذا، إلى غاية الحصول على التّركيبة المناسبة، ولكن اعتماد هذه الطّريقة يعني إهدار الكثير من الوقت الثمين. الوقت الذي يُعتبر سلعةً هامة في عالم تصميم الجرافيك والذي يسير بخطوات متسارعة. إلاّ أنّه يُمكن التّقليل من ذلك الوقت عن طريق الاعتماد على بحوث ودراسات متخصّصة ومناسبة، وكذلك من خلال استخدام الذّوق الذي تتمتّع به كمصمّم أو حدسك السّليم تجاه الأنماط. كيف تفهم أساسيات عجلة الألوان Color Wheelقبل كلّ شيء، من المهم أن تعرف أساسيّات عجلة الألوان، ويجب على كلّ مصمّم أن يطّلع عليها عن ظهر قلب. الضّوء الأبيض هو مزيج من كل ألوان الطّيف، والتي تنقسم إلى ثلاث مجموعات أساسيّة هي: الأحمر، الأزرق والأصفر، ومن خلال المزج بين تلك الألوان الثلاثة بإمكانك أن تركّب أي لون تتخيّله ويمكن للعين البشرية أن تراه. وحتّى تكون قادرا على خلق تركيبات ألوان جميلة وجذّابة يجب عليك أوّلا أن تعرف عجلة الألوان Color Wheel، حيث سأحاول شرحها لك بطريقة سهلة خالية من التّعقيدات. الألوان الأحادية monochromatic colorsتجعلك تستخدم لون واحد من مجموعة ألوان مختلفة، على سبيل المثال: بإمكانك استخدام تركيبة هذه الألوان لتصميم موقع معيّن : الّلون الأساسي الذي قمنا باستخدامه في الصورة السابقة هو الّلون الأخضر، الأخضر الفاتح (50% أبيض) والأخضر الغامق (50% أسود). واستخدام الألوان الأحادية monochromatic colors في التصاميم يضيف لها رونقًا واحترافية، فيكون التصميم بسيطًا لا تعقيد فيه (خاصة إذا كان التصميم يستخدم قليلا من الإضافات والتأثيرات إلا أن ذلك قد يجعل منه تصميما مملًا ومنفرًا. الألوان المكملة Complementary colors من أكثر تركيبات الألوان جاذبيّة هي تلك التي تُظهر التّناقض وتلفت الانتباه. وتنتج تلك النّوعية من خلال المزج بين الألوان التي تكون متقابلة في الدّائرة اللّونيّة، حيث تتميز بكونها ألوانا جريئة، مثيرة للاهتمام وجذّابة بصريا. تأكّد خلال تركيبك للألوان الخاصة بتصاميم عملائك أن تختار تلك التي تظهر بشكل جميل حين تقوم بمزجها، بعض التّركيبات سينتج عنها ألوانا جدّ صارخة، حاول أن تتجنّبها. الألوان التماثلية Analogous colors الألوان التّماثلية Analogous colors هي الألوان التي تصطف بجانب بعضها البعض علي عجلة الألوان الأساسية، وهي شبيهة بالألوان الأحادية monochromatic colors في كونها مناسبة جدا للتّصاميم المهنية والتّجارية، كما أنّها ملفتة للانتباه باعتبارها تضيف نوعا من التباين والجاذبية على التّصميم. الألوان التّماثلية سهلة الاستخدام ودائما تظهر بشكل جميل. الألوان المثلثية Triadic colors الألوان المثلّثية Triadic colorsهي ألوان مستقلة موجودة على العجلة والتي تشكل مثلّثا بمجرد الربط فيما بينها، ويتميز هذا النمط من الألوان في كونه يخلق نوعا من الجماليّة والتوازن. إرضاء العملاء باستخدام تركيبات لونية صحيحة ومناسبة كما ذكرنا سابقا فإنّه لا يمكننا إقناع جميع العملاء باستخدام نموذج ألوان معيّن، يجب أن تعرف أولا مؤسّسة عميلك (إذا كان التصميم مثلا خاص بمؤسّسته)، وقبل أي شيء آخر يجب أن تعرف ما تقوم به الشركة والمنتجات أو الخدمات التي تقدّمها، ذلك سيعطيك فكرة أولية حول نوعيّة الألوان التي ستختارها، وأيضا لا تنسى أن تطلع على مجموعة من تصاميم لشعارات ناجحة. المطاعم، الوجبات السريعة والمنتجات الغذائيةبالنّسبة للشّركات التي تركّز على الغذاء والطعام، حاول أن تستخدم اللّونين الأحمر والأصفر بكثرة، لأنها تعتبر ألوانًا جذّابة وسهلة الالتصاق بذهن المتلقي (الشخص الذي يراه)، بالإضافة إلى أنه يُنصح باستخدام الألوان الحارة والصّلبة، لأن اللونين الأصفر والأحمر يحفزان على الشعور بالجوع من خلال تسريع عمليّة الأيض، الأمر الذي يؤدّي إلى فتح الشهية ورفع من نسبة الطلب على الأكل أكثر مما ينبغي، تجنب استخدام اللون الأزرق والأرجواني للمطاعم نهائيا، لأنها تعمل على التخفيف من شهية الأكل لا شعوريا. أجسامنا تتفاعل سلبيا مع اللون الأزرق والأرجواني، أما الأخضر والبني فهما لونين مناسبين للاسترخاء و الأطعمة غير الرسمية (casual) كالمقاهي مثلا، كذلك جرّب أن تستخدم الألوان المكمّلة والألوان المثلثية. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمطاعم، الوجبات السريعة والمنتجات الغذائية: مساحيق التجميل ومواد التنظيفهنا نختار الألوان التي تعبر عن الأنوثة، النعومة والنّظافة. ألوان الباستيل مثل الأبيض، الأرجواني، الأزرق الفاتح، والزهري الفاتح هي اختيار رائع يمكنك استخدامه. تجنّب الألوان الحارّة وغير الناعمة، كما بإمكانك استخدام الألوان الأحادية والألوان الحيادية لأنها تدل على النظافة والبساطة. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها لمساحيق التّجميل ومواد التّنظيف: المؤسسات الحكومية، المؤسسات العامة، المنظمات الحكومية وغير الحكوميةعند قيامك بتصميم لإحدى المؤسّسات الحكومية، أو المؤسسات العامة أو لإحدى المنظمات، عليك أن تأخذ بعين الاعتبار أنها يجب أن تظهر كمؤسسات محترمة، جديرة بالثقة وذات كرامة. لذا اختر ألوانا تكون إيجابية وجميلة في نفس الوقت، كاللون الأخضر والأزرق. تمنح هذه الألوان الجميلة نوعا من الإيجابية وتعطي صورة عن المؤسسة أنها صلبة، قوية وجديرة بالثقة. المنظّمات الحكومية وغير الحكومية تفضل أن تستخدم الأحمر، الأبيض والأزرق في تصاميم شعاراتها مثل ما هو مستخدم في العلم الأمريكي وهي أيضا علامة على القومية والنزاهة. حاول استخدام الألوان الأحادية والتماثلية وقلل من استخدام الألوان المتباينة (الألوان المكملة). هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمؤسّسات الحكومية، المؤسسات العامّة، المنظّمات الحكومية وغير الحكومية: الشّعارات أو التّصاميم الجرافيكية الخاصّة بالمؤسّسات التّعليمية، شركات التّأمين والمستشفيات أيضا تتبنّى ذات القاعدة. الفنادق، المنتجعات ومنشآت الضيافة الأخرىعند قيّامك بتصاميم تخص الفنادق والمنتجعات ركز على الشعور بالراحة، الاسترخاء والضيافة واختر الألوان الترابية والطبيعية. اللون البني، الأخضر والأزرق هي من أكثر الألوان التي توحي بالاسترخاء والهدوء، تجنب الألوان الصّارخة كما بإمكانك استخدام الألوان الأحادية monochromatic colors. لكن حاول أن تستخدم الألوان بحد أدنى. الأسود، الأبيض، الفضي والذهبي هي الأخرى اختيارات رائعة لتصاميم الفنادق والمنتجعات، خاصة إذا كانت من تصنيف خمس نجوم وكانوا يرغبون في الاستفادة من الترف والرقي. الخلاصةتعتبر الألوان طريقة جيدة لجذب انتباه المشاهدين، إلا أن استخدام الكثير منها سيصرف القرّاء، لذلك حاول التقليل قدر الإمكان من استخدامها واكتف فقط باستخدام من 2-4 ألوان. عمليّة مزج وتركيب الألوان ليست مجرّد عملية تتم حسب مزاج المصمم، وإنما تتم من خلال البحث والدراسة المتأنية، وكذلك من خلال معرفة أساسيات عجلة الألوان والتركيب، كلّ ذلك سيمكنك من إنشاء الآلاف من تركيبات الألوان الرّائعة والمبهرة. ترجمة -وبتصرّف- للدّرس Guide to Choosing Color Combinations When Building Sites For Clients لصاحبه James Richman. حقوق الصورة البارزة: Designed by Freepik.
  18. يجد الإبداع حياةً في مواقع الويب، ومع ذلك قد تبدو الأفكار والحلول المبدعة والخلاّقة كتخمين لا أكثر والتّخمين من الأعمال المحفوفة بالمخاطر. وعليه، ماذا يمكن للمصممين أن يفعلوا كي يثبتوا للعملاء أنهم يتبعون خطّطًا متينة وأنّهم ينوون القيام بما هو أفضل للعميل؟ تعدّ التمرينات الآتية إحدى الوسائل الرّائعة للبدء بمناقشة وتوثيق جوانب التصميم بهدف تخليص العملاء من مخاوفهم من العملية الإبداعية وتشجيعهم كي ينضموا إلى سير عمليّة التصميم. ضع أهدافا واضحة يشعر بعض الناس أنهم مدركون لأهمية وجود موقع الويب ولكنهم يُواجهون صعوبات أثناء تحديد أهداف مباشرة وقابلة للقياس. قد تدفع الأهداف الغامضة الناس إلى افتراض بعض الأمور، وقد تؤدّي هذه الافتراضات إلى توقّعات لا يتم الوصول إليها وهو أمر من شأنه أن ينسف العلاقات التي أمضيت الكثير في بنائها. تعدّ الأهداف مثل "بيع أشياء أكثر" أو "تحقيق انتشار أكبر" من الأهداف المبهمة والتي لا توفّر ما يكفي لتنفيذها وتحقيقها. وجدت أنّ نُسخة مُعدّلة من تمرين تحديد معايير القبول acceptance criteria أحد أبسط و أكثر الأدوات فعاليّة للحصول على أهداف واضحة وقويّة. يستعمل المطوّرون الذي يعتمدون منهجية agile هذا التمرين لتوضيح سبب القيام ببعض المهام والدّور الذي تلعبه بشكل عام. لدى إدخال تعديلات طفيفة عليه فإنّه من المُمكن تحديد أهداف التّصميم بشكل جيّد. مثال عن طلب مقدم نريد إعادة تصميم موقعنا للحصول على عدد أكبر من زوار إضافة إلى الحصول على مظهر أكثر عصريّة، كما أننا نريد أن نكون محترمين أكثر في المجال الذي ننشط فيه. مثال عن قالب الهدف نحن نريد_____لأن_______مما سيُمكّننا________. مثال عن الأهداف نحن نريد زيادة الزّوار بنسبة 20% لأننا نريد تحقيق المزيد من الانتشار لموقعنا مما سيُمكّننا من الحصول على 8 زبائن مُحتملين إضافيين في الشهر الواحد. نحن نريد أن نُحدّث شكل الموقع لأننا نريد أن نبدو بمظهر مُحترف لعملائنا مما سيُمكّننا من رفع أسعارنا بنسبة 10%. نحن نريد أن نقوم بكتابة 4 مقالات حول المجال الذي ننشط فيه بشكل شهري لأننا نرغب في دعم هذا المجال مما سيُمكّننا من عقد شراكتين اثنتين كل شهر. لاحظ كيف أنّ الفصل بين "الوسائل" و "السبب" و"الأهداف" يوضّح أهداف صاحب المشروع ويشرح لماذا يريد تحقيق تلك الأهداف وكيف يعزم تنفيذها. تعدّ معايير قبول التصميم إحدى الطرق الرائعة للبحث عميقًا في النوايا التي غالبًا ما تكون غير معروفة والتي قد تساعد المصمم وصاحب المشروع على اتخاذ قرارات أفضل، وتفادي المفاجآت التي قد تظهر لاحقًا في المشروع. يجب أن تتم مراجعة الأهداف إلى أن تتم المُوافقة عليها تفهمها كل الأطراف المعنيّة. ملاحظة: حدّد عدة أهداف بحيث يمكنك تحديد الأهداف الثانوية، ولكن لا تجعل هذا الأمر يخرج عن السيطرة حيث أنّه لا يجب لأي موقع أن يكون له أكثر من هدفين أو ثلاث أهداف أوّليّة.. تنظيم الصفحات سيعجب الناس بالموقع الإلكتروني الذي يمكنّهم من تحقيق أهدافهم دون الحاجة إلى التفكير، حيث أنّه يتوجّب على المستخدمين أن يركّزوا على حل مشاكلهم وليس في فهم كيفيّة عمل الموقع. تعدّ آلية فرز البطاقات Card sorting إحدى طرق تنظيم موقع الويب، وللقيام بذلك قم بإحصاء جميع الصفحات على موقعك واكتب عناوينها على بطاقات. ومن ثمّ ضع تلك البطاقات على طاولة وقم بترتيبها وإعادة ترتيبها إلا أن تحصل على الترتيب الأكثر منطقيًّا للأقسام الأساسيّة والفرعيّة. إن كنت لا تستطيع القيام بعملية فرز البطاقات بشكل شخصي أو أنك لا تملك الوقت لتقوم بفرزها ضمن فريق، فإنّه يُمكنك الاستعانة بجداول إكسل spreadsheet. إليك مثالًا عن موقع ويب استثماريّ في نيوزيلندا والذي استعان بخدمة Google Docs (الإحصائيات هنا عشوائية وليست حقيقية): إن كنت تعمل على إعادة تصميم، قم بإلقاء نظرة على خدمة التحليلات التي تستخدمها لمعرفة أي الصفحات تحصل على أكبر قدر من الزّيارات وتلك التي تحصل على عدد ضعيف من الزّيارات، سيمسح لك ذلك بمعرفة أي تصاميم المُحتويات تُبلي بلاء جيّدًا، ومن ثمّ تقوم بالجمع بين الصفحات المتشابهة بالإضافة إلى فصل وتبسيط الصفحات المعقّدّة. حتى بعد عملية التصميم الرسميّة يمكن لتمرين فرز البطاقات أن يُحسّن من قابلية استخدام وفاعليّة الموقع، كما أنه يعدّ ممارسة ذكية والتي من شأنها جعل الموقع وثيق الصلة بموضوعه وفعّال. مُلاحظة: قم بفرز البطاقات مع شخص من خارج الشركة، لكي تضمن عدم الانحياز إلى طرف أو إلى آخر وللحصول على ملاحظات وآراء ربما لم تتوقّعها. تصميم الصفحات نحتاج في الخطوة التّالية إلى تكوين فهم سليم للتّسلسل الهرمي البصري للتصميم، وسنحتاج للقيام بذلك إلى خرائط الانتباه وإلى بعض الحساب. خريطة الانتباه هي عبارة عن قائمة من الأهداف للصفحة الواحدة مع تحديد قيمة لكل هدف. من أجل إظهار الفوارق ما بين الأهداف أعط عدًدا كافيًا للأهداف الأساسية مما يسمح لك بتجنب إعطاء نفس القيمة لأكثر من هدف. الهدف من ذلك هو فهم العلاقة ما بين تلك الأهداف وتحديد أهميّة كل مُحتوى مُقارنة بالبقيّة. مثال عن توزيع النّقاط خمسة عشر نقطة موزعة على أربعة أهداف. مثال عن النتيجة وصف الخدمة: سبع نقاط. فوائد الاستخدام: أربع نقاط. مقالات عن مجال النًشاط: نقطتان. أخبار ذات صلة: نقطتان. تعدّ خريطة الانتباه أكثر فعاليّة من قائمة الأولويات لأنها تساعد في تحديد المساحة الخاصة المكرّسة لكل هدف في الصفحة. وبحكم أنّ لـ"وصف الخدمة" 3 نقاط أكثر من "فوائد الاستخدام" (تقريبًا ضعف عدد نقاطها) فإنّه يُمكن القول بأنّنا نحتاج إلى التّركيز أكثر على "وصف الخدمة". طور شخوص التصميم يمكن لشخصية نموذجية قويّة أن تُنشئ رابطًا عاطفيًا قويّا ولحظيّا. الشّخصية النّموذجية archetype عبارة عن مجموعة من الخصائص والملامح التي يُمكن أن نلحظها في مجموعات من البشر على اختلاف لغاتهم، تاريخهم وأحجامهم في مُختلف بقاع العالم. تملك كل شخصية نموذجية نقاط قوّة وضعف، مواهب ومخاوف. عندما يتمّ أخذ جميع هذه الجوانب بالحسبان فإنّه يُمكن للنّاس الارتباط عاطفيّا بالتّصميم مما يسمح بتقوية الذّاكرة وبناء جسر من الثّقة. يستعرض كتاب The Hero and the Outlaw للكاتبتين مارغريت مارك و كارول بيارسون 12 شخصية نموذجيّة تُغطّي بشكل شبه كامل لجميع جوانب الإنسانية. الشّخصيات النموذجيّة: بريء مكتشف حكيم بطل خارج عن القانون ساحر شاب عاديّ حبيب مهرج راعٍ مبتكر حاكم فإن اخترت نموذج الخارج عن القانون (كـهارلي دايفديسون على سبيل المثال) أعدّ التّفكير في كل ما تقوم به من منظور الخارج عن القانون وقد تتفاجأ من كميّة الأفكار الجديدة والمثيرة للاهتمام التي ستولد عن ذلك. خصال الخارج عن القانون يتمنى الانتقام أو الثورة. يريد تدمير مالا يعجبه. يكره أن يكون عديم القوة أو الفائدة. يسعى إلى إزعاج أو صدم الأشخاص. يتمنى أن يقدم للناس حرية مطلقة. غالبًا ما يُساء فهمه ويُنظر إليه على أنّه شرير. لديه نزعة لأن يتحوّل إلى مُجرم. إن استطعت إبقاء هذه "الشخصيّة" مُتناسقة عبر تصاميم مختلفة، ففكّر في تطبيقها في مختلف الأماكن التي يحصل فيها تفاعل مع الزبون وركّز على ردود الأفعال، حيث أن ذلك من شأنه أن يُسهّلك عليك بناء علامة تجارية قويّة.. ملاحظة: غالبًا ما يخلط الناس بين شخصية شركتهم وشخصياتهم الخاصة، لذلك يجب تحديد الشّخصية النموذجية لمُدير المشروع ولمُختلف الأطراف التي تعمل على المشروع للتّفريق ما بين شخصية الشّركة وشخوص الأفراد العاملين عليها. تحديد الصفات بشكل دقيق عندما نطلق وصفًا على خاصّية مُعيّنة فإنه عادة ما يكون من الصّعب تحديد ما نقصده بالضّبط. وعليه فإن أفضل طريقة لتحديد ذلك هو توضيح موضع هذه الصّفة على سلّم يحتوي وصفين مُتضادّين. مثلًا لو قال صاحب المشروع بأن التّصميم الحالي "هادئ" أو "خامل" جدًا فإن المُصمم سيفهم ما سيقصده بشكل أفضل إن هو حدّد مقدار "الخمول" الذي يقصده على السّلم السّابق. صمم بثقة الفهم الجيّد للأهداف والتّخطيط والشّخوص سيخلق بيئة تمكنّك أنت وصاحب المشروع من الاعتماد على مناقشة الأفكار بشكل دقيق وتوثيقها بشكلٍ جيد. معًا ستخلقون هامش صغير للخطأ، وسيكون بإمكانك تنفيذ المطلوب على أكمل وجه. ترجمة -وبتصرّف- للمقال Taking the Guesswork Out of Design.
  19. صناديق التغشية Overlays، صناديق المحادثة Dialog boxes نوافذ منبثقة Modal windows، سمّها ما شئت، تلك النّوافذ الصغيرة التي تنبثق في منتصف الشاشة وتشدّ انتباهك قد استخدمت كثيرًا (وأحيانًا بشكل خاطئ) في عالم التّصميم. تزايد استخدام النوافذ المنبثقة في التطبيقات، الويب وحتى على الهواتف لجذب انتباه المستخدم إلى مهمة فرعية دون أخذه إلى شاشة مختلفة. يمكن للنوافذ المنبثقة أن تُستعمل على نحو مساعد ومؤثر في التصميم، لكنّك إذا استعملتها كثيرًا ستُزعج المستخدم حتمًا. تأكد من عدم تنفير/إزعاج مستخدميك بالنوافذ المنبثقة عبر أخذ القوانين العشرة التالية بعين الاعتبار. 1. قلل من استخدام النوافذ المنبثقة قدر الإمكان ستحاول النوافذ المنبثقة دائمًا جذب انتباهك إليها. سيضطر المستخدمون إلى التعامل مع النافذة المنبثقة قبل إكمال مهماتهم الأصلية وسيمنعهم ذلك من الوصول إلى الصفحة المغطاة بالنافذة. قد يبدو هذا أمرًا جيّدًا، كأن يتوجب على المستخدم إعطاء موافقته على فعلٍ مهم، لكن استخدام النوافذ المنبثقة يكون في أغلب الوقت غير ضروري ومزعجًا إلى حد لا يطاق. بدلًا من استخدام نافذة منبثقة، من الأفضل غالبًا أن تظهر المحتوى الذي كنت ستضعه داخل النافذة المنبثقة ضمن سياق الصفحة. يمكنك فعل ذلك عبر توسعة جزء من الصفحة على سبيل المثال، عبر استخدام Static Popover أو بتبديل عناصر الواجهة. تستخدم شبكة "LinkedIn" بديلًا جيّدًا للنوافذ المنبثة في صفحات الأعضاء لديهم (انظر أدناه). فبدلًا من استخدام طريقة التصميم المعتادة وإظهار نافذة منبثقة ليتمكن المستخدم من تعديل حقل إدخال، يستطيع المستخدم الضغط على حقلٍ وتعديله بينما يكون في نفس الصفحة. تسمح شبكة "LinkedIn" لمستخدميها بأن يعدّلوا حقلًا داخل الصفحة مباشرة بدلًا من استخدام نافذةٍ للتعديل. في حين أن تويتر تستخدم نافذة منبثقة لكتابة تغريدة جديدة على نحوٍ غريب، فإنّها تمكّن المستخدمين أيضًا من إدخال تغريدتهم على الصفحة الرئيسية (انظر الصورة أدناه). إنها تجربة استخدام أفضل بكثير لأن المستخدم ما زال قادرًا على استخدام الصفحة (كأن ينسخ ويلصق نصًّا على سبيل المثال) وما زال غير مقيّد بنافذة منبثقة. بدلًا من فتح نافذة منبثقة أظن بأن من الأفضل لهم توسعة شريط التصفح في الأعلى (انظر المثال أدناه) بحيث يتمكن المستخدم دائمًا من إدخال تغريدته ضمن الصفحة. تستخدم شبكة Twitter نافذة منبثقة لكي يتمكن المستخدم من كتابة تغريدة جديدة. من الأفضل لـ Twitter أن يسمح للمستخدم بكتابة تغريدته داخل الصفحة. من المنطقي جدًا أن تستخدم النوافذ المنبثقة في حالات تحتاج خلالها من المستخدم أن يقوم بفعل ما قبل الاستمرار، أو حين تكون تكلفة الخطأ في العملية الجارية مرتفعة. وكمثال على هذه الحالات: إظهار نافذة منبثقة عند التأكيد على حذف شيء، أو عند إدخال البريد الإلكتروني لتحميل كتاب إلكتروني. 2. لا تظهر النوافذ المنبثقة فجأة إظهار نافذة منبثقة قبل أن يفعل المستخدم أي شيء ليس بفعلٍ حسن ولا ذكي، والواجب عليك هو ألّا تفعله، يجب أن تظهر النوافذ المنبثقة دائمًا بناءً على فعلٍ صدر عن المستخدم. قد يكون هذا الفعل ضغط زر، اتباع رابط أو تحديد خيار. ينطبق هذا أيضًا على نوافذ الدعوات لملء الاستبيانات. لا تظهر هذه النوافذ فحسب، بل اعرض الدعوة أثناء تحميل صفحة جديدة، أو افعل ما هو أفضل من ذاك، كأن تضمّن الدعوة داخل الصفحة. 3. أضف تغشية سوداء على الصفحة خلف النافذة المنبثقة من المهم حين تنبثق نافذة ما أن تسودّ الصفحة الخلفية قليلًا، لهذا الأمر فائدتان. الأولى هو أنه يصرف الانتباه إلى النافذة المنبثقة، والثاني هو أنه يعلم المستخدم بكون الصفحة حاليًا غير قابلةٍ للاستخدام. مع ذلك، كن حذرًا حيال إضافة هذه التغشية. فإن كانت شديدة السواد لن يعرف المستخدم في أي صفحةٍ هو. وإن كانت شديدة البياض فسيظن المستخدم أن الصفحة ما زالت قابلةً للاستخدام وقد لا ينتبهون إلى النافذة المنبثقة أصلًا. 4. دع المستخدم يغلق النافذة بالنقر (اللمس) خارجها تأتي النوافذ المنبثقة بنوعين. الأول هو النوافذ المنبثقة التي تشدّ الانتباه وترغم المستخدم على التفاعل معها قبل الإكمال. والثاني هو النوافذ التي تسمح للمستخدم بالضغط أو اللمس خارجها لإخفائها. كقاعدةٍ عامة يجب عليك استخدام النوافذ المنبثقة (من النوع الأول) للتفاعلات بالغة الأهمية، كمثال، حين تطلب من المستخدم أن يؤكد على طلبه لحذف حسابه، أو أنّه يوافق على سياسة الاستخدام والخصوصية التي يسجّل من أجلها. من الأفضل في أغلب الأحيان أن تستعمل نوافذ تسمح للمستخدمين بالضغط (أو اللمس) خارجها لإخفائها أو إلغائها. 5. وفر دائما زر إغلاق واضح إكمالًا للنقطة السابقة، ليس على المستخدم أن يضغط (أو يلمس) خارج النّافذة لإغلاقها، بل يجب عليك أيضًا أن توفّر خيار إغلاقٍ في الزاوية العلوية اليمنى (أو اليُسرى، إن كانت لغة الموقع تُكتب من اليمين إلى اليسار)، ومن الأفكار الجيّدة أيضًا أن تضمّن خيار إلغاءٍ أو إغلاقٍ إضافي داخل النافذة المنبثقة، في العادة كرابطٍ أو زر. يوفّر متجر "John Lewis" زر إغلاقٍ واضح في أعلى يمين نوافذ الانبثاق خاصتهم. 6. لا تضمن أكثر من خطوة في نفس النافذة إذا كان التفاعل المطلوب معقدًًا بما فيه الكفاية ليتطلّب أكثر من خطوة، فسيكون هذا التفاعل معقّدًا بما فيه الكفاية ليحصل على صفحته الخاصة، ولكي تحصل على المساحة والمرونة التي توفّرها الصفحة أكثر من النافذة المنبثقة، حاول تجنّب استعمال النوافذ التي تتضمّن أكثر من خطوةٍ داخلها كالنافذة الظاهرة أدناه من Barclays Bank، لعل تحليل مهمّة معقّدة إلى خطواتٍ مبسّطة فكرةٌ مذهلة، لكنها أيضًا علامة على أن هذه المهمة أعقد من أن تطلب من المستخدمين إكمالها داخل نافذةٍ منبثقة. حاول تجنّب النوافذ المنبثقة العملاقة كهذه النافذة من Braclays Bank. 7. لا تحشر الكثير داخل النافذة المنبثقة من الواجب عليك ألّا تحاول ملء النافذة المنبثقة بالكثير من العناصر، أبقِ النوافذ المنبثقة التي تصنعها نظيفة وبسيطة، إذا لاحظت أنك تحاول ملء النافذة المنبثقة بالكثير من العناصر فهذا سيعني عمومًا بأن النافذة المنبثقة ليست الخيار الأفضل. 8. ضمن المعلومات المهمة من المهم أن لا تخفي نافذة منبثقة المعلومات المهمة والتي قد تكون مفيدة للمستخدمين، كالأسعار مثلًا. في الواقع، من الواجب أن تتضمن النافذة المنبثقة أي معلومات مهمة. فكمثالٍ على ذلك، إذا ظهرت نافذة منبثقة تطلب من المستخدم تأكيد حذف بعض العناصر، سيكون من المفيد أن تسرد النافذة تلك العناصر التي ستحذف. 9. تجنب استخدام النوافذ المنبثقة على الهواتف من الجيّد عمومًا أن تتجنّب استخدام النوافذ المنبثقة على الهواتف. على شاشات الهواتف الصغيرة لا بد أن تأخذ النافذة المنبثقة كامل عرض الشاشة (فآخر أمر ترغب حدوثه هو أن يكون لديك نافذة منبثقة بالغة الصغر على الهاتف)، فلماذا لا تستخدم صفحةً بدلًا من ذلك؟ إذا استخدمت النوافذ المنبثقة في تصميمٍ متجاوب فسيكون من السهل غالبًا الحفاظ على نفس السلوك عبر مختلف الأجهزة. لذلك، من المهم التأكد أن أي نافذة منبثقة تستخدمها تناسب الهاتف. وكمثالٍ على ذلك، نوافذ Bootstrap المنبثقة (انظر الصورةَ أدناه) تعمل على نحوٍ متساوٍ بطريقة جيّدة في الأجهزة المحمولة -سطح المكتب- والهاتف معًا. بما أن النوافذ المنبثقة على الهاتف ستتطلّب غالبًا النزول والصعود بالشاشة، ستكون إضافة زر إغلاق أو إلغاء في الأعلى والأسفل فكرةً جيّدة. تأكّد من أن أي نافذة منبثقة تستعملها هي نافذة مناسبة للهاتف، كما هي نوافذ Bootstrap المنبثقة. 10. تحقق من قابلية وصول النوافذ المنبثقة من الواضح أن أخذ القابلية للوصول Accessibility بعين الاعتبار أمرٌ مهم لأي تصميم، ولذلك من المهم التأكد من كون أي نافذة منبثقة تُراعي قابلية الوصول. وكمثال، تأكد من أن التركيز focus موجّه إلى النافذة المنبثقة عند فتحها (بدلًا من البقاء في الصفحة الحالية) بحيث يتمكّن المستخدم من التصفّح باستعمال لوحة مفاتيحه. تأكد أيضًا من كون زر الإغلاق يمتلك لصيقة label تعريفيًّة مناسبًة لمستخدمي أدوات قراءة الشاشة. ترجمة -وبتصرف- للمقال: guidelines to consider when using overlays / modals لصاحبه Neil Turner.
  20. يمكن أن يكون العمل مع مصممي الويب عملًا يشوبه بعض التعقيد، خاصة إن لم يتمّ التعامل مع مصمم ويب من قَبل، وعليه ستقدّم لك هذه القائمة من النصائح أفضل السُبل في بناء علاقة مثاليّة بينك كعميل وبين مصمم الويب. كنت أفكّر مطوّلًا مؤخرًا حول طبيعة العلاقة مع العملاء الذين أتعامل معهم في أحد شركات التصميم، محاولًا تحديد السبب الذي يجعل بعض المشاريع تعمل بسلاسة ويسر على خلاف أخرى، الأمر الذي يُنتج مواقع أكثر احترافية بطبيعة الحال، وتوصلت في نهاية الأمر إلى أن سبب الاختلاف يعود غالبًا إلى طبيعة العلاقة والتواصل بين المصمم والعميل. يوجد من دون شك مهارة في الحصول على أفضل النتائج من مصممي الويب، وعليه فكّرت في مشاركة بعض الأفكار والحيل من خلال هذا المقال وعلى شكل قائمة من عشرة نصائح مستخلصة من واقع التجربة والخبرة. 1. لا تستعجل التصميم أصبحت مشاريع الويب بشكل متزايد مقيّدة إما بالميزانية المحدودة أو بالمهلة المحدّدة لإتمام المشروع، وهذا الأمر من شأنه أن يؤثّر على جودة العمل التي ستحصل عليها من مصمم الويب، فالمنتج عالي الجودة يتطلّب وقتًا، ولا يُحصر هذا الوقت في العمل الفعلي الإجرائي على المشروع، حيث يحتاج مصمم الويب وقتًا للتفكير حول الطرق المختلفة المتاحة، واختيار أنسبها بما في ذلك الأدوات المطلوبة، بمعنى آخر كلما أفسحت المجال للمصمم، كلما زادت جودة العمل. أنا لا أقلّل من العمل الإجرائي الخاص بالتصميم، فلن يخرج التصميم بأبهى حلّة بدونه، والشيفرة التي خلف الستار ستفشل ولن تدوم طويلًا قبل أن تظهر المشاكل والعلل البرمجيّة فيها. 1. تابع سير عملية التصميم على مراحل يميل مصممو الويب إلى العمل بنوع من الكتمان عند يتعلّق الأمر بتصميم الموقع، حيث يحبّذون العمل على التصميم إلى حين الانتهاء منه، ولا يتحدّثون عن التصميم وحيثياته مع عملائهم حتى هذه المرحلة، للأسف يقود هذا الأسلوب إلى مشاكل لا يُحمد عقباها في الأغلب. إن لم يفهم مصمم الويب لأي سبب كان الاتفاق الأوّلي الذي أجراه مع عميله، فمن الممكن جدًا أن يقضي أيامًا إن لم أقل أسابيع يغرّد خارج السرب ويعمل على تصميم غير ملائم بالمرّة للمتطلّبات العميل، وما يزيد الطين بلّة أن المصمم سيكون راضيًا عن التصميم عند هذه النقطة ومقتنع بإتمامه المهمة الموكلة إليه على أكمل وجه، فمن وجهة نظره هذا هو الحلّ والتصميم المطلوب، وهو لا يستطيع ولن يرضى بإضاعة وقته في التعديل أو التنقيح، وسيقود هذا الأمر الطرفين إلى خلاف. يوجد أسلوب أفضل للتعامل، وهو عبر متابعة العمل مع مصمم الويب من البداية ومنذ اللحظة الأولى، يجب عليك رؤية المسودة الأولى التصميم، والإطارات الهيكليّة، وسيؤكّد هذا الأمر أن التصميم النهائي قد تمت الموافقة عليك من قِبل الطرفين، لأن كلا الطرفين ساهما في خروج هذا التصميم ليرى النور، ومنذ المراحل الأولى في إنشائه. 3. قم بالاختبار عند الحيرة أو الشك ستختلف أنت ومصمم الويب على بعض الجزئيات لا مناص من ذلك، وعلى الرغم أن مصممي الويب هم الخبراء هنا وأصحاب النظرة التصميمية الأقوى إلا أنهم ليسوا معصومين عن الخطأ، خاصة وأنه عليك أن تكون واثقًا من التصميم بالقدر الكافي لتعتمده تصميمًا للموقع. إن كان الشك يعتريك فيما إذا كان المصمم على حق في نصحه أم لا، فمن المستحسن اختبار التصميم، فمن غير المناسب تجاهل وجهة نظر المصمم، فمن المحتمل جدًا أن تكون وجهة نظرك هي الخاطئة، بدلًا من ذلك اختبر التصميم مع مستخدمين حقيقيين لتحصل على رأيٍ حياديٍ وموضوعي. 4. لا تطلب أكثر من نموذج للتصميم يصرّ بعض العملاء على الحصول عل أكثر من نموذج للتصميم في بداية المشروع، بهدف أن يكون لديهم أكثر من خيار لتصميم الموقع النهائي، وبجانب ما أسلفت حول وجوب متابعة التصميم أوّل بأوّل، فإن فكرة العمل على أكثر من تصميم من الأساس تشوبها شائبة ولا تعطي نتائج مرضية لكلا الطرفين. تكمن المشكلة مع التصّورات المتعدّدة للتصميم أنها حتمًا ستقود إلى تصميم مقيت، بمعنى آخر، عندما يتمّ عرض أكثر من تصميم عليك كعميل صاحب القرار النهائي، فسترى حتمًا عناصر تعجبك من كل تصميم، وفي معظم الأحيان يقود هذا الأمر إلى اختيار أجزاء من التصميمين لتكون في التصميم النهائي، ولكن وكما سيخبرك أي مصمم أنّه لا يمكنك جمع عناصر أو أجزاء من تصميمين مختلفين بسهولة ويُسر، وما سيؤول إليه الأمر في النهاية الخروج بتصميم هو أبعد ما يكون عن الإبداعية والجمالية التي كنت تتمناها. اتبع بدلًا من ذلك نصيحتي السابقة وذلك بالعمل جنبًا إلى جنب مع المصمم للوصول بالتصميم إلى بر الأمان. 5. وضح رؤية التصميم قبل عرضه على أحدهم يمكن أن يكون التقرير في الشكل النهائي للموقع أمرًا ليس بالهين خاصّة إن كانت هذه تجربتك الأولى، فغالبًا ستقوم باستشارة أحد الزملاء أو ربما صديق ما أو فرد من أفراد العائلة لتحصل على الرضا التام حول التصميم. على الرغم من أن الرغبة في عرض التصميم على عديد الأشخاص هو أمرٌ يمكنني تفهمه، ولكنه ليس من باب الحكمة فعل ذلك، فقدرتنا على الحكم على التصميم السيء أو الجيّد ستكون عبارة عن رأي شخصي لا غير، وتختلف هذه الآراء بين الآخرين بطبيعة الحال، وبدلًا من طمأنة نفسك في عرض التصميم على هذا وذاك سينتهي بك المطاف حيرانًا في التصميم أكثر من ذي قَبل. لا أنكر وجوب عرض التصميم على البعض، لا بأس في ذلك، ولكن على الأقل لا ترسل لهم التصميم وتطلب آراءهم فحسب، فلكي يستطيعوا تقديم رأيهم الموضوعي، عليهم أوّلًا فهم خلفية المشروع وكيف تمّ اتخاذ القرار وعلى أي أساس، فبدون هذه المعلومات كل ما يستطيعون تقديمه هو آرائهم الشخصية لا أكثر ولا أقل، وبطبيعة الحال هو مجرّد آراء شخصية لا تسمن ولا تغني من جوع. 6. تأكد من تحديد أهداف ومهمة الموقع التي سيمثلها التصميم مع المصمم قد تسوء الأمور حتى عند العمل بشكل متواصل وتعاوني مع المصمم، خاصة عندما يكون لكلٍ منكما وجهة نظر مختلفة عن الآخر بما يخص الهدف المنشود للتصميم النهائي، لهذا من المهم على جميع الأطراف أن تمتلك نظرة واضحة عن أهداف ومهمّة الموقع، وهذه الأهداف ستكون بمثابة الموجّه والمساعد في اتخاذ القرارات خلال مسيرة تطوير الموقع. 7. تأكد من أن الفئة المستهدفة محددة ومتفق عليها بين الطرفين حاول جاهدًا نقل الصورة الصحيحة عن مستخدمي الموقع المستهدفين إلى المصمم، وهنا يأتي دور المصمم في إجرائه اختبارات قابلية الاستخدام usability testing، لا بل الأفضل حضّ مصمم الويب على تطبيق اختبار قابلية الاستخدام على الفئة المستهدفة مباشرةً، وبهذه الطريقة سيعرف المصمم بالضَّبط ما هو المناسب وغير المناسب للفئة المستهدفة. سيقدّم مصمم الويب تصميمًا لا يمت بصلة بهدف ومهمّة الموقع عند عدم فهمه الفئة المستهدفة بالشكل الصحيح. يجب ملاحظة أمر مهمً مع ذلك، ليس فقط المصمم من هو بحاجة إلى فهم الفئة المستهدفة، أنت أيضًا، قد تعتقد أنك تعرف ذلك، ولكن إلا إذا كنت على تواصل مستمر ويومي مع المستخدمين، فمن الجدير الاطلاع على أي اختبار لقابلية استخدام usability testing ينفذه مصمم الويب، وقد تتفاجأ كيف يختلف المستخدمين عن الفكرة المبلورة والمتصوّرة عنهم. 8. لا تبالغ في العمل على التصميم توجد مشكلة شائعة في العديد من مشاريع التصميم وهي إفراط أصحابها في بذل أقصى ما في جهدهم على التصميم، وهذا شيء قد تعلّم أغلب مصممي الويب أن يتجنبوه بناءً على تجاربهم السابقة، ولكن ولأن معظم أصحاب المواقع ليس لديهم هذه المعرفة والخبرة ستجدهم يقعون في هذه الحفرة. نتّفق جميعًا أن التصميم هو أمر عائد للآراء الشخصيّة، بمعنى لن تستطيع بأي حالٍ من الأحوال الحصول على التصميم المثالي، ولكن رغبتك في تحقيق الكماليّة ستقودك من تحسين إلى تحسين آخر، ومن تعديل إلى تعديل آخر بغرض الحصول على أفضل تصميم، وهنا المشكلة، أنت لن تحصل على أفضل تصميم مهما حاولت، ربما تحصل على تصميم يعجبك أنت شخصيًا، ولكن لن تحصل على تصميم كامل متكامل ومُرضي للجميع فهذا هو المحال بعينه. توجد مشكلة أخرى مرتبطة بسابقتها، وهي اعتقاد أصحاب المواقع أن لديهم فرصة وحيدة للحصول على أفضل تصميم، وهذا ليس بالصحيح، بل في الواقع وفي معظم الأحيان إن أفضل طريقة لإيجاد ذلك التصميم المنشود هو عبر وضع التصميم تحت الاختبار الفعلي ليتفاعل معه المستخدمين مباشرةً، عندها يُمكن التنقيح والتحسين اعتمادًا على ردود فعل وآراء حقيقة بدلًا من الآراء الشخصيّة. 9. احرص على بناء علاقة مستمرة مع المصمم يكلّف معظم أصحاب المواقع مصممين لإعادة تصميم مواقعهم، ومن ثم يتوارون عن الأنظار، سيمنع هذا الأسلوب من تطوير الموقع بناءً على متطلّبات المستخدم، بدلًا من ذلك، يجب على أصحاب المواقع العمل على تحسين مواقعهم شهريًا، للحصول على جملة من التعديلات والتحسينات المتواترة والمتتابعة لتجنّب التعديلات الكبيرة والمكلفة. 10. ركز على المشكلة واترك الحل للمصمم أعتقد أنّه من المهم معرفة كل شخص دوره والتزام به بالضبط، فمهمّة أصحاب المواقع هي تحديد المشكلة، وحلّها يقع على عاتق المصممين. ولكن وفي العديد من الحالات الأمر ليس بهذه البساطة، حيث يُلاحظ صاحب الموقع مشكلة ما في الموقع (مثلًا عدم ملائمة لون الموقع مع الفئة المستهدفة) فيخبر العميل المصمم بضرورة التغيير (لنقل تغيير اللون من الوردي/الزهري إلى الأزرق)، ولكن مصمم الويب هنا غير مدرك لحقيقة المشكلة أو دواعيها، فكل ما يعرفه أن العميل يرغب باللون الأزرق، وبالتالي سيكون من شبه المستحيل على المصمم أن يقترح حلولًا بديلة، والتي قد تكون أفضل من تلك التي طلبها العميل، بمعنى آخر، أصبح صاحب الموقع المصمم، وأصبح المصمم مجرّد تقني يطبّق التصميم. يُقيّد هذا الأسلوب من موهبة المصمم من جهة، ويتلف العلاقة بين المصمم والعميل من جهة أخرى، فأصبح المصمم لا يلعب في أرض ملعبه التي يبرع فيها، وقد جُرّد من حقّه في الإبداع، وربما قد فقد الاهتمام في المشروع من الأساس. خاتمة ستزيد تطبيق هذه المقترحات بشكل ملحوظ من فعاليّة موقعك من خلال تحسين العلاقة بينك وبين المصمم، طبعًا هذه المقترحات ليست شاملة بطبيعة الحال، لذلك تنس مشاركة ما في جعبتك حول هذا الموضوع لتغطية ما غفل عنه المقال. ترجمة وبتصرّف للمقال 10tips for working with web designers لصاحبه Paul Boag.
  21. لقد شاع استخدام الاقتباس التالي (وأحيانًا بطريقة خاطئة) لهنري فورد، وقد اتضح مؤخّرًا أن هنري فورد لم يقل هذه الكلمات أصلاً، لكنني لحسن الحظ لا أكتب بحثًا أكاديميًا، وإنما أكتب مقالاً، لذا، بغض النظر عن دقة المعلومات التاريخية، أظن أنكم تتفقون معي حيال كون هذا الاقتباس محفزًا للعديد من الأفكار. وإليكم اقتباسًا آخر، هذه المرة من ستيف جوبز: لقد عرف ستيف جوبز بوضوح أن المستخدم ليس على حق دائمًا. لا يعرف المستخدمون ما هو مناسب لهم كما ترى، لقد عرف كل من ستيف جوبز وهنري فورد درسًا بالغ الأهميّة. درسٌ لم يفهمه الكثير من المصمّمين، الباحثين ورجال الأعمال: لا يعرف الزبون والعميل ما هو جيّد له. ولا أتحدث هنا عن أمور ابتكار المنتجات والخدمات الجديدة، أنا أتحدث بصفة عامة. لا يعرف المستخدمون ما هو جيّد بالنسبة لهم ببساطة وحسب، نعم، لقد سمعت ذلك بوضوح. ليس المستخدم على حقٍ دائمًا، في الواقع، غالبًا ما يكون المستخدم مخطئًا بكل بساطة. بالطبع، ليس ذلك خطأ المستخدم. فكيف نتوقع من المستخدمين أن يكونوا على صواب مع ضيق أفقهم ومحدوديته في نظرتهم السطحية للأمور وآرائهم الفردية حيال مشكلة ما في التصميم؟ لنتوقف عن ممازحة أنفسنا. فالمستخدمون ليسوا مصممين، وفي أغلب الوقت لا يكونون خبراءً في المجال، وحتى لو عرفوا مدخلات ومخرجات الموضوع، سيبقون دائمًا ناقصي الخبرة في تحويل المعرفة بالموضوع إلى حلول تصميم جيدة. مع ذلك، أصادف أحيانًا من يتوقعون أننا سنحتاج فقط إلى سؤال المستخدمين كي يعطونا بأعجوبة كل الأجوبة التي نريدها. سنسأل المستخدمين عمّا يحتاجونه، سنسأل المستخدمين عن المزايا الأهم بالنسبة لهم، سنسأل المستخدمين عن كيفية تنظيم الموقع، سنسأل المستخدمين عمّا يجب وضعه في الصفحة الرئيسية. لنسأل المستخدمين تذكّرني هذه الثقافة الخطرة، ثقافة "لنسأل المستخدمين" بحلقة مميزة من "The Simpsons". أحب أن أستخرج أفضل دروس الحياة من هذه المُسلسل، كنصيحة Homer التي تقول، "إذا لم تنجح من المرة الأولى، استسلم". في إحدى الحلقات يكتشف Homer بأن لديه أخًا غير شقيق يدعى Herb، وصادف أن Herb هو رئيس مصنع Powell motors، مصنع أمريكي كبير، ومع انخفاض مبيعات المصنع، يطلب Herb من Homer أن يساعده في تصميم سيارة للمواطن الأمريكي البسيط، سيارة عادية لزيد وعبيد، من المصمم فلان العادي (أو ربما الأقل من العادي بالنسبة لـ Homer)، ويأمر Herb مصممي سياراته بأن يعطوا زمام تصميم السيارة إلى Homer ويستعملوا كل أفكاره، مهما بلغ جنونها. إنها مريعة لأنها سيارة مصممة بواسطة ولأجل Homer، ولأن من صمّمها ليس مصمّمًا، آمل أن لدى مستخدميك ذوقًا أرقى من ذو Homer (رغم أنني لا أضمن لك ذلك)، لكنني عمومًا أظن بأن هنالك درسًا مهمًا وراء هذه القصة: لا يعرف المستخدمون ما هو أفضل لهم، حتى المستخدمين الخياليين. سيارة Homer - إيضاح لما قد يحدث عندما تتبع اقتراحات المستخدمين اتباعًا أعمى. التصميم ليس مهمة الزبون كما ترى، إنها مسؤولية المصممين. ليس على المستخدمين أن يبدعوا حلولاً مذهلة لتحلّ مشاكلهم. ولا أعني بمسؤولية المصممين فقط من عمله هو التصميم، إنني أعني كامل فريق المنتج. يمكن للمطوّر أن يكون مصمّمًا بقدر ما يمكن لمصمم تجربة الاستخدام أن يكون مصممًا عاديًّا، يمكن للمستخدم من ناحية أخرى أن يكون مصمّمًا سيئًا، وتوقع غير هذا هو مجرّد كسلٍ في التصميم. إن مهمة فهم المستخدمين تعود على المصممين وفريق المنتج مهمة تحديد احتياجاتهم، مشاكلهم، آمالهم، أمنياتهم وأحلامهم، مهمة صنع حلول تصميمٍ أنيقة، مفيدة وسهلة الاستعمال لتلبّي احتياجاتهم تعود تمامًا عليهم، حتى لو لم يدرك المستخدمون حاجتهم لتلك الحلول، كما هو عليه الحال مع سيارة model T وجهاز الـ iPad. التصميم للأطفال كأبٍ لطفلين صغيرين، أرى أن العلاقة بين المصممين والمستخدمين تبدو مشابهة بعض الشيء للعلاقة بين أب وأطفاله (أو طفله). يجب عليك كأب أن تضع أبناءك في المركز. أبناؤك يأتون دومًا في المقام الأول، بدءًا من اتخاذ قرار حيال ما يجب عليك أن تفعله في يوم ماطر ووصولًا إلى التفكير في الطعام الذي يجب عليك أن تشتريه لهذا الأسبوع، كل ما تفعله مرتكز على احتياجات أطفالك. لكن ما يجب عليك ألّا تفعله هو ترك الأطفال ليُخبروك بما يجب عليك فعله لأنهم سيحاولون فعل ذلك، صدّقني سيحاولون! أنت الرئيس بالتأكيد بلا شك، لذلك، أنت العاقل هنا وأنت الأعلم بالأمور (أو على الأقل، هذه هي الصورة التي تحاول إظهارها). وهذه هي الطريقة التي يجب أن تعامل بها المستخدمين. لا أعني بهذا أن الواجب عليك هو معاملة المستخدمين كأطفال (إلا إن كانوا أطفالًا بالفعل)، لكن الواجب عليك هو إمضاء وقتك في محاولة فهمهم، إيجاد ما هو أفضل لهم، أخذهم لأيامٍ من المرح بجانب البحر، وأن لا تتبع إراداتهم اتباعًا أعمى. بالتأكيد، يجب عليك أن تُشرك المستخدمين في عملية التصميم، أن تأخذ آرائهم، تجرّب أفكارهم وتصوّراتهم، اقتراحاتهم وإضافاتهم، دون أن تنسى بأنك خبير التصميم وليسوا هم. أنت من تقود عملية التصميم، وليسوا هم. أود أن أترككم مع هذا الاقتباس الأخير، هذه المرة من Alan Cooper خبير تجربة المُستخدم وأب الـ Visual Basic، وقد أُخذت هذا الاقتباس من محادثة في مؤتمر لـ Microsoft يتحدث فيه Alan عن السبب الذي يجعل من المستخدمين مصدرًا سيّئًا لأخذ لتكوين فكرة عن برنامج ما. إليكم ما قاله Alan Cooper: أظن بأن Alan كان يمزح قليلًا حين قال بأن المستخدمين لا علاقة لهم به، لكنني أرجو أن فكرة Alan قد وصلت إليكم. وبالنسبة لي، لا أخالفه الرأي أبدًا. ترجمة -وبتصرف- للمقال Why the user is not always right لصاحبه Neil Turner.
  22. في عالم اليوم، لم يعد بالإمكان قصر اهتمامنا على الهواتف المحمولة والحواسيب، فلدينا أجهزة لوحية وأخرى "تُرتدى" كالسّاعات والنّظارات الذكيّة. سيكون موضوعنا اليوم عن التصميم لمختلف أنواع الأجهزة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة (هذا الدرس) هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم الخطوة الأولى: كيف سيكون التعامل مع الواجهة؟ باللمس بالإصبع أم بمؤشّر الفأرة؟ الخطوة الثانية: ابدأ بالأجهزة الصغيرة يعتقد البعض أن عبارة "mobile first" الشّائعة تأتي من صعود شعبيّة الهواتف الذّكية، وهذا جزء من الحقيقة، أمّا الجزء الآخر فهو قائم على أن التّصميم للأجهزة الصّغيرة محدودة القدرات يُجبر المصمّم على التّركيز على المحتوى والوظيفة الأساسيّة للمشروع، مؤدّيًا بدوره إلى تطبيقات بسيطة وجميلة؛ أمّا العكس (أي البدء بالأجهزة القويّة) فهو أشبه بإقحام قطّ في قفص عصفور، أمر ليس بسيطًا ولا جميلًا! الخطوة الثالثة: ما الإمكانيات المميزة لهذا الجهاز؟ تتنقّل الهواتف الذّكية معنا طيلة اليوم، وهذا يعني أنّنا نقضي وقتًا طويلًا في استخدامها، وأن باستطاعتنا استخدام الموقع في تطبيقاتنا، كما أنّها أجهزة صغيرة الحجم ويسهل نقلها، أمّا الحواسيب المحمولة فهي أقل سهولةً في النّقل ولكنّها أكثر قدرةً، وشاشاتها أكبر حجمًا، وفيها لوحة مفاتيح مُريحة، ومؤشّر يسمح بتحديد أكثر دقّة ووظائف أكثر. لا تُصرَّ كثيرًا على فكرة "وحدة الواجهة" بين الأجهزة المختلفة، بل فكّر بأسلوب مختلف لكلّ جهاز. الخطوة الرابعة: لا تنس البيئة التي يعمل فيها التطبيق هناك اختلاف في الخطوط العامّة لتجربة المستخدم بين Mac OS X وWindows، وكذلك يختلف Windows Vista عن Windows 8، وiOS 7 عن iOS 6، وقد تُضطّر لاختيار إصدارات محدودة لاستهدافها، وأخرى تتجاهلها، ففي كلّ مرّة توفّر تطبيقك لإصدار جديد، يتضاعف جهد التصّميم والتّطوير والصّيانة في المستقبل. كن بعيد النّظر! الخطوة الخامسة: كن مستجيبا هل ستوفّر تطبيقك على الويب؟ هل يدعم بضعة أنواع من الهواتف فقط؟ كيف سيعمل على الأجهزة القادمة؟ كل الأجهزة تستطيع التّواصل مع الإنترنت اليوم، لذا احرص على أن باستطاعة تطبيقك التلاؤم مع مختلف الأجهزة التي قد يرغب مُستخدمو تطبيقك باستعمالها. الخطوة السادسة: فكر بأكثر من شاشة واحدة في الوقت نفسه قد يكون هذا الموضوع متقدّمًا، ولكنّ بإمكانك بشيء من الجهد تحقيقه. هل يمكن استخدام هاتفك وحاسوبك سويّة كما يمكن التّحكم بالتّلفاز عن بُعد؟ هل يمكن لمجموعة من الهواتف أن تتحكّم بلعبة على حاسوب لوحيّ في غرفة واحدة؟ وإذا كنت تستخدم جهازين في وقت واحد، فهل يمكن نقل البيانات بينهما؟ ماذا عن مزامنة البيانات؟ هل ستؤدّي إلى مشاكل في الاستعمال؟ فكّر في الأمر! سنتعرّف في الدّرس القادم على أنماط التّصميم، وهي مجموعة من الأساليب الشّائعة لحلّ المشكلات المُتكّررة في تصميم تجربة المُستخدم. ترجمة بتصرّف للدرس Designing For Devices من سلسلة Daily UX Crash Course لصاحبها Joel Marsh.
  23. قد يبدو العمل معًا كفريق على بناء حملة تسويقية عبر البريد الإلكتروني أمرًا سهلًا من الخارج، لكن بالنسبة للأشخاص المعنيين في بناء الحملة، فهذه العملية تنطوي على العديد من العناصر التي يجب إدارتها، وستصبح أكثر تعقيدًا عندما تبدأ ببناء الحملة مع الآخرين. من أكبر العوائق التي واجهتني عندما كنت أعمل في وكالة تسويقية كان التعاون مع فريق المبيعات، المصممين، والعملاء. آنذاك، لم يكن هناك العديد من الأدوات التي تسهل تعاون الفرق، وبسبب اختلاف الأماكن والأزمان بين إفراد الفريق، كان من الصعب جمع الفريق في مكان واحد. منذ ذلك الحين، ظهرت مجموعة متنوعة ورائعة من تطبيقات الويب التي تساعد على التعاون، وفي هذا المقال سنستعرض 4 من تلك الأدوات الفعالة التي يمكن أن تجعل تعاون الفريق على بناء حملة تسويقية عبر البريد الإلكتروني أكثر إنتاجية وأقل إرهاقًا. أولا: Litmus Scope لتبادل الأفكار لا شك أنّ بداية أي حملة تسويقية قبل الشروع في عملية التصميم هي تجميع الأفكار. يبدأ فريقك بالبحث عن الأمثلة الجيدة، ويعثر على ميزات رائعة لتصاميم قد ترغب في الاستلهام منها، ويفكّر في طريقة فعل بعض الأمور مثل تصميم جديد لزر الدعوة إلى إجراء يمكن أن يرفع مُعدّل التحويل. المشكلة هي أنّه ليس من السهل إعادة تمرير تلك الأمثلة (الرسائل) لغيرك لتظهر بشكلها الصّحيح. أو ربما تكون قد صادفت رسالة أو رسالتين احتوتا على خصائص مثيرة للاهتمام وترغب في استخدامها في حملتك القادمة، ولكنك تجد صعوبة في الاطّلاع على شيفرة كل رسالة. ولتسهيل الأمور في مثل هذه الحالات يمكنك استخدام الأداة Litmus Scope التي تسهّل مشاركة البريد الإلكتروني وتحليله بدقة. ستساعدك هذه الأداة على: إلقاء نظرة على نسخة من شيفرة البريد الإلكتروني ومعرفة كيف تمكّن المصمم من جعل ذلك التصميم تفاعليًا أو ذلك النص جذابًا. إرسال معاينة لرسالة إلكترونية مع التّحكّم في خيارات العرض للمتصفّح أو للهاتف المحمول. تفحّص أي رسالة إلكترونية من أي عميل بريد إلكتروني email client. عندما تقوم بتجميع الأفكار بكفاءة والتعمّق في تفاصيل العناصر الجديدة الرائعة التي ستجعلها جزءًا من حملتك التسويقية القادمة، سيكون بإمكانك تحويل تلك الأفكار إلى واقع من خلال رسم أفكارك. أما الميزة الأفضل في هذه الأداة فهي أنّها مجانية، كل ما عليك فعله هو التسجيل من خلال الموقع. ثانيا: Balsamiq لبناء النماذج الأولية mockups تتمحور المرحلة الأولى لعملية التطوير الفعلية لحملتك التسويقية حول رسم التصميم الأساسي، المخطط، والإنشاء copy. ستساعدك في هذه المرحلة Balsamiq، التي تنقل لك تجربة الرسم على السبورة لكن باستخدام الحاسوب وتمكّنك من إنشاء النماذج بسرعة. تتميز هذه الأداة بتصميمها البسيط وتخطيطها غير المعقد، ولهذا لن تشاهد سوى مربعات الحوار التي تحتاج إليها. ويمكنك الاستفادة من خاصية السحب والإفلات لتخطيط المظهر والوظائف الأساسية لحملتك. وكذلك من السهل إعادة ترتيب العناصر، والتي يتجاوز عدد أنواعها 75 نوعًا تستطيع استخدامها مباشرة في مخططك. وبعد أن تنتهي من التصميم، تستطيع تصدير النموذج المكتمل على شكل صورة، أو بإمكانك عمل عرض مباشر باستخدام خيار ملء الشاشة fullscreen. كما أنّك عندما تستخدم Balsamiq خلال المراحل الأولى لدى بناء حملتك البريدية ستشجع فريقك على تقديم التغذية الراجعة/ردود الفعل لأنّه بالفعل يبدو كرسم تخطيطي. وكذلك ستذكّر فريقك بأنّ أي اقتراح لإجراء تغييرات على التصميم هو موضع ترحيب عندما تقوم بعمل تصميم ببنية بسيطة وقليلة التفاصيل. من الخصائص الأخرى الرائعة في هذه الأداة هي أنّك تستطيع إجراء اختبارات المستخدم على النموذج مسبقًا قبل أن تكتب أي شيفرة. وهذا يتيح للفريق تحديد المناطق التي تحتاج إلى تغيير قبل البدء في بناء الرّسالة الإلكترونية. هذه الأداة غير مجانية كسابقتها، حيث يبلغ سعر الترخيص 79$ للمستخدم المفرد. كما تستطيع تجريب الاشتراك الشهري مقابل 12$/الشهر. ولمزيد من المعلومات عن Balsamiq قم بزيارة موقعهم. ثالثا: InVision للتعليقات والتغذية الراجعة بعد أن يقوم فريقك باتخاذ القرار النهائي حول التصميم والمخطط الأساسي لحملتك التسويقية، ستساعدك InVision على تحويل الرسم التخطيطي إلى نموذج تفاعلي بالكامل. ثم بعد صقل النموذج، تستطيع عرضه مباشرة على فريقك باستخدام أداة LiveShare (المشاركة المباشرة) التي توفرها InVision، وبذلك لن تحتاج إلى استخدام رسائل البريد الإلكتروني، إذ يمكنك التعاون ضمن نفس الصفحة وفي نفس الوقت، مما يعني إتاحة فرص أكثر لاقتراح الأفكار وتبادل الآراء حولها. تستطيع أنت وفريقك مواصلة النّقاش حول عناصر تصميم محددة، وكذلك حول خيارات الإنشاء، الوظائف، وغيرها الكثير. كما يستطيع أفراد الفريق إضافة التعليقات مباشرة أثناء العمل على إصدارات مختلفة لحملتك التسويقية. وستتحول التغييرات تلقائيًا إلى قائمة من المهام القابلة للتنفيذ بحيث يكون الجميع على اطلاع على التقدم خلال مراحل عملية البناء. أما بخصوص التسعير، توفر InVision إمكانية إنشاء مشروع واحد مجاني، أمّا أسعار المشاريع المتعددة فتتراوح من15$ إلى 100$/الشهر اعتمادًا على عدد المشاريع. وللمزيد حول هذه الأداة، قم بزيارة الموقع الخاص بها. رابعا: اختبارات التصميم والبريد المزعج عندما تصبح الرّسالة الإلكترونية جاهزة للإرسال، من المهم أن تقوم أولًا باختبار معاينة لحملتك للتأكّد من أنّ جميع العناصر تُعرض بصورة صحيحة. يمكنك القيام بهذا النوع من الاختبارات باستخدام Campaign Monitor التي توفر أداة مدمجة لعمل اختبارات للتصميم والبريد المزعج. تتيح لك هذه الأداة معاينة حملتك عبر أكثر من 20 تطبيق من تطبيقات البريد الإلكتروني الأكثر شعبية، بما في ذلك العديد من الأجهزة النقالة. ستتمكن من خلال نتائج الاختبارات من الحصول على نظرة متعمقة على المعاينة، عرض البريد الإلكتروني مع الصور أو بدونها، والحصول على تقرير عن أداء بريدك الإلكتروني مع مرشحات البريد المزعج. بالإضافة إلى ذلك تستطيع مشاركة نتائج اختبارات التصميم والبريد المزعج التي حصلت عليها، وهذه الخاصية مفيدة لطمأنة المدراء، العملاء والزملاء قبل أن تقوم بإرسال الحملة. خاتمة بإمكانك أن تضمن تفاعل الفريق عند استخدامك لهذه الأدوات الفعّالة لغرض التعاون على بناء حملات البريد الإلكتروني، والحصول على التغذية الراجعة منهم خلال عمليتي التصميم والبناء، وتتأكد من أنّ الجميع ملمّ ومتفق خلال مراحل عملية البناء. أخبرنا بدورك، ما هي الأدوات التي تستخدمها للتعاون مع فريقك على تصميم وبناء حملاتك التسويقية؟ شاركنا بآرائك واقتراحاتك عبر التعليقات. ترجمة -وبتصرّف- للمقال Tools to help you collaborate on email marketing campaigns لصاحبه: Aaron Beashel. حقوق الصورة البارزة: Designed by Freepik.
  24. هل تحتاج إلى بطاقة أعمال جديدة؟ اتبع الخطوات في هذا الدرس لتصميم بطاقة أعمال رائعة باستخدام برنامج أدوبي إليستريتور. سنبدأ بإنشاء تأثير النقوش المتنوعة، ثم سوف ننسق معلومات الاتصال وسنُجهّز ملف الطباعة لإرساله إلى مركز الطباعة. يتألف تصميم بطاقة الأعمال من شقّين الأول يتعلق بواجهة حيوية تُبرز معلومات الاتصال والجهة الخلفية مصممة بنمط حيوي مليء بالنقوش الملونة. البطاقة النهائية المطبوعة ستكون مقصوصة عند الزوايا لذلك سنُجهّز ملف الطباعة الجاهز ليتناسب مع الأبعاد الصحيحة والهوامش ومساحات قطع الطباعة. افتح برنامج الإليستريتور وأنشئ ملفًا جديدًا، ثم حدّد حجم بطاقة الأعمال التي ستُصمّمها، يجب أن تَحصُل على المقاسات المطلوبة من مركز الطباعة الذي ستتعامل معه وبما أنني أتعامل مع UPrinting فسوف أستخدم أبعادَهُم وهي 3.5" في 2" مع هوامش قطع 0.125" وهذا التصميم سيكون لكلا الجانبين لذلك أدخل الرقم 2 في خانة عدد ألواح الرسم Number of Artboards. ارسم مستطيلًا أبيض على كامل مساحة لوح الرسم الأول مُتضمّنًا خطوط هوامش القطع الحمراء. استخدم أداة الخط Line tool لرسم خطوط متقاطعة أفقيًّا وعموديًّا. أضف المزيد من الخطوط المتقاطعة ولكن هذه المرة بشكل قُطري باستخدام الضغط على مفتاح Shift. حدد كل الخطوط المتقاطعة وحوّلها إلى مسار مركّب Compound Path عبر اختيارها من القائمة أو بالضغط على CMD+8. أضف المستطيل الأبيض إلى التحديد ثم انقر على خيَار Divide من لوحة Pathfinder. انقر بالزر الأيمن واختر Ungroup ثم حدد كل الخطوط خارج مساحة العمل واحذفها. جهّز مخطط الألوان الخاص بتصميمك (أنا اخترت واحدًا من ColourLovers) ثم ابدأ بتعبئة الأشكال عشوائيًّا باللون الأول من المخطط. استمر باستخدام بقية الألوان وتعبئة باقي الأشكال عشوائيًّا. اصنع نسخة عن مخطط الألوان وحوّل النسخة من الألوان المسطّحة إلى التدرجات اللونية المقابلة لها بحيث يبدأ كل تدرج باللون ذاته وينتهي بلونٍ أكثر إشراقًا. استخدم أداة العصا السحرية Magic Wand tool وحدّد كل الأشكال ذات اللون الأول من اللوحة ثم استخدم أداة القطّارة Eyedropper tool لاستبدال اللون المسطح بالتدرج اللوني الجديد. بعد أن ننتهي من تطبيق التدرجات اللونية على جميع الأشكال، كبّر العرض Zoom in ثم استخدم أداة التدرجات Gradient Tool لتغيير اتجاه التدرجات لكل شكل بصورة عشوائية. التعبئة العشوائية مع الاتجاهات المختلفة للتدرجات اللونية تمنح الجانب الخلفي للبطاقة تأثير نقشٍ رائعٍ وجميل. فعّل الأدلّة الذكية Smart Guides ثم استخدم أداة القلم Pen tool لرسم شكل محدد وسط البطاقة يسمح بإضافة عنوان الموقع الإلكتروني. أدخل عنوان الموقع الإلكتروني بالخط المفضّل لديك ثم اضبط حجم الخط أصغر قليلًا للبادئة واللاحقة. لوّنهُ باللون الداكن في مخطط ألوان البطاقة. حدّد عنصر النص والشكل المحيط به ثم انقر نقرةً إضافيةً على الشكل المحيط لتجعله العنصر المفتاح. استخدم أدوات المحاذاة لجعل النص يقعُ في مركز الشكل المحيط. اختر أداة المستطيل مستدير الزوايا Rounded Rectangle tool وانقر على لوح الرسم لإدخال الأبعاد الخاصة. أدخل القيم 2.5" في 2" مع نصف قطر زوايا بقيمة 0.25" . انقر بالزر الأيمن على الشكل الجديد ثم اختر Make Guides من القائمة. هذا سيُنشئ خطوط أدلّة تعطينا رؤيةً عن كيفية قص البطاقة أثناء الطباعة. بعد أن أنهينا هذا الجانب من البطاقة سننتقل للعمل على الجانب الآخر. ارسم مستطيلًا على كامل مساحة لوح الرسم الثاني ولوّنه باستخدام مخطط الألوان الذي نعمل عليه. حدّد وانسخ سلسلة من الأشكال المختلفة من الجانب الآخر للبطاقة وضعها في هذا الجانب. ضعها بشكل متّصل ومائل في الركن الأسفل الأيسر من هذا الجانب. في المساحة المُتبقية استخدم أداة النّص وأدخل اسمك، عنوان العمل وتفاصيل الاتصال مستخدمًا خطًّا من اختيارك. امنح هذه العناصر النصية بروز بصري مميز عبر تعديل الحالة والأحجام. رَقَمِي الاتصال الهاتفي وُضِعا بجانب بعضهما البعض، لذا ارسم نقطةً صغيرةً باستخدام أداة الدائرة لفصلهما عن بعضهما البعض. قم بمحاذاة عناصر النص وضعها في الزاوية السفلية اليمنى. استمر بالضغط على مفتاح Shift وحرّك عناصر النص للخلف قليلًا داخل المساحة المُستخدمة في التصميم. تصميم البطاقة أصبح جاهزًا بالكامل لذلك سنقوم بتحضير الملف للطباعة. بدايةً حدّد الجميع وحوًل عناصر النص إلى عناصر خطوط خارجية لتجنب مواجهة أي مشاكل في الخطوط أثناء الطباعة. اذهب إلى القائمة File > Save As واختر خيَار PDF. في الإعدادات بدّل الإعداد المُسبق Preset إلى وضعية دقة الطباعة Press Quality والوضع القياسي Standard إلى الوضع الذي يفضّله مركز الطباعة. في هذه الحالة اخترت PDF/X-1a:2001. استخدم فقط إعدادات قَطع الطباعة للمستند وتأكّد من أنها مفعّلة. بطاقة الأعمال المُعدّة للطباعة أصبحت جاهزة لإرسالها إلى مركز الطباعة. سيقومون بطباعة البطاقة وقصّها بحسب الأبعاد التي قمت بتصميمها أصلًا في هذا الدرس. والآن حان دورك أنت. صمّم بطاقة مُماثلة تحمل اسمك وشارك معنا النّتيجة لنرى من سيُصمّم أجمل بطاقة. ترجمة -وبتصرّف- للمقال: How To Design a Print Ready Die-Cut Business Card لصاحبه Chris Spooner
  25. إذا كان المنتج جميلا ولكن يحلّ مشكلةً ليست لدى أحد فإنّ مصيره الفشل. أمّا إن كان المنتج قبيحا ويحلّ المشكلة الحقيقيّة فالنّجاح على اﻷرجح حليفه. لقد كان هناك تجاوب جميل مع مقال ”لماذا لا يُعدّ ما يُنشر على Dribbble تصميما حقيقيّا“. الكثير من النّاس وافقوا على الطرح وعملوا على إثرائه، بينما البعض منهم خالفوا الرأي وأبدوا وجهات نظر مغايرة. بودّي هنا أن أجيب عن تلك التّعليقات، وأوضّح الدافع الأصليّ لكتابة المقال (الذي لم يكن عن Dribbble خصوصًا)، كما أودّ أيضا أن أتحدّث عن الطّريقة السّليمة لتوظيف المصمّمين. توجد حلقة مفرغة للفهم السّيء لماهية التّصميملعدّة أعوام مضت، ظلّت أهميّة التّصميم الجيّد في تطوير البرمجيّات مُساءً فهمُها ومُقلَّلا من شأنها. كان المصمّمون يُؤسف لحالهم حيث يَطلُب منهم زملاؤهم في الهندسة وإدارة المنتجات أن يقوموا بالمعالجة المرئيّة لشيءٍ قد تمّ الانتهاء من تحديد معالمه بالكامل. لقد كانوا يُطلقون على أنفسهم سخريّةً "قردة الفوتوشوب". كان المصمّمون الّذين في دور "قرد الفوتوشوب" دائمي البحث عن فريق جديد، وعمل جديد. لقد كانوا على علم بأنّ ذاك لم يكن هو التّصميم حقّا. عمل الكثير من النّاس لعدّة أعوام على تغيير هذا التّصور الخاطئ، وتبيين أنّ التّصميم لا يعنى فقط بمظاهر اﻷشياء، ولكن أيضا بكيفيّة عملها. لقد قالها ستيف جوبز بشكل أفضل: ببطءٍ ولكن بثباتٍ، أدركت شركات البرمجيّات أنّ الشّركات التي اعتنت بالتّصميم كانت تتفوق على المنافسين، مع كون آبل أوضح مثال على ذلك. هذا الارتفاع في إدراك أهميّة التّصميم الجيّد أدّى إلى خلق المزيد من وظائف التّصميم، والمزيد من الشّركات التّي تعي بأنّها في حاجة إلى التّصميم الجيّد حتّى تتمكّن من المنافسة. لكن في المقابل، نفس تلك الشّركات لا تدرك تماما مالذي تحتاجه، كونه مجالا جديدا عنها، فتذهب إلى أماكن مثل Dribbble لإيجاد "مصمّمين جيّدين". لكنّ Dribbble ليس ممثّلا لما يعنيه التّصميم حقيقة، فتنشأ هنا حلقة مفرغة: حاصل هذه الحلقة المفرغة هو الدفع بحرفتنا إلى الوراء لإنّها تُبقي على التصوّر الخاطئ للتّصميم بأنّه يعني في المقام اﻷوّل بالجانب الجماليّ. تقوم تلك الشّركات بتوظيف مصمّمي مرئيّاتٍ، ظنًّا منهم بأنّهم سيقومون بتصميم منتجاتٍ جيّدة، حاكمين بذلك على الجميع بالفشل. التصميم المرئيّ لا يوجد في الفراغفي المقال السّابق، مررت على أربع طبقات للتّصميم: النّتيجة المرجوّة من التّصميم (The intended outcome of the design work)تصميم اﻷجزاء اللازمة (The design of the required components)تفصيل التفاعلات (The detailed interactions)الطّبقة المرئيّة (The visual layer)أعتقد أنّه لا يمكن أن توجد أيٌّ من هذه الطّبقات بمفردها. أفضل المصمّمين يفهمون جميع الطّبقات اﻷربع، وأفضل مصمّمي المرئيّات يعرفون كيفيّة تصميم التفاعلات بشكل جيّد. من خلال تجربتي، أفضل المصمّمين الذين عملت معهم كانوا متألقين في واحدة أو اثنتين من هذه الطّبقات، وكانوا بارعين جدا في البقيّة. القدرة على التصميم على طبقات مختلفة أفضل بكثير منها على أجزاء منفردة. قيّم المصمّمين باعتبار الطّبقات التي تحتاجهاعندما أوظّف مصمّمين، فإنّي عادة أبحث عن أناس ممتازين في اثنتين من هذه الطّبقات، مع امتلاك رغبة وحماس كبيرين لمعرفة المزيد عن الطّبقات اﻷخرى. مؤخّرًا، كنت أودّ توظيف مصمّم بملفٍّ كهذا: في شكله القاعدي، مصمّم المرئيّات يشبه نحوًا من هذا: قبل قولك "نحتاج مصمّما!"، فكّر في أيّ صنفٍ من المصمّمين تحتاج. بالنّسبة للشّركات النّاشئة، سيحتاج مديرٌ تنفيذيٌّ ذو مُيولٍ إلى تصميم المنتجات شيئا مختلفا عمّا سيحتاجه مدير يميل نحو التمويل/التحليل. وبالمناسبة، قبل أن تخلُص إلى قول أنّك تحتاج كلَّ شيء عليك أن تعلم بأنّ هذا الشّخص نادر بشكل لا يُصدّق: لا يُمكن الفصل ما بين تصميم المرئيّات وتصميم التّفاعلاتتصميم المرئيّات متشابك مع تصميم التّفاعلات. توجد هناك حلقات تكرارٍ وتغيّرٌ في الحالات والبيانات. ليس هذا تصميمَ مطبوعات. يجب أن يخدم مظهرُ الشّيء آليةَ عمله. إذا كنت مصمّمَ مرئيّاتٍ وتودُّ أن تفهم طبقة التفاعل بشكل أفضل، فإنّي أنصح بشدّةٍ بكتاب دان سافرMicrointeractions. بعض المعلّقين قالوا بأنّ التصميم المرئيّ هو أوّل ما يجذب النّاس نحو المنتج فهو بالتّالي يُعدّ الطّبقة الأهمّ. لا أعتقد أنّ اﻷمر كذلك. التّصميم المرئيّ مهمّ جدّا بلا شكّ، ولكنّ النّاس أيضا ينجذبون نحو أشياء تُنِمُّ عن قيمةٍ متوقّعة – حقيقة المنتج، الفائدة التّي يقدّمها – بعبارة أخرى، العمل الذي تؤدّيه الطّبقات العليا للتّصميم. لقد شهدنا منتجات قبيحة المظهر تحقّق نجاحا (Craigslist على سبيل المثال)، ومنتجات بهيّة المظهر تؤول إلى الفشل (Color على سبيل المثال). قد تجذب المنتجات التي تبدو جميلة النّاس نحوها، لكنّ أولئك النّاس لن يبقوا حولها طويلا إذا كانت اﻷمور فيما عدا الطّبقة المرئيّة مصمّمة بشكل سيّء. كلّ الطّبقات مهمّة بشكل حسّاس. ليس Dribbble ما يقوله النّاس عنه ولكن ما يستعملونه من أجلهأخيرًا لنتحدّث عن Dribbble بشكل خاصّ. لم يكن المقال اﻷوّل هجومًا على Dribbble كمنتج، وإنّما كان المقصدُ هو الموضوع بشكل أعمّ. إنّها الحلقة المُفرغة للتّصور الخاطئ للتّصميم التي يجب أن تُكسر. بخصوص ردود الدّاعمين لـ Dribbble ، النّقطة الرّئيسية بالنّسبة لي هي أنّ Dribbble ليس ما يقوله النّاس عنه، ولكن ما يستعملونه من أجله. كما يعلم ذلك كلّ من يعمل على بناء منصّةٍ للتّعبير/النّشر، لا يمكن التّنبؤ بكيفيّة استعمال النّاس لها. تتجاوب المنصّة بعدها وتتكيّف وتتطوّر. يقول النّاس أنّ Dribbble هو "موقع استعراض"، "موقع لعرض اﻷشياء والإخبار عنها"، "تويتر للمصمّمين"، "مكانٌ للتّصميم لا تهتمّ فيه للقيود التي يفرضها العالم الحقيقيّ". لا أجد ﻷيٍّ من هذه التّفسيرات كثير معنًى. إذا كان يُقصد به فعلًا عرضٌ موجزٌ ﻷعمالٍ طورَ الإنجاز، فإنّي أتوقّع أن أرى خربشاتٍ ومسوّداتٍ وأمورًا غير ناضجة. لكنّ أكثر ما يوجد على Dribbble هي تصاميم مُتقنة الإنجاز إلى حد البيكسل. أمّا إن كان يُقصد به الإلهام البصريّ، فهذا حسنٌ لكنّه فنٌّ أكثر ممّا هو تصميم، وبالتّأكيد لا يُعدّ بذلك المكانَ اﻷمثلَ لإيجاد مصمّمين جيّدين. بالطّبع، رسّامين ماهرين وفنّانين مبدعين، ولكن ليس مصمّمين. أفضل تفكيرٍ رأيته هو أن يُعدّ Dribbble بمثابة إعلانٍ يتمّ عن طريقه توجيه الموظِّفين إلى موقعك الشّخصيّ – الذي يُظهر منهجيّتك و مسودّاتك وآليّة عملك. شعبيّتك في Dribbble لا تجعل منك مصمّما جيّداهناك بالتأكيد بعض المصمّمين الممتازين على Dribbble، وأمثلة ﻷعمالٍ يتمّ فيها التّركيز على غير الطّبقة المرئيّة. لكنّ تلك تُعدّ استثناءً. في أغلب الحالات، معرض أعمالٍ ذو شعبيّة في Dribbble ما هو إلّا دليل على أنّك خبير في برامج الرّسم، بأنّك مُطّلع على آخر توجّهات التّصميم المرئي، وفي بعض الحالات بأنّك تُحسن إحدى الطّبقات اﻷربع. لكن لا توجد هناك علاقة سببيّة بين الشّعبية في Dribbble والقدرة على تقديم أعمال تصميم جيّدة. كلّ ما يُهمّ هنا هو أن نكسر الحلقة لا أهتمّ كثيرا لـ Dribbble ، أو أيّ موقع لعرض اﻷعمال. ما يهمّني أكثر هو أن تُكسر تلك الحلقة المفرغة. أخشى أن لا يتعرّض المصمّمون الشّباب لحقيقة التّصميم الجيّد. أهتمّ لهؤلاء المصمّمين الشّباب حتّى لا يتمّ وضعهم في وظائف تؤدّي بهم إلى الفشل، حتّى لا يقوموا من غير علمٍ بتصميم منتجات لا أحد يحتاجها أو تصميم تفاعلات لا أحد يفهمها. أهتمّ للشّركات التّي تستثمر في التّصميم حتّى لا تفشل بسبب عدم فهم ما تحتاجه. هذا كلّه للتّعليم، وفوق كلّ شيء، لإيصال فكرة أنّ التّصميم يعني أساسا بآلية عمل اﻷشياء، لا بمظهرها. ترجمة -وبتصرّف- للمقال: How To Hire Designers لصاحبه بول أدامز.