9 نصائح أساسية لتصميم الويب للمبتدئين

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


نصائح لتصميم المواقع للمبتدئين

في هذه الأيام من الممكن لأي شخص أن يكون مصمم ويب. نعم ، إنها عبارة جريئة – ولكن مع زيادة إمكانية الوصول إلى برامج التصميم مفتوحة المصدر مثل جيمب, ومع منصات بناء مواقع DIY مثل Wix و Weebly تغرق السوق ، الخط الفاصل بين الهواة وحسن النية مصمم الويب أصبح أرق وأخطر بكثير في الآونة الأخيرة. الشيء المثير للاهتمام حول الإبداع هو أنه لا يمكن لأحد أن يقرر لك متى تكون “جاهزًا” لشغل دور معين. الكثير من نجوم الروك لم يتلقوا دروسًا في الموسيقى أبدًا ؛ لم يدرس العديد من الفنانين الناجحين علم التشريح البشري ؛ ولا يحمل غالبية مصممي الويب درجة رسمية. لذا ، إذا أنشأت موقعًا إلكترونيًا لنشاطك التجاري الخاص ، فهل يمكنك القول بثقة أنك “مصمم ويب”؟ هذا لك لتحديده.

من الممكن لأي شخص أن يكون مصمم ويب مع منصات بناء مواقع DIY.

انقر للتغريد

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

ما هذا الدليل (وما ليس)

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

معلومات سريعة: إن المعرفة الأساسية بـ HTML و CSS ستكون فوائد كبيرة لأي مصمم ويب حديث العهد. إذا كنت ترغب حقًا في الحصول على الترميز ، أقترح التحقق من ذلك W3Schools لمعرفة المزيد عن المؤسسة.

أساسيات تصميم الويب للمبتدئين

دعونا ننزل إليها ، أليس كذلك؟ فيما يلي بعض الاتجاهات والمبادئ التوجيهية الأكثر فائدة التي يجب معرفتها عند إنشاء موقع الويب الأول:

1. ضع الماوس بعيدا ، التقط قلم رصاص

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

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

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

2. اتبع التسلسل الهرمي

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

الاحتفاظ بالمحتوى “في الجزء المرئي من الصفحة”

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

باستخدام صورة “البطل”

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

صورة البطل / مثال بانر

يمكن تغيير “الطي” اعتمادًا على الجهاز

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

معلومات سريعة: القاعدة العامة هي التأكد من ملاءمة المحتوى “في الجزء المرئي من الصفحة” ضمن القاسم المشترك الأدنى لأبعاد الشاشة. عادة ما يتم قبول هذا على أنه 768 بكسل الدقة الرأسية.

3. الطباعة هي التصميم الخاص بك

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

  • تأكد من أن النص مقروء (تجنب الخطوط المنمقة!) و كبير بما فيه الكفاية (عادة حوالي 16 بكسل للجسم).
  • التمسك بما لا يزيد عن خطان– وتأكد من أنهما يتزاوجان معًا بشكل جيد!
  • امنح فقراتك مساحة للتنفس بين بعضها البعض وضبطها بما يكفي الحشو العلوي أو حافة على رؤوسك للدلالة على فواصل واضحة في المحتوى.
  • تجنب أسطر النص الطويلة. من الأسهل على العيون أن تكون خطوط الفقرة أكثر من تقريبًا 15 كلمة طويلة—أقل بقليل من ذلك لشاشات الجوال.
  • Serif عادةً ما تكون الخطوط هي الأفضل في الطباعة فقط – ما لم يتم استخدامها في عناوين كبيرة على الويب.

4. الألوان & التباين أمر حاسم

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

مثال على ألوان تصميم الويبالأزرق هو اللون الذي يثير الثقة والثقة ، وهو خيار شائع لمواقع الويب ذات الصلة بالتمويل.

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

في موضوع التباين, من الضروري أن يبرز النص الخاص بك من الخلفية. من شبه المؤكد أن استخدام الرمادي الفاتح أو الأصفر أو الأخضر لخطوطك سيجعلها غير مرئية على الصفحة. الأسود على خلفية بيضاء هو أكبر مزيج من التباين وهو بشكل عام ما يجب عليك الالتزام به.

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

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

مثال تراكب الصورةاستخدم تراكبًا خلف النص لمساعدته على الظهور من الخلفية.

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

6. استخدام الصور

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

فهم أنواع الملفات & ضغط

هناك خطوة إضافية يجب اتخاذها لاستخدام الصور على الويب. تلك الصور الرائعة التي تحصل عليها من مواقع مثل صراع الأسهم و iStock يمكن أن يكون ضخمًا جدًا (5000 بكسل أفقي و 10+ ميغابايت في الحجم) وهو أمر جيد للطباعة ، لكنهم غير صالحين لمواقع الويب. لا يمتلك الجميع شبكة فايبر فائقة السرعة ، لذا يجب تقليل حجم الصور الخاصة بك لاستيعاب أوقات التحميل (ناهيك عن مغادرة 40٪ من الزوار إذا استغرق تحميل الموقع أكثر من 3 ثوانٍ!). عادة ، تريد الاحتفاظ بكل صورة في الحد الأقصى 500 كيلو بايت في الحجم ، على الرغم من أنه من المحتمل أن يكون متوسط ​​حجم الملف موجودًا 100 كيلو بايت.

  • JPEG هو التنسيق القياسي للصور. إنه تنسيق ضائع ، مما يعني انخفاض جودة صورته عند ضغطه. إذا كنت تستخدم JPEG لصورة خلفية كاملة العرض ، فإنني أوصيك بالإبقاء على دقتها الأفقية ما لا يقل عن 1200 بكسل. للأغراض العامة, تجنب استخدام أي صورة يقل حجمها عن 600 بكسل الدقة الأفقية ، حيث من المحتمل أن تظهر ضبابية على الشاشات الحديثة.
  • بي إن جي هو الخيار المفضل للرسومات أو الصور التي تتطلب الشفافية. إنه تنسيق بدون فقدان ، وهو رائع للاحتفاظ بجودة الصورة ولكنه يمكن أيضًا زيادة أحجام الملفات. بشكل عام ، ستستخدم رسومات PNG للرسومات التوضيحية أو الرموز أو الصور الصغيرة التي يمكن تكديسها فوق العناصر الأخرى بسبب شفافيتها. نادرًا ما ستحتاج إلى PNG لتكون أكبر من 1000 بكسل.
  • SVG (رسومات موجهة قابلة للتحجيم) هو تنسيق أحدث يتم استبداله GIF وحتى PNG في بعض الحالات. جمال SVG هو أنه يمكن أن يكون كبيرًا أو صغيرًا على الشاشة كما تريد ، كل ذلك مع الاحتفاظ بالوضوح والوضوح المثالي (ولا يزال حجم ملف صغير). يجب أن تفكر في استخدام SVG لأي شعار أو رمز أو ناقلات الرسم على موقع الويب الخاص بك؛ نظرًا لأن شاشات DPI العالية أصبحت شائعة الآن ، فإن حدة SVG ستوفر أفضل جودة للصورة.

أمثلة على أنواع ملفات الصور

6. تصميم موبايل فيرست

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

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

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

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

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

7. حافظ على الأشياء محاذاة

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

8. حافظ على البساطة

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

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

9. المساحات المفتوحة الكبيرة

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

استنتاج

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

ولد مصمم!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map