استعراض التصاميم المتناسقة على الويب
تثير اللغة المرئية لموقع الويب إعجاب الزائر بعيدًا عن أول لمحة.
في الواقع ، عند ملاحظة أفضل المواقع الإلكترونية ، تلاحظ أن التفاصيل الصغيرة تتحدث إليك بشكل لا شعوري وأن هذا الاتساق يحسِّن من تجربتك على الموقع الإلكتروني ونتيجة لذلك فإنك تزيد احتمال عودتك.
سنستكشف في هذه المقالة ما يجعل التصميم متناسقًا ، وسنعرض بعض تصميمات مواقع الويب الأكثر ثباتًا هناك.
يرجى التعليق في نهاية المقال حول اتساق هذه المواقع ولا تتردد في إضافة روابط إلى الآخرين الذين يتبعون هذا المبدأ.
ماذا نعني بالاتساق في التصميم؟ بالنسبة الى هذا التعريف يمكن تعريف الاتساق على أنه: "توحيد أو اتفاق متناغم بين الأشياء أو الأجزاء."
هدفك كمصمم هو إنشاء أمر ، لتسهيل عثور المستخدمين على المعلومات التي يبحثون عنها. الاتساق يمكن أن تساعدك على تحقيق هذا الهدف.
قائمة التحقق من التفاصيل
أولاً ، دعنا نحدد المعايير التي سنحدد بها ما إذا كانت مواقع الويب التي نراجعها هنا متسقة أم لا. كما أن وضع معايير لنفسك سيفيد أيضًا أعمال التصميم اليومية الخاصة بك. كما أحب أن أقول ، يتم إنشاء التصميم الجيد لأول مرة بملاحظة جيدة . فيما يلي معاييرنا:
الاتساق الطباعي:
- هل يوجد إيقاع عمودي متسق؟
- هل المحاذاة الطباعية متسقة؟
- هل خيارات خطوط الطباعة متناسقة؟
- هل يمكن التنبؤ بالموجات المطبوعة عبر الصفحات؟
الاتساق البياني:
- هل تنقل صور موقع الويب مزاجًا ثابتًا؟
- هل تتطابق الألوان في الصور؟
- هل قوام الصور متناسق؟
- هل تتفق أحجام الصور مع الهيكل العام لموقع الويب ومع بعضها البعض؟
تناسق الألوان:
- هل تستخدم الألوان باستمرار عبر الصفحات؟
رمز والاتساق الزر:
- هل رموز الموقع لنفس العائلة؟
- هل تتطابق الرموز في الحجم؟
لا يحتاج موقع الويب إلى تلبية هذه المعايير للنقطة ، ولكن القائمة هي نقطة بداية جيدة للمساعدة في جعل التصميمات الخاصة بك متسقة ومتناغمة.
حسنًا ، لدينا الآن قائمة صغيرة لطيفة نلعب بها. دعونا نراجع مواقعنا الإلكترونية ، نتعلم منها ونستلهم!
52 أسبوعًا من UX
ما هي بعض من الضوء على هذا الموقع:
- يتم تقسيم المسافة البيضاء في الرأس بالتساوي.
- تتم محاذاة الطباعة باستمرار ، يتم تحريك اليسار مع اليمين الممزق.
- يعد التنقل المرقّم الدائم في الجزء العلوي ذكيًا ومألوفًا.
- دائمًا ما تكون الصور للمشاركات بالأبيض والأسود.
الآن ، لأن هذه المقالة تدور حول التفاصيل ، أريد أن أشير إلى قضيتين صغيرتين مع هذا الموقع ، سواء في التذييل: أولاً ، لاحظ كيف أن زر البحث "Go" له انعكاس ، في حين أن العناصر الأخرى على الموقع لا (قارن ، على سبيل المثال ، زر RSS في الأعلى).
ثانيًا ، لاحظ أن المسافة بين العناوين والنص أكثر إحكامًا في التذييل مقارنةً ببقية مواقع الويب.
شرائط من الأحمر
- أولا ، العنصر الأبرز في الموقع: الأحمر! جميل وباستمرار يستخدم من الشعار للرؤوس إلى الروابط إلى الأزرار.
- بعد ذلك ، يكون نسيج رسومات الزر هو نفسه ما يُستخدم للشعار.
- لاحظ أيضًا أن الأزرار تكون جميعها من نفس العائلة ، حتى الرموز الاجتماعية في الجزء السفلي.
- نوع العرض عبارة عن شريحة رائعة - مرة أخرى ، تستخدم باستمرار من الشعار إلى الرؤوس إلى الأزرار.
- وأخيرًا ، تتم محاذاة عناصر النص في جميع أنحاء موقع الويب بشكل متسق ، ويتم تحريك اليسار والضغط على اليمين.
يارون شوين
- أول ما يلفت الأنظار هو كيفية تشغيل الرسم التوضيحي في الرأس بعمق. حتى العناصر الأربعة الموجودة في الأسفل تخرج من حاوياتها وتلعب بعمق بنفس الطريقة.
- تتم محاذاة الطباعة بشكل مثالي في الشبكة.
- يتم اختيار الخط وتنفذه بشكل جيد. الصفحة الرئيسية والصفحات الأخرى تحمل الاستمرارية كذلك.
- الألوان أيضا متناسقة للغاية ، تلعب بشكل رائع مع الأزرق الداكن إلى اللون الأخضر المزرق ، على طول الطريق من الرأس إلى الذيل.
Fuzzco
- انظر إلى الملمس في الجزء العلوي من التنقل ؛ يتم استخدامه أيضا للصور بالقرب من القاع.
- تحقق من النوع في الرأس عبر الصفحات ؛ بشكل جيد مع فلاش مخصص ، مما يعطيها شعور إبداعي.
- يتطابق الرقيق عبر الصفحة الرئيسية ، لكنه يكسر قليلاً على الصفحات الداخلية.
- تتطابق الألوان في التنقل العلوي مع تذييل الصفحة ، مع تنسيق المحتوى وتأطيره.
Styleboost
- يجعل الحجم بالتأكيد هذا الموقع ثابتًا: كبير . أزرار كبيرة ، صور كبيرة (كلها متناسقة في الحجم) ، نوع كبير ، مساحة بيضاء كبيرة.
- يتم الاحتفاظ باللون إلى الحد الأدنى واستخدامها بشكل جيد. يحافظ اللون الأزرق الفاتح على الانسجام ، ويلعب الرمادي الثانوي بعمق وتسلسل هرمي.
- الأزرار كلها كبيرة وموحدة. كما يتم تقريبها قليلاً ، بما يتوافق مع مربع البحث.
- هيكل الشبكة بسيط ويخبرك بما سيأتي بعد ذلك. حتى التذييل متناسب ، ويبدو أنه قريب من النسبة الذهبية.
الوحش لذيذ
هذا الموقع ليس جديدًا ، لكنه جميل في الكيفية التي ظل بها ثابتًا على مر السنين ولم يكبر قليلاً. وقد ساعد الاهتمام بالتفاصيل.
- لاحظ القوام. تم تأطير موقع الويب بواسطة رف خشبي ، والذي يرتبط بموضوع البرنامج الذي تقدمه الشركة.
- العناصر الرسومية مثل العشب والنباتات تحافظ على الانسجام.
- يحتوي كل قسم على زوايا مستديرة ، حتى أزرار عرض الشرائح.
- يهيمن اللون الأصفر المخضر على الصفحة ويدعوك للدخول إلى هذا العالم الخيالي الذي لا ينسى.
ريتشارد ماير وشركاه مهندسون معماريون.
تم تصميمه من قبل ماسيمو فينيلي الذي يعرف بأنه أتقن الشبكة وينتج تصاميم حديثة ومتسقة ومنطقية.
- لاحظ محاذاة العناصر الرسومية. نوع محاذاة اليسار في القائمة محاذاة مع الصور أدناه.
- تظل القاعدة الأفقية الموجودة أسفل الانتقال الفرعي ثابتة ، مما يساعد المستخدمين على توجيه أنفسهم على موقع الويب.
- المسافة بين محتوى التنقل والجسم متناسقة ، مما يمنح العين مسارًا واضحًا للمتابعة.
- والطباعة هي بسيطة ، يسار اليسار و sans-serif ، تسقط باستمرار في الشبكة.
الفريق وراء مهندسو المعلومات كما أتقن البساطة وتصميم الشبكة والاتساق.
- لاحظ كيف يتم محاذاة التنقل في الجزء العلوي مع محتوى الجسم أدناه.
- لوحة الألوان بسيطة ومتسقة: الأحمر والأبيض والأسود.
- يتم محاذاة العناصر النصية بالتساوي. لاحظ كيف أن المسافة بين القواعد الأفقية متناسقة أسفل الصفحة.
ويلسون مينر
- تتم محاذاة التواريخ ومحتوى التعريف في العمود الأول ، متبوعًا بمحتوى النص الأساسي.
- لاحظ كيف يقع شريط التنقل في الأعلى في الشبكة ، مع محاذاة المحتوى أدناه.
- الطباعة هي أبيض وأسود بسيط: أبيض لعناوين القسم ، أسود لنسخة الجسم.
Tapbots
- أول ما يلفت انتباهي هو الاستخدام الممتاز للمساحة البيضاء ، ولا سيما التباعد بين الشعار والملاحة ، سواء فوق أو تحت.
- يبدو أن جميع الرموز تأتي من نفس العائلة ، مما يخلق الانسجام.
- كما أن استخدام العمق ، من الرسوم البيانية العلوية إلى الرسوم التذييلية ، ثابت أيضًا.
- تطابق الألوان عبر الصفحة: الأسود في الأعلى يتطابق مع التذييل؛ يتطابق الزر الأحمر الموجود في الأعلى مع زر البحث أدناه ؛ ويتطابق التنقل الرمادي مع الشريط الرمادي في التذييل.
تغليف
يتطلب التصميم المتسق العديد من الأدوات وقد يكون من الصعب تحقيقها.
نصيحة واحدة يمكنني تقديمها هي أن أبدأ بشبكة جميلة ثم أقوم بتشييد إطار سلكي فوقه. سيعطيك هذا نظرة عامة للعناصر الرسومية وكيفية ارتباطها ببعضها البعض.
الأمثلة المذكورة أعلاه يجب أن تعطيك الطعام للتفكير فيما يتعلق بتنفيذ التصميم الخاص بك. يتكون الاتساق من عدة أجزاء ، وكلها مكونات أساسية في العملية.
مكتوبة حصريًا لـ Webdesigner Depot بواسطة Noam Almosnino ، مصمم ويب في بروكلين ، نيويورك. اتبع نعوم على تويتر ، أو زيارة موقعه على الانترنت hellonoam.com .
هل تعرف مواقع ويب أخرى متسقة لمشاركتها معنا؟ يرجى نشرها في التعليقات!