تکنیک های طراحی سایت برای آینده

طراحی های HD

از وقتی که صفحه نمایش های HD روی کار اومدند ، استفاده از Background  های HD هم تبدیل به یکی از جذاب ترین تکنیک های طراحی وب شده.
ولی قطعا طراحی کردن سایت هایی که مولفه مشخصه ی اون ها جذابیت دیداریشون باشه کار آسونی نخواهد بود.

ما در این مقاله نگاهی می اندازیم به آینده ی طراحی وب.
سوال اینجا نیست که آیا طراحی HD برای وب سایت فراگیر می شه یا نه، بلکه سوال این جاست که چه موقع مانیتورهای High Resulution اونقدر همه گیر می شن که طراحی های دیداری بهترتبدیل به یک امر غیر قابل اجتناب بشه.

پس بهتره که شروع کنیم.
ما در این مقاله درباره ی چگونگی ساختن HD Backgrounds، استفاده از تصاویر ، ویدئوها ،انیمیشن ها و چگونگی لایه بندی و کنار هم قرار دادن همه ی این ها صحبت خواهیم کرد.

تصاویر

خیلی بزرگ  (Oversized). Hero . تمام صفحه  (Full Screen).

وقتی که حرف از تصاویر پشت صفحه (Background Images) است، سه کلمه ی بالا بهترین کلماتی هستند که می شه برای توصیف طراحی وب سایت مدرن ازشون استفاده کرد.
امروزه طراحان با استفاده از Background Image هایی که کل صفحه نمایش رو اشغال می کنند، طراحی های HD رو به اوج خودشون رسوندند.

این تکنیک طراحی برای کاربران بسیار جذاب است چراکه انسان ها ذاتا به سمت عناصر ویژوال گرایش بیشتری دارند.
به طور کلی بیشتر تفاسیری که از دنیای اطراف ما در ناخداگاه مون شکل می گیره به صورت تصویری هستند.
علاوه بر این استفاده از عکس های جذاب برای سایت ما User Experience بهتری رو به ارمغان می آورد و دلیلش هم اینه که کاربر با دیدن عناصر زیبا و جذاب به صورت ناخداگاه این حس بهش القا می شه که سایت کارایی بهتری داره.
ممکنه این دیدگاه خیلی سطحی به نظر بیاد. ولی وقتی که حرف از طراحی هست، حس کاربر همون واقعیتیه که ما دنبالش می گردیم.

صفحه نمایش های High Resulution فرصتی برای کاربران فراهم کردند که بتونند تصاویر رو با سطح بالایی از جزئیات ( که قبلا امکان پذیر نبود) ببینند.

تصاویر پرجزئیات استفاده شده در Junction Moama  یا رنگ های متنوع به کار رفته در Macquarie Park
(که هر دو در بالا مثال زده شده) به رابط کاربری شما جلا می دهند و این باعث می شه که شما بتونید با اولین نگاه کاربر رو به سایت خودتون جذب کنید.

شرکت دارکوب 5 روش رو برای اینکه از تصاویر HD به نفع خودتون استفاده کنید رو پیشنهاد می ده:

• یک تصویر زیبا و جذاب رو مرکز کار خودتون قرار بدید- فقط به خاطر اینکه اسمش عکس پشت صفحه است به این معنا نیست که نمی تونه صحنه ی مرکزی رو در دست بگیره.

یک عکس قوی باعث می شه که شما بتونید با کاربرتون ارتباط عاطفی و احساسی بهتری برقرار کنید. پس یاد گیری اینکه چگونه تصاویر روی سلسله مراتب دیداری طراحی شما تاثیر می ذارن کاملا لازمه.

• از چندیدن عکس استفاده کنید- از اسلایدر ها یا Card-Style فریم ورک ها که در بخش الگوهای رابط کاربری وب توضیح دادیم برای وب سایت هایی با حجم بالای محتویات یا

 portfulio sites استفاده کنید.

• در تصاویر از افکت استفاده کنید- استفاده کردن از افکت هایی مثل Blurred یا

Culor Overlays روی تصاویر می تونه میزان تاثیر گذاری اون ها رو تغییر بده. (به طور مثال
رنگ های تناژ قرمز به طور کلی انرژتیک تر هستند.)
این تکنیک روی عکس های HD به خوبی جوابگو هست چرا که حتی بعد از اعمال افکت ها نیز عکس پایه هنوز قابل تشخیص و مشاهده است.

• به این مسئله که تصویر روی صفحه نمایش با سایزهای مختلف چگونه پدیدار می شود دقت داشته باشید-از قبل برای صفحه نمایش با سایزهای متفاوت Background Image هایی رو در نظر بگیرید تا مطمئن باشید که عکس پشت صفحه ی شما روی تمامی دستگاه ها به درستی نمایش داده شود مگر نه به جای اینکه Background Image شما همه ی صفحه رو اشغال کند، عکس بالای یک صفحه با رنگ Sulid(که الان به Background شما تبدیل شده) گیر می افتد.

• خارج از چهار چوب فکر کنید-یک عکس پشت صفحه لازم نیست که حتما با استاندارد نسبت عرض به طول 1 الی 1.5 دوربین ها مطابقت داشته باشه بلکه می تونه شامل عکس هایی باشه که از درون Background های خودشون بریده و بیرون کشیده شده باشند.

یک عکس پشت صفحه می تونه به راحتی نظر کاربر رو از لحاظ دیداری (Visual) به سایت شما جلب کنه و اگر این عکس رو طوری انتخاب کنید که روی مارک (Brand)، کالای شما و یا مسیجی که می خواهید به کاربرتون منتقل کنید تاکید بیشتری داشته باشه قطعا نتیجه ی بهتری خواهید گرفت.
به خاطر داشته باشید که در بهره بردن از تکنیک Background Photo می توانید از چندین عکس نیز استفاده کنید. فقط باید اطمینان حاصل کنید که فریم ورک طراحی شما و عناصر به کار برده شده در سایت تمامی عکس ها رو پشتیبانی می کنند.(یعنی قابلیت به درستی نمایش دادن عکس ها رو داشته باشند).

ویدئوها

استفاده از HD Video Backgrounds یکی از محبوب ترین تکنیک های طراحی امساله.
معمولا ویدئو های به کار برده شده در Background رو به صورت Fast-Paced (یعنی با سرعت بالا) به نمایش می ذارن تا بتوانند  میزان اطلاعات بیشتری رو در زمان کمتری نشون بدهند.
امروزه خیلی از سایت ها از این تکنیک در طراحی هاشون استفاده می کنند، از غول هایی مثل AirBnB گرفته تا سایت های کوچکتری که در almost every genre به کار رفته اند.
استفاده از ویدئو به سرعت داره تبدیل به بخشی جدا ناپذیر از طراحی وب می شه.

اولین وب سایت هایی که از Background های ویدئویی استفاده کردند سایت های مربوط به فیلم های سینمایی بودند.
به طور مثال سایت فیلم “Life of Pi” از Preview همین فیلم به عنوان Background استفاده کرده بود (و البته امکان دانلود این Preview نیز وجود داشت).
قبل از معرفی HTML5 و گوشی های هوشمند با قابلیت پخش ویدئوهای HD ، استفاده
از Full-Screen Video Background ها وجود نداشت.
چراکه قبل از این، مرورگرها و اینترنت کانکشن ها سرعت کافی و قابلیت پردازش و
پخش Video Background ها رو نداشتند.

در استفاده از Video Background خیلی مهمه که ما فاکتورهای نمایش ویدئو را طوری تنظیم کنیم که برای کاربر چشم نواز باشد.
چه سایت شما حالت سورئالیسم و رویایی داشته باشد مثل Dunckelfeld’s که
دارای Video Background های سیاه و سفید است و چه حالت واقع گرایانه تر مثل AirBnB ،
شما باید Frame Rate و Saturation Rate رو طوری تنظیم کنید که ویدئوی شما به جذاب ترین حالت ممکن به نمایش گذاشته شود.

فقط اضافه کردن یک ویدئو کلیپ در جذابیت وب سایت مون تاثیر چندانی نمی ذاره. بلکه استفاده از تمام تکنیک های سینمایی  برای تولید یک فیلم عالی (مثل Framing, Zooming, Panning, …) در ویدئوهای به کاربرده شده در وب نیز کاملا ضروریه.

به طور مثال Brindisa Tapas Kitchens به خوبی از ویدئوها در وب سایت خودش بهره برده است.
این سایت برای به نمایش گذاشتن غذاها و جو رستوران های خود از تعداد زیادی ویدئوهای کوتاه استفاده کرده که این ویدئوها از زوایای متفاوتی فیلم برداری شده و برای تاثیرگذاری بیشتر، برخی از آنها به صورت Time-Lapse و برخی دیگر به صورت Slow-Motion به نمایش گذاشته شده اند.

شرکت دارکوب برای استفاده کردن از ویدئوها در فریم ورک طراحی سایت تون 5 راهبرد رو پیشنهاد
می کنه:

• ویدئویی که انتخاب می کنید نباید خیلی طولانی باشد- یک Video Background باید بتواند در طی چند ثانیه منظور شما رو به صورت یک داستان دیداری (Visual Story) به کاربر شما انتقال دهد.

برای همین بهتر است که مدت زمان ویدئو بین 10 تا 30 ثانیه باشد.

• صدای ویدئو را mute کنید- آیا صدا باید جزئی از عناصر Auto-Play  باشد یا خیر؟ کاربران بر سر این مسئله به دو گروه با دو دیدگاه کاملا مخالف تقسیم می شوند.

برای همین بهتره که صدای ویدئو تون رو به صورت پیش فرض mute قرار دهید.

• روی مدت زمان بازگذاری ویدئو تون تمرکز کنید- درسته که ویدئوهای HD سرگرم کننده هستند ولی نباید اجازه بدید که این ویدئوها کارایی سایت تون رو پایین بکشند.

چراکه اگر کاربر به خاطر زمان بارگذاری طولانی قبل از به نمایش در آمدن ویدئو سایت رو
ترک کنه ، دیگه فرقی نخواهد کرد که ویدئوی انتخابی ما چقدر خاص و جذاب بوده.

• جایگزین هایی در نظر بگیرید- برخی از دستگاه ها قابلیت نمایش HD رو ندارند.

با چک کردن Google Analytics متوجه خواهید شد که سایت شما بیشتر با چه دستگاه هایی مورد مشاهده قرار می گیرد ، سپس می تونید طراحی تون رو بر آن اساس شروع کنید.
بعضی وقت ها ممکن است که بخواید به عنوان گزینه ی جایگزین ویدئو تون، از یک عکس ثابت استفاده کنید.

• از ویدئوهای با کیفیت استفاده کنید- چه خودتون فیلم برداری می کنید چه کسی رو استخدام کردید تا براتون فیلم برداری رو انجام بده و یا حتی اگه دارید از ویدئوهای موجود استفاده می کنید ، کاملا ضروریه که این ویدئوها دارای کیفیت دیداری (Visual Quality) خیلی خوبی باشند.

نه تنها که این ویدئوها باید در فریم ورک های HD قابل به نمایش گذاشتن باشند، بلکه باید کیفیت ویدئوها واقعا HD باشد.
دقیقا مثل عکس ها، ویدئوها نیز در Resulution بالاتر از اون چیزی که درش فیلم برداری
شده اند به درستی نمایش داده نمی شوند.

استفاده از ویدئوهای HD در وب سایت ها یک تجربه ی کاملا چند رسانه ای رو تولید می کند ، همراه با لایه هایی از اطلاعات که از طریق پشت صفحه ی متحرک به کاربر منتقل می شود.

انیمیشن ها

پشت صفحه های HD انیمیشنی جایگاهی بین عکس و طراحی دارند چراکه معمولا انمیشن ها هم شامل عناصر ثابت هستند و هم عناصر متحرک.

شاید به نظرتون استفاده از انیمیشن در طراحی تکنیک جدیدی بیاد،  ولی واقعیت اینه که
دهه ها است که انیمیشن ها با همین اصول و روند در حال استفاده هستند. بلکه تنها چیزی که تغییر کرده ، سطح کیفیت انیمیشن ها است. با روی کار آمدن صفحه نمایش های HD امکان به کار بردن انیمیشن های با کیفیت بالا فراهم شده است.

زمان بندی مهم ترین فاکتور در طراحی Background های انیمیشنی است. انیمیشن باید به صورت بسیار روان به نمایش گذاشته شود و هر گونه looping باید از دید کاربر پنهان باشد.

شرکت دارکوب پیشنهاد می کنه که هنگام استفاده از انیمیشن ها این 5 نکته رو در ذهن داشته باشید:

• از انیمیشن های ساده استفاده کنید- داستان های بیش از حد پیچیده باعث درگیری ذهن و انحراف تمرکز کاربر از موضوع اصلی می شوند. برای همین بهتره که قبل از اینکه بخواهید پیچیدگی ها رو به روایت تون اضافه کنید ، اول اصول و مبانی رو برای کاربر به نمایش بگذارید.

• از رنگ های روشن و تغیرات روی صفحه برای اتصال به رابط کاربری استفاده کنید- به طور مثال، با یک انیمیشن Hover ساده شروع کنید مثل عوض شدن رنگ لینک. در این حالت روشن ترین رنگ موجود در پالت تون رو برای حالت Hover انتخاب کنید اینگونه به طور ناخداگاه توجه کاربر به انیمیشن بیشتر جلب می شود.

اضافه کردن یک تغییر دیداری مثل بسط دادن حروف رنگی شده در حالت Hover باعث
می شه که روی انیمیشن تاکید دو چندانی بشه.
با استفاده از این ابزار ساده می تونید اکشنی که کاربر قصد انجامش رو داره رو مشخص کنید.

• از قابلیت های صفحه نمایش های HD استفاده کنید-برای اینکه از بهترین کیفیت دیداری بهره ببرید، از فرمت های عکس مقیاس پذیر مثل Vectorها استفاده کنید.

• رویکردی یکسان برای استفاده از ویدئوها و انیمیشن ها-دقیقا همان جزئیات و ظرافت هایی که در ویدئوها باید رعایت می کردیم به مراتب باید در استفاده از انیمیشن هم رعایت بشه. به طور مثال از استفاده کردن حرکت ناگهانی عناصر و یا صداهای ناهنجار که ممکن است باعث ناراحتی کاربر بشه باید جدا خودداری کرد.

• انیمیشن هایی متناسب با مخاطبین تون استفاده کنید- استفاده از انیمیشن ها و تصاویر زیاد ممکن است برای هر سایتی مناسب نباشد.

مثل همیشه به جزئیات توجه کنید.بسته به نوع سایت و کاربران شما ، انیمیشن ها می توانند کارتونی ، ویدئویی و یا حتی به صورت حرکاتی ملایم در یک illustrated فریم ورک باشند.
انیمیشن ها می توانند با تعامل کاربران (مثل لمس کردن صفحه،کلیک کردن و یا اسکرول کردن) فعال شوند و یا می توانند به صورت auto-play به نمایش گذاشته شوند.

لایه بندی: تمام اجزا را کنار هم قرار دهید
یک پشت صفحه ی HD فقط زمانی تاثیر گذار است که به عنوان لایه ای از اطلاعات در نظر گرفته شود.
به همین دلیل حتی یک عکس ، ویدئو و یا انیمیشن فوق العاده نیز تنها زمانی کارساز است که با محتویات سایت مرتبط باشد.
در ادامه 3 سایت که موفق شده اند به خوبی از طراحی HD استفاده کنند رو مثال می زنیم:

Adidas Design Studio
این سایت از تکنیک های گوناگونی همراه با عکس های بزرگ و خیره کننده برای جلب نیروی کار بیشتر به سمت خود استفاده می کند.
پشت صفحه ی Full Screen با لینک شدن به یک ویدئو و اسکرول کردن با استفاده از Parallax Effect کاربران را به گردشی در میان کالاها و اطلاعات موجود دعوت می کند.
عکس های واضح و پر کیفیت با حروف چینی واضح و پرکیفیتی همراه شده اند.
رنگ های این سایت یک سلسله مراتب دیداری بسیار قوی (ولی طوری که برای چشم زننده نباشد) را برای کاربر به وجود می آورد.

Flipboard
این سایت هنر استفاده از عکس های ثابت به عنوان Background را به عالی ترین حد خود رسانده است. که البته این مسئله تا حد زیادی به اصول هنر سنتی عکاسی وابسته است.

تصاویر این قابلیت را دارند که به خارج صفحه نیز بسط پیدا کنند مثل یک میزی که از طرفین در حال گسترش است ، در حقیقت این اتفاق زمانی رخ می دهد که عکس روی Resulution های مختلف به نمایش گذاشته می شود.
رنگ ، سایه و روشنایی عکس طوری انتخاب شده تا عکس جزئی از عناصر پشت صفحه محسوب شود به طوری که تمرکز کاربر بیشتر بر عناصری که روی این عکس برای انجام دادن تعامل ها قرار داده شده است منتقل شود.  
5 Eme Gauche
این سایت شامل یک عکس پشت صفحه ی بزرگ به همراه چندین عنصر لایه بندی شده  شامل
آیکون های مربوط به شبکه های اجتماعی سایت، DownPage Navigation ، Brand Header و لینک های اصلی در وسط صفحه می باشد.

هر لایه از محتویات این وب سایت با عکس پشت صفحه در حال تعامل است و به طور جداگانه از عکس قرار گرفته اند به طوری که کاربر قادر است که تمامی لایه ها را در یک نگاه ببیند.
این سایت دارای پیوستگی درونی خوبی می باشد چراکه صفحه های مختلف این سایت از فرمت لایه بندی یکسانی در عکس ها و اسکرول انیمیشن های یکسانی استفاده کرده است.
نتیجه گیری
با اینکه پشت صفحه های HD اخیرا بسیار محبوب شده اند ، ولی منصفانه نیست که استفاده از آنها را یک تکنیک جدید طراحی بدانیم. بلکه عکس های HD محصول پیشرفت تکنولوژی های اخیر هستند و با روی کار آمدن این تکنولوژی ها استفاده از عکس های HD ممکن شد.