طراحی بصری و اثر متقابل آن
با توجه به پیشرفت نرم افزارهای تولید محتوای گرافیکی و متنی هر روز بر جذابیت‌های بصری طراحی وب سایت افزوده می‌شود. در این مقاله قصد داریم ۲۱ ترند مهم یا روند برای طراحی سایت و طراحی پورتال را معرفی کنیم.
ایجاد یک تصویر با صدای واحد
تصویرگری به عنوان عنصری متفاوت مورد استفاده قرار می گیرد زیرا ماهیت انحصاری هنر را به ما یادآوری می کند. در دوره اخیر رونق تصویر سازی در صنعت فناوری توسط طراحان و هنرمندان مختلف به عنوان راهی برای تعامل با وب سایت برای کاربر خوشحال کرده ایم. از ارزشها و احساسات برند استفاده می شود.
طرح‌بندی مبتنی بر تایپوگرافی
تایپوگرافی همیشه نقشی اساسی در طراحی داشته است ، اما اکنون در سطح بالایی از آزادی ، بیان و آزمایش جایگاه خوبی برای خود پیدا کرده است. تایپوگرافی ، پس از سالها رنج از کمبود قلم و مشکلات خوانایی در اوایل طراحی وب ، شکوفا شده و جایگاه ویژه ای پیدا کرده است. در حال حاضر فونت های زیادی وجود دارد ، اما مهم نیست که چقدر قلم یا ترکیب آن را انتخاب کنید ، بلکه مهم استفاده از کلمات به عنوان عنصر اصلی زیبایی شناسی و معناشناسی است. اکنون کلمات از نظر فیزیکی در طراحی وجود دارند ، در واقع یک عنصر ساختاری است که بقیه ترکیبات در اطراف آن جریان دارد.
یکی از کاربردها و جلوه های تایپوگرافی برجسته سازی حروف به عنوان عناصر گرافیکی است که با تغییر شکل ، جلوه ها و انیمیشن ها و همچنین ترکیب old ، italic ، Serif و سبک های دیگر انجام می شود.
فونت‌های متغیر
فونت های متغیر در حال حاضر پشتیبانی کافی از مرورگر ندارند اما باید در لیست مهارت های ما برای یادگیری باشند. فونت های متغیر در واقع از نظر ویژگی های فونت انقلابی هستند. یک فایل قلم می تواند شامل چندین فونت متغیر باشد. برای دسترسی به این تغییرات می توان از CSS استفاده کرد. در این مثال یک فونت متغیر مشاهده می کنیم که می تواند پارامترهای مربوط به وزن و سری را تغییر دهد و به ما امکان می دهد نه تنها انیمیشن بسازیم بلکه چندین فونت نیز ایجاد کنیم.
به طور کلی می توانیم از CSS برای متحرک سازی فونت با فشرده سازی یا گسترش آن استفاده کنیم. اما سایر ویژگی ها مانند مورفولوژی توسط طراح قلم تعیین می شود.
به عنوان مثال Decovar ، یک قلم متغیر تزئینی است که برای پارامتر کردن خواص مختلف طراحی شده است.
پاراگرافهای تزئین شده، بزرگ و افزودنی
پاراگراف ها دیگر در ستون های ساده یا اشکال پیچیده هندسی قرار نمی گیرند. پاراگراف ها اکنون پر از شکلک های عجیب ، تصاویر ، تغییر سبک ، نمادها و توزیع ها هستند.
اندازه پاراگراف ها نیز به طرز چشمگیری افزایش یافته است و ترکیب قلم ها و سبک های تزئینی دیگر چیز عجیبی نیست. پاراگرافهای بزرگ این روزها یکی از گرایشهای اصلی در طراحی وب هستند.
انیمیشن: عناصر ثانویه و حرکت ارگانیک
متحرک سازی عناصر ثانویه یا انیمیشن راهی عالی برای تجسم یک وب سایت بدون استفاده بیش از حد از منابع که باعث افزایش زمان بارگذاری سایت می شوند. این انیمیشن ها اغلب تجربه های سیالی را برای کاربر ایجاد می کنند. با استفاده از ابزاری مانند Lottie و odymovin می توان انیمیشن های مایع ، ارگانیک و پیچیده تری ایجاد کرد. البته CSS و Javascript امکانات زیادی برای رابط های انیمیشن نیز فراهم می کنند ، آنها کنترل زیادی بر پارامترها ، منحنی های کاهش یافته ، حالت های اختلاط ، فیلترها ، اشکال مختلف و … دارند ، اما به مهارت بالایی نیاز دارند.
مینی‌گیم‌های جذاب
همانطور که قبلا ذکر شد ، نیاز به گفتگو و سادگی بخشی از صدای بسیاری از مارک ها است. این نیاز در جزئیات کلی ، میکروسکوپی و جزئی مربوط به میکرو لینک های متحرک ایجاد می شود.
افزودن شوخی یا بازیگوشی یا بازی های کوچک می تواند بخشی از این نیاز را برآورده کند. منابعی که برای بارگیری محتوا استفاده می شود ، انتظارات کاربر را هنگام بارگذاری دلپذیرتر می کند ، اما همچنین مهارت های طراح یا توسعه دهنده و قصد او برای داشتن یک ارتباط نزدیک و سرگرم کننده با کاربر را نشان می دهد.
طراحی شلوغ و حداکثرگرایی در استفاده از عناصر (Brutalism)
در چند ماه اخیر، ما شاهد طراحی‌های وب شلوغ و با تاثیرگذاری بالا بوده ایم که از طریق طرح‌ها متون و تعاملات اجرا می‌شود. اما این سبک به تدریج خود را تغییر داد تا جایی که قابلیت استفاده از رابط‌های ما را داشته باشد.
تاثیرات تصاویر و افکت‌های متحرک
تمام تصاویر ایجاد شده در سال 2018 حاولی نوعی تاثیر هستند. سال گذشته نمونه‌های بیشماری از تاثیر سایبان بر روی تصاویر، متن‌ها یا فیلم‌ها را مشاهده کردیم. در ماه‌های بعدی نیز شاهده استفاده از این روند بودیم اما به دلیل استفاده بیش از حد از این عناصر، تبدیل به یک روند خسته کننده شده است.
استفاده از Press & Hold در منو
Press & Hold این به معنای فشار دادن یک دکمه با اشاره گر ماوس روی دسک تاپ یا انگشت خود برای مدت کوتاهی بر روی تلفن است تا چیزی اتفاق بیفتد. استفاده از گزینه ها و دکمه ها با قابلیت فشار دادن و نگه داشتن یا Press & Hold در منو کار درستی نیست و گزینه های موجود در این نوع منو بسیار پنهان هستند. در واقع تعامل با این نوع منوها برای کاربر بسیار دشوار است. زیرا او باید قبلاً با چنین منوهایی روبرو شده باشد ، یا فرصتی را برای درک عملکرد آن فشار داده باشد ، یا ما در وب سایت و برنامه خود به نوعی کاربر را تشویق می کنیم تا گزینه های موجود در منو را فشار دهد.
وقتی برای اولین بار با چنین منوهایی روبرو می شوید ، استفاده از آنها برای شما جالب به نظر می رسد ، اما وقتی تازه از بین رفته است و بارها ماوس یا انگشت خود را روی منو نگه داشته اید ، دیگر مورد پسند شما نیست. . استفاده از Press & Hold حتی به دلیل کنجکاوی تصمیم اشتباهی است. به طور خلاصه ، اگرچه ترفند Press & Hold به عنوان یک راه حل ویژه در بسیاری از سایتهای جدید و تجربی معرفی و مورد استفاده قرار گرفته است ، اما نباید به عنوان یک روش و روند معمول مورد استقبال قرار گیرد.
عصر طراحان مستقل وتوسعه دهندگان خلاق
اخیرا ما شاهد گسترش توسعه دهندگان مستقلی هستیم که برای آژانس‌ها و استودیوها بزرگ کار انجام می‌دهند. به طور کلی، در بین این طراحان مستقل یا توسعه دهندگان خلاق، ما خلاقیت‌های زیادی بر اساس استفاده دقیق از تصاویر، تایپوگرافی و جزئیات کوچک در روند طراحی وب را شاهد هستیم.
مکان نماهای سفارشی و اثرات موس
مکان نماهای سفارشی از جلوه‌های قدیمی هستند که به تازگی نیز برای تغییر رنگ مکان نما و غیره استفاده می‌شود. این مکان نماهای واکنش پذیر به سایر عناصر یا اقدامات کاربر مانند تغییر شکل، اندازه، رنگ یا انیمییشن نیز واکنش نشان می‌دهند.
منوها
مانند پاراگراف ها ، منوها نیز رشد چشمگیری داشته اند. آیا هنوز هم آن منوهای کوچک با فونت های پیکسل را در سال 2005 به یاد دارید؟ غیر قابل باور به نظر می رسد که ما در چند سال گذشته به این اختلاف مقیاس رسیده ایم.
در طراحی موبایل ، اندازه منوها تحت تأثیر الگوهای موبایل قرار می گیرد. در طراحی رابط تلفن همراه ، استفاده از منوی تمام صفحه معمول است زیرا تلفن ها لمسی هستند و استفاده از منوهای کوچک برای کاربران دشوارتر است.
منوی زیر پاراگراف ها نه تنها اندازه آنها را تغییر می دهد ، بلکه عناصر تزئینی ، پرده ها و تعاملات مختلف را در منوها تغییر می دهد.
اسکرول‌های ترکیبی
رایج ترین چیزی که ما همچنان مشاهده می‌کنیم استفاده از چیدمان‌ها با اسکرول‌های طولانی اما با بخش‌های تقسیم شده است، مانند یک طرح یک صفحه‌ای خالص که مطالب آن با قسمت‌های خاص از هم جدا شده اند. آنها همچنین جلوه‌های ظریفی مانند اختلاف منظر یا انطباق را حفظ کرده‌اند و البته استفاده زیاد از اسکرول‌ها باعث ایجاد انیمیشن شده است.
طرح‌های رنگی با شخصیتهای متفاوت
طرح های رنگی خود روشی است که به عنوان عنصر اصلی طراحی مورد استفاده قرار می گیرد ، ما در مورد طرح های رنگی با شخصیت های مختلف صحبت می کنیم که به طور مداوم در طول تجربه محصول مورد استفاده قرار می گیرند.
به طور کلی ، ما شاهد طرح هایی با دو یا سه رنگ اصلی و رنگ های مختلف ثانویه هستیم. رنگ های اشباع و پاستلی با هم ترکیب می شوند و جلوه هایی با کنتراست بالا ایجاد می کنند. نمونه های زیادی از رنگهای پررنگ در پس زمینه با عکاسی ، تایپوگرافی و تصویرگری وجود دارد.
مخلوط کردن عناصر دو بعدی و سه بعدی
انیمیشن سه بعدی در چند سال گذشته تاثیر زیادی در طراحی داشته است. نرم افزارهایی مانند Blender یا Cinema 4D باعث شده اند تا خلاقیت زیادی را در این زمینه شاهد باشیم. چاپ‌های VR ، AR و 3D نیز در حال تولید مجدد محتوای دیجیتالی سه بعدی هستند.
طرح‌بندی‌های شیک
به لطف استاندارد سازی شبکه‌های CSS و flexbox ما توانسته ایم طرح‌های رایگانی را اجرا کنیم که محدودیت ندارند. ما باید فانتزی طراحی وب به صورت پاسخگو را از سر بیرون کنیم چرا که هیچ کس انتظار ندارد یک طرح واحد بتواند با یک روش انعطاف پذیر به ۱۰ دستگاه پاسخ دهد.
نوشتن UX شخصیت برند و میکروکوپی
طی چند سال گذشته شاهد تغییرات اساسی در پیام رسانی ، ارتباطات صوتی و سبک ارتباطی شرکت ها و مشاغل بوده ایم. مارک ها و شرکت های مختلف سعی دارند از لحن گفتگوی انسانی تری استفاده کنند. این بیشتر از اینکه یک رابطه تجاری باشد ، رابطه دوستانه را به مشتری یادآوری می کند.
میکروسکوپ هایی که قبلاً نامرئی بودند اکنون صدای خاصی دارند. به خصوص صداهایی که برای حفظ سبک و انسجام در تجربه کاربر با دقت برای یک مارک خاص ایجاد شده اند.
وقتی مشتری بسیار خوشایند است. برای دریافت عبارت “متشکرم عزیزم” با یک سبد خرید تعامل کنید و چه کسی می تواند در برابر این پیام مقاومت کند؟
این ویژگی سالهاست که کنار گذاشته می شود و ما به همان پیام های استاندارد قدیمی برای واسطه های خود برگشتیم.
PWA یک طراحی وب واکنش‌گرای جدید است
رسما می توانیم بگوییم که PWA ها استانداردهای جدیدی مشابه طراحی وب پاسخگو اما کمی پیشرفته تر هستند. نسخه های موبایل نسخه کم شده ای نیستند ، این تجربه متفاوتی است که می تواند و باید بهینه سازی شود تا عملکرد ، نمایه سازی و تبدیل خوبی داشته باشد.
برنامه های وب پیشرفته به توسعه دهندگان و طراحان اجازه می دهد برنامه های مبتنی بر فن آوری وب برنامه های محلی مانند به روزرسانی خودکار ، انتقال بین بخش ها بدون بارگیری بیشتر ، نماد دسترسی در صفحه اصلی و اعلان ها را نیز پیاده سازی کنند.
اما بهتر است آنها از ویژگی های مثبت برنامه های وب ، مانند نمایه سازی موتور جستجو و سئو وب سایت ، و مهمتر از همه ، جلوگیری از تلاش برای تلفیق برنامه ها با فن آوری های مختلف استفاده کنند.
سیستم‌های طراحی
سیستم های طراحی در شرکت ها روز به روز محبوب تر می شوند که مزایای زیادی برای آنها دارد. آنها ابزارهای اساسی برای تیم طراحی هستند و ارتباط بین توسعه دهندگان را امکان پذیر می کنند.
یک سیستم طراحی در واقع بیان تمام جنبه های طراحی و فرآیندهای ضمنی در ایجاد عناصر جدید با استفاده از کارهای تکراری است. این سیستم با نکاتی مانند سبک نوشتن نسخه ، صدا و لحن ، حرکت و … سروکار دارد. سیستم های طراحی دارای راهنماهای سبک و کتابخانه های الگو هستند.
کتابخانه های الگو تمام عناصر رابط کاربر گرافیکی مانند دکمه ها ، چشمک زدن فرم ، هشدارها ، حالت شناور از هر عنصر و موارد دیگر را جمع آوری می کنند.
راهنمای سبک همه موارد استفاده را برای تایپوگرافی ، وزن و مقیاس ، حاشیه ، شبکه ، نماد و پالت رنگ جمع آوری می کند. این تعاریف شامل سبک های CSS است که برای ایجاد یک اتصال مستقیم و سهولت در تغییرات آینده بر روی هر عنصر اعمال می شود.
AI در همه‌جا، طراحی برای حفظ ایمنی و حریم خصوصی
الگوریتم های هوش مصنوعی فقط به 100 لایک نیاز دارند تا بتوانند در پیش بینی شخصیت شما دقیق تر از مادر باشند. شرکت هوش مصنوعی چینی Sense Time در حال بررسی و طبقه بندی گسترده مردم است. آنها حتی به لطف سیستم تشخیص چهره در زمان واقعی ، توانستند یک مجرم را در یک کنسرت دستگیر کنند.
هوش مصنوعی در همه جا وجود دارد ، بنابراین ما واقعاً باید از هوش مصنوعی برای محافظت از حریم خصوصی ، امنیت و شفافیت خود استفاده کنیم.
یادگیری ماشینی از طریق فن آوری‌های وب
از یادگیری ماشینی چه می آموزیم و الگوی آن چیست؟ بهتر است ابتدا با ML شروع کنید. چگونه آموزش داده می شود و چگونه می توانیم آن را پیاده کنیم؟
خوشبختانه امسال پر از نمونه هایی از آزمایش های وب هوش مصنوعی بوده است. بسیاری از آنها به راحتی در پروژه ها یا آزمایش های نمونه اولیه دیگر مبتنی بر کتابخانه های js مانند TensorFlow.js قابل استفاده هستند زیرا به معماری پیچیده سرور نیاز ندارند.
TensorFlow.js ابزاری بسیار قدرتمند مبتنی بر Node.js است که می توانیم از آن با مدلهای ML JavaScript استفاده کنیم و یا حتی می توانیم با آموزش آنها یا بازیابی مدلهای موجود آن را ایجاد کنیم. ما فقط با طرف مشتری ارتباط برقرار می کنیم و این بدان معنی است که سرعت بسیار بالا است.
