Carina Mawad

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

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

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

السُّمعة بالموقع

0 Neutral
  1. يُعرَّف النموذج المحاكي Mockup لموقع الويب، بأنه التمثيل التصميمي والكلي لأداء الموقع ومظهره، وهو من أهم اختصاصات المصمم المحترف. يتكون النموذج المحاكي لصفحة الويب من بعض خصائص الموقع أو جميعها، ولكنه يختلف عن النموذج العملي Prototype الذي يوضح كيفية عمل الموقع وأدائه؛ في حين يصف التصميم المحاكي Mockups شكل الموقع وتصميمه، كما يساعد على فهم الشكل النهائي للموقع والعناصر التفاعلية فيه، ويتطلّب فهم أيّ تفصيل قد يطرأ على تصميم الموقع. لذلك فهو يُساعد مصمم الويب على فهم تصميم الموقع قبل إطلاقه. إليك هذه النصائح التصميمية التي ستساعدك على تصميم النموذج المحاكي المثالي لموقعك. جمع المعلومات من العميل يجب عليك أن تطلب كافة المعلومات المتعلقة بنموذج الموقع من العميل، وأن تكون هذه المعلومات دقيقةً ومُفَصلة، مثل: التفاصيل المتعلقة بمظهر الموقع، والشعار، والألوان، والصور، ونظام التّنقُّل بين الصفحات. كما يجي عليك فهم حجم التفاعلية التي يريدها العميل في موقعه، وسمات الألوان التي يُفضّلها. انتبه إلى مكان الشعار على الصفحة، والصور الأساسية، ومكانها في النموذج المحاكي، وتذكّر أنّ طلبات العميل هي أهم أولويات العمل. حدد الشريحة المستهدفة تأتي عملية تحديد فئة المستخدِمين التي يستهدفها الموقع في المرتبة التالية لعملية جمع المعلومات من العميل. لهذا حاول أن تحدّد الفئة التي ستزور الموقع، وتتفاعل مع تصميمه، وطريقة تفاعلها مع الموقع والأدوات التي ستستخدمها للتّفاعل. فمن المهم معرفتك إذا كان زوار موقعك مستخدِمين يوميين للإنترنت، أم أنهم نادرًا ما يتصفحون الويب، كما يجب أن يناسب التصميم المحاكي جميع شاشات العرض التي قد يستخدمها زوار الموقع سواءً كانت شاشات الحاسوب الشخصي، أو الحاسوب المحمول، أو الهاتف الذّكي. وفي هذه الحالة ركز على استخدام العناصر المرئية عالية الجودة، لضمان تجربة تصفُّح مثالية على مختلف أنواع الشاشات. صمم بإبداع اطّلِع أولًا على النماذج المحاكية لمواقع الشركات لتحصل على رؤية واضحة عن شكل التصميم والجوانب التي يُغطّيها. يُعَدّ إبداعُك في هذه المرحلة مهمًا جدًا، حيث سيساعدك تصفُّح النماذج الجاهزة على استلهام أفكار جديدة ستجعل تصميمك مختلفًا وإبداعيًّا، لهذا احرص على أن يضُم التصميم كل التّفاصيل المطلوبة بأفضل شكل ممكن، مع اختيار الألوان المناسِبة، وطريقة توضُّع العناصر المختلفة. ستبدأ مهمتك بعد الانتهاء من إغناء بصرك بالتصاميم الجاهزة، وهنا يمكنك تحديد الهيكل العام للتصميم المحاكي بالاعتماد على المعلومات التي جمعتها، انطلاقًا من الأشكال الأساسية والنص الذي سيُعرّف النموذج، بعدها حدّد شكل الشعار ومكانه، وانتبه إلى اختيار الألوان التي تناسب ألوان الشعار وتنسجم معه. اختر الخطوط يجب أن يكون الخط المُستَخدَم في الموقع بحجم مناسب ولون متناسق مع ألوان الموقع، كما يجب مراعاة وضوح الخط فيما يخص الخلفية. إذ يجب عليك مثلًا، تجنَّب استخدام لون أصفر للخلفية مع لون أحمر أو برتقالي للخط. تذكّر أن حجم الخط يجب أن يكون مناسبًا، وأنّ لون الخط يجب أن يكون موحّدًا في جميع صفحات الموقع بغضّ النظر عن نوع الخط. إذ عليك تجنب استخدام نوع الخط Times New Roman لكتابة محتوى الصفحة الأولى ثم استخدام خطوط Arial لكتابة محتوى الصفحة التالية مثلًا، كما يجب عليك الانتباه إلى ضرورة انسجام لون الخط ونوعه مع تصميم نموذج الموقع، وأن يكون الخط مناسبًا، ومقروءًا على كافة شاشات العرض. اختر الصور المناسبة تشذيب التصميم عندما تُنهي العمل على التصميم وتختار العناصر والألوان، ابدأ بمرحلة الاختبار والتحقق من الأخطاء لتشذيب تصميم النموذج. اختبر المؤثرات والحركة على العناصر التفاعلية وحدِّد مظهر العناصر المختلفة والصور، بعد تطبيق الحركة عليها، واستخدِم إبداعك ومخيّلتك لإضافة تفاصيل تصميمية تُنعش الموقع. فمثلًا، يمكنك اختيار صورة معينة ولتكن صورة شعار الموقع، واستخدامها مثل خلفية للصفحة مع زيادة شفافيتها، بحيث تبقى في مرمى نظر المستخدِم طيلة فترة تصفُّحه للموقع. وعليك اختبار الصور والحركة مع عمليات التنقُّل بين الصفحات، حيث يمكنك استخدام قائمة تنقُّل تنسدل عند تمرير مؤشر الفأرة عليها، أو نترك للمستخدِم خيار استعراض قائمة التنقل بين الصفحات. اختر الأدوات المناسبة لتصميم نموذجك يُعَدّ اختيارك لأدوات التصميم أساس الحصول على عمل إبداعي متكامل يُرضي العميل والمستخدِم، ومن أهم أدوات تصميم النماذج المبدئية للمواقع، ما يلي: برنامج الفوتوشوب هو برنامج لتصميم الرسوميات، حيث يعمل على أنظمة الماك والويندوز، ويُمكّنك من إنشاء تصاميم خلابة، أو التعديل على صور موجودة مسبقًا، وهو أحد أقوى برمجيات التعديل على الصور، وتصميم الرسوم التصويرية بأنواعها. توجد عدة إصدارات لبرنامج الفوتوشوب، منها: Photoshop CC، وPhotoshop Elements، وPhotoshop Lightroom. برنامج Moqups هو برنامج يساعدك على العمل مع واجهات تصميم فارغة، وتمثيلات بيانية متنوعة، وعناصر تصميم أخرى، وهو أحد أفضل برمجيات تصميم النماذج المحاكية، إذ يساعدك على التعامل مع المخططات الشبكية، والرسوم البيانية، والخرائط الذهنية، والنماذج المتنوعة. برنامج الإليستريتور هو برنامج يعتمد على التصاميم الشعاعية Vectors، حيث يُستخدم لرسم وتطوير عناصر تفاعلية لواجهات المواقع. يتيح البرنامج إنشاء الرسوم التخطيطية، والأعمال الفنية للحصول على صور وتصاميم عالية الجودة. ويتميز بإمكانياته العالية في الحصول على تصاميم عالية الوضوح، كما يسمح بتصُّور المظهر الحقيقي الذي سيبدو عليه الموقع. برنامج InVision هو برنامج يسمح بمشاركة تصميم الموقع المحاكي مع بقية أعضاء فريق التصميم أثناء العمل، بهدف الحصول على عمل متكامل. تحسين المحتوى البصري تتجلّى أهمية تحسين المحتوى البصري بوجود مكان مناسب، وكافٍ على صفحة الموقع لعرض الصور، والتصاميم المختلفة، حيث تستطيع بواسطة التصميم المحاكي أن تحدّد طول المدونة، وتُنسّق المحتوى البصري وفقًا لذلك، كما يجب أن تحدّد مساحةً معيّنةً لوضع الصور ضمنها، لأن المستخدِم سيأخذ فكرةً عن المحتوى من خلال إلقاء نظرة سريعة على الصور، ومن الشائع أن ينظر المستخدِم إلى الجهة اليُسرى أولًا، لذلك احرص على وضع الروابط المهمة والصور على الجانب الأيسر من الموقع. إزالة العناصر غير المهمة تُعَدّ الواجهة الجميلة والجذّابة الخطوة الأولى لنجاح أيّ تصميم تفاعلي، لذلك انتبه إلى إزالة كافة العناصر غير الضرورية من التصميم المحاكي للموقع لأنها تؤثِِّر سلبًا على أداء الموقع ووضوحه وإمكانية قراءة محتواه. وتذكّر دومًا أنّ التصميم المتماسك والمتناسق يكمُن في تمثيل العناصر للأداء الصحيح للموقع. لذلك حافظ على العناصر الضرورية، وتخلّص من أي عنصر غير مهم. اختبار النموذج المحاكي يجب أن تختبر عدة عوامل في نهاية تصميم النموذج المحاكي للتحقق من عمله. ابدأ أولًا بالتحقق من أداء النموذج على الأجهزة المختلفة بوجود أنواع مختلفة من طرق الاتصال وأنظمة التكوين، إذ يجب أن يعمل الموقع بنجاح على جميع الأجهزة، وتذكّر ضرورة التحقق من قابلية قراءة المحتوى، مع وجوب تحقيق الانسجام بين التّصاميم المختلفة، مع عملها السليم على جميع الأجهزة، واسمح لباقي أعضاء فريقك باختبار النموذج وتجريبه بغرض التقييم. ختامًا، تذكّر أنّ التصميم المحاكي سيُعرّف الغرض من الموقع، كما سيُجسّد المظهر النهائي لصفحات الموقع، حيث تساعدك النصائح السابقة على تطوير التصميم المبدئي للموقع للوصول إلى أفضل تصميم تفاعلي ممكن، وبإمكانك الاعتماد على متصفحي المواقع المحترفين لفهم أهم التغييرات التي قد يحتاجها موقعك أو واجهة المستخدِم فيه ليحصل الزائر في النهاية على تجربة تصفُّح مثالية. ترجمة وبتصرف للمقال 10tips to create perfect website mockups للكاتب Harsh Raval.
  2. يتطلّب التسويق الناجح عدة عوامل، مثل: التكامل بين موقعك الإلكتروني، وحضورك على شبكة الإنترنت، وإعلانات الدفع مقابل كل نقرة، وتحسين نتائج ظهور موقعك في محركات البحث. ويتجلى نجاح موقعك بوجود صفحة هبوط خالية من الأخطاء تُشجع الزوار على التفاعل مع موقعك وتصفحه لوقت أطول. لذلك سنستعرض مجموعةً من الأخطاء الشائعة التي يجب عليك تجنُّبها للحصول على أفضل تصميم ممكن لصفحة هبوط مثالية لموقعك الإلكتروني. عدم إنشاء نسخة للهواتف الذكية تُشكل الهواتف الذكية اليوم جزءًا كبيرًا من نجاح عملية إدارة استراتيجيات التسويق والشركات، لذلك يجب عدم إهمال إنشاء نسخة لصفحة الهبوط تُناسب شاشات الهواتف الذكية. لقد وجد المصممون أفضل تصاميم التحريك الظاهري للكائنات على الشاشة وسمات عرض صفحات الهبوط التي تُعرَض على شاشات الحاسوب، ولكن يبقى التحدي الأكبر، هو عرض الشاشة نفسها على الهاتف الذكي، وبنفس جودة العرض، إذ يُعاني المستخدِمون أحيانًا من غياب خاصية التحريك الظاهري على شاشات الهواتف الذكية، مما يؤثِّر سلبًا على تقييم موقعك من قبل المستخدِمين. حيث يلجأ معظم الناس اليوم ولا سيما فئة الشباب، إلى تصفح المواقع وطلب الخدمات باستخدام هواتفهم الذكية، ولذلك فغياب نسخة الموقع على الهواتف الذكية، لن يُشجعهم على زيارته باستخدام الحاسوب، بل سيؤدي إلى تراجُع موقعك. لهذا احرص على توفير نسخة مناسبة من صفحات موقعك تُناسب الهواتف الذكية. زمن التحميل الطويل يُعرَّف زمن تحميل صفحة الويب بأنه الزمن اللازم لتحميل كافة محتويات صفحة الموقع، وعرضها أمام المستخدِم، بحيث يصبح قادرًا على التفاعل مع عناصر الموقع المختلفة، ويُعرَّف معدّل الارتداد بأنه المغادرة الفورية لزوار الموقع عندما تستغرق صفحة الويب وقتًا طويلًا لتُعرَض أمامهم بأكملها، إذ يُغادر حوالي 70 بالمئة من زوار الموقع عندما تستغرق عمليتَي التحميل والعرض وقتًا طويلًا، مما يسبب تراجع حركة مرور البيانات في موقعك. من الخطأ أن يتجاوز زمن تحميل صفحة الويب أربعة ثوانٍ، لذلك عليك تقليل زمن تحميل الموقع إلى الحد الأدنى، مع مراعاة ظهور محتوى الموقع وهيكله العام أمام الزوار، وتذكر أنّ زمن التحميل الطويل لصفحة الهبوط سيقلل من حركة مرور البيانات عبر الموقع. غياب التصميم البسيط لا تَدعْ موقعك يبدو فوضويًّا أو مُربكًا للمستخدِم، إذ تتميز صفحة الهبوط المثالية بقدرتها على تزويد المستخدِم بالمعلومات الضرورية المتعلقة بعملك، والتي تدفعه إلى التفاعل مع موقعك. لذلك يجب عليك وضع كمية معلومات قليلة نوعًا ما في الصفحة الترحيبية، مع الحرص على تصميم واجهة بسيطة ومرتبة، كما يجب أن يكون التنقُّل بين صفحات موقعك سهلًا ودقيقًا، لذلك تجنب وضع استمارة طويلة في صفحة الهبوط، واستبدلها بمزيد من المحتوى المكتوب في أسفل الصفحة، بحيث يُحرّك المستخدِم الصفحة هبوطًا للاطلاع على المزيد من المعلومات، وساعده أيضًا على الاستمتاع بصفحة الهبوط من خلال استخدام الإرشادات، والصور، ومقاطع الفيديو التي تُساعد المستخدِم، بحيث يكون مقطع الفيديو سهل المشاهدة بنقرة واحدة، ولا يؤثر على سرعة تحميل الموقع. عناوين غير معبرة يجب أن تتمتع صفحة الهبوط الناجحة بعنوان مُشجّع يدفع المستخدِم إلى تصفُّح وقراءة المزيد. حيث يجب أن يشرح العنوان خدمات الموقع للمستخدِم ليُدرك هذا الأخير سبب استثماره لأمواله، ووقته في موقعك، إذ يساعد العنوان الدقيق والمُكثّف على إرشاد المستخدِم إلى محتوى موقعك، وطريقة تفاعله معه، حيث أظهرت دراسة أنّ الوقت اللازم لإقناع المستخدِم بالاستثمار في موقعك هو 8 ثوانٍ أو أقل، فإذا لم يكن العنوان واضحًا ومُحددًا، فعندها لن يبذل المستخدِم أيّ مجهود لمعرفة المزيد عن موقعك، أو الخدمة التي تقدمها. يمكننا تشبيه عنوان الموقع بالعناوين الرئيسيّة في الصحيفة، والتي يجب أن تكون شاملةً وجذابة/ مما سيساعد زواحف الويب أيضًا على فهرسة محتوى موقعك. فعلى سبيل المثال، استخدِم عبارة (يقدّم موقعنا خدمات في مجال تقنيات المعلومات)، بدلًا من (أهلًا بكم في موقعنا). عرض محتوى عديم الجدوى يُعَدّ محتوى صفحة الهبوط الذي لا يخدم هدف الصفحة، أو لا يُعبر عنها بدقة، واحدًا من أخطاء تصميم الصفحات التي تُسبب تراجُع الموقع. إذ يُسبّب المحتوى غير المُجدي تشتُّت المستخدِم، مثل: استخدام الصور البعيدة عن محتوى الموقع، أو المحتوى المدعوم الذي لا يخدم هدف الموقع. نظرًا لتقليل هذا المحتوى من حماس الزائر لمتابعة تصفُّح بقية صفحات الموقع، ولهذا يجب أن يكون محتوى صفحة الهبوط عبارة عن صور، ومقاطع فيديو، وفقرات مكتوبة تشرح عملك وهدف موقعك، مما سيُشجع المستخدِم على التفاعل مع الصفحة، كما سيزيد من حركة البيانات داخل موقعك. إهمال التصميم يُعَدّ التصميم الأنيق أحد أهم عوامل نجاح الموقع الإلكتروني، حيث يجذب التصميم الجميل والمتناسق الزوار، بغضّ النظر عن محتوى الموقع، أو سرعة تحميله؛ ولذلك يجب أن يكون تصميم صفحة الهبوط متناسقًا ومرتّبًا أيًّا كان المحتوى سواءً صور، أو مقاطع فيديو، أو روابط. ويتألف تصميم صفحة الويب من عناصر واجهة المستخدِم، والمحتوى الموجود في هذه الصفحة، حيث سيُشجع التصميم المرتب والجذّاب المستخدِمين على تصفح باقي صفحات الموقع، والتفاعل مع محتواه أيضًا. تحديد الهدف يُعَدّ الهدف الرئيسي من تصميم صفحة الهبوط، هو تحويل زوار موقعك إلى عملاء، من خلال تحديد هدف الموقع في صفحة الهبوط. ويجب عليك اختيار أزرار الدعوة إلى القيام بإجراء معين CTAs، بحيث لا تُبالغ في عدد هذه الأزرار لتجنُّب إرباك المستخدِم، لأنّ كثرة أزرار CTA سيزيد من معدلات الارتداد بسبب تذمُّر المستخدِمين، وهو ما سيؤثر سلبًا على مكانة موقعك في نتائج محركات البحث. ركز على زرّ تفاعل واحد لتحويل زوار الموقع إلى مستخدِمين وعملاء فيه أيضًا، وكُن واضحًا ومحددًا عند كتابة محتوى صفحة الهبوط. عدم الاهتمام بالاستمارات الإلكترونية تُعَدّ الاستمارة الإلكترونية طريقة تفاعل أساسية بين المستخدِم والعلامة التجارية، حيث تهدف الاستمارات إلى جمع المعلومات المطلوبة عن العميل، أو تشجيعه على التفاعل مع الموقع. ولتحقيق ذلك يجب أن تكون الاستمارة مصمَّمةً بأناقة، وبساطة، وأن تتضمن المعلومات التي يجب الحصول عليها فقط؛ كما يجب أن تكون الاستمارة بسيطةً وواضحةً بحيث لا تُربك المستخدِم. لذا ابتعد عن التصاميم المعقدة أو غير الواضحة واستبدلها بتصاميم مريحة، وسهلة الفهم، وتضم كافة المعلومات التي يحتاجها الموقع للتعرُّف على المستخدِم لأنّ الاستمارات المعقدة أو غير الواضحة، ستؤدي إلى إجابات خاطئة من قِبل المستخدِمين، وقد لا تُشجعهم على التفاعل مع موقعك أصلًا. المحتوى غير المقروء يركز مصممو المواقع اليوم على تصميم صفحة الهبوط، بغضّ النظر عن وضوح المحتوى المكتوب على الصفحة. لذلك يجب الانتباه لوضوح المحتوى وقابلية قراءته بسهولة من قِبل الزوار، لأنه أول ما ستقع عليه عينا الزائر. حيث يجب أن ينسجم لون الخط مع لون الخلفية، ليكون المحتوى قابلًا للقراءة، كما يجب تجنُّب استخدام الألوان المتضاربة أو غير المريحة عند تصميم صفحة الهبوط. إضافةً إلى أنّ استخدام صورة في خلفية الصفحة قد يجعل النص صعب القراءة أو غير واضح، مما سيُزعج الزائر ويدفعه إلى مغادرة موقعك بحثًا عن موقع يتمتّع بتنسيق أوضح، وسيؤثر ذلك سلبًا على موقعك. لهذا امنح الأولوية لراحة المستخدِم وسهولة قراءة المحتوى المكتوب، دون المبالغة في استخدام الألوان أو التصاميم. تذكّر أنّ صفحة الهبوط هي واجهة موقعك التي ستحدد تفاعل المستخدِم معه، لذلك تجنب التصاميم التي قد تُزعج المستخدِم وانتبه إلى أنّ زيارة المستخدِمين لموقعك وتفاعلهم مع صفحاته، سينعكس على تقييم الموقع واختيار علامتك التجارية، وظهورها في نتائج محرّكات البحث. ترجمة وبتصرّف للمقال 9 Things Not to Do While Designing a Landing Page لصاحبه Harsh Raval
  3. استخدم المصممون في السابق برنامجي فوتوشوب، وإليستريتور كأساس لإنجاز تصاميمهم، وذلك قبل انطلاق منصة أدوبي إكس دي، التي تجمع خبرات مصممي الويب في مجال تحسين تجربة المستخدِم. حيث تمتاز هذه المنصة بتخصّصها وتركيزها على تصاميم الويب التي تهدف إلى تحسين واجهة المستخدِم، وهي من أكثر منصّات التصميم تفاعلًا وتجاوبًا مع المصمم، إذ تسهّل تصميم المخططات الهيكلية والنماذج المبدئية لصفحات الويب، والتطبيقات المختلفة. وسيضم هذا الدليل مجموعة نصائح لاستخدام برنامج أدوبي إكس دي باحترافية. بدء استخدام أدوبي إكس دي ابدأ رحلتك في برنامج إكس دي بالنقر على زرّ (المقدمة التّعريفية)، التي ستشرح لك بالتّفصيل أساسيات استخدام البرنامج، والعناصر التي ستحتاجها في التصميم، إذ ستساعدك على إنشاء الّلوحات الفنية، واستيراد الصور، وغيرها الكثير. أنشئ بعدها مشروعًا جديدًا من قائمة (ملف)، وستظهر أمامك واجهة مشابهة للواجهة الترحيبية. في المرحلة التالية عليك اختيار أبعاد الشاشة التي تناسب مشروعك سواءً كان تصميم موقع للويب، أو تطبيق للهاتف المحمول؛ وإلا عليك بإدخال قيم الأبعاد يدويًّا. ستظهر أمامك بعد اختيارك القياسات، واجهة أدوبي إكس دي التي تتكوّن من التصميم والنموذج. حيث ستستطيع في نافذة التصميم، تركيب المكونات المختلفة للتصميم على اللوحة المخصّصة، بحيث تُمثَّل كل لوحة على شاشة مختلفةن وسيساعدك إكس دي على إنشاء عناصر، وأشكال أخرى إضافيّة، كما بإمكانك اختيار استيراد عمل فني ما من أيّ مصدر خارجي أيضًا. استكشف قوة خصائص إكس دي يضم برنامج أدوبي إكس دي جميع الخصائص التي يحتاجها المصمم في مجال واجهة المستخدم، حيث تتشابه معظم هذه الخصائص مع خصائص التصميم الموجودة في برامج شركة أدوبي الأخرى مثل الفوتوشوب. ومن جهة أخرى تختلف خصائص أدوات الرسم والطبقات في إكس دي عن تلك الموجودة في بقية برامج أدوبي، بحيث تتلاءم مع تنوُّع أساليب المصممين في العمل، كما يبقى كل عنصر من عناصر إكس دي في طبقة مستقلة، إلى جانب تنوّع الأيقونات التي تمثّل كل نوع من أنواع الطبقات، بحيث تعبّر عن نوع المحتوى الموجود في كل طبقة، وهو ما يسهّل على المصممين التفريق بين الأشكال المختلفة والمجلدات والصور بمجرد النظر إلى الأيقونة التي تمثّل الطبقة. إليك مجموعة من أفضل ميزات برنامج أدوبي إكس دي التي سترفع من إنتاجيتك عبر استخدامك للمنصة. تكرار الشبكة وهي ميزة مفيدة جدًّا، حيث تُمكّنك من تطبيق التكرار على عنصر، أو أكثر من العناصر التي أنشأتها، مما يساعدك على تمثيل هذه الأشكال على محورَي الفواصل X، والتراتيب Y. كما تساعدك خاصية التكرار على تغيير المسافة بين العناصر، بحيث تبدو وكأنها مجموعة من المكوّنات أو مكوّن وحيد. وتتجلّى أهمية هذه الميزة في إنجاز التصاميم التي تحوي عناصر مكرّرة، مثل: قائمة من الصور، أو النصوص، فعندما تُنشئ معرضًا للصور على الواجهة مثلًا، فسيتطلّب الأمر مجهودًا كبيرًا للحصول على المظهر المطلوب، بينما تساعدك خاصية التكرار على التركيز على تفاصيل العمل، دون القلق بشأن المظهر عند التطبيق. النماذج عندما تُنهي العمل على تصميمك، فستستطيع الاستمتاع بمشاهدة النتيجة عمليًّا من خلال خيار Prototype (النموذج)، والموجود في أعلى الزاوية اليسرى من الواجهة، حيث يمنحك هذا الخَيار القدرة على ربط عناصر تصميمك المختلفة، والتي ستشكّل في النهاية شاشات التطبيق الذي تعمل عليه. حدّد العنصر المطلوب وسيظهر سهم في الجانب الأيمن من مساحة العمل، اسحب هذا السهم وأفلته في لوحة العمل الأخرى التي ترغب بالربط معها. مجموعات جاهزة من واجهات المستخدم يضم برنامج أدوبي إكس دي مجموعات جاهزة من تصاميم واجهات المستخدِم التي تُسهّل تصميم النماذج المبدئية المناسبة لتطبيقات iOS، وجوجل، ومنصات ويندوز. فقد صُمّمت هذه المجموعات باستخدام عناصر جاهزة تساعد المصمم إلى حدّ كبير على معرفة شكل التطبيق عندما يُعرَض أمام المستخدِم، كما توفّر هذه المجموعات الوقت والجهد على المصمّم عند استخدامه بعض عناصرها الجاهزة. مكتبات التخزين السحابي Creative cloud يساعد التخزين السحابي على مشاركة جميع عناصر التصميم، مثل: الصور، والألوان، وأنماط الخط، وغيرها عبر جميع منصات أدوبي. حيث أُضيفَت هذه الميزة إلى منصة إكس دي في شهر آب عام ٢٠١٧، ليصبح بإمكان المصمّم الوصول إلى جميع العناصر المخزنة على السحابة الإبداعيّة لأدوبي، مما يوفّر الكثير من الوقت عند استخدام برنامجَي فوتوشوب، أو إليستريتور لإنشاء عناصر المشاريع على XD. الرموز تتشابه الرموز الموجودة في برنامج أدوبي إكس دي، مع تلك الموجودة في البرامج الأخرى مثل الإليستريتور، وهذا في بعض الخصائص؛ في حين تختلف عنها في خصائص أخرى، فعندما تُحوّل عنصرًا ما إلى رمز، فيتستطيع استخدامه في عدة لوحات عمل في الوقت نفسه؛ أما في حال عدّلْت على الرمز الموجود في لوحة العمل التي تعمل عليها حاليًّا، فسيُطَبّق التعديل نفسه على نفس الرمز الموجود في لوحات العمل الأخرى، مما سيساعدك على إنجاز الأعمال التي تتطلّب هذا التكرار بسرعة أكبر، وباحترافية تُجنّبك الأخطاء التي قد تنتج عن التكرار اليدوي، أو إغفال تطبيق هذا التكرار على لوحة عمل أخرى. العرض الأولي عندما تنتهي من ربط العناصر المختلفة لعملك؛ ستستطيع اختيار تفعيل تأثيرات الانتقال ease-in، وease-out، والضغط على زرّ التشغيل الموجود في أعلى القسم الأيمن من الشاشة لعرض التطبيق، كما تستطيع تحميل تطبيق الأندرويد، أو iOS، وإجراء التعديلات وفق الزمن الحقيقي real-time. تصدير المكونات عندما تعمل على تصميم تطبيق أصلي؛ فستحتاج إلى تصدير المكونات عند تسليمه للمُطوِّر، كما تستطيع جعل تصميمك بنسبة بوصة واحدة للطول، مقابل بوصة واحدة للعرض ١:١، كما تُزوّدك أدوات البرنامج بنسخ مُكبَّرة مرّتين أو ثلاث مرّات، وهي النسخ المطلوبة في تصاميم الأندرويد، وiOS. خدع ونصائح لاحتراف أدوبي إكس دي إليك بضعة نصائح ستساعدك على استخدام أدوبي إكس دي باحترافية ومتعة. الإرشادات الذكية تُعَدّ ميزة التعليمات الإرشادية الموجودة في فوتوشوب غير موجودة في أدوبي إكس دي، ولكن الإرشادات الذكية تظهر عندما تسحب عنصرًا ما لتنسيق موقعه بالنسبة إلى العناصر الأخرى، وهو السلوك الافتراضي للبرنامج. وللتخلّص من ذلك مؤقّتًا؛ اضغط على زرّ Ctrl، ثم اسحب العناصر لتنسيق مواقعها. خدعة تكبير الخط عندما تُحدّد نصًّا ما على واجهة البرنامج، فستظهر أمامك أداة تحديد لها شكل كرة صغيرة في أسفل مستطيل التّحديد، وعندما تسحب هذه الكرة للأعلى، فسيزداد حجم الخط؛ بينما سينقص عندما تسحبها للأسفل. نسخ الصور واستخدام خاصية القناع من السهل سحب أي صورة تريدها وتُفلِتها داخل واجهة أدوبي إكس دي، ولكن إذا أردْت لصورة ما أن تأخذ شكلًا محدّدًا، فتستطيع ببساطة سحب هذه الصورة إلى الشكل المطلوب، وستملأ الصورة هذا الشكل بتنسيق مناسب. يُفضّل أحيانًا تطبيق خاصية القناع Masking على أجزاء معيّنة من الصورة، حيث يُطبَّق هذا التأثير بدءًا بالطبقة الأعلى، ولن يتأثر بباقي التعديلات. أعِد ضبط ارتفاع الخط باستخدام الصفر إذا جرّبْت إعطاء قيم مختلفة لارتفاع خط الكتابة، ووجَدْت أنّ الارتفاع الافتراضي هو الأفضل، فبإمكانك إعادة قيمة الارتفاع إلى القيمة الافتراضية التي يُقدّمها البرنامج بسهولة، من خلال كتابة قيمة الصفر في حقل ارتفاع الخط. استيراد العناصر الشعاعية Vectors من برنامج الفوتوشوب تستطيع نقل الصور بسهولة بين برنامج الفوتوشوب وبرنامج XD، حيث يُمكنك إنشاء تحديد ما على صورة في الفوتوشوب، ثم الضغط على Ctrl + Shift + C لتُنسخ جميع العناصر الموجودة ضمن هذا التّحديد. افتح بعدها XD، واضغط على Ctrl + V للّصق، وستستطيع هنا تصدير الطبقات الموجهة من الفوتوشوب، بالضغط بالزر الأيمن للفأرة على الطبقة المطلوبة، ثم اختيار copy SVG، ولصق ما نسخته في برنامج XD. استخدم دليل الأنماط تستطيع إنشاء تصميم لدليل أنماط معين، بحيث يضم جميع المكوّنات، وعناصر التحكم، مثل: الأيقونات الشائعة، والأزرار، وعناصر الإدخال. بدل بين المساحة النصية والمساحة النقطية يمكننا التبديل بين المساحة النصية والمساحة النقطية، من خلال استخدام زرّ التحكم بالخصائص property inspector. غير معدل شفافية اللون بسهولة تستطيع تغيير مقدار شفافية أو تعتيم لون عنصر ما، من خلال تحديده، واختيار رقم ما من لوحة المفاتيح. حيث يُعبِّر الرقم ١ عن تعتيم بمقدار ١٠ بالمئة، بينما يعبر الرقم ٢ عن تعتيم بمقدار ٢٠ بالمئة وهكذا، وإذا أردْت الحصول على تعتيم تام بمقدار ١٠٠ بالمئة، فيكفيك الضغط على زرّ الصفر. وسع لوحة العمل بواسطة خطوط الطي خط الطّيّ هو مصطلح شائع في مجال تصميم الويب، وهو الخط الذي يستطيع المستخدِمون من خلاله رؤية محتوى الصفحة، دون الحاجة إلى زرّ التّمرير. عندما تفتح منصة XD، انقر على أيّ مكان في مساحة العمل، ثم انقر على القبضة السفلية التي تظهر أمامك واسحبها للأسفل، حيث ستتوسع بذلك مساحة العمل تاركةً وراءها خطًا منقّطًا يسمى خط الطّيّ. بإمكانك قراءة عدد البكسلات الموجودة من أعلى تصميمك حتى خط الطّيّ في قسم التمرير على الجانب الأيمن من الشاشة، مما سيساعدك على تخيُّل طول شاشة عرض التصميم عند تطبيقه. أعِد تسمية الطبقات بسهولة انقر نقرةً مزدوجة على اسم الطبقة وغيّره بسهولة، ثم اضغط على زرّ Tab من لوحة المفاتيح، وانتقل إلى الطبقة التالية بدون مغادرة وضع التعديل، أو اضغط على Shift + Tab للانتقال للأعلى، بحيث ستستطيع بذلك إعادة تسمية الطبقات بسرعة وسهولة. شارِك أعمالك وثبت التعليقات احصل على تقييم فوري لأعمالك من خلال مشاركتها، أو إرسالها لأعضاء فريقك؛ أو أرفقها إلى موقعَي Behance، أو Dribble، وذلك باستخدام شيفرة التّضمين، مما سيساعد المستخدِمين الآخرين على إضافة التعليقات على أجزاء معينة من التصميم. استخدم التصاميم الجاهزة لواجهة المستخدم تستطيع الوصول إلى النماذج الجاهزة التابعة لويندوز، أو جوجل، أو iOS؛ من خلال قائمة ملف، ثم خَيار فتح UI kits، واختيار النموذج المرغوب. صمم باستخدام تطبيق أدوبي comp من السهل إنشاء الرسوم التخطيطية، والنماذج المبدئية باستخدام تطبيق أدوبي comp على الهواتف الذكية، إذ يُسهّل استخدام الأصابع أو الأقلام الذكية، عملية التصميم، وإنتاج تصاميم، وأعمال مميزة. لا يدعم تطبيق comp التصدير إلى إكس دي حتى الآن، ولكنّك تستطيع التصدير إلى الإليستريتور، ثم النسخ واللصق في واجهة إكس دي للحصول على أشكال شعاعية Vectors قابلة للتعديل. استمتع بهذه الميزات، واحرص على ربط أعمالك مع برمجيات أدوبي المختلفة للحصول على تجربة غنية في التصميم الإبداعي. ترجمة وبتصرّف للمقال أدوبي إكس دي 101 – Guide For Newbie Designers للكاتب Harsh Raval
  4. مجموعة نصائح لتحسين ظهور موقعك في محركات البحث لقد أصبحت مواقع الويب اليوم ضرورةً مُلحّةً في تحديد مكانة العلامة التجارية وهويتها، كما باتت المنافسة بين مواقع الويب هائلة، إذ تُطلَق آلاف مواقع الويب على الشبكة حول العالم كل يوم. لذا فإن أردْت تصدر موقعك لنتائج البحث، فعليك تحسين ظهور الموقع على محركات البحث بهدف تحسين تجربة المستخدِم الذي يزور موقعك أيضًا. تُعرَّف تجربة المستخدِم بأنها رحلة زائر الموقع لتصفح موقعك، حيث تكون هذه التجربة مسؤولةً عن اختيار المستخدِم التفاعل مع خدمات موقعك، أو الاكتفاء بتصفّحه. تعمل عملية تحسين تجربة المستخدِم وتحسين ظهور موقعك في نتائج محركات البحث على توفير التجربة الأفضل لزوار الموقع، وتحويل هذه الزيارة إلى تفاعل بين الموقع والمستخدِم، وفيما يلي بعض النصائح التي من شأنها تحسين ظهور موقعك في نتائج محركات البحث الشهيرة. تحسين توافق موقعك مع شاشات الهواتف الذكية يتصفح معظم مستخدمو الإنترنت اليوم مواقع الويب بواسطة هواتفهم الذكية بمعدل أعلى بكثير من تصفحهم باستخدام الحاسوب، ولذلك يحتاج موقعك إلى التكيف مع شاشات هذه الأجهزة لتوفير تجربة مريحة للمستخدِمين، بغض النظر عن الجهاز الذي يستخدمونه للتصفح، فقد لا يتشابه تصفح المستخدِمين لمواقع الويب من خلال هواتفهم الذكية، مع تصفحهم لها باستخدام الحاسوب، إذ ينظر المستخدِم إلى محتوى الموقع بنظرة سريعة أثناء التصفح، لذلك احرص على أن يكون موقعك متوافقًا مع شاشات الهواتف الذكية، وفوري التحميل. استخدام أزرار الدعوة إلى القيام بإجراء معين لكي تُبقي الزوّار في موقعك لفترة أطول، فمن الضروري أن تستخدم أزرار الدعوة إلى تنفيذ إجراء معين، حيث تزود هذه الأزرار المستخدِم بفرصة التفاعل ضمن الموقع، مما سيبقي المستخدِم في حالة انتباه وتفاعل لفترة أطول، إذ تعمل هذه الأزرار مثل إشارات تساعد المستخدِم على الانتقال من خطوة إلى أخرى، فعندما تُضمّن صفحات موقعك أزرارًا من نوع "تعلم المزيد"، أو"تسجيل الدخول" مثلًا، فإنك بهذا ستساعد المستخدِم على التفاعل مع موقعك وإبداء اهتمامه بالمحتوى، مما سيحسن ظهور موقعك في نتائج محركات البحث وسيقلل معدلات الارتداد. تضمين تصاميم تناسب محركات البحث لكي تحصل على تجربة مستخدِم مثالية لموقعك، وظهور فعّال ومتقدم في محركات البحث، فعليك التركيز على التصميم، ولتحقيق ذلك فلابد من أن يكون موقعك سهل الفهرسة من قِبل محركات البحث، إذ لو فشلت محركات البحث في فهرسة محتوى موقعك، فلن يظهر في نتائج محركات البحث المتعلقة به عندما يبحث المستخدِمون عن الخدمات والمنتجات التي يقدِّمها موقعك. تتمثل إحدى الطرق التي تساعد محركات البحث على فهرسة موقعك في إضافة علامات العنوان لموقعك، مما سيساعد برمجيات زواحف الويب على الوصول إلى صفحات موقعك وفهرسته، كما تُعَدّ إضافة إمكانية التنقل بين صفحات موقعك أمرًا مهمًا جدًا، حيث تمنح الزوار القدرة على استكشاف موقعك، مما سيُسهّل على محركات البحث عملية الفهرسة. ركز على جودة المحتوى الهدف الأساسي لموقعك هو المحتوى؛ إذ يساعد محتوى الموقع على إيصال خدمات علامتك التجارية إلى المستخدِمين، وبإمكانك استخدام أيّ نوع من المحتوى لإيصال أفكارك للزوار، سواءً كان إنشاء مدونة، أو مقاطع فيديو، أو كتبًا إلكترونية، أو حتى رسوم توضيحية؛ فعندما يبحث المستخدِمون مثلًا عن معلومات حول موضوع معين يثير اهتمامهم، وتظهر مدونتك في الصفحة الأولى من نتائج بحث المحرك، فسيتفاعل الزوّار مع هذا المحتوى، وسيصبح موقعك محطّ اهتمام وذو مصداقية بالنسبة للزوار، وسيصبّ ذلك كله في تحسين تجربة المستخدِم ونتائج محركات البحث أيضًا. استخدام العبارات البديلة في حال عدم ظهور الصور عندما يكون اتصال المستخدِم بالإنترنت ضعيفًا نوعًا ما أثناء تصفح موقع ويب معين، فسيكون تحميل محتوى الموقع بطيئًا، وستحتاج الصور وقتًا أطول لتظهر على الشاشة، لذا ستُعطى أولوية العرض للمحتوى المكتوب، بحيث يحصل الزائر على بعض المعلومات ريثما يكتمل تحميل محتوى صفحة الويب. في هذه الحالة، ستظهر مساحة بيضاء خالية مكان الصور، مما قد يربك المستخدِم أو يتسبّب بنفاذ صبره على الانتظار حتى اكتمال العرض، وهنا ستساعد العبارات البديلة على تزويد المستخدِم بوصف للصورة ريثما تظهر أمامه من جهة، وستساعد محركات البحث على معرفة علاقة هذه الصور بموقعك من جهة أخرى. تحسين سرعة عرض صفحة الموقع حتى وإن تفوّق ترتيب موقعك في نتائج محركات البحث، فقد بقي أمامك تحدٍّ أخير قبل عرض محتوى موقعك كاملًا أمام المستخدِم. تُعَدّ سرعة تحميل صفحة الويب عاملًا أساسيًّا يجب أخذه بالحسبان، فقد يواجه موقعك مستخدمًا لا يطيق انتظار استجابة المخدّم لتحميل الصفحة، فيعود مباشرةً إلى صفحة نتائج محرك البحث ليزور موقعًا آخر ويحصل على ما يريد. لذلك يجب أن تركّز على سرعة تحميل وعرض موقعك، خصوصًا لشاشات الهواتف المحمولة، إذ أنّ لها تأثيرًا بالغًا في رفع ترتيب موقعك في نتائج محركات البحث. عرض رموز الأمان يلعب عامل الأمان في الموقع الإلكتروني دورًا أساسيًّا في تحسين تجربة المستخدِ، حيث تتجلّى أهمية عامل الأمان بطريقة أوضح في مواقع التجارة الإلكترونية، أين يحتاج المستخدِمون لإدخال تفاصيل بطاقاتهم المصرفية ومعلوماتهم الشخصية، فإذا زودْت موقعك بالحماية المطلوبة، فستضمن ثقة المستخدِمين، كما ستساعد محركات البحث على تعريف موقعك بوصفه موقعًا إلكترونيًا محميًا وآمنًا. إذ لما يرى المستخدِمون رموز الأمان معروضةً على موقعك، فسيشعرهم ذلك بالأمان لتصفح موقعك والتفاعل معه بثقة. بسّط بنيان موقعك قدر الإمكان يُقصد ببنيان الموقع، طريقة ترتيب صفحاته، إذ سيُسهّل البنيان البسيط والمريح إيجاد وفهرسة موقعك من قِبل محرّكات البحث، ومن الضروري ألا تبعد صفحات الموقع عن الصفحة الرئيسية أكثر من أربع نقرات مما سيساعد المستخدِمين على تصفح موقعك بأريحية ودون ارتباك. الأولوية لمحتوى الموقع يجب أن يدرك مصمم الويب مدى أهمية وضوح محتوى الموقع بذاته، وألّا تؤثر المبالغة في استخدام الجماليات على جودة عرض المحتوى، إذ يحتاج الزائر إلى فهم محتوى صفحات موقعك للتفاعل معه والتنقل بين صفحاته، ومن المهم الانتباه إلى أنّ الصفحات المختلفة تحتاج إلى كميات مختلفة من المحتوى ضمنها. فعلى سبيل المثال، يجب أن يكون محتوى صفحة مبيعات ما مُختصرًا، ومُكثّفًا، ومعروضًا بطريقة مثيرة للاهتمام. كتابة الكلمات المفتاحية المناسبة وأوصاف تعريفية أفضل Meta تساعد الكلمات المفتاحية والأوصاف التعريفية على فهم موقعك والهدف من محتواه من قِبل محركات البحث، كما تساعد الكلمات المفتاحية الناس على فهم محتوى الموقع وخدماته، إذ عندما يقتنع المستخدِم بأن موقعك يضم الإجابة المثالية التي يبحث عنها، فسينقر على رابط موقعك لزيارته بغض النظر عن ظهوره في المرتبة الثالثة أو الرابعة في صفحة نتائج محرك البحث، لذلك فمن المفيد التركيز على تضمين كلمة ذات صلة بمحتوى موقعك في الوصف التعريفي. تحسين العناصر المرئية بأنواعها تلعب الأنواع المختلفة من العناصر المرئية دورًا مهمًّا في تحسين ترتيب مواقع الويب، ويتضمن ذلك وجود صور ومقاطع فيديو عالية الجودة على صفحات موقعك، كما أنّ من الضروري تحقيق التوازن بين جودة ملفات العناصر المرئية وأحجامها، لأنّ الملفات ذات الأحجام الكبيرة تؤثر سلبًا على المساحة التخزينية للموقع وسرعة تحميل محتواه. إذ يُفضَّل وجود صفحة تحمل اسم "سيكون الموقع متاحًا قريبًا" مثلًا، بدلاً من انتظار إضافة كافة صفحات الموقع، كما يجب أن تعكس ملفات الوسائط المختلفة الهدف من موقعك، وأن تنسجم مع بعضها لتحقيق ذلك. أضِف أيقونات منصات التواصل الاجتماعي إلى موقعك تُعَدّ أزرار المشاركة مع منصات التواصل الاجتماعي أساسيةً في صفحات الويب. فإذا سهّلْت على مستخدمي موقعك مشاركة المحتوى عبر منصات التواصل الاجتماعي، فسيشجعهم ذلك على تصفح موقعك والتفاعل مع محتواه. ومن المهم أن تنسجم طريقة عرض هذه الأزرار مع تصميم صفحات الموقع. التخفيف من العبء البرمجي لاستخدام لغة الجافاسكريبت تؤثر المبالغة في استخدام شيفرات الجافاسكريبت في برمجة كافة صفحات موقعك على تصنيفه في نتائج محركات البحث، فعندما تُطلق موقعك على الشبكة، فستذهب برمجيات زواحف الويب إلى محتوى موقعك وتمسحه بعمق لفهرسته في قائمة نتائج محركات البحث التي تظهر في صفحة الويب، لذا فإن استخدمت شيفرات الجافاسكريبت بإفراط، فقد تفشل عمليات الفهرسة تلك، لذلك احرص على إنشاء صفحات بسيطة ومنظمة برمجيًّا قدر الإمكان. ستساهم هذه النصائح في تحسين تجربة زوار موقعك مما سيحّن ظهوره في نتائج محركات البحث. ترجمة وبتصرّف للمقال 13 UX Tips That Will Improve Your Website’s SEO لصاحبه Harsh Raval.