فن بناء مواقع أفضل

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

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

يجب أن يأخذ المحتوى الأولوية

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

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

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

الصورة مجاملة من

التصميم المستجيب ضروري (باستثناء عندما لا يكون)

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

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

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

سيكون هذا بشكل عام شيئًا يجب تجنبه ، ولكن في ظروف استثنائية يكون مقبولًا طالما يتم التعامل معه ببراعة.

التوضيح مجاملة من

يجب أن يكون المحتوى المهم واضحًا

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

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

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

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

يجب أن تمتزج العناصر الأسلوبية بسهولة

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

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

gif من باب المجاملة

طبقات للإنقاذ

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

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

يجب ألا تتطابق هاتان الكلمتان الأخيرتان مطلقًا عندما تتحدث عن شيء أنشأته. الشيء الجيد هو أنك تستطيع في الواقع تجنب الموقف من خلال استخدام الطبقات.

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

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

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

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

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

وأخيرا طريقة لفصل المحتوى بشكل صحيح من التصميم

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

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

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

رأس الصورة مجاملة من مات كارلسون

بوجدان رانسيا

بوجدان هو أحد الأعضاء المؤسسين لشركة Inspired Mag ، حيث اكتسب خبرة تقرب من سنوات 6 خلال هذه الفترة. يحب في وقت فراغه دراسة الموسيقى الكلاسيكية واستكشاف الفنون البصرية. انه مهووس جدا مع إصلاحات كذلك. يمتلك 5 بالفعل.