⁠⁣🔥آمار نشان می دهد فقط 3% از مراجعه کنندگان به #فروشگاه_اینترنتی شما ممکن است در همان اولین بازدید خرید کنند. حداقل کار ممکن که برای 97% دیگر میتوان انجام داد، دریافت اطلاعات تماس آن ها مثلا ایمیل ⁣قبل از خروج است تا بتوان آن ها را به مشتریان بالقوه تبدیل کرد.

برای این کار می توان از #exit_popup ها یا همان پنجره های خروج استفاده کرد. در پنجره خروج می توانید یک کد تخفیف جهت اولین خرید یا هزینه رایگان ارسال برای آن هایی که ایمیل خود را وارد می کنند را ⁣پیشنهاد دهید.

#marketing #ecommerce

⁣✅@coderszone

⁠⁣⁣⁣🔥 تا به حال به این نکته توجه کرده اید که چرا کمپانی های بزرگی همچون #facebook، #twitter ، #Paypal و... رنگ آبی را برای خود انتخاب کرده اند؟

دلیل ساده است: آبی یک رنگ خنثی از نظر جنسیتی است که تقریبا همه مردان و زنان به آن علاقمندند. در نتیجه انتخاب رنگ آبی می تواند گزینه ای مناسب برای #اپلیکیشن شما نیز باشد.

#UI #X #frontend #application

⁣✅@coderszone

⁣⁣⁣⁣⁣⁣🔥 در طراحی #tab_bar ها برای #app های موبایل، تنها به #آیکن ها
بسنده نکنید و از متن هایی که نشان دهنده عملکرد آن ها هستند نیز استفاده کنید.

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

#frontend #UI #UX #android #iOS

⁣✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 #طرح خلاقانه به کارگیری #radio_button ها

🌐https://goo.gl/hfRaST

#frontend #UI

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 #فریمورک #VueJs با حدود 124 هزار star و 18 هزار fork در #github عنوان محبوبترین پروژه #frontend در سال 2018 را به خود اختصاص داده است.

#UI #javascript

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 شیوه تاثیرگذاری #بلاکچین روی طراحی #وب در سال ۲۰۱۹

🌐⁣https://goo.gl/vt7ZbW

#article

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 زمانی که #فرم ها چند صفحه ای باشند استفاده از #stepper ها واجب می شود. آن ها به #کاربر کمک می کنند که بدانند هم اکنون در چه مرحله ای هستند و چه مراحلی را گذرانده اند.

برای فرم های desktop استپرهای خطی مناسبند اما برای فرم های #موبایلی استفاده از استپرهای #radial پیشنهاد می شود.

استفاده از #stepper های خطی خوانایی عناوین هر مرحله و اطلاع از میزان پیشرفت را کاهش می دهد.

#frontend #UI #UX #android #iOS

⁣✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 بجز #برنامه‌نویسی، #برنامه‌نویسان چه چیزهای دیگری را باید یاد بگیرند؟

🌐⁣https://goo.gl/UuJ1Ej

#programming #article

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 استفاده از #DevTools مرورگر #کروم برای اعمال تغییرات بر روی عناصر صفحه و مشاهده همزمان آن تغییرات کاری ساده و لذت بخش است. اما زمانی که تغییرات زیاد می شوند، گاهی نیاز می شود که این تغییرات را با آنچه که از ابتدا بوده اند مقایسه کنیم.

برای این کار می توان از ابزار #Changes استفاده کرد. این ابزار، تغییرات را به شیوه ای که در نرم افزارهای #git متداول است نمایش داده و امکان لغو آن ها را نیز فراهم می کند.

💡 برای مشاهده نحوه عملکرد gif را در اندازه بزرگ ببینید.

🖼https://goo.gl/c8zqUQ

#chrome #UI #frontend #browser

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 #طرح خلاقانه در پیاده سازی #pull_to_refresh

#UI #frontend #android #iOS

✅ @coderszone

🔥 اندر احوالات رابطه #مشتری و #طراح

#UI #frontend

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 زمانی که دکمه ای را در صفحه قرار می دهید، پس زمینه آن را #reset کنید. در غیر اینصورت در مرورگرهای مختلف، متفاوت نشان داده می شود. تصویر نمایشی، یک دکمه با خصوصیات پیش فرض را در مرورگرهای #chrome و #safari نشان میدهد. safari آن را با پس زمینه خاکستری نشان می دهد.

🌟 به صورت زیر می توان button ها را reset کرد:

button {
  appearance: none;
  background: transparent;
  /* Other styles */
}

#frontend #UI #CSS

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 کتابخانه Hover.css مجموعه ای از انیمیشن های مبتنی بر #CSS است که به صورت خاص فقط برای وضعیت hover عناصر ایجاد شده است.

انیمیشن های Hover.css را می توان تقریبا به هر عنصری اعمال کرد. به علاوه امکان سفارشی سازی آن ها در قالب CSS ، #Sass و #LESS نیز فراهم است.

🌐⁣http://ianlunn.github.io/Hover

#UI #frontend

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 چرا اوضاع اقتصادی #برنامه_نویسان رضایت بخش نیست؟

🌐⁣https://goo.gl/r16e8v

#programming #article

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 آیا می دانستید می توانید با استفاده از دستور console.table در مرورگر #کروم، #object های جاوااسکریپتی را به صورت جدول نمایش دهید؟

#javascript #chrome #browser

✅ @coderszone

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣🔥 نمونه #طرح #اپلیکیشن جستجوی رستوران

#UI #frontend #android #iOS

✅ @coderszone

⁠⁣🔥 تا جایی که میتوانید از #label ها استفاده نکنید.

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

برای مثال در یک #فروشگاه_اینترنتی، جهت نمایش موجودی یک کالا به جای عبارت "موجودی در انبار: 12 عدد" از "12 عدد موجود" استفاده کنید.

یا در یک وبسایت املاک به جای عبارت "تعداد اتاق : 3" از "3 اتاقه" استفاده کنید.

#tips #UI #UX #frontend #digital_marketing

⁣✅@coderszone

⁠⁣⁣🔥 قبل از اینکه یک #select_menu را در صفحه قرار دهید به این سوال پاسخ دهید که آیا کاربر گزینه ای که می خواهد انتخاب کند را از قبل می داند ؟ در صورتی که جواب مثبت است به جای استفاده از یک select menu ساده از فیلد ⁣autocomplete استفاده کنید.

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

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

#UI #UX #frontend

⁣✅@coderszone

⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣🔥 آخرین آمار نشان می دهد مرورگر #chrome با اختلاف فاحشی نسبت به سایر مرورگرهای رایج، محبوبترین مرورگر در سال 2018 بوده است.

#browsers #frontend

✅ @coderszone

🔥 نمونه #طرح دیگری در پیاده سازی #pull_to_refresh

#UI #frontend #android #iOS

✅ @coderszone