قرارات التصميم المستوحاة مع Otto Storch: عندما أصبحت الفكرة والنسخ والفن والطباعة غير منفصلين

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

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

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

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

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

لم أسمع أبدًا اسم Otto Storch مذكورًا خلال مؤتمر تصميم أو رأيته يُشار إليه في كتاب عن تصميم الويب. لكن اكتشافه جعلني أرغب في توعية المزيد من الناس بالرجل وعمله.

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

مستوحى من أوتو ستورتش

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

لم يحدث النجاح بين عشية وضحاها ، واستغرق الأمر سبع سنوات من العمل الحر قبل أن عينته مجلة Storch Better Living في نيويورك كمساعد مدير فني. نشر ماكول العديد من العناوين بما في ذلك Popular Mechanics و Blue Book و Red Book و McCall's Magazine نفسها. انتقل Storch إلى مجلة McCall's Magazine حيث بنى على ما تعلمه من Brodovitch وخبرته في تصميم المواد الإعلانية وأغلفة الألبومات وأغلفة الكتب والمجلات.

لم يكن Storch خائفًا من اتخاذ قرارات برأيه وهذا الإصرار هو الذي يجعل الكثير من عمله مميزًا.

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

- أوتو ستورش

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

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

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

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

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

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

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

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

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

قد يكون Otto Storch إضافة جديدة إلى قائمة المصممين الملهمين لدي ، لكن تصميماته تؤثر بالفعل على قائمتي.

تشكيل

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

 [src="shape.png"] { float: left; shape-outside: url(shape.png); shape-margin: 20px; }

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

افعل المزيد مع الأشكال

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

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

 <main> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </aside>

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

 p { margin-right: 10vw; margin-left: 10vw; }

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

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

 <picture> <source media="(min-width: 48em)"> <img src="small.png" alt="Volkswagen Beetle"> <</picture>

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

 picture { width: 160px; shape-margin: 20px; }

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

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

 main picture:first-of-type, aside picture:first-of-type { float: left; shape-outside: url(shape-1-sm.png); } main picture:last-of-type, aside picture:last-of-type { float: right; shape-outside: url(shape-2-sm.png); }

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

 @media (min-width: 48em) { main picture:first-of-type { width: 290px; shape-outside: url(shape-1-lg.png); } main picture:last-of-type { width: 230px; shape-outside: url(shape-2-lg.png); } aside picture:first-of-type { width: 230px; shape-outside: url(shape-3-lg.png); } aside picture:last-of-type { width: 290px; shape-outside: url(shape-4-lg.png); } }

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

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; } }

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

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

اجعل النص يبدو لذيذًا

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

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

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

 <section> <img src="shape-1.png" alt=""> <main> <h1>Get bitten by the bug</h1> </main> <img src="img-1.png" alt="Volkswagen Beetle"> <img src="img-2.png" alt="Volkswagen Beetle"> </section> <div> </div>

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

 p { text-align: center; text-transform: uppercase; }

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

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

 <p> <img src="shape-2.png" alt=""> <img src="shape-3.png" alt=""> … </p>

أحدد أبعاد هاتين الصورتين وقمت بتعيين عتامةهما على صفر لأنني لا أريد أن يراها المشاهد:

 p img { width: 100px; height: 125px; opacity: 0; }

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

 <img src="shape-2.png" alt="" role="presentation" aria-hidden="true">

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

 p img:nth-of-type(1) { float: left; shape-outside: url(shape-l.png); } p img:nth-of-type(2) { float: right; shape-outside: url(shape-r.png); }

لا أريد أن يكون قسم العرض التقديمي مرئيًا للتقنيات المساعدة أيضًا ، لذلك أضفت نفس الدور والسمات المخفية إلى هذا أيضًا:

 <div role="presentation" aria-hidden="true"> </div>

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

 div { display: none; }

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

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

 @media (min-width: 48em) { section { display: grid; grid-template-columns: minmax(400px, 1fr) minmax(400px, 1fr); grid-gap: 2vw; align-items: end; } }

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

 @media (min-width: 64em) { body { display: grid; grid-template-rows: 1fr 1fr; }

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

 section { grid-template-columns: repeat(4, minmax(400px, 1fr)); max-width: 100vw; overflow-x: scroll; }

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

 div { display: block; background-color: #a73448; } }

اقترح Dave Hyatt من Webkit في الأصل انعكاسات CSS تعود إلى عام 2008 ، ولكن حتى الآن لم يتم تنفيذها في محركات عرض المستعرضات الأخرى. انعكاسات CSS مدعومة حاليًا بواسطة Google Chrome فقط.

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

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

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

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

 @media (min-width: 64em) { @supports (-webkit-box-reflect:below) { section { -webkit-box-reflect: below 0 linear-gradient(transparent, white); } div { background-color: #f0f0f1; } } }

تناظر المرآة

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

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

 <main> <picture>…</picture> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> </aside>

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

 <p> <span>Although </span> <span>designed in the </span> <span>1930s, due to </span> <span>World War II, </span> <span>civilian Beetles </span> <span>only began to </span> <span>be produced in </span> <span>significant </span> <span>numbers by the </span> <span>end of the 1940s.</span> </p>

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

 body { background-color: #262626; }

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

 main, aside { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem 0; box-sizing: border-box; color: #fff; }

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

 aside { background-color: #a73448; }

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

 p { margin: 0 2rem; text-align: center; text-transform: uppercase; }

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

 @media (min-width: 48em) { main, aside { min-height: 50vh; padding: 2rem; }

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

 p { max-height: 12em; margin: 0; text-align: left; writing-mode: vertical-rl; }

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

 p span { display: block; line-height: 2; }

كانت التحولات ، بما في ذلك التدوير والقياس والترجمة جزءًا من CSS لما يقرب من عقدين من الزمن. يتضمن استخدام التحويل إضافة دالة تحويل مثل تدوير ، ثم قيمة بين قوسين.

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

 p span:nth-child(-n+6) { transform: rotate(-15deg); } p span:nth-child(n+12) { transform: rotate(15deg); }

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

لإفساح المجال للنص الذي تم تدويره ، أضف هوامش إلى سطرين:

 p span:nth-child(6) { margin-left: 1em; } p span:nth-child(12) { margin-right: 1em; } }

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

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; }

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

 main, aside { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 0; padding: 2rem; min-height: 100vh; }

قمت بنشر الصورة الرئيسية عبر العمودين الثاني والثالث ، والصورة الجانبية في العمودين الأول والثاني:

 main picture { grid-column: 2 / -1; grid-row: 1; padding: 0 5vw; } aside picture { grid-column: 1 / 3; padding: 0 5vw; }

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

 main p { grid-column: 1; grid-row: 1; } aside p { grid-column: 3; }

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

 main p, aside p { max-height: none; writing-mode: horizontal-tb; } main span { text-align: right; }

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

 main p span:nth-child(-n+6) { transform: rotate(10deg); } main p span:nth-child(n+12) { transform: rotate(-10deg); } main p span:nth-child(6) { margin: 0 0 15px; } main p span:nth-child(12) { margin: 15px 0 0; } aside p span:nth-child(-n+6) { transform: rotate(-10deg); } aside p span:nth-child(n+12) { transform: rotate(10deg); } aside p span:nth-child(6) { margin: 0 0 15px; } aside p span:nth-child(12) { margin: 15px 0 0; } }

أعمدة سبان

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

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

 <header> <svg>…</svg> <h1>Get bitten by the bug</h1> <figure> <picture>…</picture> </figure> </header> <main>…</main> <aside>…</aside>

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

 body { padding: 2rem; background-color: #262626; color: #fff; }

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

 h1 { margin: 0 auto 1.5rem; max-width: 8rem; text-align: center; text-transform: uppercase; }

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

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

 figure { overflow-x: scroll; }

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

 @media (min-width: 48em) { figure { overflow-x: visible; } p { margin-right: 25vw; margin-left: 25vw; } }

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

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; padding: 4rem; }

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

 header { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; grid-row-gap: 4vh; }

أضع الشعار والعنوان في هذا العمود الأوسط:

 svg, h1 { grid-column: 2; }

ثم أضف هوامش بين الفقرات:

 p { margin-right: 1rem; margin-left: 1rem; }

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

 main:before, aside:before { display: block; shape-margin: 10px; }

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

 main:before { content: url(shape-l.png); float: right; shape-outside: url(shape-l.png); }

أقوم بتطبيق قيم مماثلة على ما قبل العنصر الجانبي ، وهذه المرة عائم العجلة إلى اليسار:

 aside:before { content: url(shape-r.png); float: left; shape-outside: url(shape-r.png); } }

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

خاتمة

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

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

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

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

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