اخبار و مطالب - 22 روند الهام بخش طراحی وب برای سال 2022

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

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

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

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

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

در اینجا برخی از گرایش‌های طراحی وب وجود دارد که پیش‌بینی می‌کنیم در سال آینده تأثیرگذار باشند. 
1. مینی سایت های لذت

طنز می تواند اشکال مختلفی داشته باشد و ساختن وب سایتی که خنده را برانگیزد همیشه سرگرم کننده است. چرا با ساخت خود کمی سرگرم نمی شوید؟

در روزهای اولیه پیکسار ، استودیو به انیماتورها زمان داد تا در کنار هر فیلم بلندی که تولید می کردند ، یک فیلم کوتاه بسازند. این فیلم‌های کوتاه فرصتی خلاقانه برای همه بود، زمانی برای انیماتورها که آزادتر و بازیگوش‌تر بدون فشار وارد بر فیلم‌های بلندشان باشند. آنها همچنین در نهایت به تولید بسیاری از تکنیک های جدید که زمینه انیمیشن را به جلو سوق داد. توسعه دهندگان وب در حال کشف هستند که می توانند همین کار را با وب سایت ها انجام دهند.
پس زمینه مشکی با دو فیگور کارتونی نارنجی که در آغوش گرفته اند و لبخند می زنند. این دو بدن به صورت نارنجی جامد از سر شروع می شوند. رنگ نارنجی به تدریج به غروب با خورشید در مرکز دو بدن تبدیل می شود، یک سوم پایین بدنه های کارتونی شامل کوه های ارغوانی در منظره ای غبارآلود با بوته های سبز کوچک است.
Day & Night ، کوتاهی از Pixar در سال 2010، بر رویکردهای انیمیشنی که در ویژگی‌هایی مانند Inside Out و Soul استفاده می‌شود، تأثیر گذاشت.

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

می‌توانید به روش‌های مختلفی آزمایش کنید: با تنظیم یک طراحی UX عمداً بازیگوش ، یا براندازی عمدی انتظارات (اما مطمئن شوید که هنوز هم به‌طور قابل دسترس می‌سازید !). طنز را نه تنها در کپی و تصاویر، بلکه به ناوبری، منوها و تعاملات سایت بیاورید. ظریف باش کاری کنید که به نظر برسد یک سایت جدی است تا زمانی که اینطور نباشد. این فرصتی است برای ایجاد سایتی که به روش های غیرمنتظره عمل می کند. یک سایت بازاریابی به سبک تخم مرغ عید پاک برای یک هدف حرفه ای می تواند کار کند اگر به خوبی اجرا شود.

Guns 2 Swords یک سایت کوچک/شرکتی با شکوه کامل در دهه 80 Dungeons & Dragons است که طعم ماجراجویی خود را انتخاب کنید . این توسط MSCHF ایجاد شد ، گروهی که جایی بین هنرمندان gonzo و سازندگان برنامه های تبلیغاتی قرار دارد تا یک سرویس واقعی باشد. بازدیدکنندگان می‌توانستند تفنگ‌های خود را بفرستند تا توسط آهنگری در سطح جهانی به شمشیر تبدیل شود. واقعا حماسی
پس زمینه سیاه با خطوط سفید که سه ستون را از هم جدا می کند. ستون سمت چپ دارای متن "مطالعه فرهنگ" با تصویری از دسته شمشیر است که با رعد و برق احاطه شده است. ستون وسط دارای متن "وارد اسلحه خانه" و "Guns2Swords" با گرافیک سه بربر است که بزرگترین آنها شمشیر در دست دارد. ستون سمت راست دارای متن "شمشیر بگیر" با تصویر تفنگ ذوب است.

Blue Check Homes رویکرد مخالف ایجاد یک وب سایت "جدی" کاملاً قانونی را در پیش گرفت. چیزی که به عنوان یک شوخی توییتری توسط دانیل باسکین شروع شد، ممکن است به یک مینی بیزینس واقعی تبدیل شود که مدال‌های «چک آبی» (مانند آنهایی که در حساب‌های توییتر تأیید شده ) برای خانه‌های افراد برجسته می‌فروشد.
تصویر وب سایت Blue Check Homes، لوگو یک نماد خانه آبی با علامت تیک است. شامل عکس خانه با نشان بزرگ با علامت تیک آبی است.
2. شکار لاشخورهای مبتنی بر وب

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

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

چند ایده برای سرنخ:

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

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

آژانس بازاریابی ThreeSixtyEight یک شکار لاشخور را انجام داد تا مکان شرکت خود را برای تیمش فاش کند. این یک فضای مرموز با موسیقی و تنظیم کدورت در اطراف مکان نما ایجاد کرد که بازدیدکننده می تواند از آن برای نشان دادن بخش های انتخابی صفحه در حین جستجوی سرنخ ها استفاده کند.
تصویری با پس‌زمینه سیاه و متن «برو یک جرقه را 01/08 پیدا کن» و دایره‌ای با گرادیان که با آبی در بالا شروع می‌شود و به قرمز تبدیل می‌شود.
3. تجربیات برنامه مانند

جرمی بیت، یکی از بنیانگذاران ThreeSixtyEight ، قویاً معتقد است این نوع سایت های کوچکتر و متمرکز بر تجربه، آینده طراحی وب هستند. او توضیح می‌دهد: «تجربه‌ی وب جلویی که از نقطه نظر طراحی واقعاً بیش از حد است، یک روش کاملاً جدید برای استفاده از وب است که قبلاً وجود نداشته است. این یک تجربه برنامه مانند است. برای من، این فرصت در حال حاضر است.» دنیا به اپلیکیشن‌ها عادت کرده است، جایی که تعامل، انیمیشن و تجربه‌های پویا عادی هستند. گام بعدی منطقی آوردن آن انرژی به وب سایت ها و ایجاد تجربیات منحصر به فرد بیشتر در آن است.

برخی تصور می کنند که ما به زمانی برمی گردیم که سایت ها خودکفا، باطنی و کنجکاو بودند. اما ابزارهای جدید برای ساخت سایت، مانند بدون کد ، طراحی های پویا و متمرکز بر تعامل را به طور قابل توجهی آسان تر می کند. ThreeSixtyEight حتی یک مرحله کامل متمرکز بر طراحی تعامل را به فرآیند توسعه خود اضافه کرد.
4. وب سایت های تک صفحه ای

گاهی اوقات مؤثرترین سایت کم پیچیدگی ترین سایت است. ما شاهد محبوبیت روزافزون وب سایت تک صفحه ای هستیم که منوها و ناوبری را به نفع پیمایش ساده پیمایش نمی کند. سایت های تک صفحه ای زمانی بهترین کار را دارند که موضوع آنها محدودتر باشد، مانند نمونه کارها یا ارائه یک ایده واحد.

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

این وب سایت برای ایندی هریس (ساخته شده توسط جردن هیوز) یک رزومه دیجیتال است. به سوژه اش اجازه می دهد در کانون توجه قرار گیرد. این باعث می‌شود که بیننده‌های معمولی کل رزومه را بخوانند، زیرا همه چیزهایی که نیاز دارند از قبل وجود دارد.
وب سایت ایندی هریس پس زمینه رژگونه. سمت راست دارای یک دایره بژ بزرگ است که عکسی از هند در داخل آن قرار دارد. نور رنگین کمان ظریف در لبه بیرونی پایین دایره. سمت چپ متن "سلام، من ایندی هریس هستم."

سایت نمونه کارها Joshua Kaplan پیچیده تر است اما به همان اندازه موثر است. او از ساختاری ثابت استفاده می‌کند تا بیننده گم نشود، عناصر حواس‌پرتی را کاهش دهد (بدون پس‌زمینه، تصاویر بزرگ، یا حرکت)، و باعث می‌شود سایتش کمی شبیه به وب‌سایت را با خط و نشان نماد کپی‌رایت به عقب برگرداند.
وب سایت جاشوا کاپلان بخش بالایی متن است: Joshua Kaplan © 2021 به همراه یک بیوگرافی مختصر. بخش میانی متن بزرگ "پروژه های انتخاب شده" است. بخش پایین 4 پروژه است.
5. سایت هایی با حس قوی مکان

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

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

گریس پاتر از این تصویر اقیانوس زیبا به عنوان صفحه فرود خود استفاده می کند، حتی اگر مستقیماً به کار او مرتبط نباشد. با این عکس، او وب سایت خود را در ریشه های نیوزیلندی خود قرار می دهد و بازدیدکننده را به دنیای خود می آورد.
وب سایت گریس پاتر. عکس پس زمینه: آسمان آبی روشن با ابرهای سفید، فردی که در اقیانوس فیروزه ای ایستاده است. متن: GRACE POTTER گرافیک و طراحی دیجیتال
6. نقوش آرت دکو

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

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

هنر دکو عناصری از دنیای طبیعی را با مدرنیته عصر ماشین ترکیب کرد - خطوط پررنگ، تقارن، سادگی و تکرار بی‌تنوع عناصر. ببینید که چگونه شکل‌های این بال سنجاقک به الگوهای منظم هنر دکو کلاسیک ساختمان کرایسلر تبدیل می‌شوند.
تصویر سمت چپ: عکس بزرگ شده بال سنجاقک. تصویر سمت راست: بالای ساختمان کرایسلر.

به نظر می رسد سبک هنری آلگریا که BUCK در سال 2017 برای فیس بوک طراحی کرد، نشانه های زیادی از تصویر آرت دکو از چهره های انسانی گرفته است. خطوط تمیز و منحنی، صورت های بیضی، جزئیات کاهش یافته و تناسبات اغراق آمیز، همگی این سبک هنری را به یاد می آورند . شاید نوع جدیدی از طراحی فیگور مدرنیستی، مانند این قطعه خیره کننده توسط تصویرگر رودلفو ریس ، بتواند نسخه به روز شده این روند باشد.
تصویرسازی توسط رودولفو ریس. پس‌زمینه سیاه با پرتره نمایه شخصی که در سایه‌های سفید، خاکستری و سیاه کشیده شده است. شخص با موهای بال پرنده به سمت راست روبروست.
7. تصاویر کمتر در هیروها

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

این چهار وب‌سایت از Humain ، SVZ ، Heyday و RADAR به‌طور باورنکردنی متفاوت هستند، اما هر کدام از طرح‌بندی، تایپوگرافی، رنگ و شکل برای برقراری ارتباط هویت برند قوی و منحصربه‌فرد استفاده می‌کنند. چشم پوشی از تصاویر نیز کمی رمز و راز ایجاد می کند و بازدیدکنندگان را مجذوب می کند تا دریابند که چه چیز دیگری فراتر از بخش قهرمان وجود دارد.
وب سایت Humain با پس زمینه نارنجی خامه ای. متن نارنجی تیره: روشن ترین آینده خود را تصور کنید و برای IT بسازید.
وب سایت SVZ. پس‌زمینه سیاه با متن سفید «ما یک وب‌سایت با عملکرد عالی برای شما از طریق فرآیندی که با دقت طراحی شده‌ایم ایجاد خواهیم کرد» در نیمه بالایی تصویر. نیمه پایین دارای اشکال تتریس مانند در رنگ های روشن است.
وب سایت HeyDay. پس زمینه سفید با متن سیاه: "کدهای تقلب برای حافظه شما." ایموجی های رنگارنگ دستی که در سراسر text.r استفاده می شوند
وب سایت رادار پس زمینه خاکستری روشن. رسم پوینتیلیسم یک کره.
8. تایپوگرافی بزرگ

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

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

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

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

وب سایت Dillinger از فونتی استفاده می کند که وقتی مکان نما روی متن قرار می گیرد وزن آن تغییر می کند. توجه داشته باشید که کوچک شدن متن در برابر پس‌زمینه سیاه، متن انتخاب‌شده را خواناتر می‌کند، که یک افزودنی عالی برای قابلیت استفاده است. اندازه مکان نما اغراق آمیز نیز باعث می شود تا سایت غوطه ورتر شود. طراح تیم ریکز به اندازه کافی مهربان بود تا یک نسخه شبیه سازی شده از این سایت را برای هرکسی که می خواهد ببیند این افکت چگونه ایجاد شده است بسازد.
پس زمینه سیاه با متن سفید بزرگ "مدیران درباره اخبار"
10. طراحی حرکت مسئولانه 

اکنون که در مورد تعامل صحبت می کنیم، زمان آن رسیده است که در مورد طراحی حرکت مسئولانه صحبت کنیم، که می بینیم شروع به تبدیل شدن به یک عمل استاندارد شده است. در حالی که حرکت یکی از جنبه های جذاب طراحی وب است، نه تنها می توان افراط کرد، بلکه با ایجاد بیماری حرکت به افراد آسیب می رساند. بیماری حرکت بسیار رایج است و باید از انیمیشن‌هایی مانند مقیاس‌گذاری با ماوس، جلوه‌های اختلاف منظر یا پیمایش با تغییر صفحه (همچنین به عنوان scrolljacking شناخته می‌شود) اجتناب شود.

از حرکت می توان به روش های ظریف و مسئولانه استفاده کرد. کوری موئن، یکی از طراحان ارشد برند در Webflow، ضمن در نظر گرفتن تنظیمات «کاهش حرکت» در MacOS، جزئیاتی را در مورد نحوه ساختن توضیح داد. 

    برای کسانی که حرکت کاهش‌یافته را ترجیح می‌دهند:

    از جستجوی رسانه CSS با حرکت کاهش‌یافته استفاده کنید تا SVGهای متحرک را مخفی کنید و زمانی که شخصی تنظیمات سیستم عامل «کاهش حرکت» را روشن کرده است، یک SVG کامل و ثابت از تصویر را نشان دهید!

    نمونه کد در اینجا: https://t.co/inMvJCnj15

    3/4 pic.twitter.com/oNhboHsdl1
    — کوری موئن (@CoreyGMoen) 28 ژوئیه 2021 

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

آموزش مرتبط: چگونه برای کسانی که حرکت را ترجیح می دهند و کسانی که این کار را نمی کنند بسازیم
11. تصویر کلاژ

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

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

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

خلاقیت خود را در وب آزاد کنید

از پلتفرم توسعه بصری Webflow برای ساخت وب‌سایت‌های کاملاً سفارشی و آماده تولید - یا نمونه‌های اولیه با وفاداری بالا - بدون نوشتن یک خط کد استفاده کنید.
به صورت رایگان شروع کنید
به صورت رایگان شروع کنید
12. تصاویر انتزاعی

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

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

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

گرادیان ها در حال حاضر محبوب هستند، اما با دانه های اضافه شده، جلوه ای کاملا متفاوت ایجاد می کنند. یک گرادیان عالی نرم و مدرن است و به اشیاء درخششی آینده‌نگر یا حسی براق و تکنولوژیکی می‌دهد. دانه یک طرح را آسیاب می کند، به آن بافت می بخشد و به آن کمک می کند طبیعی تر شود.

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

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

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

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

وب سایت آژانس آپارت از خطوط بسیار ظریف استفاده می کند. اثر تکنیکی، تیز و مینیمالیست است. طراحی گرافیکی و انتخاب رنگ های نارنجی، مشکی و مایل به یاد جنبش هنر مینیمالیستی دهه 1960 است. حرکت خطوط افقی روی اسکرول نیز لمس خوبی است.
پس‌زمینه نارنجی تیره با طراحی خطی بسیار ریز از دایره‌های همپوشانی

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

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

یک راه جالب برای جدا کردن یک طرح، طرح بندی صفحه نمایش تقسیم شده است که اخیراً بیشتر متوجه آن شده ایم. طرح دوگانه، کنتراست طراحی، علاقه بصری و جداسازی طبیعی محتوا را به شما می دهد. همچنین یک بهانه عالی برای بازی با رنگ است.
طرح بندی صفحه تقسیم شده - پس زمینه سفید سمت چپ با متن سیاه "var!". پس زمینه سبز لیمویی سمت راست با متن مشکی "but!"

var! - اما! وب سایت جشنواره (ساخته شده توسط ONEIGHT7) چرخش جالبی را روی این طرح با فوتر ثابت، اسکرول خیمه ای و جهت های اسکرول متضاد در بخش های راست و چپ قرار داده است. صفحه‌نمایش تقسیم‌شده در اینجا بیننده را لنگر می‌اندازد، بنابراین می‌توانید حرکات زیادی را بدون گم شدن آنها انجام دهید.
پس زمینه قرمز-نارنجی در دو سوم بالا، یک سوم پایین با یک بنر سیاه با متن سفید از هم جدا شده است، رنگ پس زمینه به زرد تغییر می کند.
16. شکل گیری شیشه ای بیشتر

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

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

تایلر گالپین برای ایجاد یک لوگوی مسحورکننده با حرکت از شیشه‌مورفیسم استفاده می‌کند.
پس زمینه سفید با متن سیاه و سفید بزرگ "طراحی تجربیات زیبا و استراتژیک" در کنار لوگوی سبک شیشه ای در سایه های بنفش.

Stefan Velikov در این پروژه Webflow قابل شبیه‌سازی از شکل‌شکل شیشه‌ای استفاده می‌کند تا تصویر کارت اعتباری را شناور کند و از صفحه خارج شود.
کارت اعتباری سبک Glassmorphism در زمینه آبی روشن.
17. نورمورفیسم کمتر

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

Neumorphism به دلیل تفاوت آن با اکثر طراحی های وب ظاهر می شود، اما گاهی اوقات چیزها به روشی استاندارد ساخته می شوند زیرا فقط بهتر کار می کنند. دلیل اینکه ما "نومورفیسم کمتر" را به عنوان یک روند انتخاب کردیم ساده است - سبک برای دسترسی وحشتناک است .

فقدان کنتراست و تمایز واضح، پیمایش سایت‌های این سبک را برای افرادی که بینایی کمتری دارند، سخت می‌کند، و عناصر سایه‌دار، تشخیص اینکه کدام دکمه را فشار می‌دهند، برای کاربر سخت می‌کند. CDC تعداد آمریکایی‌های مبتلا به اختلال بینایی را بیش از 3.22 میلیون نفر اعلام کرده است، اما طراحی در دسترس فقط برای افراد دارای معلولیت مهم نیست. همه در برخی موارد با مشکلات دید موقعیتی مواجه می شوند، مانند محیط های روشن که با دید صفحه تداخل می کنند، و نئومورفیسم در چنین محیط هایی به سختی قابل خواندن است. ‌

پنجاه و سه میلیون نفر تنها در ایالات متحده با معلولیت زندگی می کنند، و همه در مقطعی از زمان ناتوانی های موقعیتی را تجربه می کنند. دسترسی بسیار بیشتر از یک روند است - این یک ضرورت است و همیشه باید در هنگام طراحی برای وب مورد توجه قرار گیرد.
18. کپی شامل

ما متوجه شده‌ایم که وب‌سایت‌های بیشتری در طراحی خود به سمت محتوا و زبان فراگیر حرکت می‌کنند. این باید یک هنجار باشد، و امیدواریم که این یک تغییر دائمی به سمت آگاهی جهانی تر از تأثیر زبان باشد. کپی فراگیرتر وب را به مکانی دلپذیرتر و برای افراد بیشتری در دسترس تر تبدیل می کند.

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

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

رویکرد دیگری که می‌بینیم به یک استاندارد تبدیل می‌شود ، طراحی وب بی‌طرفانه جنسیتی است ، که در حال حاضر شاهد استفاده از آن در سطح جهانی هستیم. اولین قدم واضح، کنار گذاشتن جزئیات جنسیتی غیرضروری است که قبلاً همه جا وجود داشت - سایت‌های مراقبت شخصی صورتی تهاجمی یا تم‌های فوق‌العاده مردانه-گرگ آتش-و-چاقو برای تجهیزات کمپینگ. زنان ابزارهای برقی می خرند و مردان لوازم مراقبت از پوست را می خرند، اما به راحتی می توان بدون فکر کردن به فرضیات اجتماعی پیشفرض کرد.

ارائه چندین گزینه جنسیت و ضمایر در فرم ها و منوهای کشویی استاندارد شده است. 42 درصد از آمریکایی‌ها اکنون فکر می‌کنند گزینه‌های متعددی باید گنجانده شود. بهتر از این، زمانی که وب‌سایت‌ها نیاز مبرمی به گنجاندن آن گزینه‌ها ندارند، می‌توانند هر دو را به طور کامل حذف کنند، همانطور که Snapchat ترجیح داده است.
نماگرفت گزینه‌های انتخاب جنسیت Google: زن، مرد، ترجیح می‌دهم نگوییم» به همراه دکمه «+ افزودن جنسیت سفارشی» در زیر، متن «انتخاب کنید چه کسی می‌تواند جنسیت شما را ببیند» را با سه گزینه دکمه: فقط شما، سازمان شما، هر کسی. "

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

از فرض کردن موارد زیر در مورد افرادی که ممکن است از وب سایت شما استفاده کنند خودداری کنید: جنسیت آنها ممکن است چیست و به دلیل جنسیت به چه چیزی علاقه مند خواهند شد. اجتناب از این فرضیات محترمانه تر است و بازدیدکنندگان شما از آن استقبال خواهند کرد.
20. اولویت بندی سرعت صفحه

از جنبه فنی، سرعت صفحه در سال جاری به یکی از دغدغه های اصلی توسعه دهندگان وب تبدیل شده است. به روز رسانی الگوریتم گوگل در سال 2021 سرعت را برای سئو مهم تر از قبل کرده است. این همچنین نشان دهنده انتظارات بالاتر کاربران برای عملکرد سرعت سایت است زیرا 53٪ از کاربران صفحه ای را که بیش از 3 ثانیه طول می کشد رها می کنند. روزهای انتظار صبورانه روی صفحه های بارگذاری گذشته است. ‌

Google PageSpeed ​​Insights یا Lighthouse ابزارهایی هستند که می توانند برای ارزیابی بهینه سازی سرعت صفحه شما استفاده شوند. همچنین چند مرحله ساده وجود دارد که توسعه‌دهندگان (یا پلتفرم انتخابی آنها) می‌توانند برای اطمینان از بارگیری سریع صفحات مانند بهینه‌سازی تصویر و بارگذاری تصویر خارج از صفحه به تعویق افتادن، انجام دهند. محدود کردن تعداد فونت هایی که استفاده می کنید نیز می تواند کمک کننده باشد. همچنین می‌خواهید از توسعه صفحات خود بر روی پلتفرمی که به شدت به افزونه‌ها متکی است اجتناب کنید، زیرا این می‌تواند تأثیر زیادی داشته باشد.
21. ساختمان با محتوای پویا

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

محتوای پویا حول یک پایگاه داده مرتبط با ساختارهای تکراری ساخته شده است. ساختار را می توان در یک مکان تغییر داد، و شما می توانید به طور همزمان تمام پست های وبلاگ خود را تغییر دهید، به عنوان مثال، بدون نیاز به تنظیم دستی هر کدام. این برای هر کسی که یک سایت با محتوایی که دائماً در حال تغییر است می‌سازد عالی است - مانند تجارت الکترونیک ، وبلاگ‌ها، نمونه کارها، منوهای رستوران یا سایت‌های خبری.

محتوای استاتیک همچنان کاربردهایی خواهد داشت، اما ساختن با محتوای پویا در حال تسخیر وب است.
22. بدون کد برای تیم های بیشتر استفاده می شود

ما شاهد هستیم که تیم‌های بیشتری بدون کد را در جریان کاری خود وارد می‌کنند و از سرعت و استقلالی که به آنها می‌دهد سود می‌برند. No-code به یک جنبش تبدیل شده است و به شهروندان ایجاد می کند تا بدون داشتن تجربه کدنویسی برای وب بسازند. تیم شما احتمالاً در حال حاضر از ابزارهای بدون کد زیادی برای کارآمدتر کردن کار خود استفاده می کند.

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

استقلال ارائه شده توسط no-code فرصت های بیشتری را برای نوآوری و آزمایش باز می کند و به تیم ها کمک می کند تا با سرعت بیشتری کار کنند. ما انتظار داریم امسال شاهد کسب‌وکارهای بیشتری باشیم که ابزارهای بدون کد را به شیوه‌ای قابل توجه‌تر در جریان کار روزانه خود قرار می‌دهند.
ما هیجان زده هستیم که ببینیم اینها چگونه در سال 2022 عملی می شوند

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