۵ روند منحصر به فرد و کلیدی مهم برای طراحی وب سایت در سال ۲۰۲۲

این ۵ گرایش طراحی وب برای سال ۲۰۲۱ را بررسی کنید که نحوه طراحی و بهبود تجربه مردم از وب را شکل می دهد. جف کاردلو به گردآوری سالانه گرایش های طراحی سایت ما خوش آمدید. از تایپوگرافی یکپارچهسازی با سیستمعامل گرفته تا حرکت رو به رشد بدون کد، چیزهای زیادی برای انتظار در سال ۲۰۲۱ وجود دارد. ۲۰۲۰ آسان نبود. با گالن‌های ضدعفونی‌کننده دست، جلسات ناخوشایند Zoom، و اضطراب احتمالی عدم اطمینان، همه ما کمی احساس گیجی می‌کنیم. با وجود شرایط، همه ما تمام تلاش خود را به کار گرفتیم تا از طریق همه آن به جلو برویم. بسیاری از ما برای یادگیری مهارت های جدید طراحی وقت گذاشتیم. و برخی از ما فقط نان خمیر ترش درست کردیم. همه ما مهارت های مقابله ای خود را داریم. وقتی نوبت به طراحی رسید، ما به روندهای بی پایان در وب توجه داشتیم. پس از صحبت با تیم Brand Studio در Webflow، و تعداد معدودی از طراحان دیگر، فهرستی جامع از برخی از گرایش‌های طراحی وب که انتظار داریم در سال ۲۰۲۱ به خوبی شاهد آن باشیم، گردآوری کردیم. امیدواریم این فهرست نه تنها الهام بخش شما باشد، بلکه شما را نیز بسازد. به روشی فراگیرتر و در دسترس تر به وب نزدیک شوید.

۵ روند طراحی وب مدرن برای سال ۲۰۲۱

در اینجا ۲۱ گرایش طراحی وب سایت وجود دارد که به روشن تر شدن سال ۲۰۲۱ نیز کمک می کند.

۱٫ فونت های یکپارچه سازی با سیستم عامل

ما بسیاری از چیزهای قدیمی را دیده‌ایم که دوباره باحال شده‌اند، و سپس به نوبه خود حتی ناخوشایندتر شده‌اند. به سبیل های دسته و شلوار جین مامان فکر کنید. آیرونی ماندگاری کوتاهی دارد. فونت‌های یکپارچهسازی با سیستمعامل همین روند را در محبوبیت خود تجربه کرده‌اند، و بسیاری از طرح‌های دارای تایپوگرافی قدیمی به خوبی پیر نشده‌اند. با این حال، تایپوگرافی بازگشتی کمی دوباره احیا شده است. ما همان فونت های خسته را نمی بینیم. در عوض، سبک سازی و کمی هنرمندی در حال تجسم مجدد فونت های یکپارچهسازی با سیستمعامل است. ما این ادغام قدیمی و جدید را در صفحه تبلیغات کارناوال Spotify مشاهده می کنیم. آنها به جای احساس کهنه و کلیشه ای، با کمی آزمایش جان تازه ای به فونت های پررنگ سنتی می دهند. این مثال خوبی از گرفتن فونت های سنتی و دادن کمی چرخش سرد و مدرن به آنها است، در حالی که خوانایی را حفظ می کند. صفحه تبلیغاتی کارناوال Spotify فونت‌های بد بو را با حروف انتزاعی با رنگ‌های روشن و بافت‌های سرگرم‌کننده جفت می‌کند. برای شرکت برنامه‌ریزی رویداد Goliath Entertainment، در اینجا در این وب‌سایت، حسی از آینده‌نگری وجود دارد. تایپوگرافی جسورانه به گذشته اشاره می کند، در حالی که هنوز هم خیلی لحظه را احساس می کند. وب سایت Goliath Entertainment از فونت های یکپارچهسازی با سیستمعامل برجسته استفاده می کند که با رنگ های به همان اندازه پررنگ جفت شده اند. همانطور که در سال ۲۰۲۱ آشکار می شود، ما مشتاقانه منتظریم تا بازنگری تایپوگرافی خلاقانه تری را ببینیم.

۲٫ انیمیشن های اسکرول اختلاف منظر

جلوه‌های اسکرول Parallax برای سال‌ها یک روند در طراحی وب‌سایت بوده است، و در سال ۲۰۲۱ امیدواریم که شاهد کاوش‌های ظریف و خلاقانه‌تر در مورد آنچه می‌توان با اختلاف منظر انجام داد، باشیم. به یاد داشته باشید که حرکت بیش از حد در اثرات اختلاف منظر می تواند برای افراد مبتلا به اختلالات دهلیزی مضر باشد زیرا توهم عمق و حرکت می تواند باعث سردرگمی و سرگیجه شود. در اینجا دستورالعمل‌هایی وجود دارد که می‌بینیم بیشتر طراحان برای اطمینان از اینکه اختلاف منظر را به حداقل و بدون ایجاد آسیب وارد می‌کنند، در نظر گرفته‌اند: اجازه ندهید اثرات اختلاف منظر اطلاعات مهم را منحرف کند انجام یک کار مهم را برای کاربر سخت تر نکنید تعداد جلوه های اختلاف منظر را به حداقل برسانید مقدار حرکت اختلاف منظر در هر نمونه را به حداقل برسانید محدود کردن جلوه های اختلاف منظر در یک منطقه کوچک از صفحه نمایش شامل گزینه ای برای کاربران برای خاموش کردن جلوه های اختلاف منظر سایت نمونه کار آلیس لی از جلوه های اختلاف منظر استفاده می کند که به موقعیت ماوس پاسخ می دهد تا تصویر او را زنده کند. مقدار حرکت کم است و در محدوده قهرمان قرار دارد. این یک مثال عالی از استفاده از اختلاف منظر با محدودیت و قصد است. صفحه اصلی آلیس لی از اسکرول اختلاف منظر ظریف برای زنده کردن یکی از تصاویر او استفاده می کند. لازم نیست هر انیمیشن اختلاف منظری حرکات بزرگی را در سراسر صفحه نمایش دهد. ما همچنین برنامه های ظریف تری را دیده ایم. در این طراحی وب برای Green Meadow، تقریباً می توان این اثر را به طور کامل از دست داد. اما این آشکارسازی ملایم متن به اندازه کافی کنار هم قرار می گیرد تا توجه هر بلوک متن را همانطور که به نظر می رسد جلب کند. وب سایت Green Meadow از انیمیشن اختلاف منظر برای نشان دادن تدریجی بخش های مختلف متن استفاده می کند. در سال آینده، ما هیجان‌زده‌ایم که ببینیم از اسکرول اختلاف منظر به‌طور ماهرانه استفاده می‌شود، نه برای جلوه‌های پر زرق و برق، بلکه به عنوان ابزاری برای تأکید یا برجسته کردن بخش‌های مهم محتوا.

۳٫ پیمایش افقی

اسکرول افقی که پیش از این به عنوان یک خطای طراحی وب در نظر گرفته می شد، در حال بازگشت است. ما شاهد هستیم که طراحان وب بیشتری به آزمایش اسکرول افقی ادامه می دهند. کسانی که این کار را به بهترین نحو انجام می دهند، الگو را نه به خاطر متفاوت بودن، بلکه به عنوان راهی عملی برای افشای تدریجی اطلاعات ثانویه، مانند گالری تصاویر، می شکنند. طراحانی که در سال ۲۰۲۱ از اسکرول افقی با موفقیت استفاده می کنند، این ملاحظات را در نظر خواهند داشت: کاربران را مجبور به پیمایش در محتوای افقی نکنید: به روش‌های جایگزین برای پیمایش اجازه دهید، مانند دکمه‌های پیکان با برچسب‌های واضح نشانه‌های بصری را برای نشان دادن جایی که محتوا از اسکرول افقی استفاده می‌کند، پاک کنید، و این نشانه‌ها را پشت شناورها پنهان نکنید در مورد اینکه چه محتوایی از نمایش در یک پیمایش افقی سود می‌برد فکر کنید – گالری عکس رقیب خوبی است زیرا اسکرول افقی پیش‌نمایش کوچکی را به کاربران نشان می‌دهد و به آنها این امکان را می‌دهد که بیشتر مشاهده کنند یا به حرکت در پایین صفحه ادامه دهند. از نیاز به اسکرول افقی برای متنی که باید خوانده شود خودداری کنید در صفحه ویژگی Designer خودمان، از مقدار کمی اسکرول افقی برای بزرگنمایی روی یک تصویر بزرگ استفاده کرده‌ایم و بخش‌های مرتبط بیشتری از تصویر را در اندازه بزرگ‌تر نشان می‌دهیم تا محتوای مربوطه را همراهی کنیم. صفحه ویژگی Webflow’s Designer اسکرول افقی را روی یک تصویر بزرگ از Webflow Designer اعمال می کند تا جزئیات رابط کاربری را بهتر نشان دهد. صفحه اصلی استودیوی طراحی Momento شامل یک نشانه واضح در کنار دکمه اصلی است که به عنوان یک پیوند نیز عمل می کند و به آرامی شما را به سمت آثار برجسته با کلیک هدایت می کند. حرکت اسکرول سرعت خوبی دارد و خیلی طولانی نیست و به تصاویر برجسته اجازه می دهد تا بدرخشند. استودیوی طراحی Momento از اسکرول افقی برای نمایش تصاویر بزرگ از پروژه های مختلف خود استفاده می کند. McBride Design از اسکرول افقی برای نمایش عکس های بزرگ از کار خود بدون اشغال فضای زیادی در صفحه استفاده می کند. آنها همچنین دارای یک نشانگر واضح در سمت راست پایین هستند که انتظار می رود صفحه به صورت افقی حرکت کند. McBride Design Studio تصاویر بزرگ و تقریباً تمام قد را با استفاده از اسکرول افقی برای صرفه جویی در فضای صفحه نمایش می دهد.

۴٫ تصاویر سه بعدی در همه جا

با ظهور صفحه‌های رزولوشن بالاتر، طراحی سه‌بعدی فاصله زیادی با لبه‌های بلوک‌دار و اریب‌دار Geocities داشته است. ما شاهد تصاویر سه بعدی با کیفیت بالا بوده ایم که به صورت یکپارچه در طراحی های وب قرار گرفته اند. آنها به جای اینکه حواس پرتی را پرت کنند، به تجربه کلی کاربر اضافه می کنند. آژانس خلاق Sennep با عناصر سه‌بعدی در سرتاسر وب‌سایت خود، عمق‌هایی را پرتاب می‌کند. در اینجا یک حس هماهنگی خوب بین تمام عناصر طراحی وجود دارد. این یک مثال عالی از این است که چگونه در چیدمان های مینیمالیستی تر، ۳D می تواند تأثیر بیشتری بگذارد. قهرمان صفحه اصلی Sennep دارای یک تصویر سه بعدی از یک پیانوی آبی است. یایا با این انیمیشن قهرمان عجیب و غریب و جالب، عشق خود را به سه بعدی در جلو و مرکز صفحه اصلی خود قرار داده است. قهرمان صفحه اصلی Yaya یک تصویر سه بعدی دقیق را برجسته می کند که یک فرد را در حال تعامل با یک ماشین ساخت آینده نگر به تصویر می کشد. و در مثال زیر از شرکت نرم‌افزار ارائه Pitch، آنها یک طرح رنگارنگ پر از اشکال سه بعدی، سایه‌ها، گرادیان‌ها و عناصر لایه‌ای دارند. این عناصر طراحی سه بعدی این طرح را زنده می کنند. قهرمان وب‌سایت Pitch محصول خود را نشان می‌دهد و چند عنصر انتزاعی سه‌بعدی را برای افزایش جذابیت بصری می‌پاشد. عناصر سه بعدی حس منحصر به فرد بودن و ابعاد را به هر صفحه وب اضافه می کنند.

۵٫ تجربیات چند رسانه ای

با دسترسی بیشتر مردم به اینترنت با سرعت بالاتر، تجربه‌های وب چندرسانه‌ای در همه جا ظاهر می‌شوند. در کنار هم قرار دادن تصاویر، متن، ویدئو و صدا تجربه کاربری غنی را برای کاربر به ارمغان می آورد. طراحی های موفق در سال ۲۰۲۱ از محدودیت با تجربیات چند رسانه ای استفاده می کنند: سادگی را در اولویت قرار دهید، مانند هنگام ترکیب حرکت و صدا. انجام بیش از حد ممکن است برای افراد مبتلا به اختلالات شناختی حواس پرتی یا طاقت فرسا باشد. از قالب‌های رسانه‌ای مختلف به‌عنوان راهی برای به حداکثر رساندن دسترسی به محتوا، به طور متفکرانه استفاده کنید. شامل شرح بسته و رونوشت برای همه چند رسانه‌ای از پیش ضبط‌شده. متن جایگزین را برای تصاویر اضافه کنید و تصاویر پیچیده را با متن توصیفی طولانی تر همراه کنید. اطمینان حاصل کنید که تمام متن ها با HTML ساخته شده اند نه اینکه در داخل تصاویر ارائه شوند. از پخش خودکار محتوای ویدیویی یا حرکتی خودداری کنید: در عوض، یک دکمه «پخش» واضح ارائه کنید که به کاربر امکان پخش و توقف محتوا را می‌دهد. استفاده موثر و در دسترس از چند رسانه ای مسئولیت رسیدگی به عوامل مختلفی را به همراه دارد. در اینجا منابع بیشتری در مورد دسترسی به ویدیو وجود دارد. سایت Nicolas Errera شامل کنترل‌های پخش برای یک ویدیوی پس‌زمینه زیبا است: با کلیک پخش می‌شود و همچنین می‌توان آن را متوقف کرد. همچنین دارای یک انیمیشن ظریف است که نشان می دهد تا چه حد در ویدیو هستید. قهرمان وب سایت Nicolas Errera یک ویدیوی زیبا با عرض کامل با کنترل های پخش کامل کاربر را در خود جای داده است. تجارب چند رسانه ای در زمینه های مختلف کار می کنند. در مثال زیر اسکرین شات از Black Yearbook را می بینیم. این کتابی است که توسط Adraint Bereal و دوستانش با سرمایه جمعی تهیه شده است تا نشان دهد که یک دانش آموز آمریکایی آفریقایی تبار که در مدارس عمدتاً سفیدپوست تحصیل می کند چگونه است. کنترل های پخش کامل به وضوح در همه ویدیوها قابل مشاهده است. فیلمبرداری زیبا از یک صحنه به صحنه دیگر در ابتدای طراحی با یک موسیقی متن هیپنوتیزمی که در پس‌زمینه پخش می‌شود، کات می‌کند، که بسیار شبیه تریلر یک فیلم است. اشتیاق در پس این مقدمه نهفته است، که باعث می شود بخواهید بیشتر در مورد کتاب و جنبش پشت آن بیاموزید. شرکت سیماگر پیشرو در طراحی وب سایت خلاقانه و هوشمند در سال ۲۰۲۲ در ایران و حوزه خلیج فارس و کشور های همسایه میباشد و از نظر گرافیک خروجی با کیفیت را تضمین میکند.