شرائط وعلامات في تصميم الويب
يمكن أن تُولَد الاتجاهات بصمت وببراعة بحيث لا نلاحظها كثيرًا.
وعندما تقوم بمسح مئات المواقع ، فغالبًا ما ترى أنماطًا قد تفتقدها. أحد هذه النماذج هو الاستخدام المتكرر للعلامات والشرائط.
أصبحت هذه الازدهار الصغيرة شعبية على نحو متزايد. تتناول هذه المقالة العنصرين لأنهما يُستخدمان معًا بشكل متكرر.
في حين أن الأشرطة تفسر نفسها بنفسها ، فإن العلامات التي أعنيها تعني العلامات المزيفة التي تتدلى من أعلى الشاشة ، مثل علامة على قميص.
مواقع الويب التي تستخدم هذه العناصر هي حقا معلقة في الجودة. لقد أصبح عرض هذا المشهد الرائع أمرًا سهلاً للغاية. هناك القليل من الاتجاهات على هذا النحو: يجب على المرء عادة أن يخوض في العديد من الأمثلة السيئة للعثور على تلك اللذيذة.
لماذا استخدام هذه الشرائط والعلامات؟
تعتبر العلامات مفيدة لأنها تجذب انتباه المستخدم من خلال إنشاء وهم العمق. يدفعون محتواهم إلى المستخدم. يتم أيضًا تمييز العلامات باستخدام الثقب ، سواء من خلال تأثيرات ثلاثية الأبعاد أو ألوان متناقضة جريئة.
تجعل هذه العوامل العلامة موقعًا رئيسيًا للمعلومات المهمة: الشعارات ، والتنقل ، والعبارات التي تحث المستخدم على اتخاذ إجراء. نحن نرى هذا في معرض أدناه. بالطبع ، كما هو الحال دائمًا ، قم بتقييم احتياجاتك قبل تنفيذ هذا العنصر على موقع الويب الخاص بك.
يشترك الشريط في نفس الصفات ، وهو في الواقع السبب في العثور عليه والعلامة معًا في كثير من الأحيان: فهو يجذب الانتباه ويُعد مكانًا رائعًا للحصول على معلومات مهمة. شكل الشريط يميزه عن العلامة ، على الرغم من ذلك ؛ يبدو أن السهلين على نهايتهما يشيران إلى المحتوى في الداخل ، ويوجهان انتباه المستخدم بمهارة.
عائلة من الأساليب
هناك سبب آخر وراء وجود هذين العنصرين في كثير من الأحيان على مواقع الويب ، وهما أنهما يمثلان تمثيلات رقمية للنسيج. ليس من المستغرب إذن أن العديد من المواقع أدناه تحتوي على عناصر أخرى ذات صلة بالنسيج ، بما في ذلك الدرزات الخفية والقوام والعناصر العضوية الأخرى.
أشرطة
رسالة المتعلم
يحيط الشريط بشكل رائع بالاسم رسالة المتعلم هنا. أيضا ، يتم وضع الصفحة كعمود واحد ؛ يشجع العنوان المدرج المستخدم على بدء رحلته في الأعلى والانتقال من هناك.
ريبو
ريبو الشريط هو خفية إلى حد ما. تزدهر هذه الصفحة ، في حين تلخص تركيز الشركة في سطر توضيحي مكون من كلمتين. طريقة مثالية لتعيين التوقعات ، لأن اسم الشركة لا يخبرنا بما يفعل.
اليكس بيرس
مع النص يجري هائلة على الصفحة الرئيسية ل اليكس بيرس من شأنه أن يتطلب عنصرًا جريءًا إلى حدٍ ما لتحقيق التوازن بينهما. في هذه الحالة ، يقوم الشريط بعمل جيد في إعداد الرأس. أنا أيضًا أحب الطريقة التي تضيف بها الطبقة المطوية في منتصف الشريط التركيز إلى اسم المصمم.
Rockaholic!
على غير عادية إلى حد ما Rockaholic! ، يوجه الشريط انتباه المستخدم إلى أسفل ، ويلعب بشكل جيد في التمرير الرأسي للموقع ويساعد المستخدم في الحفر في المحتوى.
باريس جونز
أحمر لذيذ من الشريط يجعل اسم الفرقة باريس جونز اخرج هنا على الرغم من أن معالجة النص غير دقيقة إلى حد ما ، يضمن لك النمط الغامق أنك تلاحظ ذلك.
المدونة en Bois
على المدونة en Bois ، تأثير السهم من الشريط قوية بشكل خاص ، ويرجع ذلك إلى حد كبير إلى التباين المظلم خلف الأصفر. أجد نفسي يعود إلى الشعار مرارا وتكرارا. إنها بالتأكيد وسيلة قوية لإشراك العلامة التجارية في ذهن المستخدم.
HTML5 Boilerplate
الموقع الشعبي HTML5 Boilerplate يستخدم أشرطة لفت انتباهنا إلى أهم عناصر العمل على الصفحة. أنا أحب أن الشرائط تقوم بعملها دون الحاجة إلى أن تقول "قم بالتنزيل هنا." إن هذا المزيج من الأشرطة والعلامات يخبرنا أن هذا هو المكان الذي يمكن تنزيل الموارد منه.
Cantilever Fish & Chips
الغرض من الشريط ليس واضحًا تمامًا Cantilever Fish & Chips . قد تبدو التفاصيل حول "فتح 7 أيام في الأسبوع" بسيطة نسبيًا ، ولكن من المفترض أنه تمييز مهم لهذا المطعم.
ويلز رايلي
ويلز رايلي هو مثال مثالي للأشرطة في خدمة الجماليات. تبدو الأشرطة رائعة هنا وتصبح محور الصفحة.
دراج سينغ كركي
أنا دائما أحب التصاميم التي تبتعد عن الاتفاقية. محفظة مصمم واجهة المستخدم دراج سينغ كركي هو مجرد مثل هذا الموقع. هنا ، يستخدم الشريط بذكاء ولا يحزم نفس البصمة البصرية كما هو الحال في المواقع الأخرى. يمتزج بشكل صحيح في الصفحة ومع ذلك يمتلك أسلوبًا كافيًا للحفاظ على التصميم من المظهر البسيط جدًا.
السنجاب
السنجاب مثال رائع لمدى نجاح الشريط في العمل مع العناصر العضوية. يتطابق الشريط المحيط بالملاحة الأساسية تمامًا مع الرسوم التوضيحية الغنية أدناه. كما أنه يبقي الملاحة من الضياع بين الأعمال الفنية القوية.
ريان ام سترايكر
مرة أخرى نرى قوة الشريط لتركيز الانتباه. موقعه المركزي والتناقض الجريء يضمن عدم تفويتك ريان ام سترايكر اسم.
الكلمات
Ennea
بشرط Ennea هي ماركة ملابس ، وليس من المستغرب أن تحتوي العلامة هنا على الشعار واسم العلامة التجارية. في بعض الأحيان ، يعمل المنهج الواضح بشكل أفضل.
فيليب مايسنر للتصميم
تحتوي العلامة على التنقل الرئيسي على فيليب مايسنر للتصميم . عادةً ما يتم تأجيل هذا التكوين غير العادي للروابط ، لكن الترتيب والألوان هنا يضمنان سهولة العثور على الروابط.
ترقيع القرد
ما الذي يمكن أن يكون أكثر أهمية على موقع ويب للتجارة الإلكترونية ، ثم توجيه المستخدمين للتحقق من ذلك؟ ترقيع القرد لديه علامة غامقة صغيرة جدًا لمساعدة المستخدمين في إكمال عملية الشراء.
Parkbud
مع كل تطبيقات الهواتف الذكية الموجودة هناك ، يحتاج المستخدمون الجيدون إلى التواصل مع الاختلافات الرئيسية. Parkbud مجاني ، والعلامة الحمراء الجريئة تتأكد من معرفتك. تم وضع العلامة بشكل رائع بعيدًا عن الطريق ولكنها مرئية دائمًا من زاوية عينيك ، تذكيرًا بأن هذا التطبيق اللذيذ مجاني.
ينس
ينس هو مثال مثالي للعلامات جنبا إلى جنب مع نسيج القوام. لاحظ أولا خلفية الدينيم محكم. أيضا ، فإن الحدود الصدفية تحت الملاح الرئيسي يشعر الكثير من النسيج المنحى.
Coreymade
في حين أن تفاصيل صغيرة ، أنا حقا أحب الطريقة التي يجعل الخط النصي العلامة عليها Coreymade يشعر وكأنه علامة على قميص من شعار موقع طبيعي. والتأثير الزائف ثلاثي الأبعاد يجعل العلامة تنبثق بالفعل للمشاهد.
Netastica
العلامة على Netastica هناك بشكل أساسي لتبدو جميلة ، على الرغم من أنها لا تزال تحتوي على معلومات هامة وتربط زائرين بالصفحة الرئيسية.
رايان هافوك تايلور
تكون العلامة في مثل هذا الموقع المرئي رايان هافوك تايلور على شبكة الإنترنت أنها لا تحتاج إلى الكثير من التباين لتبرز. إنه يعمل بشكل جيد مع تدفق الموقع ويقوم بأداء دوره دون عناء.
الأشرطة والعلامات
في الجزء الأخير من هذا العرض ، سنلقي نظرة على مواقع الويب التي تستخدم كل من الشرائط والعلامات.
ClearSpan Media
الأشرطة والعلامات تسير بشكل جيد جدًا ، كما هو موضح في ClearSpan Media . هنا سوف تجد أيضا الأقمشة مع الأنماط ، والغرز والاختلافات اللونية الدقيقة. تعمل العلامتان العلويتان والشريط لأسفل أدناه كنوع من دائرة الاهتمام بالنسبة للمستخدم.
Krichevtsova الكسندرا
في حين Krichevtsova الكسندرا موقع الويب هو بالأحرى المجردة في المحتوى ، تضيف العلامة والشريط حياة إضافية للعناصر الأساسية. يمكنك الاستمتاع بهذا الموقع دون معرفة ما يفعله الشخص.
ويس بوس
معظم المواقع في هذه المجموعة لديها أشرطة كبيرة إلى حد ما. ليس كذلك مع ويس بوس . له أصغر بكثير ، وهو تذكير جيد أنهم لا يحتاجون إلى السيطرة على التصميم لأداء وظائفهم.
استنتاج
نظرًا لجودة مواقع الويب في هذه المجموعة ، لم يشرع أي من هؤلاء المصممين في بناء شيء "عصري". بل لقد واجهوا مجموعة من الاحتياجات ، ومن تلك الاحتياجات برز جهاز بصري فعال لتركيز الانتباه ، وتوصيل المعلومات المهمة وتسليط الضوء على الإجراءات الهامة.
إذا كنت ترغب في الحصول على بعض أشرطة جميلة تعتمد على CSS لموقع الويب الخاص بك ، على الويب مولد الشريط ثلاثي الأبعاد هو أداة قوية لهذا المنصب.