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

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

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

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

گرایش های طراحی وب 2022

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

1. مینی سایت های لذت

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

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

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

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

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

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

2. شکار لاشخورهای مبتنی بر وب

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

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

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

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

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

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

3. تجربیات برنامه مانند

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

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

4. وب سایت های تک صفحه ای

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

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

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

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

5. سایت هایی با حس قوی مکان

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

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

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

6. نقوش آرت دکو

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

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

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

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

7. تصاویر کمتر در هیروها

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

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

8. تایپوگرافی بزرگ

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

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

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

9. فونت های تعاملی

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

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

10. طراحی حرکت مسئولانه 

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

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

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

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

11. تصویر کلاژ

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

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

12. تصاویر انتزاعی

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

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

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

13. گرادیان با دانه

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

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

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

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

14. کار خطی

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

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

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

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

15. وب سایت های صفحه نمایش تقسیم شده

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

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

16. شکل گیری شیشه ای بیشتر

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

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

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

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

17. نورمورفیسم کمتر

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

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

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

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

18. کپی شامل

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

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

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

19. طراحی بدون جنسیت

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

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

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

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

20. اولویت بندی سرعت صفحه

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

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

21. ساختمان با محتوای پویا

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

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

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

22. بدون کد برای تیم های بیشتر استفاده می شود

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

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

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