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

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

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

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

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

ترندهای طراحی سایت سال ۲۰۲۱

۱) استفاده از فونت های کلاسیک (retro fonts)

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

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

۲) parallax scroll

استفاده از انیمیشن های پیمایشی parallax یکی از جریان هایی بوده که در این چند سال در حوزه طراحی سایت به آن کم تر توجه شده است اما مشاهده نمونه های بسیار موفقی از پارالاکس اسکرول مرا مجاب کرد تا آن را در لیست ترندهای طراحی سال ۲۰۲۱ قرار دهم.

برای درک بهتر از این نوع طراحی به سایت gmeadow مراجعه کنید و با یک اسکرول ساده متوجه منظور من بشوید.

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

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

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

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

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

برای مشاهده یک نمونه با کیفیت از استفاده از پیمایش افقی حتما از سایت momentomultimedia دیدن کنید.

۴) استفاده از المان های 3D

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

یکی از نمونه ها موفق استفاده از المان های سه بعدی سایت Sennep است که توانسته با استفاده از خطوط عمیق بین عناصر رابطه خوبی برقرار کند. به طور کلی اگر سایت شما از طرح های مینیمالیستی استفاده می‌کند به شما توصیه میکنم از المان های 3D غافل نشوید.

۵) استفاده از مالتی مدیا

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

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

• سادگی را در اولویت قرار دهید؛ استفاده بیش از حد و یا همزمان از چند مدیای مختلف می‌تواند موجب اختلال در برقراری رابطه با کاربر شود و تجربه کاربری سایت شما را به قهقرا ببرد.
• از قالب های مختلف رسانه برای تاثیرگذاری بیشتر محتوای خود استفاده کنید.
• استفاده از زیرنویس برای محتواهای تصویری و صوتی (از پیش ضبط شده) الزامی می‌باشد.
• از پخش خودکار محتوای ویدئویی پرهیز کنید و اختیار پخش یا توقف ویدئو را به کاربر بدهید.

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

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

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

۶) واقعیت افزوده یا AR

در چند سال اخیر تکنولوژی AR به شکل گسترده ای در بین بیزینس ها و برندهای بزرگ رایج شده است. این موضوع در کنار چند نمونه طراحی سایت با استفاده از AR مرا مجاب کرد تا از آن به عنوان یکی از ترندهای جذاب و البته سخت و هزینه بر در سال ۲۰۲۱ یاد کنم.
استفاده از واقعیت افزوده در حال حاضر معنایی بیش از شکار Pokemon با تلفن های هوشمند دارد. در حال حاضر استفاده از فناوری های جدید مثل webxr API و نرم افزارهای ساخته شده توسط Wayfair tech ورود به این قلمرو را برای همه امکان پذیر ساخته است.

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

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

۷) استفاده از رنگ های خاموش

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

برای مثال سایت magic theatre studio از یک پالت رنگ روشن همراه با بلوک های سبز تیره استفاده کرده است. این کار موجب ایجاد یک تضاد مشخص بین بخش های مختلف این سایت شده است. همچنین استفاده از تصاویر پویا و تغییر رنگ ظریف پس زمینه از روشن به تیره، موجب به وجود آمدن یک طراحی زنده شده است.

۸) طراحی بر اساس اولویت

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

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

۹) تاری گاوسی (Gaussian blur)

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

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

از دیگر سایت هایی که از این روش طراحی زمینه استفاده کرده اند می‌‌توان به وبسایت های مقابل اشاره کرد: iamtamara و monographcomms

۱۰) dark mode یا حالت تاریک

حالت تاریک یا دارک مود بی شک یکی از مهم ترین ترندهای طراحی سایت در سال ۲۰۲۱ می‌باشد. برای آشنایی کامل با حالت dark mode حتما مقاله «چطور از دارک مود در طراحی ربط کاربری استفاده کنم» را مطالعه بفرمایید.

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

۱۱) استفاده از تصاویر illustration

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

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

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

۱۲) استفاده از شبکه ی GRID

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

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

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

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

البته لازم نیست شبکه های هندسی در یک چیدمان یکنواخت باشند. اما لازم به ذکر است که این کار تا حد زیادی به الگویابی و سازمان دهی ذهن کاربر کمک خواهد کرد.
به عنوان مثال آخر به سایت flowmingo دقت کنید؛ طراحی کلی این سایت از یک شبکه هندسی نامتقارن استفاده می کند ، اما مربع ها و خطوط، پایه و اساس طرح آنها هستند و خطوط ضخیم تر، بر اشکال مربع تأکید دارند.

۱۳) نشانگر سفارشی

نشانگر یا cursor یکی از مهم ترین مواردی است که معمولا در طراحی سایت به آن توجه نمی‌شود. همین موضوع موجب می‌شود که وقتی یک طراح سایت به این موضوع نیز دقت کند، کاربر بیش از پیش به سایت شما جذب شود.
در این مورد نیزمجددا HGM یک مثال قابل قبول از وبسایت هایی است که نشانگر سفارشی برای بهبود تجربه کاربری و تنوع در طراحی وبسایت خود استفاده می‌کنند.
از دیگر نمونه های موفق این ترند جذاب که احتمالا در سال ۲۰۲۱ شاهد آن باشیم میتوان به وبسایت The pen tool و buro اشاره کرد.

۱۴) scrolling cards

استفاده از scrolling card به جرات یکی از جذاب ترین اجزای طراحی است. نمیدانم این موضوع از کجا نشات می‌گیرد اما مشاهده scrolling cards که چه به صورت افقی و چه به صورت عمودی پیمایش می‌شوند برای ما بسیار هیجان انگیز اند.

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

۱۵) طراحی بدون رنگ (color less design)

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

استفاده ازاین متد طراحی برای وبسایتی مثل Latinxs Who Design که دارای فضای سفید زیادی است واز جلوه بصری شناور که تصویر سیاه و سفید هر طرح را به رنگ کامل تبدیل می کند، ایده بسیار هوشمندانه و خاصی است.

حتی چیزی شبیه به این طراحی ساده نیزمی تواند همچنان یک تجربه جذاب و غیرقابل انتظار را برای کاربر به همراه داشته باشد.

۱۶) استفاده از صوت audio

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

۱۷) استفاده از سیستم های مدیریت محتوا

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

جمع بندی

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

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