رابط کاربری بدون تجربه کاربری مثل یه زیبای بدون مغز میمونه. به تنهایی کافی نیست.

-uxgoodies
#UI #UX

@frontdevir

یک ستونه طراحی کنید.

طراحی یک ستونه باعث میشود که کاربر سریع‌ اطلاعتش را‌ وارد کند و در نهایت
منجر به تجربه کاربری بهتری خواهد شد.

#UX

@frontdevir

با استفاده صحیح از فاصله ها، رابط های زیبایی شناختی مطلوبی بسازید. padding و margin های لازم رو به کامپوننت و المنت هاتون بدید.

#UI

@frontdevir

مواردی که UI/UX دیزاینر ها باید بدانند.
#UI #UX

@frontdevir

📖کتاب 5 اصل SOLID

به زبان فارسی

#SOLID

@frontdevir

تجربه کاربری

-credit: khoshnaz

#UX

@frontdevir

دنیای غذاها

-credit: uxcel

@frontdevir

بعضی مواقع لازم نیست سخت کد بنویسید.

#js
@frontdevir

Flexible Margin

🔸 افزایش در صفحه نمایش های بزرگ
🔸 کاهش در صفحه نمایش های کوچک (0 پیکسل برای موبایل)

#ui #ux #uidesign

@frontdevir

Color Base!

سعی کنید از رنگ سیاه کامل (000#) استفاده نکنید. بجای اون میتونید از رنگ های خاکستری که خیلی سیاه نیستن استفاده کنید.

#UI #design

@frontdevir

اکستنشن Draw.io در Vs Code

میتونید با استفاده از این اکستنشن به راحتی با Draw.io تو محیط Vs Code کار کنید.

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

#tools

@frontdevir

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

#UX #UI

@frontdevir

زمانی که از badge(نشان) های notification استفاده می کنید یک بوردر به رنگ بکگراند جایی که آیکون های شما در آنجا قرار دارند اضافه کنید. با این کار UI شما بی نظیر میشه و یخورده بیشتر به چشم میاد.

#UI

@frontdevir

کاربرهاتون رو با صفحه شلوغ گیج نکنید. فیچر های پراستفاده رو برجسته تر و بیشتر کنید.
طبق یکی از تجربیات Airbnb زمانی که از UI های شلوغ کمتر استفاده کردند، اشتراک گذاری مطالب 52 درصد افزایش پیدا کرد.

#UI #UX

@frontdevir

هنوز اینو ندیدید؟

اضافه کردن قابلیت جستجو به Dropdown.

با HTML بیشتر آشنا بشیم.

@frontdevir

خیلی مهمه که تمام آیکون های شما از یک استایل واحد برای هارمونی بهتر پیروی کنن(shape, fill, size, ضخامت).

#UI

@frontdevir

انواع تست:

تست | Unit Test: در این نوع تست یکسری فانکشن‌هایی وجود دارند که این وظیفه را دارند تا عملکرد سایر فانکشن‌ها را تست کنند.

تست | Integration Test: این تست اطمینان حاصل می‌کند که کامپوننت‌های مختلف به خوبی با یکدیگر سازگار هستند.

تست | Acceptance Test: این تست همچون مورد قبل است با این تفاوت که بیشتر از بُعد تجاری نرم‌افزار را محک می‌زند.

تست | UI Test: این تست تضمین می‌دهد که وقتی رابط کاربری در اختیار کاربران قرار گیرد، همان‌طور که از آن انتظار می‌رود کار خواهد کرد.

@frontdevir

اضافه کردن alt به عکسایی که از طریق content توی CSS استفاده میکنید.

کافیه از اسلش (/) بعد url استفاده کنید.

#CSS #HTML

@frontdevir

❇️ ابزار های کاربردی برای یک Web Developer
#معرفی_ابزار

این ریپازیتوری، بهترین ابزار های کاربردی ایی که معمولا یه برنامه نویس وب لازمش میشه رو به همراه دسته بندی های زیر لیست کرده.

🔹Image Compressor
🔸Javanoscript Minifer
🔹CSS Minifier
🔸JavaScript Beautifier
🔹Unminify HTML, CSS and JS
🔸Unminify/Formating JSON - Check/Validating JSON
🔹Browse JSON in TreeView
🔸Regex (Regular Expression) Tester and Highlighting
🔹Unicode Converter
🔸Url Decoder/Encoder
🔹Converter Toolbox
🔸Hash Text and File
🔹Web Developer Toolbox
🔸Check Domain and Whois
🔹IP to Location
🔸Website Traffic Statistics
🔹SEO Checker
🔸Rank Checker
🔹Analytics & Tracking
🔸Speed Checker and Performance Optimization
🔹Webiste Monitoring / Uptime Checker
🔸Text Compare / Difference Checker
🔹Port Checker
🔸DNS Checker
🔹DNS Lookup
🔸SSL/TLS Checker
🔹Security Checker
🔰آدرس ریپازیتوری گیتهاب
https://github.com/mjebrahimi/Awesome-Tools-For-WebDevelopers

نسخه آلفای Bootstrap 5 منتشر شد

در آپدیت جدید دیگه هیچ وابستگی به jQuery وجود نداره همچنین فرم ها تغییراتی داشتن و قسمت داکیومنت هم آپدیت شده.
تغییراتی در grid ایجاد شده که xxl هم به سایز ها اضافه شده و col ها به صورت پیش‌فرض position : relative ندارند.

از همه مهم تر اینکه قراره RTL هم به Bootstrap 5 اضافه شه.

https://v5.getbootstrap.com/

#bootstrap

@frontdevir