لوحة المتصدرين

تحدثنا في الجزء الأول من هذه السلسلة، عن مفهوم الإنفوجرافيك وأهمية استخدامه باعتباره أحد أنواع المحتوى المستخدمة لأغراض التسويق، ثم تطرقنا إلى أهم أنواع الإنفوجرافيك واستعرضنا بعض النماذج لكل نوع. والآن نستكمل معكم الجزء الثاني من هذه السلسلة والتي سنستعرض خلالها أهم الأدوات المستخدمة لإنشاء الإنفوجرافيك. هناك العديد من البرامج التي يمكن الاستعانة بها لإنشاء الإنفوجرافيك، ويُمكننا أن نعمم هذا الأمر على جميع البرامج المستخدمة في إنشاء وتصميم الصور وتعديلها. فأي برنامج رسومات يمتلك الأدوات الأساسية والهامة لإنشاء الصور يُمكن استخدامه بطريقة أو بأخرى لتصميم الإنفوجرافيك، لكن بالطبع لن تكون النتيجة متشابهة بين مختلف البرامج. وأود أن ألفت انتباهكم بأن هذا الموضوع سيركز فقط على النواحي الفنية المتعلقة بالتصميم، بمعنى أنك قد تحتاج أثناء إنشاء الإنفوجرافيك إلى برامج مساعدة لتحليل الأرقام والإحصائيات مثل برنامج إكسل. وبصورة عامة فإن إنشاء الإنفوجرافيك ينحصر بالدرجة الأولى على برنامجين وهما: برنامج أدوبي Illustrator يعتبر البرنامج الأقوى والأبرز في إنشاء وتصميم الإنفوجرافيك، حيث يتمتع البرنامج بخصائص فريدة ومميزة تجعله الخيار الأول لجميع مصممي الإنفوجرافيك المحترفين. أغلب الإنفوجرافيك المميزة التي قد تصادفها أثناء تصفحك على الشبكة العنكبوتية تم إنشائها بواسطة هذا البرنامج العملاق، وبالتالي إن أحبب إتقان فن الإنفوجرافيك فينبغي عليك تعلم استخدام برنامج Adobe Illustrator. يُمكنك مطالعة بعض شروحات Illustrator في قسم التصميم بأكاديمية حسوب. برنامج أدوبي فوتوشوب طالما أنك تقرأ هذا الموضوع حاليًا فأنت بالتأكيد لك تجربة مع برنامج فوتوشوب أو على الأقل سمعت به من قبل، فالبرنامج غني عن التعريف حاله كحال معظم برامج شركة أدوبي الرائدة في مجال البرمجيات. يتم استخدام البرنامج في إنشاء الإنفوجرافيك باعتباره وسيلة أسهل وأسرع خصوصًا لمن ليست لديهم قدرات جيدة في التعامل مع برنامج Illustrator، أو في حال استخدامه لإنشاء الإنفوجرافيك التي لا تتطلب وجود رسومات دقيقة واحترافية. وهذا لا يعني أن الإنفوجرافيك الناتج باستخدام فوتوشوب ستكون جودته منخفضة، فالأمر يعود بصورة أساسية إلى مدى إتقان مستخدم البرنامج له، بمعنى أن البرنامج يوفر مرونة أكبر لغير المحترفين مقارنة ببرنامج Illustrator. يُمكنك مطالعة بعض شروحات فوتوشوب في قسم التصميم بأكاديمية حسوب. قد يطرأ في أذهان الكثيرين الآن السؤال التالي: هل يوجد خيارات أخرى بخلاف البرامج السابقة؟ في الحقيقة نعم يوجد العديد من الخيارات الأخرى فمثلاً هناك برنامج inkscape وهو برنامج رسومات مجاني وقوي ويُمكن لمتقني البرنامج استخدامه بصورة فعالة لإنشاء الإنفوجرافيك. لكن معظم هذه البرامج تحتاج إلى معرفة متفاوتة حتى تتمكن من إنشاء الإنفوجرافيك باستخدامها، وكلما كانت درجة إتقانك للبرامج السابقة ومثيلاتها أعلى، كلما استطعت إنشاء إنفوجرافيك بمواصفات أفضل. ولأن الكثير من المستخدمين ليست لديهم معرفة معمقة بهذه البرامج المتخصصة، ظهرت العديد من الأدوات والمنصات المتخصصة في تصميم الإنفوجرافيك على شبكة الإنترنت، والتي ساعدت آلاف المستخدمين في إنشاء الإنفوجرافيك بطريقة سهلة وبسيطة ودون الحاجة للتعامل مع برامج التصميم المتخصصة. لذلك دعونا نستعرض أهم الأدوات التي يُمكنك استخدامها عبر الشبكة العنكبوتية لإنشاء الإنفوجرافيك. Piktochart يمكنك باستخدام Piktochart إنشاء إنفوجرافيكس مميزة بسرعة وسهولة، حيث توفر الأداة مرونة كبيرة أثناء التعامل معها بالإضافة إلى مجموعة واسعة جدًا من القوالب والأيقونات والرسومات. تلقى الموقع إشادة إيجابية من قبل العديد من المواقع التقنية الكبرى والصحف العالمية نظرًا لما يقدمه من إمكانيات مميزة وفعالة في إنشاء الإنفوجرافيكس، من ضمنها توفير مكتبة صور وخرائط تفاعلية ومخططات مختلفة ومكتبة مصنفة للأيقونات والتحكم بالأبعاد بشكل كامل وسريع، كما يقدم piktochart حوالي 400 قالب إنفوجرافيك جاهز يُمكنك فقط التعديل عليه وتخصيصه بما يتناسب مع المعلومات التي تنوي استخدامها، وكل هذا بالمجان. في نفس الوقت يوفر الموقع خطة مدفوعة تتضمن العديد من المميزات الإضافية، مثل وجود قوالب أكثر احترافية ومتجددة أسبوعياً مع عدم وجود العلامة المائية الخاصة بالموقع، بالإضافة إلى خيارات أكثر عند تصدير الصورة مثل حفظها على هيئة PDF وغيرها من الخيارات الإضافية. نماذج لإنفوجرافيكس تم إنشائها بواسطة piktochart: Easel.ly تُعد هذه الأداة المجانية من أقوى الأدوات المتاحة على شبكة الإنترنت لإنشاء وتصميم الإنفوجرافيك، حيث توفر العديد من القوالب في عدة تصنيفات متنوعة، وما عليك إلا اختيار القالب المحدد والبدء في تعديله بحسب رغباتك. قد لا تساعدك هذه الأداة كثيرًا عند وجود إحصائيات رسمية أو بيانات حقيقية بحاجة إلى تحليل، فأداة piktochart تعتبر الأقوى في هذا الباب. لكن Easel.ly ستكون الاختيار المفضل في حال رغبتك بإنشاء إنفوجرافيك حول مفهوم ما أو سرد لبعض المعلومات، كما تتميز الأداة بواجهة مستخدم رائعة وجميلة ومرنة، وتدعم أغلب الأدوات اللازمة لإنشاء الإنفوجرافيك مثل تخصيص الخلفية والخط وإضافة المخططات والأشكال المختلفة. تتيح الأداة الكتابة باللغة العربية بسهولة تامة، لكن مع وجود خيارات محدودة جدًا لنوعية الخط، وبرأي الشخصي أنها أداة قوية وتستحق التجربة. نماذج لإنفوجرافيكس تم إنشائها بواسطة Easel.ly: Infogr.am إن كنت تبحث عن أداة سهلة وبسيطة للغاية في إنشاء الإنفوجرافيكس فيمكنك الاعتماد على أداة Infogr.am التي توفر واجهة استخدام بسيطة وفعالة. تسمح الأداة بإدراج بيانات واقعية من ملفات الإكسل وعرضها على هيئة مخططات ورسوم بيانية متنوعة. توفر الأداة مجموعة متنوعة من القوالب الجاهزة والتي يمكن تعديلها وتحريرها بكل بساطة، كما تقدم للمستخدم إمكانية إدراج الصور والخرائط والأيقونات والمخططات والفيديو إلى الإنفوجرافيك وإعادة ضبطه بحسب رغباته. vizualize.me هل ترغب بإنشاء سيرة ذاتية احترافية على هيئة إنفوجرافيك؟ حسنًا، توفر أداة vizualize.me العديد من الخيارات لإنشاء سيرة ذاتية مميزة بواسطة الإنفوجرافيك، كما يتيح الموقع إمكانية تحويل سيرتك الذاتية على شبكة لينكد إن إلى إنفوجرافيك تفاعلي بصورة مباشرة. نماذج لإنفوجرافيكس تم إنشائها بواسطة vizualize.me: Venngage تعتبر أداة venngage.com أحد أبرز الأدوات في تصميم وإنشاء الإنفوجرافيك، وتركز الأداة بصورة كبيرة على المخططات والخرائط حيث توفر خيارات أكثر فاعلية مقارنة بباقي الأدوات المتخصصة في إنشاء الإنفوجرافيك على الشبكة العنكبوتية. فإذا كنت ترغب بإنشاء إنفوجرافيك يتضمن إحصائيات ومخططات متعددة، فستكون أداة venngage هي الخيار المفضل بالنسبة لك، كما تساعدك الأداة على إنشاء سيرة ذاتية باستخدام الإنفوجرافيك حيث ستوفر لك عدة نماذج جاهزة ومميزة وما عليك إلا الاختيار من ضمنها وتخصيصها بحسب رغبتك بكل بساطة وسهولة. من ضمن ما يميز أداة venngage أنه بإمكانك استخدامها لإنشاء المخططات بصورة منفصلة عن القوالب الجاهزة المخصصة لإنشاء الإنفوجرافيك، حيث ستجد العديد من التصنيفات من ضمنها المخططات والخرائط والأشكال البيانية. كما تقدم الأداة طريقة مرنة جدًا لإنشاء الإنفوجرافيك المتعلقة بالاستبيانات حيث ستجد العديد من القوالب الجاهزة المتخصصة في الاستبيانات وكل ما عليك هو استبدال البيانات بالنتائج التي حصلت عليها من استبيانك الخاص. أكثر ما أعجبني عند استخدام venngage هو التنوع الكبير في تقسيم وتصنيف الإنفوجرافيك بصورة تُسهل عليك اختيار النموذج الأنسب للبيانات التي ترغب بتحويلها إلى إنفوجرافيك. نماذج لإنفوجرافيكس تم إنشائها بواسطة venngage: visme.co تسمح لك أداة visme.co بإنشاء وخلق الإنفوجرافيك أو العروض التفاعلية المختلفة بكل سهولة وبساطة، وتوفر الأداة مكتبة ضخمة من الصور والأيقونات والقوالب المجانية. ما يميز هذه الأداة أنه بإمكانك تغيير النسب داخل المخططات المختلفة بصورة مباشرة، فمن خلال النقر على المخطط المراد استخدامه يمكنك تحريره وتعديل الألوان والنسب بحسب البيانات التي تمتلكها، مما يوفر الكثير من الوقت في إنشاء المخططات الإحصائية بصورة منفصلة. النسخة المجانية visme.co تعتبر محدودة الإمكانيات مقارنة بباقي الأدوات السابقة التي توفر المزيد من الخيارات للمشتركين بصورة مجانية. من خلال الأدوات السابقة سيكون بإمكان أي شخص البدء في إنشاء وتصميم الإنفوجرافيك بالصورة التي ترغب بها من خلال متصفح الإنترنت ودون الحاجة لأي برامج، ومن الأفضل لو قمت بتجربة عدة أدوات حتى ترى الأداة الأكثر تلائمًا مع استخداماتك. ولا ننسى أن هناك العديد من الأدوات الأخرى في إنشاء الإنفوجرافيك والتي توفر للمستخدم كل ما يحتاجه لإنشاء الإنفوجرافيك بسرعة وسلاسة من ضمنها: infoactive visual ملاحظة جميع الأدوات السابقة تحتاج إلى تسجيل حساب جديد بها للاستفادة منها، كما يُمكنك تسجيل الدخول بها بواسطة حساباتك على الشبكات الاجتماعية (فيس بوك أو تويتر أو جوجل بلس). أغلب الأدوات السابقة توفر خصائص إضافية في إنشاء الإنفوجرافيكس عن طريق الخدمات المدفوعة وذلك باشتراك شهري أو سنوي، وبعضها يُقدم عروض منخفضة للطلبة والمعلمين. من المهم أن نذكر بأن الأدوات السابقة تهتم بالإخراج النهائي للإنفوجرافيك من حيث التصميم وإنشاء المخططات والرسوم وإدراج الصور وغيرها، بمعنى أنه ينبغي عليك في البداية جمع البيانات والمعلومات اللازمة وتحضيرها ومن ثم استغلال أنسب النماذج المتاحة مع المعلومات المتوفرة لك، لذلك يجب أن تتحلى بمرونة أكبر عند استخدامك لهذه الأدوات بصورة تتناسب مع النماذج المتوفرة، بعكس برامج التصميم المتخصصة التي يُمكن أن توفر لك خيارات لا محدودة في التصميم والتخصيص. أخيرًا، أود القول بأن هذه الأدوات وعلى الرغم من فاعليتها وأهميتها في إنشاء الإنفوجرافيك إلا أن هناك العديد من العيوب التي تظهر عند استخدام هذه الأدوات، أبرز هذه العيوب هو أن الإنفوجرافيك المصمم بواسطتها قد يكون مألوفًا لدى القارئ، فتكرار النماذج المتاحة واستخدامها من قبل آلاف المسجلين بهذه المنصات، سيصعب الأمر على المستخدم في الحصول على إنفوجرافيك مختلف عن النماذج التقليدية. لذا إن كان الإنفوجرافيك التي تريد إنشاءه يعتمد على الناحية الفنية والإبهار البصري، فهذه الأدوات لن تشكل الحل الأمثل، بينما في حال أحببت عرض بعض الإحصائيات أو المعلومات بصورة لطيفة وخفيفة فأعتقد أن بإمكانك استخدامها دون مشكلة. خيارات أخرى في حال كانت لديك رغبة في إنشاء بعض الإنفوجرافيكس المميزة وفي نفس الوقت لا تمتلك المهارة الكافية للتعامل مع برامج التصميم أو الأدوات السابقة، أو لا يوجد لديك الوقت الكافي لذلك، فيمكنك الاستعانة بمصمم متخصص بصورة مباشرة أو من خلال منصات العمل الحر المختلفة مثل مستقل أو خمسات، لكن من الجيد أن تمتلك المعرفة اللازمة حول فن الإنفوجرافيك حتى تستطيع توجيه المصمم بطريقة فعالة، لذا حاول أن تتابع معنا هذه السلسلة حتى نهايتها. كما يمكنك أيضًا طلب تصميم إنفوجرافيكس خاص من خلال الأدوات السابقة، حيث توفر أغلبها خدمة تصميم الإنفوجرافيك وتحليل البيانات للشركات وأصحاب الأعمال، شخصيًا لن أنصحك بذلك لأن بعض المنصات تطلب مبالغ مرتفعة جدًا نظير ذلك، فمثلاً منصة visual تبدأ أسعار تصميم الإنفوجرافيكس للشركات من 2500 دولار. كانت هذه لمحة سريعة عن أبرز البرامج والأدوات المستخدمة في إنشاء وتصميم الإنفوجرافيك، وفي المقال القادم سنستعرض معكم هيكلية الإنفوجرافيك بالتفصيل وكيفية التعامل مع الألوان والأبعاد الخاصة به. حقوق الصورة البارزة: Designed by Freepik.

إذا أردت أن تُصمّم موقعًا مُتجاوبًا يسهل تصفّحه أيّا كان المُتصفّح المُستخدم ونظام التّشغيل، فإما أن تختار الطريق الأول والمُتمثّلة في القيام بكل كبيرة وصغيرة بنفسك، أو أن تسلك طريقًا مُختصرة عبر الاعتماد على إطار عمل HTML/CSS يُسهّل عليك المهمة. من بين أشهر أطر العمل التي أصبح تعلّمها وإتقانها ضروريًا نجد إطار عمل Bootstrap 3. سنحاول في هذه السلسلة (التي تقرأ أول دروسها) أن نشرح -ولو بشكل سريع- أهم ما تحتاج معرفته حول إطار عمل Bootstrap 3 لتُصمّم أول موقع لك باستخدامه. ملاحظة: لدى استخدام عبارة Bootstrap في هذه السلسلة فإننا نعني بذلك الإصدار الثالث منه. ما هو Bootstrap؟ Bootstrap عبارة عن إطار عمل HTML /CSS مُتجاوب. يحتوي Bootstrap على الأدوات والعناصر الأساسية التي ستحتاجها في أغلب مشاريعك مثل: الجداول والأزرار وأدوات النصوص والنماذج، والثانوية مثل: العنونة Heading وعناصر التنقل، والخلفيات، وغيرها من الأدوات. ويوفرBootstrap الكثير من الوقت والجهد على المصممين أثناء تصميم الصفحات، فكل ما يحتاجه المصمم هو معرفة أسماء الأصناف Classes التي سيتعامل معها لإعطاء التنسيق المناسب للعنصر الذي يستخدمه. بالإضافة إلى ذلك فإطار العمل Bootstrap يجعل التصميم مُناسبًا ومتجاوبًا مع كافة أحجام الشاشات المُختلفة. مميزات Bootstrap مميزات إطار العمل Bootstrap التي ساهمت في انتشاره: المحافظة على الوقت والجهد، فالتصميم المعد سلفا في إطار العمل هذا جعل كل ما على الصمم فعله هو أن يضع العناصر في المكان المناسب ويخصصها حسب الغرض الذي يريد. تصميم متجاوب Responsive ومتوافق مع كافة المتصفحات، فهذه الميزة تجعل الموقع الذي تقوم بإنشائه يظهر بشكل ملائم لكافة الأجهزة المختلفة في أحجامها وبنفس التنسيق والمظهر الذي تضعه، بالإضافة إلى توافق خصائص الـ CSS مع المتصفحات المختلفة وهذا يعني عدم تعارض أي جزء من التصميم مع المتصفحات، فيعتبر هذا توفيرًا آخر للجهد الذي ستبذله لتجربة التصميم على المتصفحات. سهل الاستخدام وتنسيق ثابت Consistent، فأي شخص لديه بعض الأساسيات في HTML وCSS يستطيع استخدام إطار العمل هذا وبسهولة، فقد لا تضطر إلى كتابة شيفرة CSS واحدة، وتوفر كذلك ميزة التنسيق الثابت في كل أجزاء الموقع، فالعمل على قالب معد مُسبقا لهذا الغرض سيجعل الموقع متناسق في مظهر المكونات بشكل خاص وفي تخطيط الموقع بشكل عام. بالإضافة إلى كل هذا فإطار العمل Bootstrap مفتوح المصدر بإمكانك الاطلاع على مكوناته ومحتوياته. تحميل ملفات الـ Bootstrap يمكنك تحميل آخر إصدار من إطار العمل Bootstrap من خلال الموقع الرسمي ، وأثناء كتابة هذا المقال كان آخر إصدار في الموقع الرسمي هو الإصدار الثالث. وعند تحميل ملف إطار العمل قم بفك الضغط على الملفات، وستجد ثلاثة مجلدات هي التركيبة الكاملة لإطار العمل Bootstrap. سنحتاج أيضا إلى ملف jQuery . قم بتحميل آخر إصدار منه وضعه داخل مجلدjs. الآن بعد حصولك على الملفات الأساسية التي يجب تضمينها في أي مشروع ويب تقوم بإنشائه، يمكننا البدء بإنشاء صفحة ويب بسيطة جدًا وندمج هذه الملفات مع الصفحة الجديدة لنهيء الصفحة وفقا لإطار العمل Bootstrap. تهيئة المشروع ضمن إطار العمل Bootstrap قم بإنشاء مجلد للمشروع الذي تريد أن تبدأ بالعمل عليه، وأنشء صفحة HTML عادية، تتضمن على الأقل المكونات الأساسية من رأس وجسم الصفحة، وهذه شيفرة يمكنك أن تبدأ بها: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>سلسلة مقالات bootstrap3 </title> </head> <body> <h1>مرحبا بالعالم!</h1> </body> </html> والآن لنقم بتعديل شيفرة الصفحة لتضمين ملفات إطار العمل، وأول شيء سنقوم بإضافته هو ملف الـ CSS داخل وسم الرأس <head> ولكن قبل ذلك ولنضمن أن يكون هناك تجاوب متطابق مع الشاشات سنضيف وسم الـ <meta> كما هو موضح في الشيفرة التالية: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <title>صفحة متجاوبة مع الأحجام المختلفة</title> </head> ... والآن لابد من تضمين ملفات الـ JavaScript وتوجد ضمن المجلد المسمى js ويتم ربطها بهذه الصفحة من خلال الوسم <script>، وسيتم وضع هذا الوسم قبل إغلاق وسم جسم الصفحة أي قبل الوسم </body> ويفضل أن تضعها ضمن الوسم <head>بعد إضافة روابط ملفات الـ CSS مع مراعاة إضافة ملف الـ jQuery كما يلي: <body> <h1>مرحبا بالعالم!</h1> <script src="js/ jquery-2.1.3.min.js"></script><script src="js/bootstrap.min.js"></script></body> </html> وبهذا تكون قد أعددت صفحتك الأولى لتكون ملائمة لإطار العمل Bootstrap، وهذا في حالة لم تكن متصلا بالإنترنت إما إذا كنت متصلا بالإنترنت أو تريد رفع المشروع إليه فقد ترغب في تغيير هذه الروابط واستبدالها بروابط مباشرة على مكتبات الـ CDN. لربط موقعك بهذه المكتبات سنضع الروابط التالية في كل وسم من الوسوم السابقة كما يلي: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <title>سلسلة مقالات bootstrap3</title> </head> <body> <h1>مرحبا بالعالم!</h1> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </body> </html> إطار العمل Bootstrap ودعم اللغة العربية والتنسيق (rtl) تتوفر نسخة من إطارا لعمل Bootstrap خاصة بالمصممين الذين يصممون بالاتجاه من اليمين إلى اليسارrtl . بإمكانك تحميل الإصدار الأخير من هذه النسخة والعمل عليها إذا كنت تريد التصميم من اليمين إلى اليسار، أو تحميل الإصدار الثالث والمتوافق مع إطار العمل Bootstrap. أما كيفية ربط النسخة العربية مع إطار العمل Bootstrap3 فالشيفرة التالية توضح ذلك: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-rtl.css"> <title>(صفحة متجاوبة مع الأحجام المختلفة باللغة العربية) - bootstrap3</title> </head> وبهذا نكون قد تعرفنا سويا على إطار العمل Bootstrap3 وأخذت نظرة شاملة حول المميزات التي يقدمها والتسهيلات التي يوفرها، وتعرفت أيضا على كيفية تحميل إطار العمل وكيفية تهيئته وبهذا ستكون مستعد لتصميم مشاريعك بكل سهولة ويسر. وسنتعرف الآن سويا على النظام الذي يتبعه الـ Bootstrap لتقسيم الصفحة. النظام الشبكي Grid system يقسم النظام الشبكي في إطار العمل Bootstrap الصفحة إلى 12 عمودًا أفقيًّا تتناسب ومقاسات الشاشات المختلفة، ويحتوي النظام الشبكي على عدة أحجام مختلفة (xs, sm, md, lg ) مُخصّصة للأجهزة المحمولة والأجهزة اللوحية والمكتبية والشاشات الكبيرة. تستطيع أن تضع العناصر المناسبة داخل كل عمود من هذه الأعمدة. بإمكانك استخدامها كاملة أو أن تستخدم أعمدة لها أحجام مجموعها مساوٍ لـ 12 عمود والشكل التالي يمثل بعض أحجام الأعمدة المستخدمة في تقسيم أجزاء الصفحة. الأصناف المتبعة في النظام الشبكي لـBootstrap هناك عدة أصناف مختلفة تستطيع أن تستخدمها مع كل عمود من أعمدة النظام الشبكي ليُصبح مُتجاوبًا مع كل أحجام الشاشات كما يلي: الصنف xs مخصص للشاشات الصغرى (الهواتف المحمولة) ذات الحجم 768px أو أقل أو أثناء تصغير عرض المتصفح إلى أقصى درجة ممكنة. الصنف sm مخصص للشاشات الصغيرة (الأجهزة اللوحية) ذات الحجم 992px – 768px. الصنف md مخصص للشاشات المتوسطة الحجم (الأجهزة المكتبية والحواسيب المحمولة) ذات الحجم من 1200px – 993px. الصنف lg مخصص للشاشات الكبيرة (الأجهزة المكتبية الكبيرة) ذات حجم أكبر من 1200px. المثال التالي يوضح استخدام النظام الشبكي في إطار العمل Bootstrap: <div class="container"> <div class="row"> <div class="col-sm-6 col-md-7 col-lg-9"> <div class="well"> </div> </div> <div class="col-sm-6 col-md-5 col-lg-3"> <div class="well"></div> </div> </div> <hr /> <div class="row"> <div class="col-sm-6 col-md-2 col-lg-5"> <div class="well"></div> </div> <div class="col-sm-6 col-md-10 col-lg-7"> <div class="well"></div> </div> </div> </div> أولًا، لابد من وضع إطار خارجي يحتوي كل العناصر بداخله ويساعد هذا الإطار في أن تكون العناصر متلائمة مع بعضها ونضع لها حدودًا مع العناصر الأخرى المحيطة ويتم ذلك باستخدام الصنف .container أو .container-fluid في الوسم <div>، ومن ثم نضع صفًا يحوي كل الأعمدة المراد إضافتها وذلك باستخدام الصنف row في وسم <div> آخر، وأخيرا تستطيع أن تضع الأعمدة كل عمود بشكل منفصل في الوسم <div> وتستخدم الصنف .col-*-*، بداية نحدد أي نوع من الأصناف سنختار .col-xs-* أو .col-sm-* أو .col-md-* أو .col-lg-* أو كل هذه الأصناف مجتمعة ومن ثم نحدد حجم كل عمود باستبدال الرمز * بالرقم المناسب. الصنف well. لإعطاء خلفية ومظهر للأعمدة المضافة. قد تلاحظ وجود فواصل بين الأعمدة في حالة أن قمت بتطبيق المثال، وذلك يرجع إلى التقسيم المميز في إطار العمل Bootstrap3. ومما سبق نستنتج أنه للتعامل مع النظام الشبكي يتوجب اتباع القواعد التالية: أن تكون الصفوف ضمن الصنف container. أو container-fluid. لإعطاء النظام الشبكي حدود خارجية ومسافات بين العناصر داخله. نستخدم الصنف.row لإنشاء مجموعات من الأعمدة الأفقية(المتجاورة). الأعمدة هي الأبناء الوحيدة للصفوف أي أن الصفوف لا تحتوي على أي عنصر مباشر غير الأعمدة ويجب أن تكون بقية عناصر الصفحة ضمن الأعمدة. ملاحظة: عندما تبدأ بالتصميم يفضل أن تصمم لأجهزة المستخدمين الأكثر زيارة للموقع حسب توقعاتك، سواء كانت أجهزة الهواتف المحمولة ذات الحجم الصغير أو الأجهزة المكتبية ذات الحجم الكبيرة، وبعد ذلك أضف الأصناف التي تجعل تصميمك متجاوب مع بقية الأجهزة. إذا أردت أن يكون التصميم لحجم شاشة معين اتبع التعليمات التالية: شاشات الأجهزة الصغيرة استعمل النسبة 25%-75% مع الصنف col-sm-*: <div class="col-sm-3"> </div> <div class="col-sm-9"> </div> شاشات الأجهزة اللوحية استعمل النسبة 50%-50% مع الصنف col-md-*: <div class="col-md-6"> </div> <div class="col-md-6"> </div> شاشات الأجهزة المكتبية والأجهزة المحمولة وكذلك شاشة الأجهزة الكبيرة استعمل النسبة 33%-66% مع الصنف col-lg-*: <div class="col-md-4"> </div> <div class="col-md-8"> </div> أما إذا كنت تريد من التصميم أن يكون متجاوبًا مع كافة الأجهزة فقم بدمج جميع الأجزاء السابقة: <div class="col-sm-3 col-md-6 col-lg-4"> </div> <div class="col-sm-9 col-md-6 col-lg-8"> </div> ويوفر إطار العمل Bootstrap ميزة إضافية تستطيع أن تضيفها في النظام الشبكي وهي إظهار أو إخفاء الصفوف، فتستطيع أن تستعمل هذه الميزة لإظهار عمود في الشاشات الكبيرة وإخفائه في الشاشات الصغيرة إذا كان لا يتناسب وحجمها: <div class="visible-sm col-md-6 col-lg-4"> </div> <div class="hide-sm col-md-6 col-lg-8"> </div> إزاحة offset الأعمدة نستطيع تحريك الأعمدة وإزاحتها بمقدار معين لتوفير مسافة كافية بين الأعمدة داخل النظام الشبكي أو بين الأعمدة والعناصر الأخرى، وذلك باستخدام الصنف col-*-offset-*، مثال، col-md-offset-4 إزاحة عمود من نوع md بمقدار 4 أعمدة. لزم التنبيه إلى أن هذه الخاصية لا تدعم الشاشات الصغيرة أي أن الصنف من النوع xs لا يتعامل مع هذه الخاصية لذا يجب مراعاة ذلك في التصميم المتجاوب. <div calss="row"> <div class="col-xs-2 col-md-offset-1"> <div class="well"> <h3>تمت الإزاحة بمقدار عمود واحد من أصل 12</h3> <h5>العمود الأول في الصف</h5> </div> </div> <div class="col-xs-6 col-md-offset-3"> <div class="well"> <h3>وهذا العمود تمت إزاحته أيضا</h3> <h5>لا نستطيع إضافة أي عمود داخل هذا الصف لإن مجموع أحجام الأعمدة ومجموع الإزاحة = 12</h5> <h6>العمود الثاني في الصف</h6> </div> </div> </div> وتكون المخرجات بهذا الشكل: أعمدة داخل أخرى يوفر Bootstsrap3 ميزة أخرى يمكن إضافتها في النظام الشبكي وهي ميزة تداخل الأعمدة، أي نضع عدة أعمدة داخل عمود واحد. في البداية لا بد من إضافة صف يضم الأعمدة الداخلية، وفي هذا الصف يتاح استخدام 12 عمودًا داخليّا أو أعمدة مجموع أحجامها مساوٍ لـ 12 عمودًا كما هو الحال في الصف الخارجي وليس بالضرورة استخدامها جميعا: مثال يوضح تداخل الأعمدة في النظام الشبكي: <div class="row"> <div class="col-md-6"> <div class="well"> <h5>العمود الخارجي</h5> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4"> <div style="Background-color:Gray;"> <h5>العمود الداخلي 1</h5> <h3>أبجد هوز أبجد هوز أبجد هوز </h3> </div> </div> <div class="col-sm-9 col-md-6 col-lg-8"> <div style="Background-color:Gray;"> <h5>العمود الداخلي 2</h5> <h3>أبجد هوز أبجد هوز أبجد هوز </h3> </div> </div> </div> </div> </div> </div> وتكون المخرجات بهذا الشكل: ترتيب الأعمدة بإمكانك ترتيب الأعمدة في النظام الشبكي باستخدام الصنف col-md-pull-* والصنف col-md-push-*، وترتيب الأعمدة هنا يعني أنك تكتب الشيفرة بترتيب معين ويكون الناتج بترتيب مغاير، أي أن العمود الأول في الشيفرة سيصبح الثاني والعكس صحيح، ويجب مراعاة حجم الأعمدة فإذا كان حجم العمود الأول 4 والعمود الثاني 8 فيجب أن يكون العكس في الصنف المستخدم للترتيب، كما في المثال التالي: <div class="row"> <div class="col-md-4 col-md-push-8"> <div class="well"> <h4>كان هذا العمود في الجهة اليمنىh4> </div> </div> <div class="col-md-8 col-md-pull-4"> <div class="well"> <h4>كان هذا العمود في الجهة اليسرى وأثناء العرض أصبح في الجهة اليسرى </h4> </div> </div> </div> وتكون المخرجات بهذا الشكل: وبهذا نكون قد أخذنا مقدمة تعريفية حول إطار العمل Bootstrap وكيفية استخدام النظام الشبكي.

استكشف الأفكار باستخدام ورقة وقلمإنّ استخدام الورقة والقلم طريقة جيدة لبدء عمل سير الاستخدام ورسم السكتشات (جمع سكِتش sketch) غير الدقيقة للتصميم. ويتيح الورق -كوسيط للتصميم- مرونة كبيرة ويسمح لك باستكشاف الأفكار وتجربة المفاهيم. قم بحل المشاكل بحرية على الورق دون الاضطرار لأن تفكر بكيفية حل هذه المشكلة باستخدام التطبيقات أو النصوص البرمجية. يضمن لك رسم السكتشات بأن تنشئ عددًا كبيرًا من الأفكار في وقت قصير. لا تبدِ اهتماما كبيرًا لعدم دقة أو ترتيب سكتشاتـك. عليك ببساطة أن تحدد أفكارك المبدئية وأن تحدد المفاهيم. يمكنك لاحقًا أن تأخذ أفضل العناصر وترتب أفكارك. إحدى التقنيات المفضلة لدي هي أن أنسخ بعض سكتشاتـي على آلة تصوير الأوراق، وأن أقطعها إلى أجزاء أساسية -بما يتسق مع شرح Brad Frost في Atomic Design-، ومن ثم أبدأ بإثراء مفهوم التصميم وذلك بتجميع وإعادة ترتيب العناصر. شخصيًّا، أجد أن تَحْريك قصاصات الورق يسمح لي بتحديد النمط والتفكير بكيفية تفاعل المستخدم مع حلول التصميم وتفسيره لرسائلي. لقد بدأت حديثًا باستخدام حاسوب محمول متصل بـCreative Cloude لتوريد الـسكتشات بسرعة إلى التطبيقات لتحسينها أكثر ولعمل تصاميم أولية سريعة. تعتمد إعادتك وتقييمك لحلول التصميم الخاصة بك على التدريب. ارسم سكتشات يوميًا وبتكرار ونفّذ تصاميم أولية. اتبع نمط ABC والذي يعني (Always Be Creating). هرم التصميميساعدك رسم سكتشات وتكرارها مراراً على التقدم في هرم التصميم. يسمح لك هذا أن تسير بأفكارك وتصميمك من حلول غير تفصيلية إلى تفصيلية، وأن تفصل التصميم بما يتناسب مع رسالة التواصل أو المنتج الرقمي. يعتمد هرم التصميم على مفهوم التصميم المتكامل Total Design لـ Stuart Pugh الذي يقسم الأنشطة إلى ست مراحل. أما بالنسبة للتصاميم الرقمية، فقد بسطتها إلى: رسم سكتشات، عمل أطر مفرغة، تمثيل، عمل تصاميم أولية. تذكر أن السكتش لا يساوي الإطار المفرغ. تخط النصوص الحافظة للمكان. استخدم محتوى حقيقيايجب أن يبدأ تصميم أيّ حل رقمي بمحتوى نابع من الحقيقة. النصوص الحافظة للمكان مجرد تقدير لأي تصميم ممكن. يجب أن يشمل تصميمك سياقًا للمحتوى المقدم للمستخدمين (وللزبائن). يمكن أن يُفضي استخدام المحتوى الحافظ للمكان إلى اتخاذ قرارات تصميم خاطئة يمكن أن تؤثر على التصميم وعلى التطوير في المستقبل. لقد رأيت ما لا يعد من النماذج والتصاميم الأولية التي فيها عبارة "Bob Smith, job title here". استخدم محتوى حقيقيًّا لتعرف كيف سيبدو تصميمك متى تمّ إكماله. ستساعدك النسخة الحقيقية من المحتوى على تحديد طول مستطيلات الإدخال في نماذج الوِب، وطول الأقسام وأشرطة التمرير الجانبية. ستعطيك النصوص الحافظة للمكان (lorem ipsum) شعورًا مزيفًا بالأمن وستؤدي إلى افتراضات غير واقعية عن عمل التصميم الخاص بك. ستصمم لتصل إلى مقدار مثالي من النسخ أو المحتوى، والتي لا تحدث أيّ منها في العالم الحقيقيّ. قم باتخاذ قرارات التصميم التي تدعم المحتوى. التصميم يحدد كيفية العملإن البساطة هي الهدف عند تصميم الواجهات وتجربة المستخدم. إن مراجعة حالات الاستخدام وقصص العمل يمكن أن تساعد على تشكيل الواجهة والتخلص من النقاط غير السلسة في طريقة التفاعل بين المستخدم والتصميم. ولكننا ما زلنا لا نعرف بالضبط من سيكون المستخدم النهائيّ أو كيف سيتفاعل مع الواجهة. من المهم لنا كمختصين في تصميم الواجهات وتجربة المستخدم أن ننشئ واجهات ترضي احتياجات كلّ من المستخدمين المبتدئين والخبراء؛ واجهات يسهل تعلمها دون أن تكون متعالية على المستخدم. يتطلب منا الانتقال من النقطة أ إلى النقطة ب أن نصل جسرًا في الهوة بين المستخدم المبتدئ والمتقدم، وذلك باستخدام تلميحات بصرية وتغذية راجعة للمستخدمين المبتدئين، وإتاحة مزايا متقدمة يمكن أن يتعلمها ويستكشفها المستخدمون المتقدمون. اختبر الافتراضات في المتصفحاختبر مبكرًا. اختبر بكثرة. قدم سياقًا للاستخدام. ابن تصميمًا أوليًّا يمكن أن يستخدَم في المتصفحات أو الأجهزة المحمولة وذلك لاختبار افتراضات التصميم التي لديك عبر التصاميم الأولية وذلك للتحقق من أفكارك وحلولك. صمم -باستخدام التصاميم الأولية- تجربة استخدام لا تحتاج لتعلم مسبق، وإنشاء أدوات وواجهات لا يلاحظ المستخدمون أنهم يستخدمونه، الأدوات والتفاعلات التي تتحول إلى جزء من المستخدم. جهّز البيئة للتفاعل مع المستخدم، وللإبقاء على تفاعل مستمر بسيط وسريع وطبيعي. وبالتأكيد، عليك أن تصمم لشاشات اللمس. قائمة التحقق من أدوات تصميم تجربة المستخدم:قلم رصاص وممحاة.أقلام حبر شبه سائلة (جِل)، وهي المفضلة لدي.مسطرة.دفتر رسم سكتشات (إما بورق غير مسطور أو ورق مربعات).أقلام بتدرجات رمادية.شبلونة رسم مفرغة.قصاصات ورقية ملونة.أقلام (ماركَر).هل هناك شيء آخَر ترغب بإضافته إلى هذه القائمة؟ أخبرنا في التعليقات. رحلة تصميم موفقة! ترجمة -وبتصرف- للمقال: Sketch, Iterate, Repeat: Prototyping Your Website Design لصاحبه: Andrew Smyk. حقوق الصورة البارزة: Designed by Freepik.