فهم الطباعة 10 أدوات مفيدة والموارد

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

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

اقتراحات للقراءة: فهم الطباعة: الكتابة للويب

مصفوفة الخط

تم نشر هذا الدليل عبر الإنترنت من خلال مدونة تصميم 24ways. ويتميز بجدول مصفوفة لجميع خطوط الويب القياسية التي ستجدها افتراضيًا من مختلف موردي البرامج. تشمل العناوين الشهيرة برامج Windows و Mac OS X و Microsoft Office و Adobe Creative Suite.

فحص تباين الألوان

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

HTML-هوز

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

Typechart

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

PX-to-EM.com

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

تعيين نوع CSS

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

التقليب نموذجي

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

الشبكة المطبعية

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

WhatTheFont!

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

خط الأساس / خط الطول حاسبة

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