قرارات تصميم مستوحاة مع Max Huber: تحويل الموضوعات العادية إلى اتصال مرئي مثير

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

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

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

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

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

- جيوفاني بينتوري

حتى المصممون المشهورون أمضوا وقتًا في العمل مع الموضوعات العادية وأنتجوا أعمالًا مميزة. بعد انتقاله من سويسرا إلى الولايات المتحدة ، عمل إريك نيتشه لنشر المجلات بما في ذلك Harper's Bazaar و Life و Vanity Fair. لكن عمله لصالح جنرال دايناميكس أصبح أكثر شهرة له. في السنوات الخمس التي قضاها كمدير فني في شركة الطيران والدفاع ، طور Nitsche نظام تصميم معلومات أسفر عن تقارير سنوية وملصقات وبيانات فنية و Dynamic America ، وهو كتاب من 420 صفحة يتتبع تاريخ الشركة.

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

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

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

مستوحى من ماكس هوبر

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

في بداية حياته المهنية في ميلانو ، عمل هوبر في استوديو أنطونيو بوجيري حيث تأثر بمزج الوسائط ، بما في ذلك التوضيح والتصوير والطباعة. من عام 1950 إلى 1954 ، عمل هوبر في سلسلة المتاجر الإيطالية الراقية La Rinascente وفاز بأول جوائز البوصلة الذهبية (Compasso d'Oro) في عام 1954.

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

لم يأخذ هوبر هذه التأثيرات في ظاهرها. تلاعب بالصور ، وقطع الموضوعات من خلفيتها ، وخلطها مع كتل من الألوان والأشكال. تضيف الشرائط الملونة الحركة إلى تصميمات Huber وتصميمات الملصقات الخاصة به لـ Monza Autodromo - مضمار السباق الشهير في ميلانو - مثيرة مثل السباقات نفسها.

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

على الرغم من عدم الاعتراف دائمًا بمهاراته في الطباعة ، إلا أن عمل هوبر مليء بالطباعة الملهمة. لقد تحول بسهولة بين خطوط serif الحديثة ومحارف sans-serif المعاصرة وبدا مرتاحًا عند استخدام كليهما. في حين أن النمط السويسري هو الأكثر ارتباطًا بمحارف Neo-grotesque sans-serif ، فإن عمل Huber مع الرقيق هو مصدر إلهام بنفس القدر.

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

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

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

لقد أثبتوا أن التآزر والثقة في العلاقة بين العميل والمصمم يمكن أن يحقق نتائج غير عادية يمكن أن تستمر لعقود.

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

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

تحديد محارف النمط القديم (الإنساني)

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

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

سمحت هذه الدقة لمصممي الكتابة بإضافة زخارف لما نسميه الآن محارف النمط القديم.

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

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

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

تم تصميم Baskerville في خمسينيات القرن الثامن عشر بواسطة John Baskerville. ظلت خطوطه شائعة ، وهناك العديد من التفسيرات الحديثة. لا تزال الخطوط ذات نمط Garamond شائعة في تصميم الطباعة ، ويتم تضمين Monotype Garamond مع العديد من منتجات Microsoft.

نوع النمط القديم

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

 <header>…</header> <div>…</div> <p>…</p> <footer> <svg>…</svg> </footer>

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

 body { background-color: #6e2838; font-family: "old-style"; color: #f7eed7; }

يهيمن رأس Trabant على تصميمي حتى على أصغر الشاشات. هذا الرأس يمزج بين صورتين. الأول هو علامة شعار SVG Trabant قابلة للتطوير. لإخفاء هذه الصورة التقديمية من التكنولوجيا المساعدة ، أضفت دور ARIA وقمت بتعيين السمة المخفية الخاصة بها على true. بعد ذلك ، أضفت دورًا مختلفًا لـ ARIA لـ img إلى الصورة الثانية ، وهي صورة لما يسمى "أسوأ سيارة تم تصنيعها على الإطلاق:"

 <header> <img src="header.svg" alt="" role="presentation" aria-hidden="true"> <img src="header.png" alt="Trabant" role="img"> </header>

أحتاج إلى أن يظل شعار Trabant الكبير دائريًا تمامًا مهما كان عرض العنصر الأصلي. نسبة العرض إلى الارتفاع هي النسبة بين عرض العنصر (س) وارتفاعه (ص.) ونسبة 1: 1 للمربعات ، و 1.618: 1 النسبة الذهبية ، و 16: 9 لوسائط الشاشة العريضة.

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

 1:1 100% 4:3 75% 16:9 56.25%

هذا الشعار دائري ، لذا يجب أن يظل المربع الذي يشغله دائمًا مربعًا. أقوم بإضافة a: قبل العنصر الزائف وقمت بتعيين الحشوة العلوية على 100٪:

 header:before { content: ""; display: block; padding-top: 100%; }

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

 header { display: grid; } header:before, header img { grid-column: 1; grid-row: 1; }

لتوسيط هذه الصور أفقيًا ورأسيًا - بغض النظر عن مدى عرضها أو ارتفاعها - أقوم بمحاذاةهما وتبريرهما إلى المركز:

 header { align-items: center; justify-content: center; }

أخيرًا ، لدمج صورة Trabant وشعار SVG الخاص به معًا ، أضف وضع مزيج مع قيمة التراكب:

 header img:last-of-type { mix-blend-mode: overlay; }

يحتوي قسم اللافتات الخاص بي على عنوان رئيسي كبير بلونين متبوعًا بثلاث فقرات قصيرة:

 <div> <h1>Sparkplug <span>with a roof</span></h1> <p>VEB Sachsenring Automobilwerke Zwickau</p> <p>Manufactured in East Germany</p> <p>1957–1990</p> </div>

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

 h1 { font-size: 4.875rem; line-height: 1.1; text-align: right; } h1 span { color: #f85981; }

لإلغاء التأكيد على الفقرة الثانية من الشعار ، أستخدم محدد فئة زائفة من النوع nth-of-type وتقليل حجمه:

 #banner p { font-size: 1.424rem; } #banner p:nth-of-type(2) { font-size: 1rem; }

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

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; padding: 4rem; } }

يملأ كل من قسم الرأس والشعار العرض الكامل للتخطيط الخاص بي. أضع اللافتة في الصف الأول ، على الرغم من أنها تأتي في المرتبة الثانية في HTML الخاص بي:

 header, #banner { grid-column: 1 / -1; } header { grid-row: 2 / 4; } #banner { grid-row: 1; }

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

 h1 { font-size: 8rem; line-height: 1.1; text-align: center; } #banner p { font-size: 2.027rem; } #banner p:nth-of-type(2) { font-size: 1.266rem; }

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

 @media (min-width: 82em) { body { grid-template-columns: repeat(6, 1fr); grid-column-gap: 2vw; grid-row-gap: 2vh; } }

يغطي الرأس الأعمدة الثلاثة الأولى وجميع الصفوف الثلاثة في التخطيط الخاص بي:

 header { grid-column: 1 / 4; grid-row: 1 / 4; }

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

 #banner { display: contents; }

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

 #banner h1 { grid-column: 4 / -1; grid-row: 1; font-size: 6.5rem; } #banner div { grid-column: 5 / -1; grid-row: 2; } body > p { grid-column: 5 / -1; grid-row: 3; }

أخيرًا ، أضع التذييل بجانب النص الجاري الذي يضيف إلى المظهر غير المتماثل لتصميم النمط القديم هذا:

 footer { grid-column: 4; grid-row: 3; }

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

الخطوط الانتقالية

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

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

في الخطوط الانتقالية ، يكون للأحرف الصغيرة ضغط رأسي أو عمودي تقريبًا. عادةً ما تكون خطوط الرأس على الأحرف الصاعدة بما في ذلك "b" و "d" و "h" و "l" أفقية بشكل أكبر. يتم تحديد نهايات العديد من الضربات بواسطة أطراف الكرة بدلاً من الزاوية أو الحادة أو الرقيق.

المحارف الانتقالية المعاصرة شائعة ، بما في ذلك Cambria التي صممها Jelle Bosma في 2004 لمجموعة Microsoft ClearType Font Collection. تم إصدار Cambria مع Windows Vista. تم تصميم جورجيا من قبل ماثيو كارتر في عام 1993. صممها زوزانا ليكو في عام 1996 ، السيدة إيفز من طراز باسكرفيل وسميت على اسم زوجة جون باسكرفيل ، سارة إيفز.

التعرف على الخطوط الحديثة

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

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

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

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

المحارف الحديثة

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

 <header> <div><svg>…</svg></div> <div><svgv…</svg></div> </header> <div class="banner">…</div> <main> <ul>…</ul> <p>…</p> </main>

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

 body { background-color: #34020B; background-image: url(body.svg), linear-gradient(180deg, #6E2838 0%, #98304D 21%, #34020B 99%); font-family: "modern"; color: #fff; }

أضع مخطط Trabant في منتصف الطريق أفقيًا ، بينما يتكرر التدرج اللوني عبر صفحتي:

 body { background-position: 50vw 2rem, 0 0; background-repeat: no-repeat, repeat-x; }

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

 <div> <h1>The worst <span> car ever made</span></h1> <div> <p>VEB Sachsenring Automobilwerke Zwickau</p> <p>Manufactured in East Germany</p> <p>1957–1990</p> </div> </div>

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

 #banner h1 { max-width: 50vw; }

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

 #banner h1 { font-size: 4rem; line-height: 1; text-transform: uppercase; } #banner h1 span { color: #f85981; } #banner p { font-size: 1.424rem; } #banner p:nth-of-type(2) { font-size: 1rem; }

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

 <li> <h3>Two-stroke fuel tank</h3> <p><b>6.3</b>gallon</p> </li> <li>…</li> <li>…</li>

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

 li { display: flex; flex-direction: column-reverse; } ul p { font-size: 1.802rem; } ul p { color: #f85981; }

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

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

 ul pb { font-size: 4.5rem; letter-spacing: .05em; line-height: .8; color: #fff; }

يتضمن السعر في قائمة المواصفات الخاصة بي أيضًا عنصر امتداد يحتوي على رمز عملة ألمانيا الشرقية ، DDM:

 <li> <h3>Official state price</h3> <p><b>7,450</b> <small>DDM</small> </li>
 <li> <h3>Official state price</h3> <p><b>7,450</b> <small>DDM</small> </li>

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

 ul p small { font-size: .889rem; text-align: right; transform: rotate(180deg); writing-mode: vertical-rl; }

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

هذا يعني أيضًا أنني بحاجة فقط إلى إجراء تعديلات طفيفة على الشاشات متوسطة الحجم ، أولاً عن طريق تغيير قيم الألوان في الخلفية المتدرجة لـ CSS وإعادة وضع مخطط Trabant الخاص بي إلى وسط الشاشة و 30 rem من الأعلى:

 @media (min-width: 48em) { body { background-image: url(body.svg), linear-gradient(180deg, #6E2838 0%, #98304D 20%, #34020B 100%); background-position: 50% 30rem, 0 0; } }

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

 header { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; }

أقوم بمحاذاة الشعار الأول إلى اليسار والثاني إلى اليمين:

 header > *:first-child { text-align: left; } header > *:last-child { text-align: right; }

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

 #banner h1 { white-space: pre; max-width: 100vw; font-size: 8rem; }

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

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

 #banner { position: relative; margin-bottom: 25rem; } #banner div { position: absolute; top: 8.25em; left: 20em; }

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

 ul { display: flex; } li { flex: 1; }

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

 @media (min-width: 82em) { body { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 2vw; }

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

 body { grid-template-areas: "header header ." "banner banner data" ". . main"; }

أضع هذه العناصر باستخدام أسماء المناطق التي تسمح لي بتغيير مكان ظهورها في التخطيط الخاص بي دون تغيير موضعها في HTML الخاص بي:

 header { grid-area: header; } #banner { grid-area: banner; } main { display: contents; } main > p { grid-area: main; } ul { display: block; grid-area: data; }

اكتشاف خطوط سلاب سيريف (مصري)

ظهر هذا التصنيف النهائي لمحرف Serif لأول مرة في الملصقات الإعلانية في أوائل القرن التاسع عشر ، وتم تصميمه - بأشكال حروفه الممتلئة - لجذب الانتباه. إحدى السمات المميزة لـ Slab serif هي في كثير من الأحيان الرقيق غير المقوس والذي يلتقي مع الجذع بزاوية 90 درجة.

Clarendon ليس مجرد اسم محرف ولكن أسلوب محارف Slab serif. في حين أن أشكال الحروف في العديد من Slab Serifs لها عرض خط متساوٍ ، فإن نمط Clarendon يكسر التقليد مع اختلاف أكثر وضوحًا بين الضربات السميكة والأنحف. على عكس Slab serifs الأخرى ، فإن كلاريندون لها أقواس منحنية.

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

اخترت ITC Officina Serif للكاتب Erik Spiekermann و Ole Schafer لكتابي الأول Transcending CSS ، على الرغم من أنني في ذلك الوقت لم أكن على دراية جيدة بتصميم الطباعة. يأتي FF Unit Slab ، أيضًا بواسطة Erik Spiekermann ، بعدة أوزان ومائلة ودعم 107 لغة مختلفة.

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

بينما اختار باراك أوباما سلاب سيريف من Hoefler & Co ، اختار زميله المرشح الديمقراطي بيرني ساندرز جوبيلات لجوشوا داردن في حملته الرئاسية لعام 2016. جبيلات هي واحدة من أكثر أنواع الألواح الرقيقة تنوعًا وتأتي في 11 أوزانًا بخط مائل مطابق.

بلاطة Serifs تتطلب الاهتمام

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

يحتوي الرأس مرة أخرى على صورتين SVG ، قسم لافتة يتضمن العنوان والفقرة الأولى للوقوف ، وقائمة غير مرتبة تعرض مواصفات Trabant. هذه المرة ، أقوم أيضًا بتضمين عنصري SVG. أحدهما للأرقام الهائلة البالغ عددها 57 ، والثاني للنص الزخرفي الذي يتبع مسارًا منحنيًا:

 <header> <svg>…</svg> <svg>…</svg> </header> <svg>…</svg> <div>…</div> <div>…</div> <ul>…</ul> <div> <svg>…</svg> </div>

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

 body { background-color: #8a8988; font-family: "slab"; color: #f7eed7; }

أقصر عرض رأسي على 220 بكسل وقم بمحاذاة محتواه مركزيًا:

 header { margin-bottom: 2rem; width: 220px; text-align: center; }

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

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 750 690" role="img" aria-label="1957. The year Trabants were first produced"> <title>The year 1957</title> <path d="…"/> <path d="…"/> </svg>

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

 body > svg path { opacity: .75; } body > svg path:nth-of-type(1) { fill: #f5e3B4; } body > svg path:nth-of-type(2) { fill: #ba0e37; mix-blend-mode: multiply; }

العنصر الأخير في الرسم التقديمي الخاص بي هو الكلمة الرأسية "Duroplast" ، وهي عبارة عن بلاستيك مقوى بالألياف يستخدم في صنع أجسام Trabant. يمكنك البحث عن هذا العنصر في HTML الخاص بي ، لكنك لن تجده ، لأنني أقوم بإنشاء هذا المحتوى باستخدام عنصر زائف. أضع المحتوى الذي تم إنشاؤه ، وأغير وضع الكتابة إلى الوضع الرأسي ، ثم أديره بمقدار 180 درجة:

 body { position: relative; } body:after { content: "duroplast"; position: absolute; top: 2rem; right: 2rem; font-size: 7rem; transform: rotate(180deg); writing-mode: vertical-rl; }

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

 body:after { mix-blend-mode: overlay; }

تم تطوير عدد Trabants التي تم إنتاجها خلال عمرها باستخدام عنوان منخفض المستوى ، متبوعًا بفقرتين:

 <div> <h3>Units produced</h3> <p>1957–1990</p> <p>3,096,999</p> </div>

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

 #content { display: flex; flex-direction: column; }

بعد ذلك ، أستخدم خاصية order لإعادة ترتيب العناصر الثلاثة ، مع وضع العنوان في المرتبة الأخيرة:

 #content h3 { order: 3; font-weight: normal; text-transform: uppercase; }

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

 #content p:nth-of-type(2) { font-size: 4.5rem; }

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

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

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, auto); } }

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

 header { grid-column: 5 / -1; grid-row: 1; } #banner { grid-column: 1 / 4; grid-row: 1; }

أقوم بوضع الأرقام الهائلة الآن على شبكتي وخفض قيمة مؤشر z بحيث تظهر خلف العناصر الأخرى في التخطيط الخاص بي:

 body > svg { grid-column: 1 / -1; grid-row: 2 / 4; z-index: -1; }

استبدل السابق: بعد وضع فئة زائفة بقيم الشبكة وزيادة حجم الخط لملء المزيد من المساحة المتاحة:

 body:after { position: static; grid-column: 4; grid-row: 1 / 3; z-index: 1; font-size: 10rem; }

على الرغم من كونها مبنية على شبكة متماثلة ، فإن ترك بعض الأعمدة فارغة يخلق تصميمًا غير متماثل غير عادي:

 #content { grid-column: 2 / -1; grid-row: 3; mix-blend-mode: difference; } ul { grid-column: 1 / -1; grid-row: 4 / -1; }

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

 #content h3, #content p { color: #31609e; } #content h3 { font-size: 1.75rem; } #content p:nth-of-type(1) { font-size: 3rem; } #content p:nth-of-type(2) { font-size: 8rem; }

نص SVG على المسار

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

 <div> <svg viewBox="0 0 750 700" xmlns="https://www.w3.org/2000/svg"> <path fill="none" stroke="none" d="…"/> <text> <textPath href="#curve-path">…</textPath> </text> </svg> </div>

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

 #curve { display: none; } @media (min-width: 48em) { #curve { display: block; grid-column: 1 / 6; grid-row: 2 / 4; z-index: 2; transform: translateY(-1.5rem); } }

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

 #curve text { font-size: .889rem; text-transform: uppercase; fill: #fff; text-anchor: start; }

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

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

 @media (min-width: 64em) { body { grid-column-gap: 2vw; align-items: start; } body > svg { grid-column: 1 / 5; grid-row: 2 / 5; z-index: -1; } header { grid-column: 5 / -1; grid-row: 1; } #banner { grid-column: 5 / -1; grid-row: 2; } #content { grid-column: 1 / 4; grid-row: 4; } #curve { grid-column: 1 / 5; grid-row: 1 / 4; } ul { grid-column: 5 / -1; grid-row: 3 / -1; display: block; } }

قراءة المزيد من السلسلة

• قرارات التصميم الملهمة: مجلة Avaunt
• قرارات التصميم المستوحاة: الأمور الملحة
• قرارات التصميم الملهمة: مجلة إرنست
• قرارات التصميم الملهمة: أليكسي برودوفيتش
• قرارات التصميم الملهمة: بيا فيتلر
• قرارات التصميم الملهمة: نيفيل برودي
• قرارات التصميم الملهمة: Otto Storch
• قرارات التصميم الملهمة: Herb Lubalin
• قرارات التصميم الملهمة: جيوفاني بينتوري
• قرارات التصميم الملهمة: Emmett McBain
• قرارات التصميم الملهمة: برادبري طومسون

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