كيفية إتقان تصميم التخطيط

دليل كامل لتعلم أساسيات التصميم المرئي.

سؤال المليون دولار: ما سر التصميم الجيد؟

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

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

Linda Gaom ، Behance

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

ما هو تصميم التخطيط؟

يتعلق تصميم التخطيط بترتيب العناصر الرسومية لجذب انتباه القارئ ونقل رسالة معينة بطريقة جذابة بصريًا .

لذلك نحن لا نتحدثمكان الراحة ، بينما تنقل العناصر الأخرى الاتجاه.

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

المبدأ # 5. استخدم التباين

تأكد من أن لديك تباينًا كافيًا في التصميم الخاص بك.

يساعد التباين في تنظيم التصميم الخاص بك وسيؤسس التسلسل الهرمي الذي تشتد الحاجة إليه ويركز على ما هو مهم.

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

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

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

المصدر: خطة عمل التسوية IAG

المبدأ رقم 6. التكرار ، النمط ، الإيقاع

عندما نفكر في التكرار ، نفكرمن نفس العنصر مرارًا وتكرارًا.

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

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

يمكنك القيام بذلك عن طريق تكرار الأشكال أو الرموز. أو حتى نظام ألوان ، ومحرف ، ونفس النمط بشكل عام.

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

المصدر: Thepentool.co

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

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

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

تنزيل Vectornator لتبدأ

ارتقِ بتصميماتك إلى المستوى التالي.

تنزيل الملف حول تصميم الشعار هنا. لكن تصميم المواد المطبوعة ، مثل الصحف والمجلات والملصقات ونظيراتها الرقمية ، بالإضافة إلى تصميم الويب أو التطبيق أو UX / UI.

تعطينا كلمة "تخطيط" الكثير من التلميحات. يعني ترتيب العناصر المحددة مسبقًا على الصفحة.

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

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

الغرض من تصميم التخطيط

لنقل رسالة بسرعة

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

لخلق التماسك

يساعدك التخطيط على ترتيب العديد من عناصر التصميم الخاص بك بطريقة سهلة الهضم ومتماسكة ومنطقية.

لخلق الجمال

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

مصمم من قبل فرانك فيليبين لكتابه "اعتدت أن أكون طالب تصميم: إذن - الآن.' المصدر: DesignBoom

The Elements of Layout Design

Text

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

الصورة

أكثر أنواع الصور شيوعًا هي الصور الفوتوغرافية أو الرسوم التوضيحية أو الرسوم البيانية.

الأشكال

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

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

المبادئ الذهبية لتصميم التخطيط

ستلاحظ أن المبادئيتبع تصميم التخطيط الكثير من المبادئ الأساسية للتصميم. مثل استخدام اللون بطريقة معينة ، والطباعة ، والتكرار ، والتباين ، والتسلسل الهرمي ، والتوازن.

المبدأ رقم 1. استخدم الشبكات

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

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

المصدر: hgmlegal.com

تشريح الشبكات

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

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

المصدر: Radversity

أنواع الشبكات

تم استخدام شبكات التخطيط لأول مرة للترتيب الكتابة اليدوية على الورق.

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

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

أنظر أيضا: نصائح إبداعية لعلاج ملل الحجر الصحي

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

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

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

المصدر: UXplanet

المصدر: Radversity

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

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

المصدر: UX Planet

المصدر: Radversity

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

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

المصدر: UXالكوكب

المصدر: الإشعاع

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

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

المصدر: UX Planet

المصدر: Fragaria

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

المصدر: UX Plane

المبدأ # 2. استخدم الفضاء السلبي

غالبًا ما نعتقد أن الفراغ أو الصمت أو قلة اللون أمر سيء. لكننا لا نفكر في الكيفية التي تشكل بها الأساس المتين للتباين.

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

المساحة السلبية الجيدة مقابل المساحة السيئة

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

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

إذا كان كل شيء يصرخ لاهتمام المشاهد ، فلا شيء مسموع.

- Aaron Walter ، 'Design for emotion '

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

مصمم بواسطة Brunswicker ، المصدر: Codesignmag.com

المبدأ رقم 3. اختر نقطة اتصال واحدة

هل طلب منك أحد العملاء تكبير الشعار؟ ثم لجعل العنوان أكبر؟

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

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

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

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

من تصميم Braulio Amado لـ Bloomberg Businessweek ، المصدر: من الجيد أن

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

المبدأ رقم 4. فكر في القرب والتدفق

مبدأ التقارب بسيط. تأكد من وضع العناصر المرتبطة ببعضها البعض معًا.

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

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

المصدر: Satori Graphics

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