10 قواعد تصميم الويب التي يمكنك كسرها
كما تطورت تصميم الويب والتصميم بشكل عام ، وقد وضعت قواعد لضمان تصاميم متسقة وقابلة للاستخدام.
تم إنشاء بعض هذه القواعد ببساطة لأن منشئي مواقع الويب أساءوا استخدام مبادئ معينة دون اعتبار لمستخدميها.
لكن هذه القواعد لا يتم تطبيقها من قبل أي شخص ويجب كسرها عند الضرورة ، خاصة عندما يؤدي كسرها إلى تصميم مذهل.
في هذه المقالة ، نقدم 10 قواعد يمكنك كسرها إذا كانت تناسب احتياجات التصميم الخاصة بك.
القاعدة # 1: عدم عرض شريط التمرير الأفقي
عدد كبير من الفئران ليس لديها عجلة الماوس الأفقية. وهذا يجعل الأمر صعبًا في التمرير إلى اليسار أو اليمين عندما يمتد محتوى صفحة الويب إلى جانبي المتصفح.
قد يكون من المزعج أن تضطر إلى إحضار مؤشر الماوس لأسفل إلى أسفل النافذة وسحب شريط التمرير لمجرد رؤية كلمة أو اثنتين تقع خارج منطقة العرض في الصفحة. ومع ذلك ، فإليك بعض المواقع المصممة جيدًا التي تضع شريط التمرير للعمل بطرق فعالة.
Benek
Benek يستخدم JavaScript لتغيير اتجاه تمرير عجلة الماوس من الوضع الرأسي إلى الأفقي. يتم فصل كل عنصر في محفظة Benek إلى العمود الخاص به. الموقع لديه شعور جديد بشكل مدهش ويتدفق بسلاسة.
جورو الحذاء
جورو الحذاء يبتعد عن التمرير الأفقي لأنه يستفيد من الطريقة التي ينظر بها الناس إلى الأحذية. ينظر الناس إلى معظم المنتجات من الأعلى إلى الأسفل ، لكن الأحذية مختلفة. عيون الناس عادة ما تتحرك عبر طول الحذاء. باستخدام هذه العادة لصالحها ، يقوم Shoe Guru بتدفق تصميم موقع الويب الخاص به في نفس الاتجاه ، مما يجعل الحركة تبدو طبيعية.
ستيفان تارتلين
ستيفان تارتلين يستخدم شريط التمرير الأفقي لجعل عمله الفني يبدو كما لو كان في معرض فني. على الرغم من أن عجلة الماوس العمودية لا تعمل كما هو الحال في الأمثلة السابقة ، إلا أن التأثير يعمل بشكل جيد بشكل مدهش. يمكنك القول إن التأثير سوف يتضاءل إذا تم إعادة ترميز عجلة الماوس للتمرير أفقيًا.
العلاج الجرافيكي
في حين العلاج الجرافيكي لا يعرض شريط تمرير أفقي في صفحته ، فإنه لا يزال يسمح بالتمرير الأفقي بالنقر والسحب حول الشاشة. استخدمت نظرية الرسوم التنقل الأفقي لأن جميع صوره هي نفس الارتفاع ولكن ليس بنفس العرض. يساعد التنقل الأفقي على تدفق الموقع بسلاسة.
الطريق الأفقي
الطريق الأفقي هو عرض لمواقع الويب التي تستخدم التمرير الأفقي. رسومات grungy جميلة ، وهذا الموقع فريد من نوعه فيما يتعلق بمعارض CSS.
القاعدة رقم 2: استخدام عدد صغير من وجوه الخط
تتعارض الخطوط كثيرة جدًا مع بعضها البعض وتطغى على المشاهد. كل خط لديه شخصية ، والعديد من الشخصيات يمكن أن تخلق الفوضى.
لاستخدام أكثر من مجرد خطين بشكل فعال ، يجب أن يكون التصميم شديد الوضوح ، ويجب أن يكون باقي التصميم هادئًا نسبيًا. في ما يلي بعض الأمثلة على المواقع التي تستخدم هذا الإحساس بالصراع والفوضى لإشراك المستخدم.
روابط LA
روابط LA يستخدم العديد من الخطوط في تخطيط غير خطي لخلق شعور بالطاقة. الصفحة يصعب قراءتها بسرعة ولكنها تجذب المستخدم. ومن الجدير بالملاحظة أيضًا أن أياً من الخطوط لا يزيّن بشكل مفرط ؛ كل كلمة مقروءة ، مع الحفاظ على تصميم واضحة ونظيفة.
Geo Elements Design Studio
إن استخدام مجموعة متنوعة من الخطوط عادة ما ينقل الإحساس بالطاقة والفوضى ، ولكن Geo Elements Design Studio موقع على شبكة الإنترنت هو مفتوح جدا ونظيفة. يتم إعطاء كل خط مساحته الخاصة بحيث لا يقوم المشاهد بربطه بخط آخر. تساعد صورة السماء في الخلفية على تعزيز الشعور بالانفتاح.
ريتشارد ستيلماخ
على عكس المثال الأخير ، ريتشارد ستيلماخ يدفع مختلف خطوطه قريبة من بعضها البعض. يعمل التصميم لأن خطًا واحدًا فقط لا يبدو مرسومًا يدويًا ، بينما يعمل الآخران بشكل جيد مع الرسم التوضيحي. عادةً ما تعمل الخطوط المرسومة باليد بشكل جيد ، حتى عندما يكون هناك العديد من أوجه الخطوط المختلفة.
Satsu
Satsu يبدو أن لديها الكثير من الخطوط المختلفة ولكن في الواقع ثلاثة فقط (وليس بما في ذلك بند محفظة المجلس الرياضي). من خلال تباعد كل شيء بعناية ، تربط Satsu أسطرًا معينة من النص مع بعضها البعض ، على الرغم من أن النص قد يكون في خطوط مختلفة.
يكون عنوان الشعار بخط واحد ، ويكون لكل من العنوانين الفرعيين خط خاص بهما ، ولكن يقوم المشاهد بجمع عناصر النص الثلاثة هذه بشكل طبيعي. ساتسو قادر على خلق الطاقة دون إغراق الصفحة مع الشخصيات.
القاعدة # 3: لا تستخدم الكثير من الألوان
الخوف من الذهاب بعيدا مع التصميم هو ما يفصل المهنيين من الناشئين والمبتدئين من الغافل. محاولة غير مجدية لجعل تصميماتهم في أقصى حد ممكن ، مع الكلمات على النار ، وامض النص ، والعديد من الألوان قدر الإمكان.
يريد الناشئون الحفاظ على تصاميمهم دقيقة وسهلة على العين ، ولكن في النهاية يمكن أن تبدو تصاميمهم في بعض الأحيان بلا حياة. التصاميم التالية للعين هي من قبل بعض المهنيين الحقيقيين الذين يدفعون الحدود.
مات مولينويج
مات مولينويز تصميم ملون جميل يشبه لوحة ألوان مائية (تم تحديث الموقع منذ كتابة هذه المقالة). كل الألوان في الخلفية سوف تجذب انتباه أي شخص.
عموما ، التصاميم الجيدة مع الكثير من الألوان سيكون لها هذه الألوان في الخلفية ، مع لوحة أكثر بساطة في المقدمة. قراءة النص أمر صعب للغاية عندما يحدث الكثير من الأشياء.
ترافيك ايزاك
ترافيس إيزاكس تصميم يحتوي على تدرج عمودي ملون في الخلفية يجعل التصميم يبدو ملونًا طوال الوقت. يتميز هذا الموقع باللون الوردي اللامع بلون الوصلة ، وهو خيار رائع للمصممين الذين يرغبون في إنشاء تأثير ملون.
جيمس دي انجيليس
جيمس دي انجيليس يظهر الموقع الإلكتروني أن النص يمكن أن يكون ملونًا دون أن يتقاطع معه كمبتدئ. التصميم هو قطع الغيار ، ويمنح الشعار بالتأكيد مركز الصدارة.
القاعدة رقم 4: اجعل هدف موقعك واضحًا
إن الشيء الذي يزدحم حقا في آذان المصممين الشباب هو أن التصميم يجب أن يخبر المشاهدين على الفور بما يبحثون عنه قبل أن يقرؤوا أي نص.
يعتبر التعرف على العلامة التجارية أمرًا مهمًا للشركات الكبيرة ، ولكن في بعض الأحيان يجب أن يكون الأشخاص الأصغر حجمًا أكثر ذكاءً قليلاً لجذب انتباه المشاهد. يمكن أن يؤدي استرجاع المعلومات إلى إثارة المشاهد و "ندف" الناس إلى الرغبة في معرفة المزيد.
يمكن أن يؤدي تطبيق هذه التقنية على تصميم الويب إلى زيادة وقت بقاء المستخدمين على موقعك.
Cetrotrees
في معظم المحافظ الاستثمارية اليوم ، عادة ما تقوم الشركة المستقلة أو الشركة بتقديم نفسها وتشرح عملها. Cerotreees بدلا من ذلك يضع بعض الروابط المبهمة على اليسار وعينات من أعماله على اليمين ، ولكن لا شيء يفسر الفكرة أو الشخص وراءها.
يغري هواء الغموض المحيط بالموقع المستخدم للبقاء.
آخر Mixtape
آخر Mixtape هي محفظة أخرى تظهر أعمالها ولا شيء أكثر من ذلك. مثل هذه التصاميم تحلب الشعور بالثقة الشديدة. إنهم لا يحاولون أبدا بيع أنفسهم ؛ انهم يتوقعون فقط أن يكون في مهب المستخدم ويأتي التسول لعقد.
بيتر بيرسون
يعد استخدام شاشة البداية طريقة جيدة لإبطاء عملية تفكير المستخدم وإلهامهم للتعمق أكثر. عادةً ما يكون هدف صفحة البداية هو شرح الموقع بسرعة بالصور أو بقليل من النص.
ولكن في بيتر بيرسون القضية ، هدفها هو استحضار شعور. تقوم السماء الكبيرة وتأثير النص البسيط بعمل رائع في إثارة الفضول لأن هذه الأشياء لا تظهر عادة معًا. كما يقوم هذا الموقع بعمل رائع في استمرار العاطفة التي أنشأتها صفحة البداية في المحتوى الفعلي.
حركة التمرير الجانبي والخطوط المتحركة التي تتبع المستخدم فعالة حقًا.
Piepmatzel
طريقة رائعة للتغلب على حاجز اللغة هي عدم استخدام أي كلمات. Piepmatzel هو معرض CSS ، ومن المرجح أن الأشخاص الذين شاهدوا معرض CSS قبله يتعرفون عليه على أنه واحد مباشرةً.
أولئك الذين لم تكن قد أثارت ما يكفي لإعطاء عدد قليل من الصور المصغرة نقرة على أمل اكتشاف النمط. يساعد مقدار النص الصغير في أسفل الصفحة في الفرز وهو غير ضروري.
القاعدة رقم 5: الملاحة يجب أن تكون سهلة لمعرفة
يجب ألا يكون التنقل هو اختناق الموقع. يجب أن يتمكن المستخدمون من العثور على ما يريدون بسرعة. ولكن في بعض الأحيان ، يمكن أن يساعد التنقل غير المتميز حتى الآن ، المستخدم على الشعور بالارتباط بالموقع وما يروج له.
ألفين تانغ
كما ذكرنا في القسم السابق ، يتم نقل جو من الثقة عندما لا تتلف المحفظة نفسها. هذا هو الحال في ألفين تانغ محفظة التصوير الفوتوغرافي. عندما يصل المستخدم لأول مرة على الموقع ، لا يتعرف على الفور على الكلمات التي يراها كصلات.
يجب أن يدفعهم عدم اليقين هذا إلى التحايل قليلاً. يكشف تحريك الماوس فوق كلمة ما أنه في الواقع رابط ، وعند النقر عليه ، يتم تحميل صورة رائعة. ستجذب الصورة المستخدمين للاستمرار في التصفح.
لمشاهدة المزيد من الصور ، يجب على المستخدمين النقر على زر "رجوع" في المتصفح (وهو أمر يفهمه معظم الناس) ثم انقر فوق رابط آخر. لا يوجد يد في التصميم ، وهو يعمل بشكل جيد للغاية. هذا ليس تقليديا "تصميم رائع" ، لكنه يقدم بالضبط ما يحتاج إليه.
Kasulo
Kasulo الصورة لا يصعب معرفة كيفية التنقل ، ولكن قد لا يعرف المستخدم العادي بالضبط ما يجب فعله عند الوصول إلى الموقع. بعد النقر الأول ، يصبح كل شيء واضحًا.
يتنقل المستخدم في أجزاء المحفظة في نمط ثلاثي الأبعاد ، وتظهر أحدث العناصر الأقرب إلى البداية. استخدام عجلة الفأر هو أكثر متعة.
مارسيو كوغان
مارسيو كوغان الموقع مثال آخر للملاحة الرائعة التي ليست واضحة على الفور. من الصعب مقاومة التعليمات "اسحبني" ، وبمجرد أن يقوم المستخدم بذلك ، فإنهم في طريقهم لإبحار عناصر المحفظة. تعد معاينات الفأرة عبارة عن تفاصيل صغيرة ولكنها مثيرة للإعجاب حقًا.
Ceranco
إذا كان العميل يطلب من المصمم أن يجعل موقعه في ثلاثية الأبعاد ، مثل لعبة فيديو مطلق النار من منظور شخص أول ، فإن معظم المصممين يضحكون بصمت على أنفسهم ، ويأخذون نفسا عميقا ، ثم يشرحون ببطء لماذا ستكون هذه فكرة سيئة .
بينما الموقع ل Ceranco ليس بالضبط مطلق النار 3-D ، يمكن بسهولة الخلط بينه وبين نوع من لعبة الكمبيوتر إيندي. مثل هذه المواقع رائعة في جذب المستخدمين. على الرغم من أن وقت التحميل الطويل والتحسين الضعيف لمحرك البحث يجعل هذا أقل من مثالي لمعظم المشاريع ، إلا أنه يستحق بالتأكيد فكرة ثانية.
القاعدة # 6: استخدام ألوان مختلفة للنص والخلفية
ربما لم يتم كتابة هذه القاعدة في كل مكان ، ولكن العديد من الناشئين خائفون جدًا من جعل النص غير قابل للقراءة حتى أنهم لا يفكرون في استخدام اللون الأساسي نفسه لكل من الخلفية والخط نفسه. يمكنك اتباع بعض التقنيات البسيطة لجعل الألوان المتشابهة تعمل.
لينكسيس
ال لينكسيس الموقع أنيق نظرًا لأنه يحتوي على لون أزرق لكل روابطه ، على الرغم من أن لون الخلفية يحتوي على درجات ألوان زرقاء مختلفة. في حين أن خطر وربما لا يكون أفضل قرار لون ، فإنه يعمل.
براد كولبو
براد كولبو التصميم مشابه لـ Linksys 'بسبب النص الأزرق على خلفية زرقاء. من الصعب سحب الأزرق على الأزرق بشكل جيد ، خاصة مع العديد من الكآبة المختلفة في جميع أنحاء الموقع.
مجموعة الطاقة
حتى الآن في هذا القسم ، لم نشاهد سوى مواقع زرقاء ، لأن النص الأزرق هو الأصعب بالنسبة للعين البشرية للقراءة ، والنوع الأزرق المقروء مثير للإعجاب دائمًا. إذا كان تأثير النص يعمل باللون الأزرق ، فسيعمل على الأرجح بأي لون.
مجموعة الطاقة يستخدم نمط letterpress لخطه لإنشاء تأثير ثلاثي الأبعاد يفصل النص بشكل فعلي من الخلفية.
الفنان في التصميم
الفنان في التصميم ليس فقط نص أخضر على خلفية خضراء ونص أصفر / بيج على خلفية صفراء ولكن يحتوي على نص مباشرة فوق الصورة.
في حين أن بعض الرسائل الفردية قد يكون من الصعب قراءتها ، إلا أن الكلمات ككل تبقى مقروءة. يجب أن يكون هذا النوع من التأثير دائمًا مركز الصدارة في التصميم.
هوراسيو بيلا
هوراسيو بيلا يستخدم تأثير ثلاثي الأبعاد آخر على محفظته. في هذه الحالة ، تظهر الحروف وكأنها تنبثق بدلاً من أن تنفجر إلى الداخل. بدون هذا التأثير ، كان من الممكن تقليل الوضوح بشكل كبير. هناك تأثير جيد آخر يستخدم هنا هو تقنين الحروف ، مما يزيد من الوضوح.
القاعدة رقم 7: لا تضع الرسوم المتحركة في طريق المحتوى الخاص بك
على محمل الجد ، لا تطفئ إعلانات فلاش صغيرة حيث يقرأ المستخدم. وينطبق نفس الشيء على صناديق الاستبيان التي تظهر عندما يكون المستخدم في وسط الجملة. لا يتمتع المستخدمون بالانتباه عندما يكونون في منتصف الجملة. ما لم…
من الصعب حقاً ألا تكون مفعماً بالعنكبوت الصغير ABA موقع. التصميم نظيف ، وعلى الرغم من أن العنكبوت هو إلهاء ، فلا بأس. حتى الآن ، أعتقد أن هذا الموقع هو الاستثناء الوحيد للقاعدة.
القاعدة رقم 8: التمسك بخطوط الويب الآمنة
على الرغم من أن تقنيات استبدال الوجه الخط لا تزال شابة ، فهي بالفعل تقدم دفقة كبيرة. تقنية sIFR كان الأول ، ومؤخرا Cufón و Typefasce.js لقد ظهرت
Diseñorama
على ال Diseñorama على شبكة الإنترنت ، يمكن اختيار النص الأحمر "Recientemente". عيب واحد هو أنه إذا لم يتم تحميل الموقع على الفور ، سيشاهد المستخدم الخط العادي الأصلي لفترة وجيزة.
أما الجانب السلبي الآخر فهو أنه إذا كان لدى المستخدم إما جافا سكريبت أو فلاش ، فإنه لن يرى سوى الخط الأصلي. كل الأشياء تعتبر ، انها لا تزال جميلة. نأمل أن تكون معاينة لما سيحدث في السنوات القليلة المقبلة.
Cactuslab
Cactuslab يستخدم أيضًا sIFR للرؤوس الفرعية الزرقاء (مثل "العمل الشتوي"). على الرغم من أن sIFR هي الأكثر تعقيدًا في تقنيات استبدال الخط ، إلا أنه يمكن نسخ النص ولصقه ، مما يمنحه ميزة كبيرة على التقنيتين الأخريين.
القاعدة رقم 9: لا تملك صفحة Splash / Landing
لقد قام العديد من المصممين بإجراء نفس المناقشة القديمة مع عملائهم حول سبب عدم كون صفحة البداية فكرة جيدة. تميل Google إلى ترتيب مثل هذه الصفحات أقل ، مما يؤدي إلى بطء المستخدم من الحصول على المحتوى الذي يتابعه. ولكن يمكن أن تكون جميلة وملهمة بشكل لا يصدق إذا تم القيام به بشكل صحيح.
لمعان بعد الإنتاج
الغرض من نموذج المحفظة الذي يظهر على صفحة البداية من لمعان بعد الإنتاج موقع على شبكة الإنترنت هو الحصول على رد فعل عاطفي من المستخدم.
عند كل زيارة ، يتم تحميل صورة عشوائية من المحفظة. ويؤدي النقر فوق الصورة إلى تغيير حجمها ووضعها في مكانها بين القطع الأخرى الموجودة على الموقع. يوفر مقياس التحجيم والحركة استمرارية ويساعد على نقل مشاعر المستخدمين إلى بقية أعمال الشركة.
عيسى لندن
عند اكتمال عمل الموقع تمامًا في Flash ، يمكن استخدام شريط التحميل كصفحة بداية. عندما يرى المستخدم شريط تحميل ، فإنه سيغلق الصفحة ويذهب إلى مكان آخر أو ينتقل إلى علامة تبويب أخرى ويتصفح في مكان آخر أثناء الانتظار.
بمجرد تحميل الصفحة ، من الأفضل الانتظار حتى يعود المستخدم قبل البدء. في عيسى لندن حالة ، والباب هو استعارة مثالية ليقول أن الموقع جاهز ويمكن للمستخدم الدخول.
عندما ينقر المستخدم على البوابة ، تفتح البوابة وتظهر نماذج مختلفة موضحة. استخدام البوابة على صفحة البداية هو فكرة تصميم رائعة لأنه عند الدخول ، يشعر المستخدم بالارتباط.
القاعدة رقم 10: لا تستخدم الجداول
أي مصمم ويب يستخدم الطاولات في تصميماته سيطلق عليه اسم "الصاعد" من قبل مصممين متمرسين. لا تعرض الجداول نفسها في جميع المتصفحات ، ويمكن أن تجعل رمز المصدر يبدو فوضويًا ، ولكن على الأقل ستعرف ما ستحصل عليه معهم. فيما يلي بعض الأمثلة على التصميمات التي تتضمن الجداول.
من الصعب قليلاً رؤية هذا الجدول ولكن مطوي هناك بين الكراسي. إنها طاولة جانبية صغيرة لطيفة ولكن للأسف لا تساهم كثيرًا في تصميم هذا الموقع.
الجداول هي طريقة في خلفية هذا التصميم العمل في اللعب لكنهم يحافظون على أجهزة الكمبيوتر المحمولة العمالية وغيرها من الأشياء التي يسهل الوصول إليها. بدون هذه الطاولات ، ستشعر الغرفة بأنها أكثر تفاهة ، ولن يكون لصورة الخلفية نفس التأثير.
على الرغم من أن هذا التصميم يحتوي في الغالب على كراسي ، إلا أن جدولًا صغيرًا لطيفًا يظهر في أعلى يمين الصورة المصغرة. يبدو وكأنه وعاء يجلس عليه.
بقدر ما التصاميم مع الجداول الذهاب ، وهذا هو واحد من أفضل. مع وجود جدولين تم عرضهما في هذا الرسم المتحرك Flash ، يمنحهما التصميم الكثير من الاهتمام. يجب أن يكون هذا الموقع على قائمة كل مصمم للتصاميم الرائعة التي تستخدم الجداول.
كسر القواعد!
كسر القواعد على ما يرام عندما يدعو تصميم له. العديد من خيارات التصميم الموضحة هنا لن يتم النظر فيها من قبل المصمم العادي. هذا ما يفصل المصممين الكبار عن متوسطهم.
هؤلاء الشجعان بما يكفي لمقاومة ما تعلموه يبرز دائما.
مكتوبة حصريا ل WDD على ايلي بينر. يدير موقع الويب الخاص به في SleepyHero.com
هل كسر أي قواعد في تصاميم الويب الخاصة بك؟ لما و لما لا؟ يرجى مشاركة وجهات نظرك معنا ...