أفضل تصميمات المواقع لعام 2021

الصفحة 1 من 3: The Neverlands بواسطة Active Color

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

أداة استبدال لون pixlr لا تعمل

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

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



01. نيفرلاندز بواسطة Active Color

الصفحة الرئيسية نيفرلاندز

يتم التنقل حول قارب سحري(رصيد الصورة: اللون النشط)

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

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

كيف حصلت على هذه الحفلة غير العادية؟

لقد عملنا مع العميل ومالك The Neverlands ، Andrew Meieran ، منذ أن افتتحوا أول مكان في وسط مدينة لوس أنجلوس. يعد فندق Edison مكانًا ليليًا رائعًا حقًا ، وقد تم بناؤه في الطابق السفلي الفرعي لمبنى LA Higgins التاريخي ، مع الحفاظ على مولدات الطاقة والعناصر الصناعية لمحطة الطاقة التي تشير إلى المستقبل الجديد لـ DTLA.

في وقت لاحق ، عملنا على عدة مشاريع أخرى مع نفس العميل ، بما في ذلك موقع Clifton’s Republic على الويب. عندما بدأ هذا المشروع ، كنا بالفعل منغمسين بعمق في العلامة التجارية والأماكن ، وكذلك قريبين جدًا من العميل وأسلوبه الاستثنائي والرؤي والغريب.

لقطة شاشة من موقع نيفرلاندز تظهر رجلاً يقود دراجة في سماء الليل

تحول مفهوم Active Color نحو نهج التصميم التوضيحي المرسوم يدويًا والصفحات المقصودة التفاعلية المدفوعة المنظر(رصيد الصورة: اللون النشط)

ما هو الموجز؟

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

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

لقطة شاشة من موقع نيفرلاندز تظهر امرأة على شجرة تحمل ضوء بومة

أفضل عروض الجمعة السوداء للكمبيوتر اللوحي 2017
النغمة طوال الوقت ممتعة وخيالية(رصيد الصورة: اللون النشط)

ما هي إلهامك البصري؟

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

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

من صاغ الرسوم التوضيحية؟

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

لقطة شاشة من موقع نيفرلاندز تعرض اسكتشات مرسومة بالخطوط

عملت Active Color بشكل عكسي لجعل الطباعة تتناسب مع الفن(رصيد الصورة: اللون النشط)

كيف تعاملت مع الطباعة؟

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

ما التقنيات التي استخدمتها لبناء الموقع؟

استخدمنا تثبيت WordPress مخصصًا لتشغيل الواجهة الخلفية. موقع الويب مشفر بالكامل على الواجهة الأمامية مع الكثير من JavaScript و CSS المخصصين. لقد قمنا بتعديل نص المنظر الرائع مفتوح المصدر بواسطة Matthew Wagerfield باعتباره المحرك الرئيسي وراء حركة الصفحة المقصودة. لقد أنشأنا أيضًا الكثير من الميزات المخصصة الأخرى التي تحدث على صفحات المكان مثل The Edison و Clifton’s Republic و Pacific Seas أثناء قيام المستخدمين بالتمرير ، مما يجعلك تشعر وكأنك تنزل إلى المدينة أو أسفل مظلة الشجرة أو إلى المحيط.

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

لقطة شاشة من موقع The Neverlands تظهر مجموعة مختارة من البطاقات الخيالية

أفضل جهاز كمبيوتر لتشغيل Adobe Creative Cloud
تم الحصول على أي أصول مرئية أو رسوم توضيحية مفقودة من خلال صور المخزون ، وتم التلاعب بها بشكل فني إضافي لتتناسب مع أسلوب ومفهوم موقع الويب(رصيد الصورة: اللون النشط)

التحولات فعالة بشكل جميل: كيف أنشأتها؟

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

كيف جعلت الموقع يغني على الجوال؟

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

اختيار الرسوم التوضيحية الخيالية

تصور مفصل ولوحة العمل لمختلف الصفحات المقصودة والأصول(رصيد الصورة: اللون النشط)

ما هو أكبر درس تعلمته؟

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

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

استخدام جهاز android لوحي كلوحة رسم للكمبيوتر

الصفحة التالية: اكتشف تصميم الموقع الثاني لعام 2020 حتى الآن ...

أنشأت Creative Bloq هذا المحتوى كجزء من شراكة مدفوعة مع Adobe Stock. محتويات هذه المقالة مستقلة تمامًا وتعكس فقط الرأي التحريري لشركة Creative Bloq.

  • 1
  • اثنين
  • 3

الصفحه الحاليه: The Neverlands بواسطة Active Color

الصفحة التالية The Mill by Studio Output