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