سال جدید، ترندهای جدیدی را به عرصه طراحی وب وارد می‌کند. با اینکه ترندهای سابق همچنان پابرجا هستند؛ اما به نظر می رسد روندهای جدید و پیشرفته‌تری نیز فراگیر می‌شوند. در این پست، من بهترین ترندهای طراحی وب در سال ۲۰۱۸ را انتخاب کردم تا نگاهی به آن‌ها بیندازیم.

بعضی از این‌ روندها کاملا نوظهور هستند. در حالی که بعضی دیگر، در چند سال گذشته، به وجود آمده و رشد کرده اند.

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

تعاملات کوچک در وب

این روزها، اضافه کردن انیمیشن‌های پایه‌ای به وب سایت‌ها کار نسبتا راحتی است. اما اکنون، حرکت به سمت انیمیشن‌های متمرکز بر کاربر (تعاملات کوچک – میکرو‌تعاملات) آغاز شده است. این واکنش‌ها که از اپلیکیشن‌های موبایل آغاز شده بود، اکنون راهش را به سمت طراحی وب باز کرده و به سرعت فراگیر شده است.

این تعاملات مانند پاسخ متحرک به عملکرد کاربر است. مثلا اگر کسی بر روی دکمه‌ای کلیک کند و یا از روی یک منوی کشویی عبور کند، تعاملات ما باید به شیوه‌ای واقعی پاسخ دهد.

این پاسخ می تواند اثرات پرشی (bouncing effects)، تغییر در عمق ۳D صفحه، انواع اثرات محو شدن (fading) منحصر به فرد برای نشان دادن و پنهان کردن عناصر صفحه باشد.

تعاملات کوچک در وب

مثال بالا یک انیمیشن UI زیبا به همراه واکنش شناوری (hover) است که در طرح «کارت مترو»  استفاده شده و هنگام شناوری، اطلاعات بیشتری راجع به آیتم مورد‌نظر نشان می دهد. از این طرح می توانید در قسمت نمونه کارها، گالری تصاویر و یا هر قسمت دیگری که تصاویر شبکه ای (grid) دارند، استفاده کنید.

اما نیازی نیست که میکروتعاملات فنی باشند. برای مثال این عکس متعلق به «لیز شین»، یک فیلد ایمیل شناور را توسط یک افکت سفارشی نشان می دهد.

ایمیل شناور

اسکریپت‌ها:

با بزرگ شدن مجموعه اسکریپت‌های متن‌باز، شما تقریبا به هر چیزی که نیاز داشته باشید، دسترسی دارید.

CSS3 و JavaScript هر دو ابزارهایی را برای کنترل میکروتعامل‌ها ارائه می‌دهند. در نتیجه، تنها کاری که باید بکنید، پیدا کردن کتابخانه مناسب برای نیاز‌هایتان است.

جدیدترین اسکریپت مورد علاقه‌ی من، Anime.js است که شدیدا آن را برای توسعه‌ی انواع میکروتعاملات توصیه می کنم.

Anim.js

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

نشان‌های (Badges) “ویژه”:

این ترندی است که من معمولا در وبسایت‌های شرکتی و صفحات اصلی فروشگاه‌ها می بینم.

نشان‌ها اغلب نقش تأیید اجتماعی را بازی می کنند و نشان می‌دهند که بلاگ‌ها و سایت‌های دیگر درباره سایت شما چه می‌گویند.

واضح است که شما می‌خواهید بهترین بررسی‌ها و نظرات را نمایش دهید. اما اگر چیز ویژه‌ای ساخته باشید، این مسئله چندان سخت نخواهد بود.

پاورقی سایت giftrocket

اگر در سایت giftrocket کمی پایین بروید، مجموعه‌ای از نشان‌های ناشران مهم را خواهید دید.

Mashable، The Next Web، Bloomberg و تمام نام‌های بزرگ در محتوای آنلاین. با اضافه کردن این لوگوها در صفحه اصلی‌شان، به مخاطب نشان می‌دهند که GiftRocket یک محصول عالی است؛ عمدتا به این دلیل که دیگر وب سایت های معتبر چنین می گویند.

یک جایگزین برای این ترند، اضافه کردن نشان ویژه‌ی «استفاده شده توسط» است.

دوباره، این‌ها فقط لوگوی برندهای بزرگ است که به مردم ثابت کند شرکت / محصول شما خوب است. اما به جای اضافه کردن نشان‌های پوشش خبری و نقل قول‌ها، می‌توانید لوگوی شرکت‌های بزرگی که از محصول شما استفاده می کنند را داشته باشید.

front app testimonial badges

به صفحه اصلی Front نگاه کنید. لیستی از توصیفات را همراه با نشان‌های برجسته فهرست کرده است.

بعضی از مشتریان آن‌ها از Shopify گرفته تا MailChimp در نگاه مخاطب، واقعا تغییر ایجاد می‌کنند.

عناصر قطری و شیب‌دار

شما می‌توانید چیزهای حیرت‌آوری با CSS3 بسازید. ساخت طرح‌های شبکه‌ای مدرن از هر زمان دیگری آسان تر شده و این مسئله، طراحان را به سوی طرح های قطری و بخش‌های شیب‌دار سوق می‌دهد.

stripe homepage diagonal design

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

تکنیک دیگری که از همین ایده پیروی می‌کند، استفاده از شش‌ضلعی‌ها و عناصر مورب دیگر است.

hdlive speakers diagonal hexagon

سایت قدیمی HD Live این ویژگی را در بخش سخنرانان خود دارد. من طرح های شش‌ضلعی و لانه‌زنبوری را در سایت‌های مختلفی دیدم و بیشتر آن‌ها از روند طراحی قطری پیروی می کنند.

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

بالاتر در مورد میکروتعاملات و رشد سریع آن‌ها در فضای وب صحبت شد. اما حوزه‌ی دیگری در زمینه‌ی انیمیشن‌های وب تایپوگرافی است.

این مورد هنوز در ابتدای راه است. ولی احساس من این است که در سال جاری، غوغا خواهد کرد.

digital product studio typography animation

اگر شما با جاوا اسکریپت آشنایی داشته باشید، می‌توانید هر گونه که بخواهید، متن‌ها را پویا کنید.

سایت ۳drops کار بسیار ساده‌ای را برای متحرک کردن متن در صفحه انجام می‌دهد.

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

پشتیبانی بیشتر از صفحات نمایش بزرگ

هر سال که به نوشته‌های «ترندهای طراحی» نگاه می‌اندازم، طراحی ریسپانسیو (واکنش‌گرا) جزء ثابت است. به نظرم دلیلش این است: آمده که بماند!

اما به این معنی نیست که دسکتاپ رفتنی است. برعکس، اکثر دسکتاپ‌ها با نمایشگرهای بزرگتر و فضای بیشتر عرضه می‌شوند.

اهمیت طراحی سایت برای دسکتاپ‌ها به اندازه‌ی طراحی برای گوشی‌های هوشمند است و توجه به این مسئله نشانه‌ی هوشمندی است. من سایت‌هایی را دیده‌ام که حتی برای صفحاتی بزرگ‌تر از عرض معمول (۱۴۴۰px) طراحی شده‌اند.

dribbble layouts portfolio grid

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

این طرح اساسا می‌تواند تمام فضا را با تصاویر بندانگشتی (thumbnail) در ستون‌ها و ردیف‌های قابل انعطاف پر کند.

اسکرین‌شات بالا، روی مانیتور ۱۹۲۰px من گرفته شده است. ولی احساس من این است که دریبل حتی صفحات بزرگتر را نیز پشتیبانی می‌کند.

یکی دیگر از مثال‌های خوب، سایت Cartoon Network است که عرض نسبتا خوبی از صفحه را پر کرده است.

cartoon network play games

این مدل طرح‌های عریض برای بلاگ‌ها و یا سایت‌های محتوایی به خوبی کار نمی‌کنند. چون خواندن پاراگراف‌های طولانی، سخت تر می‌شود.

اما برای سایت‌های کسب‌وکار، شبکه‌های اجتماعی و یا اپلیکیشن‌های تحت وب، هر چه عریض‌تر، بهتر!

افکت‌های دکمه‌ی ۳بعدی

دکمه‌های تخت و حالت روح که بسیار هم محبوب هستند، اینجا هستند که بمانند. این دکمه‌ها برای چندین سال بوده‌اند و به خوبی با زبان طراحی گوگل ترکیب شده‌اند.

یکی دیگر از سبک‌های دکمه که اخیرا زیاد دیده می‌شود، دکمه‌ی ۳ بعدی است.

این دکمه‌ها به این صورت طراحی می‌شوند که رنگ مرز (border) پایینی تیره‌تر از رنگ اصلی دکمه است. در نتیجه طوری به نظر می‌رسد که دکمه از سطح صفحه بالاتر است. سپس وقتی روی دکمه کلیک می‌شود، کل دکمه پایین می‌آید.

digitalpainting academy

آکادمی نقاشی‌های دیجیتال یک مثال خوب از این نوع دکمه‌ها را در صفحه‌ی اصلی خود دارد.

اغلب اوقات این دکمه‌ها به عنوان CTA (Call to Action – فراخوانی برای اقدام) مورد استفاده قرار می‌گیرند. زیرا آن‌ها با حرکت‌های بی‌وقفه، سریعا توجه کاربران را به خود جلب می‌کنند.

جلوه‌های ۳ بعدی عموما کاربران را به انجام تعامل بیشتر تشویق می‌کنند. اما برای این‌که این کار درست انجام شود، لازم است که طرح‌بندی (layout) درستی داشته باشید.

general assembly homepage

سایت مجمع عمومی دارای اثر ۳ بعدی ملایم‌تری است. ولی هنوز هم می‌توان در تمام دکمه‌ها شاهد این اثر بود.

منتظر این دکمه‌ها در ماه‌های آینده باشید. من فکر می‌کنم که آن‌ها جایگزین مناسبی برای ترند دکمه‌های صاف، در سراسر جهان طراحی هستند.

دسترسی‌پذیری واقعی

کار با سایت WAI-ARIA specs (به معنی ابتکار دسترسی به وب – برنامه‌های کاربردی قابل دسترس برای اینترنت) یک چالش واقعی است. اما نتیجه‌ی نهایی یک سایت پر از المان‌های پویا است که برای همه قابل دسترس است.

در اینجا برخی از المان‌های پویا لیست شده‌اند که می‌توانید با آن‌ها کار کرده و سایت خود را به طور کامل قابل دسترس کنید:

منوهای ناوبری کشویی

اسلاید عکس

پنجره‌های مودال (Modal)

فرم‌های Ajax

هر روزه توسعه‌دهندگان بیشتری اقدام به انتشار چنین قطعه کدهایی می‌کنند و متقابلا سایت‌های بیشتری هم از آن‌ها استفاده می‌کنند.

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

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

Flexbox و چیدمان‌های شبکه‌ای CSS

انگار همین دیروز بود که مشخصات CSS3 منتشر شد. از آن زمان تعداد زیادی خصوصیت جدید به همراه پیشرفت‌های بزرگی در زمینه‌ی توسعه‌ی چیدمان‌ها به مشخصات CSS اضافه شده است.

دو ویژگی که پیشبینی می‌شود در سال ۲۰۱۸ رشد زیادی داشته باشند عبارت‌اند از flexbox و چیدمان‌های شبکه‌ای (Grid layouts).

flexbox

با flexbox شما در یک مدل جعبه منعطف کار می‌کنید که در آن، نگهدارنده‌های داخلی در داخل نگهدارنده‌ی اصلی خود قرار دارند؛ همه‌ی این‌ها بر اساس قانون‌هایی که شما در CSS تعریف می‌کنید.

این مسئله، در برخی طراحی‌ها به طور کامل نیاز به float (شناوری) ها را از بین می‌برد و قدرت بیشتری به توسعه‌دهنده می‌دهد.

به همین ترتیب، خاصیت شبکه‌ای CSS (و خواص مربوطه) کد کردن طرح‌بندی شبکه‌ای کامل با ویژگی‌های پویا را بسیار ساده‌تر می‌کند.

css-grid-layouts

چیزهای زیادی درباره‌ی هر دوی این ویژگی‌ها وجود دارد که باید یاد گرفت. اما من فکر می‌کنم سایت CSS-Tricks با این دو آموزش درباره‌ی فلکس‌باکس و شبکه کار فوق‌العاده‌ای انجام داده است.

نگاهی به بیشتر!

واقعا سخت است که بگوییم کدام ترندها سال ۲۰۱۸ را خواهد ساخت. اما من دوست دارم که همیشه تغییرات سالانه را نگاه کنم تا سنجش دقیق‌تر و خلاقانه‌تری نسبت به تغییرات سال‌های پیشرو داشته باشم.

اما با این وجود این‌ها فقط پیش‌بینی‌های من هستند. اگر شما هر گونه پیشنهاد دیگری دارید، راحت باشید و افکار خود را با ما به اشتراک بگذارید.

تمام آن‌چه من می‌دانم این است که بدون توجه به این‌که کدام ترند در ۱۲ ماه آینده رشد می‌کند، می توان گفت که صنعت طراحی وب برای تغییر تضمین شده است.