سواء كان عليك تصميم موقع إلكتروني، أو صنع غلاف مجلة، أو تعزيز معرض أعمالك، فستحتاج أولًا وآخرًا إلى اختيار خط أجنبي للغة الإنجليزية لتستخدمه في مرحلة ما. كما يعلم الجميع، فإن أسلوب الطباعة هو عنصر أساسي جدًا في أي عمل إبداعي أو مطبوع ويجب عليك أن تُبدي المزيد من الاهتمام في هذه الناحية. أسلوب الطباعة بإمكانه أن يترك تأثيرًا كبيرًا في نفس القارئ ولديه القدرة على جذبه أو تنفيره.

عمومًا، فإن خطوط serif تعتبر الأنسب للأعمال المطبوعة، على سبيل المثال: فإن خط (sans-serif) يعد الأفضل في العناوين الرئيسية. جمعت لك في هذه المقالة قائمة من 20 من الخطوط الأجنبية الواضحة وضوحًا كبيرًا والتي يجب عليك تجربتها مرة واحدة على الأقل. العديد من هذه الخطوط الأجنبية مناسبة للملصقات الكبيرة، وأعمال التصميم، والتصميم الجرافيكي، وتصميم الويب، ومعارض الأعمال المعمارية، والمجلات وأيضًا الاستخدام التحريري مثل المجلات، والصحف والكتب.

باستعراضك لهذه القائمة، بإمكانك الوصول لفكرة معينة حول كيفية استخدام هذه الخطوط ومتى، وكيف بإمكانك الاختيار بينها حسب نوع العمل الذي تقوم به. تمتلك الخطوط القدرة على نقل رسالة أو فكرة معينة ويجب عليك أن تعرف أولًا أي نوع من المشاعر تريد أن تعبر عنها.

إن كنت طالب عمارة وتحتاج لتكوين معرض أعمال مقنع، يجب عليك أولًا أن تعرف القواعد العامة للتصميم، ومن ثم يمكنك إكمال الفكرة بخط يتناسب مع الجانب الجمالي لمعرض أعمالك. يصبح الخط الذي اخترته عاملًا أساسيًا في تصميمك ويساعد على إكمال الفكرة التي تحاول إيصالها ويعمل أيضًا كمساعد في صنع هوية العلامة التجارية الخاصة بك وتسليط الضوء عليها ليلاحظها الزائر.

ومن الجوانب المهمة أيضًا والتي يجب عليك أخذها بالحسبان هي اختيارك لخط يسهل قراءته لأنك لا تود تنفير الزوار فقط لأنهم لا يستطيعون قراءة نصك.

يعد الخط الواضح فعالًا وكما ذكرنا سابقًا، فهو يساعدك على إكمال العمل الإبداعي بغض النظر عن كونك فنانًا، مصمم ويب، مصمم جرافيكي أو معماريًا.

لذلك، نأمل بأن نكون قد أثرنا اهتمامك، نحن ندعوك بكل لطف لكي تتفقد القائمة التالية ونحن متأكدون من أنك ستجد على الأقل خطًا واحدًا مثيرًا لاهتمامك بإمكانك استخدامه في أعمالك القادمة.

Calendas Plus

يعد هذا الخط أنيقًا وتقليديًا. أُحدِث عام 2010، ويمكن استخدامه عند إنشاء نصوص صغيرة الحجم، وقد خُصِّص آنذاك خصيصًا لمشروع تقويم زمني.

Margot

يعتمد خط Margot بشكل أساسي على الأشكال الدائرية والمنحنية وكان قد صُمِّم هذا الخط حتى يستخدم في المطبوعات الكبيرة الحجم مثل الإعلانات واليافطات، مع ذلك فهو مناسب أيضًا للمطبوعات الصغيرة الحجم.

Bitter Ht

وهو أحد الخطوط المجانية، وهو من خطوط serif بتصميم مميز. صُمِّم هذا الخط خصيصًا للكتب الإلكترونية مما يعني أنه تم تحسينه ليناسب القراءة.

Fritz

ويعتبر خط Fritz من خطوط serif ويأتي شكل هذا الخط بلمسة آلية (من الرجل الآلي) ويأتي بأربع خيارات حول الثخن. بإمكاننا استخدام هذا الخط في أي عمل إبداعي كمعارض الأعمال، واللافتات، والملصقات والتصميم الجرافيكي.

Medio

وهو أيضًا من ضمن خطوط serif ويأتي هذا الخط بتصميم أنيق. يمكن استخدامه بشكل مناسب في التصميم الجرافيكي وتصميم الويب وفي العديد من الأعمال الإبداعية الأخرى.

Ainslie

صُمِّم هذا الخط عبر برنامج Insigne Design في عام 2013، ويمتلك هذا الخط 42 نوعًا. يعتمد الخط بشكل أساسي على الأشكال المتدفقة أو الجارية وكان قد حُسِّن لتتم قراءته بشكل أفضل. يمكن استخدامه في التصميم الجرافيكي، ومعارض الأعمال وتصميم الويب.

Korneuburg Slab

وهو أحد خطوط serif، واستوحي هذا الخط من خط archways Korneuburg. يمتلك مظهرًا صارمًا ويمكن استخدامه في العناوين الرئيسية، المجلات وبعض الأعمال الإبداعية الأخرى.

Aleo

يأتي هذا الخط بستة خيارات، وهو أحد الخطوط التي تم تحسينها لتناسب القراءة. وهو مناسب لأي عمل إبداعي مثل اللافتات، والعناوين الرئيسية، و المجلات ومعارض الأعمال.

Klinic Slab

أيضًا أحد خطوط serif ويأتي بأربع خيارات خاصة بالحجم وهو مناسب لتصميم الويب، والتصميم الجرافيكي، والملصقات والمجلات.

Tryst

يمتلك هذا الخط تصميمًا عصريًا وأنيقًا معتمدًا على الأشكال المنحنية وهو مناسب تمامًا لتصميم الويب، والملصقات، والمنشورات، والمجلات ومعارض أعمال التصميم.

Fenix STD

من خطوط serif الرقيقة ويحتوي هذا الخط على منحنيات حادة ذات حواف فبالتالي تظهر بمظهر صارم. تصميم هذا الخط عصري وأنيق ويمكن استخدامه لمعارض الأعمال، والعناوين الرئيسية وتصميم الويب.

Gaspar

وهو أيضًا من أحد خطوط serif المصممة خصيصًا للاستخدام التحريري بواسطة "كارلوس ألونسو كوستا". صُمِّم لكي لا يكون سميكًا أو كثيفًا جدًا ويمكن استخدامه في الجرائد والمجلات والملصقات.

Butler

هذا الخط أنيق ومتناسق ويمتلك أيضًا مظهرًا عصريًا وهو مناسب تمامًا للمجلات، ومجلات الموضة أو الصيحات، والملصقات والأعمال الإبداعية الأخرى. لديه إمكانية عالية على القراءة بسبب أشكاله الواضحة والناعمة.

Ethos

Ethos هو عائلة خطوط من نوع serif ويأتي بـ 36 تنسيقًا مختلفًا، بالتالي فهو مناسب جدًا للعديد من الاستخدامات المختلفة. ومن المزايا الرائعة الأخرى لـEthos أنه يأتي مائلًا وبشكل متشابك لتحسين تجربة القارئ.

Voga

وهو خط من نوع Didone ويأتي بتصميم أنيق وعصري. لديه أشكال ناعمة وعالية الجودة ويمكنه أن يبدو رائعًا على غلاف أي مجلة تختص بالصيحات.

Recia

هو أحد خطوط serif ويأتي بخمسة أثقال وخيارات ميل. تم صنع هذا الخط بواسطة "كارلوس ديل تورو" وصُمِّم خصيصًا لأعمال الطباعة والعرض.

Borgia Pro

هذا الخط هو أحد خطوط serif ويأتي بثمانية أشكال. هذا الخط مناسب للطباعة، والكتب، والمجلات والعديد من الأعمال الإبداعية الأخرى.

Lora

خط Lora هو أحد خطوط serif الحديثة وقد صُمِّم خصيصًا لشاشات العرض الرقمية. يعتمد التصميم على الأشكال الرفيعة والحادة، وهو أيضًا مناسب للكتب الإلكترونية والمجلات.

Calluna

يعتمد خط serif هذا بشكل أساسي على الأشكال الغير منتظمة ويفتقد الثبات، بالتالي فهو مناسب للمطبوعات بمظهر أكثر حيوية ومتعة.

Roboto Slab

وهو خط يعتمد على الأشكال الهندسية، بالتالي فهو يمتلك شكلًا تقنيًا ولكن المظهر الكلي يمتلك بعض الملاحظات الأنيقة. يمكن لهذا الخط أن يكون مناسبًا للعديد من الأعمال الإبداعية ويمكن أن يُستخدم في تصميم صفحات الويب، والتصميم الجرافيكي، والمجلات ومعارض الأعمال.

ترجمة -بتصرف- للمقال ‎20 Highly Legiable Fonts You Should Start Using لصاحبه Iggy

بمجرد حصولي على ساعة آبل Apple Watch، كنت قد رسلت للجميع رموزًا تعبيرية منذ اليوم الأول، لقد كنت مسحورًا بها.

شعرت أيضًا بالإلهام كمصمم. لم أصمم من قبل لشاشات صغيرة جدًا، وقد جذبتني فكرة صنع شيء في مساحة تملك مجموعة فريدة من الحدود والميزات.

قررت صنع تطبيق لساعة آبل كمشروع ثانوي، و كنقطة انتقال لتصميمي. نظرت لتطبيق الهاتف الذي استعمله لمراقبة استهلاك الكهرباء الخاص بي ودفع فاتورة البلدية الشهرية، بدى كأن بعض ميزات هذا التطبيق بإمكانها بالفعل أن تعمل بشكل جيد على الساعة.

مقارنة استهلاك الأشهر، وإضافة دفعات، ومهام أخرى تُعرض بسهولة على الهاتف أو الجهاز اللوحي قد تشكل تحديًا مثيرًا عند عرضها على الساعة. وها هي نظرة عن قرب على أول محاولاتي في صنع نموذج لشاشة صغيرة جدًا.

معالجة الوحش الصغير جدًا

إن قمت من قبل بتصميم تطبيق iOS أو Android، فقد لاحظتَ بأنه من المهم تذكر تركيبهم المعروف وأخذه بالحسبان. مثلًا: علامات التبويب في الأعلى بالنسبة لـAndroid وفي الأسفل بالنسبة لـiOS. هكذا يتوقع المستخدمون أن يجدوهم.

لا يمكنك إعادة صنع تطبيق هاتف محمول لساعة آبل. يجب أن يكون تطبيق الساعة امتدادًا لتطبيق الهاتف، كصديقٍ صغير الشاشة يساعد في تحسين تجربة الهاتف. مثل iOS و Android، ساعة آبل لديها نوعها الخاص من اللغة البصرية وطرقها التي يفترض على المستخدم أن يجربها.

أردتُ أن أكون صادقًا بتجربة ساعة آبل، لذلك قرأت بعناية عبر مستندات تصميم آبل. أردت أن أعرف أي نوع من الانتقالات والتحكمات كانت تتميز بها ساعة آبل، وكل النواحي التقنية التي أحتاج لمعرفتها.

خلال بحثي، اكتشفت بأن شركة آبل لديها انتقالات وأنماط تنسيق معينة ومصممة لمنصة الساعة. تمّ تصميم الأنماط مع التفكير المعمق في السيناريوهات التي سوف تستخدم فيها.

تفصيل سريع:

• اللمحات السريعة: مجموعات قابلة للتصفح من اللحظات الوقتية والسياقية من التطبيقات المفضلة للمستخدم.

• نظرات قصيرة: إشعارات تظهر بشكل سريع وتعطي المستخدم وقتًا كافيًا لرؤية عن ماذا يدور الإشعار وأي تطبيق قام بإرساله.

• نظرات طويلة: تزوّد تفاصيل أكثر عن إشعار قادم. تظهر النظرة الطويلة عندما يبقى معصم المستخدم مرفوعًا أو عندما ينقر المستخدم على النظرة القصيرة.

• الانتقال القائم على الصفحة في مواجهة الانتقال الهرمي: يعتمد الانتقال القائم على الصفحة على السحب أو التحريك بشكل أفقي خلال الصفحات. لديه نفس السلسلة الأفقية من النقاط التي تراها في أسفل الصفحة الرئيسية في هاتف iPhone. أما الانتقال الهرمي فهو طريقة للنزول للأسفل للوصول للمعلومات. نقرك على عنصر قائمة رئيسية يأخذك للصفحة التالية.

هنالك الكثير من الفروق البسيطة بين هذه التراكيب: اللمحة السريعة، والنظرة القصيرة، والنظرة الطويلة، والانتقال الهرمي والانتقال الأفقي. ومثل الهاتف المحمول، هنالك لحظات حيث تكون كل من هذه التراكيب مناسبةً، وإن استخدمتها في السياق المناسب فسوف يتعامل معها المستخدم بسهولة وبشكل بديهي.

خلال محاولة فهم كيفية الانتقال في الأجهزة القابلة للارتداء، نصيحتي لك كالتالي: لا تقم بإعادة اختراع العجلة! أي لا تقم بمحاولة التصميم من الصفر. هذه الأنواع من الانتقالات وشاشات البيانات تم تصميمها لسيناريوهات معينة. اكتشف كيف بإمكانها التعامل مع المعلومات التي تحتاج أن توصلها للمستخدم.

البحث

بمجرد وصولي للفهم الأساسي لكيفية عرض ساعة آبل للمعلومات، بدأت التجريب بكيف يمكن تصوير او تجسيد البيانات في السيناريوهات المعروفة. على سبيل المثال، أي نوع من المعلومات يتم تجاهلها، بالمقابل أي المعلومات يتم ملاحظتها؟

لقد أضفت العديد من تطبيقات الساعة لكي أستطيع العبث بها ورؤية كيف قام الآخرون بحل مزايا الانتقال من الهاتف المحمول للصيغة الجديدة على الساعة.

الجولة الأولى

اعتقدت بالبداية بأنني أريد أن أصنع انتقالًا هرميًّا، باعتباره الطريقة التي وُضع فيها تطبيق الهاتف المحمول. وبالرغم من أنه ساهم في عمل تطبيق متكامل، أدركت بأنه لم يكن يعمل بالطريقة التي أردتها، فكان ينقصه الحياة والبهجة. بدى وكأنه مثقل بالنص على عكس كونه قادرًا على عرض المعلومات بسرعة.

أدركت بأنه يجب علي أن أتبنى "رؤية آبل" في ساعة آبل: عرض رائع للبيانات بدون وجود الكثير من النص.

قمت بعرض النموذج الأولي على فريق التصميم، حيث علمت بأن هناك تغييرات يجب عملها. حصلت على الكثير من ردود الفعل: "لا يبدو كثيرًا كتطبيق ساعة. لم لا تجرب أمثلة تصميم مبنية على البيانات؟"

لقد كان فريق التصميم على حق. لذلك بدأت من جديد.

عليك أحيانًا أن تفكك كل شيء وتبدأ من الصفر

كنت قد اصبحت تائهًا في رسم تخطيط واحد لواحد (1:1 mapping) لمزايا من التطبيق للساعة الذكية، ولم أتّبع خطوات عمليتي الخاصة. يبدأ المشروع عادةً بقائمة من المزايا أو متطلبات العمل، ومنها أقوم تاليًا بتوليد تدفقات (flows) وإطارات شبكية (wireframes) ثم في النهاية أنتقل إلى التخطيط الشامل Comps (Comprehensive Layout) وإلى النمذجة (prototyping).

لم أقم في محاولتي الأولى بتكوين خط أساسي لـMVP (المنتج الأدنى القابل للنمو لجعل تطبيقٍ ما فعالًا ومفيدًا). كل ما أردته هو الفحص ورؤية ما يحدث. وما حدث كان باهتًا وغير واضحًا.

لم أكن لأتعامل مع عمل زبون هكذا، لذلك أخدت هذه المرة خطوةً للخلف وخططت منتج MVP. تعاونت مع مطورين لوضع مجموعة MVP حقيقية من الميزات للتصميم. ثم أخذت تلك القائمة، أمسكت بدفتر ملاحظاتي، وبدأت العمل.

لدي كلمة بشأن الرسم التخطيطي: أنصح به بشدة كأسلوب حل مشاكل أولي. وأنا لا أتحدث تلك الرسومات المثالية والرائعة الموجودة في دفاتر مولسكين (Moleskines) الجلدية والتي تراها عادةً في منشورات المصممين على مدوناتهم. أنا أتحدث عن الرسومات القبيحة، السريعة والتي يمكن التخلص منها. تلك الرسومات التي تخاف من أن يراها الناس أو من الممكن أن يقولوا: "ظننت بأنك قلت أنك ذهبت لكلية الفنون؟"

العمل بسرعة على سبورة بيضاء أو على دفترك يكوّن مجموعة من الميّزات. اجمع البيانات المتشابهة والأعمال سويًا. ارسم إطارات شبكية (wireframes) وتدفقات (flows) بسيطة. ليس من الضروري أن تكون مثالية.

وبمجرد أن تستثمر جهدك في جعلها مثالية، ستكون أقل قابلية لأن تستغني عنها أو تتخلص منها وتبدأ من جديد في حال وجدت خطأً ما أو أردت أن تُجري تغييرًا. في النهاية أقوم بإنتاج نسخ جميلة في ما بعد لعرضها على العملاء وعادةً بشكل رقمي.

المرور بكل تفصيل صغير يساعدني على رؤية طرق مختلفة لتجميع الميزات سويًا لتطبيق مبني على الصفحة (page-based). أقوم بتحليل وتجزئة الميّزات إلى مهام على شكل حبيبات، ثم أقوم بتجميعها سويًا في شاشات. لقد عملت بشكل حر وسريع لأنه بالأصل، هذه كانت مجرد لائحة بقالة (أداة تساعدني على ترتيب الميزات والمحاسبة عليها).

الإلهام

لقد كنت مفتونًا بالطريقة التي يستحضر فيها تطبيق الطقس في ساعة آبل واجهة ساعة بوساطة عرض بيانات الطقس بشكل دائري. حاولت أن أوضح بعض قصص المستخدمين سويًا في تنسيق دائري، كالأيام المتبقية حتى موعد دفع الفاتورة. إنّ استخدام التقويم وعرضه بأسلوب دائري أو تحويل شريط مقارنة لتصوير بياني دائري الشكل هو تحدٍ مثير.

اغسل بالصابون، اشطف، كرر

اعادة التفكير بالتطبيق واعتباره مبنيًا على الصفحة (page-based) مكنني من دمج العديد من القطع المختلفة من البيانات ونقاط الانطلاق المحتملة بشاشة واحدة. مكنني أيضًا من جعله مختصرًا وبصريًا بشدة. جعل التصفح (Paging) خلال تطبيق ساعة ذكية استخدام التطبيق أكثر سرعة وأكثر متعةً في الاستخدام وجعله أيضًا أكثر متعة بالتصميم.

الدروس المستفادة

أحد أكثر الدروس التي تعلمتها أهمية: انغمس ولا تتردد. ابنِ تصميمك من قصص المستخدمين. التدفق (flow)، الإطار الشبكي (wireframe)، النموذج (prototype). لن تتعلم إلا بهذه الطريقة.

إن كنت تقدر على الحصول على ردود فعل من مبدعين آخرين ومن مطوري iOS فقم بطلبها. سوف يساعدوك باكتشاف أشياء تجاهلتها مسبقًا وسوف تصنع نموذجًا أفضل من عملك.

بجانب ذلك، فإن امتلاكي لميّزات MVP واقعية ساعدني على تحديد ما احتجت ان أقضي وقتي فيه وما احتجت أن اركز عليه بشكل أفضل.

قم بتجربة الأشياء، أعد تقييم عملك ولا تكن خائفًا من ترك شيءٍ ما عندما ترى خللًا. إبقاؤك لنسخة من الشاشات السابقة بإمكانه أن يكون ذو فائدة عندما تحتاج لعرض عملك على الزبائن أو على فريقك.

حتى وإن لم يكن هنالك زبون يدفع لك مقابل تصميمك لتطبيق ساعة ذكية، فإن إكمال تصميم كهذا بوصفه تدريبًا سوف يعود عليك بالفائدة في المستقبل. بإمكانه أن يكون منشور على مدونة حول موضوع جديد ومثير يبيّن للزبائن المستقبليين بأنك على إطّلاع على كل ما هو جديد. بإمكانه أن يكون إضافةً رائعة لمعرض أعمالك الذي يُظهر كيف تتعامل مع المشروع.

بالإضافة لذلك، فإنه فرصة لنقل مهارات تفكيرك الحساس والذي أراه نادرًا عندما أراجع طلبات التوظيف.

بالرغم من أن هذا المشروع لم يكن لزبون، فقد استخدمت هذا التصميم لعرض على الزبون المستقبلي كيف تعاملت مع تجربة المستخدم وكيف قُمتُ بالتصميم باعتبار المنصة والمستخدم وقمت بالتفكير بكيف يمكن لتطبيق ساعة ذكية أن يندمج مع تطبيق هاتف محمول موجود بالفعل.

وفي حال كنت تتساءل: لقد حصلت على العمل.

ترجمة -بتصرف- للمقال ‎Prototyping for a tiny screen لصاحبه Marc Nischan

التعامل مع الألوان هي مهمة تستغرق الكثير من الوقت بالنسبة لمصممي الويب، بدايةً، يجب عليك أن تختار لوحة ألوان لتصميمك المفعم بالألوان، ومن يجب عليك تذكر جميع أنواع قيم الشيفرة وتحويلها من الرمز الست عشري إلى RGBa. ولتسريع الأمور وجعل حياة المصمم أكثر سهولة، هنالك بضع الأدوات المفيدة متوفرة على الإنترنت. تساعدك أدوات الألوان هذه في انتقاء، اختيار وتحويل لونك بسهولة لمشروع تصميم الويب المستقبلي.

أدوات لوحات ومخططات الألوان

هل أردت يومًا أن تستخدم لونًا معينًا ولكن لم تستطع معرفة اسمه أو الرمز الست عشري الخاص به؟ باستخدام مولدات الألوان هذه، بإمكانك إيجاد اللون الذي تبحث عنه بالضبط. هناك عدة خيارات سوف تساعدك في الحصول على اللون الذي ترغب به. يمكنك مثلًا أن تختار لونًا مشابهًا للون الذي تريده ومن ثم التنقل بين الظلال المتنوعة للون. بإمكانك أيضًا أن تعدّل درجة اللون، تشبع اللون وسطوعه حتى تصل للنتيجة المرضية لك. بعد كل هذا التغيير، سوف تحصل على الرمز الست عشري وعلى اسم اللون ومن ثم استخدامها في تصاميمك. هذا بسيط، أليس كذلك؟

إن كنت تبدأ عادةً بالتصميم من الصفر بدون أي خطوط ارشادية موسومة او فكرة مسبقة للون ما فقد يكون من الصعب وضع استراتيجية لون فعالة. هنالك مواقف عديدة تكون فيها مولدات لوحة الألوان مفيدة. رغم أنها غالبًا ما تُستخدم في مشاريع تصميم الويب، فإن مولدات لوحات الألوان بإمكانها أن تكون مفيدة في العديد من المشاريع المتعلقة بالتصميم.

إليك بعض أدوات الألوان التي ستساعدك في تكوين مجموعة ممتازة من الألوان المضمون عملها.

ColourLovers

هو موطن الملايين من لوحات الألوان المقدمة من قبل المستخدمين. تصفح المجموعة وانتقِ اللوحات التي تعجبك أو قم بإيجاد ألوان أخرى بدرجة مناسبة لعملك. هذا الموقع بإمكانه أن يفيدك في المستقبل.

Adobe Color CC

هذا أيضًا مولد لوحات ألوان رائع بإمكانك استخدامه لصنع لوحات ألوان جميلة. بإمكانك أيضًا الولوج وحفظ لوحاتك للاستخدامات المستقبلية. هذه أداة قوية تمكنك فقط من التصفح وتقييم المجموعات الموجودة مسبقًا، ولكنها تضم أيضًا أدوات لصٌنع لوحات الألوان الخاصة بك من الصفر.

Pictaulous

هل تبحث عن إحساس أو أسلوب أو سياق معين من لوحة الألوان الخاصة بك؟ إليك Pictaulous الذي هو أداة ذكية تمكنك من انتقاء الألوان من الصور التي ترفعها له.

Paletton

ألق نظرة عن قرب على مولد لوحات الألوان الرائع هذا والذي يمكّنك من صُنع تراكيب مختلفة من الألوان.

Color Hunt

مولد لوحات ألوان أنيق يشتمل على لوحات ألوان متعددة لتختار منها. بإمكانك أيضًا حفظ اللوحات المفضلة لديك واستخدامها لاحقًا عندما يتطلب الأمر.

Sip

هو تطبيق رائع يعمل بشكل ممتاز على هواتف iPhone وأجهزة Mac. يمكّنك هذا التطبيق من توليد مخططات الألوان بسرعة من الصور ومن ثم حفظ، تنظيم ومشاركة اللوحات التي تصنعها.

Palettr Color Paletter Generator

لديك هنا مصدر رائع يمكنك إيجاد لوحات ألوان متعددة فيه والتي يمكنك صنعها من الصور. بإمكانك أيضًا البحث عن أي مخطط أو كلمة وستحصل على نتائج مذهلة.

Color Combs

بإمكان هذه الأداة أن تساعدك بسهولة في صنع لوحات ألوان مدهشة من الصفر. ألق نظرة عليها، واكتشف مزاياها واعرف ما الذي تعرضه.

Colrd Color Palette Generator

هو موقع رائع يمكنك استخدامه لصُنع لوحات ألوان رائعة. تشتمل هذه الأداة على مُنشئ تدرجات رائع وأداة بحث أيضًا.

أدوات انتقاء الألوان

يمتلك برنامج Photoshop نافذته الافتراضية لانتقاء اللون والتي متأكد من أن جميع المصممين على دراية بها، ولكن فكّر بعدد المرات التي احتجت للتغيير والتنقل بين التطبيقات لتنسخ أو تلصق أو تحفظ قيم الألوان. من المفترض أن هنالك طريقة أفضل! في الواقع، هناك طرق أفضل.

Color Picker من WebpageFX

هذا مصدر ممتاز يمكنك استخدامه لصُنع لوحات ألوان. اضغط على العنوان وانظر أي تراكيب الألوان بإمكانك صُنعُها.

Colour Code

وهو مولدُ ممتاز أخر وهو يعتمد على مؤشر الفأرة. بإمكانك استخدامه لصُنع لوحات ألوان متعددة ومن ثم تصديرها بعدّة صيَغ للملفات مثل: SCSS، أو LESS، أو PNG.

Color Supply

لديك هنا لوحة مذهلة لدرجات الألوان والتي يمكنك استخدامها لصُنع أمزجة مختلفة من الألوان. هذه الموقع مناسب تمامًا لأي مصمم ويب أو أي عقل مبدع آخر.

Color.hailpixel.com

أداة بسيطة ولكن مفيدة بشكل كبير، يمكنك هذا الموقع من استعراض نافذة المتصفح بحثًا عن أي ألوان مناسبة، ومن ثم نسخ الرمز الست عشري الخاص باللون بنقرة واحدة.

CSS Color Names

إذا لم تكن تحب التعامل مع الأسماء العشوائية للألوان، ربما تكون هذه القائمة المكونة من 147 اسم لون وصفي أسهل بعض الشيء في تذكرها في صفحات النمط الخاصة بك. استعرض الألوان جميعها دُفعة واحدة أو بإمكانك رؤية قيمة عشوائية مع كل نقرة فأرة.

أدوات نظرية الألوان

هل تذكر تعلم كل شيء عن عجلة وتماثلات الألوان والألوان المكملة والثلاثية في درس الفنون؟ بإمكانك استعمال نظرية الألوان بمساعدة أدوات مخططات الألوان هذه لصنع لوحات تعمل بالفعل ومفيدة.

Sphere

أداة نظرية اللون المتخيّل والمسماة بالكرة (Sphere) تُعطيك واجهة بسيطة لتختار فروقات وصبغات على عجلة الألوان. انتقي أسلوبك المفضل من اللوحة لتحدد اختيارك اللوني ولتُناسق القيم.

Color Scheme Designer

صمم مخططك اللوني الخاص باستخدام هذه الأداة. قم بتدوير وتعديل عجلة الألوان لاختيار لونك الأساسي، ثم لاحظ القيم الناتجة تلقائيًا حسب نوع اللوحة الخاصة بك.

أدوات CSS لإنشاء الألوان

وفرت أحدث تحسينات CSS3 إمكانية صُنع ألوان متعددة مباشرةً بوساطة الشيفرة، ولكن صياغة CSS أكثر صعوبة للعمل معها من عجلة الألوان المرئية. هنا بالضبط تصبح أدوات التوليد مفيدة، لتقديم الشيفرة المطلوبة لصُنع تأثيراتك التي تريدها.

CSS Drive

هذا الموقع هو أيضًا مولد لوحات ألوان رائع وبإمكانك استخدامه لتوليد لوحات متعددة حسب صورك الخاصة.

مولد تدرجات CSS المطلق

يُعرَف عن تدرجات CSS3 بأنها صعبة الكتابة في الشيفرة. فلا تحتاج فقط لمعرفة القيم المختلفة للألوان، بل تحتاج أيضًا لإضافة بادئات رقمية مختلفة لتضمن عملها في أكثر من متصفح. يُسهِّل مولد تدرج CSS المطلق عملك من خلال إعطائك واجهة شبيهة بالفوتوشوب لكي تضبط تدرجك اللوني ومن ثم إعطاؤك الشيفرة لنسخها أو لصقها.

Hex 2 RGBA Color Calculator

ليس من الصعب تحويل قيمة الرمز الست عشري إلى RGBa ولكنه يعد مملًا عندما تعطى كل قيمة على حدى، مما يعني أن عليك النقر المتتالي 3 مرات لنسخ الأعداد. تقوم حاسبة Devoth’s Hex 2 RGBA بتسهيل العملية بقيمة CSS الكاملة حيث يتم نسخها بنقرة واحدة فقط.

اقتراحات القراء

حصلت على عدّة اقتراحات وتوصيات لأدوات جيدة للألوان من القرّاء منذ نشر المقالة لم أكن على دراية بها، لذا اطلعت عليها وأضفت أفضلها إلى هذه القائمة لتطلع عليها أنت أيضًا علّك تستفيد منها في مشروع القادم.

0to255

هنالك معيار محدد عند حالة المرور فوق الروابط الخاصة بك، وهو أن تختار درجة مُعتمة من نفس اللون. موقع 0to255.com يجعل هذه العملية أكثر سهولة، فقط اختر اللون وسوف ترى مجموعة متكاملة من الخيارات، مما يجعله مثاليًا للمرور فوق الرابط، التدرج اللوني والحدود.

Color Hexa

وهو شبيه بموسوعة خاصة بالألوان! أدخل اللون الذي ترغب به بأي قيمة تشاء وسوف يقوم بعرض وصف خاص به بالإضافة لبعض المعلومات المفيدة. ومن الفوائد الأخرى لمصممي المطبوعات هي التحويل المباشر من الرمز الست عشري أو RGB لأقرب درجة من CMYK.

Material Palette

من المولدات الممتازة التي تقوم بإنشاء لوحات الألوان التي بإمكانك تحميلها وحفظها لتصاميمك المستقبلية. امتلاكك لأداة اختيار اللون المناسبة بالإضافة لمولد لوحات الألوان بإمكانه أن يُنجح مشروعك أو يُفشله.

ترجمة -بتصرف- للمقال Color Picker Tools: HTML, CSS, RGB, Color Palettes and More لصاحبه Iggy

يمكن أن يكون تصميم نشرة إخبارية صعبًا. فأنت لا تحتاج فقط إلى معرفة وفهم كيف يتوقّع المستخدمون أو القرّاء وصول المحتوى إليهم، بل إنّك تعاني أيضًا من مشكلة جعل تصميم النشرة الإخبارية متوافقًا مع مختلف عملاء البريد الالكتروني.

إذا كنت تدرس تصاميم النشرات الإخبارية الحالية، فهذا سيساعدك لفهم آلية عمل تخطيطات هذه الأخيرة وشفرتها البرمجية. لهذا السبب، قمت بانتقاء 10 من أفضل تصاميم الرسائل الإخبارية المتجاوبة بالكامل والمواكبة لمعايير البرمجة الحديثة.

إذا كنت تخطّط لإطلاق نشرة إخبارية خاصة بك، ستكون هذه التصميمات مصدر إلهام كبير لك.

seatGeek

مع تصميم أحادي العمود وأسلوب خطٍّ كبير، أحبّ الطريقة التي يستخدم بها البريد SeatGeek الأيقونات والرسومات البسيطة لجذب انتباهك.

تأخد الخطوط الكبيرة أيضًا نسبة عالية من الصفحة مما يجعل قراءة النصوص سهلة للغاية. فقراتٍِ أقصر وخطٍّ أكبر وزرّ دعوة إجراء واضح في أسفل الصفحة، كلها عوامل من شأنها زيادة قابلية استخدام النشرة.

سيقضي هذا التصميم الغرض منه عند استعماله مع رسائل التحقّق عبر البريد.

PlayStation

إذا كنت تبحث عن تصميم أكثر تعقيدًا، فإنّ إصدار Battlefield 1 من شركة Sony يقدّم بعض الأفكار الرائعة.

يعتمد جلّ محتوى هذه الرسالة الإخبارية على الصور لتكرار موقع Sony PlayStation الرسمي. يعدّ هذا أمرًا رائعًا لبناء الوعي بالعلامة التجارية والثقة بها، ولكنّك تحسّ أنّ هذه النشرة فقيرة من ناحية المعلومات نظرًا لأنها لا تخبر القارئ بما يجب عمله أو ماذا تعني الرسالة.

ومع ذلك، فإنّها مصمّمة بشكلِِ سلس للغاية وتوضّح الدور الذي تلعبه الرسومات عالية الجودة في تصاميم البريد.

Social Print Studio

لا يلزم أن تكون رسائل التحقّق عبر البريد معقّدة. ولكن لا بأس بإضافة بعض التفاصيل حول الموقع أو القائمة التي قام المستخدم بالتسجيل بها للتّو.

يعدّ هذا البريد الإلكتروني بواسطة Social Print Studio رسالة تحقّق في المقام الأول، ولكنه يتضمن أيضًا نقاطًا حول الموقع وما يمكن للمستخدمين الجدد توقّعه من خلال استخدامه. ويتضمّن أيضََا زر دعوة إلى إجراء باسم "shop" CTA يؤدّي مباشرةً إلى الموقع حيث يمكن للقرّاء طلب مطبوعات لصور الانستغرام الخاصة بهم.

يعدّ هذا البريد مثالََا ممتازََا لإقناع المستخدمين بالعودة إلى الموقع مع زيادة عمليات التحقّق من الاشتراك.

##Archant

إليك نشرة إخبارية عبر الايميل حقيقية ومثيرة للاهتمام والتي تضمّ رسالة تحديث التفضيلات من Archant (ناشر عبر الإنترنت).

الهدف هو الاتصال بالمستخدمين الذين قد يكون لديهم إعدادات اشتراك صارمة جدًا (حظر جميع جهات الاتصال) أو متساهلة للغاية (تلقّي رسائل بريد إلكتروني كثيرة جدًا). فهذه طريقة رائعة للاتصال بالمشتركين الحاليين وجلبهم للتسجيل في المزيد من القوائم.

WistiaFest2017

عادة ما تكون النشرات الإخبارية لأحداث وفعاليات مثل هذه بسيطةََ للغاية. فالأهداف التي يصبون إليها قليلة: مشاركة المعلومات حول الحدث وتشجيع المشتركين لشراء تذكرتهم في وقت مبكِّر.

تحتوي هذه الرسالة الإخبارية على كلّ ما ذكرناه سابقا وبكثرة، مع وجود أزرار دعوة الإجراء (CTA) للتحقّق من المتحدّثين بالحدث والاشتراك للحصول على تذكرة. ويتّبع التخطيط أيضًا تصميمًا أحادي العمود والذي عادةََ ما يُعتبر مثاليََا بالنسبة لرسائل البريد الالكترونية .

لا تخرج قوائم الأحداث بانتظام، فمن الضروري تضمين الشعار بالقرب من أعلى الصفحة. وبهذه الطريقة، سيعرف المشتركون تمامًا ما هو فحوى الرسالة رغم أنّه من الممكن أن تمرّ سنة على آخر رسالة قد تلقّوها.

ندوة Sprout Social

النشرات الإخبارية الخاصّة ب Sprout Social مصمّمة بطريقة رائعة وشفرتها البرمجية غير اعتيادية. ألقِ نظرة على هذا التصميم البسيط للترويج لندوة عبر الإنترنت.

التصميم قصير جدًا ويستخدم الرسوم البيانية للفت الانتباه. كما يستخدم قوائم نقطية مع الأيقونات للمساعدة في الترويج للندوة حيث أن النقاط النقطية أسهل بكثير في القراءة من الفقرات.

بالإضافة إلى ذلك، فإنّ نداء إجراء النشاط (CTA) الأخضر الكبير متواجدُُ فوق الطيّة بشكل جيد (أي أنه يظهر في الواجهة فور تحميل الصفحة دون الحاجة إلى تمرير الفأرة إلى الأسفل) ويدفع جدول أعمال ندوتهم على الويب إلى الأسفل. يمكنك استبدال العديد من هذه العناصر بعناصرك الخاصة والحصول على نتائج رائعة.

ميزة جدولة منشورات الانستغرام الخاصة ب Sprout Social

لنلقٍ نظرة على مثال آخر من Sprout Social، وهو هذا البريد الترويجي الذي يغطي ميزة جدولة Instagram الخاصة بهم.

يختلف هذا التخطيط عمّا سبق بكونه يحتوي على شبكة بعمودين متناوبين. وهو يستخدم الأيقونات المربعة الموضوعة بجانب صناديق تحوي معلومات مربعة مع صور واضحة. إنّه لتصوّرُُ رائع وينسجم بشكلِِ جميل مع الشكل العام.

إذا كنت تبحث عن قالبِِ بسيط لدراسته أو ربما إعادة إنشائه، فيجب عليك التحقّق من رسائل Sprout Social الإلكترونية. فبالنظر إلى جميع العوامل مثل المرئيّات، النسخ وهيكل الصفحة، تقوم Sprout Social بالتسويق عبر الايميل بشكل صحيح.

Moo Design

من بطاقات العمل إلى الملصقات المخصّصة، تبيع هذه الرسالة الإخبارية الترويجية المنتج بشكلِِ جيّد. يمكنك تعلم الكثير من خلال دراسة كيف تروّج مواقع الويب الأخرى لمحتواها، وتعدّ هذه النشرة الإخبارية مثالًا رائعًا.

تُظهر صور المنتج كيف يمكن استخدام هذه العناصر ويمكنك أيضًا معرفة الكثير من أسلوب البريد ومظهره.

تَظهر هذه الصور بشكل غنيّ وممتع وتجعلك تحسّ بشعورٍ خفيف من الفكاهة. هذا يجسّد للقراء كيف تشعر هذه المنتجات ولماذا قد ترغب في زيارة Moo.

تستخدم الرسالة الإخبارية ميزة المنتج المكوّن من عمودين مع تجميعات من الصور والنصوص. وهي طريقة ممتازة لجذب الانتباه وزيادة التحويلات.

Under Armor

تحظى علامة Under Armor بشعبيةِِ كبيرة في مجتمع اللياقة البدنية. لديهم الكثير من المنتجات الرائعة وتصميم النشرة الإخبارية الخاصّة بهم يبيع سلعهم بشكل جيد.

لاحظ عدد الصور الفريدة المستخدمة في هذا التصميم. من المنطقيّ، في بعض المنتجات، إضافة صور أكثر من نص. تخدم العناصر المُجمِّعة التي تحتوي على الصور ونداءات إجراء النشاط (CTA) الرسالة الإخبارية لـ Under Armor بشكلِِ جيّد، وهي عادةً استراتيجية جيّدة لجميع السلع المادية.

Runtastic

.

تعدّ قوائم ميزات المنتج رائعةََ للترويج لتطبيقات الأجهزة المحمولة والبرامج الرقمية. ويعتمد بريد Runtastic هذا على لقطات شاشة للتطبيق وأيقونات صغيرة مسطّحة لتلفت انتباهك.

الهدف من هذه الرسالة الإخبارية هو تشجيع النقرات المحوّلة وجعل المستخدمين الجدد يتعمقون في الميزات. إنّها مجموعة كاملة من البرامج وأدوات التتبّع بحيث يمكن أن يستغرق الأمر بعض الوقت لتعلّم كلّ شيء.

ولكن من خلال بريد متابعة رائع، يمكنك تقديم معلومات كافية لإثارة فضول الناس ورغبتهم في معرفة المزيد.

هذه فقط بعض من أفضل تصاميم الرسائل الإخبارية التي وجدتها ولكن هناك العشرات الأخرى منها. وبغضّ النظر عما تروِّج له أو لماذا تحتاج إلى رسالة إخبارية في الأصل، ستساعدك هذه التصاميم على التخطيط لتصاميم قابلة للاستخدام وذات شفرة مصدر نظيفة وسلسة للانطلاق منها.

ترجمة -وبتصرف- للمقال 10 Newsletter Layouts With Free Source Code لصاحبه Jake Rocheleau

في فنّ التبسيط (minimalism)، يتمّ تشريح التصميم وتجريده من أي زوائد بشكل يتمّ الاحتفاظ بالعناصر الأساسية فقط.

على الرغم من صعوبة إتقانه، إلا أن التبسيط فنّ يمكنك تعلمه بسهولة. إذا كنت ترغب في تجربة التبسيط في أي مسعى فنيّ، يجب عليك تشفية العمل وتخفيفه إلى أقصى حد ممكن.

يتعلّق الأمر كلّه بتجريد العمل حتى تتم إزالة كل ما لا لزوم له.

بناءًا على هذه الأغراض والأهداف، يركّز المصممون على حذف العناصر غير الضرورية من التصميم، و مؤخّرََا أصبح المزيد منهم يقفزون إلى هذا المجال الشائع.

لقد زادت شعبية التبسيط بسرعة حيث نرى أن التصميم المسطّح قد غزا السوق مؤخّرََا. من خلال التصميم المسطّح، الذي يطبِّق المفاهيم والتقنيات التي يدعمها فنّ التبسيط، قام عددُُ متزايد من المواقع بتبنّي فكرة أنّ القليل هو فعلا كثير (Less is truly more).

و لكن هل سبق أن سألت نفسك لماذا فنّ التبسيط شائعُُ إلى هذا الحدّ؟ ما الذي يكمن وراء شعبيّة مفهوم التصميم هذا؟ و نحن كمصمّمي مواقع إلكترونية، كيف نستغلّ هذه الشعبيّة لجعل تصاميمنا أكثر فعاليّة و جمالََا؟ لنكتشف هذا معًا.

القليل كثير

من المحتمل أن المهندس المعماري الرائد لودفيج ميس فان دير روه Ludwig Meis van der Rohe لم يعرف أبدًا أنه عندما قال "أقل هو أكثر"، فإنّه سيؤثّر على الكثير من العقول اللامعة التي عاشت بعده. تلخّص هذه الكلمات الثلاث جوهر فنّ التبسيط ومفهومه الحقيقي: موجز ومباشر.

عند تصميم موقع ويب، يجب أن تسأل نفسك دائمًا سؤالًا، "ما هي وجهة نظري؟" وبهذه الطريقة، ستفهم دائمََا أين يتوجّب عليك قيادة مشاهديك.

وجود تصميمِِ مبعثر سيمنع وصول المعنى لا غير. بحيث تميل العناصر غير الضرورية إلى أن تصبح عقباتِِ بدلاً من أن تكون جسورًا وممرّاتٍ في إرسال هدفك إلى المُشاهد.

لماذا هذا سيئ؟

• وجود البعثرة في التصميم سيشوّش المستخدم ويصرفه في أشياء أخرى بدلا من الاستجابة إلى دعوتك له للقيام بفعل معيّن.
• التصميم المشوّش يبعثر الصفحة أو النافذة مما يجعلها صعبة الفهم.

كيف تحقّق الكثير من القليل؟

• ضع خطّة موقع الويب الخاص بك بعناية كبيرة. فهذا يمنعك من إضافة العناصر غير الضرورية حتى قبل أن تلمس التصميم.
• حدّد هدفك، إذا كان عنصر التصميم لا يساعدك على تحقيق هدفك، فقم بإزالته.
• اقض بعض الوقت في سؤال نفسك، "هل أحتاج فعلا إلى هذا؟"
• حاول استخدام بعض برامج تتبع النقرات على موقع الويب الخاص بك لتحديد العناصر التي لا يستخدمها المشاهدون مطلقًا. بعد ذلك، قم بتقييم ما إذا كان سيتم حذف العناصر غير المستخدمة أو نقلها إلى موضع آخر.
• ارجع دائمًا للأساسيات.

تجاوب التصاميم على مختلف الأجهزة

مع زيادة عدد مستخدمي الهواتف الذكية كلّ يوم، يجب أن تكون مواقع الويب متجاوبة مع مختلف الشاشات. بمجرّد مشاهدة موقعك على الويب وتجاوبه بشكل جميل، فإنك تزيد من فرصك للوصول إلى هدفك.

الآن، لماذا أشرت إلى تصميم مواقع الويب المتجاوبة هنا؟ وما هو الدور الذي يلعبه في شعبية فنّ التبسيط؟

نقطة مهمة

يمكن أن تمتاز مواقع الويب المتجاوبة، في حالة استخدام تصميم هيكلي (wire-frame) و نظام شبكي فريدين من نوعهما، بانتقالِِ سلس من شكلها على الحاسوب إلى شكلها على الهاتف النقّال.

مع وجود محتوى أقلّ، وعدد أقلّ من التجميعات وعناصر التصميم (التي تلتزم بفنّ التبسيط)، بالإضافة إلى الكثير من المساحات البيضاء، تتمتّع مواقع الويب التجريدية بفرص أكبر للتحوّل إلى نسخ جميلة على الهاتف المحمول.

هناك شيء آخر حول التجاوب وارتباطه بالتبسيط وهو المستخدمون. فمستخدمو الهاتف المحمول أقلّ صبرًا، ومشغولون طوال الوقت ودائمو التنقّل. في معظم الأوقات، يكون لديهم ولوجًا محدودًا للإنترنت وجدولًا زمنيًا أكثر محدودية. ولكن يمكن أن يكون وصول مستخدم الهاتف المحمول العادي إلى المعلومات مفيدًا للغاية. تذكّر، إذا أراد المستخدمون شيئا، فاعطيه لهم في أسرع وقت ممكن.

إليك بعض الأشياء التي تحتاج إلى تذكّرها حول التصميم المتجاوب:

• فكِّر بشكل متجاوب. هناك تخطيطات مثالية لعمل تصميم متجاوب كما هناك تخطيطات أخرى ليست كذلك. فهم هذا من شأنه أن يجعلك تصمم مواقع تتجاوب مع أي جهازِِ كان.
• إيلاء الاهتمام لنقاط الفصل. تحتوي القرارات على نقاط توقف مختلفة. ستكون نقاط التوقف هذه هي دليلك في التصميم لأحجام مختلفة للشاشة.
• يجب أن تكون الصور مرنة. عند تغيير عرض الصفحة، تأكّد من أن تتجاوب صورك مع هذا التغيير قدر الإمكان.

مواقع ويب أخفّ حجمًا

تخيّل نفسك في منطاد الهواء الساخن. تخطو إلى الداخل، تشغّل الموقد، ويتمدّد البالون. لكن لا يمكنك الإقلاع لأن هذه الأكياس الثقيلة من الرمال تسحب البالون إلى الأرض. ماذا كنت ستفعل؟

ربما تكون الإجابة هي أن المواقع الإلكترونية الأخفّ هي المساهم الرئيسي في شعبية فنّ التجريد. وجود عناصر قليلة في التصميم سيعني موقع ويب أخفّ.

• تعني قلة المحتوى، عناصر واجهة المستخدم وعناصر التصميم داخل موقعك أنّ هناك بيانات أقلّ تحتاج إلى تنزيل بيانات بواسطة متصفحك، ممّا يمنحك تجربة مستخدم أسرع وأخفّ حجمًا وأكثر كفاءةََ وإنتاجية.
• يجب عليك بالأساس أن تقوم بمراعاة التجاوب وأنت تصمّم لأنّ ذلك سيلعب دورََا فى مدى سرعة تحميل الموقع على الهواتف المحمولة.
• بناءك لمواقع ويب خفيفة يعني سهولة تحديثتها، صيانتها أو اكتشاف الخلل فيها.

تذكّر، ليس هناك أي شخص عاقل سيحب موقعا يتطلب الدّهر لتحميله.

إليك بعض النصائح:

• احذف الإضافات غير المستخدمة.
• أزل أي شيء غير فعّال.
• إن استطعت إنشاء أيّ عنصر تصميم باستخدام الكود، فقم بذلك.
• علم متى يجب عليك استعمال PNG أو GIF أو JPG.

المزيد من المحتوى الموجه

أراهن أنّنا جميعََا نعرف أنّ المحتوى هو أهمّ شيء. لذلك أعتقد أنّ ما يدفع الناس نحو التبسيط هو عقليّتها القائمة على أهمّية المحتوى. نظرًا لأنّ مواقع الويب التجريديّة ترغب في التخلّص من العناصر غير الضروريّة، وتقسيم التصميم إلى أبسط شكلِِ ممكن، فإنها تجعل المستخدم يركّز على أكثر الأشياء أهمّيةََ: المحتوى.

بدون كل مصادر الإلهاء، يمكن للمستخدمين العثور بسهولة على ما يحتاجون إليه للتجاوب مع دعوات القيام بنشاط ما. وهذا يجعل كفاءة مواقع الويب أعلى لأنها تحقّق أفضل تجارب استخدام بأقلّ جهد ممكن في التصميم والصيانة.

كيف تصمم من أجل المحتوى؟

• استخدم المحاذاة المناسبة.
• استغلّ المساحات الفارغة.
• استعمل الخطوط المناسبة.
• الحجم مهمّ.

الخلاصة

لماذا فنّ التجريد شعبيُُّ جدّا؟ حسنًا، إنّ هذا الفنّ يعكس طريقة الحياة التي تشجّع الاستبطان. ما هي الأشياء التي لستُ بحاجة إليها؟ ما هي الأشياء الأساسية بالنسبة لي؟ وكمصمّم، فإنّ الإجابة على هذا السؤال ستقودك إلى إدراك ما الذي يساعدك حقًا وما يجب عليك التمسّك والاحتفاظ به. تصميم سعيد!

ترجمة -وبتصرف- للمقال The Rise in Popularity of Minimalism in Web Design للفريق Editorial Team

كلمة حركات مستمدة من الفعل «حرَّك» والتحرُّك سمةٌ تعطينا الإحساس بالحيوية وتجعل أحداث الطبيعة تبدو أكثر واقعيةً بالنسبة لنا، فالحركات تجذب انتباه الناظر وتجعلة يشعر بإثارة الموقف وتبرز المشاهد الأكثر أهميةً وإقناعًا من غيرها. أمَّا العناصر الساكنة التي تجلس بلا حراك، فتشعرك أنَّها ميتة، حتى وإن كان تصميمها جذابًا.

يعدُّ التحريك فنًا مثله كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وصارفي هذه الأيام علمًا يُدرّس وعملًا يُنجَز، حتى أنه أصبح متأصلًا في روح تصميم الويب ويبدو أنه إضافة رائعة إلى العديد من عناصر موقع الويب. هل تجلب الحركات المزيد من الحياة للتصميم أم أنها قد تفسده أحيانًا؟ دعنا نتعرف على الفوائد التي يمكن أن تقدمها الحركات لموقع الويب وما هي الحالات التي يكون من الأفضل تجنبها.

كيف ظهرت الحركات في تصميم المواقع

ظهرت الحركات في الويب منذ وقت طويل. أولاً، كانت هناك ملفات ‎.gif صغيرة الحجم بها صور متحركة ومقاطع فيديو متنوعة. كانت تلك العصور المظلمة مع الكثير من بطاقات Flash وأشياء نفضل أن لا نراها. في تلك الأيام، لم يكن أحدًا يعتبر الحركات وسيلة لتحسين قابلية استخدام موقع الويب. كانت تستخدم في الغالب للتزين أو للمتعة فقط. اليوم، يمكنك استخدام تأثيرات الحركة لتحسين التنقل والاستخدام لموقعك.

منذ وقت ليس ببعيد، أُنشئت جميع العناصر والتأثيرات المتحركة على مواقع الويب بمساعدة تقنية Flash. بالطبع، لقد كانت تقنية ثورية في ذلك الوقت على الرغم من أنها كانت ثقيلة جدًا وزادت من وقت تحميل الموقع بشكل كبير.

في هذه الأيام، تُصمّمم الحركات باستخدام شيفرات JavaScript و CSS الخفيفة التي تساعد على إضافة عناصر متحركة إلى الموقع دون زيادة تحميله. والأهم من ذلك، تُستخدم الحركات هذه الأيام لتحسين UX، وليس فقط للمتعة. إنها وسيلة رائعة لمصممي الويب التي تساعد في جعل موقع الويب أفضل وأسهل في الاستخدام. كما في الحالات التالية:

تحسين قابلية الاستخدام بالحركات

في كثير من الحالات، تُستخدم تأثيرات الحركة لجذب انتباه المستخدم لتفاصيل مهمة تساعده لاتخاذ القرار الصحيح بشأن إمكانية النقر فوق عنصر من بين أشياء أخرى. وبالتالي، تستخدم العديد من مواقع الويب تأثيرًا هزَّازًا في نماذج تسجيل الدخول لتبين للمستخدمين أن هناك خطأ ما وأن المعلومات قد أُدخلت بشكل غير صحيح، مثل كلمة السر الخاطئة. هذا الأسلوب يحاكي هزِّة رأس إنسان يقول "لا".

هناك العديد من الطرق الأخرى لاستخدام الحركات لتحسين تجربة المستخدم UX. يمكن استخدامها في أشرطة التنقل لفصل الفئات الرئيسية عن الفئات الفرعية؛ أو ضمن خيارات متعددة، عندما تتلاشى جميع العناصر باستثناء العنصر المختار.

موقع Etechevent مع عناصر متحركة

يمكن استخدام الحركات لتوجيه المستخدمين حول الموقع وحتى جعلهم يشترون. إن إضافة عناصر تفاعلية وجذب انتباه المستخدمين إليها بمساعدة تأثيرات الحركة يمكن أن يساعد مواقع الويب التجارية على تحسين العقارات وعائد الاستثمار. ويمكن أن تستفيد مواقع رواية القصص أيضًا من تضمين الحركات. حيث يمكنها أن تبين للمستخدمين ما الخطوة التالية التي يجب أن تكون أو كيفية اختيار مكان الانتقال في موقع الويب.

استخدام الحركات في التصميم الماديّ (Material Design)

أثبتت فكرة الحركات في تصميم الويب أنها مفيدة للغاية إذا لم تستخدم بطريقة تزيينية فقط. غالبًا ما يستخدمها مصممو UI و UX لتحسين سير العمل لديهم. حتى Google تدرك أهمية الحركة لسهولة الاستخدام، وهكذا ظهر التصميم الماديّ.

أصبح التصميم المادي أكثر وأكثر عصرية ويُستخدم هذه الأيام في العديد من التطبيقات وتَصاميم المواقع. سر شعبيته هو اهتمامه الكبير بكيفية إدراك الكائن أو العنصر؛ كيف يمكن للحركة أن تخبر المستخدمين أكثر عن هذا العنصر وكيفية استخدامه. تنص Google في دليلها للتصميم المادي على أن الحركة يمكن أن تخبر المستخدمين أن أي كائن هو خفيف أو ثقيل أو مرن أو كبير أو صغير. يجب استخدام الحركات لتزويد المستخدمين بِفهم أفضل لطبيعة الكائن، وبالتالي، كيف يمكن وينبغي أن تستخدم داخل التصميم.

اقتباس

"يجب أن تتضمن الحركة في التصميم المادي الألفة والسلوك الواقعي للأشياء المادية، دون التضحية بالأناقة والبساطة والجمال."

تتقدم Google إلى أبعد من ذلك مع الحركات وتوصي باستخدام العناصر المتحركة التي تغير سرعتها ومدتها اعتمادًا على الهدف أو التأثير الذي ترغب في الحصول عليه. وبالتالي، تقدم Google العناصر الواردة والصادرة التي تظهر على الشاشة عندما ينبغي جذب الانتباه، أو إزالته من الشاشة عندما لم تعد هناك حاجة إليه.

نصائح لاستخدام الحركات في المواقع

عند إضافة الحركات إلى موقعك، يجب أن تفكر جيدًا في جميع مخاطرها أيضًا. العناصر المتحركة يمكن أن تضر بأداء موقع الويب وتجربة المستخدم UX. أولًا، يجب إعادة التفكير في استخدام الحركات إن كانت تبطئ من سرعة تحميل موقعك وأداءه العام. يمكن الكشف عن ذلك بمقارنة بسيطة لموقعك بحركاته مع أداء ألعاب الحاسوب الثقيلة. إذا كانت اللعبة تعمل بسلاسة على سطح المكتب أكثر من موقعك فيجب أن يكون هذا سببًا في إعادة النظر في استخدام الحركات.

موقع التوقعات السعيدة

استفد من CSS عند إنشاء حركات لموقعك. تعد مكتبة jQuery مثاليةً وتستخدم في العديد من المشاريع، لكنها يمكن أن تبطئ بالفعل من أداء موقعك. تسمح شيفرة CSS بإنشاء حركات خفيفة ستبدو رائعةً على أي جهاز دون إِثْقال التصميم. يجب أن تتأكد أن حركاتك متجاوبةً (responsive). موقع الويب المتجاوب أمر لا بد منه إن كنت ترغب في النجاح. ولكن إذا كان الأداء يبدو رائعًا على شاشة سطح المكتب فقط، فقد تخسر المعركة مع المستخدمين. هناك العديد من الأدوات التي تسمح بإنشاء حركات مُتجاوبة (مثل Adobe After Effects أو Invision) فبُناة مواقع الويب (مثل Webflow أو MotoCMS) تتضمن تأثيرات حركية متجاوبة وتوفر أنواع مختلفة من الحركات التي يمكن استخدامها داخل المواقع لتحسين تصميمها وقابليتها للاستخدام مثل:

• التلاشي (اليسار ، اليمين ، أعلى ، أسفل) (Fade in).
• الارتداد(Bounce in).
• التدوير (يسار ، يمين ، أعلى ، أسفل) (Rotate).
• الزلق (اليسار ، اليمين ، أعلى ، أسفل) (Slide in).
• اللمعان والنبض(Flash and Pulse).
• التذبذب (Wobbling).
• الاهتزاز (Swinging) وإلى آخره.

الحركات يجب أن تلفت الانتباه ولكن ليس كثيرًا. تأكد من أن الحركة لا تستغرق وقتًا طويلاً ولا تدوم طويلًا على الشاشة. هذا هو الحال خاصةً إذا كنا نتحدث عن العناصر التي يجب على المستخدمين التفاعل معها كثيرًا. قد يكون الأمر ممتعًا مرةً أو مرتين، لكن مع الاستخدام المتكرر قد يصبح الأمر معرقلًا للغاية.

موقع Laerepenger مع حركات غامضة

ابدأ باستخدام العناصر الصغيرة بالحركة على الموقع. في الواقع، الحركات وسيلة للهدف، وليست الهدف نفسه. يجب عليك عدم تضمينها أينما تريد. يجب أن يكون هناك ما يبرر لاستخدامها.

من الأفضل تضمين الحركات في عناصر واجهة المستخدم أو العناصر التي يتفاعل معها المستخدمون أكثر، مثل قوائم التنقل أو نماذج الاشتراك. وفكر قبل إضافة حقل قفَّاز وصور منزلقة: كيف ستؤثر على تجربة المستخدم، هل ستحسن التفاعل مع الموقع؟

تعد الحركات رائعةً لصنع تصميم موقع لا ينسَ. فهي لا تزال تستخدم على نطاق واسع في تصميم الموقع على الرغم من النظرات المختلفة حولها مثل سرعة التحميل أو عدم الاستجابة. ولكن الشيء الرئيسي الذي يجب أن تتذكره عند تقديم عناصر متحركة لموقعك هو تأثيرها على قابليتها للاستخدام. الأمر متروك لك - تحديد أين ومقدار دمج الحركة في التصميم الخاص بك.

فيما يلي ملخص قصير لمواقع الويب التي تستخدم الحركات لدرجة كبيرة:

موقع KiKK

تصميم موقع مقهى مثلجات

موقع شركة JD للاستشارات

موقع VN Star

تصميم شركة Soane Capital المالية

موقع وكالة Nodeplus الرقمية

تصميم موقع Creative Cruise للفنادق

تصميم مواقع صناعي مع تحريك

تصميم موقع وكالة Pomade الرقمية

موقع مجوهرات Puca

تصميم موقع Carioca Promo الترويجي

موقع Ultranoir مع تحريك إبداعي

تصميم موقع Mahno الشخصي

تصميم منظر حديقة Vintage المتحرك

ترجمة -وبتصرف- للمقال Animation in Web Design: Why and When to Use من موقع line25

إذا كانت وظيفتك هي إنشاء تصميمات ويب عالية الجودة، عليك أن تدرك أنّ مساهمتك في العملية التسويقية مهمة جدًا، لذلك، فإن قضاء بعض الوقت لصقل معرفتك بتعلم مصطلحات التسويق المشهورة سوف يمنحك فهمًا أكثر لعملك من خلال سياق أكبر في التسويق.

كميزة إضافية، من الممكن تعلم بعض المصطلحات التي تستطيع استخدامها في نقاشاتك مع المُشغلين والعملاء وإثارة إعجابهم بمعرفتك وتمكنك في هذا المجال.

هذه بعض المصطلحات التي تحتاج للبدء بالتعرف عليها:

اختبار أ/ب (A/B Testing)

هو نسخة المسوق في المنهج العلمي. عندما تكون هناك مشكلة ما في تصميم موقع، بدلًا من إجراء تعديل شامل على التصميم، او تغيير المحتوى والخطوط أو تغيير الألوان بشكل كامل، يعمد المسوقون لاستخدام اختبار أ/ب كأداة لتجريب نُسخ بديلة للموقع وعادةً ما يتم تغيير عنصر واحد فقط.

التحليلات (Analytics)

يشير مصطلح التحليلات ببساطة الى بيانات كأرقام. معدل فتح البريد الإلكتروني، وعدد زائري مدونة ما، وعدد النقرات المدفوعة، وعدد المشاهدات وغيره من الأرقام، كل ما سبق يُمثّل مجموعة متنوعة من البيانات التي يُمكن استخلاصها من تحليلات عملية التسويق.

B2B

يُشير مصطلح B2B الى مفهوم "من قطاع أعمال إلى قطاع أعمال" ونقصد به هنا الطرفان المباشران لعملية التسويق، ويُمثل الطرفان قطاعي أعمال مختلفان بحيث يكون جمهور قطاع أعمال ما هو قطاع أعمال أخر.

B2C

يشير مصطلح B2C الى مفهوم "من قطاع أعمال إلى المستهلك" وفيه يستهدف قطاع أعمال ما جمهورًا من المستهلكين العاديين (ليسوا قطاع أعمال).

معدل الارتداد (Bounce Rate)

معدل الارتداد هو نسبة الزائرين الذين يغادرون موقعك بمجرد الدخول لصفحة واحدة. هذه الإحصائية يتم متابعتها لتحديد الجزء الذي يفقد فيه الزائر الاهتمام بالموقع. ستجد هنا دليل يُساعدك في تحسين معدل الارتداد لموقعك.

هوية العلامة التجارية (Brand Identity)

تتضمن هوية قطاع أعمال ما كل شيء يربطه الناس بالعلامة التجارية الخاصة بهذا القطاع. من الممكن أن تتضمن هوية قطاع الأعمال كل من اسم الشركة، شعار الشركة، ألوان العلامة التجارية، نوع خطوط الطباعة، الصور، محتوى صوتي وهكذا.

شخصية المشتري (Buyer Persona)

ينشئ قطاع الأعمال هوية جمهوره من خلال بناء ما يًسمى بـ "شخصية المشتري" وتُبنى معالم هذه الشخصية باستخدام المعلومات الجغرافية والسكانية أو تاريخ سلوك المستخدمين وغيره من المعلومات، وتمنح هذه الشخصية الجمهور القدرة على تشكيل محتواه، وتحديد جهود التسويق بالطريقة التي يرغبها.

دعوة إلى الإجراء (Call-to-Action)

كل صفحة في الموقع لابد أن يكون لها هدف واضح لجمهور الأعمال وكل جزء من التسويق لابد أن يكون مضمونًا. دعوة إلى الإجراء يمثل رسالة تقوم بتوجيه الزائر للقيام بالخطوة التالية لإكمال تحقيق الهدف المُراد منه.

المحتوى (Content)

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

التحويل (Conversion)

التحويل هو غاية التسويق وهدفه النهائي، ويتغير شكل التحويل من موقع لأخر، فالتحويل في مواقع العضويات يتحقق باشتراك الزائر في العضوية. في مواقع التجارة الإلكترونية، التحويل هو شراء سلعة أو منتج. للمدونات، التحويل هو الاشتراك في المدونة ومتابعة الخلاصات فيها.

الاشتراك (Engagement)

يشير مصطلح الاشتراك الى أي تفاعل بين قطاع أعمال ما والمستخدم النهائي لديه. يستخدم المسوقون هذا المصطلح للإشارة عادةً إلى التفاعل الحاصل في المنصات الاجتماعية والذي يحدث بأشكال متعددة مثل الإعجاب، المشاركة والتعليق.

محتوى متجدد (Evergreen Content)

يكون المحتوى متجددًا عندما لا يتقيد بوقت ما. وبكلمات أخرى، يبقى هذا المحتوى قيمًا وذو علاقة بغض النظر متى يقوم شخص رؤيته.

الارتباك والمقاومة (Friction)

تحدث حالة الارتباك ومقاومة التحويل في عملية التسويق عند إزعاج المستخدم وإرباكه أثناء محاولته إتمام إجراء معين.

التسويق الضمني (Inbound Marketing)

يتطلب التسويق الضمني تكتيكات خفية، وغالبًا يركز على التجربة وشرح الخبرة والمعرفة أكثر من محاولة البيع.

الاصطياد (Jacking)

الاصطياد (مثل الاختطاف) يحدث عند استخدام فكرة رائجة لصالح قطاع أعمال ولغرض خاص. من أمثلة ذلك هو استخدام newsjacking (تصيد الأخبار الشائعة)، و trendjacking (تصيد المواضيع الشائعة), و memejacking (تصيد النهفات والنكات الشائعة).

مؤشر الأداء الأساسي (Key Performance Indicator)

نعني بهذا المصطلح (يُختصر بـ KPI) قياس درجة النجاح في تحقيق هدف ما.

الكلمة المفتاحية (Keyword)

الكلمات المفتاحية هي ما يُركز عليه المسوقون في بناء كل جزء من المحتوى المكتوب. الكلمات المفتاحية هي أحد الطرق التي تُستخدم في تهيئة المحتوى ليناسب محركات البحث.

صفحة الهبوط (Landing Page)

كل صفحة في موقع ما هي صفحة هبوط. بلغة التسويق، وبشكل خاص، تُصمم صفحات الهبوط لتحقيق هدف خاص بالبيع.

العميل المحتمل (Lead)

يشير مصطلح Lead في لغة التسويق إلى العميل المحتمل.

التسويق المؤتمت (Marketing Automation)

التسويق المؤتمت هو عملية تشغيل "مهمة تسويقية" وتنظيمها باستخدام برمجية ما.

التهيئة للأجهزة المحمولة (Mobile Optimization)

التهيئة للأجهزة المحمولة هو المصطلح العام المستخدم عند تصميم موقع وأخذ الهاتف المحمول في الحسبان. التصميم المتجاوب وتقييم سرعة الصفحة هما مثالان للتهيئة للأجهزة المحمولة.

تحسين الصفحة – الداخلي (On-page Optimization)

يشير هذا المصطلح إلى أي نوع من التحسينات المتعلقة بعملية البحث التي يتم تطبيقها داخل صفحة ويب. يشمل ذلك استخدام التخطيط المتجاوب وتهيئة النص باستخدام البيانات الوصفية.

تحسين الصفحة – الخارجي (Off-page Optimization)

يشير هذا المصطلح إلى أي نوع من التحسينات المتعلقة بعملية البحث التي يتم تطبيقها خارج الموقع. الشبكات الاجتماعية وفرص الارتباط هما مثالان على ذلك.

التسويق التقليدي (Outbound Marketing)

هي العملية التقليدية للتسويق وتكتيكاتها محصورة بغرض البيع المباشر.

نقطة الألم (Pain Point)

كل حل أو منتج أو خدمة الهدف منه هو حل نقطة ألم للزبون. غالبًا يتم تعريفها عند بناء شخصية المشتري.

التطويع (Repurposing)

التطويع هو استخدام جزء من محتوى وتجديده كشيء اخر، فمثلًا، يقوم المسوقون بأخذ منشور مدونة ومناقشته خلال جلسة فيديو حية.

التهيئة لمحركات البحث (Search Engine Optimization)

يشير مصطلح التهيئة لمحركات البحث (السيو SEO) الى أي تكتيك تسويقي يهدف إلى تحسين ترتيب الموقع خلال ظهور نتائج البحث. تحسين الصفحة داخليا وخارجيا هما مثالان للسيو.

الإثبات الاجتماعي (Social Proof)

يشير الإثبات الاجتماعي إلى اعتماد المستهلك على شهادة الغير من المستخدمين لتحديد نظرته وموقفه تجاه علامة تجارية ما. الشهادات، مراجعات المنتج، التقييمات وصور منتجات الشركة المُصورة من قبل المستخدمين هي أمثلة على الإثبات الاجتماعي.

القائد المُفكر (Thought Leader)

يُنظر للقائد المُفكر كشخص مؤثر وخبير في مجال مُعين. من منظور تسويقي، يُشير المسوقون للمحتوى التسويقي الداخلي كمحتوى قائد مُفكر.

تجربة المستخدم (User Experience)

في التسويق، يُستخدم مصطلح تجربة المستخدم (UX) للإشارة غالبًا الى خبرة المستخدم في استخدام شيء ما. يوجد طريقة في تصميم الويب تُسمى تصميم UX والتي تُركز بشكل كبير على بناء كل إنش في الموقع بناءً على إعدادات المستخدمين، سلوكهم وأهدافهم.

ترجمة -وبتصرّف- للمقال The Marketing Terms You Need to Know as a Web Designer لصاحبه Brenda Stokes Barron

تعد Univision شبكة القنوات المتحدثة باللغة الإسبانية الأولى على العالم. وباستهداف اللاتينيين في الولايات المتحدة، فهي تركز بشكل رئيسي على المسلسلات التلفزيونية والبرامج المتنوعة والرياضية.

وفي عام 2015، أعدنا تصميم موقع Univision.com بشكل كامل حيث أن آخر مرة كان قد أُعيد تصميمه كانت في عام 2011، ولكن حان الوقت لإصلاح التنقُّل المعقَّد بداخل الموقع والأشكال الغير متناسقة، وفي النهاية، جعله موقعًا سريع الاستجابة. استمر بالقراءة لأخذ فكرة عن ما قمنا به.

المشاكل التي تم التخلص منها في إعادة التصميم

التنقل المعقد

التنقل في الموقع كان ولا يزال أحد أكبر مشاكلنا. كيف يتنقَّل الزوار عبر موقع Univision.com وما الذي يبحثون عنه؟ ومنذ إعادة التصميم التي تمت في عام 2011، فقد عانى الموقع في ما يتعلق بهويته (هل هو شبكة أم بوابة إلكترونية؟) وكان الانتقال قد تضمن المزيد والمزيد من الأجزاء المتراكمة خلال الفترة ما بين 2011-2015.

وتعد هذه مشكلةً بالنسبة للزوار الجدد للموقع، بينما يعرف زوار موقع Univision الدائمين طريقهم لما يبحثون عنه مثل الأبراج وآخر الإشاعات والقصص الحديثة.

الأشكال غير المتناسقة للقوالب

نتجت هذه الأشكال غير المتناسقة عن مجموعة من التجارب الفاشلة على مر السنين حيث أن الفرق الصغيرة في مؤسستنا حاولوا أن يوسموا أنفسهم على الموقع وقام كل فريق من فرق النشر بإضافة أزرار الانتقال حسب الحاجة لمساعدة الزوار بإيجاد المحتوى وأدى هذا إلى وجود 3 أزرار انتقال في كل صفحة وما يقارب 11 عنصرًا في كل زر.

في النهاية، كان من الصعب إيجاد أي شي، لأنه لم يتم التخلص من الأشياء الغير مهمة، وبسبب صعوبة إيجاد الأشياء، كان يجب إما وضعها في القمة أو تكرارها مرتين وثلاثة.

وعلى سبيل المثال، فإن القسم الترفيهي من الموقع كان يشمل:

• 9 عناصر انتقال رئيسية
• 4 رؤوس انتقال فرعية
• 16 رابطاً إضافيًا

لم يكن الموقع متجاوبًا

80% من مستخدمي موقع Univision.com يستخدمون إصدار الأجهزة المحمولة. ولعدة سنوات، كان الناشرون والمحررون مطالبين بصنع المحتوى ليناسب جهاز الحاسوب ومن ثم نشر المحتوى مرة أخرى ليناسب الجهاز المحمول في سلسلة مختلفة من العمل. أو كان بإمكانهم اختيار محتوى معين لكي لا يتم نشره على "التجربة المبسطة" للجهاز المحمول مما حرم معظم جمهورنا من التجربة الكاملة للموقع.

التنقل المبسط بشكل مفرط كان أيضًا من العوائق:

قمنا باستعراض التنقل الرئيسي والثانوي بجانب بناء صفحات المحتوى الخاصة بنا أولاً (مقالات وفيديوهات وشرائح عرض).

عملية التصميم الخاصة بنا

قمنا بالعمل بشكل سريع جدًا خلال فترات قصيرة أسبوعيًا، وبالتزامن مع الفريق الذي كان يبني نظام إدارة المحتوى CMS من الصفر بالإضافة لإنشائه للتجربة الخاصة بالموقع.

هذه العملية لم يكن من السهل مواكبتها وذلك لاحتوائها على انتقادات يومية للتصميم بين الفرق الصغيرة وتكرارات يومية للتفاعلات المعقدة والقوالب المتجاوبة هذا وبالإضافة لانتقادات أصحاب المصلحة والتي قد تتطلب مراجعات ومواصفات متأخرة جدًا ومكتوبة، كل هذا في أسبوع واحد.

ولكن الجانب المشرق الوحيد من وراء هذا كان بأن فريقنا صنع قراراتٍ بشكل سريع وتقدم للأمام بدون إهدار الوقت في محاولة جعل كل شيء مثاليًا.

الأدوات

استخدامنا لبرنامجي Sketch و InVision جعل عمليتنا تتم بسلاسة كبيرة.

تسليم التصاميم

وفي نهاية كل أسبوع، كنا نسلم مجلدًا بالملفات النهائية وصفحات المواصفات التي قد تضاف لمجلد التنسيقات في برنامج Dropbox لفريق البرمجة.

وكانت الملفات النهائية تتضمن مستندات Sketch لعناصر التصميم والمراجع المرئية بالإضافة لملف Omnigraffle مع شرح مرئي عن كيفية تغير التنسيقات عند نقاط مختلفة. وعند التسليم الأولي للتصاميم، كنا نتلقى انتقادًا على الملفات المسلّمة وكنا نجيب على أي أسئلة لدى فريق التطوير.

ومنذ ذلك الحين، وبعملنا بنظام سريع على فترات قصيرة على مدار أسبوعين، سلّمنا ملفات عن طريق صناعة مستويات في برنامج JIRA لتعيين المهام.

راجعنا، وسجلنا الملاحظات، واختبرنا.

التحسينات التي أجريت

• نظام تنقّل عام مبسط ب7 عناصر: انتقال عاملي موحد لجميع خصائص Univision وتقليل عدد القوائم المنسدلة وتبسيط كيفية إيجاد المستخدم للمحتوى.
• تنقّل متجاوب للهاتف المحمول: جعل تجربة الهاتف المحمول والحاسوب هي نفسها مما يسمح للمستخدمين بإيجاد المحتوى في نفس المكان بالرغم من الجهاز المستخدم.
• ترك المساحات في القوائم المنسدلة والتي تمكن من الترويج للأحداث المميزة: وذلك يعني الترويج للأحداث في مساحة كافية مما يسهل على المستخدمين إيجادها بشكل متكرر خلال عرض هذه الأحداث مباشرةً على التلفاز.
• التنقل التفصيلي الذي يساعد المستخدم: وبسبب كثرة مراحل التنقل وخاصةً في القسم الرياضي، فإن مستخدمينا قد احتاجوا لطريقة لإرجاعهم للخلف لرؤية الفرق الرياضية والدوريات الأخرى.

الدروس المستفادة

• أيقونة المزيد "Más" غير مفهومة: حاولنا في تصفح الهاتف المحمول أن نستخدم هذه العلامة لمساعدة المستخدم على إظهار المزيد من عناصر التنقل ولكن المستخدمين لم يفهموا هذه العلامة.
• بعض الوظائف لم نستطع إنشائها كما هي مصممة (مثل اللافتات الرأسية والانتقال التفصيلي): بسبب محدودية القالب، فإن الصور من نوع full-bleed (أي عدم وجود حاشية بين حافة الصورة وحافة الشاشة) و full-browser-width (أي امتداد العرض على كامل نافذة المتصفح) لم تعمل. واحتاج الانتقال التفصيلي لوقت أكثر للتنفيذ بناءًا على كيف تم انشاء الصفحات بالتسلسل الهرمي.
• لم يكن المحررون يستخدمون القائمة كما هو مخطط: استخدم المحررون والناشرون عناوين لم تلتزم بالحد الأقصى للأحرف واستخدموا عمود التنقل على اليسار كوصلة للصفحة الرئيسية مما أدى لخلل عند استخدام التنقل على الهاتف المحمول.

بالإضافة للنظر في كيفية نجاح انتقالنا، فقد رجعنا للخلف ونظرنا إلى ما كان يعمل وما لم يكن يعمل في عمليتنا:

• دليل تصميم InDesign مسطح أصبح بحجم 189 صفحة. أدركنا بأن تعديل وتحديث هذا الملف كان مربكًا لنا وللمستفيدين من المشروع والمطورين بالإضافة لضمان الجودة Quality Assurance.
• كانت المواصفات غير واضحة مطلقًا مما أدى للحصول على منتج مختلف عن ما تم تصميمه.
• انجازات التصميم المسطح لم تكن مثالية.
• الملف ونقل المعرفة لم يشاركوا نفس الغرض.

لذلك قمنا بتكرار عمليتنا كما قمنا أيضاً بتكرار المنتج.

أفكار ما بعد إعادة التصميم

طرحنا موقعنا على الإنترنت ولكننا لا نزال نجري بعض التحسينات عليه. وعمليتنا الجديدة تتضمن الفحص الشهري بشكل موحد مع عمليات التطوير السريعة وفريق المصممين والمطورين الذين يختبرون كيف يبدو المنتج. نعمل الآن بانتظام على شكل فترات مكونة من اسبوعين سريعي الإيقاع بجانب الفرق الأخرى ونقدم تصاميم مرئية على برنامج Sketch وأيضًا ملفات المواصفات بواسطة Frontify بالإضافة إلى نماذج تجريبية للمطور.

استغرقنا الأمر بعض التصاميم السريعة بينما كان المستفيدون من المشروع يراجعون نموذج تجريبي متجاوب ولكننا أصدرنا نظام انتقال محدث ليتم اختباره عن طريق مستخدمينا.

تحسينات على نظام التنقُّل الخاص بنا:

• تقليل ارتفاعه حتى يأخذ مساحة أقل.
• استخدام الاسلوب التفصيلي كعنصر انتقال ما هو مصمم في البداية.
• إظهار المزيد من الانتقال للمستخدم على الهاتف المحمول بينما قمنا بإزالة علامة "المزيد".
• استبدال لافتات العلامات التجارية بشعارات أكثر أناقة وجودة.

خلال اختبار ردود الفعل القيمة والمعطاة، كانت قد أظهرت لنا بأنه لايزال لدينا بعض العمل لنقوم به والمزيد من الاختبار وإعادة التصميم بشكل أساسي. ما وصلنا له في التصميم والمعالجة يعتبر بالفعل نجاحاً لنا وبجلبنا لجمهور عالمي ولشركة كبيرة بجانبنا، فأنا أعتقد بأن هذا بنفسه يعد إنجازاً.

ترجمة -بتصرف- للمقال Redesigning Univision.com لصاحبته: Jenna Marino

في الآونة الأخيرة، كان هناك الكثير من التطورات في تصميم مواقع الإنترنت وهي آخذة بالانتشار يوميًا. هل أنت جزء من مجتمع مصمميّ الويب؟ إن كنت كذلك، وكنت تعمل على تطوير تصاميم لواجهات الويب، إما في مجال تطوير لوحات التحكم، أو كجزء من موقع على شبكة الإنترنت. فقد ازدادت أهمية دور مصمم الويب، و سيزداد الدور أهمية في المستقبل، نظرًا لأن العديد من الشركات الناشئة بدأت تركز على التصميم أكثر يومًا بعد يوم.

قد يجد المصممون قليلو الخبرة صعوبة في التعامل مع واجهات الويب. ففي سبيل إنشاء تصميم مذهل لواجهة المستخدم، تحتاج للتركيز على العديد من العوامل. ومع ذلك، فإن السرّ يكمن في دقة التفاصيل.

هل ترغب بأن تكون مصممًا ناجحًا لواجهة المستخدم؟ دعني أعلمّك. وسنبدأ مع الأساسيات.

نصائح متعلقة بالبداهة

كلما سهل استخدام موقعك، ارتفع عدد الزوار والعكس بالعكس. يحمل التصميم البديهي (Intuitive design) أهمية كبيرة حتى عندما نتحدث عن السهولة. وهذا يعني أن موقعك يجب أن يكون لديه طرق استخدام واضحة بمجرد أن يفتحه الزائر.

عادةً ما يكون التصميم البديهي غير ظاهريًا و هذه أكبر ميزة له. لا توجد خطوط عريضة افتراضية وإنما نهج معتاد لمعظم المستخدمين يمكّنهم من فعل ما يريدون بسهولة.

يساعد التصميم البديهي الأشخاص في التركيز على جودة التجربة. كل زائر يرغب في إكمال مهمة دون أن يخسر وقته في المقاطعات. التصميم غير البديهي مُقلق ومشوّش.

لا يمكن رؤية التصميم البديهي ولكن هذا لا يعني أن الزوار ليسوا على دراية بوجوده. وسيلاحظون أن جميع العناصر ترتبط بالعمل الذي يقومون به، مما سيجعلهم سعداء بذلك.

مبادئ تصميم واجهات المستخدم

هناك ثلاثة مبادئ تحدد استخدام اللغة المرئية:

1. التواصل - يظهر بطريقة مألوفة للمستخدمين
2. التنظيم - تقديم بنية متناسقة ودقيقة
3. الاقتصاد - يستخدم سلسلة من التوجيهات بكفاءة

طبيعة تصميم واجهة المستخدم

الهدف الرئيسي من واجهات المستخدم هو تقديم تفاعل نوعي، وبالتالي، إتاحة تجربة مستخدم مذهلة.

إذا رغب المستخدمون بإكمال مهمتهم بسهولة،فلا بد أن يتعاملوا مع تصميم فعال ومباشر.

أهمية تصميم واجهة المستخدم بالنسبة للتطوير

في بعض الأحيان، يعقد أصحاب العمل اجتماعات لمناقشة ردود أفعال المستخدمين وإيجاد طرق لتطبيق ملاحظاتهم على التصميم.

والنتيجة هي تجربة مستخدم مذهلة بسبب مزيج من البساطة والفعالية.

ما الدور الذي تلعبه واجهة الويب أثناء التطوير؟

يتم إجراء بحث معتمد على احتياجات المستخدم وتفضيلاته. يناقش أصحاب الشركة كل منها للتوصل إلى تطبيق الممكن منها.

من المهم الإصغاء إلى احتياجات العملاء والتغذية الراجعة منهم لضبط التصميم وفقًا لما سبق، آخذين بالحسبان أفضل ممارسات تصميم واجهة المستخدم.

قواعد تصميم واجهة المستخدم

1. قاعدة الوضوح - يتوقع المستخدمون رؤية عناصر واجهة واضحة وبسيطة. يتجنب الأشخاص المحتوى المعقد عندما يكونون على الإنترنت. كما أنهم لا يريدون قضاء الوقت في تعلم كيفية القيام بما يُفترض أنه عمل بسيط.
2. قاعدة الأولوية - سيشعر المستخدمون بالثقة عندما يكون لديهم فكرة عما هو متوقع منهم.
3. قاعدة السياق - يجب أن تتيح واجهة المستخدم للمستخدمين قدرة التحكم بما يرون بأنه يجب عليهم التحكم فيه.
4. قاعدة الوضع الافتراضي - إن كان موقعك واضحًا، فلن يحاول المستخدمون تغيير الإعدادات الافتراضية.

من المهم أن يكون لديك وضع افتراضي:

• تأتي أجهزة التلفزيون مع إعدادات افتراضية والتي نادرًا ما يتم تغييرها.
• نادرا ما يتم تغيير درجة حرارة الثلاجة
• نجد الأوضاع الافتراضية في كل جانب من جوانب الحياة
• الأوضاع الافتراضية جوهرية لكل تجربة

تأكد من أن الأوضاع الافتراضية عمليّة وقابلة للتطبيق. فنادرًا ما يتم تغييرها.

نصائح إنشاء واجهة جديدة

معرفة المستخدمين: فرّق بين أهدافهم وأهدافك. أدرجها ضمن قائمة الأولويات. بعد ذلك، خُض في خبراتهم واختصاصاتهم لمعرفة ما يحتاجونه. تعرف على الواجهات المفضلة لديهم واستخدمها.

تجنب الصيحات الحديثة وخصائص التصاميم التي بالكاد تمّ طرحها . الطريقة الوحيدة لمساعدة عملائك على إنجاز مهامهم هي بالتركيز عليهم.

التنقُّل وهيكل تصميم واجهة المستخدم:

• حاول التوصل إلى حلول تركز على التفاعل بين المستخدمين والمنتج وتساعد المستخدمين على إنجاز مهمتهم.
• صنّف الحلول وفقا للأهمية والقوة ودور المستخدم وبالاعتماد على سهولة الاستخدام.
• اعتنِ بالهيكل، وبنية البيانات، والتنقُّل وصمم واجهة المستخدم تصميمًا عمليًّا مع محتوى غني.

إعداد الوثيقة النهائية: يجب أن تحتوي الوثيقة النهائية على بنية واجهة المستخدم بأكملها. ولا بد أن تعرض نهج المنتج من مرحلة التهيئة إلى المرحلة النهائية عندما يتم عرضها على المتصفح.

اتبع الأنماط: يصادف المستخدمون معظم الأوقات واجهات مختلفة عن الواجهة الخاصة بك. بعض المواقع التي يصادفها معظم المستخدمين يوميًا هي الفيسبوك و تويتر ومواقع الأخبار و الووردبريس. ربما كنت تعرف مدى نجاح هذه الواجهات لذا يتوجب عليك ألّا تعيد اختراع العجلة. بدلا من ذلك، استعن بتلك المنصات للبحث عن حلول للمشاكل التي تواجهها. فمن الجيد أن تمتلك أنماط مألوفة لواجهة المستخدم.

ابحث في التعليقات: يجب عليك دومًا الاستجابة لاحتياجات المستخدمين. يجب أن تمنح المستخدمين الإرشادات وتفسّر سوء الفهم وتصحح الأخطاء. تأكد من إعلام المستخدمين بأي تغييرات. إبقائهم كذلك سيشعرهم كما لو أنهم جزء من عملية التغيير. في نهاية المطاف، وستكون واجهتك هي ما يريده المستخدمون.

جعل واجهات الإنترنت سهلة التعلم

كلما كان التفاعل أبسط مع واجهة المستخدم، سهل على المستخدم تذكر وظائفها.

وهذا يعني أنك تحتاج إلى تصميم واجهة بطريقة تتيح للمستخدم أن يمتلك عددًا قليلًا من الأمور ليفعلها. وللقيام بذلك، سيتوجب عليك تبسيط المعلومات إلى أجزاء صغيرة قابلة للفهم.

يجب عليك أيضًا مراعاة عرض ميزات الواجهة على الشاشة. لا تقذفها في وجوه المستخدمين، بل فكر في إضافتها إلى مكان ما على الشريط الجانبي، أو في الجزء السفلي من الشاشة لتجنب تشتيت انتباههم.

جعل واجهات الويب بديهية

إن أهم عامل يحدد أداء تطبيق الويب هو واجهة المستخدم. هل لديها تصميم بسيط للوحة التحكم؟

إن لم تكن كذلك، فحاول تبسيطها.

يمكن لواجهة المستخدم أن تظهر أساليب بسيطة لتحقيق النتائج. لا يهم إذا كان لديك برامج قوية، فالناس تتجاهل تصميم لوحة التحكم عديم الفعالية.

ما يهم هو تفاعل المستخدمين مع البرنامج أثناء مساعدتهم على تحقيق هدفهم. ولذلك، فتصميم المواقع الإلكترونية قائم على التركيز على المستخدم أكثر فأكثر.

اجعل قرارات المستخدم بسيطة

كل شيء يبدأ بجعل التصميم بسيطًا قدر الإمكان. لماذا؟ التصاميم المعقدة تشوش المستخدمين وتصعّب عليهم اتخاذ القرار. ما الذي يمكنني النقر عليه؟ أين؟ هل هو الزر الأحمر هنا؟ هل هو الزر الأخضر هناك؟

طبقّ هيكلًا بصريّا. ما هي أهم الأشياء في واجهتك؟ أبرزها لينصب تركيز المستخدمين عليها. يمكنك التلاعب بالحجم والألوان، والطباعة، والمساحة البيضاء، وغيرها.

نمط الخط

ربما كنت تقول "حسنًا، أنا أعرف نمط خطوط رائع". وهذا لا يكفي. فوجود خط جيد في تصميمك يصبح عديم الفائدة إن كنت لا تعرف كيفية استخدامه، أو أين تستخدمه، أو ما هو الخط الذي يمكنك استخدامه إلى جانبه.

وضع خطوط فريدة في كل مكان لن يحميك، إذ كل خط له صفاته الخاصة ويصلح لجمهور معين.

بالإضافة إلى اختيار الخط المناسب لجمهورك، يجب عليك أيضًا التأكد من استخدام حجمه المناسب، لتسليط الضوء على أجزاء معينة من التصميم. يجب أيضًا استخدام الألوان، ولكن كن حذرًا مع مجموعات ألوان معينة.

الخلاصة

التصميم الجيد للواجهة يُشبه الهواء الذي نتنفسه. لا يمكننا أن نرى أو نفكر فيه. ومع ذلك، فهو يلبي احتياجاتنا. إذا كنت قد صادفت سابقًا واجهة المستخدم سيئة، فستقدّر الموقع الذي يملك واجهة مستخدم سهلة.

يجب على التصميم الجيد أن يُشعرك بالثقة دائمًا طالما كنت تركز على مهمتك ويقضي على القلق من أن ارتكابك للخطأ.

يجب أن تكون التطبيقات ومواقع الويب عملية ويجب على المصممين وضع المزيد من الجهد والوقت على سهولة استخدام المنتج.

ترجمة -بتصرف- لمقال Designer’s Guide for Designing Web App Interfaces لصاحبه Iggy

اليوم، تبدأ التجارب عادةً على أروقة الإنترنت قبل نزولها إلى الشارع. وفي بعض الحالات، تنتهي التجربة بمجرد عودتها إلى الويب.

إذا كنت ترسم فراغًا، لا تنظر إلى أكثر من ذلك.

يعرف الزبائن مدى جودة الأكل على الإنترنت من خلال التقييمات و التوصيات. وحتى بعد اختيار المكان المثالي على الإنترنت، يأخذ الزبائن محتوى Yelp معهم - متذكرين أي من مقدمي الخدمة هو الأفضل أو أي الساندويشات تكون "بخبزٍ جيد". بعد ذلك، وبعد انتهاء الوجبة يعود الزبون للتقييم ويتفاعل مع الآخرين. إنّ علاقة الإنترنت - بدون إنترنت (online-offline) ليست محدودة بتطبيقات التقييم. في الواقع، تؤكد أحد أحدث المبادرات الشخصية في InVision على تحويل العلامة التجارية الرقمية خاصتنا إلى تجربة ملموسة - ونحن نشارك الأفكار والرؤى الداخلية مع أي شركة تبحث عن هذا.

أشياء رئيسية لوضعها في الحسبان قبل إحضار علامتك التجارية للحياة

عندما يكون هدفك هو خلق تجربة، سيكون هناك الكثير من المصاعب قبل أن يتم أي شيء بشكل صحيح.

1. تحديد الزمن

إنّ تحديد وقت زمني في البداية يساعد على توضيح إمكانيات كل من له دور. لذلك، يمكن للتجربة أن تتمدد أو تتقلص لتناسب الفترة - أسابيع أو حتى ساعات- لتنافس الأولويات، كما يجب توقع المشاكل.

وعندما تبدأ الكرة بالدوران، تستطيع القيام بقرارات استراتيجية عمّا يجب احتواءه أو تجاهله بناءً على كمية الوقت التي تملكها مقارنةً بالنتائج المتوقعة.

2. وضع مصادر الأفكار وجمع الإلهام الداخلي

تتضمن الخطوة الثانية، العمل الجماعي. في الوقت الذي تقوم به بتحضير تفاصيل التجربة التي تريد إنشاءها، قم بجمع المصادر من فريقك.

عند هذه النقطة، سيكون كل شيء نظريًا - وإن دمج وجهات نظر من مجالات وظيفية متعددة- هي طريقة مؤكدة لتمثيل علامة تجارية كاملة، ليس فقط أفكار منظمي الاحتفالات والأحداث وخبراء التسويق.

كيف نعلم أنّ هذه الخطوة خطوة أساسية؟ لأننا نعلم من واقع خبرتنا أنّ إخراج الأفكار هو تجربة تأتي بعد الدعوة إليها فقط، وأنّ فكرة استخدام تنسيق غداء قابل للتطور أتت من عضوٍ في الفريق. جرى تصميم العشاء الجماعي للتفكير في التصميم حول عدة مواقع واتجاهات.

3. اختر إما الوكالة أو داخل المؤسسة

عندما يكون لديك ولفريقك أفكار قوية وثابتة وخط زمني للعمل عليها، أنشئ نصًّا موجزًا ولوحة مرئية عنها. سيربط مصدر الثقة هذا خبرتك مع المشاركين الآخرين.

ستحتاج هنا إلى رسم خط. هل ستُنشِئ كل شي داخل مؤسستك، أم ستوكل أعمال التصميم إلى وكالة مختصة؟

إنّ القيام بهذا العمل داخليًا يعني في حالتنا، أننا سنتحكم بشكل أكبر بكل جماليات التصميم. كما أننا أردنا أن تكون التجربة مؤمنة بشكلٍ كبير. كل وحدة صورية تكون ذات أهمية كبيرة في عالم التصميم الرقمي- كما هي اللمسات الفنية في كل شخص.

4. قم باتخاذ القرارات المهمة المتعلقة بالعلامة التجارية

في الكثير من الأوقات، الحل الأول هو طباعة لافتة كبيرة أو ملصق جداري مع اسم الفعالية وشعار الشركة. يغيِّر ذلك كيفية استقبال الزوار للفعالية وما قمنا بخلقه - خاصة إذا لم تترجم علامتك الرقمية إلى عرض تجاري أو وليمة. إن قرارات العلامة التجارية التي تتخذها هي المفتاح لتأسيس الإحساس بتجربتك. وقبل أن تبدأ بوضع الأشياء مع بعضها، قرِّر عدد العناصر التجارية الخارجية التي ستكون جزءًا من الخليط.

هل ستستعمل ألوان الشركة؟ هل سيكون شعار الشركة موجوداً على كل عناصر التصميم؟ وهل هدفك هو التعريف عن علامتك التجارية أم أنّ هناك هدف آخر؟

هناك فرق كبير بين وضع علامتك التجارية على رأس البيئة الموجودة، والتي تعمل بشكل طبيعي.

تصميم تجربة دون العلامة التجارية العلنية

عندما يحين الوقت لإظهار شخصية شركتك، ركز على السبب وليس الكيفية. ستتمكن من التحكم في شعور الحاضرين من خلال تأطير كل قرار من قرارات العلامة التجارية الخاصة بك حول الأهداف، وتوليد العملاء المتوقعين في سوقٍ جديدٍ، والالتقاء بالعملاء وإظهار التقدير للمجتمع.

قالت ميكايلا أليكساندر، مديرة الفعاليات التسويقية التي قادت حفل العشاء الجماعي للأفكار في التصميم:

اقتباس

إنّ تصميم العلامات التجارية أكثر أهمية من وضع شعار على شيءٍ ما.

في هذا السيناريو، كان "السبب" هو إعطاء رواد التصميم بيئة ملهمة للإبداع لمناقشة تحديات هذا المجال والتفكير في التصميم دون ضغطٍ من حضورٍ إعلامي أو غيره. كان شعار أسبوع التصميم في سان فرانسيسكو ، "اسأل عن كل شيء".

مع وضع كل هذه الأشياء في الحسبان، جعلت InVision كل تفاصيل الأمسية مفاجئة بطريقةٍ أو بأخرى من خلال تصميمها. باستثناء عدد قليل من التفاصيل الصغيرة، حيث أنّ شعار الشركة لم يكن موجودًا، وبالتأكيد لم يكن نقطة الارتكاز.

باستخدام السرد الذي استخدمناه في مراحل التخطيط وبالتزامن مع موضوع أسبوع التصميم، اعتمدنا في كل قرار للتصميم، على تجربتنا المستهدفة.

اقتباس

مع كل قرار تتخذه، فكر في القصة التي تريد سردها.

عند القيام بذلك لعلامتك التجارية الخاصة، فكر في الطريقة التي تجسد بها تجربتك في شعار الشركة أو مهمتها. يعد هذا بمثابة علامتك التجارية، دون الحاجة لمئات الشعارات.

ولإثارة الفكرة القائلة بأن قادة القرار سيجتمعون في بيئة نخبوية ومريحة، أضفنا العديد من اللمسات الشخصية.

ومن بين الأشياء الأخرى التي قمنا بها لتجسيد علامتنا التجارية، ما يلي:

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

ركز على نقاط الاتصال هذه لتنشيط علامتك التجارية

مع وضع جميع الاعتبارات الأخرى جانبًا، وجدنا أنّ هذه المناطق هي الأكثر أهميةً لإنشاء تجربة خارج الشبكة العنكبوتية. تُرسم كل نقطة اتصال من تجاربنا الخاصة، ولكن يمكن تكييفها بسهولة للعمل مع علامتك التجارية.

اختر البيئة التي تدعم سردك بشكل أفضل

عندما يكون هدفك هو ربط الناس، فإن البيئة التي تضعهم فيها مهمة بقدر أهمية المحادثات.

اقترب من ذلك مثل مصمم صفحات الإنترنت الذي يأخذ في الحسبان المحددات الرقمية للواجهة وكيف يؤثر ذلك على رحلة المستخدم عبر موقع الإنترنت أو التطبيق. ولكن بدلًا من رحلة على الشاشة، فأنت تقوم بتصميم رحلة فعلية.

ولتعيين نغمة هذه التجربة وربطها بالخط الزمني والتنسيق، استخدمنا صفحةnVite . عكست اللغة تطور الفعالية، ونقلت الجدول الزمني، وألمحت إلى الجمالية العامة.

ونظرًا لأننا أردنا تسهيل الاتصالات الأصلية والحفاظ على قدرة تخمين الحضور، فإن العشاء الرائع في أماكن متعددة منح الضيوف رحلةُ واضحةً، إذ أُلهمت كل أمسية من اقتباس مختلف عن التصميم من قادة الصناعة المختلفين.

تحديد الأماكن والبائعين اللازمين لإكمال التجربة

على غرار اختيار البيئة المناسبة، يتم اختيار البائعين المناسبين - وأماكن أخرى، إذا لزم الأمر – للإحاطة بكل الجوانب. لا يتم إنشاء البيئة دائمًا في مساحة واحدة فقط.

ولجعل الحركة جزءًا حقيقيًا من التجربة، اخترنا 3 أماكن تكميلية لترسيخ كل مرحلة. في كل مكان، تم تعريف الحضور على سؤالٍ مختلف حول التصميم أو تحدياته.

عندما يتعلق الأمر بالبائعين، اخترنا مقدمي خدمات محترمين تتشابه أساليبهم مع الحِرَف بالطريقة التي تتبعها شركات تقديم الأفكار في التصميم. ونتيجةً لذلك، ساعدت كل التفاصيل في تشكيل التجربة وتعزيز الأفكار ذاتها التي استخدمناها لبناء الفعالية.

تصور العناصر المرئية وكيف ستقوم بإنشائها

للحصول على جوهر إنشاء تجربة قائمة بذاتها - وليس مجرد امتداد لعلامة تجارية في علامة تجارية أخرى متوازنة مع الهدف.

لذلك، أرَدتُ أن أبتعد عن الخيارات المعتادة. وباعتباري مسوقةً، هناك دافع لجعل العلامة التجارية ذات صدىً عالٍ قدر الإمكان من خلال لافتات وشعارات قابلة للسحب عند كل منعطف. بدلًا من ذلك، أردت أن أرتقي وأدمج ذلك في التجربة - ميكايلا ألكساندر- ، مديرة فعاليات التسويق.

وهناك واحدة من أكثر الطرق إبداعًا لإكمال علامتك التجارية، وهي استخراج العناصر المرئية التي تساعد في التعرف عليها على الإنترنت، ثم تطبيقها على المساحة المادية.

على سبيل المثال، عملنا مع البائعين لإضافة نقاط من اللون الوردي لـ InVision إلى القائمة دون الابتعاد عن نظام الألوان العام. قد تتعرض لمحددات بصرية لكن هذا هو المكان الذي تلعب فيه الحلول الإبداعية.

يختلف تصميم الويب عن الطباعة. في بعض الحالات، قد تؤدي هذه الاختلافات إلى إلقاء نظرة خاطفة على خططك نظرًا لارتباطها بالجمالية العامة.

وقال كونور مورفي، مصمم InVision الذي أنشأ العشاء الجماعي للتفكير في التصميم:

اقتباس

إنّ أحد القيود الرئيسية لهذا هو قيود الطابعة.

على سبيل المثال، كانت لدينا مواد سوداء وذهبية لطيفة مع خطة لجعلها وكأنها مختومة. لقد أضاف عنصرًا فاخرًا، لكنه لم يكن قابلاً للتنفيذ في ذلك الوقت. من أجل حل المشكلة، نظرت إلى درجات أخرى من الذهبي واخترت واحدة أعطت تأثيرًا مماثلًا.

ترجمة المكونات الرقمية إلى التفاصيل المادية

من المحتمل أنك قد اعتدت على العمل مع العناصر الرقمية لعلامتك التجارية. تحتوي الأدلة على التفاصيل، ويوفر كل مشروع نظرة ثاقبة لتحديات الواجهة وأفضل الممارسات التي تظهر على الشاشة.

لسوء الحظ، فإن نقل كل ذلك من الشاشة إلى المشهد ليس سهلًا كما يبدو.

الألوان

يناسب اللون الأسود والذهبي العشاء الجماعي للتفكير في التصميم بشكل أفضل، لذلك لم نواجه التحدي المتمثل في مطابقة نقاط InVision الوردية المعتادة.

إذا اخترت المزيد من العلامات التجارية التقليدية، ستكون الألوان أمرًا يجب مراعاته بالتأكيد. إن ترجمة الشيفرات الست عشرية إلى PMS لا تسفر دائمًا عن تطابق تام، لذلك يجب عليك اختيار بديل يحافظ على العلامة التجارية.

قرارات أسلوب المحتوى

تم دمج الاقتباسات من قادة التصميم في الصورة لإعطاء أفكار أكبر عن التصميم، ولكن تم طباعتها — على عكس معظم ميزات المحتوى من InVision. يختلف التصميم للطباعة أو لأي مواد مادية عن تصميم شيء ما على الشاشة.

من خلال الشاشة، يمكنك رؤية الشكل الذي سيبدو عليه التصميم تمامًا - مع كل الألوان الصحيحة والخطوط المناسبة وجودة الصورة وما إلى ذلك. أما في الطباعة، يكون الأمر أصعب قليلًا. لا تظهر الألوان عادة على الورق كما تظهر على الشاشة، وقد تتغير الخطوط عند الطباعة، وتصبح القراءة أكثر صعوبة. - كونور ميرفي ، مصمم-.

تؤثر الفروق الدقيقة في الطباعة أيضًا على المكونات الأخرى للتصميم. كانت إحدى نقاط الأمسية الوحيدة التي تحمل علامة تجارية هي الشاشة مع شعار InVision والكلمات "Question Everything". ومع ذلك، فقد تم عرض هذا نهارًا في مساحة كبيرة إلى حدٍ ما، لذلك لم يكن نظام الألوان أو الخط ذاته بهذه السهولة.

كان العنصر الثاني الذي قمنا بتضمينه هو غلاف الحاسوب المحمول المخصص لكل ضيف، منقوشًا عليه InVision. ومع ذلك، فقد بدا التصميم العلوي المصغر من علامة InVision مختلفًا تمامًا ومختومًا في الجلد في صفحة المنتج الرئيسية.

في النهاية، قررنا الابتعاد عن الشعار المعتاد كما قررنا استخدام جميع الحروف الكبيرة.

الأحجام والنسب

يجب أن يُؤخذ حجم الكتابة في الحسبان عندما يتعلق الأمر بالمواد المادية. هل سيحتاج الناس إلى قراءة رسالة من بعيد أم أنها ستكون أمامهم مباشرة؟ كيف يمكن أن تكون الرسالة مثيرة للاهتمام دون أن يصبح بسيطًا أو يصعب قراءته؟ وأخيرًا، هل يلزم دمج الخطوط للطباعة؟

دمج طرق أصيلة للسعادة

إنّ تصميم تجربة برعاية عالية كانت طريقتنا في مفاجأة وإسعاد الضيوف. يتماشى اختيار الأشياء من أجلهم فقط مع فكرة الاحترام وتكريم الآراء المختلفة من قادة التصميم، وجعل الأمسية مرحبة بـ InVision كمضيف – ليست نقطة محورية.

قال مورفي:

اقتباس

هناك أشياء يمكنك القيام بها لإسعاد الناس وجعلهم يتعاملون مع المواد التي قد لا تستطيعون القيام بها على الشاشة.

هناك طرق لإسعاد الناس وإشراكهم والتي قد لا تكون ممكنة على الشاشة.

مفاجأة الضيوف بشكل جيد مع موضوع السؤال عن كل شيء. في وقتٍ مبكر، اقترح أحد أعضاء الفريق أن نستخدم أغطية الطاولات لعمل تحدي افتراض ما هو صالح للأكل. وبعد التعاون مع متعهد الطعام، قررنا أن نجعل السلطات جزءًا من تصميم الأزهار الفعلي.

كيف تريد أن ينخرط الناس ويتواصلوا مع شيء تنتجه علامتك التجارية - خاصة عندما تكون ملموسة - هي فرصة كبيرة لترك انطباع دائم.

وأحيانًا، تتكلم أكثر عندما لا تشوش الرسالة. الذهن المنير والحاد يأخذك بعيدًا، والتواصل مع السرد والهدف يمكن أن يأخذك أبعد من ذلك.

أكبر فوز لديك هو جعل الناس يتواصلون

إنّ التجربة بأكملها مهمة عندما تقوم بترجمة علامتك التجارية الرقمية إلى العالم الواقعي. يجب التفكير في كل نقطة اتصال من منظور العلامة التجارية والتصميم — وقد تقود الاختلافات في التصميم اللعبة النهائية.

إذا كنت مصممًا، فهذا يعني التفكير في التفاصيل الصغيرة وفي تجربة المستخدم في سياق الغرفة أو المساحة المادية، وضبط الأنماط الرقمية لتكملة العناصر الخارجة عن سيطرتك.

من منظور التسويق والعلامة التجارية، يعني هذا تجربة "لماذا" الخاصة بك بما تنتجه. يجب فحص كل شيء بدءًا من قوائم الكوكتيل وحتى رسائل الترحيب من خلال عين الشخص وليس الاحتمالات.

إذا تم ذلك مع الاهتمام بالتفاصيل والهدف، فإنّ إنشاء تجربة - بدلاً من مجرد فعالية آخرى - يمكن أن يلبي حاجة يتردد صداها مع الناس لعدة أشهر.

ترجمة- وبتصرف -للمقال How to transform your digital brand into a real world experience لصاحبه Kaysie Garza

عندما تصمم شعارًا لمشروعك على الإنترنت، لمدونتك أو موقعك الإلكتروني، فإنك لا شكّ تريده يبدو احترافيًا، وجذابًا، ومميزًا. ولإنجاز هذا العمل الفذ، فإنّ فهم العملية الصحيحة لتصميم الشعار تعد الفيصل، ولكن لا داعي للقلق، فقد أتيت إلى المكان الصحيح.

ولإنشاء شعار جذاب لا مثيل له من جميع النواحي، اتبع هذه الخطوات فقط:

اختر الألوان التي تعكس شخصية علامتك التجارية

عندما يتعلق الأمر بالألوان، فقد تفضِّل ألوانًا على أخرى بشكل شخصي. ولكن لعمل علامة تجارية فعّالة، يجب أن تضع ما تفضله على جنب وتختار الألوان التي تناسب علامتك. صدق أو لا تصدق، ألوان الشعار تخبر الكثير عن الشركة، إذ أن 93٪ من الناس ينظرون إلى المظهر الخارجي عند الشراء. إذًا السؤال هو: كيف تختار الألوان الصحيحة؟!

إذا كنت تعرف ما هي شخصية علامتك التجارية، لن يكون اختيار الألوان المناسبة أمرًا صعبًا. مثلاً : إذا أردت أن ترمز للحب، أو العواطف أو الحماس، فإن اللون الأحمر يعد اختيارًا مثاليًا للشعار. وإذا أردت أن تنشئ علامة تجارية عن الملكية، أو التفرد أو الغموض، فإنّ اختيارك للون البنفسجي لن يكون خاطئًا.

كل لون مرتبط بنوع محدد من المشاعر. وبذلك، إذا كان لديك فكرة واضحة عن المشاعر التي تريد إثارتها في زبائنك، فستستطيع اختيار الألوان المناسبة بسهولة.

اختر أنواع الخطوط التي تعكس شخصية علامتك التجارية

وكما يجب اختيار الألوان الصحيحة لشعارك، يجب أن تختار نمط الخط الذي يناسبها أيضًا. واجعل ما يلي في حسبانك عند اختيار أنواع الخطوط:

• تجنب الخطوط المعتادة التي تُستخدَم في الصحف، والمجلات وحتى في معظم المواقع الإلكترونية، وابحث عن خطوط فريدة وعريضة بدلًا من ذلك.
• تأكد أن الخطوط تصلح لكل الأزمنة، فمن المهم جدًا أن تكون ذات صلة وآخذة للنظر اليوم وفي المستقبل أيضًا.
• يجب أن يكون هناك مسافات مناسبة بين الحروف.

قد ترغب أيضًا أن تبحث وتجد أنواع مختلفة من الأنماط المتاحة في السوق للعثور على الخطوط المستخدمة في الشعارات التي تفضلها.

اختر نوع الشعار

يمكن تقسيم كل أنواع الشعارات إلى الفئات الرئيسية التالية:

• الشعارات الحرفية: هي الشعارات التي تعتمد على حرف أو الأحرف الاولى من كلمات اسم الشركة، حيث يتم عرضها بطريقة تيبوجرافية تشبه الشعار الخطّي لكنّها مختصرة. يُستخدم هذا النوع من الشعارات في الشركات التي يصعب نطق اسمها، أو ذات الاسم الطويل. تتميز هذه النوعية من الشعارات بسهولة الحفظ في ذهن المتلقي مثل : MBC ، LBC CNN ، BBC وغيرها.
• الشعارات النصّية : وهي شعارات قائمة على النصوص والخطوط، حيث تكون هي العلامة التجارية للشركة. قد تكون جيدة إذا ما كانت الشركة تحمل اسمًا مميزًا مثل: العربية، سوق.كوم، و Samsung وغيرها.
• الشعارات الأيقونية أو الرمزية: تعد من أفضل الشعارات الموجودة اليوم، وتستخدم أيقونات مبتكرة لتمثيل المشروع بدلًا من اسم المشروع نفسه. مثال ذلك شعارات Nike، و Shell، و Apple وغيرها.
• الشعارات التجريدية: تقوم على أنماط وتصاميم تجريدية بدلًا من الأيقونات التي يتم التعرف عليها بسهولة مثل: فودافون و Pepsi حيث يستخدم دائرة مقسمة مثالًا جيدًا على هذا النوع. أضف إلى ذلك شعار Mitsubishi الذي يستخدم ثلاث جواهر متسقة على شكل مثلث.
• الشعار المزيج – رمزي ونصي – رمزي وحرفي: أغلب الشعارات التجارية تمزج بين الرموز والنصوص، لكي تعطي المرونة في استخدام أحدهما أو كلاهما في التطبيقات المختلفة، لذا فإن الشعارات المزيجة ذات الطابع التصميمي الجيّد هي التي تبدو جيدة سواء تم مزج عناصر الشعار (النص والرمز) مع بعضها أو تم فصلها. مثل: زين للاتصالات، و بنك البركة، و STC وغيرها.
• شعارات التمائم: كما تتوقع فإنّ هذا النوع يستخدم الرموز ( أي تمائم ) لتمثيل العلامة التجارية. ومن أفضل الأمثلة على هذا النوع من الشعارات: Pillsbury ، Wendy's ، Hostgator وغيرها.
• شعار أيقونة نصّي: هذا النوع من الشعارات أيضاً منتشر في البلاد العربية حيث يكون شعار أيقونة لكن الأيقونة هي اسم العلامة التجارية بالعربي. مثال ذلك شعار الجزيرة، إذ هذا النوع من الشعارات مناسب للشركات التي تحمل في طيات علامتها أصول أو جذور عربية أو إسلامية وهو حل ممتاز للكثير من الشركات العربية التي تتطلع للانتشار العالمي. فالشعار يكون عربي/انكليزي وذلك بكون العربي هو الأيقونة والانكليزي يشرح العربي تحته أو حوله. قناة ابو ظبي، وطيران الإمارات خير أمثلة على ذلك أيضًا.

حدد النمط المناسب

حتى لو اخترت نوع خط الشعار والألوان بالفعل، فإنّ هناك الكثير من المرونة التي تملكها للنمط والتنسيق. مثلًا، يمكنك الذهاب باتجاه شكل بسيط جدًا باستخدام نوع خط مميز والذي يشكل معظم الشعار وحيدًا، أو يمكنك إنشاء شعار عصري باستخدام صيحات جديدة مثل قص الأحرف، واستخدام التقنيات والأشكال بطريقة إبداعية وغيرها. وهذا يعني أنه مهما تفعل، تأكد من أنّ الشعار يناسب أهداف العلامة التجارية ويوصل الرسالة بشكل بسيط.

أنشئ نماذجًا مختلفة من شعارك

إذا كنت ترغب بإنشاء شعار مثالي لعلامتك التجارية، لا يجب عليك التركيز على إنشاء واحد فقط. حاول تجربة عدّة أفكار وتصاميم باستخدام النمط الرئيسي، الخطوط والألوان.

لن تكون بعض شعاراتك الأولى غالبًا جذابة أو على مستوًى عالٍ، ولكن مع كل عملية مراجعة، ستلاحظ وجود تحسن وتغيير إلى الأفضل. ومن خلال تحسين التصميم عدة مرات حتى ترضى عنه 100٪، يمكنك تحقيق المثالية التي تستحقها. من السهل جدًا تجربة عناصر تصميم مختلفة بما فيها الخطوط، الأيقونات وغيرها إذا كنت تستخدم برمجية لتصميم الشعارات، وهذا لأنك تستطيع رؤية التغييرات أمام عينيك في الوقت نفسه. وبما أن أجور صانعي الشعارات رخيصة بعض الشيء، فإنه يُوصَى بتجربة أحدهم إلا إذا كنت تملك سببًا وجيهًا لعدم فعل ذلك.

استشر ثم حسّن ثم انشر

وحالما يصبح تصميمك النهائي جاهزًا، قد ترغب بالحصول على آراء من بعض الناس ثم أجري بعض التعديلات عليه إذا تطلّب الأمر ذلك. بعد هذا، يمكنك اعتماد التصميم النهائي والبدء في استخدامه في الأماكن ذات الصلة مثل: الموقع الإلكتروني، وبطاقة الأعمال، وصفحات التواصل الاجتماعي وغيرها.

الخلاصة

إنّ تصميم الشعارات يُعدُّ فنّاً. ولكن لا يجب أن تكون بالضرورة فنانًا موهوبًا لإنشاء تصميم جيد. يمكنك بالأدوات المناسبة والمعرفة الأساسية إنشاء شعار ذي جودة عالية ببساطة. حظًا موفقًا!

ترجمة -وبتصرف- للمقال Logo Designing – A Beginner’s Step by Step Guide لصاحبه

تعد تطبيقات ويب التقدمية الجيل القادم لتقنيات الويب القائمة على الـ JavaScript. وفي الأساس، هي تطبيقات ويب قائمة على تقنيات الويب المعيارية، ولكن مع إضافة أحدث ميزات الـ JavaScript جاعلةً إيّاها تشعر وتعمل مثل تطبيقات آندرويد والـ iOS. شركات مثل مجلة فوربيس ، و تويتر، و جوميا (شركة التجارة الإلكترونية الإفريقية الرائدة)، تأخذ زمام المبادرة مع تطوير تطبيقات الويب التقدمية.

ويغيّر دمج الهواتف المحمولة والويب مسار العمل في هذا المجال، ويمكنه قيادة نتائج العمل المذهلة - جاعلًا من هذا أمرًا لا يفوّت لتجار التجزئة.

سنغطي ما يلي:

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

تطبيقات الويب التقدمية مقابل المواقع الإلكترونية العادية

هل تعدّ تطبيقات الويب التقدميّة تطبيقات أم مواقع إلكترونية؟ حسنًا، إنها من الإثنين نوعًا ما.

يعد بناء تطبيق ويب تقدمية مماثلًا لبناء تطبيق ويب من منظور المصمم، بينما يمكن أن يكون تطبيقًا عاديًا من منظور المستخدم.

تعد طريقة توزيع تطبيقات الويب التقدمية، أحد أهم أوجه الاختلاف. ولأنها تعد تقنيًا تطبيقات ويب، لا يوجد ضرورة للذهاب إلى متجر التطبيقات، حيث يقوم المستخدمون بالنقر على إضافتها إلى الشاشة الرئيسية في متصفح الإنترنت خاصتهم. 

هل تلاحظ زر "أضف إلى الشاشة الرئيسية" (Add to home screen” button)؟ هذا يشير إلى أنك تنظر إلى تطبيق ويب تقدمية بشكل مؤكّد.

وأحد فوائد هذه التطبيقات مقابل تطبيقات الهاتف المحمول العادية، هو أنّها تستهلك بيانات أقل بكثير. وبينما تبقى التطبيقات العادية في هاتف المستخدم، يتم الوصول إلى تطبيقات الويب التقدمية عند زيارة الموقع الإلكتروني - وقت استخدام البيانات.

بناء فريق تطبيقات ويب تقدمية جاهز

قبل أن تبدأ بتطوير تطبيق الويب التقدمية خاصتك، قم بتعليم فريقك عن ماهية هذه التطبيقات أولًا: مشروعًا هجينًا يلائم توقعات المستخدم مع متطلبات خلفية تقنية.

يجب أن يبدأ المشروع بهذين السؤالين:

• كم عدد تطبيقات الويب التقدمية التي أحتاجها؟ دعنا نستخدم فيسبوك كمثال؛ فهو يعد منتَجًا واحدًا ولكنه يملك 60 تطبيقًا ليست من تطبيقات الويب التقدمية: واحد لكل مهمة رئيسية أو مجموعة مستخدم.

هل تحتاج لعدد تطبيقات مثل فيسبوك؟ تستطيع أنت فقط الإجابة عن هذا السؤال.

قد تجد من المنطقي في بعض الأحيان، أن تقسم موقعك الإلكتروني إلى نطاقات فرعية مع تطبيق ويب تقدمي لكل نطاق، مثل مجلات المنتج، والتجارة الإلكترونية، ورعاية العملاء وغيرها.

في حين أنه يمكن لتطبيق ويب تقدمي مركزي واحد أن يجدي نفعًا في العديد من الأعمال. يجب أن تفكر جيدًا فيما يتوقعه زبائنك منك، وأعطِ الفرصة لهذه التوقعات أن تخبرك بكيفية سير عملك.

• هل أحتاج إلى تدفق مخصص لتجربة المستخدم أم نسخة من موقعي الإلكتروني تكفي؟ يجب أن يكمل تطبيق الويب التقدمي خاصتك موقع الإلكتروني وأن يكون مناسبًا له، بحيث لا يختلف التصميم وتجربة المستخدم بشكل كبير عن إصدار الحواسيب المكتبية.

ولكن هناك بعض المزايا المفيدة لتطبيقات الويب التقدمية، مثل إمكانية استخدامها بدون إنترنت وإرسال الإشعارات، وبالتالي تستطيع الاستفادة منها عند البدء في التصميم.

مزايا تطبيقات الويب التقدمية التي لا تتطلب اتصال في الإنترنت

يمكنك تشغيل تطبيق الويب التقدمي خاصتك دون الاتصال بالإنترنت، ولكن هذا يعني أنك بحاجة إلى توخي الحذر عند تطبيق التجارة الإلكترونية أو المواقع الإلكترونية الخاصة بالمعاملات، بل وأكثر من ذلك مع العناصر الديناميكية مثل توفر المنتج أو الترويج.

كل مشكلة لها حل، بالطبع. لنلقي نظرة على إحدى مشاكل التجارة الإلكترونية الشائعة: عندما يكون المستخدم غير متصلٍ بالإنترنت، لا يمكن للنظام تحديث أشياء مثل التوفر؛ فقد يقوم المستخدم، بعد مرور بعض الوقت دون اتصال بالإنترنت، بمحاولة طلب مواد غير موجودة في المخزون.

يجب أن يكمل تطبيق الويب التقدمي خاصتك موقعك الإلكتروني وأن يكون ملائمًا له

الحل الآن هو: السماح للمستخدمين بتصفح تطبيق التجارة الإلكترونية الخاص بك خلال الـ 30 دقيقة الأولى دون اتصال بالإنترنت وإعلامهم بإمكانية عدم توفر منتج ما. لا يزال بإمكانك مزامنة الطلبات في ما بعد، وفي أسوأ الحالات، اطلب منهم تعديل طلباتهم.

استخدم نسخة هنا من شأنها أن تمنع شعور المستخدمين بخيبة الأمل عندما يتم بيع تلك القبعة الأرجوانية التي كانوا يتطلعون لشرائها.

هناك أيضًا بعض الحلول الأكثر تعقيدًا والتي تعتمد على الذكاء الاصطناعي لتقدير عدد مرات شراء أحد المنتجات وما إذا كان لا يزال متوفرًا.

يعد التحدي الأكبر للتجارة الإلكترونية هو ما يحدث على شاشة الدفع. تتجاوز معدلات التخلي عن عربات التسوق 85٪. ومع ذلك، فقد تم حل هذه المشكلة جزئيًا، عندما قدّمت جوجل واجهة برمجة تطبيقات طلب الدفع — مما أدى إلى إلغاء نماذج الخروج والسماح للتجار بطلب وقبول الدفع من خلال مكالمة واحدة في واجهة برمجة التطبيقات، وتبسيط عملية الخروج وخفض معدلات التخلي هذه.

مميزات تطبيقات الويب التقدمية مقابل المواقع الإلكترونية

عندما يتم تشغيل تطبيق الويب التقدمي في وضع ملء الشاشة، لن يكون هناك وظائف متصفح تساعد المستخدم. يبدو هذا جيدًا ولكن أيضا يشكل مخاطر على تجربة المستخدم.

لا يوجد ويب أمان بدون متصفح: لا يوجد شريط عناوين، أو مؤشرات تقدم، أو أيقونة SSL أو أزرار التنقل. إنّ إضافة زر الرجوع أو تصميم شريط التنقل الخاص بك هو الحل هنا: يجعل نسخ إشارات التنقل المألوفة للمتصفح تطبيق الويب التقدمي أسهل لفهم المستخدم واستخدامه.

قوائم وإيماءات يجب أن تكون على علم بها

يتوقع المستخدمون أن يتصرف تطبيق الويب التقدمي خاصتك كتطبيق تقليدي؛ على سبيل المثال، عندما يعودون إلى صفحة سابقة، يجب أن يبقى مكان المحتوى أو القوائم الخاصة بك كما هو.

عندما يتم تشغيل تطبيق الويب التقدمي في وضع ملء الشاشة، لن يكون هناك وظائف متصفح تساعد المستخدم. يبدو هذا جيدًا ولكن أيضا يشكل مخاطر على تجربة المستخدم."

ملاحظة حول الأماكن التي تختلف فيها تطبيقات الويب التقدمية عن التطبيقات: انتبه لتفاعلات الاتصال العالية - تلك التي تتجاوز الأبعاد الثنائية، مع التعرف على عدد الأصابع المستخدمة أو كيف. من الصعب كتابة الكود بشكل جيد، والتنفيذ السيئ يمكن أن يفسد تجربة المستخدم.

لا يجب أن تكون الإيماءات هي الطريقة الوحيدة للتنقل في تطبيقك. إذا كنت بحاجة إلى سبب آخر لتضمين شريط تنقل مخصص، فاعتبر أنّ هذا سبب آخر.

أخطاء شائعة في تطوير تطبيقات الويب التقدمية

إذا كان لديك ميزات تعمل باللمس، فيجب أن تعمل بنفس الطريقة التي تعمل بها في التطبيقات العادية. مثلًا، تقدم المناطق القابلة للنقر ملاحظات عن طريق اللمس، دون ترك المستخدم يتساءل عما إذا كان قد تم التعرف على النقرة.

عندما يتعلق الأمر بالتمرير، اعتبر نفسك سمكة في فلم Finding Nemo. فقط استمر واستمر في التمرير، سواء تم لمس عنصر أم لا. وأفضل ما قيل في هذا من قِبَل المطورTuro Engineering ، Esaú Suárez Ramos:

كل مطور قام بالتعامل مع العناصر العائمة القابلة للتمرير في نظام iOS سيوافق على الحقيقة التالية: هناك علاقة مباشرة بين التمرير في iOS والصداع.

تتعمق جوجل في هذا في دليل تطوير تطبيقات الويب التقدمية لنظام آندرويد. لا يجب أن تتفاعل العناصر عند التمرير؛ يعد هذا خطأً شائعًا في المواقع الإلكترونية للهواتف المحمولة وواحد من أكثرها إزعاجًا.

استخدام مزايا تطبيقات الويب التقدمية لصالحك

كل مطور قام بالتعامل مع العناصر العائمة القابلة للتمرير في نظام iOS سيوافق على الحقيقة التالية: هناك علاقة مباشرة بين التمرير في iOS والصداع. ESAÚ SUÁREZ RAMOS

وعندما يتعلق الأمر بالتسويق، تمتلك تطبيقات الويب التقدمية مجموعة مختلفة قليلاً من الميزات التي يمكنك الاستفادة منها.

قابلية الربط

على عكس التطبيقات العادية، يمكن أن يكون لأي صفحة أو شاشة على تطبيق الويب التقدمي رابط مباشر قابل للمشاركة.

قابلية البحث

يمكن العثور بسهولة على المحتوى في تطبيقات الويب التقدمية بواسطة محركات البحث ويمكن تعديله وفقًا لفهرس جوجل للهواتف المحمولة الأول، مما يوفر فرصة لطيفة للتطبيقات الأصلية التي تركز على المحتوى.

إرسال الإشعارات

تتيح الإشعارات حصول المستخدمين على تحديثات موقوتة من المواقع التي يحبونها، مما يسمح لك بإعادة إشراك المستخدمين بفعالية مع المحتوى المخصص.

التحميل: المفهوم الأولي

تعرض التطبيقات غالبًا محتوىً أفضل من المواقع الإلكترونية المعتادة، باستخدام الهياكل العظمية للكشف عن المواضع قبل أن يتم تحميلها بالكامل. وباستخدام تطبيق الويب التقدمي خاصتك، يمكنك أيضًا استخدام محتوىً بديل أثناء التنزيل، بما في ذلك الصور ذات الدقة المنخفضة بدلًا من الإصدارات كاملة الحجم.

تحقق من هذه الأسطر عندما تقترب النصوص من الصور. هذا ما نسميه النص الأولي.

أخطاء شائعة لتتجنبها

قوائم المنتجات

عندما يكون نظامك غير متصل بالإنترنت، يمكن أن يُظهر بيانات لم تعد متوفرة. تأكد من أن هذا الاحتمال واضح للمستخدمين.

خطوط وتصاميم مخصصة

من الجيد استخدام خطوط الجهاز المعيارية لجعل تصميم تطبيق الويب التقدمي مألوفًا أكثر. إذا كنت حقًا بحاجة إلى ذلك، فحاول استخدام الصور أو الصور متغيرة الحجم بدلاً من الخطوط المخصصة.

تصميم لمستخدم واحد فقط

منذ أن أصبحت جوجل رائدة في مجال التطبيقات الشبكية التقدمية، أصبح تصميم المواد هو الخيار البديهي لبعض مصممي تطبيقات الويب التقدمية، ولكنها أصبحت أكثر وأكثر شعبية على الأنظمة الأخرى أيضًا.

تأكد عند التصميم من إلقاء نظرة على عملك من منظور مختلف المستخدمين. يجب أن يشمل التصميم عناصر من أنظمة مختلفة، بحيث يمكن لجميع المستخدمين التنقل بشكل مريح. 

تحد جيد

توفر تطبيقات الويب التقدمية فرصًا جديدة لتجار التجزئة وتحديات جديدة للمصممين.

تصمم التطبيقات العادية خصيصًا لاستيعاب أنظمة مختلفة (iOS و Android و Windows)، على عكس تطبيقات الويب التقدمية القائمة على الويب. ولكن إذا وضعت نصائح التصميم والتفاصيل هذه في الحسبان، فهناك عالمٌ من الفرص لكل من براعة التصميم ونجاح الأعمال.

إذا رغبت بالبدء في تصميم تطبيق ويب تقدمي، ننصح بالبدء مع المصادر الخارجية أدناه.

• تصميم تطبيق ويب تقدمي للمستقبل
• تصميم تطبيق ويب تقدمي مستجيب
• طرق للتأكد من الحصول على تجربة مستخدم عظيمة لـ 5 تطبيقات ويب تقدمية
• تقديم طلب دفع واجهة برمجة التطبيقات
• عمل تصاميم إبداعية لتطبيقات الويب التقدمية يمكنك أيضًا النظر في مصدر واجهة متجر التجارة الإلكترونية المفتوح خاصتنا لتطبيقات الويب التقدمية.

ترجمةـ وبتصرف ـ للمقال What’s a progressive web app, and why should designers care?‎ لصاحبيه STANISŁAW ŚWIĄTKIEWICZ  و TOM KARWATKA

يمكن أنْ يكون تطوير موقع ويب بدون الأدوات المناسبة مدعاة للكثير من الإحباط. ستجد أحيانًا أنّك تعمل على برنامج متقدّم جدًّا بالنسبة لمستواك، أو يمكن أن تكون بحاجة للانتقال إلى برنامج موجّه للمحترفين. يتعلّق الأمر بمستوى قدراتك بوصفك مصمّم مواقع، إلّا أنّ برامج التصميم للويب هي - مجملًا - نفسُها سواءٌ كنت مبتدئًا أو مستخدمًا متقدّمًا.

الفرقُ الوحيد هو أنّك قد لا تستخدم جميع الميزات المتوفّرة في أداة معيّنة إنْ كنت مستخدمًا مبتدئًا أو بخبرة متوسّطة. تحتاج لاستكشاف ما يستخدمه المحترفون ومتابعة دورات وقراءة مقالات لمعرفة الطريقة التي تجعل تصميماتك أفضل ما يمكن أن تصل إليه.

لذا، سنلخّص في هذا المقال بعضًا من الأدوات وبرامج التصميم التي تحتاجها أكثر من غيرها، ونشرح ما الذي يُستخدَم فيه كلّ واحد منها خلال عمليّة التطوير.

ووردبريس

ووردبريس هو نظام إدارة محتوى وتدوين بلغت شهرته ومرونته حدًّا جعل ثُلث مواقع الويب الموجودة تستخدمه.

تمكن استضافة ووردبريس ذاتيًّا (وبالتالي يكون لديك التحكّم الكامل في موقعك). علاوة على ذلك، فإنّ المنحى التعلّمي لووردبريس سهلٌ مقارنة بمنصّات مثل Weebly وShopify.

يتوفّر برنامج ووردبريس مجانًا، لكنْ ستحتاج للدفع مقابل أمور من قبيل اسم النطاق (Domain name)، الاستضافة (Hosting) والقوالب. بالمختصر، تهدف هذه المنصّة الرائعة لبناء مواقع الويب إلى العمل في الخلفيّة وإعطائك فرصة إنشاء صفحات، وتدوينات، وقوالب وغيرها بسهولة.

فوتوشوب

يشتهر فوتوشوب بتحرير الصوّر والتعديل عليها، إلّا أنّ هذا المحرّر الضخم يصلُح لأي نوع من مشاريع التصميم. يُستخدَم فوتوشوب لإنشاء شعارات لمواقع الويب أو لتصميم نماذج أوليّة لها. ليس غريبًا أن تجد من يستخدم فوتوشوب لإنشاء مخطّط تصميم كامل لموقع ويب، اعتمادًا على نظام الطبقات (Layers) والتصدير الذي يتوفّر عليه فوتوشوب ويوفّر الكثير من الميزات.

Sketch

يُنظَر إلى برنامج Sketch غالبًا على أساس أنّه إصدار مُبسَّط من فوتوشوب. يعود السبب في ذلك إلى أنّ Sketch يركّز كثيرًا على التصميم للويب، في حين يمكن استخدام فوتوشوب لأي مشروع تصميم. الميزة الأساسيّة لبرنامج Sketch هي آليّة عمله مع التصاميم المتجهيّة (Vectors)، ممّا يجعله رائعًا لتوسعة التصاميم أو تقليصها بدون فقد أي بيانات أثناء العمليّة. علاوةً على ذلك، يمكن اختبار التصميم على الأجهزة الجوّالة مباشرةً من البرنامج.

GIMP

توجد في GIMP تقريبًا نفس الميزات الموجودة في فوتوشوب. الفرق الأساسي هو أنّ GIMP مجانيّ تماما. يحاجج بعض المصمّمين بالقول إنّ GIMP معقّد الفهم قليلًا، إلّا أنّه منتَج مجانيّ رائع يوفّر ميزات ضروريّة للعمل على تصميم المواقع وتحرير الصوّر.

Adobe Dreamweaver

يعدّ Dreamweaver مصنعًا لتصميم المواقع، حيث يوجد محرّر شفرة برمجيّة على جانب الشاشة ومعاينة لموقع الويب على الجانب الآخر. يمكنك بهذه الطريقة التعديل على الشفرات البرمجيّة ورؤية النتيجة مباشرة. في حين يركّز فوتوشوب على إنشاء عناصر موقع الويب أو النماذج الأوليّة، فإنّ Dreamweaver ينشئ موقع ويب جاهزًا للعمل. يمكن بنهاية العمليّة تصدير ملفات موقع الويب ووضعها على الخادوم.

WAMP

الخطوة المواليّة لتصميم موقع باستخدام برنامج مثل ووردبريس أو Dreamweaver هي اختباره، ثم تعديله وفقًا لنتيجة الاختبارات. قد لا ترغب في الدفع مقابل خادوم، فقط لعرض موقع نصف مكتمل على الجمهور.

توجد طريقة أفضل، وهي الحصول على خادوم محلّي مثل WAMP. بالمختصر، تشغّل الخادوم على حاسوبك الشخصيّ، وتنشئ أو تختبر موقع الويب كما لو كان موجودًا على الشبكة، وأخيرًا تنقل الملفات إلى الخادوم المتاح للعموم.

يعمل برنامج WAMP على أنظمة التشغيل وندوز، ولكن يوجد بديل يعمل على حواسيب Mac وهو MAMP.

عجلة الألوان (Color Wheel)

من المهمّ جدًّا أن تكون لديك أداة ألوان أثناء تصميم موقع ويب. عجلة الألوان أداة مجانيّة توفّر طريقة لبناء مخطّطات ألوان ذات مظهر متناسق لاستخدامها ضمن موقع الويب. قد تكون لديك فكرة باستخدام لون معيّن في جزء من الموقع، إلّا أنّ المشكلة هي أنّ ألوانًا كثيرة لن تظهر متناسقة مع اللون الرئيسي لموقعك. تأتي عجلة الألوان للتغلّب على هذه المشكلة، إضافة إلى أنّها تساعد في تحديد الرمز الدقيق للون مّا، بدلًا من تخمينه.

Adobe Spark

يعمل برنامج Adobe Spark جيّدًا لتصميم البصريّات الاحترافيّة بأنواعها للاستخدام في شبكات التواصل الاجتماعي، أو منصّات التدوين، أو البطاقات المهنيّة، وغيرها. تختصر الأداة العمليّة الطويلة لإنشاء موادّ بصريّة من الصفر على فوتوشوب. كما توفّر قوالب احترافيّة كثيرة للاختيّار بينها. بالمختصر، تمكّن غير المصمّمين من إنشاء موادّ بصريّة جميلة للاستخدام على شبكات التواصل الاجتماعي أو على مواقع الويب دون اللجوء إلى فوتوشوب.

ترجمة – بتصرّف – للمقال ‎9 Must-Have Web Design Tools and Alternatives لصاحبه Brenda Stokes Barron.

لا يشبه تصميمُ موقع تجارة إلكترونيّة أيّ مشروع ويب آخر، إذ يجب أن تفكّر في الهويّة التجاريّة (Brand) إلى جانب تجربة المستخدم (User experience) والتسويق المعتمد على التصميم. أقلّ ما يُقال هو أنّ الأمر يمكن أن يكون صعبًا.

رغم ذلك، توجد مصادر مجانيّة كثيرة يمكن استخدامها لجعل العمل أسهل. مجموعات الأيقونات تعني – بالتأكيد – الكثير من الأشياء لتصميمها. يمكنك اقتصادُ ساعات عملٍ طويلة، وربّما أيّام، باستخدام حزمة أيقونات مجانيّة بدلًا من تصميم أيقونات جديدة.

توفّر المجموعات المجانيّة أدناه تعدّدًا في الأنماط، وستجد من خلالها الكثير ممّا يمكن النظر فيه.

حزمة 54 أيقونة مجانيّة للتجارة الإلكترونيّة

تتضمّن هذه الحزمة الشاملة 54 أيقونة تتميّز بخطوطها البسيطة التي تصلُح للوظائف الشائعة في مواقع التجارة الإلكترونيّة.

صمّم Virgil Pana الحزمة ووفّرها مجانًا على موقع Dribbble. تأتي الحزمة كاملةً بصيغة ملفّات PSD، وهي – حقًّا – من أفضل الحزم الموجّهة لمواقع التجارة الإلكترونيّة.

خصوصيّة الحزمة في أنّه يمكن تضمينها في أي موقع.

النمط التقليلي (Minimalist) مستخدَم كثيرًا، لذا فهو يستحق التجربة، بغض النظر عن المشروع الذي تعمل عليه.

مجموعة أيقونات خضراء بسيطة

هذه حزمة مجانيّة أخرى موجودة على Dribbble، تركّز على أيقونات خضراء أنيقة. فنيًّا، يمكن تغيير المخطّط اللوني بسهولة عن طريق Illustrator.

أنشأ المصمّم Pavel Kozlov هذه الحزمة التي تضمّ 40 أيقونة، وجعلها في المتناول قبل سنوات. رغم ذلك، ما زالت الحزمة قابلةً للاستخدام، تمامًا كما كانت من قبل.

زر صفحة Gumroad التاليّة لتنزيل المجموعة. عادةً، يُدفَع مقابل العناصر الموجودة على موقع Gumroad، إلّا أنّ هذه الحزمة مجانيّة بالكامل.

يمكن - لمن يرغب في ذلك – إرسال مكافأة صغيرة للمصمّم على جهوده، إلّا أنّه ليس شرطًا للحصول على هذه الأيقونات الخضراء الجذّابة.

أيقونات تبضّع (Shopping) متجهيّة مسطَّحة (Flat vector)

التصميم المسطَّح (Flat design) توجّه في التصميم يحظى بالشعبيّة. طُبِّق التصميم المسطَّح في كلّ مكان، بدءًا من تطبيقات الجوّال إلى مواقع الويب، بل وحتى الأيقونات.

ألق نظرة على هذه المجموعة من أيقونات التبضّع المتجهيّة التي تضمّ 80 أيقونة مختلفة. بعض أيقونات المجموعة ملوَّنة، وأخرى أيقونات بخطوط بسيطة، إلّا أنّها جميعًا سهلة الاستخدام والتخصيص.

يمكن تنزيل الحزمة بصيغة PNG أو بصيغتي AI و EPS المتجهيّتيْن، كما أنّه يُسمَح باستخدامها ضمن مشاريع تجاريّة. انتبه إلى أنّ رخصة الأيقونات تطلُب وضعَ رابط إحالة إلى الموقع الأصلي.

أيقونات شحن وتجارة إلكترونيّة

يتضمّن سوق EpicPxls الإلكتروني موارد عاليّة الجودة. يعدّ هذا السوق مكانًا رائعًا للمصمّمين لينشروا فيه منتجاتهم المجانيّة والمدفوعة، وبالتالي بناء سمعة لأعمالهم.

ألق نظرة على مجموعة الأيقونات هذه التي يقدّمها فريق EpicCoders. جاوزت المجموعة أكثر من ألفيْ تنزيل، وهي حقَّا فريدة. بنظرة خاطفة على المجموعة يمكن فهمُ مصدر فرادتها، إذ تبدو نابضة، وشبيهة بالأيقونات الكرتونيّة، لكن دون مبالغة.

تناسب الحزمة كثيرًا المواقع التقليليّة (minimalist sites)، إلى جانب أي موقع تجاري يوافق مخطّط ألوان الحزمة.

مجموعة أيقونات مرسومة يدويّا

قد يكون صعبًا تصميمُ صفحة بعناصر مرسومة يدويّا، إلّا أنها تُضيف لمسة إبداع لكلّ موقع تُضمَّن فيه، وهو ما ينطبق بالتأكيد على هذه الأيقونات المجانيّة.

تُركّز هذه الحزمة لأيقونات التجارة الإلكترونيّة بالكامل على العناصر المرسومة يدويّا. توجد جميع الرسومات التي قد تحتاج إليها بدءًا من صناديق الهدايا إلى سلّات التبضّع الصغيرة وميزات تسديد المدفوعات.

يُنصَح باستخدام هذه المجموعة أثناء تصميم صفحة هبوط، وليس في واجهات المستخدم الخاصّة بتسديد المدفوعات. يمكن أن تواجه مشاكل في جعل هذه الأيقونات تمتزج طبيعيًّا في واجهات التسديد، لكن يمكنها أن تجلب الانتباه في الصفحة الرئيسيّة لموقع تجاري.

حزمة بطاقات دفع

لا يكتمل موقع التجارة الإلكترونيّة بدون وجود أيقونات لبطاقات الدفع.

إنْ كنت تصمّم متجرًا يقبل بطاقات الدفع الإلكتروني فيجدُر بك إلقاء نظرة على هذه الأيقونات المتاحة للملك العام (رخصة CC0)، والمنشورة على موقع Dribbble.

صمّم Guy Levin تسع أيقونات مختلفة لبطاقات دفع، وجمعها كلّها في ملف Illustrator واحد. الأيقونات أنيقة، سهلة التخصيص ويمكنها وضعها في أي مكان من الصفحة.

أيقونات خطيّة للتجارة إلكترونيّة

نشر موقع Pixlov حزمته الخاصّة من أيقونات مواقع التجارة الإلكترونيّة، وهي حزمة تعتمد على نمط الأيقونات الخطيّة.

قد لا تجد أنّ 33 أيقونة عدد كبير، إلّا أنّ تصاميم عدّة توجد في هذه المجموعة للاختيار بينها. لا يُنصَح باستخدام هذه الأيقونات لصفحة تسديد المدفوعات، إذ أنّها مناسبة أكثر لصفحات الهبوط أو صفحات "ميزات المتجر".

يمكن أن تناسب المجموعة كذلك النشرة البريديّة وتساعد في زيادة نسبة المبيعات.

مشروع Noun للتجارة الإلكترونيّة

إنْ لم تكن تعرف مشروع Noun فيجدر بك التعرّف عليه. يجمّع الموقع الكثير من حزم الأيقونات المجانيّة من أماكن مختلفة على الشبكة ومن مصمّمين كثر عبر العالم. يوجد الكثير ممّا يمكن اكتشافه، إلّا أننا في هذا المقال ننصح بمجموعة الأيقونات الخاصّة بالتجارة الإلكترونيّة التي صمّمها Anton Scherbik.

هذه المجموعة من الأيقونات من أبسط أيقونات الخطوط، وتتضمّن خيّارات رائعة مثل السلّات والحقائب بأنماط مختلفة.

أيقونات الدّفع والتسليم

تقوم مدوّنة Codrops بعمل رائع. تنشُر المدوَّنة دوريًّا مقالات عاليّة الجودة تتضمّن موادّ مجانيّة يمكن استخدامها في مشاريعك الخاصّة. من أمثلة ذلك، هذه المجموعة من أيقونات تسديد المدفوعات التي صمّمها EpicPxls.

تحوي المجموعة 35 أيقونة فريدة بتأثير حشو لن يمكنك العثور عليه في مكان آخر. تمتد ألوان الحشو دائمًا إلى الخارج قليلًا، وهو أوّل شيئ – ربما – تلاحظه.

تقدّم المجموعة بلا شك لمسةً خاصّة.

مجموعة أيقونات مُخصَّصة

أخيرًا – وليس الأقل أهميّة – هذه المجموعة الرائعة من الأيقونات بواسطة Graphicboat.

قد لا تناسب هذه المجموعة جميع الاستخدامات، إلّا أنّها يمكن أن تجذب الانتباه بسرعة وتثير فضول الناس لمعرفة المزيد عن متجرك.

يمكن القول إنّ هذه الأيقونات ستتناسب أكثر مع خلفيّة ترويسة، أو في صفحة "ميزات المتجر"، أو ربما في مكان قريب من زرّ الدعوة لإجراء ( CTA).

كانت تلك قائمتنا من الأيقونات المجانيّة. إنْ لم تجد ما تبحث عنه، فيمكنك استخدام محرّك بحث للعثور على خيّارات أكثر. تظهر مجموعات مجانيّة جديدة كلّ شهر، لذا يمكن أن تجد ضالتك فيها.

ترجمة – بتصرّف – للمقال ‎10 Free Icon Sets for Ecommerce UI Design لصاحبه Jake Rocheleau.

إن مجال الرسوم المتحركة مجالٌ قوي به تخصصات كثيرة وأدوات ربما أكثر من أجل تصميم أسلوب أو مظهر معيّن، فلدينا مثلًا برنامج Krita للرسوم المتحركة المرسومة باليد للقصص المصورة مثلًا، وStopGo لفن التصوير المتعاقب، وبرنامج Blender الشهير للرسم والتصميم ثلاثي الأبعاد، وكذلك برنامج openToonz الذي جُعل مفتوح المصدر مؤخرًا، وبرنامج GIMP الذي يمكن تثبيت إضافة GAP للرسوم المتحركة فيه، وغيرهم كثير.

وسنستكشف في هذا المقال برنامج Synfig Studio، وهو برنامج صمم لتسريع عملية تحريك الرسوم عبر استخدام النقوش المتحركة Sprites والبينيّة الرقمية Digital tweening بدلًا من فعل ذلك بالتصميمات اليدوية، لهذا فإنه مثالي في حالة الفنان المستقل أو فريق صغير الحجم.

وهذا البرنامج جاهز للإنتاج مباشرة بسبب مساهمات جهات مثل استديو Morenva Project الذي يساهم في تطويره، هو وبقية البّرامج مفتوحة المصدر التي يستخدمها للتصميم.

التثبيت

قد يكون البرنامج موجودًا داخل مستودعات توزيعتك، لكن إن أردت النسخة الأحدث فيمكنك تحميلها من موقع البرنامج، وستجد نسخًا بتحزيم deb وrpm ونسخة tar عامة، واستخدم مدير الحِزَم لتثبيته، أو إن حمّلت نسخة tar ففك ضغطها ثم ضعها في دليل/مجلد directory مناسب مثل "~/bin"، ثم شغّل أمر synfigstudio.

الواجهة

واجهة Synfig مألوفة غالبًا لمن استخدم برنامج رسوم متحركة من قبل أو حتى برنامج تصميم بشكل عام، فاللوحة التي في أعلى اليسار بها الأدوات، والوسطى بها مساحة العمل، والسفلى بها الخط الزمني والإطارات، أما لوحة الخصائص Property فتوجد على اليمين.

وقبل أن نبدأ أريدك أن تذهب إلى قائمة Canvas التي في شريط القوائم وتختار Properties -أو استخدم اختصار مفتاح F8 الوظيفي-، وأدخل مساحة العمل التي تريدها في نافذة Canvas.

ربما تود أن تبدأ بأبعاد 1920*1080 -Full HD- إن كان لديك حاسوب قوي نوعًا ما. شخصيًا، أشعر بالأمان حين أختار أبعادًا أكبر من التي أستهدفها ولو بمستوىً واحد إن سمحت مواصفات حاسوبي بذلك لكي أوفر على نفسي تحديث عملي في المستقبل الفريب، لكن طبعًا تبقى احتياجات عملك هي المحددة للأبعاد التي تستخدمها.

كذلك تجد في نافذة الخصائص تلك مقدار الوقت الذي تريد أن يكون في الخط الزّمني لملفك، واعلم أن وحدات الزمن بالنسبة للرسوم المتحركة تقاس بالإطارات، وتترجمها إلى المفهوم البشري بعدد الإطارات التي سيشغّلها العمل الفني في الثانية الواحدة، فكلما زاد عدد الإطارات في الثانية زادت سلاسة الحركة فيه، لكني سأستخدم لهذا الشرح 16 إطارًا/ث، وخطًا زمنيًا قدره 128 إطارًا، إذ أني أبتغي به التوضيح لا أكثر.

احفظ الملف بعد أن تختار الخصائص التي تناسبك.

الرسم والاستيراد

ستحتاج إلى عناصر من أجل تحريكها داخل عملك الفني، وSynfig به العديد من أدوات الرسم، لكن أغلب من رأيتهم يستخدموه يفضّلون الرسم في مكان آخر ثم استيراد تلك العناصر.

وإن المبدأ وراء تقنية Synfig للرسوم المتحركة هو مبدأ "Paper Cutout" القديم، كما في عمل "Monty Python" لتيري جيلَم أو سلسلة "South Park" التلفزيونية، فكل عنصر تريد تحريكه يتم تثبيته إلى منصة مما يسمح لك بتسجيل كل حركة تنفّذها على هذه المنصة، ويكون الناتج النهائي هو عمل فني لرسوم متحركة.

وإن أردت استخدام أدوات Synfig، فستجدها أعلى الناحية اليسرى من البرنامج، وهي الأدوات المعتادة في أي برنامج رسم، مثل أدوات الأشكال التي ترسم مستطيلات وأشكالًا بيضاوية، والقلم bezier pen، وأداة دلو الطلاء paint bucket، وهكذا.

ولكي ترى خصائص أي عنصر ترسمه، اضغط عليه سواء في مساحة الرسم أو في لوحة الطبقات -الموجودة في أسفل يمين البرنامج افتراضيًا- وستظهر خصائصه في لوحة الخصائص في أسفل يسار البرنامج.

وأفضل طريقة للعمل على أي عنصر سواء رسمته بنفسك أو استوردته من برنامج آخر هي باستخدام مساحة العمل canvas والطبقات layers معًا، فحتى اللقطات البسيطة قد تتطور لتصبح معقدة للغاية، لذا استخدم منظور on set في مساحة العمل، وdope sheet في الطبقات.

ولاستيراد عناصر إلى لقطتك، استخدم قائمة File ثم Import. وإذا استوردتَ عنصرًا أو أنشأته فإنه يحصل على مدخل entry في لوحة الطبقات، وكذلك إن استوردت أكثر من عنصر فإن البرنامج يضيف كل واحد كطبقة مستقلة، وتكون الطبقات الأعلى في الترتيب "فوق" الطبقات التي تحتها. ستجد أن هذه مهمة لاحقًا.

وسواء رسمتَ عنصرًا أو استوردته فإن أي عنصر في لقطتك سيكون له نقاط/أذرع تحكم Handles، وقد يختلط الأمر على المستخدم في البداية بسبب وجود أكثر من نوع لهم.

دعنا نفصّل أنواعهم هنا:

• نقطة التحكم الخضراء التي في المنتصف هي التي تحرك العنصر بإحداثيات أفقية ورأسية، اسحبها لتحرك العنصر.
• النقطة البنّية في أعلى اليمين تغير حجم العنصر مع الحفاظ على نسب أبعاده.
• النقاط الصفراء تغير حجم العنصر أيضًا لكنها لا تحفظ شكله الأصلي ولا أبعاده.
• النقطة الزرقاء تدير العنصر حول النقطة الخضراء المركزية، لكن يمكنك تغيير محور الدوران بالضغط على Ctrl والنقطة الخضراء لتسحبها إلى المكان الذي تريد أن يكون المحور.              
• النقطة الحمراء تعطي تأثيرًا مائلًا Skew.

جرب الآن أن ترسم عنصرًا أو تستورده ثم عدّل شكله باستخدام نقاط التحكم هذه كي تعتاد عليها، فهذا أفضل من محاولة إنتاج عمل فني دون القدرة على استخدام أدوات البرنامج بسلاسة.

التحريك Animation

قد قطعتَ نصف الطريق إلى تحريك عنصرك إن كنت قد جربتَ التعديل عليه باستخدام النقاط التي ذكرتها لتوي، والخطوة الباقية هي أن تضغط على Record وتبدأ بالتحريك الذي تريده لعناصرك.

وسترى على زر التسجيل شكلًا رمزيًا لشخص صغير، اضغط عليه ليتحول إلى شخص أحمر اللون في وضعية حركة، ستجد الزر قرب أسفل يمين مساحة العمل، وسترى أيضًا أن مساحة العمل سيحيطها إطار أحمر لتنبيهك إلى أن حركاتك مسجّلة، فكل شيء تفعله بالعنصر سيسجَّل كإطار Keyframe في الخط الزمني للبرنامج.

الإطارات والبينيّات Keyframes and Tweens

كان أسلوب الرسوم المتحركة قديمًا يبدأ برسم الأوضاع الأساسية لشخصيتك على طول الخط الزمني، فالوضع 1 في إطار 0 والوضع الثاني في الإطار السادس عشر، وهكذا، ثم يعود الفنان إلى رسم إطارات بين تلك الإطارات الرئيسية، وسمّيَت هذه العملية باسم الرسم البينيّ Tweening إشارة إلى الرسم الثانوي بين إطارات الأوضاع الرئيسية.

وميزة برنامج مثل Synfig في تلك النقطة هي أنه يقوم بمهمة الرسم البيني عنك، إذ يكتشف بنفسه أسلوب الحركة من الإطار 0 إلى الإطار السادس عشر -وهما الإطاران اللذان في مثال الفقرة السابقة- دون أي رسم بينيّ منك.

جرب بنفسك:

• ارسم أو استورد شكلًا، فمثلًا أنا رسمت pierogi باستخدام Inkscape ثم استوردت أجزاءه منفصلة إلى Synfig كصور png.
  
• حدد كل الطبقات التي اخترتها واضغط بالزر الأيمن في لوحة الطبقات لتختار Group Layers لجمعهم في مجلد واحد، كي يتحرك العنصر كوحدة واحدة. لكني لا زلت أستطيع تحريك الأجزاء المختلفة فيه وحدها إن شئت.
• بعد أن تجمع كل الأجزاء في وحدة واحدة، ستجد أن التعديل في نقاط التحكم سيؤثر في الرسم ككل، فإن أدرتُ شخصيتي فإن جسدها وفمها وعيناها ستتحرك جميعًا معًا.
• ولنبدأ التحريك، اذهب إلى اللوحة التي في أسفل يسار نافذة البرنامج، واضغط على رمز المفتاح الموجود فيها لتنتقل إلى منظور الخط الزمني.
  
• ولكي ندخل وضع التسجيل، اضغط على زر التحريك -الرمز الأخضر- في أسفل يمين لوحة مساحة العمل، وسيتحول لونه إلى الأحمر، وسترى الإطار الأحمر الذي سيحيط بمساحة العمل، ومنذ هذه اللحظة فإن أي شيء تقوم به سيتم تسجيله لذا احرص على عدم تنفيذ حركات لا تريد أن تظهر في العمل النهائي.
• استخدم             نقاط التحكم في العنصر لتحرك العنصر إلى المكان الابتدائي له، وفي مثالي هذا فإني سأجعل الشكل يرقص، لذا سأبدأ بإمالته إلى أحد جانبيه.
• حرك الخط الأحمر المنقّط -وهو رأس التشغيل playhead- إلى الإطار الرابع لتحرّك الشخصية إلى موضع جديد. وبما أني أريده أن يؤدي رقصة بسيطة، فإني سأجعله يميل إلى الجانب الآخر.
  
  كرر هذه العملية إلى أن تصل الشخصية الخاصة بك إلى موضعها الأخير.

• اضغط على زر Animate لتخرج من وضع التسجيل بداعي الأمان فقط، وهنا يمكنك أن تستعرض الخط الزمني لترى معاينة للنتيجة النهائية، أو تضغط زر play لترى إخراجًا في الوقت الحقيقي للعمل النهائي.
  
  وإن كان العنصر الذي تحركه مكونًا من أجزاء منفصلة، فيمكنك أن تحرك هذه الأجزاء بشكل منفصل أثناء تفعيل وضع التسجيل.

أنواع الطبقات والتأثيرات

من الصعب تنفيذ كل ما تريد من صور التحريك لشخصياتك باستخدام نقاط التحكم فقط، لهذا توجد أنواع أخرى للطبقات من أجل تأثيرات إضافية للحركة، وأحد الطرق الشائعة لتحريك الفم من أجل محاكاة الكلام هو بتبديل أشكال الفم، فلهذه الحالات لن تحتاج مطابقة حركة الشفاه للحروف بشكل دقيق إلا نادرًا، لذا فإن الحل الأسهل هو تبديل أشكال مختلفة للفم.

وبما أن البرنامج مبني لتحريك النقوش Sprites أكثر من الرسوم اليدوية، فإني سأحصل على نفس التأثير لو غيّرت نقشًا مكان آخر، بمعنى أني سأخفي الفم المبتسم باستخدام شكل آخر للفم به تعبير مختلف.

ولتجربة هذه التقنية، اذهب إلى لوحة الطبقات واضغط بالزر الأيمن، واختر New Layer، ثم Switch من تصنيف other، وسيضع هذا طبقة تبديل switch في لوحة الطبقات، فاسحبها وألقها في المجموعة التي تريد، ففي مثالي هنا فإني سألقيها داخل مجلد الشخصية pierogi التي رسمتُها ﻷضيفها إلى مجموعة Pierogi. لاحظ الخط الأسود الذي يحدد المكان الذي سأضع فيه طبقة Switch.

واعلم أن طبقة Switch هذه ما هي إﻻ تأثير، وكل ما تحتويه من طبقات يتأثر بها أيضًا، وكل التأثيرات داخل برنامج Synfig تعمل بنفس الطريقة، فلوحة الطبقات تمثّل شجرة، على عكس القائمة المتراكبة للطبقات في gimp أو inkscape، وﻷن الهدف من طبقة الاستبدال هو التبديل بين نقشين sprites مختلفيْن فإني سأضيف وضعًا آخر للفم تحت طبقة الاستبدال، وﻻ يهم ترتيب تلك الطبقات طالما أنها تحت نفس الطبقة الأم.

وبما أن تأثير طبقة الاستبدال صار الآن جاهزًا، فسنستخدم أداة التبديل في خصائص مجموعة الطبقات "layer group's properties"، فاضغط على المجموعة اﻷم لعرض خصائصها، ففي مثالي هنا، إن حددتُ الطبقة التي بها switch والأوضاع المختلفة للفم فستظهر الخصائص في لوحة Properties أسفل يسار نافذة البرنامج.

ويجب أن تكون داخل وضع التسجيل كي تجعل تأثيرًا ما يتحرك، تمامًا كما لو كنت ستحرّك أي شيء آخر داخل البرنامج:

• ادخل وضع التسجيل ثم ضع رأس التشغيل Playhead -ذلك الخط الرأسي المنقّط- على الإطار رقم 0.
• حدد اسم الطبقة النشطة حتى لو كانت على الطبقة التي تريد البدء بها، قد يكون هذا غير رسميّ داخل البرنامج لكنه يسمّى عادة بالقلقلة "Jiggling"، بمعنى أنك تحرك إعدادًا أو تغيره دون أن يحدث أي تأثير لكنك تجبر الحاسوب على أن يلاحظها ويسجّل الحركة. فافعل ذلك للطبقة النشطة التي تريد البدء بها، ثم حرك رأس التشغيل بعيدًا على طول الخط الزمني وغيّر حقل اسم الطبقة النشطة إلى طبقة بديلة، وسيظهر نتيجة لذلك إطار جديد، وسيتغير -في مثال المقال- شكل الفم من ابتسامة إلى دهشة.
  

  ﻻ ينشئ synfig بينيّات من وضع فم ﻵخر ﻷنه لم يتحوّل شيء، فما قمنا بشيء سوى تغيير سريع للنقش، فالفائدة التي أريد إيصالها إليك من الأمر هو أنك إن أردت تعطيل إنشاء البينيّات آليًا، فتأثير switch هو المناسب.

  وهناك تأثيرات أخرى عديدة في synfig، وهي غير تقنية على عكس switch، فهناك تأثيرات للألوان والغباشة Blur، ومولدّات، وحلقات زمنية Time Loops، وغيرها.

الصوت

يوجد محرر صوتيات داخل Synfig لكنه ليس متطورًا، لذا أنصحك أن تستخدم ملفًا صوتيًا جاهزًا وﻻ يحتاج إلى تعديل، وﻹضافة ملف صوتي اتّبع الخطوات التالية:

• أضف طبقة Sound من تصنيف other إلى لوحة الطبقات.
• اضغط على Sound لتظهر خصائصها أسفل يسار نافذة البرنامج.
• اضغط على الثلاث نقاط [...] بجانب حقل filename، ﻷن البرنامج سيظن أنك ﻻ تزال تختار الملف الصوتي إن لم تضغط عليها.
• اضغط على زر Play كي ترى وتسمع العمل الفني حين تنتهي من ملف الصوت، ستجد الزر تحت مساحة العمل.

الإخراج

إن إخراج الرسوم المتحركة أقرب للتفضيل الشخصي منه إلى مجرد تقنية، فالطريقة التقليدية تقتضي أنك تخرج مشروعك إلى سلسلة من الإطارات ثم تحوّلهم إلى فيديو ﻻحقًا، لكن إن لم يكن لديك وقت فيمكنك الاستفادة من برنامج ffmpeg لإخراجه مباشرة إلى فيديو رغم أن الصوت لن يكون مدمجًا -على الأقل في هذه النسخة من البرنامج- وستدمجه يدويًا ﻻحقًا.

ولقد وجدت أن الأسهل هو أن أخرج العمل في سلسلة إطارات، ذلك أني سأحصل على نسخة master من العمل يمكنني التعديل عليها فيما بعد، وسنفعل ذلك الآن:

• اذهب إلى قائمة file واخترrender، واختر مسارًا لمجلد فارغ تريد أن تحفظ فيه الصور، ويجب أن يكون اسم الملف -لكل صورة- هو الاسم الذي تريده للعمل، إذ سيضيف Synfig ترقيمًا آليًا للصور يكون أساسه الاسم الذي تختاره.
  
• اختر cairo_png من قائمة Target من أجل تسلسل الصور.
• غيّر قيمة Quality لتكون 9، وAnti-Aliasing لتكون 31.
• ربما تود أن تعدّل حجم الصورة هنا أيضًا، في حالة لو أردت تصغير أبعاد العمل الفني، إضافة إلى عدد الإطارات التي تريد إخراجها، وهكذا.
• اضغط على زر Render حين تنتهي.
  قد يستغرق الأمر بعض الوقت للملف حتى ينتهي، وستظهر رسالة تحت مساحة العمل مباشرة لبيان تقدّم عملية الإخراج.
• استخدم ffmpeg لتحميل الصور التي أخرجتها إلى فيديو، مثال:

ffmpeg -r 16 -f image2 -s hd480 -i dance.%04d.png -vcodec vp8 -an dance-video.web-

وسواء كنت ستخرج العمل كملف فيديو أو كتسلسل صور، فإن دمج الصوت معه سهل أيضًا، مثال:

ffmpeg -i bounce.webm -i music.flac -acodec libopus dance.webm

وهكذا نكون قد أنهينا استعراض برنامج Synfig لتصميم الرسوم المتحركة، ذي المزايا التي ﻻ غنى عنها لأي برنامج تصميم وأكثر، فهو أفضل خيار لك إن كنت تبحث عن إخراج سريع وكفء لرسوم متحركة. ورغم أنه يأخذ منحى تعليمي نوعًا ما إﻻ أنه يستحق بسبب قدرته على إنشاء البنييات تلقائيًا.

ترجمة -بتصرف- لمقال How to use Synfig Studio for animation لصاحبه Seth Kenlon

على عكس صفحات “تحت الإنشاء” التقليدية منذ بدايات شبكة الإنترنت، يمكن لصفحة “سننطلق قريبًا” في يومنا هذا أن تثبت كونها أداة قوية عند إطلاق موقع جديد.

إذا كنت تخطط لإطلاق مشروع تجاري جديد عبر الإنترنت، فعليك التفكير في التسويق الاجتماعي. ولينجح عملك التجاري عبر الإنترنت، يجب عليك تعريف الناس بما تفعله، قبل حتى إطلاق منتجك أو خدماتك فعليًا.
كيف يمكنك أن تفعل ذلك؟ الأمر سهل! عندما تكون صفحات “سننطلق قريبًا” عملية. فستساعدك على تسويق عملك قبل انطلاقه حتى! ويمكنك الحصول على العملاء المحتملين واكتساب متابعين لصفحاتك على مواقع التواصل الاجتماعي قبل أن يكون نشاطك التجاري جاهزًا.

انسَ أمر (القبعات الصفراء والإشارات الوامضة) التقليدية، ودعنا نلقي نظرة على الاستفادة التي يمكننا استخلاصها من بعض أفضل صفحات “سننطلق قريبًا”! هذه التصاميم لصفحات “سننطلق قريبًا” لديها أسلوب فريد من نوعه وأفكار ستلهمك بالتأكيد لصنع صفحتك المذهلة! ولتتعلم منها أيضًا عمّا يتوجب عليك وضعه في صفحة “سننطلق قريبًا” لتكون أكثر تأثيرًا وتساهم في جهودك التسويقية،قبل أن يكون موقعك فعالًا.

تجدر الإشارة إلى أن الأمثلة التي سنعرضها أدناه قد لا تظهر مباشرة على مواقع الويب نظرًا لأن المواقع قد تم إطلاقها بالفعل. ومع ذلك، يمكنك أن ترى كيف كانت تبدو في الصور أدناه. و هي بالتأكيد ستقدم لك الإلهام الذي تحتاجه!

ما هي صفحة “سننطلق قريبًا”؟

تعمل صفحات “سننطلق قريبًا” في الأساس على إبراز ما يُفترض توقعه بمجرد الانتهاء من بناء موقعك الرائع. لذلك من المهم أن تمنح فكرة كافية عن مضمون الموقع. وعادة ما يكون لها تصميم مطابق لعلامة الشركة التجارية وأيضا بعض الميزات الرئيسية الأخرى، مثل نموذج الاشتراك في القائمة البريدية وأزرار مواقع التواصل الاجتماعي.

ابنِ علامة تجارية من اليوم الأول

من مزايا وضع شيء ما على نطاقك أنه يتيح الفرصة لتطوير شعار وعلامة تجارية يمكن ترسيخهما في أذهان المشاهدين قبل أن يجهز الموقع بنسخته النهائية. هذا مهم جدًا ويسهّل من بقاء شركتك في الذاكرة. انظر المثال أدناه! صفحة (سننطلق قريبًا) هذه، لديها شعار كبير مع تذييل بسيط والذي يهدف للحصول على المبيعات.
صفحة بسيطة ولكن فعّالة – و هو تقريبًا كل ما تحتاجه أي صفحة (سننطلق قريبًا) إلى حد كبير.

وفّر إشعارات البريد الإلكتروني أو الاشتراك

لا فائدة ترجى من نشر صفحة “سننطلق قريبًا” مذهلة، إن لم توفر أي وسيلة للمتابعة. و الأرجح حينها أن يكون زائرك قد نسي الأمر برمّته بحلول اليوم التالي، لذا من المهم أن تخبره بأن الموقع يعمل بالفعل. وستجد العديد من صفحات “سننطلق قريبًا” توفر نماذج الاشتراك في القائمة البريدية. تأكد من إرسال بريد إلكتروني للمتابعين الجدد خلال فترة وجيزة، تخبرهم فيه بمعلومات محدثة عن أحوال سير الموقع، وإلا سينسون أنهم قد اشتركوا في المقام الأول وقد ينتهي بك الأمر مع الكثير من الاشتراكات الملغية أو تبليّغات كـ"بريد مرغوب به”.

ارتق بمقاييسك في التصميم

ربما تكون مجرد بديل لما سيأتي، ولكن هذا لا يعني أنه لا ينبغي لك أن تمنح ذات الوقت والجهد لصفحة “سننطلق قريبًا” كما تمنحهما للموقع المكتمل. ضع شيئًا مثيرًا وسيساهم إغراؤه في جلب الاهتمام. أتقن فعل ذلك وستحصل على العديد من الإشراكات لأعضاء مفتونين بعملك. وهذا سيزيد من الاهتمام بعملك، كما وأنك ستكون قادرًا على جمع المزيد من عناوين البريد الإلكتروني! خذ الصفحة أدناه كمثال! فهي بسيطة، ولكن تم إنشاؤها بشكل جميل.

قمّ بفعل شيء ممتع/مختلف

لا تعتبر صفحات “سننطلق قريبًا” بالشيء المُستحدث، وهناك الآلاف منها بالفعل. و بأخذ ذلك بعين الاعتبار، فلا بد لصفحتك أن تكون بارزة . قمّ بفعل شيء مميز أو ممتع. يشارك الأشخاص الأشياء التي تعجبهم، لذا امنحهم سببًا لمشاركة رابط موقعك. كنّ مبدعًا! إليك مثالًا يمكن أن يلهمك!

ضع روابطك لصفحات الشبكات الاجتماعية

لم يعد البريد الإلكتروني الطريقة الوحيدة للتواصل على الإنترنت في وقتنا الحالي. حيث تعدّ الشبكات الاجتماعية أدوات هامة للتواصل مع المستخدمين. وتتيح مواقع مثل “تويتر” و “فيس بوك” للمتابعين معرفة المزيد عمّا يجري وراء كواليس الموقع. بهذه الطريقة ستكون قادرًا على جمع بعض المتابعين، حتى قبل أن تنطلق شركتك !
اجعل أزرار تلك المواقع مرئية بل وحثّ زوارك على متابعتك على “تويتر” و "فيس بوك و “انستغرام” لمعرفة المزيد عن موقعك.

وهذا ما كان عليه تصميم صفحة “سننطلق قريبًا” لموقعنا على الإنترنت، line25. كان بسيطًا مع رسالة ذات دعوة واضحة جدًا - تابعنا على تويتر! و قد أجدت نفعًا! فقد تمكنّا من جمع الكثير من متابعي تويتر الجُدد حتى قبل إطلاق الموقع. وقد ساعدنا ذلك كثيرًا لاحقًا، نظرًا لأن “تويتر” كان المصدر الرئيسي للزيارات في البداية.

ترجمة -بتصرف- لمقال Coming Soon Page Design: How to Make it Awesome and Successful لصاحبه Iggy

ليس هناك من اتجاه واحد يجب اتباعه لمواقع الويب، فتلك المواقع تعبر عن العلاقة الأولى المتبادلة بين البائعين والعملاء، أي القصة البصرية لإحدى الشركات والمصدر الأساسي للمعلومات. إن كل بائع يرغب في أن يكون بائعًا ناجحًا يحتاج إلى موقع على شبكة الإنترنت وأن يتم تصميم ذلك الموقع بشكل جيد بحيث ليساعده في عمله، وتحرير المستخدمين من كل الارتباك أو المخاوف التي ممكن أن يعانوا منها. إن المواقع الجذابة والمريحة تختصر عملية التواصل الناجح. ومن المؤكد أن المواقع البارزة بينها تعلمنا كيف نصبح مميزين، مثيرين للاهتمام، وكيف نقوم بتوفير تجربة بصرية غنية لكل من المتسوقين والمستخدمين على الإنترنت.
يستمتع الناس بالمناظر الجميلة. وهي القاعدة التي تنطبق على كل شيء سواء في العالم الحقيقي أو الافتراضي.

جميعهم قد يعجبون بالطريقة التي تقدم فيها مجموعة جديدة من الملابس في متجرك بنفس القدر من الإعجاب، أو حتى الخدمة الجديدة التي تقدمها في تطبيقات الجوال. وإذا كان تصميم السلعة جذابًا وتم لفّه بشكل جيد، فمن المرجح أن تصبح تلك السلعة رائجة وتحقق لك الربح.
إن اتخاذ قرار بشأن كيفية تصميم المتجر على الإنترنت يعتبر أمرًا ضروريًا لخلق المبيعات. وغالبًا قد يؤدي الخيار أو القرار الجيد إلى زيادة قيمة المنتج المتوقعة لدى العملاء وزيادة ثقتهم به. وبناء على ذلك، عليك أن تفكر في تصميم متجرك على أنه التحدي الجديد الذي ستواجهه!

تصميم موقع للتجارة الإلكترونية

إن الخطوة الأولى اللازمة لجذب الانتباه وخلق المبيعات هي إنشاء موقع جميل للتجارة الإلكترونية، ولكنه في الوقت ذاته عملي وسهل الاستخدام - سواء كنت تستخدم أحد منصات التجارة الإلكترونية المعروفة أو أنك ستقوم بإنشاء منصة خاصة ومختلفة.

ومع ذلك، فإن التجارة الإلكترونية ليست مجالاً للإمكانيات غير المحدودة. ففي الحقيقة، تعتبر التجارة الإلكترونية منطقة تنافسية للغاية لأن تغيير العميل للبائع لا يتطلب تقريبًا وقت أو جهد. عليك أن تقدم للعملاء ما يتوقعونه، وذلك كي لا يفكروا مرة ثانية بشراء المنتجات من شخص آخر.
في مجال المبيعات عبر الإنترنت، فإن السعر والأولوية ليس أمرًا مهمًا حقًا. فما يهم بالفعل هو مدى بساطة عملية التصفح وعدم إرباك المستخدمين.
يمكنك تقديم أرخص / أفضل منتج في السوق – ولكن إذا كان المستخدمون غير قادرين على تحديد موقعه، تكون قد فشلت بالفعل بخلق المبيعات.

إن توفير إمكانية الاستخدام يعني أنك تقوم بتسهيل عملية الشراء. ولن يتطلب الأمر أكثر من عدد قليل من النقرات بالنسبة للمستخدمين ليقوموا بشراء منتجك.
لقد قمنا بجمع قائمة من النصائح والحيل التي يمكن أن تشرح لك كيفية تصميم موقع تجارة إلكترونية بحيث يكون صالحًا للاستخدام ضمن الحد الذي يمكن فيه توفير معدلات تحويل كبيرة.
إن التجارة الإلكترونية هي مستقبل الأعمال. وقد ارتبطت عند ظهورها بالبداية بمفهوم التجارة المشبوهة، لكنها أصبحت الآن جزءًا من وجودنا على الإنترنت، تمامًا مثل تحققنا من رسائل البريد الإلكتروني.
من الواضح بأن التسوق عبر الإنترنت لا يقوم به الجميع، ولكن معظم الأشخاص يجدونه مريحًا وذو أسعار معقولة أكثر. وقريبًا جدًا، لن يكون هناك شخص واحد لم يقم بعملية شراء واحدة على الأقل من الإنترنت.

لمحة عامة عن تصميم موقع تجارة إلكترونية

يبدو الأمر بمثابة تحدي، ولكن في الواقع فإن تصميم موقع تجارة إلكترونية لا يختلف كثيرًا عن أي تصميم ويب آخر.

ومع ذلك، هناك بعض المبادئ التي يجب أن تأخذها بعين الاعتبار قبل “القفز” إلى عملية التصميم.
يجب التعامل مع مواقع التجارة الإلكترونية بعناية خاصة لأنها تتطلب معلومات حساسة من المستخدمين (بيانات بطاقات الائتمان والمعلومات الشخصية المرافقة لها). ولذلك فإن مصممي هذه المواقع يواجهون تحديًا حقيقيًا في تصميم موقع جميل يستحق ثقة العملاء به.
تعتبر عملية التصميم بطريقة أو بأخرى أسهل بالنسبة للعلامات التجارية التي تم تأسيسها في وقت سابق، والتي تكون منتجاتها / خدماتها معروفة لدى الجمهور. وفي الوقت نفسه، يقع عليها عبء إعادة تأكيد سمعتها من خلال التصميم المتوقع.
ومع ذلك، فإن الأمر يعود للمصمم ليقرر هو فيما إذا كان يرغب بالتمسك بالتصور ذاته، أم أنه سيحاول الوصول لتصميم جديد كليًا (شعارات جديدة، صور، وما إلى ذلك). ومن المرجح أن يعتمد ذلك القرار على الميزانية.

الأمر الآخر الذي يتمتع بأهمية كبيرة أيضًا هو طول إجراءات الدفع. يجب أن يكون لديك عدد قليل من الصفحات بين الصفحة الرئيسية وصفحة الدفع، ويجب أن تسلط الضوء على هذه الميزة منذ البداية.
هل تحاول تصميم موقع تجارة إلكترونية مثالي؟ تأكد من أن تمتلك الإجابات عن الأسئلة التالية:

1. هل يمكن التعرف على أنواع المنتجات التي أعرضها للزائرين خلال الثواني الخمس الأولى؟
2. هل أثق بهذا الموقع بما يكفي لأقوم بإدخال معلومات بطاقة الائتمان؟
3. هل موقعي سهل الاستخدام؟ هل تعتبر مدة 30 ثانية كافية للعملاء للعثور على المعلومات التي يحتاجونها؟
4. هل أقدم اقتراحات / خيارات كافية للزوار العشوائيين؟
5. هل المحتوى أصلي وجذّاب بالنسبة للزوار؟

إجابة سلبية واحدة على أحد تلك الأسئلة كافية للتعبير عن وجود مشكلة خطيرة في التصميم يمكن أن تدفع المتسوقين بعيدًا وتؤثر سلبًا على معدلات التحويل. لذلك، يجب عليك التعامل مع هذه الأسئلة بأفضل طريقة ممكنة لتضمن بأن المستخدمين سيعودون إلى موقعك.

العناصر الثلاثة الأساسية لكل متجر على الإنترنت

1. الثقة: لا يمكن أن تكون مواقع التجارة الإلكترونية ناجحة، إلا إذا نالت ثقة المستخدمين. المسألة حساسة فعنصر واحد ممكن أن يزعزع ثقة المستخدمين ويحثهم على الانتقال للتسوق من موقع آخر. ولهذا السبب فإن كل عنصر من عناصر متجر التجارة الإلكترونية لديك يجب أن يحاول نيل ثقة المستخدم.

2. البساطة وسهولة الاستخدام: إن البساطة لا تعبر دائمًا عن التصميم، كما تفعل العمليات التقنية. حيث يجب أن تكون عملية الشراء بسيطة ويجب ألا يلتبس على العميل أي شيء. مرة أخرى، أي عنصر سلبي يمكن أن يجعل عربة التسوق فارغة والمبيعات منخفضة.
3. الشفافية: تذكّر بأن الاتصال عبر الإنترنت هو طريق ذو اتجاهين. يجب أن تكون دائمًا في خدمة عملائك وتقنعهم بألا يترددوا بالتواصل معك في أي لحظة. بعض الطرق الأكثر شعبية للقيام بذلك هي الدردشة عبر الإنترنت، وضع رقم الهاتف بمنطقة واضحة في الزاوية اليمنى العليا أو وضع زر “اتصل بنا” بشكل واضح. كما يجب أن تقوم أيضًا بتوفير معلومات عن متجرك / عملك بحيث يدرك المتسوقون عبر الإنترنت بأن موقعك يعمل بشكل حقيقي ولا ينطوي على عمليات احتيال.
عليك أن تقوم بتقديم بياناتك بطريقة واضحة وموجزة وأن تقوم أيضًا بتسليط الضوء على خيارات الشحن وإعادة السلعة. إن لم يكن هناك أي ميزات أخرى، فإن مثل هذا السلوك يمكن أن يحقق لك توصيات وردود فعل إيجابية، كما يمكن أن يزيد من مدى شعبية موقعك ورواجه.

اقتراحات وممارسات يوصى بها لمواقع التجارة الإلكترونية

كما هو الحال دائمًا، فإن تصميم موقع للتجارة الإلكترونية يمكن أن يتحول إلى الجزء الأكثر تعقيدًا من جدول أعمال التسويق الخاصة بك.
ومع ذلك، فإن هناك العديد من العادات الجيدة والتي تنطبق على كل مواقع التجارة الإلكترونية وتقريبًا كافة المنتجات المتاحة للشراء عبر الإنترنت. دعونا نتحقق من بعض منها:

لا تترك أي مساحة لالتباس الأفكار فيما يتعلق بتوفير المعلومات الشخصية

ضع نفسك قليلًا مكان العميل.
هل تثق بتقديم معلومات سرية في موقع جديد نسبيًا، غير معروف ومشكوك بأمره، حيث ليس هناك سوى كاتب على الجانب الآخر يقبع في مكتب ويقدم لك كلمات فقط مقابل نقودك؟ هل ستقوم بالتسجيل والدفع؟
في الواقع، إنه إجراء غامض. فمن الطبيعي تمامًا أن يشعر الزائر بالخوف وأن ينظر لأصغر التناقضات ليقوم بتبرير شكواه.
كما أنه من الطبيعي بالنسبة للزائر أن يقوم بتصفح معلومات الاتصال وقضاء بعض الوقت في معاينة الصور لمعرفة فيما إذا كانت متوفرة على بعض المواقع الأخرى.
إننا نوصي المصممين بأن يضعوا مقدمة واضحة ومفصّلة قدر الإمكان، بحيث لا يكون لدى المستخدمين أي مشكلة للانتقال مباشرة للقيام بعملية الشراء.

ركّز اهتمامك على الصور الكبيرة

نعم، إنك بحاجة لأكوام من الصور الكبيرة وذات الجودة العالية لتقوم بتقديمها للعملاء المحتملين.
ضع في اعتبارك بأنه العميل ليس لديه فرصة مشاهدة المنتج الذي يشتريه، كما تعتبر الصور استراتيجية رائعة لجذب العميل إلى المنتج.

أما بالنسبة لجميع الأمور الأخرى، فنادرًا ما يقوم الناس بمقاومة المناظر الجميلة والجذابة، لذلك تأكد من تقديم أفضل الصور الممكنة.
قم بمراعاة التفاصيل. قم تصوير المنتج من كافة الزوايا وتأكد من أن الصور قابلة للتكبير. قم أيضًا بإنشاء معرض كامل واجعله متوفرًا في كل صفحة خلال عملية الشراء.

حافظ على وقت المستخدمين

كما تعلمون وحسب تجربة شخصية، فإن 90٪ من المستخدمين تقريبًا يقومون بالتصفح دون وجود هدف معين لديهم. وما يهمك حقًا كمنتِج هو أولئك الأشخاص الذين يمثلون نسبة 10٪ والذين يقومون بزيارة صفحتك الرئيسية ويمتلكون فكرة واضحة لما يريدونه.

أقل ما يمكنك القيام به هو أن تقوم بتسهيل عملية التصفح ومساعدتهم في تحديد معلوماتهم خلال أقل من 30 ثانية.
كما يجب أن يكون الجزء العلوي لموقعك الإلكتروني واضحًا ويجيب على كافة الأسئلة التي قد يسألها الزائرون عند وصولهم إلى موقعك: ماذا يبيع هذا الموقع؟ من هؤلاء؟ لماذا يجب أن أثق بهم؟ بالطبع، قد يكون هناك الكثير من الأسئلة وذلك اعتمادًا على جمهورك.
يعتبر الالتزام عنصر رئيسي لا يجب المساس به وذلك بهدف الحفاظ على التفرد وجمال المظهر. حيث يمكن التخلي حتى عن تلك المواقع الرائعة والأكثر تطورًا في حال فشلت في تقديم المعلومات اللازمة.

تسليط الضوء على المنتجات ذات الصلة

ما لم تكن متخصصًا بمنتج / خدمة واحدة، فعليك أن تقوم بربط صفحات المنتج بصفحات المنتجات ذات الصلة (الأحذية مع حقائب اليد، الأقراط مع القلائد، الخ).
وعليك أن تكون واعيًا إلى أن العلاقة يجب أن تبدو طبيعية وافتراضية، وذلك عوضًا عن وضع رابط بأسفل الصفحة.

التفرد يأتي مع الارتباط

بالمتوسط فإن معدل الارتداد للزوار الذين يقومون بزيارة المواقع التي تم إضافتها مؤخرًا لا يزيد عن 40٪.

وبمصطلحات المصممين، فإنه من المرجح أن يغادر 40٪ من الأشخاص موقعك في نفس اللحظة التي يقومون فيها بزيارته. لكن السؤال الحاسم هو: كيف يمكنني أن أحافظ عليهم في الموقع؟
كن مميزًا في وصف منتجاتك. قد يبدو الوصف عبارة عن عبارات جاهزة ومكررة، لكن ذلك لا يعني بأنها فقدت قوتها.
وعوضًا عن كتابة الوصف الذي يرفقه المصنعون، كن مبدعًا وقم بكتابة الوصف الذي يقوم بترسيخ العلاقة مع علامتك التجارية. إن هذا التكتيك من شأنه أن يساعدك بالتأكيد لأن تكون بارزًا بين كل تلك المواقع، وسيساعد المستخدمين في الاستمتاع بعملية الشراء.

أخيرًا وليس آخرًا - الدفع

إن قاعدة البساطة تنطبق أيضًا على عملية الدفع. في الحالة المثالية، يجب ألا تستغرق عملية الدفع أكثر من صفحة واحدة مليئة بالمراجعات، سلة التسوق، معلومات الفواتير أو تفاصيل الشحن. ومن المهم أيضًا أن يكون هناك زر تأكيد إضافي، بحيث لا يشعر العميل بأن عملية الشراء تمت بسرعة كبيرة.
تعتبر مسارات الدفع الطويلة من أكثر الأخطاء شيوعًا في مواقع التجارة الإلكترونية. حيث تتكون عادةً من الكثير من الصفحات، أو تقوم بإعادة توجيه المستخدمين إلى الفواتير، الشحن، معلومات سلة التسوق قبل أن يصلوا لأوامرهم النهائية. وفي الحقيقة فإن هذه الإجراءات تخيف المستخدمين.
إن تلك العملية تقودهم من تعقيد إلى لآخر، ولذلك فمن المحتمل أن يتخلوا عن عملية شرائهم.
مهما نويت أن تكون عملية الدفع قصيرة، لا تنسى أن تضع قسم المراجعة خلالها، بحيث يمكن للعميل التحقق من طلبه قبل شرائه. وحسب التجربة فإن عدم وجود خيارات للمراجعة يمكن أن يخفف من حماس المستخدمين.

اختبر موقعك أولًا

فيما يلي بعض الاختبارات السهلة والمهمة التي يمكنك استخدامها قبل إطلاق موقعك:

1. قم باختبار زر ‘إضافة إلى السلة’، وخاصة من حيث الحجم واللون أو المكان.
2. قم باختبار فئات المنتجات التي تظهر أثناء انتقال المستخدم في الموقع، وحاول أن تضيف فئة جديدة لترى كيف ستبدو.
3. قم باختيار المنتجات الأكثر مبيعًا لتدعم الصفحة الرئيسية
4. قم بتقديم عرض خاص: قم بعرض الاشتراك واعمل على دعوة الأشخاص ليقوموا بتجربته.
5. حاول استخدام القسائم وقم بتقدير تأثيرها على معدلات التحويل لديك.

العبارات التي تشجع المستخدم على اتخاذ إجراء

تعتبر العبارات التي تشجع المستخدم على اتخاذ إجراء معين عنصرًا أساسيًا لنجاح أي موقع تجارة إلكترونية. ولكن إن لم تكن تلك العبارات فعّالة، فمن المرجح أن يؤثر ذلك سلبًا على المبيعات والتحويلات.

وبشكل عام، يستخدم تصميم موقع التجارة الإلكترونية نوعين أساسيين من العبارات: عبارات محددة لكل منتج (عندما يبيع الموقع أكثر من منتج)، أو عبارة موحدة لجميع المنتجات، وتكون متاحة في كل صفحة سواء عند التصفح أو عرض النتائج.
يبدو كلا النوعين متشابهين وكلاهما يحوي عبارات مثل “إضافة إلى السلة”. وتستخدم المواقع التي تسعى للأصالة عادةً صياغة معينة، مثل “اشترِ الآن”، “اطلب الآن”، وما إلى ذلك.

أفكار أخيرة

أهم تفاعل للمستخدمين هو انطباعهم الأول عن موقعك. إنه يستهلك حوالي ثانيتين من وقتهم فقط، لكنه يدوم إلى الأبد.

نعم ليس أمرًا عادلًا. لكن كمصمم لموقع تجارة إلكترونية، ليس لديك أكثر من ثانيتين لجذب الانتباه وزيادة التحويلات. تلك الثانيتين هي أداتك الوحيدة لتظهر الجمال، الفاعلية، وبأسعار معقولة.
إن هذه المهمة الصعبة لا تترك مجالًا للأخطاء في تقديم متجرك على الإنترنت وتجعل من الانطباع الأول أمرًا عظيمًا.
مرة ثانية – إنه أمر قاسٍ، ولكن نجاح التصميم وقرارات المستخدمين تعتمد بشكل كامل تقريبًا على المظهر والعناصر المرئية.
من أجل قيامك بإبهار عملائك، فإنك بحاجة إلى التعرف على العناصر الأساسية للتصميم والتوصل إلى الأفكار الأصلية في الوقت نفسه. إن القواعد والمبادئ الأساسية المبالغ بها قد لا تؤدي إلى نتائج مرضية، ولكنها قد تخيب ظن العملاء وتجعلهم يسارعون في العثور على بديل مناسب.

ترجمة -وبتصرّف- للمقال Guide on How to Design an eCommerce Website and Online Store لصاحبه Iggy

مع بداية كل عام جديد تجدنا نفكر في الطرق التي تمكننا من تحسين أنفسنا للأفضل، فلا ضَير من توجيه البعض من تلك الطاقة لتحسين مظهر الموقع والقيام بعملية تجميل خفيفة له. حينما يتعلق الأمر بتجديد مواقع الانترنت فليس هناك حاجة للقيام بعملية تجديد كاملة ما لم يتحتم ذلك. وإلا فبعض الشّد والتزيين يكون كافيًا لإعطاء موقع الوردبريس حلة جديدة. اقتراحي هو البدء بتغيير خطوط الطباعة.

الخطوة الأولى: تقييم خطوط الموقع الحالية

قبل الشروع في إحداث أي تغييرات كانت من الأحسن إلقاء نظرة تحليلية لتقييم الموقع حتى نتمكن من معرفة نقاط الضعف و كذا المجال المتاح لإحداث التغييرات. من أجل تقييم خطوط الموقع، يتوجب علينا التحقق من النقاط الآتية

1- مصدر اختيار الخط الحالي

هل نعلم من أين جاءت خيارات الخطوط الحالية للموقع، هل هي الخطوط الافتراضية للوردبريس أم أنها كانت مختارة وفق نزوةٍ آنيةٍ. على الرغم من أنها تبدو بمظهر جيد إلا أن هذه الخطوط لم تكن مختارة بعناية لتناسب علامة الموقع التجارية الفريدة من نوعها فمفتاح التصميم هو التناسق، بداية من الصور المستخدمة وصولًا إلى نوعية الخطوط.

خطوط جوجل مكان رائع للبحث عن الخطوط وزيادة عن ذلك فهو مجاني

2-هل نملك مجموعة الحروف كاملة؟

لنفرض أنه قد حددنا نوع الكتابة التي تتماشى مع تصميم الموقع، فما العمل إن اكتشفنا أن نوع الخط لا يحتوي على كل مجموعة الأحرف كاملة. هل سنُجبِر الكُتاب والمحررين على تجنب الأحرف التي لا يتضمنها نوع الخط.
لتجنب ذلك يتعين علينا قبل اختيار نوع الخط التحقق من أنه يتضمن كل الأحرف، الأرقام والرموز عبر الرجوع إلى مصدره، هناك يوجد حقل معاينة يتيح لنا معرفة ما إذا كان يحتوي على مجموعة الحروف كاملة أو لا.
للتحقق من أن نوع الخط يحتوي على كل الأحرف اللاتينية أدخل السطور التالية للتحقق

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
àèéïöùüçûæÆœŒ
.،؛:؟! / [] {} () * - - ... "" '' _
0123456789
≤≥ ÷ + = ≈ ≠ ± - · √ ° @ € £ $٪ & * | «» \ <> / ~ "" §¶ © ® ™

3- مسألة القابلية للقراءة

بإمكان مستخدمي نظام التشغيل ماك تنزيل برنامج Font Book حيث يسمح هذا البرنامج لمستخدميه بالقيام بما يلي:

• التحقق من وجود مجموعة الحروف كاملة.
• معاينة الخط رقميًا، لمعرفة كيفية ظهوره على الموقع.
• طباعة مجموعة الأحرف كاملة في أحجام وأنماط مختلفة لتحديد أكثرها ملاءمة للقارئ.
• تخزين الخطوط وحفظها منظمةً لإعادة استعمالها لاحقًا.

4-ملائمة نوع الخط للجوال

يتواجد العديد من البرامج على الإنترنت مثل Responsinator تسمح بالتحقق من مدى توافق مواقع الإنترنت على شاشات الجوال، نفس هذه الاداة تتيح معاينة توافق نوع الخط مع الجوال. إن التوصية القياسية لضبط حجم الخط للتوافق مع عديد المنصات هو مقياس 16 نقطة أو أكثر. قد لا يكون هذا هو الحال الأمثل في حالة الخطوط المنمقة جدًا، لذلك يتوجب التأكد باستعمال واحدة من هذه الأدوات قبل الالتزام بخط معين.

5- مناسبة لون الخط للقراء

إن تحسين نوع خطوط الموقع لا يقتصر على العثور على نوع الخط أو الحجم الصحيح فقط، بل يتعدى إلى إيجاد اللون المناسب أيضًا. استخدام لوحة التصميم يُبًّيِن أنه بغض النظر عن الألوان المختارة فلون الخط الأساسي والثانوي دائمًا ما يكون أسودًا أو بدرجات ظل اللون الرمادي.

لوحة التصميم

6-اختبار إمكانية وصول الخط

يعرف مطورو الويب المحترفين كل التقنيات التي تجعل من مواقع الويب متاحة للجميع. مع ذلك، فإذا أردنا إعطاء خطوط الموقع مدى عالمي، فلا بد من إيلاء من يعانون قصورًا بصريًا أو من عمى الألوان اهتمامًا بالغًا. برنامج Color Oracle يحاكي كيف تظهر مواقع الانترنت للمصابين بعمى الألوان. باستعراض ودراسة التوصيات التي قدمتها المؤسسة الأمريكية للمكفوفين. تجعل الكتابة والخطوط أكثر قابلية للقراءة، من حيث حجم الخطوط، نوعها، ولونها، مدى التباين والبعد بين الكلمات والأسطر.

الخطوة الثانية: اتباع أفضل الخطوات للمساعدة في اختيار الخطوط

ان اختيار الخطوط هو قرار شخصي بحت، يشبه إلى حد كبير اختيار تصاميم مواقع الإنترنت فكل وذوقه واختياراته. لكن بإمكاننا دائمًا تنظيم و ذِكر الخطوات الواجب إتباعها أثناء اختيار نوع جديد من الخطوط.

1. مطابقة العلامة التجارية: عند اختيار الخطوط يتوجب احترام قواعد التصميم المتبعة أثناء إنشاء العلامة التجارية للموقع.
2. البساطة: تَجَنُب استعمال أكثر من ثلاثة أنواع من الخطوط في الموقع الواحد، مع الحرص على ضمان سهولة مقروئية الخطوط المختارة.
3. الاتساق: يتوجب استعمال نمط خطٍ مُوَحَد في كل الموقع، حيث يجب المحافظة على نفس نوع الخط، حجمه، لونه وأسلوبه في جميع عناوين الموقع. ونفس الشيء ينطبق أيضًا على نصوص الموقع.
4. التباين: بجانب المحافظة على الاتساق يتوجب إنشاء تباين بين عنوان النص ومحتوى النص. على التباين أن يكون لافتًا للنظر دون أن يكون خارجًا عن الإطار. على سبيل المثال يمكننا استعمال خط cursive مع خط handwritten.
5. التحقق من الالوان: كما ذكرنا سابقًا، يعتبر اللون الأسود أو درجات ظِل اللون الرمادي الداكن من أفضل الألوان المناسبة للقراءة. دون نسيان الأخذ بعين الاعتبار لون الخلفية (نص فاتح على خلفية داكنة و نص داكن على خلفية فاتحة).
6. استعمال الاحرف اللاتينية الكبيرة: يتوجب الحذر عند استعمال الأحرف اللاتينية الكبيرة فهي صعبة القراءة نوعًا لذلك يجب استعمالها بتحفظ.
7. إنشاء تسلسل هرمي: على الرغم من أن القاعدة العامة هي استخدام حجم خط لا يقل عن 16 نقطة فهذا لا يعني أن يكون حجم كل خطوط الموقع مماثلًا لذلك. فيجب أن يتم تحديد حجم خاص بكل من العناوين، العناوين الفرعية والنص الأساسي لتحديد تسلسل هرمي واضح.
8. احترام المسافات: بعد اختيار نوع خطوط الموقع، يجب تفقد شكل و مظهر النصوص. والعمل على تحسين المسافات بين الأسطر و الكلمات لجعلها سهلة القراءة والفهم. كقاعدة عامة كل سطر يجب أن لا يتعدى خمسة عشر (15) كلمة.
9. إجراء إختبار أ/ ب : طرح مظهرين عامين للموقع بإختيار مجموعتين مختلفتين من أنواع النصوص و إجراء نوع من سبر الآراء لمعرفة شعور المستخدمين إزاء المظهرين واختيار الأنسب بينهما.

ترجمة –وبتصرّف- للمقال How to Give Your WordPress Site a Font Facelift لصاحبته Brenda Barron

حقوق الصورة البارزة محفوظة لـ Freepik

يمكن لتطوير عملية تصميم تَتْبعها في كل مرة تستلم فيها مشروعا جديدا أن يساعدك كثيرا في تحقيق نتائج تسعدك أنت وعملاءك؛ فبوصفك مصمّمًا تعلم أن عملك ينطوي على مساعدة عميلك في بيع خدمته أو منتجه، وهدفك النهائي هو مساعدة المشاهدين على فهم الرسالة، الأمر الذي بدوره يحقق النتائج المرجوة لعميلك.
سواء كنت مصمم غرافيك أو مصمم وِب أو مبرمجا أو غير ذلك، فوجود أسلوب جاهز سيساعدك على إنجاز عملك على نحو أسرع، بالإضافة إلى المحافظة على ترتيب الأشياء وعلى علاقة إيجابية بين المصمم والعميل.

1. بدء المشروع

واحدة من أكثر الخطوات أهمية في عملية التصميم هي تجميع المعلومات التي ستحتاج لها. يتم ذلك عادة إما باجتماع مباشر وجهًا لوجه مع العميل أو عبر استبيان (على الإنترنت أو خارجها) أو قراءة تفاصيل المشروع كاملة عبر موقع مستقل أو حتى بمحادثة عبر سكايب إن كنت ترغب حقا في إقامة علاقة شخصية.
بجمع هذه المعلومات، أصبحت الآن تعرف أهداف عميلك، وبإمكانك أن تركز على التفاصيل لإدراجها في ملفك الملخَّص.

الملخَّص

بالرغم من أنه يبدو عملا زائدا عن الحاجة، إلا أن لملخَّص التصميم فائدتين أساسيتين مهما بدا المشروع كبيرا أو صغيرا بالنسبة لك فهو:

1. يضمن معرفة العميل بما يريده من المشروع.
2. يعدّ مرجعا لك خلال العمل على المشروع.

كلما كانت المعلومات التي يزودك بها العميل أكثر، كلما كانت النتائج أفضل للجميع (وبخاصة للعميل). قد تختلف الموضوعات المتضمَّنة في ملخَّص التصميم، لكن بعض النقاط الجيدة لتبدأ بها يمكن أن تكون:

• ملف الشركة: ملخص عن أعمالها.
• الموقع في السوق: تقييم خدمات/ منتجات الشركة بالنسبة للمنافسين.
• مهمة التواصل: ما هي الرسالة التي يحاولون إيصالها وما هي السبل المستخدمة لذلك (على سبيل المثال الشعار، نص الإعلان، التصوير الفوتوغرافي وغيرها).
• السوق المستهدف:الخصائص السكانية، العمر، الجنس، الدخل، العمالة، الجغرافيا، أسلوب الحياة الخاص بأولئك الذين يريد العميل الوصول إليهم.
• الأهداف: – ما هي النتائج القابلة للقياس التي يريد العميل تحقيقها؟
• الجدول الزمني / الموعد النهائي: جدول زمني واقعي للكيفية التي ينبغي أن يسير المشروع عليها.

من المقبول أيضا في هذه المرحلة، أن تطلُب دفعة مقدمة عن النصف الأول من المشروع.

2. البحث

بعد أن تلتقي بالعميل وتفهم جيّدًا المهمة الموكلة إليك، حان الوقت الآن لتشمّر عن ساعديْك.

بعد مراجعة المواد التي قُدمت إليك، بإمكانك أن تبدأ البحث. عادة ما تأخذ هذه المرحلة في الحسبان المنافسين واتجاهات السوق ومفاضلة الخدمة/المنتج وتاريخ الشركة ومستقبلها أيضا.

لن تكون هذه المرحلة هي المفضلة لديك، لكنها تستحق العناء في النهاية. فليس هناك أسوأ من أن تصمم شعارا جميلا لتكتشف لاحقا أنه مشابه تماما لشعار أحد المنافسين. سوف تجني ثمار الوقت الذي تقضيه في مرحلة البحث، ثق بذلك.

3. الإستراتيجية

يمكن لهذه الخطوة أن تتغير تبعا لحجم المشروع الخاص بك، لكن من الأفضل أن تحدّد إستراتيجية تعمل وفقها قبل أن تضع القلم على الورقة. يمكنك من خلال هذه الإستراتيجية أن تحلّل البحوث التي جُمِعت وتتخذ قرارا بشأن معايير التصميم والأداء الوظيفي.

يمكن لهذا الأمر أن يكون بسيطا كتشارك قالَب عبر جميع المواد التسويقية. ويمكنك تقديم هذه الإستراتيجية للعميل لتحصل على القبول أو الرفض قبل المضي قدما بها، على أمل أن تحصل على مزيد من الأفكار الإبداعية.

4. التطوير

حالما تصبح لديك إستراتيجية واضحة، أنشئ مفاهيم أولية للتصميم بالاعتماد على الإستراتيجية التي وضعتها. يمكنك تطوير هذه المفاهيم بعدة طرق حالما يأتيك الإلهام، لكن أكثرها فعالية هي:

• الخريطة الذهني Mind map: مخطَّط يُستخدم لتمثيل الكلمات والأفكار والمهام المرتبطة بفكرتك الأساسية. وهي تشجع العصف الذهني لتخطيط المهام وتنظيمها.
• القصة المصورة: وتعني التخيّل المسبق للصورة المتحركة والرسوم المتحركة وغيرها عن طريق تنظيم الرسوم التوضيحية ضمن سلسلة.
• الكتابة الحرة: طريقة رائعة لتسجيل أفكارك على الورق ومن ثم التوسع بها.
• إنشاء التخطيط: ارسم تخطيطات من مصادر الإلهام التي جمعتها، عدل صيغ الألوان والطباعة حتى تحصل على فكرتك ثم استكشفها أكثر.

طوّر الكثير من المفاهيم المختلفة باستخدام الطرق المذكورة سابقا. فالفكرة هنا هي إنشاء الكثير من الخيارات المختلفة قبل اختيار أكثرها قابلية للتطبيق. يمكنك تخفيض عدد هذه الأفكار بمساعدة العميل إلى بضعة أفكار لمزيد من التطوير والتحسين.

5. التقديم - التحسين

إن أفضل طرق التقديم في الغالب تكون على هيئة ملف PDF يتضمن في سياقه التصميم. يأتي الآن دور العميل في مراجعة التصاميم وإبداء الرأي فيها معتمدا على أهدافه وحاجات جمهوره المستهدف.

في هذه المرحلة، يُكلّف المصمم بإجراء التغييرات على العناصر الجمالية بناءً على طلب العميل، أو بوضع اللمسات النهائية على تصميم اتُّفِق عليه.

6. الإنتاج - الإطلاق

يستطيع المصمّم عند اعتماد المُقتَرح أن يكمل التصميم النهائي لتقديم المُستَلمات Deliverables، والتي قد تتضمن تصاميم للطّباعة وأخرى للوِب.

تُسلَّم ملفات المشروع غالبا إلى طرف ثالث يختلف حسب المشروع أو الوسائط. تتضمّن الملفات:

1. ملفات ما قبل الطباعة والملفات الجاهزة للطباعة.
2. ملفات للنشر عبر وسائل الإعلام.
3. مستندات الوِب.

7. الإنجاز

لا شيء أكثر مكافأة من تسليم مشروع كامل لعميل راض، لذا هنّئ نفسك. بإمكانك الآن مطالبة العميل بفاتورة المشروع المتبقية.

عند وجود خطة ثابتة لإتمام مشروع التصميم، فأنت لا توطّد علاقاتك مع عملائك فحسب، لكنك تحصل أيضا على الكثير من التقدير عندما يتعلق الأمر بصنع شيء مميّز لهم. اعتبرها عقبة أخرى يتوجب عليك تخطيها.

ترجمة - بتصرّف - للمقال The Seven Step Design Process. 

حقوق الصورة البارزة محفوظة لـ Freepik

عندما أطلقنا تطبيق المحادثة الجديد في السنة الماضية، أضفنا للعملاء إمكانية إنشاء ملفات تعريف شخصية غنية بحيث يتأكد المستخدمون أن هناك دائما شخصا حقيقيًّا في الجهة المقابلة. والمشكلة؟ لا أحد يستخدم الميزة. بعد أن أطلقناه بوقت قصير, أكمل 13-15% من العملاء فقط ملفات التعريف الخاصة بهم. ملئت أغلب الملفات جزئيا بينما تُركت العديد منها غير ممسوسة.

بعد التحدث مع الزملاء في فرق البحث والتحليل لدينا، اكتشفنا سببيْن رئيسيْن لهذا الاستعمال المنخفض:

1. الوضوح: فقد كانت القدرة على إنشاء ملفك الشخصي محشورة في أماكن تصعب رؤيتها ضمن التطبيق.
2. التثقيف: فقد كان الناس غير مقتنعين بأهمية الملفات الشخصية في تأسيس علاقات شخصية مع عملائهم.

جزء واحد من حل أشمل

وُجِدَت الملفات التعريفية في أجزاء عدة من المنتج، ممّا يعني أننا اضطررنا إلى إشراك فرق عمل مختلفة لزيادة تبني الميزة. دمَج فريق التطوير إنشاء ملفات التعريف في عمليّة التسجيل، بينما أعطى المنتج وضوحا أكبر لإمكانية تحرير ملف التعريف ضمن التطبيق نفسه.

بجميع الأحوال، كانت هناك فرصة كبيرة لزيادة الفعالية وذلك بالاستفادة من ميزات تطبيقات هواتفنا المحمولة. فقد قام حوالي 45% من أعضاء فريقنا ممن تحدثوا مع عملائهم باستخدام تطبيقاتنا على أندرويد أو iOS.

البدء

ينشئ المصممون في Intercom، بالنسبة لكل مشروع جديد، قائمة بسيطة بالأمور الأساسية المسببة للمشكلة التي يحاولون حلها. الأمر الذي يساعد بالتفكير في حلول عامّة. وحلولنا كانت كما يلي:

1. زيادة توعيّة المستخدمين الذين لم يكملوا ملفاتهم التعريفية أو أكملوها جزئيا.
2. تثقيف المستخدمين بأهمية ملفات التعريف العامة.
3. تسهيل عملية تعديل ملفات التعريف للمستخدمين في الوقت الذي يريدونه.

التفكير في الأنظمة

أخذنا في البداية ملفات التعريف لنساعد الفريق في فهم النظام وتحديد المكونات الخاصة التي تحتاج الأولوية. مما يعني إعداد جرد بالأجزاء والحالات والقواعد وغيرها. إليك مثالا عن منشور كان معلقا على حائط مساحة العمل الخاصة بنا.

الأفكار تأتي من كل مكان

ساعد توثيق النظام الفريق في مناقشة العقبات التقنية في وقت مبكر، وحتى في هذه المرحلة المبكرة قدم فريق الهندسة اقتراحات لم يكن فريق التصميم قد فكر بها. على سبيل المثال، ذكر أحدهم أن باستطاعتنا استخلاص بيانات من المصادر الموجودة لملْء مكونات محددة ضمن ملف التعريف. بما أن اسم الشخص موجود لدينا عندما يسجّل دخوله عبر تطبيق الجوّال، فلم لا ننسخ هذ الاسم إلى ملف التعريف ونوفر عليه زمن إدخال تلك البيانات يدويا؟
بعد رسم بعض الاتجاهات، التقينا بEmmet مدير تصميم المنتجات لدينا، للحصول على ردود الفعل واتخاذ قرار بشأن الخطوات التالية. وفيما يلي الخيارات الأربعة التي قدّمناها.

• الخيار الأول

• الخيار الثاني

• الخياران الثالث والرابع

إن المكونات الأساسية هنا هي المقاطعة (الإزعاج) والتثقيف . لا نريد أن يكون التثقيف قابلا للتجاوز بسهولة، كما نريد مساحة لنتمكن من تثقيف المستخدمين بأهمية ملف التعريف ومكوناته. إلا أننا نعرف أيضًا أن المزيد من المقاطعة يعني مزيدا من النفور (أي أن المستخدمين يريدون التجاوز)، لذا نريد الإبقاء على عدد الخطوات في الإرشادات التفصيلية منخفضا قدر الإمكان. قررنا في النهاية أن نستخدم خيار الإرشاد البسيط. وفيما يلي القرارات الناتجة عن الاجتماع. يا له من تقدم!

تصميم الحل

حتى هذه النقطة، اتخذنا قرارا بأمرين. سنضيف إرشادًا بسيطًا لتطبيقنا في البداية نسأل فيه عن أي مكونات مفقودة في ملف التعريف بغية ملئها (المقاطعة والتثقيف). كان هدفنا الثالث إضافة القدرة على “تعديل ملف التعريف من أي مكان”. قررنا العمل ضمن نمط التصفّح الموجود حاليّا في التطبيق وإضافة أيقونة تحرير بسيطة ضمن قائمة التنقل ينتُج عنها بدء الإرشاد.

Quote

إن إحدى قيمنا الجوهرية هنا في Intercom هي “فكّر بالكبير، وابدأ بالصغير“. حتى هذه النقطة كنا قد فكرنا بتحديث طريقة التنقّل في التطبيق . سيكون الانتقال من القائمة إلى شريط التبويب رائعا لعدة أسباب، لكنه في الوقت نفسه يتطلب جهدا هندسيا كبيرا وعلينا أن نتحرك سريعا.

يظهر يسار الصورة أدناه المستكشف الحالي، في ما يوجد المستكشف المُقترَح يمينها.

على مستوى النظام، أسسنا ثلاث حالات للمستخدمين ستتحكم بمدى تقدّمهم في الإرشادات. نعلم اعتمادا على التوجّه العام الي اخترناه أن المسار سيتكون من خطوات رئيسية ثلاث (انظر المخطط في الأسفل) نريد جعلها أكثر سهولة وأخف وزنا قدر الإمكان.

إن عملية الإرشاد واضحة جدا من حيث تصميم النظام. فهي مسار ثابت من البداية إلى النهاية، لكن المنطق يصبح أكثر تعقيدا عند أخذ حالات المستخدمين بالحسبان. نريدك أن تنتقل مباشرة إلى الجزء الأكثر صلة بحالتك عوضا عن إرغامك على المرور بعملية الإرشاد بكاملها. من المهمّ جدا أخذ خطوات خاصة بالمنصة بعين الاعتبار كأذونات الكاميرا. فليست كل خطوة شاشة جديدة.

مرة ثانية، طبعت هذه المخططات وعلقت في قاعة العمل. غالبا ما يكون المهندسون أمام الجدار يدقّقون سير العملية، وقد يجدون حالة حرجة تتطلب منا إجراء تغييرات. هكذا يبدو المخطَّط النهائي لخطوات الإرشاد.

التنفيذ

أصبح لدينا الأساس لنبني عليه كل جزء من الأجزاء. يحصل التصميم المرئي والتفاعلي لحظيًّا، مع معرفة أننا سنستمر بتعديل المرئيات أثناء بنائها. وجدنا بأنه يجب أن تكتمل التفاصيل المتعلقة بالتفاعلات المعقدة والرسوم المتحركة بأسرع ما يمكن (وهو السبب الذي تعدّ من أجله نماذج الوثوقية العالية عظيمة). لأنه من الصعب تغييرها لاحقا على عكس التعديلات على التصميم المرئي كتحديث الموجودات والألوان وغيرها.

استخدمنا Framer JS كطريقة لوضع نماذج أولية للأفكار التفاعلية الأولى، ومناقشتها مع المهندسين والاتفاق على ما يمكن عمله.حصلنا على مخطّط نهائي لتطبيق iOS بعد حوالي 12 نموذجًا أوليًّا.

من وجهة نظر التصميم المرئي، تتبع تطبيقات جوالاتنا عن كثب علامتنا التجارية. ويجب على أي تصميم جديد أن يحافظ على تلك اللغة بالإضافة إلى إعادة استخدام أية أنماط مطلوبة. عملنا مع فريق تصميم علامتنا التجارية على الرسوم التوضيحية لشاشات الافتتاح والتأكيد.

كان المحتوى هاما جدا لمشكلة التثقيف. توجب علينا أن نشرح أهمية الملفات الشخصية بطريقة موجزة. عمل التصميم عن قرب مع Elizabeth McGuane محللتنا الإستراتيجية التي تُعنَى بالمحتوى، لخلق تجربة أكثر إقناعا ومساعدة المستخدمين في فهم أهمية الملف الشخصي الجيد. في ما يلي مثال على توثيق إستراتيجية المحتوى.

الاختبار والتطويع

كنا مدركين للتشتت الذي سيحصل خلال العملية وأن عددا من الناس على الأغلب سيتجاوزون الإرشادات، حتى بعد إضافة خيار تذكير المستخدمين بإكمال ملفاتهم الشخصية لاحقا. كان إعداد مقاييس لمدى التقدّم في إكمال الملف هو الحل، بالإضافة إلى السماح بمدة تجريبية للتعديل بناءً على النتائج.

بالنسبة لنسختنا التجريبية الأولى، كان معدل الإكمال الأوّلي منخفضا جدا وبخاصة في أندرويد. قمنا بمجموعة من التعديلات على التصميم كإزالة نتوء زر “ذكرني لاحقا” وتبديل التخطيط وتعديل المحتوى ليصبح أكثر تسلية وأقل إملاءً للتعليمات. بعد حوالي أسبوع من التعديلات السريعة والمراقبة، ازداد معدل الإتمام على نحو مفاجئ. بفضل تدخل عدة فرق ارتفع معدل إكمال الملفات الشخصية الإجمالي من 14% إلى 46% خلال مدة شهر. لعبت عملية الإرشاد في الجوّال دورا هاما في هذا الارتفاع. خرجنا أيضا مع مجموعة كبيرة من النصائح الجاهزة التي يمكن أن نطبقها على مشروعنا التالي:

• تأكد من وضوح المشكلة لجميع المشاركين في العمل.
• ضع المشكلة تحت البحث والقياس، واستخدم أهدافا عامة لتوجيه حلولك.
• بغض النظر عما تقوم بصنعه، فكر بالكبير وابدأ بالصغير.
• يجب أن يعمل المصمّم إلى جانب المهندس في وقت مبكر وعلى نحو مستمر للحصول على الأفكار والتحقق من المفاهيم.
• يجب أن ينجز التصميم التفاعلي في أقرب وقت ممكن كونه من الأسهل التعديل على التصميم البصري أثناء إنشائه.
• اعرف عوامل نجاحك وتتبع نجاح حلولك وتأكد من وجود وقت للتعديل.

إن اتباع عملية منطقية وواضحة كهذه سيزيد بقدر كبير من فرصنا في إنتاج ميزة يستخدمها الناس فعلا. قد يبدو الأمر وكأنه مليء بالتفاصيل في البداية، لكن بمجرد أن تأخذها كعادة ستصبح جزءا من طبيعتك.

ترجمة - بتصرّف - للمقال Design principles: what to do when nobody is using your feature لصاحبه Brendan Fagan.

حقوق الصورة البارزة محفوظة لـ Freepik