فيديو في تصميم الويب

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

تطور الفيديو

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

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

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

فيديو على شبكة الإنترنت اليوم

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

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

كيف يمكننا استخدام الفيديو

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

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

وقال أن نتمكن من استخدام أشرطة الفيديو...

.. لإدخال

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

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

بضعة أمثلة رائعة لهذا التطبيق واضحة ومواقع التطبيق الورقة.

واضحة

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

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

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

ورقة

الورق هو تطبيق الذي يسمح لك برسم ورسم جميل على تطلب الشركة الخاصة بك.

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

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

.. فرحة

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

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

اثنين من مواقع الويب باستخدام هذا تأثير كبير هي أسيوط يده وملعب شركة

Conf المحمولة

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

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

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

ملعب لجنة التفاوض الحكومية الدولية

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

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

.. لإضافة الفائدة

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

ويعتبر مثال عظيم لهذا على موقع سيمبولسيت.

سيمبولسيت

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

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

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

.. لاستبدال صور الخلفية كبيرة

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

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

بضعة أمثلة كبيرة من أشرطة الفيديو خلفية كبيرة سبوتيفي وبطيئة mo.

سبوتيفي

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

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

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

مو بطيء

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

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

.. تحسين الخاص بك القص

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

مثال عظيم لهذا العمل على موقع شخصي دان عدن.

Daneden.me

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

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

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

التعيينات

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

بعد ذلك ، فكر في كيفية القيام بدمج الفيديو في التصاميم الخاصة بك وكيف يمكنك استخدامها لتحسينوتحسين التصميمات الخاصة بك في المستقبل.