مبادئ تصميم الطباعة التي يجب على كل مصمم أن يقتدي بها
لقد أتقن مصممو الطباعة التعامل مع التسلسل الهرمي، والشبكة، والإيقاع، والضبط منذ عقود. إليكم الدليل الأمثل لما يجب على مصممي المحتوى الرقمي استلهامه في عام 2026.
لقد توصل مصممو الطباعة إلى حلول لمعظم ما تواجهه أنت على الشاشة. لقد توصلوا إليها قبل ولادتك، بميزانيات أقل، وبأدوات أبسط، وباتباعهم الصارم لمواعيد التسليم التي كانت تنتهي في الثالثة صباحًا.
كل موجة من التصميم الرقمي تعيد اكتشاف أعمالهم ببطء وبشكل رديء. نبتكر نظام شبكة جديدًا كل خمس سنوات. نعيد تسمية التسلسل الهرمي بـ"الوزن البصري" ونتظاهر بأنه جديد. نتجادل حول المساحة البيضاء كما لو كانت عرضًا تقديميًا لشركة ناشئة.
لقد حلّ هذا المجال معظم هذه المشاكل بالفعل. العمل موجود في نسخة مجلدة من مجلة Wired من عام 1995 أو كتاب ورقي من Penguin من عام 1947، في انتظار أن تُلقي نظرة عليه. الطباعة ليست متحفًا. إنها مكتبة مفتوحة يمكنك الدخول إليها، وأخذ ما تحتاجه، ثم الخروج.
لماذا حلت الطباعة هذه المشاكل أولًا وما زلنا ننسى؟
كانت للطباعة قيود لا يزال التصميم الرقمي يتظاهر بأنه مُعفى منها. الصفحة عبارة عن لوحة ثابتة. تكلفة طباعة وشحن صفحات المجلة باهظة.
كان لكل قرار ثمن، وهذا الثمن فرض ضبطًا تحريريًا. كان على مصممي المطبوعات أيضًا التنافس على جذب انتباه القارئ في الصفحة التالية، لا في منافسة مع تيك توك. كانت المنافسة نزيهة. اقتصرت الأدوات على نوع الخط، والصورة، واللون، والورق، والشبكة.
بهذه العناصر الخمسة، بنى ماسيمو فينيلي هوية يونيمارك لشركة الخطوط الجوية الأمريكية. صممت باولا شير أشهر ملصقات بنتاغرام. وضع ويم كرويل اللغة البصرية لمتحف ستيديليك. خمس أدوات، وعقود من الخبرة.
يمتلك مصممو المحتوى الرقمي آلاف الأدوات، ومع ذلك لا يزال معظمنا عاجزًا عن تصميم صفحة هبوط تحترم القارئ. العائق ليس في الأدوات، بل في عدم إلزامنا بدراسة الخبرة.
المبادئ السبعة التي أتقنتها الطباعة
إذا تجردنا من الرومانسية، فسنحصل على سبعة مبادئ أتقنتها الطباعة بينما لا يزال المحتوى الرقمي يتعثر فيها.
- التسلسل الهرمي: العنصر الأساسي هو العنوان الرئيسي. كل شيء آخر يخدم هذا العنوان.
٢. الشبكة: الشبكة بمثابة عقد مع القارئ، وليست قيدًا على المصمم.
٣. الإيقاع: يجب أن يكون تصفح الصفحات أشبه بعزف موسيقي، لا مجرد نقرة عشوائية.
٤. المقياس: الأشياء الكبيرة كبيرة لأنها تستحق ذلك، والأشياء الصغيرة صغيرة لأنها تستحق ذلك أيضًا.
٥. التباين: وزن الخط، ولونه، وكثافته، ومقياسه. التباين هو ما يجذب العين.
٦. الضبط: معظم القرارات هي قرارات حذف، لا إضافة.
٧. احترام القارئ: وقت القارئ، واهتمامه، وذكاؤه هي ميزانيتك.
هذه المبادئ السبعة هي أساس كل عمل مطبوع رائع. تظهر في كتاب ورقي من إصدارات بنغوين في عهد تشيشولد، وعلى غلاف مجلة بلومبيرغ بيزنس ويك تحت إشراف ريتشارد تورلي. وتظهر بنفس الطريقة في خريطة مترو أنفاق من تصميم فينيلي، وفي افتتاحية مقال رئيسي في مجلة نيويورك تايمز. تتغير الأسماء، لكن المبادئ تبقى ثابتة.
التسلسل الهرمي والشبكة: اختر عنوانًا رئيسيًا، واربطه بعقد
افتح أي عدد من مجلة بلومبيرغ بيزنس ويك من عهد ريتشارد تورلي، تقريبًا من عام ٢٠١٠ إلى ٢٠١٤. كل صفحة تحتوي على عنوان رئيسي واحد. العنوان الرئيسي ضخم، والنص الداعم صغير، والصورة إما لافتة للنظر أو هادئة، ولا يوجد أي لبس حول مكان البدء.
قارن ذلك بصفحة تسويق نموذجية لبرمجيات كخدمة (SaaS) في عام ٢٠٢٦. العنوان الرئيسي، والحاجب، والعنوان الفرعي، والنقاط الثلاث الرئيسية، وشهادة العميل، واللون المتدرج، جميعها تتنافس لتكون العنوان الرئيسي. لكن لا أحد منها كذلك. يغادر القارئ الصفحة.
الحل في الطباعة قاسٍ. انظر إلى شاشتك، واسأل نفسك ما هو العنصر الوحيد الذي يمثل العنوان الرئيسي، ثم اجعل كل عنصر آخر أصغر حجمًا أو أفتح لونًا أو أقل وضوحًا. إذا كان هناك عنصران يتنافسان، فهذا يعني أنك لا تملك تسلسلًا هرميًا. بل لديك ضوضاء تتنكر في زي التسلسل الهرمي.
يجب أن يستقر العنوان الرئيسي في مكان ما. هذا هو جوهر الشبكة. أعاد يان تشيشولد تصميم سلسلة كتب بنغوين الورقية في أواخر الأربعينيات باستخدام شبكة دقيقة للغاية، ما جعل الكتب تبدو عصرية حتى اليوم.
فعل ويم كرويل الشيء نفسه للتصميم المدني الهولندي. وضع ماسيمو فينيلي نظام Unigrid على جميع كتيبات إدارة المتنزهات الوطنية في الولايات المتحدة، ولا تزال هذه الكتيبات تُطبع حتى اليوم، واضحة، وجميلة، بعد مرور خمسين عامًا.
الشبكة ليست مجرد اثني عشر عمودًا تأتي مع إطار عمل واجهة المستخدم. الشبكة هي ضمانة بأن تبدأ العناوين من نفس المكان، وأن تكون التعليقات في عمود محدد، وأن تكون هوامش الصفحة ثابتة، وأن يثق القارئ بالصفحة. لا يرى القارئ الشبكة، بل يشعر بها.
معظم المنتجات الرقمية لا تحتوي على شبكة. بل تحتوي على تصميم تم اعتماده بعد آخر مراجعة تصميم. وهذا ليس هو نفسه.
الإيقاع والحجم: صمم الصفحة الثانية، واستحق الحجم
مصمم الطباعة يفكر في الصفحات المزدوجة، لا في الصفحات الفردية. يُخطط مدير قسم الفنون في المجلات لكيفية افتتاح المقال، وتدفقه، وتسارعه، ووصوله إلى نهايته، تمامًا كما يُمنتج الفيلم مشهدًا. اشتهرت مجلة Wired في عهد كارسون وبلانكيت بهذا النهج. كان كل مقال بمثابة أغنية، لا نغمة واحدة.
يُركز التصميم الرقمي في الغالب على الشاشات الفردية. يحظى العنصر الرئيسي باهتمام كبير، بينما يحظى العنصر الثاني باهتمام أقل، أما الثالث فلا يحظى بأي اهتمام. ثم نتساءل لماذا تنهار صفحاتنا التسويقية أسفل الجزء الظاهر من الصفحة.
استلهم هذه الفكرة. ارسم الصفحة بأكملها كسلسلة من الإيقاعات. إذا لم تستطع وصف الإيقاع بصوت عالٍ، فالصفحة تفتقر إليه.
يُعدّ الحجم بمثابة الإيقاع الصاخب. تُقدم ملصقات مسرح باولا شير العامة درسًا في الحجم. يملأ النص الملصق، مع قص الحواف، حيث يقوم وزن واحد بكل العمل.
الحجم هو الرسالة. تقرأ النص لأنه يُمثل المساحة.
يميل التصميم الرقمي إلى استخدام الخطوط الكبيرة كعنصر أساسي في خلق جو معين بدلًا من استخدامها كرسالة واضحة. عناوين بحجم 48 بكسل تقول "مرحباً بكم في المنصة التي تُمكّن فريقكم" ليست كبيرة لأنها تستحق ذلك، بل لأن نظام التصميم قدّم رمز display-xl واستُخدم.
قاعدة الطباعة بسيطة: إذا كان النص كبيرًا، فيجب أن تكون الكلمات بداخله جديرة بتلك المساحة. إما أن تستحق الكلمات هذا الحجم، أو يُصغّر حجمها. لا يوجد خيار ثالث.
الأخطاء الرقمية الخمسة التي تُصلحها مبادئ الطباعة
معظم التصميم الرقمي السيئ هو واحد من خمسة أخطاء متكررة. لكل منها مبدأ طباعة يُصلحه فورًا.
| مبدأ الطباعة | خطأ رقمي شائع | الحل |
|---|---|---|
| التسلسل الهرمي | جميع العناصر بنفس الحجم، لا يوجد تباعد بين الأسطر | اختر تباعدًا واحدًا، وصغّر الباقي بشكل واضح |
| الشبكة | تصميم زخرفي، بدون بنية أساسية | أنشئ شبكة حقيقية، وقم بمحاذاة كل عنصر معها، بدون استثناءات |
الشبكة | تصميم زخرفي، بدون بنية أساسية | أنشئ شبكة حقيقية، وقم بمحاذاة كل عنصر معها، بدون استثناءات | | ضبط النفس | كثرة الخطوط، وكثرة الزخارف | حدد عدد الخطوط باثنين، وألغِ الحدود والظلال والتدرجات اللونية غير الضرورية |
| الحجم | خط كبير بكلمات ضعيفة | اجعل الكلمات تتناسب مع حجمها، أو صغّر حجم الخط |
| التباين | واجهة مستخدم رمادية باهتة بدون أي عنصر مرجعي | أضف تباينًا حقيقيًا في الوزن، وعنصرًا مرجعيًا لونيًا حقيقيًا، وتغييرًا حقيقيًا في الكثافة |
اقرأ الجدول مرة واحدة، ثم راجع منتجك. ستجد ثلاثة على الأقل من هذه الأخطاء في الشاشة التي أطلقتها هذا الشهر. لا بأس، فمعظم المصممين لديهم هذه الأخطاء. المهم هو تحديدها للتخلص منها.
ضبط النفس والاحترام: مبدأان يصعب تعلمهما
كانت مسيرة فينيلي المهنية بمثابة حرب على الزخرفة. استخدم خمسة أنواع من الخطوط فقط، طوال مسيرته المهنية بعد مرحلة معينة. كان يعتقد أن معظم مشاكل التصميم ناتجة عن إضافة عناصر كان ينبغي حذفها. وقد صدقت توقعاته في معظمها.
يُعدّ ضبط النفس أصعب مبدأ يمكن استيعابه، لأن العمل المرئي في التصميم هو ما تضيفه. لا أحد يُشيد بالتدرج اللوني الذي أزلته، أو الأيقونة التي حذفتها، أو الخط الثالث الذي رفضت تحميله. يُشيد القارئ، في صمت، بإتمامه قراءة الصفحة.
قاعدة شخصية مفيدة: قبل نشر أي تصميم، أزل ثلاثة عناصر وتأكد من أن التصميم لا يزال مناسبًا. إذا كان كذلك، فاحتفظ بالعناصر المُزالة.
يُعدّ احترام القارئ المبدأ الأساسي الذي يُحققه ضبط النفس. تُعامل قواعد الطباعة التقليدية القارئ كشخص بالغ. افترضت دار بنغوين أنه بإمكانك قراءة رواية من أربعمائة صفحة بخط غاراموند بحجم 11 نقطة دون مؤشرات للتمرير، أو شريط تقدم، أو وقت قراءة مُقدّر.
أما النشر الرقمي، فقد أمضى خمسة عشر عامًا يُهين قرّاءه ضمنيًا. مؤشرات وقت القراءة، وأشرطة التقدم، وأقسام "TLDR" داخل المقالات التي هي في حد ذاتها مُلخصات. الافتراض هو أن القارئ لا يستطيع التعامل مع النص دون مُساعدة.
تخلّص من هذا الافتراض. قارئك شخص بالغ. سيُكافئك بالقراءة.
كيف تقرأ افتتاحية مميزة
اطلع على عدد قديم من مجلة نيويورك تايمز، أو مجلة بلومبيرغ بيزنس ويك من عهد تورلي، أو أي تقرير سنوي لشركة بنتاغرام. افتح صفحة افتتاحية. انظر إليها جيدًا.
لاحظ المقدمة. ستجد واحدة فقط. إما العنوان الرئيسي، أو الصورة، أو اقتباسًا منقولًا.
لاحظ موضع المقدمة، غالبًا عند تقاطع خطوط الشبكة، ولا يتم توسيطها لمجرد التوسيط. لاحظ النص المصاحب، أصغر حجمًا، وأخف وزنًا في الغالب، ولا يتداخل مع المقدمة.
لاحظ المساحة البيضاء، أكبر مما تتوقع، مصممة بعناية، وليست عشوائية. لاحظ التعليقات، صغيرة الحجم، مثبتة في عمود ثابت. لاحظ الصفحات، ثابتة في مكانها.
هذا هو نظام الشبكة الفعال. هذا هو التسلسل الهرمي الفعال. هذا هو الإيقاع الفعال.
كل قرار من هذه القرارات اتُخذ عن قصد، من قِبل شخص، لخدمة القارئ.
دروس في الطباعة تُترجم بوضوح
تتفوق الطباعة على الطباعة الرقمية بثلاثة جوانب رئيسية:
أولاً، نسبة الحجم. يختار مصممو الطباعة مقياسًا طباعيًا ويلتزمون به، سواءً كان ثلثًا كبيرًا، أو رابعًا مثاليًا، أو النسبة الذهبية، أو غيرها.
أما مصممو الطباعة الرقمية، فيختارون ببساطة: "حسنًا، نظام التصميم يحتوي على ثمانية أحجام، وسأستخدم معظمها". هذا ليس مقياسًا، بل هو اختيار عشوائي.
ثانيًا، طول السطر والمسافة بين الأسطر. استقرت معايير الطباعة على حوالي 66 حرفًا في السطر الواحد لنص المحتوى، مع مسافة بين الأسطر تُقارب 140% من حجم الخط. بينما تُنتج مواقع الويب عادةً فقرات بعرض 120 حرفًا مع مسافة ضيقة بين الأسطر، لأن نظام التصميم ينص على ذلك.
ثالثًا، تناسق الخطوط. قاعدة الطباعة هي استخدام عائلتين كحد أقصى، ولكل منهما وظيفة مختلفة: خطوط العرض والنصوص، أو الخطوط ذات الزوائد والخطوط البسيطة.
أما القاعدة الرقمية، فقد أصبحت: "استخدم خط Inter، ثم أضف أربعة خطوط أخرى لأن فريق التسويق يُفضلها". حدد عدد الخطوط باثنين، وستلاحظ تحسنًا ملحوظًا في تسلسل العناصر بين ليلة وضحاها.
دروس في تصميم المساحات البيضاء وأغلفة المجلات
المساحات البيضاء ليست عيبًا في التصميم، بل هي جوهره. وقد رسّخت المدرسة السويسرية هذا المفهوم في خمسينيات القرن الماضي، ولكننا فقدناه مرتين منذ ذلك الحين.
انظر إلى ملصق من تصميم مولر-بروكمان. المساحات البيضاء تؤدي دورًا هيكليًا هامًا، فهي تُؤطّر النص، وتجذب النظر، وتُتيح للعناصر البارزة مساحةً مناسبةً للقراءة.
المساحات البيضاء ليست غيابًا للمحتوى، بل هي الجزء من الصفحة الذي يجعل المحتوى قابلاً للقراءة. تخشى المنتجات الرقمية المساحات البيضاء لأنها تبدو كمساحة مهدرة، وهذا غير صحيح.
إنها بمثابة مساحة تُتيح للقارئ البقاء. صفحة هبوط تحتوي على ضعف المساحة البيضاء تُحقق نتائج أفضل من نفس الصفحة ولكن بضعف المحتوى النصي. جرّب ذلك على منتجك، ولاحظ الفرق.
يُتاح لغلاف المجلة ثانيتان فقط ليؤدي وظيفته على رفوف المتاجر. يجب أن يُبرز العلامة التجارية، ويُسوّق للقصة الرئيسية، وأن يبدو جذابًا حتى في الصور المصغرة. يُعالج مصممو المطبوعات هذه المشكلة منذ قرن.
صفحة البداية، وشاشة الترحيب، وأيقونة التطبيق، وصورة المشاركة على مواقع التواصل الاجتماعي، كلها أغلفة. ينطبق عليها نفس مبدأ الثواني.
اتبع النهج الأمثل. فكرة رئيسية واحدة، وعنصر طباعي أساسي، وصورة ثابتة لا تغيب. إذا احتاجت صفحة البداية إلى ثلاثة أسطر لشرح نفسها، فهي ليست صفحة بداية.
ما لا يُمكن نقله من الطباعة إلى الرقمية
لم تُحل الطباعة كل شيء. كن صادقًا بشأن ما لا يُمكن أن تُقدمه لك المعايير التقليدية.
لم تُحل الطباعة مشكلة التفاعل. الصفحة لا تستجيب للنقر. لا تُعلمك المعايير التقليدية شيئًا عن حالة الصفحة، أو ردود الفعل، أو معالجة الأخطاء، أو اللحظة التي يقوم فيها المستخدم بشيء لم تتوقعه.
لم تُحل الطباعة مشكلة الحركة. يُفكر مصممو المطبوعات في الثبات. الحركة فنٌ يُكتسب من الرسوم المتحركة والأفلام والألعاب، وليس من صفحات المجلات.
لم تُحل الطباعة مشكلة التصميم المتجاوب. تُعلمك شبكة الطباعة الانضباط، لكن التصميم المتجاوب مشكلة تُحل بشكل منفصل.
يبقى المبدأ، لكن التطبيق لا يبقى. خذ المبادئ، واترك الافتراضات. هكذا تستلهم بشكل صحيح.
بناء نظام تصميم مستوحى من الطباعة
يمكنك دمج كل هذا في نظام تصميم دون أن يُتهمك أحد بالتعالي. السر يكمن في ترميز المبادئ كقيود، لا كزخارف.
حدد عدد أنواع الخطوط باثنين. حدد حجم الخط بستة، على مقياس حقيقي. حدد عدد رموز الألوان بمجموعة عملية، مع لون مميز واحد يبرر بروزه.
حدد عدد رموز التباعد بإيقاع ثابت عبر نقاط التوقف. حدد عدد رموز الظل والحدود بأصغر مجموعة تؤدي الغرض.
ثم اكتب قواعد الاستخدام. يُعدّ تباعد الأسطر في أي عرض هو العنصر الأكبر. الشبكة أساسية، والمحاذاة غير قابلة للتفاوض. المساحة البيضاء رمز، وليست فائضة.
لا تُضاف الزخارف إلا عندما تُسهم في بنية التصميم. تُدرج هذه القواعد ضمن وثائق نظام التصميم، بجوار المكونات مباشرةً، وتُراجع في جلسات نقد التصميم بنفس طريقة مراجعة الكود في طلبات السحب.
نظام التصميم الخالي من المبادئ أشبه بمجموعة ملصقات. أما نظام التصميم الذي يتضمن مبادئ الطباعة فهو بمثابة منشور.
أدركت مدرسة باوهاوس هذا الأمر في عشرينيات القرن العشرين. وقام تشيشولد بتدوينه في كتابه "الطباعة الجديدة" عام ١٩٢٨. وطبّقته المدرسة السويسرية عمليًا في خمسينيات القرن العشرين.
تُسوّق شركة بنتاغرام هذا النظام تجاريًا منذ ستين عامًا. المبادئ ثابتة، أما الوسيلة فهي التي تتغير باستمرار.
ورشة عمل قصيرة يمكنك تطبيقها على منتجك
اختر شاشة واحدة من منتجك الحالي. الصفحة الرئيسية، لوحة التحكم، صفحة الإعدادات، أيًا كان. اجلس أمام عنصر مطبوع تُقدّره، كصفحة من مجلة، أو صفحة من تقرير سنوي، أو مقدمة كتاب ورقي، أي شيء من تصميم بنتاغرام أو فينيلي أو شير. ضعها جنبًا إلى جنب.
اطرح خمسة أسئلة. ما هي الفكرة الرئيسية لكل سؤال؟ أين تتجه العين أولاً، ثم ثانياً، ثم ثالثاً؟ ما عدد الخطوط وأحجامها المستخدمة، وما مقدار المساحة البيضاء المُشكّلة مقابل المساحة الفارغة؟
ثم قم بإجراء التعديلات. أزل ثلاثة عناصر، وصغّر المسافة بين الحاجبين، وحدّد عدد الخطوط باثنين. انقل السطر إلى نقطة تقاطع حقيقية في الشبكة. أضف مساحة بيضاء حتى تصبح الصفحة مريحة.
اعرض النسخة الجديدة على نفس الأسئلة الخمسة. ستلاحظ التحسن بوضوح.
كرر هذا مرة أسبوعياً لمدة شهر. ستعتاد عينك على الكتابة. ستصبح شاشاتك أكثر وضوحاً وقوة. سيبدأ فريقك بملاحظة الفرق.
هذا هو ما يوفره التدريب على الطباعة، ويمكنك أن تُخصّص لنفسك جلسة تدريبية في فترة ما بعد الظهر.
المرجع الأساسي مكتبة عملية، تعامل معه على هذا الأساس
الأسماء المذكورة في هذه الورقة ليست مجرد أسماء تاريخية. فينيلي، تشيشولد، كرويل، شير، مولر-بروكمان، كارسون، تورلي، بنتاغرام، بنغوين، بلومبيرغ بيزنس ويك، مجلة نيويورك تايمز. إنها مكتبة عملية يمكنك الاستفادة منها هذا الأسبوع.
لا تزال كتبهم تُطبع، ومنشوراتهم متاحة على الإنترنت، ومبادئهم راسخة.
اقتنِ كتابًا واحدًا. اشترك في مجلة مطبوعة واحدة. احتفظ بدليل تصميم سنوي على مكتبك. افتحها عندما تواجهك مشكلة.
ستتفوق المراجع على أفكارك على منصة بنترست في كل مرة. لقد حلّ هذا المجال معظم ما يُشغل بالك. العمل موجودٌ بانتظارك. انظر.
If your product screens feel noisy and flat, hire Brainy to rebuild them with editorial discipline.
Get Started
