تنبيه: الاختلافات في التفاصيل.

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

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

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

ما الذي يمكنك اعتباره الاختلافات الثلاثة الأهم بين التصاميم المسطّحة والتصاميم الماديّة؟

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

الاختلافات الثلاثة الأهمّ بين التصاميم المسطّحة والتصاميم الماديّة – الخبراء يُدلون بدلوهم

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

- MK Cook، مصمم واجهات في Digital Telepathy

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

- Melissa Galle، مديرة تصميم جرافيكي في Marqana Digital.

• التصاميم الماديّة تطوّر للتصاميم المسطّحة.
• التصاميم الماديّة متماسكة أكثر من المسطّحة؛ حيث أنها بيئة متكاملة وليست مجرد نَمَط.
• التصاميم الماديّة تفاعليّة ولها حسّ بالفيزياء.

- Brad Soroka، مصمم واجهات خبير في Digital Telepathy.

التصاميم الماديّة مفهوم معرّف جيدًا

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

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

التصاميم المسطّحة كانت ردّة فعل

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

ماذا كان الردّ على ذلك؟ التصاميم المسطّحة

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

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

- MK Cook، مصمم واجهات في Digital Telepathy

تعيد التصاميم الماديّة جانبًا من تقليد الواقع

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

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

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

- Melissa Galle، مديرة تصميم جرافيكي في Marqana Digital.

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

- MK Cook، مصمم واجهات في Digital Telepathy.

التصاميم المادية تضيف الفيزياء

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

فمثلًا، زر يبدو كهذا ما زال يظهر كزِرّ:

زِر ماديّ من تصميم Mauro Marini على Behance.

ليس عليه أن يذهب بعيدًا في تقليد الواقع. انظر لهذا:

زر تشغيل نظيف مصمم بـ photoshop من تصميم Pixel Mustache على Behance

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

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

- Brad Soroka، مصمم واجهات خبير في Digital Telepathy.

مزايا ومساوئ التصاميم المسطّحة

بأخذ كل ما سبق بعين الاعتبار، لنُسَمِّ بعض المزايا والمساوئ للتصاميم المسطّحة:

المزايا:

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

المساوئ:

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

مزايا ومساوئ التصاميم المادّية

أما الآن فمع مزايا ومساوئ التصاميم المادّية.

المزايا:

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

العيوب:

• بَنتها وتتحكم بها – إلى حدّ ما – شركة واحدة وهي Google. (ليست مشكلة يوميّة).
• تستغرق وقتًا أطول لتطويرها، وهذا بسبب وجود المحور الثالث (Z-axis).
• تدعم الحركة في التصاميم، مما يعني أنّ عليك تضمين الحركات من أجل جعل عملك تصميمًا مادّيًّا حقيقيًّا.

مسطّح أم ماديّ؟

السؤال الذي يبقى حاضرًا هو إذا ما كان أحد التوجهين خيارًا أفضل من الآخَر… لذا، هل عليك استخدام أحد هذين النوعين من التصميم وتجاهل النوع الآخر؟

الإجابة البديهيّة هي لا. كلاهما لهما مكان اعتمادًا على الهدف مما تبنيه.

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

ما رأيك؟ هل أنت محبّ لأحد هذين التوجّهين على حساب الآخَر؟ تفضّل وشاركنا رأيك في التعليقات.

ترجمة -مع شيئ من التصرف- للمقال: ?Flat Design vs. Material Design: What Makes Them Different  لصاحبه: Karol K.

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

ولكن، هل التصميم المسطح موضة مؤقتة؟ أم أنه وُجِدَ ليدوم، وأننا سنستمر في تصميم المواقع المسطحة لسنوات قادمة؟ هل من الممكن أن يكون هذا هو المعيار الجديد في تصميم المواقع؟ فلنكتشف ذلك.

ولمساعدتي في ذلك، دعوت 10 مصممين وخبراء تصميم مواقع ليشاركوا بما لديهم في سؤال واحد رئيسي، وهو: هل التصميم المسطح شيء وُجِدَ ليدوم؟ أم أنه سيتلاشى ليفسح المجال لتوجه آخر جديد كليًّا؟

لكن قبل ذلك، لنُجِب عن السؤال الأبسط:

ماهو التصميم المسطّح على أيّة حال؟

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

هناك ثلاثة أمثلة على مشاريع تصاميم مواقع على Behance هزّت عالَم التصاميم المسطّحة، وهي:

• Watlinger: "تصميم موقع – وكالة Watlinger" تصميم أبرار أحمد.
  
• Maleo: سِمَة ووردبرس نظيفة للشركات" تصميم CreAtive Web Themes.
  
• sweet: "تصميم موقع بواجهة مسطّحة ملونة" تصميم Crystina Style.
  
   

كيف نشأت التصاميم المسطّحة؟

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

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

كان التصميم يعتمد بكثرة على خطوط sans-serif، وتخطيط شبكيّ، وفصل جيد بين العناوين والمحتوى، وبساطة مطلقة.

لِمَ التصميم المسطّح موجود الآن؟

أحد الأسباب حقيقة أن التوجهات نحو موضة معينة تعود كلّ س من السنوات، لكن لِمَ آن أوان التصاميم المسطّحة؟

بالنظر إلى إجابات الخبراء التي سأذكرها، يمكنني أن أرى ثلاثة أسباب، وهي:

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

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

التصميم المسطّح والمستخدمون

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

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

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

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

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

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

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

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

- Sergey Shmidt، مصمم في Designmodo (مدونة تصميم مواقع وموقع لبيع تصاميم الوِب

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

Dan Birman، مصمم واجهات في  Digital Telepathy (شركة تصميم واجهات ومُنتَجات).

التصميم المسطّح والهواتف النقّالة

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

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

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

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

Preston D Lee، تعمل لدى Graphic Design Blender (مساعدة المصممين على إنشاء أعمال تجارية).

التصميم المسطّح وتقنيات الوب الحديثة

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

لقد كانت حلول HTML5 و CSS3 و Javascript الحديثةُ المسمارَ الأخيرَ في نعشِ التصاميم التقليديّة، والتي جعلت التصاميم المسطّحة قابلة للتحقيق. مع التطورات الحديثة صار بالإمكان عمل الكثير باستخدام النصّ البرمجيّ بدلًا من استخدام أدوات معالجة الصور أو بناء الحركات يدويًّا. ولهذا، فما كان في السابق حِكرًا على المحترفين الماهرين في استخدام أدوات مثل Photoshop، يمكن الآن تحقيقه بالاستخدام الجيد لتقنياتCSS و HTML.

إن التصاميم المسطّحة ليس نَمَطًا شائعًا وحسب، بل هي المعيار. نعتمد – كمصممي وِب – على التقنية لتحقيق أفكارنا، فربما العوائق التي كانت كامنة في التقنية هي ما دفعنا لاستخدام التصاميم التقليديّة المحاكية للواقع الحقيقيّ في أيام وِب 1.0 و وِب 2.0. لكن الآن، حيث تسمح لنا CSS وJavascript أن نستخدم التصميم بطرق تفاعليّة أكثر، لسنا بحاجة لمحاكاة عالَم ثلاثيَ الأبعاد. بدلًا من ذلك، يمكننا الاعتماد على أشياء مثل تأثيرات حركة العُمق (Z-Axis) لإضفاء عُمقٍ على التصاميم الرقميّة.

- Cody Iddings، مصمم واجهات محترف في Digital Telepathy.

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

- MK Cook، مصمم واجهات في Digital Telepathy.

ما التالي فيما يتعلق بالتصاميم المسطّحة؟

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

أؤمِن أن التصاميم المسطّحة ليست مجرد موضة؛ وإنما هي جزء من التطور المتعلق بتقديم المحتوى بأبسط صورة، والتي تُحسِّن بدورها قدرتنا على استيعاب المعلومات بسهولة أكبر. ولهذا السبب، أؤمِن أنّ التصاميم المسطّحة (والبساطة عمومًا) ستبقى موجودة لوقت طويل، إلّا أن يأتي توجُّه جديد بطريقة لتحسين الإدراك.

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

- Payman Taei، مُنشئ Visme (أداة لعمل العروض التقديمين والإنفوجراف عبر الإنترنت).

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

- Benjie Moss، مصمم وكاتب في Webdesigner Depot (مدونة تصميم مواقع).

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

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

- Ionut Neagu - ThemeIsle (موقع لبيع إضافات وسِمات ووردبرس).

إذًا ما الذي سيحدُث للتصاميم المسطّحة بالضبط؟

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

المرة الأولى التي رأيت فيها الأسلوب الجديد كنت مرتبكًا، وكنت أفكر: “لماذا؟ لِم نحتاج ذلك؟ ما زال التصميم التقليديّ المحاكيّ للعالم الحقيقيّ جميلًا جدًّا!”، لكن بعد مدة من البحث و"العيش" مع التصميم الجديد، غيرت رأيي وبدأت بفهمه …

[…] برأيي، مهما كان التوجه الجديد الذي سيأتي في المرة القادمة، يجب أن يَرِثَ البساطة من التصاميم المسطّحة. يجب أن يكون بديهيًّا، ولكن يمكن أن يُعيدَ أيضًا لمسة بسيطة من التصاميم المحاكية للعالم الحقيقي أيضًا. ربما نمط ألوان أكثر حيويّةً، وبعض المؤثرات المرئيّة الهادئة التي تلفت النظر.

- Sergiu Radu، يعمل على eWebDesign (مجلة ومدونة لتصميم المواقع).

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

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

- Chris Spooner، كاتب في SpoonGraphics (مدونة تصميم مواقع).

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

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

ترجمة -وبتصرّف- للمقال: Is Flat Design a Web Design Standard That’s Here to Stay? 10 Designers Chip In.

لم تأتِ الأنظمة الشبكية (Grids) من فراغ، إنما لوجودها علاقة وطيدة بالمحتوى. لا نبدأ أبدًا باعتماد النظام الشبكي أولا، إنما نبدأ من فكرة، والتي بدورها تتبلور فتتّخذ هيكلاً وتأخذ شكلا.

 -- Linda van Deursen

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

الأعمدة مُملة، مُشيّدة على مفهوم العلاقات

يُمكن لخيارات المخطّط أن تضع الأساس لتصاميمنا، كما أحبت مصممة الجرافيك Anne Burdick أن تُعلّمنا بقولها:

بنية الصفحة يُمكن أن تُجسّد في منظور فلسفي مُعيّن.

هل نؤيد ترتيب المحتوى؟ أم هل يتطلب المحتوى لمسة إنسانية؟ هل ينبغي أن ننقاد نحو الفوضى؟ مهما كان الأساس لذلك، فإن كلًا منها يُمكن أن يُقدّم بشكل ناجح في مخططك من خلال استخدام: النسبة التامّة (even ratio (1:1، النسبة الذهبية (golden ratio (1:1.618، أو النسب العشوائية random proportions (أو اللانسبة) على التوالي.

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

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

مصفوفة ذات نسبة تامّة الحجم من الصور مرتبة، منظمة وقوية.

مصفوفة مبنية على أساس النسبة الذهبية تُشعرك بواقعيتها وديناميكيتها.

مصفوفة فوضوية مُثيرة للاهتمام ومُقلقة إلى حدٍ ما.

النسب المنطقية Rational Ratios

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

النسبة التامّة  Even 1:1

نسبة الأنصاف Halves 1:2

نسبة الأثلاث Thirds 1:3

نسبة الأرباع Fourths 1:4

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

النسب غير المنطقية Irrational Ratios

في كتاب The Book of Rectangles، Spatial Law and Gestures of The Orthogons Described – 1956 جمَع المُصمم والمهندس المعماري التشيكي Wolfgang von Wersin مجموعة من النسب الديناميكية المُستخدمة من طرف الفنانين، المهندسين المعماريين والخطاطين على مرّ التاريخ لتوجيه أعمالهم. حسب Wersin، كان يُعتقد بأنه "لا شيء يتفوّق على هذه النسب". بالتالي فلا بأس أبدا للبدء بها.

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

ماذا غير ذلك؟

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

العمل ضمن مقياس

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

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

ثمانية نوتات مولدة باستخدام النسبة الذهبية

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

مصفوفة صور من شبكة مؤلفة من ستة أعمدة ذات نسبة تامّة

مصفوفة صور من شبكة مؤلفة من ستة أعمدة ذات نسبة ذهبية

تخفيف الحمل الإدراكي

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

دعاية مُغالى فيها من شبكة من ثلاثة أعمدة مُعتمدة النسبة التامة

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

دعاية مُغالى فيها في شبكة من عمودين مُعتمدة النسبة الذهبية

عرض كل نص هو أكبر بـ 2.618 ضعفًا من الصورة المُقابلة له -أو نحو الضعف على مقياسنا-.

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

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

لدينا هُنا شبكة دعاية مُغالى فيها

شبكات داخل شبكات

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

لتقسيم مساحة الرؤية المُتاحة يُمكننا استخدام شبكة تخطيط عالمية layout grid والتي تتصرف أكثر كشبكات والتي قمنا باستخدامها في الويب منذ سنوات وحتى الآن.

انبثاق نظام A system emerges

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

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

لتحويل هذه العروض إلى نسب CSS مُتمددة فإننا فقط بحاجة إلى إجمالي العروض المُتماثلة مع مقياسنا، ومن ثم تحويل كل عمود باستخدام صيغة Ethan Marcotte الشهيرة:

الهدف ÷ السياق = النتيجة target ÷ context = result

حيث أن الهدف target هو عرض عمود، والسياق context هو مجموع كل الأعمدة المُستخدمة في الشبكة. (أو إذا كنت تواجه "صندوقًا مرنًا - flex-box" من أجل المُخطط فإنه يمكنك فقط استخدام أرقام النسبة بالضبط من مقياسك).

يُمكننا بناء قسم ثلاثي بسيط "شبكة تخطيط" لاستيعاب أقسام محتوانا الأكبر: منطقة للعلامات التجارية branding وأزرار التنقل navigation، منطقة من أجل الجسم الرئيسي للمحتوى main body of content، ومنطقة ثالثة من أجل روابط المحتوى content links المُميزة وذات الصلة.
من المُتحمل أن منطقة محتوانا الرئيسية تحتاج أن تكون أوسع لاستضافة محتوى منشوراتنا، ومنطقة أزرار التنقل navigation أكثر رقة. سوف نجد عروض الأعمدة من مقياسنا التي تُشعرنا أنها مُلائمة لمُخططنا مُعطية المساحة المُناسبة من أجل كل قسم.

التماثل، شبكة مُخطط من ثلاثة أعمدة باستخدام 1 و 3 من مقياسنا.

أخيرًا، نحن نضع شبكات محتوانا (شبكة المقال وشبكة الدعاية المُغالى فيها مُسبقًا) إلى شبكة مُخططنا، وخلق مُخطط يكون مُتمدد ويعمل تمامًا من قبل محتوانا. (يُمكنك الاطلاع على عرض تجريبي لمدونة عبر الضغط على الرابط التالي: http://alistapart.com/d/392/content-out-layout/demos/blog-golden.html)

محتوانا الجديد المبني على النسبة الذهبية لمخطط المدونة.

على سبيل المقارنة، لقد بنيت أيضًا نفس هذا المُخطط على شبكة Twitter Bootstrap’s المؤلفة من 12 عمود. (يُمكنك الاطلاع على عرض تجريبي لمدونة Bootstrap بالضغط على الرابط التالي: http://alistapart.com/d/392/content-out-layout/demos/blog-even.html ).

والمُخطط المبني على النسبة يضم المحتويات بشكل أفضل وعند أي مقاس أو حجم عشوائي.

التلاؤم مع القيود

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

التعرف على المفاهيم المُعتادة

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

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

سبعات 7s

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

أمثلة من نماذج قاعدة 7 والفراغات السلبية الناتجة.

التراكمات Drifts

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

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

الالتصاقات Pinches

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

تُسبب الالتصاقات نقاط بصرية ساخنة تصرف العين وتخلط بين العلاقات.

إيجاد القيود الجوهرية elemental constraints

من أجل التمدد فإن عناصر مُعينة ستحتاج انتباهًا خاصًا. ينبغي أن تكون المقاطع مُحافظة على مقياس قابلية القراءة. الإعلانات ينبغي أن تُحافظ على الحجم الموضع والمُتصل نسبيًا، والصور لا ينبغي أن يتم تكبيرها أكثر من دقتها. وضع عرض مُحدّد هو حل سهل، ولكنها لا تبني تمددًا حقيقيًا.
عوضًا عن ذلك يُمكننا وضع عرض أدنى min-width و/أو عرض أقصى max-width في كود CSS الخاص بنا للحفاظ على سلامة هذا المحتوى.

طريقة أكثر مُلائمة

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

-- Josef Muller-Brockmann

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

زودنا Ethan Marcotte في 2009، ومرة أخرى في 2010 بالأدوات وأوضح أي منها للتجاوب. أعطانا Mark Boulton في 2011 فلسفة توجيهية. من نسج هذه الأفكار المؤثرة للغاية جنبًا إلى جنب مع الأسلوب المرن يُمكننا المضي قدمًا نحو تخطيطات أكثر تطورًا ومُصممة خصيصًا لاحتياجات محتوانا، ممزوجة بطابع فريد ومُناسبة لطبيعة موقعنا المُتغيرة دائمًا.

ترجمة -وبتصرّف- للمقال Content out layout لصاحبه Nathan Ford.

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

سنبدأ هذا الدرس بالتعرّف على بعض المصطلحات التي ستجعل استيعابه أفضل.

أسلوب الطباعة - Typography

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

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

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

فعلى سبيل المثال: Arial هو نوع خط لكن "Arial 12pt bold" هو عبارة عن تنسيق لنوع الخط Arial.

بنية الحرف

إن كل جزء صغير من بنية الحرف يملك اسمًا، وفي الصورة التالية نرى رسمًا توضيحًا لبنية الحرف العامة.

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

من الأمور الهامة التي يجب أن نطَّلع عليها هي شكل أطراف الحروف في الخط Serif، فمنها من له نتوءات صغيرة (تظهر في الصورة التالية باللون الأحمر)، ومنها لا يملك هذه النتوءات. نسمي هذا النوع من الخطوط "Font_name_serif" أو "Font_name_non_serif".

حروف كبيرة أم صغيرة؟

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

عند بداية تشكيل الخطوط والحروف، كانت تتوضّع بداخل صناديق (أسطر)، والحروف الصغيرة كانت تتوضّع في الأسفل، وندعوها في هذه الحالة Low-grade breaks.

حجم الخط

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

ثخانة الخط

تحدد ثخانة الخط، الثّخانة التي رُسم بها كل حرف من الحروف، وبالطبع نحن نعرف نوعين من الثّخانة (Regualr-Bold) لكن هنالك العديد من الثّخانات الأخرى سوف نتعرف عليها.

إن معيار تدرج ثخانة الخطوط هو على الشكل التالي:

1. Ultra Light
2. Thin
3. Light
4. Regular
5. Semi Bold
6. Extra Bold
7. Black
8. Extra Black

كما نرى إن هذا التدرج منطقيّ جدًا.

تباعد الحروف

يمكننا أن نضيف لتدرجات الثخانة، تدرجات التباعد ما بين المحارف، يعرف التّباعد على الشكل الآتي:

عرض الحرف مضافًا إليه المسافة التي تفصله عن الحرف الذي يليه.

بتغيير التباعد فإننا نغير عرض الحرف من دون تغيير بنيته الأساسية أو ارتفاعه.

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

1. Condensed
2. Semi Condensed
3. Normal
4. Semi Extended
5. Extended

ميلان الخط - Italic

هو الحالة التي يكون فيها النص مائلًا بمقدار نحو 12 درجة كحد أقصى. كهذه الجملة مثلاً، وعندما لا يكون النص مائلًا ندعو تنسيقه بـِ roman.

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

التصميمات المختلفة للخط الواحد - Attributes

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

نرى في الصورة التالية الاحتمالات المختلفة لنوع الخط Helvetica Neue.

التباعد بين الأسطر - Leading

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

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

محاذاة النص - Text Alignment

1. المحاذاة متوازية الأطراف - Justify: وهي المحاذاة الأكثر كلاسيكية واستخدامًا، وفيها تتم محاذاة النص من اليمين واليسار مع إضافة فراغات بين الكلمات إن اضطر الأمر وعند تطبيقها يجب تطبيقها بشكل جيد لتجنب ظهور الشقوق، هذه الفراغات البيضاء بين الكلمات تبدو على طول النص كأنها شقوق في جدار.
2. محاذاة إلى اليسار - Alignment to left: وهذا النوع هو الأكثر استخداما بعد النوع الأول، النص يكون متوازيا من جهة اليسار أما جهة اليمين تكون شبيهة بأطراف العلم المرفرف. وهذا النوع من المحاذاة أقل جمالية من سابقه، لكن مثبت علميا أنه الطريقة الأسهل في القراءة، الأطراف اليمينية غير المتحاذية تشكل علامات تسهل الانتقال بين السطور.
3. المحاذاة إلى اليمين - Alignment to right: استخدامها قليل (عند الكتابة باللغة الانكليزية) لأنها تعاكس إحساس القارئ تجاه النص وتجاه طريقة الكتابة، لكن من الممكن استخدامها لتشكيل نوع من المفاجأة في طريقة العرض، وسوف نستخدم هذا النوع من المحاذاة كثيرا من أجل التعليقات التي ستوضع على الصور.
4. المحاذاة المتوسطة (المركزية) -Centered: نادراً ما تستخدم في النصوص الطويلة، وغالباً ما تستخدم في تنسيق العناوين.

الأنواع المختلفة للخطوط ومضامينها

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

نبدأ التصنيف كالتالي:

1- الخطوط الكلاسيكية- Classicals:

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

1-1- الخطوط الإنسانية القديمة - Humanist

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

2-1- Garalade

جاءت هذه التسمية من أسماء الأشخاص الذين صمموها (Claude Garamond- Aldus Manutius ) وتعد من الخطوط التي أتت بعد المجموعة الإنسانية الأولى من الخطوط، وتأثرت جداً بالكتابة في القرن السادس عشر، ظهرت فيها المزيد من الصرامة، كما أزالت التأثير الذي نشأ عن الكتابة اليدوية. فعلى سبيل المثال التقاطع الموجود في حرف e أصبح يمينياً، وزادت ثخانة الخطوط بشكل عام عن سابقتها، وتعد هذه المرحلة من تطور الخطوط ، المرحلة الفاصلة ما بين الخطوط Humanist القديمة والخطوط Transitional.

من أهم أنواع الخطوط التي تعكس هذه المرحلة هو خط Garamond، ويندرج تحت نفس التصنيف Bembo ،The Plantin أو في تسمية أخرى Palantino.

3-1- الخطوط الانتقالية Transitional

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

المحارف أخذت شكلا أبسط، وبنفس الوقت حافظ هذا الشكل على سهولة القراءة، وغالبا ما تستخدم هذه الخطوط في المجلات أو الصحف.
وأفضل أنواع خطوط هذه العائلة، الخطوط ذات الأصل الاسباني، أرفق لكم بعض أسماء هذه الخطوط: (Baskerville- Times- Perpetua- Caslon).

2- الخطوط الحديثة - Moderns:

يمكن تقسيم الخطوط الحديثة إلى ثلاثة أقسام:

1-2- الخطوط الحديثة - Didone:

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

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

من أنواع هذه الخطوط (Bodoni- Didot- Walbaum- Georgia).

2-2- الخطوط الميكانيكية - Mechanistic:

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

نذكر من هذه الخطوط (Rockwell - Mail - Clarendon).

3-2- الخطوط المستقيمة - Lineal

وتدعى أيضا Sans Serif، أي الخطوط التي تكون نهاياتها مستقيمة ولا تحتوي على أيّة إضافات، هنالك فرق بسيط بين سماكات الأحرف وعلى الأغلب هذا الفرق لا يكون موجودا، لهذا يشبه هذا النوع من الخطوط بالعصي Sticks، ويعتبر من أقل الخطوط كلاسيكية، وأكثرها بساطة وحيادية ومجال استخدامها يرتبط بشكل مباشر بصفاتها، نذكر من هذه الخطوط (Myriad - Helvetica - Futura - Univers).

3- Calligraphic - الخطوط الفنيّة:

1-3- Glyphic - الخطوط المنحوتة:

استوحى هذا النوع من الخطوط من الحروف المحفورة في الصخور، يمثل هذا النوع من الخطوط بنهايات Serifs متغيرة العرض. نرى أناقة وتعقيد هذا النوع من الخطوط غالبا على لوحات المحامين وشعارات شركات الجمال، نذكر من هذه الخطوط (Optima - Trajan - Lithographs).

2-3 Script- الخطوط النسخيّة (المخطوطات):

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

3-3- Manual- الخطوط اليدوية:

تتضمن هذه المجموعة الخطوط المستوحاة من الكتابة اليدوية، المكتوبة بالقلم، وترتبط ارتباطا وثيقا بالعصور الوسطى و Heroic Fantasy ونذكر كمثال (Omnia).

4-3- Blackletter/Fractures

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

5-3- الخطوط المزخرفة - Decorative fonts

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

اختيار نوعيّة الخطوط واستخدامها

اختيار نوع الخطّ

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

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

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

استخدام الخط

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

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

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

توضيح المعلومات المهمة ( تعليمها)

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

1- من دون تغيير نوع الخط (تكبير حجم النص، أو زيادة سماكته، أو بجعله مائلاً ... إلخ)

2- أو باستخدام نوع خط مختلف للمعلومة التي تريد إظهارها.

عند استخدام الطريقة الثانية، تجنب استخدام نوعين من الخطوط من نفس المجموعة.

أين نجد أنواعاً مختلفة من الخطوط؟

1- الخطوط المجانيّة:

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

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

1. DaFont
2. Urban Fonts
3. 1001 Free Fonts
4. Fontex

2- الخطوط مدفوعة الثمن:

لحد يومنا هذا، ما زالت الشركات المختصّة بتصميم الخطوط تدعى (مُنشأين- منتجين - مؤسيين) Founders.
من أهم هذه الشركات، نذكر:

1. Adobe
2. Liontype
3. Monotype

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

3- طريقة تنصيب ملف الخط:

• إن كنت من مستخدمي نظام Windows، فبعد تحميل الخط، قم بفك ضغطه إن اضطر الأمر، ثم اضغط بالزر الأيمن للفأرة عليه وقم باختيار "تحميل" "Install".
• أما بالنسبة لنظام Mac، فك ضغط الملف إن اضطر الأمر ثم انقله إلى الوجهة التالية، Library/Fonts.

إن كتابة النصوص تخضع لقواعد أساسية ومعيارية لا يجب تجاوزها، نذكر بعضاً منها:

علامات الترقيم

1. لا يوجد فراغ قبل الفاصلة، النقطة، الأقواس، وأقواس الاقتباس ودائماً يوجد فراغ بعد كل ممّا سبق.
2. يوجد فراغ قبل الأقواس المفتوحة، والقوس المستطيل الشكل اليميني (]) ونعكس هذه القاعدة عند استخدام اللغة العربية في الكتابة، وحتما لا يوجد أي فراغ بعد هذا النوع من الأقواس.
3. لا يوجد فراغ قبل أو بعد الفاصلة العليا أو الواصلة (-).
4. يوجد فراغ دائماَ قبل النقطتين اللتان تتوضعان فوق بعضهما، الفاصلة المنقوطة، إشارة الاستفهام وإشارة التعجب.

التعداد

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

استخدام (إلخ)

إلخ ترمز اختصاراً إلى تعبير (إلى آخره)، ولا نضع بعد هذا التعبير أيّة أقواس.

مُلخص

الآن سوف نقوم بتلخيص ما تعلمناه في هذا الدرس:

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

ترجمة -وبتصرّف- للمقال Les polices de caractères.