Advertisement
  1. Web Design
  2. Design Theory

بناء التناسق والعلاقات في تصاميمك

by
Read Time:9 minsLanguages:
This post is part of a series called Design School for Developers.
Adding Space to Your Designs
Reducing the Bloat

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

من الأجزاء المهمة في التركيب هي فهم كيفية بناء التناسق في تصاميمك وكيفية عرض العلاقات بين كل من العناصر في الصفحة.


بناء التنسيق – ماذا؟

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

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

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

يقوم كذلك بناء التناسق والعلاقات في تصاميمك على بناء العلاقات بين العناصر الأصغر، المفردة في تصاميمك.

The gov.uk website is extremely consistent, reflecting the tone and professionalism that is expected of the Govenment website.The gov.uk website is extremely consistent, reflecting the tone and professionalism that is expected of the Govenment website.The gov.uk website is extremely consistent, reflecting the tone and professionalism that is expected of the Govenment website.
موقع gov.uk متناسق جدا، ويعكس نمط الاحترافية المتوقعة من موقع ويب حكومي.
govuk-2govuk-2govuk-2

لم هذا مهما

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

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

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

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

At inc, there is a clear visual style that represents the brand throughout their website really well.At inc, there is a clear visual style that represents the brand throughout their website really well.At inc, there is a clear visual style that represents the brand throughout their website really well.
في الشركات، هناك أسلوب بصري واضح يقدم العلامة على كامل موقع الويب خاصتهم بشكل واضح.
inc-2inc-2inc-2

كيف تصمم مع تناسق

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

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

فكر بالطريقة التي تصمم فيها كل العناصر في تصميمك، مثل:

  • اللون (أساسي، ألوان ثانوية)
  • البصريات (المصور، الصور،  والرموز، الأزرار)
  • الخطوط (الحجم، الهرمية، المواضع)
  • قياس (المحتوى، الصور، العلاقات)

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

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

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

The onsite website has a great brand, with a simple design that sticks true throughout the homepage and other top-level pages.The onsite website has a great brand, with a simple design that sticks true throughout the homepage and other top-level pages.The onsite website has a great brand, with a simple design that sticks true throughout the homepage and other top-level pages.
موقع أون سايت له علامة عظيمة، بتصميم بسيط والتي تظهر بوضوح في كامل الصفحة الرئيسية والمستويات العليا من الصفحات الأخرى.
onsite-2onsite-2onsite-2

بناء العلاقات في تصاميمك

اللون

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

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

النبرة والمواصفات

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

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

تلقي المستخدم

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

WooThemes have a great visual style and tone that's set throughout all of their website - which can be more difficult to do when you have larger sites like this.WooThemes have a great visual style and tone that's set throughout all of their website - which can be more difficult to do when you have larger sites like this.WooThemes have a great visual style and tone that's set throughout all of their website - which can be more difficult to do when you have larger sites like this.
يمتلك ووثيمز أسلوب بصري عظيم ونبرة تعرض بكامل موقعهم – والتي يمكن أن تكون صعبة التصميم عندما يكون لديك مواقع كبيرة كهذا.
woothemes-2woothemes-2woothemes-2

أدوات بناء التناسق

هناك العديد من الأدوات التي يمكنك إنشاؤها لنفسك، أو تأمينها لزبائنك للمساعدتهم بفهم أهمية التناسق.

أدلة للأسلوب

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

انظر: عناصر الأسلوب للمزيد من الأفكار.

مكتبات الأنماط

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

أحب التفكير بمكتبات الأنماط بسبب ثلاث مجالات رئيسية: أنماط التصميم، أنماط التحديد، وأنماط المحتوى.

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

قوائم التحقق

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

  1. أولا، كيف ظهر أسلوب الكتابة؟ هل هو متناسق؟ هل العناوين متناسقة من صفحة لصفحة؟ هل ينطوي الأسلوب تحت إيقاع شاقولي جميل عبر الصفحة؟ هل يخرج الإيقاع الشاقولي عن موصعه مع إضافة الصور؟ أو هل يبدو كل شيء بمظهر جيد؟
  2. تناسق الصور/ التناسق البصري؛ كيف تبدو الصور؟  هل كل شيء بأسلوب ونبرة متماثلة، أو هل هناك اختلافات واضحة في أساليب الصور؟ هل كل شيء مقتطع أو مشكل بطريقة متماثلة، أو هل هناك اختلاف كبير؟ هل قياسات الصور متماثلة أو هل هناك مجموعة من القياسات في كامل التصميم؟ هل الأيقونات بحجم متماثل عندما يكون ذلك مناسبا؟ هل لكافة الأزرار نفس التصميم والخلفية البيضاء؟
  3. تناسق اللون؛ كيف تبدو الألوان؟ هل تؤدي الألوان عملها بشكل جيد من صفحة لصفحة؟ هل الألوان مناسبة؟ هل تعمل الألوان بشكل جيد مع بعضها؟ هل الألوان نفسها عند استخدامها لأكثر من مرة؟

الوظائف

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.