البساطة هي المفتاح - استكشاف الحد الأدنى من تصميم الويب

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

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

الأقل هو أكثر مع الحد الأدنى من تصميم الويب

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

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

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

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

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

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

الحد الأدنى من تصميم الويب يسمح للمحتوى بالتميز

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

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

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

موقع Cooper Perkins على الويب هو مثال جميل آخر على التصميم البسيط الذي يستخدم الرسوم المتحركة لخلق الاهتمام دون فوضى.

يجب أن يكون كل قرار من قرارات واجهة المستخدم وتجربة المستخدم مقصودًا

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

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

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

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

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

استفد من المساحة السلبية

ربما يكون أحد أهم عناصر تصميم الويب البسيط الجيد هو استخدام المساحة السلبية. التصميم البسيط يتعلق بما ليس موجودًا بقدر ما هو موجود.

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

تستخدم Platoon Branding Studio مساحة سلبية واسعة حول الطباعة في رأسها ، مما يجعلها تبرز وتجذب العين على الفور.

رأس Nohau مشابه ، مع وجود الكثير من المساحات البيضاء المحيطة بنوعها.

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

هذا الشعار من The Bronx Zoo ويلعب بالمسافات بين أرجل الزرافات. إنها صور ظلية لناطحات السحاب.

أنشئ دراما باستخدام التصوير الفوتوغرافي والطباعة والتباين

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

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

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

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

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

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

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

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

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

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

التسلسل الهرمي المطبعي

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

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

تستخدم مدونة InVision's Inside Design تسلسلاً هرميًا مطبعيًا واضحًا لتمييز العنوان والعناوين ونسخة الجسم.

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

تستخدم سمة Stills WordPress تسلسلاً هرميًا مطبعيًا واضحًا للتمييز بين العناوين والنسخة الأساسية.

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

حافظ على سهولة التنقل

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

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

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

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

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

إن وضع خلفية ملونة خلف قائمة الهامبرغر في RFTB يجعلها تبرز.

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

لوحات الألوان البسيطة

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

يستخدم موقع Pittori di Cinema لوحة من ثلاثة ألوان لصفحتهم الرئيسية (المؤشر أحمر ، بينما الخلفية صفراء مع كتابة سوداء).

يتضمن موقع الويب الخاص بـ Zeus Jones ألوانًا متعددة ، يستخدم كل قسم لونًا تكميليًا مختلفًا. تحدد المربعات الملونة الأقسام بوضوح مع الحفاظ على الحد الأدنى.

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

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

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

خاتمة

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

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

• • •

مزيد من القراءة على مدونة Toptal Design:

• تصميم الويب الوحشي وتصميم الويب البسيط ومستقبل Web UX
• Skeuomorphism والتصميم المسطح وظهور تصميم النوع
• توقف عن صنع القمامة: دليل لتصميم واجهات تدوم
• استخدم إلهامك - دليل للوحات المزاج
• فن السرقة: كيف تصبح مصممًا محترفًا