اختيار أحجام الخط بالطريقة الصحيحة
إذا نظرت إلى بعض التصاميم المعدّة بشكل جيد، فسترى تناسقًا في أحجام الخطوط. وهذا لسبب ما.
ملاحظة: ضع في اعتبارك أيضًا أنك تحتاج إلى خطين فقط، ربما ثلاثة، في التصميم. ومع ذلك، فإن تحديد المحارف الصحيحة وجعلها تعمل معًا يتجاوز نطاق هذا البرنامج التعليمي.
ابدأ بتعريف بعض أحجام الخطوط الأساسية لاستخدامها في المشروع بأكمله. (على سبيل المثال، من الحماقة استخدام 30 و31 و32 بكسل. بدلاً من ذلك، اجمع هذه الأحجام الثلاثة المتشابهة في حجم واحد).
تحقق أحجام الخطوط القياسية ميزتين:-
سيكون تصميمك أكثر اتساقًا وأكثر أناقة.
سوف يعمل على تسريع عملية التصميم ويجعلك أكثر كفاءة.
أحجام الخط :- عند تعريف أحجام الخط، تأكد من عدم زيادة الأحجام بنفس الزيادة. عند تكبير النص، يجب أن يكون غير خطي. وهذا يعني أنه كلما كان النص الذي تقوم بإنشائه أكبر، كلما كانت الزيادة أكبر.
لنفترض أن لديك كتلة نص بحجم خط 12 بكسل، وتريد تكبيرها. أنت تجرّب 14 بكسل، وأنت راضٍ. ولكن تخيل بعد ذلك أن لديك عنوانًا كبيرًا (40 بكسل) وتريد جعله أكبر. هل ستقوم بزيادة الحجم بمقدار 2 بكسل فقط، من 40 إلى 42؟ بالطبع لا. ومن الناحية الجمالية، يتطلب النص تغييراً أكبر بكثير. قد تحتاج إلى زيادته بمقدار 24 بكسل، مما يمنحك عنوانًا أكبر بـ 64 بكسل.
باختصار، يعني هذا أنه كلما أردت أن يكون النص أكبر، كلما زادت الزيادة التي ستحتاج إلى استخدامها. لا ينطبق هذا المبدأ البسيط للغاية على النص فحسب، بل ينطبق أيضًا على حجم الأزرار والمساحة البيضاء وكل ما عدا ذلك.
وهو يستند عادة إلى تقدم هندسي. فيما يلي مخطط مفيد جدًا يعرض مقياس الخط: ومع ذلك، بالنسبة إلى أسلوب الطباعة، يتم استخدام مقياس واحد موثوق به مع أحجام الخطوط التي ترغب في الالتزام بها إلى الأبد. المقياس هو 12 و14 و16 و18 و20 و24 و30 و36 و48 و60 و72 بكسل.
ارتفاع سطر النص :- بمجرد تحديد كافة أحجام الخطوط، ستحتاج إلى الاهتمام بتباعد الأسطر. بالنسبة لارتفاع الخط، استخدم زيادات قدرها 4 بكسل مرة أخرى. على سبيل المثال، بالنسبة لنص 16 بكسل، دعنا نعيّن ارتفاع الخط إلى 24 بكسل. إذا أردت أن يتنفّس النص أكثر، فقم بزيادة ارتفاع الصف بمقدار 4 بكسل إلى 28 بكسل.
حدد ألوان المشروع:-
هل تعرف عدد مجموعات الألوان الموجودة؟ الكثير! ستهدر الكثير من الوقت إذا لم تحدد مسبقًا ظلال الألوان. لا يمكنك أن تقتصر على الأسود والأبيض والأزرق على سبيل المثال. لكل لون، ستحتاج إلى ظلال أخرى، ومن المهم تعيينها مسبقًا، بحيث تكون الظلال متناسقة في مشروع التصميم. ولا نريد أن نخلق حالة من الفوضى في التصميم. هدفي الحصول على 5 إلى 10 ظلال لكل لون. أفضّل تحديد 9 ظلال لكل لون.
لنلقِ نظرة عن كثب على ظلال الألوان.
لماذا 9 ظلال من كل لون؟
الميزة الأولى :-
هي تسمية الألوان. سواء كنت تستخدم محرر رسومات أو تعليمة برمجية لـ CSS، ستستفيد بالتأكيد من هذه النصيحة. سيتم تعيين رقم لكل تظليل، مثل 100 و200 و300 و400 و500 و600 و700 و800 و900. (لماذا المئات؟ وعادةً ما تكون هذه هي الطريقة التي يتم بها أيضًا تنظيم قطع المحارف).
ثانياً :-
9 هو عدد مفيد لتعريف الألوان. أفضل طريقة لتحضير هذه الظلال هي تحضير صف من 9 مربعات وملء المربعات بالألوان. سيكون اللون الأساسي هو اللون الأوسط. بعد ذلك، يمكنك تحديد الظل الأفتح (في أقصى اليسار) والأدكن الظل (في أقصى اليمين).
سعة ظلال من كل لون :-
إعداد مختلف أحجام العناصر وأنواعها وحالاتها
عند العمل على تصميم ما، ستعمل عادةً مع عدد لا يحصى من الرموز والأزرار والمكونات الأخرى. ومرة أخرى، من المستحسن أن يتم الإعداد لها مسبقاً بعدة أحجام، وأن تقتصر الخيارات على أقل عدد ممكن. أثناء عملية التصميم، لا تقم بإضافة أحجام أخرى، ولا تحاول ضبط حجم المكونات لتتناسب مع احتياجاتك. بدلاً من ذلك، استخدم فقط تلك التي قمت بتعريفها بالفعل، وسيكون التصميم بأكمله أكثر اتساقًا ونظافًا.
لنلقِ نظرة على الأزرار كمثال. عندما تبدأ، ستحتاج إلى تعريف هيكلها الهرمي. للقيام بذلك، قم بعمل زر بالإجراء الأساسي، وزر بالإجراء الثانوي، وربما زر آخر بالإجراء الأقل أهمية. لكل زر، حدد حالته (نشط، غير نشط) ومتغير اللون. حاول دائمًا تقليل عدد العناصر إلى العناصر الأكثر أهمية.
تعريف خصائص العناصر الأخرى :-
غالبًا ما يستخدم مصممو واجهة المستخدم الظلال في أعمال التصميم الخاصة بهم. ومع ذلك، بالنسبة للمصممين الأقل خبرة، قد تكون الظلال في بعض الأحيان معاناة. عند إنشاء ظل، يجب تعيين مسافة الظل على طول المحور س والمحور ص، وكذلك نصف قطر الضبابية والألوان والشفافية. قد تستغرق الظلال الكثير من الوقت لإجراء الضبط الدقيق، ولهذا السبب سوف ترغب في تحضيرها قبل الغوص في التصميم. من المفيد تحضير مجموعة من الظلال (باستخدام نفس الطريقة المستخدمة للألوان)، ثم تطبيقها فقط خلال عملية التصميم.
كذلك، كن على دراية بجميع الخصائص الأخرى للعناصر التي ستعمل معها، مثل نصف قطر الزاوية، والشفافية، وتدرجات الألوان.
أنماط الظل
مثال على أنماط الظل
مساحة بيضاء
من المهم ضبط المساحة البيضاء بشكل صحيح. سواء كنت تقوم بموازنة عناصر من الخارج (الهامش) أو من الداخل (paddding)، يجب أن تعتمد على الرقم السحري 8 مرة أخرى. قم بزيادة الإزاحة بمقدار 8 بكسل (4 للعناصر الصغيرة). وكما هو الحال مع حجم الخط، فكلما كانت الفجوة المطلوبة أكبر، كلما كانت الزيادة أكبر (مرة أخرى، ستحتاج إلى تعريف هذه الزيادات مسبقًا).
مساحة بيضاء
الخاتمة
لجعل تصميماتك نظيفة ومتسقة، تحديد بعض الحدود ومسار واضح خلال العملية.
تعرف على ما إذا كنت قد استخدمتها بالفعل في مكان ما في التصميم.
إذا كان الأمر كذلك، فيمكنك ببساطة نسخ هذا العنصر.
اتبع الإيقاع الأفقي والعمودي واضبط حجم العناصر باستخدام الخطوات التي حددتها في البداية.
تجنب القرارات المعقدة والمعارك التي لا تنتهي مع وحدات البكسل. ضع النظام في مكانه.
لا تقم بإنشاء العنصر نفسه مرتين.
إذا كان هناك ترتيب في التصميم الخاص بك ، سيكون عملك أفضل وأكثر كفاءة ، وسوف تكون قادرا على التكرار بشكل أسرع ، وسوف تكون قادرة على الاتصال مع المطورين أكثر سهولة.
سيقوم المطورون بتعيين المتغيرات التي تتبع الأنماط الخاصة بك، لذا قم بتعريفها بوضوح. سوف تحصل على تصميم نظيف، وسوف يتمكن المطورون من إنشاء تعليمات برمجية أفضل وأكثر استدامة. وسوف يكون الجميع سعداء.
شكرأ لكم وأتمنى لكم المزيد من العلم والعمل .
