قد يكون للتصميم تأثير. قد يكون لديك الاسلوب. لكن وجود هذه ليست كافية.

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

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

إذا تم ذلك بشكل صحيح ، فسيكون الأشخاص مهتمين جدًا بالمحتوى الذي لن يلاحظوه أي شيء آخر.

تابع القراءة لمزيد من التفاصيل والنصائح لإنشاء تصميمات تعمل في تصميماتك.

مع المثال أدناه ، سيلاحظ معظم الناس الصورة أو العنوان أولاً ، ثم النص وأخيرًا الروابط.

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

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

تخطيط الصفحة مع النص والصور والعنوان

ترتيب قائم على الاحترام المتبادل

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

مخططات تخطيط الصفحة

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

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

تخطيطات الصفحة ، عكسها

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

الاتجاهات في تخطيط الصفحة

يظهر النموذج بالتبادل الاهتمام بالنص ، وعندما يتغير ، يتجاهل ذلك. ترتيب العناصر يحدد إما موقف إيجابي أو سلبي.

محاذاة بناء على المعالم

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

كيف تعمل المحاذاة والفضاء في التصميم

الخطوط المتداخلة بين المعالم في الطباعة والصورة تكثر في هذه التركيبة:

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

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

استخدام ميزات لخلق الانسجام

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

أمثلة للتخطيط ، قبل وبعد

يعمل الشكل 5 على محاذاة عناصر مساحة الصفحة وقواعد كل شيء على حدود اللوحة.

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

اتجاه التدفق في تخطيطات

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

الفضاء والمواءمة تعمل بشكل أفضل في انسجام تام

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

الجواب الصحيح

تستخدم جميع التخطيطات الثلاثة التالية العناصر الرئيسية للصورة والصورة والنص:

مقارنة ثلاثة تخطيطات

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

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

بتعمد كسر القواعد

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

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


مكتوبة حصريًا لموقع Webdesigner Depot by Ben Gremillion. بن هو كاتب مستقل ومصمم الذي يحل مشاكل التواصل مع تصميم أفضل.

كيف يمكنك اتباع المعالم على التصميمات الخاصة بك؟ ما هو الأنسب لك وما لا يعمل؟