موضوعات مورد علاقه در زمینه¬ی طراحی وب هر سال تغییر می¬کنند. به نظر می¬رسد این موضوعات مدام در حال پیشرفت باشند و درحالیکه هنوز به موضوعات مورد علاقه در سال¬های قبل توجه نشان داده می¬شود، موضوعات جدید آماده¬ی وارد شدند می¬شوند. 
برای این پست، انتخاب¬های خودم از بهترین موضوعاتی که باید در سال 2018 مورد توجه قرار بگیرند را بررسی می¬کنم. بعضی از این موضوعات به تازگی در حال معرفی شدن هستند، و بعضی دیگر از موضوعات چند سالی هست که کم و بیش مورد توجه قرار گرفته¬اند. 
من مطمئن هستم تعداد بیشتری از این موضوعات را در آینده¬ی نزدیک شاهد خواهیم بود. اگر هم می¬خواهید از تمامی استایل¬های طراحی جدید اطلاع داشته باشید، این فهرست بهترین نقطه برای شروع است:
•    موضوعات پر استناد طراحی وب در سال 2014
•    موضوعات پر استناد طراحی وب در سال 2015
•    موضوعات پر استناد طراحی وب در سال 2016
•    موضوعات پر استناد طراحی وب در سال 2017

Microinteractionها کوچک در وب

امروزه استفاده از انیمیشن¬های پایه در وبسایت¬ها کار ساده¬ای است. اما حرکتی نیز به سمت استفاده از انیمیشن-هایی که تمرکزشان بیشتر بر روی کاربر است، به وجود آمده است. این انیمیشن¬ها که microinteraction نامیده می¬شوند، از برنامه¬های گوشی¬های موبایل زاییده شده¬اند و به سمت وب در حرکت هستند. 
اخیرا علاقه به سمت ایجاد پاسخ¬های متحرک به اعمال کاربر رفته است. به این ترتیب، اگر کسی دکمه¬ای را کلیک کرده یا موس خود را روی یک منوی پایین رونده قرار داد، microinteraction پاسخی واقعی متناظر با آن حرکت کاربر ایجاد خواهد کرد. این پاسخ¬ها به صورت اثر جهش  تغییرات در عمق سه-بعدی تصویر و تعدادی اثرهای سایه¬ای برای نمایش دادن و مخفی کردن المان¬ها صورت می¬گیرد.
 
مثال بالا یک انیمیشن UI به دنبال یک hover microinteraction است. 
کاربران¬تان را با سایت¬های دارای انیمیشن و ارائه¬های روی وب تحت تاثیر قرار دهید. 
با Slides مجبور نیستید از یک صفحه¬ی سفید شروع کنید. تمام کاری که باید بکنید این است که المان¬های مورد علاقه¬ی خود را انتخاب کرده و آنها را با هم ترکیب کنید. هر اسلاید طوری طراحی شده است که سه معیار را ارضاء کند: زیبایی¬شناسی، کارایی و قابلیت استفاده. به این ترتیب تمام المان¬ها به صورت یکپارچه با یکدیگر کار کرده و باعث افزایش تاثیرگذاری محتوای شما می¬شوند. 
یک وبسایت طراحی کنید.
این کار با طراحی لی¬اوت metro card انجام می¬شود و در منوی شناور اطلاعات بیشتری در مورد آیتم روی شبکه (grid) نشان داده می¬شود. می¬توانید از آن برای پورتفولیوها، مجموعه¬ی تصاویر و تقریبا هر جایی که تصاویر شبکه¬ای باشد استفاده کنید. 
اما microinteractionها لزوما نباید فنی باشند. به عنوان مثال، این نمونه از Liz Shinn یک فیلد شناور ایمیل را با استفاده از یک افکت انیمیشنی نشان می¬دهد.
 
و به واسطه¬ی مجموعه¬ی اسکریپت¬های متن¬باز که تعداد آنها در حال افزایش است، تقریبا به هر چیزی که نیاز داشته باشید در هر زمان دسترسی دارید. 
هم در CSS3 و هم در جاوااسکریپت امکان کنترل microinteractionها فراهم شده است. پس تنها لازم است کتابخانه¬ای که نیازهایتان را براورده می¬کند را پیدا کنید. جدیدترین اسکریپت مورد علاقه¬ی من  Anime.js است که من برای طراحی هر نوعی از توسعه¬ی microinteraction پیشنهاد می¬کنم. 
 
فقط به صفحه¬ی اصلی آن وارد شده و جایی را کلیک کنید. قطعا انیمیشن خشنی است که نمی¬خواهید آن را روی هیچ وبسایتی داشته باشید، اما نشان از قدرتمند بودن این کتابخانه دارد.

نشان¬های “Featured In”

این موضوعی مورد علاقه است که معمولا من در وبسایت¬های شرکتی و صفحه¬های فروشگاهی می¬بینم. نشان¬ها (بج¬ها – badges) معمولا روی social proof – جایی که شما عنوان می¬کنید چه سابت¬ها و مجله¬هایی وبسایت شما را معرفی می¬کنند – نمایش داده می¬شوند. واضح است که می¬خواهید بهترین نظرات و بررسی¬ها را در مورد سایت خود می¬خواهید، اما اگر وبسایتی که ساختید عالی باشد، گرفتن بازتاب¬های خوب کار سختی نخواهد بود.
 
کمی در سایت GiftRocket به پایین اسکرول کنید تا مجموعه¬ای از بج¬های مربوط به چند ناشر را پیدا کنید؛ Maashable،   The Next Web و Bloomberg و تمام نام¬های یزرگ در محتوای آنلاین. با اضافه کردن این لوگوها بر روی صفحه¬ی اصلی، این وبسایت به بازدید¬کننده¬های خود می¬گوید که وبسایت¬هایی که دستی بر آتش دارند نیز تایید می¬کنند که GiftRocket یک محصول عالی است. موضوع مورد توجه دیگر استفاده از بج¬های “used by” در وبسایت است. 
در این حالت نیز دوباره لوگوهای شرکت¬های بزرگ به بازدیدکنندگان شما می¬گویند کمپانی شما عالی است. اما به جای اضافه کردن بج¬هایی از خبرهایی که راجع به وبسایت شما آمده است، می¬توانید بج¬هایی از شرکت¬های مشهور به عنوان استفاده¬کنندگان از محصول خود استفاده کنید. 
 
در صفحه¬ی اصلی Front  در یک بخش تمامی گواهی¬ها در کنار بج¬ها نمایش داده می¬شوند. 
یعضی از مشتری¬های آنها از Shopify تا MailChimp را در برمی¬گیرند؛ این برندها باعث خاص شدن وبسایت شده¬اند. 
در آینده¬ی نزدیک در وبسایت¬ها به دنبال این نوع بج¬ها در وبسایت¬ها باشید. من احساس می¬منم این روند هنوز شروع هم نشده است.

Diagonalها و Slantها

می¬توانید با CSS3 طراحی¬های عجیب¬ و غریب و زیبایی داشته باشید. حالا ساختن لی¬اوت¬های شبکه¬ای مدرن از همیشه راحت¬تر است و در حال هدایت طراح¬ها به سمت لی¬اوت¬هایی خاص با بخش¬های قطری و کج شده در صفحه¬های وب است. 
من این موضوع را در بسیاری از لی¬اوت¬ها دیده¬ام و احتمالا Stripes  واضح¬ترین آنها باشد. رنگ¬ها و خوط مورب در پس¬زمینه به طور طبیعی به کناره¬های تصویر اشاره دارد. همین موضوع در مورد گرافیک¬ها و آیکون¬ها نیز مصداق دارد. 
روش دیگری که از همین ایده سرچشمه می¬گیرد استفاده از شش¬شلعی¬ها و المان¬های مورب است. 
 
وبسایت قدیمی  2012HDLive  این صفحه را در قسمت "سخنران¬ها" ی خود دارد. من طرح¬های شش¬ضلعی شبکه¬ای را بر روی سایت¬های مختلفی دیده¬ام و بیش¬تر آنها از طراحی شش¬ضلعی متداول استفاده می¬کنند. اگر به مثال¬های بیشتری نیاز دارید، ما به طور مفصل به این موضوع پرداخته¬ایم.

انیمیشن¬های تایپوگرافیک

از microinteractionهای کوچک و رشد فزاینده¬ی آنها در وب صحبت کردم. اما زمینه¬ی دیگری در انیمیشن وب، تایپوگرافی – یا حروف¬نگاری – است.
این زمینه هنوز نوظهور است، اما من معتقم رد سال پیشرو بسیار مورد توجه قرار خواهد گرفت. 
 
اگر با جاوااسکریپت آشنایی داشته باشید، می¬توانید فرم¬های letterform را دستکاری کرده و هرچیزی را که بخواهید را به صورت انیمیشن در بیاورید. وبسایت 3drops  کار جالبی برای متحرک¬سازی متن در صفحه انجام داده است. با حرکت به سمت پایین – اسکرول کردن – مطالب از سابه خارج شده و نمایش داده می¬¬شوند، همچنین افکت¬هایی نیز به صورت ترکیبی با محتوا کار شده که تمیز از آب درامده است.
معمولا اکثرا متن¬ها انیمیشنی را روی صفحه¬¬های اول بزرگ، یا وبسایت¬های استودیوهای طراحی می¬بینم، اما در عین حال فکر می¬کنم این حرکت بر روی وبسایت¬های رستوران¬ها یا کسب¬وکارهای کوچک نیز متداول خواهد شد. 
همچنین، می¬توانید انیکیشن¬های متنی را برای تقریبا همه¬چیز ایجاد کنید.
 
آنها می¬توانند با طراحی¬های مقدمه¬ای توجه کاربران را – مانند سایت Red Collar – جلب کنند. یا می¬توانند برای پاسخ به اعمال کاربر از microintercation ها استفاده کنند. 
 

پشتیبانی بیشتر از صفحه¬های نمایش عریض
من هر سال پست¬های مربوط به "روند¬های طراحی" را پیگیری می¬کنم و طراحی تعاملی همیشه به عنوان یکی از موضوعات مورد علاقه بوده است. معمولا به این دلیل که این روش طراحی ذاتا ماندنی است. 
اما این به این معتی نیست که دسکتاپ از بین رفته است. در مقابل، بیش¬تر دسکتاپ¬ها در حال عریض¬تر شدن هستند و به صفحه¬های نمایش یزرگ¬تر و فضای بیشتری نیاز دارند. 
هوشمندانه خواهد بود اگر به اندازه¬ی سازگار کردن وبسایت خود برای گوشی¬های موبایل هوشمند، برای سازگاری با صفحه¬های دسکتاپ نیز وقت بگذارید. من تعداد کمی وبسایت که با صفحه¬هایی که عریض¬تر از حال معمول – 1440 پیکسل – سازگار هستند را دیده¬ام.
 
به عنوان مثال جدیدترین صفحه¬های پورتفولیو در وبسایت Dribbble همگی دارای فرم شبکه¬ای دلپذیری هستند.
در این طراحی تصاویر کوچک – thumbnail – ستون¬ها وسطرهای انعطاف¬پذیری را تشکیل داده¬اند که تا جایی که بتواند فضا اشغال می¬کند. اسکرین¬شات بالا در صفحه¬ی نمایش من با عرض 1920 پیکسل گرفته شده است، و من احساس می¬کنم Dribbble توانایی پشتیبانی از مونیتورهای حتی بزرگتر این را هم دارد!
به عنوان مثالی دیگر می¬توانیم به سایت شبکه¬ی کارتونی اشاره کنیم که به خوبی در تمام عرض صفحه¬ی من قرار می¬گیرد. 
 
به دلیل سخت¬خوان بودن پاراگراف¬ها طولانی، این لی¬اوت عریض روی وبسایت¬ها به خوبی وبلاگ¬ها یا سایتهای محتوا عمل نمی¬کند.
اما برای وبسایت¬های کاری، شبکه¬های اجتماعی، یا برانامه¬های تحت¬وب – webapp – صفحه¬های عریض بهتر خواهد بود. 

افکت¬های دکمه¬ای سه¬بعدی

دکمه¬های محبوب و ghost نیز ماندنی هستند. هر دوی این دکمه¬ها سال¬هاست که در دسترس هستند و جفتشان نیز با زبان طراحی ماده (Material Design) به خوبی ترکیب می¬شوند. 
و فرم دکمه¬ای که من اخیرا آن را دیده¬ام، دکمه¬ی سه¬بعدی است. در اینجا مرز دکمه از رنگ اصلی دکمه تیره¬تر بوده و در نتیجه ظاهر آن به گونه¬ای است که انگار از صفحه بلند شده است. سپس با کلیلک شما کل دکمه به پایین می¬رود. آکادمی نقاشی دیجیتال یک مثال خوب از این نوع دکمه در صفحه¬ی اصلی خود دارد. 
 
این دکمه¬ها برای جلب توجه بازدید کننده به سرعت از صفحه به سمت بالا می¬پرند، به همین دلیل در اکثر مواقع می¬بینیم که به عنوان CTA استفاده می¬شوند.
افکت¬های سه¬بعدی نیز معمولا تعامل بیش¬تری از کاربران می¬خواهد، اما باید لی¬اوت مناسبی برای این کار داشته باشید.
 
General Assembly دارای افکت سه¬بعدی پر جزییات¬تری است، اما این موضوع را می¬توانید در تمامی ئکمه¬های این سایت مشاهده کنید. 
خودتان را برای افزایش استفاده از این دکمه¬ها در ماه¬های آینده آماده کنید. فکر می¬کنم که یک جایگزین مناسب برای نمودارهای با روند صاف در دنیای طراحی باشند. 

دسترسی واقعی

کار کردن با مشخصاتWAI-ARIA  – مخفف عبارت Web Accessibility Initiative – Accessible Rich Internet Applications – چالش¬برانگیز است. اما نتیجه¬ی نهایی یک وبسایت پر از ویژگی¬های دینامیک قابل دسترس برای همه است.
در اینجا چند المان دینامیک هست مه شابد بخواهید برای داشتن دسترسی کامل روی آنها کار کنید:
•    منو¬های جهت¬دهی رولی؛
•    نمایش تصاویر به صورت اسلاید؛
•    پنجره¬های مودال – Modal windows؛
•    فرم¬های Ajax-powered.
من توسعه¬دهندگان زیادی را دیده¬ام که کدهایی برای Snippet های قابل دسترس ایجاد کرده¬اند و وبسایت¬های زیادی نیز از آنها استفاده کرده¬اند. 
اما به نظر من این روند هنوز در بیشتر وبسایت¬هادر اقلیت قرار دارد. همچنین معتقدم که که هرچه زمان به جلوتر می¬رود عدم توجه به دسترسی سخت¬تر خواهد شد. اگرچه مثال خاصی برای آوردن ندارم، اسکریپت¬هایی را که برای داشتن دسترسی کامل و استفاده¬ی آسان طراحی شده¬اند و ممکن است امتحانشان کنید را آورده¬ام:
•    پنجره¬ی مودال قابل دسترسی؛
•    پلاگین مودال با jQuery و HTML؛
•    پلاگین داده¬بردار قابل دسترسی برای Bootstrap.

لی¬اوت¬های Flexbox و CSS شبکه¬ای

انگار همین دیروز بود که مشخصات CSS3 منتشر شد.  از آن زمان تا حالا ویژگی¬های جدیدی به این مشخصات اضافه شده¬اند و پیشرفت¬های زیادی در زمینه¬ی توسعه¬ی لی¬اوت پدید آمده است. 
دو ویژپی¬ای که به نظر من در سال 2018 رو به رشد هستند، Flexbox و شبکه¬ی CSS هستند.
 
با flexbox شما در یک مدل جعبه¬ای انعطاف¬پذیر کار می¬کنید که جعبه¬های داخلی به صورت کاملا فیت در جعبه¬های بیرونی خود – بر اساس قوانینی که در CSS تعریف می¬کنید – محاط شده¬اند.
این موضوع توسعه¬دهنده را قدرتمند تر کرده و او را کاملا از شناورها – floatها – در بعضی لی¬اوت¬ها بی¬نیازمی-کند.
به همین ترتیب، ویژگی شبکه در CSS (و ویژگی¬های مرتبط دیگر) کدنویسی لی¬اوت¬های شبکه¬ای کامل با ویژگی¬های دینامیک را تسهیل می¬کند.
 
موضوعات قابل پرداختن و قابل یادگیری زیادی در هر دوی این ویژگی¬ها وجود دارد. اما به نظر من حقه¬های CSS راهنماهای بسیار عالی¬ای برای flexbox و شبکه¬ی CSS هستند. 
منتظر موضوعات بیشتر باشید!
پیش¬بینی اینکه چه موضوعاتی در سال 2018 مورد علاقه خواهند بود کار سختی است؛ اما من همیشه منتظر تغییرات سال تا سال در طراحی وب هستم  تا سنجه¬ی خلاقانه¬ای برای سال¬های پیشرو داشته باشم. 
اینها فقط پیش¬بینی¬های من هستند اما مطمئنم چیزهای بیشتری را خواهیم دید. اگر شما هم پیشنهاد دیگری دارید می¬توانید آن را در میان بگذارید.
تنها چیزی که می¬دانم این است که فارغ از اینکه چه موضوعی در 12 ماه اینده داغ خواهد شد، می¬توان گفت بازار طراحی تضمینا تغییر خواهد کرد.