نصائح بسيطة لتصميم الويب لنتائج جيدة

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

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

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

ابدأ بفهم جيد للمنتج / الموقع

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

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

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

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

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

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

نصائح وحيل خاصة بالتصميم:

الآن ، دعنا نرى بعض نصائح UI / UX المحددة التي يمكنك استخدامها في تصميمك التالي:

1 - التباين!

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

مصدر

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

مصدر

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

النصيحة هنا هي - عند العمل مع النص ، ابدأ باللون الأسود على الأبيض أو الأبيض على الأسود. عندما تضيف المزيد من العناصر وتحتاج إلى الفصل باستخدام التسلسل الهرمي المرئي ، حاول أولاً الكتابة بالخط العريض أو تغيير حجم الخط. بعد ذلك فقط ، إذا لم ينجح الأمر ، فابدأ بتغييرات اللون ، ولكن من الناحية المثالية لا يزيد الاختلاف عن 30-40٪ (يتم ضبط العتامة عمومًا على 70٪).

2 - مسافة بيضاء متسقة

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

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

على النقيض من ذلك ، إليك مثالًا يحتوي على كمية متشابهة إلى حد ما من المحتوى / نوع المكونات ولكن بمظهر أكثر اتساقًا:

مصدر

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

3 - اللون

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

يتبع المثال التالي جميع الاقتراحات الثلاثة حتى الآن - التباين الجيد والتوازن واستخدام اللون:

مصدر

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

مثال من عجلة ألوان Adobe:

مصدر

لون أخضر جميل في المنتصف ولكن من الصعب استخدام النتائج على الجانب الأيسر / الأيمن.

4 - التمسك بأسلوب في جميع أنحاء الموقع

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

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

الآن ، إذا أردنا إضافة صورة وعنوان يمكننا تحقيق شيء مثل هذا ربما:

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

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

هنا نفس التصميم من الأعلى ولكن بمظهر مستدير:

إنه نفس الشيء ، لكنه يبدو مختلفًا كثيرًا الآن.

5 - التصميم مع المكونات

المكونات موجودة في جميع أدوات التصميم الحديثة مثل Figma و Adobe XD. إنها موجودة لسبب وجيه للغاية - يقوم المطورون بتنفيذ المواقع بطريقة يمكن إعادة استخدامها قدر الإمكان.

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

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

مصدر

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

مثال بواسطة DevriX

باختصار:

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