Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Designing

9 مبادئ أساسية لتصميم موقع ويب جيد

by
Read Time:15 minsLanguages:

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

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

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

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



يستخدم Capture the Valley قضبان ملونة لتوجيه العين عبر أقسام من الأعلى إلى الأسفل ...

1. الأسبقية (توجيه العين)

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

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

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

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

لتحقيق الأسبقية لديك العديد من الأدوات تحت تصرفك:

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


قراءة متعمقة:

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



يمتلك ماريوس موقعًا بسيطاً للغاية وسهل جدًا مع مساحة كبيرة

2. التباعد

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

التباعد يجعل الأمور أكثر وضوحا. في تصميم الويب هناك ثلاثة جوانب من المساحة يجب أن تفكر فيها:

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


قراءة متعمقة:

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



يقوم نوديل بوكس بعمل جيد في استخدام حالات التشغيل / الإيقاف في نظام التنقل الخاص به للحفاظ على توجيه المستخدم.

3. التنقل

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

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

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


قراءة متعمقة:

يحتوي تطبيق SmashingMagazine على مجموعة من أنماط التنقل التي تقوم على CSS والتي من الجميل أن تمر عليها، و # 3 هي ملكي! A List Apart لديه مقال جيد حول التوجه يسمى أين أنا؟


4. تصميم للبناء

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

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


إذا كان أي شخص يعرف الطباعة الجيدة فإنه أنا أحب الطباعة !

5. الطباعة

النص هو أكثر عناصر التصميم شيوعًا، لذلك ليس من المفاجئ أن يكون قد تم التفكير فيه كثيرًا. من المهم مراعاة أشياء مثل:

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


قراءة متعمقة:

لدى Nick La في WebDesignerWall مقالة رائعة عن الطباعة على الإنترنت تسمى التباين الطباعي والتدفق.



تعرف Happycog سهولة الاستخدام تماماً، وموقعها الخاص بسيط وسهل الاستخدام.

6. سهولة الاستخدام

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

لقد ناقشنا بالفعل بعض جوانب سهولة الاستخدام - التنقل، والأسبقية، والنص. فيما يلي ثلاث جوانب منها أكثر أهمية:

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


قراءة متعمقة:

ALISTApart لديه الكثير من المقالات حول قابلية الاستخدام لموقع الويب.



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

7. المحاذاة

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

قد ترغب أيضًا في وضع تصميماتك على شبكة معينة. يجب أن أعترف بأنني لا أفعل هذا بوعي - رغم أنه من الواضح أن موقعًا مثل Psdtuts + يمتلك في الواقع بنية شبكية قوية جدًا. في هذا العام شاهدت بعض المقالات الجيدة حول تصميم الشبكة بما في ذلك SmashingMagazine تصميم بنهج قائم على الشبكة وقائمة  بمعزل عن التفكير  خارج الشبكة . في الواقع، إذا كنت مهتمًا بتصميم الشبكة، فيجب عليك بالتأكيد زيارة موقع DesignByGrid.com المسمى على نحو ملائم لكل الأشياء.



موقع ExpressionEngine هو روح الوضوح. كل شيء واضح وبسيط. كل شيء واضح وبسيط.

8. الوضوح (الحدة)

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

في CSS الخاص بك، سيكون كل شيء مثاليًا، لذا لا داعي للقلق، ولكن في Photoshop ليس كذلك. لتحقيق تصميم واضح عليك القيام بما يلي:

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


قراءة متعمقة:

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



يقوم Veerle بعمل رائع في الحفاظ حتى على أصغر التفاصيل المتسقة في جميع المجالات.

9. الاتساق

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

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

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

كما أن امتلاك مجموعة جيدة من أوراق أنماط CSS يمكن أن يقطع شوطًا طويلاً في تصميم متناسق. حاول تعريف العلامات الأساسية مثل<h1> و <p> بطريقة تجعل الإعدادات الافتراضية متطابقة بشكل صحيح وتتجنب الاضطرار إلى تذكر أسماء فئات محددة طوال الوقت.


قراءة متعمقة:

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

احصل على كتابي!

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

One subscription.
Unlimited Downloads.
Get unlimited downloads