7 قرارات التصميم الفريدة
أنا دائما أبحث عن الإلهام ، للتصميم الرائع الذي يتحدى الاتفاقية. هذه الوظيفة هي كل شيء عن حلول تخطيط فريدة من نوعها. هذا يعني أنني سأتحدث عن ثمانية مواقع مختلفة تعرض شيئًا عاديًا بطريقة فريدة. سنستعرض حلول التصميم الفريدة من خلال عرض المنتجات ، ودمج العناصر الشخصية والبشرية في موقع الويب.
1. هارفارد يعيد اختراع دائري سيئ السمعة
كلية هارفارد للتصميم موقع يحتوي على طريقة فريدة من نوعها في التنقل الملاحة. عندما تهبط للمرة الأولى على الصفحة الرئيسية ، سيكون هناك عرض مرئي للملاحة. بالطبع ، لا يتم تمثيل كل رابط واحد هنا ، بل مجرد عدد قليل من الروابط الرئيسية. احتضنت العديد من مواقع الويب الربط بالصفحات الأكثر أهمية في رأس الصفحة الرئيسية ؛ هذا ما أحضر لنا دوارات على سبيل المثال. ولكني لم أر بعد موقعًا آخر على الويب بهذه الطريقة. قد يكون التنقل صغيرًا ولكنه في المقدمة والوسط. الأهم من ذلك ، يبدو أنه ينتمي إلى هناك. يتم تنفيذه بشكل استثنائي.
تتداخل الصور الموجودة على اليسار مع بعضها البعض ، ولكن لا يزال بإمكانك رؤية عدد الموجودين هناك. هناك علاقة واضحة بين الصورة والعناوين على الجانب الأيسر. تدور الصور فيما يتعلق بالعناصر الموجودة على اليسار. ومع ذلك ، في أي وقت ، تعرف ما هي المعلومات المتاحة لك. إنها مثل مدرسة التصميم في جامعة هارفارد التي أنشأت نسخة محسّنة لما كان ينبغي أن يكون عليه دائريًا في المقام الأول. ليس فقط هو قابلية الاستخدام التي تؤخذ على محمل الجد في هذا الحل التصميم ، والتخطيط هو فريد من نوعه كذلك. كل من هذه العوامل مجتمعة تجعل تصميم مرئي رائع.
2. Tra ينفجر الشبكة
من الواضح تماما ذلك هيئة تنظيم الاتصالات يستخدم موقع الويب تخطيطًا غير تقليدي. الموقع ، بشكل عام ، الحد الأدنى. كما أنها تستخدم نظام ألوان معكوس حيث تكون الخلفية سوداء والنص أبيض. نظام الألوان يعطيها بالتأكيد عامل رائع. ومع ذلك ، هذا هو حول تخطيط موقع Tra. لنبدأ بالصفحة الرئيسية: هناك بضع نصوص على الصفحة الرئيسية ، معظمها يتداخل مع صورة الخلفية على الأقل قليلاً ، باستثناء نسخة الفقرة من تحت قسم "نحن نعرف الناس". يتم محاذاة النسخة على وجه التحديد لتكون خارج الصورة. انها مختلفة ، انها فريدة من نوعها ، انها ملحوظة.
في الصفحة الرئيسية ، هناك أمر أكثر قليلاً واستخدام الشبكة. لكن الشبكة لا تزال غير منتظمة. يبدو كما لو أن كل قسم من الصفحة حول له شبكته الخاصة. الشيء الذي أسراني أكثر عن هذه الصفحة هو الصورة المقطوعة من أعلى يسار صفحة الويب. انها لا تناسب أي شيء. بطبيعة الحال ، هذا يجعلني أشعر بالفضول. اتضح أن الصورة عبارة عن معرض - عليك النقر فوقه لجعل الصور مفتوحة. هذه طريقة ذكية للاستفادة من التصميم. تتم مكافأة الأشخاص الذين يهتمون بالتحقيق بمجموعة من الصور. الأشخاص الذين لا يهتمون ، لا يخسرون الكثير. انها بيضة عيد الفصح متعة.
3. صور الأحذية التمرير داخل صفحة ثابتة
هذا المثال لحل التصميم الفريد يدور حول بائع تجزئة للأحذية عبر الإنترنت. Feit صفحة المنتج رائعة. أولاً ، يستخدم التصميم العرض والارتفاع الكاملين للشاشة. وهذا يعني أن كل منطقة من الشاشة قد تم تعيينها لغرض محدد. ثانياً ، إن الموقع بسيط وبسيط. هذا يعني أنه على الرغم من أن التصميم لا يستخدم الشاشة الكاملة ، إلا أنه ليس فوضويًا. هذا أمر جيد جدًا حيث يعتمد الكثير من التصميم على المساحة البيضاء للحصول على موقع نظيف وخفيف المظهر.
الشيء الذي أبهرني أكثر حول صفحة المنتج المحددة هذه هو طريقة تقسيم التصميم. تنقسم الصفحة بشكل خاص إلى ثلاثة أقسام مختلفة. أولا ، هناك الملاحة على الجانب الأيسر. إنها قياسية جدًا ولا شيء مميز. ثم هناك الجانب الأيمن مع تفاصيل المنتج. كلا ، يتم إصلاح التنقل الجانب الأيسر وقسم التفاصيل على الشاشة. ولكن ، القسم الأخير ، قسم الصور الأوسط ، مليء بالصور القابلة للتمرير. أعتقد أنه حل رائع لأنه ليس الحل الأكثر شيوعًا.
في كثير من الأحيان ، إذا كانت هناك قائمة كبيرة من صور المنتجات ، فإن المعلومات المتعلقة بها تبقى في الخلف. هنا ، أثناء التمرير لأسفل ، لا أزال أرى وصفًا للمنتج واسمه ، وما زلت أرى الألوان المختلفة التي تدخلها ، ويمكنك الوصول إلى مزيد من المعلومات مثل تفاصيل حول المادة كما أريد دون الحاجة إلى التمرير لأعلى ولأسفل. بشكل عام ، هذه تجربة سلسة للعملاء المحتملين.
4. عرض قبالة جوانب متعددة من منتج في لمحة واحدة
هنا لدينا صفحة منتج آخر وطريقة أخرى لعرض المنتج. حسناً ، حسناً ، لدينا أيضًا حذاء آخر أيضًا! Afura يمتلك موقع الويب أيضًا طريقة عرض فريدة. هذه المرة تظهر الأحذية بعدة لقطات مختلفة في أعلى الصفحة. إنه في الواقع جزء من عنصر واجهة المستخدم في الرف الدائري. ومع ذلك ، فإن قابلية الاستخدام هنا ليست مشكلة كبيرة. بالنسبة للمبتدئين ، هناك ثلاث صور يتم عرضها بشكل افتراضي على أحجام شاشة سطح المكتب أو الكمبيوتر المحمول. تحتوي الصور الافتراضية جميعها على نفس الخلفية مما يجعل الشاشة جميلة وسلسة. إذا كان المستخدم لا يدرك أن الصور جزء من دائرة دائرية ، فسيظهر على الأقل ثلاث صور مختلفة للمنتج على أجهزة الكمبيوتر الخاصة به. بالنسبة إلى أحجام الشاشة الأصغر مثل الأجهزة اللوحية ، يكون الإعداد الافتراضي هو عرض صورتين في كل مرة ؛ هذا لا يزال جيدًا. الكل في الكل ، عرض منتجات الأحذية هنا هو حل تصميم فريد.
5. يظهر Opendoor من البشر
أنا ، على سبيل المثال ، أعتقد أن الويب هو مكان غير شخصي لا نرى فيه الكائن البشري عادة ؛ الناس الحقيقيين وراء التطبيقات والمنتجات والشركات وهلم جرا. لطالما سعت إلى تضمين عنصر بشري في تصاميمي. أستطيع أن أرى ذلك باب مفتوح يريد أن يفعل نفس الشيء بالضبط. على صفحتهم الرئيسية ، في منتصف الطريق تقريباً ، هو قسم يسمى "لقد حصلنا على ظهرك." من المفترض أن يشرح أن هناك أناس حقيقيين وراء شركة Opendoor الذين يعملون هناك لمساعدة زبائنهم في كل خطوة على الطريق. الآن ، كان يمكن ل Opendoor أن يتركها هناك للتو ، ولكن بدلاً من ذلك ، وضعوا صورة كبيرة لأحد موظفيهم.
يحتوي هذا القسم على نص صغير جدًا. بدلاً من ذلك ، تمثل الصورة والوجه الجزء الأكبر من القسم. كنت حتى أقول أن الصورة تغلف القسم بطريقة إيجابية 100 ٪. إذا كانت الصورة عبارة عن صورة مصغرة أو صورة شخصية ، فلن يكون التأثير موجودًا. إذا كانت الصورة مربعًا متوسط الحجم (على الأقل 300 بكسل × 300 بكسل) بجوار النسخة ، فلن يكون التأثير هو نفسه. كان اختيار استخدام هذه الصورة الكبيرة لوجه مارك اللطيف دعوة جيدة ؛ ليس فقط أن قرار التصميم هذا يوفر عنصر تصميم إنساني وشخصي ، بل إنه مبتكر أيضًا. بدون هذه الصورة ، لن يكون هناك أي تأثير شخصي على المستخدم. بدون هذا التخطيط المحدد ، سيكون لهذا القسم تأثيرًا عاطفيًا مختلفًا تمامًا.
6. UX Flow يظهر القليل من الرسوم المتحركة يمكن أن تقطع شوطا طويلا
هذا المثال التالي لحل تخطيط فريد له علاقة بالرسم المتحرك. إذا ألقيت نظرة على الصفحة الرئيسية ل تدفق UX وقم بالتمرير لأسفل قليلاً قد تلاحظ أن إحدى خلفيات القسم تنعش فيها. إنه بصراحة لا شيء يتوهم ولكنه فريد. لا تخف الخلفيات أثناء التمرير على صفحة ويب. إذا كان هناك أي شيء ، على مدار السنوات القليلة الماضية ، فقد رأينا عناصر مختلفة من داخل مقطع يطير أو يخرج أثناء التمرير. ولكن ، لم أبدو أن العديد من الرسوم المتحركة الخلفية إلى جانب المنظر. والسبب في ذلك هو أن الخلفية تحدد القسم. وعلى الرغم من أن هذا ليس نوعًا من الرسوم المتحركة المجنونة ، فإنه لا يزال مثيرًا للإعجاب.
ليس كل شيء يجب أن يكون جريئًا ، وبصوت عالٍ ، وبغيضًا ليثير الإعجاب. في بعض الأحيان ، تكون الأشياء البسيطة مثل الرسوم المتحركة البسيطة والسريعة كافية لإنتاج تجربة فريدة للمستخدم. هذا بالتأكيد واحد من تلك الأوقات. هناك أمر آخر مهم هو ملاحظة أن المقاطع التي يحدث فيها الرسم المتحرك لا تحتوي على تخطيطات فريدة بنفسها. حسنا؛ يكون الانتقال ملحوظًا أثناء الانتقال من قسم إلى آخر ، وما زال جزءًا من التنسيق حتى إذا لم يكن تنسيق النهاية الذي وضعته الرسوم المتحركة.
7. تيد تود خريطة متكاملة
التصميم المرئي والخبرة العامة للمستخدم تيد تود موقع الويب مصمم جيدًا. من أجل هذه المقالة ، أود أن أتحدث عن الطريقة التي يستخدم بها تيد تود قسم الموقع والخريطة على موقعه على الويب. نحو أسفل صفحتهم الرئيسية ، هناك قسم مخصص لمواقع المكاتب المختلفة للشركة في جميع أنحاء ولاية فلوريدا. هناك العديد من الأسباب التي تجعل هذا القسم مدهشًا. أولاً ، يستخدم القسم التخطيط بطريقة فريدة لتوفير حل تصميم نجمي. الشيء الأكثر وضوحاً في هذا القسم هو الشكل الخفيف لفلوريدا على اليمين. إن رؤية فلوريدا مع العديد من النقاط هي طريقة رائعة لإظهار مدى وصول الشركة. انهم لا يقولون فقط انهم في ولاية فلوريدا ، والتصميم يظهر لك أين بالضبط. انها سهلة الرؤية وهضم وينفذ بطريقة رائعة جدا.
الشيء المهم التالي في هذا القسم هو النقاط. هم في الواقع التفاعلية. عندما تحوم فوقهم تحصل على اسم المدينة أو المدينة يقع مكتب تيد تود للتأمين. ولكن ، إذا قمت بالنقر فوقها فسيتحول القسم بأكمله إلى اليسار لإفساح المجال للتفاصيل عن المكتب المحدد. يمكنك الحصول على رقم هاتف المكتب والعنوان وساعات العمل بالإضافة إلى قائمة الموظفين. يعجبني حل التصميم هذا لأنه يسمح للمستخدم بالتنقل سريعًا إلى موقع بالقرب منه. إنه تمثيل مرئي وفريد أكثر بصريا مما لو كانت المعلومات مكدسة فوق بعضها البعض على عنوان الصفحة "مكاتبنا في فلوريدا" ، ألا تعتقد ذلك؟
