التصميم لمواقع الويب
(١) مواقع الويب
تخيَّل حياتك دون جهاز الكمبيوتر أو الأيبود أو مشغل الإم بي ثري أو كاميرا الفيديو أو نظام جي بي إس الخاص بتحديد المواقع أو الهاتف المحمول. لقد غيرت التكنولوجيا حياة الناس وطرحت سؤالًا ضروريًّا على المعلنين ألا وهو: ما الذي يرغب الناس في رؤيته من العلامات التجارية والجماعات الموجودة على الإنترنت؟
يريد الناس مجموعة متنوعة من الأمور «المفيدة» — أدوات، خدمات، معلومات — ويرغبون في تجارب تفاعلية ثرية وفي ذلك الترفيه.
إن الإنترنت وسيط إعلامي عالمي يعمل على مدار الساعة وسوف يصبح أكثر أهمية في بدء المحادثات وبناء المجتمعات والتأثير على الثقافة الشعبية ونشر التوعية والترابط بين الناس في أنحاء العالم كافة. وأي علامة تجارية أو مجموعة يمكن أن تتيح فرصًا للناس للتواصل معها وأن تخلق شيئًا يجعلهم يرغبون في العودة إلى موقعها الإلكتروني مرارًا وتكرارًا.
يمكن لعلامة تجارية أو مجموعة ما أن تنشئ متجرًا إلكترونيًّا أو مركزًا للمعلومات عبر الإنترنت. ويمكن أن تؤسس موقعًا يقدم المعلومات أو الترفيه لفترة قصيرة. أو يمكن أن تؤسس شيئًا يستمر وينمو. لقد قدمت لنا أوجه التقدم التكنولوجي الكثير من الخيارات؛ فمن الممكن أن نفعل العديد من الأمور في وقت فراغنا. فلماذا يتعيَّن على الناس قضاء وقتهم مع علامة تجارية أو مجموعة؟
عادةً ما تكون الحملة الإعلانية على الإنترنت قصيرة الأجل؛ فهي إما تقدم رسالة أو ترفيهًا أو معلومة. ويمكن استخدام الحملات الإعلانية عبر الإنترنت لتوجيه الزوَّار إلى إحدى المنصات، وهي عبارة عن وجهة إعلامية عبر الإنترنت يجعلها الناس جزءًا من حياتهم ويعودون إليها مرارًا وتكرارًا.
رغم كل ذلك، فأهم ما على محترف الإعلانات المبدع تعلُّمه هو توليد الأفكار؛ لأن موقع الإنترنت الفعَّال أو المنصة الناجحة يعتمدان على الفكرة الرائعة. بالإضافة إلى ذلك، فإن توليد الأفكار والتصميم من أجل وسائل الإعلام التفاعلية يُعد عملية تعاونية تضم فريق من الخبراء يطوِّرون وينفذون تطبيقات لتصميم الويب.
والتصميم للوسائل الإعلامية الرقمية عملية تكرارية تتطلب إعداد نموذج أولي وتجربته وصيانته بالإضافة إلى إعداد حملات لتوجيه الناس إلى المواقع فضلًا عن التحديث وإعادة التصميم عدة مرَّات.
و«موقع الويب» عبارة عن مجموعة «صفحات» (أو ملفات) مرتبطة ومتاحة عبر الشبكة العنكبوتية العالمية، ومؤلفة ومملوكة من قِبَل الشركات والمنظمات والأفراد. وبسبب الابتكار المستمر والسريع في هذه التقنية فإن نموذج الصفحة الذي اعتدنا عليه جميعًا سوف يتغير على الأرجح قريبًا؛ فالويب ما زال في أولى مراحل تطوره إلى حدٍّ كبير. ومع تزايد شيوع المنتجات الأحدث التي تستخدم شاشات اللمس أو واجهات اللمس قد تحل نماذج جديدة محل نموذج الصفحة. رغم ذلك فسوف تستمر مبادئ الهرمية البصرية والتوازن والتناسب والإيقاع والوحدة.
يتضمن تصميم الويب الاستراتيجية والتعاون والإبداع والتخطيط والتصميم والتطوير والاختبار والإنتاج والتنفيذ.
(٢) أساسيات مواقع الويب
عندما يسيطر الشكل يَضعُف المعنى. وعندما يسيطر المحتوى تقل الجاذبية. والعبقرية هي امتزاج كلا العنصرين.
والتصميم البصري لا يُعنَى فحسب بالتأثير البصري والجماليات — بل يجب أن يكون تزاوجًا بين الشكل والوظيفة يضمن تجربة مستخدم سهلة وقيِّمة. وترتب الهرمية البصرية الصور والنص على حسب الأهمية — التي يجب أن تكون نتيجة طبيعية للمحتوى — فيسلط الضوء على المحتوى ويرتب من الأكثر أهمية إلى الأقل أهمية.
في المواقع التقليدية تُستخدَم شبكة في الغالب كبنية ترتيب أساسية لموقع الويب؛ فهي إطار يُستخدم لخلق مخطط موحد من صفحة لأخرى مع السماح ببعض التنوع. تقسِّم الشبكة الصفحة إلى أعمدة ذات عرض محددٍ ومسافات وهوامش محددة لتحديد مواقع العناصر الأساسية في الصفحة ومحاذاة النص والصور. وغالبًا توجد أكثر من شبكة لكلِّ تصميم على الإنترنت كي تسمح بأنواع مختلفة من المحتوى والتطبيقات.
وتستخدِم شبكات مواقع الويب مخططًا رئيسيًّا لتوضيح التركيب وأماكن وضع كل عنصر — النص والعناوين والرسوميات — من الشاشة للشاشة التالية. وبالحفاظ على شبكة تصميم بصري ثابتة سيتمكن الزائر من تحديد العناوين والمعلومات ورسوميات التنقل بسهولة؛ ومِن ثَمَّ يصبح التنقل في الموقع سلسًا (تَطلق برامج مخططات البرمجيات على المخطط التجاري اسم النموذج. أما غير المصممين فيستخدمون النماذج التجارية بدلًا من تصميم شبكات خاصة بهم).
يُقصد بالوحدة مستوى الاتساق والتماثل في جميع أنحاء الموقع؛ فمن الضروري خلق تماثل بصري بين الصفحات؛ أي وجود وحدة في العمل كله وإيقاع من الصفحة للأخرى وتدفق من صفحة لأخرى. ويُعَد توحيد أماكن العناصر أمام الزائرين على القدر نفسه من الأهمية؛ فعلى سبيل المثال، يجب أن يكون رابط الصفحة الرئيسية متناسقًا بصريًّا (أي يتبع الشكل نفسه ويوجد في المكان نفسه في كلِّ صفحة على الشاشة) في الموقع كله. علاوة على ذلك، يجب أن تحتوي كل شاشة على عنوان في المكان نفسه كي يعرف الزائر بالضبط أين ينظر ليُحدد «موقعه» داخل الموقع. يجب ألَّا يتساءل الزائر مطلقًا: «أين أنا؟» دون أن يعرف أين ينظر ليعرف الجواب.
شكل ١٣-١: موقع إنترنت: لاندز إند، باكلاند.
الوكالة الإعلانية: بيج سبيس شيب، بروكلين.
العميل: لاندز إند.
«حقائب الظَّهر من المنتجات الأساسية التي يحتاجها الطلاب مع عودتهم إلى المدرسة والتي تقدمها لاندز إند. وقد لجأت هذه الشركة إلى وكالة بيج سبيس شيب من أجل زيادة تفاعل الجمهور مع خط إنتاج الحقائب، على الإنترنت وفي المتاجر.
لحقائب ظهر لاندز إند أحجام وأشكال وألوان عديدة. ويمكن تعديلها حسب الرغبة الشخصية. واعتمادًا على هذه الفكرة، ابتكرت وكالة بيج سبيس شيب مصنع حقائب خياليًّا يُدعى باكلاند. وهو عبارة عن أرض عجائب تفاعلية تمنح الأطفال فرصة مليئة بالمغامرات لتصميم حقيبة الظَّهر في شكلها النهائي اعتمادًا على خيالهم.
ففي مصنع باكلاند يختار الأطفال من طرز وألوان عديدة عند تصنيع حقائب الظهر المصممة وفقًا لأذواقهم، ويُضيفون كل أنواع «فنون الحقائب»، وهي أمور كثيرة تتراوح ما بين المحرك الصاروخي وخُطاف القرصان إلى ذيل الفهد وأجنحة الفراشة. لقد ابتكرت وكالة بيج سبيس شيب أعمالًا فنية مبتكرة تمامًا لهذا المشروع.
وأثناء تصنيع الحقيبة المثالية يُمكن للطلاب تغيير الطراز من (طراز «المحيط» مثلًا إلى طراز «مكتب الجاسوسية») واختيار لون جديد، وإضافة المزيد من الفنون، وإطلاق اسم على ابتكارهم. وكان العرض التقديمي التفاعلي والنسخة البسيطة والأزرار كبيرة الحجم ترشد الأطفال الصغار طوال التجربة. وبمجرد الانتهاء من تصميم حقيبة الظهر على نحوٍ مثالي، يمكنهم طباعته وإرساله بالبريد الإلكتروني إلى أصدقائهم، أو رفعه على مواقع التواصل الاجتماعي أو مشاركته على صحفة لاندز إند على الفيس بوك.
وتأكيدًا على هدايا المتاجر صنعت بيج سبيس شيب رابطًا بين الحقائب المتخيلة والمنتجات الفعلية كان على بُعد نقرة واحدة. لقد جذبوا العملاء إلى علامة لاندز إند صانعين رحلة مبهجة في هذه الأثناء.»
ومسألة الوحدة في تصميم موقع الويب تشبه مسألة تحقيق الوحدة في الأغنية؛ فكل منهما مُكوَّن من «قطع» أو أقسام واضحة. وتفترض هذه الاستراتيجية تغيُّر جانب من جوانب القطعة مع ثبات الجانب الآخر.
تقدم بعض مواقع الويب تجارب متنوعة؛ فعلى سبيل المثال تقدم مواقع قنوات البث التليفزيوني مشغلات حلقات كاملة. وإذا لم يختر المشاهد تجربة ملء الشاشة فيجب أن يسع تصميم موقع الويب تجربة الحلقة مع الحفاظ في الوقت نفسه على محتوى موقع الويب بحيث يظل المشاهد منغمسًا في عالم العلامة التجارية.
-
تكامل تصميم موقع الويب مع هوية العلامة التجارية: الألوان المستخدمة والعناصر الرسومية والجو العام وطريقة التصور المرئي، والصور (انظر شكل ١٣-٢).
-
جذب الزائر في كلِّ أنحاء الموقع.
-
اختبار الموقع في مراحل مختلفة.
-
الحرص على الترتيب الهرمي المنطقي للمعلومات.
-
تقديم تجربة ثرية وخدمة أو منصة برعاية العلامة التجارية.
-
اتباع تعليمات معايير التصميم السهل التي أقرَّها قانون المُعاقين الأمريكيين (www.ada.gov)، عند تصميم مواقع الويب.
-
من السهل العثور على المحتوى أو قراءته أو طباعته أو تنزيله.
-
معظم المحتوى يلفت الانتباه الفوري للزائر، إلَّا أنه من المقبول أيضًا السماح بإمكانية «البحث» على بعض المحتوى.
-
سهولة التنقل. اجعل الموقع سهل الاستخدام!
-
المحتوى والشكل مترابطان؛ فالشكل يُعزز المحتوى والمحتوى يقدم الإرشادات اللازمة لتصميم الشكل.
-
تقديم شيء لا تستطيع تقديمه وسائل الإعلام المعتمدة على الطباعة أو البث التليفزيوني أو الهاتف المحمول.
-
تقديم تجربة إعلامية ثرية.
-
احترام وقت المستخدم؛ إتاحة التنزيل السريع للمحتوى (أقل من ١٥ ثانية) والبثُّ السريع.
-
جعل التجربة خالية من الإحباط.
-
تقديم تجربة تفاعلية تجعل الناس يعودون للموقع، وتجذبهم إليه، تجربة تبدأ حوارًا وعلاقة طويلة الأجل (انظر دراسة الحالة القادمة).
شكل ١٣-٢: موقع إنترنت، رسائل بريد إلكتروني عديدة، تصميم غلاف، قرطاسية: أوليف.
الاستوديو: شركة مودرن دوج ديزاين، سياتل.
المدير الإبداعي والمخرج الفني: روبن راي.
كاتبا الإعلان: روبن راي وجينا كيروجا.
تصميم: روبن راي وروبرت زويبل، وشوجو أوتا، وميج بارادايس.
الرسام: فيتوريو كوستاريلا.
© شركة مودرن دوج ديزاين ٢٠٠٩.
شكل ١٣-٣: منصة رقمية: نوكيا إيربانيستا دايريز.
الوكالة الإعلانية: آر/جي إيه.
المدير الإبداعي التنفيذي: جيمس تيمبل.
مساعد المدير الإبداعي: ناتالي هوني.
المخرج الفني: أتيلا أرمسترونج.
مصمم بصري: أنيو فرانكو.
مصمم تفاعلي: كاثرين هوفمان.
كاتب الإعلان: نيل ستار.
المدير الفني: دارين ريتشاردسون.
مطور فلاش أول: نيكولاس لا باليك.
مطورو الفلاش: توماس فوروبيوف وستيوارت ليز.
ضمان الجودة: نيل دوجان.
مدير علاقات المجموعة: أنتوني ويكام.
منتج أول: ديلان كونرتون.
العميل: نوكيا.
-
مدير التسويق الإلكتروني: أرتو يونسو.
-
مدير أول التسويق الإلكتروني: يوسو ميليرين.
-
مدير التسويق الإلكتروني: نينا فينالاينان.
««إيربانيستا دايريز» منصة رقمية تستخدم موقع إنترنت وتطبيق هواتف المحمولة بالإضافة إلى عنصر واجهة مستخدم شخصي يسمح للأفراد بالتقاط صور من حياتهم في الوقت الحقيقي ومشاركتها من خلال هاتف نوكيا إن ٨٢. وهاتف نوكيا إن ٨٢ القوي مزود بتكنولوجيا تحديد المواقع وكاميرا بدقة خمسة ميجا بيكسل تسمح للمستخدمين بوسم كل صورة بموقع المحدد، ومشاركة تجاربهم في الوقت نفسه مع أي شخص عن طريق عناصر واجهة المستخدم المنشورة على المدونات أو مواقع التواصل الاجتماعي مثل فيس بوك.
قدمت منصة «إيربانيستا دايريز» في حملة مكثفة مكونة من ثلاث مراحل جذبت المُدوِّنين والصحفيين والأشخاص العاديين فالتقطوا صور مغامراتهم الحياتية. في المرحلة الأولى أُرسل أربعة من المدونين المؤثرين إلى أماكن متفرقة في العالم مزودين بهاتف نوكيا إن ٨٢ لتسجيل رحلاتهم ومشاركتها مع الضيوف على موقع «إيربانيستا دايريز». وفي المرحلة الثانية كونت نوكيا شراكات مع عدة مواقع إعلامية بارزة مثل «وولبيبر»، و«لونلي بلانيت»، و«ناشونال جيوجرافيك» و«سي إن إن» لتوثيق أحداث عالمية كبرى في وقت حدوثها من خلال الصحفيين والفنانين والعلماء. وكان بإمكان الناس متابعة تطور الأحداث على الموقع ومن خلال عناصر واجهة المستخدم. أما المرحلة الثالثة فأتاحت هذه التجربة لكل شخص معه هاتف نوكيا مزود بتقنية تحديد المواقع. وأصبح كل شخص يستطيع رفع صوره الشخصية أثناء رحلاته إلى الموقع الإلكتروني أو إلى عناصر واجهة المستخدم الشخصية كي يتعقبها كل الأصدقاء وأفراد الأسرة. إن منصة «إيربانيستا دايريز» مثال آخر يوضح كيف غيَّرت نوكيا من طريقة مشاركة الناس لقصص حياتهم.
لقد كانت الرؤية المستبصرة التي قادت منصة «إيربانيستا دايريز» هي أن مجرد إخبار الناس أن جهاز نوكيا إن ٨٢ الجديد مُزوَّد بتقنية تحديد المواقع الجغرافية وكاميرا بدقة خمسة ميجا بيكسل ليس كافيًا كي يشقَّ الهاتف طريقه في سوق مكتظة تسيطر عليها وسائل تواصل شديدة التنافسية. بل كان عرض إمكانيات هاتف نوكيا إن ٨٢ وفوائده أكثر إقناعًا.»
(٣) تطوير مواقع الويب
- (١)
«خطة المشروع»: التعرف والتحليل اللازم لوضع الأهداف وتوجيهها وتكوين فريق من الخبراء.
- (٢)
«الموجز الإبداعي»: تحديد الاستراتيجية الإبداعية من حيث علاقتها بالعلامة التجارية الأكبر أو الهوية البصرية والتمركز والجمهور المستهدف وكل الأهداف الأخرى المذكورة في الموجز الإبداعي.
- (٣)
«هيكل الموقع»: التخطيط وإعداد الخريطة وتجهيز المحتوى وهندسة المعلومات (المواصفات الوظيفية) ومواجهة المشكلات التقنية.
- (٤)
«مخطط المحتوى».
- (٥)
«التصميم التصوري»: توليد تصور للتصميم يعتمد على استراتيجية هوية العلامة التجارية والموجز الإبداعي.
- (٦)
«تطوير التصميم البصري»: تصميم شبكة/نموذج ومكان وضع العنصر، وتحديد طريقة التصور المرئي، وتحديد الألوان المستخدمة، وأنماط خطوط الويب، وطراز إشارات التنقل/الواجهة الرسومية (أزرار الروابط) ونوع الصور والإيضاحات وغيرها من العناصر الرسومية، وتحديد طريقة تكامل الوسائل الإعلامية، وتحديد الشاشات الرئيسية لتحديد مواقع هذه العناصر كما هو الحال مع لوحة القصة تقريبًا.
- (٧)
«المواصفات التقنية».
- (٨)
«النموذج الأولي».
- (٩)
«التكنولوجيا»: الحلول التقنية والنسخة الأولى والنسخة التجريبية الأولى والنسخة التجريبية الثانية.
- (١٠)
«التنفيذ»: الإطلاق والترويج والتحديث واختبار سهولة الاستخدام باستمرار.
(٤) المنصات/وسائل الإعلام المملوكة
على النقيض من الدعاية الخارجية أو الحملة الإعلانية التي تستمر لفترة زمنية في عدة وسائل إعلامية، نجد أن المنصة وسيلة إعلامية مملوكة متخصصة في الخدمة ومؤسسة بهدف الاستمرار، وتُقدم تواصلًا مستمرًّا. ومن الناحية النظرية فإن الناس ينجذبون إلى المنصة مرارًا وتكرارًا؛ فالمستخدمون يعاودون زيارة المنصة ويجعلونها جزءًا من حياتهم. وتوجد أمثلة ممتازة على المنصات الإعلامية المملوكة مثل منصة «هيد تو هيد» التي تمتلكها أحذية نايكي لكرة القدم، وهي أداة تتيح للمستخدمين مقارنة أنفسهم بأي لاعب في أي مستوًى في أي مرحلة من مراحل حياته الرياضية. وصنعت وكالة آر/جي إيه هذه المنصة لصالح نايكي.
دراسة حالة
حملة «اجعلني مختالًا» الرقمية
- الملخص: تحويل حملة «اجعلني مختالًا» التليفزيونية والمطبوعة لمزيل العرق «سواجر» التابع للعلامة التجارية أولد سبايس إلى تجربة على الإنترنت. استهدف التواصل الرجال ما بين ١٢ إلى ٣٤ عامًا مع التركيز الإبداعي على الرجال ما بين ١٨ إلى ٢٤ عامًا.
- الحل: ابتكرنا تطبيقًا على الإنترنت يسمح للمستخدمين بتعزيز مكانتهم على الإنترنت، أو يسمح لهم «بالتباهي» عن طريق تكوين مقالات ومدوَّنات ومواقع ويب مزيفة ومتملقة تتحدث عنهم تظهر للناس عندما يبحثون عن أسمائهم على الإنترنت. واستخدمت إعلانات الرايات ومقاطع فيديو الويب لجذب الناس إلى الموقع.
العميل: أولد سبايس.
الوكالة الإعلانية: وايدن + كينيدي، بورتلاند.
مديرا الإبداع المنفذان: مارك فيتسلوف وسوزان هوفمان.
مديرا الإبداع: جيسون باجلي ومارك فيتسلوف.
المدير الإبداعي التفاعلي: شون أوبرايان.
كاتبو الإعلان: كريج ألين ومارك فيتسلوف وجيسون باجلي.
المخرج الفني: إريك بولدوين.
كتاب المحتوى: تايلر بنسون وماثيو ماكفيرين وجون زاو وآنجي أوجبيرن.
المصمم التفاعلي: كريس لارسون ومارك شيبرد، مؤسسة ذا هابي كورب (بائع).
المنتج (التفاعلي): جيريمي ليند.
مبرمجو (الإعلانات): جوشوا بيريز ولوري براون.
إطلاق الإعلانات: جوني جيمس.
المصور الفوتوغرافي: كريس لارسون.
المحاسب التنفيذي: سكوت فيليبس.
التصميم والتطوير: مؤسسة ذا هابي كورب.
مدير الإبداع المنفذ: دوج يجار.
المخرج الفني: جيف باكستر.
المدير التقني: زاك بلانك.
كبير المبرمجين: إدريان لافوند.
المنتج: أليكس ستيرتفينت.
مخرج شركة الإنتاج: كريج ألين، وكالة وايدن + كينيدي.
المنتج المنفذ: بن جريلوفيتش ووايدن + كينيدي.
المنتج: لارا جالاجر، وايدن + كينيدي.
المحرر: ديفيد يانس، شركة جوينت إديتوريال.
ما بعد الإنتاج: شركة جوينت إديتوريال.
