مدهای جدید در طراحی وب سایت

فضای وب به سرعت رو به رشده. فناوری­ها و روشهای جدید خیلی سریع ظهور میکنند. ابزار طراحی وب دائما در حال بهتر شدن هستند و آزادی عمل بیشتری در طراحی رابط کاربری و تعاملات وب به طراح ها میدن و بخاطر همین الگوها و روشهای طراحی وب طی مدت کوتاهی مد میشن.
تو این مقاله یه فهرست 10 موردی از مدهای جدید طراحی وب امسال (1396) رو خواهید دید. البته این مدها چیزهای جدیدی نیستند و قبلا هم وجود داشتند اما محبوبیتشون زیاد شده و روز به روز هم داره بیشتر میشه. اینطور که داره پیش میره انتظار داریم استفاده ازشون رواج زیادی پیدا کنه و توی همه سایتها ببینیمشون.
البته این میون یه سری روشهای جدید هم وجود دارند که بد نیست تو طراحی سایتتون ازشون استفاده کنید، هرچند اجباری و الزامی نیستند اما شاید بخواهید با بهره بردن از این نوآوری­ها از رقباتون جلو بیفتید.

رنگ

انتخاب رنگ برای وب سایت به طرز باورنکردنی مهمه. رنگ روی احساسات، تفکرات و میزان برقراری ارتباط بیننده اثر میذاره. پس بیایید ببینیم امسال (1396) چه رنگهایی مد شدند.
Pantone رنگ سال رو سبز انتخاب کرده، بعنوان نماد شروع تازه و تجدید حیات. البته ما نمیگیم حالا دیگه باید همه سایتها سبز بشن ولی قطعا خیلی از طراح ها تحت تأثیر رنگ سال قرار خواهند گرفت.
اگه میخواهید برای ترکیب رنگهای مختلف ایده بگیرید میتونید از پیشنهادات پنتون استفاده کنید.
با توجه به محبوبیت Google’s Material Design احتمالش زیاده که پیشنهادات این بخش هم مورد توجه طراح ها قرار بگیره و مد بشه. رنگهای پیشنهادی گوگل درخشان و تند و تیزن. اخیرا حتی بیرون از گوگل هم رنگهای درخشان خیلی طرفدار پیدا کردند.
اینطور که معلومه گرایش به رنگهای درخشان به این زودی ها متوقف نمیشه. برای انتخاب تم رنگی مناسب میتونید از سایتهای MaterialUI و Material Design Palette کمک بگیرید.
مدل عکسهای دو رنگ هم پارسال خیلی استفاده میشدند و انتظار میره که امسال محبوبیتشون بیشتر هم بشه. شاید توجه کرده باشید تو خیلی از تصاویر انگشتی فیلمهای یوتیوب هم استفاده از این مدل عکسها زیاد شده.

بازگشت مدهای قدیمی

برگشت مدهای قدیمی به عصر مدرن داره اتفاق میفته و میتونیم این رو تو برگشت تایپوگرافی، هنرهای پیکسلی و تصاویر دهه 90 و 80 میلادی ببینیم. به خصوص طی سالهای اخیر خیلی از سایتها از این مدلها استفاده کردند.
به این رزومه تعاملی نگاه کنید تا براتون ملموس تر باشه. تو این رزومه ترکیبی از هنر پیکسلی شبهه مدرن با بازی قارچ خور وجود داره. صفحه رو اسکرول کنید تا ببینید.
سایت Sweet Magnolia Gelato هم از تایپوگرافی سبک قدیمی استفاده کرده و با انیمیشن های جذاب به سایت حال و هوای مدرن بخشیده و در عین حال گرمای سبک قدیمی خودشو حفظ کرده.

سینماگراف

به عکسهایی ثابت که حرکت یه عنصر کوچک و ظریف توش تکرار میشه میگن سینماگراف. این سبک هم اخیرا دوباره محبوب شده و اگه به جا ازش استفاده کنید میتونه جذابیت بصری زیادی به سایتتون بده.
سینماگراف هم میتونه به صورت فایل GIF باشه هم به صورت ویدئو. اما در هر دو حالت اگه بخواهیم کیفیت خوبی ارائه بدیم سایز فایل بالا میره. سینماگراف های GIF راحت به بالای 3MB  میرسن و همین باعث میشه خیلی ها ترجیح بدن از ویدئو استفاده کنند.
مثالهای سینماگراف رو میتونید روی Flixel ببینید.

طراحی متریال (مادی)

گوگل از سال 1393 استفاده از طراحی متریال رو شروع کرد. این مدل طراحی بر اساس اصول کاغذ و خودکار درست شده و همون ویژگی هایی رو که استفاده از کاغذ و خودکار داره به دنیای دیجیتال وارد کرده. مثلا به دکمه ها گوشه و سایه میدن که مثل خطوط روی کاغذ قابل لمس باشه.
طی چند سال گذشته طراحی متری مادی محبوبیت زیادی بدست آورده و تم ها و قالب های زیادی برای سیستم های مدیریت محتوا بوجود اومدند. یکی از نقدهایی که به این سبک وارده اینه که سایتهایی که با این سبک ساخته شده­اند خیلی شبیه هم میشن. این هم بخاطر اینه که این سایتها زیادی و سختگیرانه به این سبک چسبیده­اند در حالی که میشه فقط از اصول اصلی و اولیه سبک تبعیت کرد و تو بقیه مسائل تغییراتی بوجود آورد.
من فکر میکنم تو خیلی از کارهای کوچیک وب سایتها شاهد طراحی متریال خواهیم بود. نه تنها اصول طراحی متریال بلکه سبک یا تم واقعی رو هم میبینیم. هر چند احتمال این هم وجود داره که بخش زیادی از حمعیت طراح ها به مخالفت با طراحی مادی رو بیارن.
برای دیدن نمونه این سبک طراحی در سایت میتونید به وب سایت طراحی متریال مراجعه کنید.

تایپوگرافی بزرگ و خلاقانه

پارسال شاهد استفاده خلاقانه ای تو تایپوگرافی بودیم و امسال این روند ادامه داره و مرزها و محدودیت ها رو پشت سر میذاره. انتظار داریم در آینده نوشته ها هم فضای بیشتری از نمایشگر رو بگیرن و هم سبک های خلاقانه تری بکار برن.
سایت Nurture تایپوگرافی رو با فیلم ترکیب کرده و سایت مدرن و باکلاسی درست کرده. روی پس زمینه یه فیلم پخش میشه که فقط از داخل حرف بزرگ N روی صفحه اصلی سایت قابل مشاهده است.
Friends هم یه شرکت طراحی سایت خارجیه که از نوشته های بزرگ و ضخیم استفاده میکنه.

طراحی ماژولار

طراحی ماژولار جدید نیست اما اخیرا داره محبوبیتش بیشتر میشه. تو این سبک از الگوهای چارخونه ای استفاده میشه. گوگل اعلام کرده تعداد جستجو برای طراحی ماژولار از سال 1390 به بعد بیشتر شده و من فکر میکنم امسال هم نرخ استفاده از این سبک مثبت باشه.
Build in Amsterdam و Warwick University با استفاده از طراحی ماژولار تونسته هر عنصر محتوایی رو بهتر به صورت جداگانه نشون بده.

SVG ها

اگه از دست لوگوها و تصاویر JPG و PNG که به سختی میشه اندازشونو تغییر داد خسته شدید باید SVG رو امتحان کنید. البته فرمت SVG برای همه تصاویر مناسب نیست و فقط با تصاویر برداری کار میکنه اما برای تصاویری مثل لوگو عالیه.
SVGها از سال 1377 ظهور پیدا کردند اما هنوز هم با اینکه SVG مناسب­تره میبینیم که فرمت های JPG و PNG استفاده میشن. احتمالا شما هم دیدید که ذکر SVGها بیشتر شده و طبق آماری که گوگل ارائه داده از سال 1393 اقبال عمومی بهشون افزایش پیدا کرده. من فکر میکنم امسال استفاده از این فرمت و ذکرش تو مقالات باز هم بیشتر بشه.
مهمترین دلیلی که نشون میده استفاده از SVG مناسب­تره اینه که میشه بدون در نظر گرفتن اندازه، از عکسها رندر گرفت. همچنین تصاویری که به فرمت SVG هستند حجم کمتری میگیرن و سرعت صفحات میتونه بالا بره.
وقتی مرورگر روی لوگوهایی گه با فرمت SVG ساخته شده­اند زوم میکنه، تصویر اصلا پیکسلی نمیشه و همچنان باکیفیت باقی میمونه.

Flexbox

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

ویدئوهای 360 و واقعیت مجازی

سال 1395، سال واقعیت مجازی بود. هدست­های بازی واقعیت مجازی به بازار اومدند و تعداد سرچ ویدئوهای 360 افزایش پیدا کرد. من فکر میکنم طراح ها تو فکر روشهایی برای بکارگیری فیلم های 360 برای وب سایت ها باشند.
اگه هنوز از واقعیت مجازی اطلاع زیادی ندارید، دارکوب قبلا یه مقاله در مورد واقعیت مجازی و افزوده نوشته که میتونید مراجعه و مطالعه کنید.
یه نمونه واقعیت مجازی وب 360 تعاملی برای فیلم سینمایی Blair Witch ساخته شده که تونسته بیشترین بازدید رو برای هدست واقعیت مجازی در موبایل بدست بیاره.

میکرواینتراکشن­ها

میکرواینتراکشن­ها لحظات خاص و منفردی­اند که کاربر با سایتتون تعامل میکنه. لزوما در مورد وب بکار نمیره اما الآن بحث ما در مورد وب سایته. این لحظات میتونن اقداماتی مثل لایک کردن یه پست، فرستادن یه پیام یا پر کردن فرم باشن. هدف میکرواینتراکشن­ها تو این لحظات اینه که بازخورد و راهنمایی برای کاربر ارائه بده و به این ترتیب تجربه کاربری رو ارتقا بده.
روز به روز به محبوبیت میکرواینتراکشن­ها افزوده میشه و روشهای ارائه بازخورد و راهنمایی به کاربرها هم روز به روز خلاقانه تر میشن. انتظار میره که امسال روشهای متنوع­تری هم ببینیم.
یه نمونه اینتراکشن برای لایک کردن رو میتونید در این صفحه ببینید.

جمع بندی

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