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

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

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

21 روند طراحی وب مدرن برای سال 2021

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

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

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

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

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

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

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

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

وب سایت Goliath Entertainment از فونت های یکپارچهسازی با سیستمعامل برجسته استفاده می کند که با رنگ های به همان اندازه پررنگ جفت شده اند.

همانطور که سال 2021 در حال گسترش است، ما مشتاقانه منتظریم تا بازنگری خلاقانه تری را ببینیم.

2. انیمیشن های پیمایش اختلاف منظر

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

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

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

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

صفحه اصلی آلیس لی از اسکرول اختلاف منظر ظریف برای زنده کردن یکی از تصاویر او استفاده می کند.

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

وب سایت Green Meadow از انیمیشن اختلاف منظر برای نشان دادن تدریجی بخش های مختلف متن استفاده می کند.

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

3. پیمایش افقی

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

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

طراحانی که در سال 2021 از اسکرول افقی با موفقیت استفاده می کنند، این ملاحظات را در نظر خواهند داشت:

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

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

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

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

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

McBride Design از اسکرول افقی برای نمایش عکس های بزرگ از کار خود بدون اشغال فضای زیادی در صفحه استفاده می کند. آنها همچنین دارای یک نشانگر واضح در سمت راست پایین هستند که انتظار می رود صفحه به صورت افقی حرکت کند.

McBride Design Studio تصاویر بزرگ و تقریباً تمام قد را با استفاده از اسکرول افقی برای صرفه جویی در فضای صفحه نمایش می دهد.

4. تصاویر سه بعدی در همه جا

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

آژانس خلاق Sennep با عناصر سه‌بعدی در سرتاسر وب‌سایت خود، عمق‌هایی را پرتاب می‌کند. در اینجا یک حس هماهنگی خوب بین تمام عناصر طراحی وجود دارد. این یک مثال عالی از این است که چگونه در چیدمان های مینیمالیستی تر، 3D می تواند تأثیر بیشتری بگذارد.

قهرمان صفحه اصلی Sennep دارای یک تصویر سه بعدی از یک پیانوی آبی است.

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

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

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

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

عناصر سه بعدی حس منحصر به فرد بودن و ابعاد را به هر صفحه وب اضافه می کنند.

5. تجربیات چند رسانه ای

با دسترسی بیشتر مردم به اینترنت با سرعت بالاتر، تجربه‌های وب چندرسانه‌ای در همه جا ظاهر می‌شوند. در کنار هم قرار دادن تصاویر، متن، ویدئو و صدا تجربه کاربری غنی را به وجود می آورد.

طراحی های موفق در سال 2021 از محدودیت با تجربیات چند رسانه ای استفاده می کنند:

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

استفاده از چند رسانه ای به طور موثر و در دسترس با مسئولیت رسیدگی به عوامل مختلفی همراه است. در اینجا منابع بیشتری در مورد دسترسی ویدیو وجود دارد.

سایت Nicolas Errera شامل کنترل‌های پخش برای یک ویدیوی پس‌زمینه زیبا است: با کلیک پخش می‌شود و همچنین می‌توان آن را متوقف کرد. همچنین دارای یک انیمیشن ظریف است که نشان می دهد تا چه حد در ویدیو هستید.

قهرمان وب سایت Nicolas Errera دارای یک ویدیوی زیبا با تمام عرض با کنترل های پخش کامل کاربر است.

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

Black Yearbook شامل ویدیوهایی با کنترل های پخش کامل و فیلمبرداری زیبا است.

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

6. تجربیات واقعیت افزوده (AR).

و با تجارب چند رسانه ای، بیایید تمام تجربیات شگفت انگیز همهجانبه با استفاده از واقعیت افزوده (AR) را فراموش نکنیم. AR اکنون به معنای چیزی بیشتر از شکار پوکمون در دستگاه تلفن همراه اپل یا اندروید شماست. فن آوری های جدید مانند WebXR API و نرم افزار ساخته شده توسط Wayfair Technologies این حوزه را تقریبا برای همه باز کرده است.

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

جیپ رانگلر یک تجربه AR همهجانبه دارد که جنبه های مختلفی از فضای داخلی خودرو را نشان می دهد.

7. تمرکز بر غلات

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

زیبایی دانه بندی را در این وبسایت برای Studio Gusto مشاهده می کنیم. از عناصر طراحی lo-fi برای تجربه کاربری خشن‌تر استفاده می‌کند که طبیعی‌تر از کمال نرمی است که در بسیاری از طراحی‌های وب رایج است.

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

8. تمرکز بر رنگ های خاموش

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

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

وب سایت Magic Theater Studio یک رنگ کرم خنثی را با گرافیک ساده سیاه برای جلوه ای آرام جفت می کند.

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

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

9. طراحی بر اساس اولویت

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

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

10. تاری گاوسی

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

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

قهرمان Moment House دارای یک تاری گاوسی بنفش، زرد و نارنجی دلپذیر است.

ما یک تاری گاوسی را در پس‌زمینه Monograph Communications می‌بینیم . این ترکیب کرکی از قرمز، بنفش و آبی، کنتراست خوبی بین خطوط مستقیم و تایپوگرافی پررنگی ایجاد می کند که روی آن قرار گرفته است.

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

پورتفولیوی UX I am Tamara از همین رویکرد استفاده می کند تا کمی تاری گاوسی را در پس زمینه ایجاد کند.

سایت نمونه کارها I am Tamara از یک تاری گاوسی بسیار ظریف هلو برای افزودن بافت و علاقه استفاده می کند.

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

قهرمان صفحه اصلی Goobooks.io از تاری گاوسی بنفش و زرد به عنوان نقطه کانونی بصری استفاده می کند.

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

11. طومار نویسی

ما شاهد روند رو به رشدی در داستان گویی طراحان از طریق تجربیات وب بوده ایم. اینجاست که طومار سرایی وارد می شود – داستان سرایی بصری که داستان را اوج می بخشد و شما را به روایت آن جذب می کند.

بهترین کاربردهای مهار تمرین طومار نویسی:

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

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

12. حالت تاریک

«بازگشت به مشکی» AC DC را به تصویر بکشید زیرا حالت تاریک در سال 2021 به صفحه‌های بیشتری می‌آید. طراحان بیشتری از زیبایی‌شناسی حالت تاریک استقبال می‌کنند، با رنگ مشکی پس‌زمینه تاریک کاملی را فراهم می‌کند تا عناصر طراحی را از صفحه نمایش بیرون بیاورد.

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

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

از تاریک شدن در سال 2021 با کار طراحی خود نترسید.

13. تصاویر کارتونی

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

منابع بسیار زیادی وجود دارد و هنرمندانی که تصاویر کارتونی خارق العاده ای می سازند. Blush یک پلتفرم عالی برای یافتن تصاویر سفارشی شخصیت است، مانند این مجموعه عالی از Vijay Verma .

پلتفرم تصویرسازی Blush دارای تصاویر مختلف شخصیت‌های قابل تنظیم است.

تصاویر کارتونی از نظر خلاقیت و شخصیت‌پذیرتر کردن یک برند چیزهای زیادی ارائه می‌دهند. ما مشتاقانه منتظریم تا در سال آینده شاهد حضور شخصیت های رو به رشدی در طراحی های وب باشیم.

14. شبکه های هندسی

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

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

وب سایت هادسون گاوین و مارتین از خطوط سیاه ضخیم برای جداسازی بلوک های مختلف محتوا استفاده می کند.

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

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

و برای کمی لمس سبک تر، ترتیب خوبی از مربع ها و خطوط واضح را در این طرح شبکه هندسی برای شرکت آرایشی و بهداشتی Skin Labs دریافت می کنیم.

سایت تجارت الکترونیک Skin Labs از یک شبکه ساده برای نمایش واضح محصولات مختلف خود استفاده می کند.

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

15. نشانگرهای سفارشی

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

ما فقط در مورد HGM Legal و استفاده آنها از شبکه های هندسی صحبت کردیم، اما آنها همچنین دارای این مکان نما سیاه و سفید برجسته هستند.

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

ابزار Pen ، مکان‌نمای دایره‌ای خود را یک قدم جلوتر می‌برد، با انیمیشن و متن برای جلوه‌ای تقریبا روان‌گردان.

وب سایت روشن و رنگی Pen Tool از یک مکان نما بزرگ مشکی برای جلوه های بد بو استفاده می کند.

یا این مکان‌نمای دایره‌ای شکل‌دهنده از Büro را بررسی کنید، که ظاهر خود را بسته به عنصر طراحی که روی آن معلق است تغییر می‌دهد.

وب‌سایت Buro از فضای منفی زیادی استفاده می‌کند و یک مکان‌نمای دایره‌ای بزرگ سفید به جذابیت بصری می‌افزاید.

در سال 2021، ما امیدواریم که شاهد برداشت های اصلی بیشتری از آنچه که یک مکان نما می تواند باشد، باشیم .

16. کارت های اسکرول

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

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

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

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

17. طراحی بدون رنگ

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

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

طراحی ساده سیاه و سفید Latinxs Who Design تمرکز را بر روی افراد برجسته قرار می دهد.

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

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

پایگاه داده تجربه کاربر تصاویر دوستانه را با یک طرح بندی تمیز جفت می کند.

18. صوتی

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

نیویورک تایمز کار خارق‌العاده‌ای در ارائه صوت همراه با برخی از مقالات برجسته خود انجام می‌دهد.

وب سایت نیویورک تایمز شامل یک ویژگی صوتی برای مقاله آنها "آیا Palantir خیلی زیاد می بیند؟"

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

19. وب الهام گرفته از چاپ

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

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

طرح الهام گرفته از سرمقاله استودیو Home Run برای صفحه آنها در مورد ریسوگرافها به خوبی کار می کند.

مثال بالا از Home Run Studio ، و مثال زیر برای Foundamour ، هر دو از چاپ الهام گرفته‌اند و به آنها آشنایی و ارتباطی با انتشار می‌دهد.

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

20. طراحی سیستم برای سازگاری

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

راهنمای سبک Saasly در Webflow ساخته شده است و شامل نمونه های رنگی، تایپوگرافی و آیکون ها است.
راهنمای سبک از Saasly

ما همچنین برنامه‌های بسیار مفیدی را دیده‌ایم که برای آسان‌تر کردن گردش‌های کاری سیستم طراحی توسعه یافته‌اند. Zeroheight به عنوان یک فضای متمرکز برای مدیریت وظایف و همکاری عمل می کند. Figma قالب ها و همچنین سایر ابزارهای سیستم های طراحی را ارائه می دهد. و مجموعه CMS Webflow می تواند یک سیستم طراحی را بدون توجه به اندازه آن نیرو دهد.

21. بدون کد

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

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

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

نظرات غیر فعال است