https://virgool.io/feed/@rahariahi جستجوگر.. fa 2026-06-15 22:29:59 https://files.virgool.io/upload/users/4807394/avatar/J7W56v.jpg?height=120&width=120 https://virgool.io/@rahariahi https://virgool.io/@rahariahi/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%DA%AF%D8%B1%D8%A7%D9%81%DB%8C%D8%B3%D8%AA-%D9%88-uiux-%DA%86%DB%8C%D8%B3%D8%AA-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%DA%A9%D8%A7%D9%85%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%D9%85%D8%B3%DB%8C%D8%B1-%D8%B4%D8%BA%D9%84%DB%8C-%D8%AF%D8%B1-%D8%AF%D9%86%DB%8C%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-us6lizn6vqei اگر به دنیای طراحی علاقه‌مند باشید، احتمالا بارها دو عنوان شغلی «گرافیست» و «طراح UI/UX» را شنیده‌اید. بسیاری از افراد به خصوص کارفرمایان در کشور تصور می‌کنند این دو حوزه یکسان هستند یا وظایف مشابهی دارند٬ در صورتی که تفاوت‌های مهم و زیادی بین اون‌ها وجود دارد. شناخت تفاوت گرافیست و UI/UX به شما کمک می‌کند مسیر شغلی مناسب‌تری انتخاب کنید و مهارت‌های مورد نیاز در بازار کار را بهتر بشناسید. بنابراین در این مقاله به بررسی کامل تفاوت طراحی گرافیک و طراحی UI/UX، و وظایف هر کدام در بازار کار و آینده شغلی اون‌ها می‌پردازیم.گرافیست چیست؟به صورت ساده میتوان گفت که گرافیست یا طراح گرافیک فردی هست که با استفاده از عناصر بصری مانند رنگ، تصاویر، فونت‌ها و چیدمان مناسب، پیام یک برند یا کسب‌وکار را به مخاطب منتقل می‌کند. هدف اصلی طراحی گرافیک، برقراری ارتباط بصری با مخاطب است. یک گرافیست تلاش می‌کند طرحی خلق و پیاده سازی کند که هم زیبا به نظر برسد و هم پیام مورد نظر را به بهترین شکل به مخاطب منتقل کند.وظایف گرافیستاین حوزه گستردگی بسیار زیادی دارد، اما از وظایف یک طراح گرافیک می‌توان به موارد زیر اشاره کرد:طراحی لوگوطراحی پوستر و بنر تبلیغاتیطراحی کارت ویزیتطراحی بروشور و کاتالوگطراحی بسته‌بندی محصولاتطراحی هویت بصری برندطراحی پست و استوری شبکه‌های اجتماعیطراحی اسلایدر و بنرهای مربوط به سایت و اپلیکیشنطراحی تبلیغات چاپی و دیجیتالUI/UX چیست؟UI مخفف User Interface و UX مخفف User Experience است. UI به طراحی رابط کاربری اشاره دارد، یعنی ظاهر و بخش‌های قابل مشاهده توسط مخاطب در یک وب‌سایت یا اپلیکیشن. UX به تجربه کاربری اشاره دارد، یعنی احساس، تجربه و میزان راحتی کاربران هنگام استفاده از یک محصول(سایت یا اپلیکیشن).یک طراح UI/UX وظیفه دارد محصولی طراحی کند که علاوه بر زیبایی، استفاده از آن برای کاربران ساده و سریع باشد.وظایف طراح UI/UXمهم‌ترین وظایف یک طراح UI/UX عبارت‌اند از:تحقیق درباره کاربرانتحلیل رفتار مخاطبانطراحی وایرفریمطراحی فلوهای کاربریساخت پروتوتایپطراحی رابط کاربریتست کاربردپذیریبهبود تجربه کاربریهمکاری با تیم توسعه و برنامه‌نویسانمهم‌ترین تفاوت گرافیست و UI/UXاگه بخواهیم مهم‌ترین تفاوت این دو حوزه را در یک جمله بیان کنیم می‌توانیم بگوییم که گرافیست بر زیبایی بصری تمرکز می‌کند اما طراح UI/UX بر تجربه و تعامل کاربران تمرکز دارد، که این دو حوزه کاملا از هم متفاوت هستند.مهارت‌های مورد نیاز گرافیستیک گرافیست حرفه‌ای باید در زمینه‌های زیر مهارت داشته باشد:رنگ‌شناسیتایپوگرافیترکیب‌بندیطراحی لوگوبرندینگتصویرسازیاصول تبلیغاتمهارت‌های مورد نیاز UI/UX Designerیک طراح UI/UX علاوه بر مهارت‌های بصری باید توانایی تحلیل کاربران را نیز داشته باشد:طراحی رابط کاربریطراحی تجربه کاربریتحقیق کاربرمعماری اطلاعاتطراحی تعاملیطراحی وایرفریمتست کاربردپذیریطراحی سیستمبه همین دلیل UI/UX معمولا ترکیبی از طراحی، روان‌شناسی و حل مسئله محسوب می‌شود.تفاوت ابزارهای گرافیست و UI/UXیکی دیگر از تفاوت‌های مهم این دو حوزه در ابزارهای کاری هست که به کار می‌برند.ابزارهای محبوب گرافیستPhotoshopIllustratorInDesignCorelDRAWابزارهای محبوب UI/UXFigmaAdobe XDSketchFigJamMiroالبته بسیاری از طراحان UI نیز از Photoshop و Illustrator برای انجام برخی امور طراحی مانند طراحی آیکون استفاده می‌کنند.تفاوت گرافیست و UI/UX در فرآیند طراحیگرافیست معمولا با دریافت نیاز کارفرما، طراحی بصری را آغاز می‌کند. اما فرآیند طراحی UI/UX پیچیده‌تر است و نیاز به تحقیق کاربران، تحلیل رقبا، طراحی پرسونا، طراحی فلوهای کاربری، طراحی وایرفریم، ساخت پروتوتایپ، تست کاربران، طراحی نهایی رابط کاربری می‌باشد.به همین دلیل هست که طراحی UI/UX بیشتر یک فرآیند حل مسئله است تا صرفا خلق یک طرح زیبا.آیا گرافیست می‌تواند UI/UX Designer شود؟بله. از آنجا که گرافیست‌ها درک خوبی از رنگ، تایپوگرافی و اصول طراحی بصری دارند، می‌توانند با یادگیری مباحث UX و تحقیق کاربران وارد بازار کار UI/UX شوند. البته برای موفقیت در این حوزه باید مهارت‌های جدیدی مانند تحلیل رفتار کاربران، معماری اطلاعات و طراحی تجربه کاربری را نیز یاد بگیرند.بازار کار گرافیست بهتر است یا UI/UX؟هر دو حوزه فرصت‌های شغلی مناسبی دارند اما روند بازار در سال‌های اخیر نشان می‌دهد که تقاضا برای طراحان UI/UX رشد چشمگیری داشته است. افزایش تعداد استارتاپ‌ها، اپلیکیشن‌ها و کسب‌وکارهای آنلاین باعث شده شرکت‌ها به دنبال متخصصانی باشند که بتوانند تجربه کاربران را بهبود دهند.بازار کار طراح گرافیستآژانس‌های تبلیغاتیشرکت‌های برندینگچاپ و نشرتولید محتواشبکه‌های اجتماعیبازار کار UI/UXاستارتاپ‌هاشرکت‌های فناوریفروشگاه‌های اینترنتیشرکت‌های نرم‌افزاریپروژه‌های بین‌المللیدرآمد گرافیست بیشتر است یا UI/UX؟به این سوال نمی‌توان به طور کلی پاسخ داد به دلیل اینکه به عواملی مثل سطح مهارت، سابقه کار، کیفیت نمونه‌کار، موقعیت جغرافیایی و نوع پروژه بستگی دارد. اما به طور کلی در بسیاری از کشورها و همچنین بازار فریلنسینگ بین‌المللی، طراحان UI/UX به دلیل تخصصی بودن مهارت‌هایشان درآمد بیشتری دارند.برای ورود به بازار کار کدام مسیر بهتر است؟اگه به هنر، طراحی پوستر، لوگو و تبلیغات علاقه دارید، طراحی گرافیک انتخاب مناسبی برای شما هست. اما اگه به حل مسئله، تحلیل رفتار کاربران، طراحی اپلیکیشن و محصولات دیجیتال علاقه‌مند هستید، مسیر UI/UX گزینه بهتری خواهد بود.آیا یادگیری UI/UX سخت‌تر از گرافیک است؟به طور کلی یادگیری UI/UX به دلیل نیاز به درک رفتار کاربران، تحقیقات کاربری و تست محصول، پیچیدگی بیشتری نسبت به طراحی گرافیک دارد. اما این موضوع به معنای سخت بودن اون نیست. با تمرین مستمر و انجام پروژه‌های واقعی می‌توان در این حوزه به مهارت بالایی رسید.آینده شغلی گرافیست و UI/UXهر دو حوزه آینده خوبی دارند اما با رشد فناوری و دیجیتالی شدن کسب‌وکارها باعث شده نیاز به متخصصان UI/UX روزبه‌روز بیشتر شود. در سال‌های آینده شرکت‌ها اهمیت بیشتری به تجربه کاربران برای استفاده از محصول خود می‌دهند به همین دلیل فرصت‌های شغلی بیشتری برای طراحان UI/UX ایجاد شده است. در مقابل، طراحی گرافیک نیز همچنان بخش بسیار مهمی از برندینگ، تبلیغات و بازاریابی است.جمع‌بندیگرافیست به زیبایی بصری، برندینگ و انتقال پیام تمرکز دارد، در حالی که طراح UI/UX وظیفه دارد تجربه‌ای ساده، کاربردی و لذت‌بخش برای کاربران ایجاد کند. اگه به دنیای هنر، تبلیغات و طراحی بصری علاقه دارید، طراحی گرافیک می‌تواند انتخاب مناسبی باشد. اما اگر به حل مسئله، تحلیل رفتار کاربران و طراحی محصولات دیجیتال علاقه‌مند هستید، یادگیری UI/UX فرصت‌های شغلی گسترده‌تری در اختیار شما قرار خواهد داد.در نهایت، هر دو مسیر ارزشمند هستند و انتخاب بهترین گزینه به علاقه، استعداد و اهداف شغلی شما بستگی دارد. رها ریاحی | Raha Riahi رها ریاحی | Raha Riahi Mon, 15 Jun 2026 13:30:01 +0330 https://virgool.io/@rahariahi/atomic-design-%DA%86%DB%8C%D8%B3%D8%AA-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%DA%A9%D8%A7%D9%85%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A7%D8%AA%D9%85%DB%8C%DA%A9-%D8%AF%D8%B1-uiux-hupr75usiqze اگه تا امروز با طراحی رابط کاربری کار کرده باشی، احتمالا با چالش‌هایی مثل نظم‌دادن به کامپوننت‌ها، ساختن یک دیزاین سیستم قابل‌توسعه، و هماهنگ‌کردن طراحی در صفحات مختلف روبه‌رو شده‌اید.طراحی روشی هست که به طراحان UI/UX کمک می‌کند رابط‌های کاربری را به‌صورت سیستم‌مند، قابل‌استفاده مجدد و مقیاس‌پذیر طراحی کنند.در این مقاله می‌خواهیم ببینیم Atomic Design چیست، چه کاربردی دارد، از چه بخش‌هایی تشکیل شده و چرا برای طراحی محصول اهمیت زیادی دارد.Atomic Design چیست؟Atomic Design یک متدولوژی طراحی رابط کاربری هست که در این روش، اجزای رابط کاربری مثل عناصر یک موجود زنده در نظر گرفته می‌شوند که از ساده‌ترین بخش‌ها شروع شده و به مرور به ساختارهای پیچیده‌تر تبدیل می‌شوند.به زبان ساده، Atomic Design یعنی:رابط کاربری را به اجزای کوچک‌تر تبدیل کنیم،اون‌ها رو به‌صورت منطقی کنار هم قرار دهیم،و در نهایت یک سیستم طراحی منظم و قابل توسعه بسازیم.این روش به‌خصوص در طراحی Design System، کامپوننت‌های رابط کاربری و محصولات بزرگ و مقیاس‌پذیر بسیار کاربردی است.چرا Atomic Design مهم است؟در پروژه‌های طراحی، یکی از بزرگ‌ترین مشکلات این هست که هر صفحه یا هر بخش از محصول، کمی متفاوت از بخش دیگر طراحی بشه. نتیجه چی میشه؟یک رابط کاربری ناهماهنگ و نامنظم.بنابراین استفاده از Atomic Design باعث یکپارچگی٬ جلوگیری از تکرار می‌شود و همچنین ساخت و نگهداری Design System را راحت تر می‌کند و همکاری بین طراح و توسعه دهنده رو بهتر و سرعت طراحی صفحات جدید رو بالاتر می‌برد. اگه بخواهیم خیلی دقیق‌تر نگاه کنیم، Atomic Design در واقع یکی از پایه‌های مهم طراحی محصول مدرن است.اجزای Atomic Design چیست؟Atomic Design از ۵ لایه اصلی تشکیل شده :1. Atoms | اتم‌هامثل:دکمهآیکنرنگفونتلیبل2. Molecules | مولکول‌هامولکول‌ها در اتمیک دیزاین از ترکیب چند اتم ساخته میشه:فیلد جستجو + دکمه سرچلیبل + input + پیام خطاآواتار + نام کاربر + زمانمولکول‌ها لایه‌‌هایی هستند که یک بخش کاربردی از رابط کاربری را شکل می‌دهند.3. Organisms | ارگانیسم‌هاارگانیسم‌ها از ترکیب چند مولکول و اتم ساخته می‌شوند و بخش‌های بزرگ‌تر رابط کاربری را تشکیل می‌دهند:هدر سایتکارت محصولفرم ثبت‌نامناوبری اصلی4. Templates | قالب‌هادر این مرحله هنوز محتوای نهایی وارد نشده، اما جای بخش‌های مختلف مشخص است.جای هدرجای سایدبارجای محتوای اصلیجای فوتر5. Pages | صفحاتصفحات، نسخه نهایی قالب‌ها هستند که با محتوای پر می‌شود که طراح می‌تواند ببیند کل سیستم در حالت واقعی چگونه دیده و استفاده می‌شود.Atomic Design چه تفاوتی با Design System دارد؟خیلی‌ها این دو مفهوم را با هم اشتباه می‌گیرند. در واقع Atomic Design یک روش برای ساختن اجزای UI هست، اما Design System یک سیستم کامل از قوانین، کامپوننت‌ها و استانداردهای طراحی می‌باشد.به صورت ساده‌تر یعنی:Atomic Design = متدولوژی ساختDesign System = پیاده سازی محصول نهایی همراه با قوانینAtomic Design یکی از بهترین روش‌ها برای ساخت یک Design System منظم می‌باشد.مزایای Atomic Design برای طراحان UI/UXاگه بخواهیم خلاصه‌تر نگاه کنیم، مهم‌ترین مزایای طراحی اتمیک این‌ها هستند:افزایش سرعت طراحیکاهش خطا و تناقضقابلیت استفاده مجدد از اجزامستندسازی بهتر طراحیهمکاری راحت‌تر با تیم توسعهمقیاس‌پذیری بالا برای محصولساخت Design System حرفه‌ای‌تراشتباهات رایج در Atomic Designبعضی از دیزاینر‌ها موقع استفاده از این روش بیش از حد پیچیده‌اش می‌کنند و همه چیز را مجبور می‌شوند در قالب اتم ببینند و بین Atomic Design و Design System تفاوت قائل نمی‌شوند. در واقع هدف از استفاده Atomic Design ساده‌تر و منظم کردن فرآیند طراحی هست و سخت‌تر کردن آن.جمع‌بندیAtomic Design یا طراحی اتمیک یکی از مهم‌ترین متدولوژی‌ها در دنیای طراحی UI/UX هست که به طراحان کمک می‌کند اجزای رابط کاربری را به‌صورت اصولی، قابل‌استفاده مجدد و مقیاس‌پذیر بسازند. رها ریاحی | Raha Riahi رها ریاحی | Raha Riahi Fri, 12 Jun 2026 14:41:45 +0330 https://virgool.io/@rahariahi/figma-%DA%86%DB%8C%D8%B3%D8%AA-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%DA%A9%D8%A7%D9%85%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%D8%A7%D9%86-uiux-ezhhgbsyvhze اگر در مسیر یادگیری طراحی رابط کاربری (UI) و تجربه کاربری (UX) هستید، قطعا اسم فیگما رو زیاد شنیده‌اید. کمتر تیمی را می‌بینید که برای طراحی محصول خود از ابزارهای قدیمی و آفلاین استفاده کند. بنابراین انتخاب بیشتر طراحان محصول استفاده از فیگما هست که در این مقاله، به بررسی دقیق فیگما و نقش کلیدی اون در فرآیند طراحی محصول می‌پردازیم.فیگما (Figma) چیست؟به زبان ساده، فیگما (Figma) یک ابزار طراحی گرافیکی مبتنی بر وب و برداری هست که به‌طور اختصاصی برای طراحی رابط کاربری (UI) و تجربه کاربری (UX) ساخته شده . برخلاف نرم‌افزارهای گرافیکی دیگه که نیاز به نصب روی سیستم‌عامل‌های خاص داشت، فیگما در مرورگر اجرا می‌شه و همین موضوع، نقطه قوتی برای استفاده از این ابزار هست.چرا فیگما به محبوب‌ترین ابزار طراحی تبدیل شد؟۱. قابلیت‌های بی‌نظیرشاید بزرگترین مزیت فیگما، امکان استفاده تیمی به صورت همزمان (Real-time) باشه. درست مثل کار کردن در Google Docs، در فیگما هم چندین طراح یا مدیر محصول می‌تونند همزمان روی یک فایل کار کنند، کامنت بگذارند و تغییرات را لحظه‌ای ببینند.۲. پلتفرم ابریچون فیگما تحت‌وب هست، شما با هر سیستم‌عاملی (ویندوز، مک یا لینوکس) و فقط با یک مرورگر می‌تونید به پروژه‌هایتان دسترسی داشته باشید. و دیگه نگران گم شدن فایل‌ها یا نسخه‌های مختلف نیستید٬ همه چیز در فضای ابری (Cloud) ذخیره میشه.۳. یکپارچگی مراحل طراحیفیگما تنها یک ابزار طراحی نیست٬ یک جعبه‌ابزار کامل هست که به شما امکان طراحی Wireframe, Mockup, Prototype را می‌دهد.۴. دیزاین سیستم (Design System)اگه با مفهوم دیزاین سیستم (Design System) آشنا باشید، می‌دونید که مدیریت کامپوننت‌ها و استایل‌ها چقدر چالش‌برانگیز هست. فیگما با قابلیت Shared Libraries به شما اجازه می‌ده کتابخانه‌ای از کامپوننت‌های استاندارد بسازید که در کل تیم سینک باشد. اگر شما در یک‌جا تغییری اعمال کنید، در تمام فایل‌های طراحی اون تغییرات به‌روزرسانی می‌شود.مقایسه فیگما با ابزارهای دیگرشاید بپرسید پس ابزارهایی مثل Sketch یا Adobe XD چی؟ استفاده از کدوم یک از این ابزارها برای طراحی محصول مناسب هست؟فیگما: رایگان، تحت‌وب، مناسب برای کار تیمی.Sketch: فقط مخصوص مک (Mac)، آفلاین، نیاز به اکستنشن‌.Adobe XD: بسیار سریع، اما در قابلیت‌های کار تیمی و کامیونیتی به گرد پای فیگما هم نمی‌رسد.چطور یادگیری فیگما را شروع کنیم؟برای یادگیری فیگما، بهترین راه شروع از خود سایت رسمی Figma و تماشای آموزش‌های کوتاه هست. اما نکته مهم این هست که بهتر هست فیگما رو در حین کار یاد بگیرید. سعی کنید یک طراحی ساده رو برای شروع در فیگما پیاده‌سازی کنید تا ابزارهای پنل راست و چپ دستتان بیاید.نتیجه‌گیری٬ آیا استفاده از فیگما ضروری است؟بله٬ اگه به عنوان یک طراح یا کسی که قصد ورود به دنیای محصول دیجیتال را دارد فعالیت می‌کنید، یادگیری فیگما یک مهارت ضروری برای ورود در این بازار کار هست. فیگما به شما کمک می‌کند سریع‌تر طراحی کنید، بهتر با تیم توسعه تعامل داشته باشید و محصولی باکیفیت‌تر تحویل دهید. رها ریاحی | Raha Riahi رها ریاحی | Raha Riahi Mon, 08 Jun 2026 18:52:31 +0330 https://virgool.io/@rahariahi/%D8%AA%D9%81%D8%A7%D9%88%D8%AA-design-system-%D9%88-ui-kit-%DA%86%DB%8C%D8%B3%D8%AA-%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%DA%A9%D8%A7%D9%85%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%D8%A7%D9%86-uiux-iyjzezc8k5qc اگه در حوزه طراحی رابط کاربری (UI) و طراحی تجربه کاربری (UX) فعالیت می‌کنید، احتمالا بارها با اصطلاحات Design System و UI Kit مواجه شده‌اید. بسیاری از طراحانی که تازه شروع به کار در این حوزه کردند٬ تصور می‌کنند این دو مفهوم یکسان هستند، اما در واقع تفاوت‌های مهمی بین اون‌ها وجود دارد.توضیح در رابطه با تفاوت Design System و UI Kit به شما کمک می‌کنه تا تصمیم بگیرید برای پروژه خود به یک مجموعه کامپوننت ساده نیاز دارید یا باید یک سیستم طراحی کامل رو ایجاد کنید.UI Kit چیست؟UI Kit یا کیت رابط کاربری مجموعه‌ای از عناصر و کامپوننت‌های آماده هست که برای طراحی صفحات مختلف استفاده میشه. این مجموعه معمولا شامل دکمه‌ها، فیلدهای ورودی، کارت‌ها، منوها، فرم‌ها، آیکون‌ها و سایر عناصر رابط کاربری هست.هدف اصلی UI Kit افزایش سرعت طراحی و جلوگیری از ساخت مجدد المان‌های تکراری هست. به عنوان مثال زمانی که یک دیزاینر در فیگما مجموعه‌ای از دکمه‌ها، فرم‌ها و کارت‌های استاندارد رو ایجاد می‌کنه، در واقع یک UI Kit ساخته.به همین دلیل UI Kit گزینه مناسبی برای استارتاپ‌ها، پروژه‌های کوچک و تیم‌های طراحی محدود محسوب میشه.Design System چیست؟Design System یا سیستم طراحی یک قدم فراتر از UI Kit هست. در واقع Design System تنها مجموعه‌ای از کامپوننت‌ها نیست، بلکه یک زبان مشترک میان طراحان، توسعه‌دهندگان و اعضای تیم محصول محسوب میشه.در یک Design System علاوه بر کامپوننت‌های رابط کاربری، قوانین استفاده از اون‌ها، استاندارد و قوانین، مستندات طراحی، اصول دسترسی‌پذیری، سیستم رنگ‌بندی، تایپوگرافی و الگوهای طراحی نیز تعریف میشه.به زبان ساده، Design System مشخص میکنه که هر کامپوننت چه زمانی، در چه شرایطی و با چه قوانینی باید پیاده سازی بشه.مهم‌ترین تفاوت Design System و UI KitUI Kit صرفا شامل اجزای آماده طراحی هست، اما Design System علاوه بر اجزا، نحوه استفاده از اون‌ها رو نیز مشخص می‌کنه.زمانی که شما یک UI Kit دارید، کامپوننت‌ها در اختیار شما هستند اما ممکن هست هر طراح اون‌ها رو به شیوه متفاوتی استفاده کنه. برعکس، Design System قوانین مشخصی برای استفاده از هر کامپوننت ارائه می‌ده و باعث میشه تمام اعضای تیم از یک استاندارد مشترک پیروی کنند.به همین دلیل در پروژه‌های بزرگ، استفاده از Design System اهمیت بسیار بیشتری دارد.آیا Design System شامل UI Kit می‌شود؟بله٬ در حقیقت هر Design System یک UI Kit هست اما هر UI Kit الزاما Design System نیست.میشه گفت UI Kit یکی از اجزای اصلی Design System محسوب میشه. به همین دلیل زمانی که یک تیم محصول تصمیم می‌گیره Design System ایجاد کنه، معمولا از همون UI Kit موجود شروع می‌کنه و به مرور مستندات، قوانین و استانداردهای لازم رو به آن اضافه می‌کنه.چه زمانی استفاده از UI Kit کافی است؟اگه در حال طراحی یک محصول برای یک شرکت یا فروشگاه کوچک هستید و تیم طراحی شما کوچک هست یا هنوز در مرحله MVP قرار دارید، استفاده از UI Kit می‌تونه کاملا کافی باشه.در این شرایط مهم‌ترین مسئله معمولا افزایش سرعت توسعه محصول هست و ایجاد یک Design System کامل ممکن هست زمان و هزینه زیادی از تیم بگیره.چه زمانی به Design System نیاز داریم؟زمانی که محصول شما رشد می‌کنه، تعداد صفحات یا لندینگ پیج‌ها افزایش پیدا می‌کنه و چندین طراح و توسعه‌دهنده روی پروژه کار می‌کنند، در این صورت نیاز به Design System پیدا می‌کنید.در چنین شرایطی نبود یک سیستم طراحی مشخص می‌تونه باعث ایجاد ناسازگاری در رابط کاربری بشه. ممکن هست چندین نسخه مختلف از یک دکمه یا فرم در محصول وجود داشته باشه و تجربه کاربری وا تحت تاثیر قرار بده.Design System این مشکل رو برطرف می‌کنه و باعث میشه تمام بخش‌های محصول ظاهری یکپارچه داشته باشند.مزایای Design System برای تیم‌های محصولیکی از مهم‌ترین مزایای Design System افزایش سرعت همکاری بین طراحان و توسعه‌دهندگان هست. زمانی که قوانین و کامپوننت‌ها به صورت استاندارد تعریف شده باشند، اعضای تیم زمان کمتری برای تصمیم‌گیری‌صرف می‌کنند.علاوه بر این، نگهداری محصول نیز ساده‌تر میشه. هر تغییری که در سیستم طراحی اعمال بشه می‌تونه در تمام بخش‌های محصول مورد استفاده قرار بگیره.جمع‌بندیاگه بخواهیم تفاوت Design System و UI Kit را در یک جمله توضیح بدیم، می‌تونیم بگیم:UI Kit مجموعه‌ای از کامپوننت‌های آماده طراحی هست، اما Design System یک چارچوب کامل شامل کامپوننت‌ها، قوانین، استانداردها و مستندات طراحی محسوب میشه.برای پروژه‌های کوچک و تیم‌های محدود، UI Kit معمولا کافی هست. اما زمانی که محصول رشد کنه و نیاز به هماهنگی بین چندین تیم وجود داشته باشه، Design System به یک ضرورت تبدیل میشه.به همین دلیل بسیاری از شرکت‌های بزرگ اول با یک UI Kit شروع می‌کنند و در ادامه اون رو به یک Design System کامل تبدیل می‌کنند. رها ریاحی | Raha Riahi رها ریاحی | Raha Riahi Sun, 31 May 2026 16:53:57 +0330 https://virgool.io/@rahariahi/%D8%AF%DB%8C%D8%B2%D8%A7%DB%8C%D9%86-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%AF%D8%B1-uiux-%DA%86%D8%B1%D8%A7-%D8%AA%DB%8C%D9%85-%D9%87%D8%A7%DB%8C-%D8%A8%D8%B2%D8%B1%DA%AF-%D8%A8%D9%87-%D8%A2%D9%86-%D9%86%DB%8C%D8%A7%D8%B2-%D8%AF%D8%A7%D8%B1%D9%86%D8%AF-hfgo62pa2onr اگه طراح محصول هستید یا در تیم‌های توسعه محصول کار می‌کنید، حتما بارها با این صحنه مواجه شدید که دکمه‌ای که در صفحه پروفایل قرار دارد با دکمه صفحه پرداخت از نظر سایز، رنگ و حتی گردی گوشه‌ها (Border Radius) فرق می‌کنه٬ اینجاست که همه چیز بهم ریخته می‌شه.دیزاین سیستم (Design System) دقیقا همون چیزیه که میاد تا به این بهم ریختگی پایان بده. در این مقاله قرار هست که از سیر تا پیاز دیزاین سیستم بگیم و ببینیم چرا داشتن اون برای هر بیزینسی از نان شب واجب‌تر هست.دیزاین سیستم چیست؟ (بیشتر از یک UI Kit ساده)خیلی‌ها فکر می‌کنند دیزاین سیستم همان UI Kit یا کتابخانه کامپوننت‌هاست. اما واقعیت این هست که دیزاین سیستم مثل یک موجود زنده هست. دیزاین سیستم مجموعه‌ای از استانداردها، مستندات، اصول طراحی و کامپوننت‌های قابل استفاده مجدد هست که به تیم‌ها کمک می‌کنه تا محصولی یکپارچه خلق کنند.اگه UI Kit رو یک جعبه مداد رنگی فرض کنیم، دیزاین سیستم در واقع همون کتاب راهنمای نقاشی هست که میگه هر رنگ کجا و چطور باید استفاده بشه.چرا دیزاین سیستم؟۱. سرعت زیاد در طراحی و توسعهوقتی همه چیز طبق یک اصول و قوانین خاصی از قبل طراحی شده و شکل گرفته٬ چرا از اول همه چیز رو بسازیم؟ با داشتن یک دیزاین سیستم، طراح و برنامه‌نویس وقتشون وا برای طراحی دوباره یک فیلد ورودی تلف نمی‌کنند و تمرکزشون رو روی حل مسئله (Problem Solving) می‌گذارنند.۲. یکپارچگی (Consistency)یوزر وقتی از اپلیکیشن شما به وب‌سایت‌تان میره، نباید احساس غریبی کنه. دیزاین سیستم باعث می‌شه تجربه کاربری (UX) در تمام پلتفرم‌ها یکسان باقی بماند.۳. کاهش هزینه‌ها و مقیاس‌پذیریبیزینس‌های بزرگ بدون دیزاین سیستم فلج می‌شوند. وقتی قرار باشد محصول بزرگ بشه، بدون یک سیستم منظم، هزینه‌های نگهداری و اصلاح کدها (Technical Debt) سر به فلک میکشه.اجزای سازنده یک دیزاین سیستمFigma: ابزار محبوب دنیای دیزاین که با قابلیت Variables و Auto Layout، ساخت سیستم رو راحت کرده.Storybook: بهترین ابزار برای مستندسازی کامپوننت‌های کد زده شده (مخصوص فرانت‌اندکارها).Zeroheight: پلتفرمی عالی برای نوشتن مستندات و راهنمای استفاده از دیزاین سیستم.چطور یک دیزاین سیستم را در تیم جا بیندازیم؟دیزاین سیستم یک پروژه نیست که تمام بشه، یک فرآیند است. اول باید نیازسنجی رو شروع کنید٬ برای تیم فنی توضیح بدید که دیزاین سیستمی که پیاده‌سازی نشه، فقط یک فایل زیبا در فیگماست. مستند سازی رو جدی بگیرید٬ بنویسید که هر المان کجا باید استفاده بشه و کجا نباید استفاده بشه.سخن پایانیدیزاین سیستم پلی هست بین خلاقیت طراح و منطق برنامه‌نویس. اگه می‌خواهید محصولی بسازید که کاربر بتونه به راحتی با اون کار کنه٬ از همین امروز به فکر ساخت یک دیزاین سیستم‌ باشید. رها ریاحی | Raha Riahi رها ریاحی | Raha Riahi Mon, 25 May 2026 21:51:55 +0330 https://virgool.io/@rahariahi/%D9%85%D9%88%DA%A9%D8%A7%D9%BE-mockup-%DA%86%DB%8C%D8%B3%D8%AA-%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D9%85%D8%B2%D8%A7%DB%8C%D8%A7%DB%8C-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-mockup-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-uiux-diwnrpo68vd6 در دنیای طراحی رابط کاربری (UI) و تجربه کاربری (UX)، تبدیل یک ایده ذهنی به محصول نهایی مسیر پیچیده‌ای دارد. یکی از ابزارهای کلیدی که این مسیر را شفاف و روشن می‌کنه، موکاپ (Mockup) هست. اما موکاپ دقیقا چیه و چه جایگاهی در فرآیند طراحی محصول داره؟ در این مقاله به بررسی مفهوم موکاپ و مزایای استفاده از آن در طراحی UI/UX می‌پردازیم.موکاپ (Mockup) چیست؟به زبان تخصصی، موکاپ (Mockup) یک نمایش به صورت ایستا (Static) و با دقت بسیار بالا از ظاهر نهایی یک محصول دیجیتال یا فیزیکی هست. در سلسله‌مراتب طراحی، موکاپ پس از مرحله وایرفریم (Wireframe) و پیش از پروتوتایپ (Prototype) قرار می‌گیرد.در حالی که وایرفریم بر ساختار و چیدمان متمرکز هست، موکاپ جزئیات بصری نظیر تایپوگرافی، پالت رنگی، آیکون‌ها، تصاویر و استایل‌های گرافیکی را به نمایش می‌گذاره. هدف از طراحی موکاپ، ایجاد یک تصویر واقعی از خروجی نهایی است تا کارفرماها و یا تیم توسعه دهنده بتونند پیش از آغاز فرآیند توسعه ، درک دقیق‌تری از طراحی محصول داشته باشه.مزایای استفاده از Mockup در طراحی UI/UXطراحی موکاپ مزایای متعددی برای تیم توسعه دهنده و دیزاین داره که میشه به موارد زیر اشاره کرد:۱. ارتباط بهتر کارفرما با محصول معمولا توضیح برای افراد غیرمتخصص در حوزه طراحی بسیار دشوار هست . موکاپ با ارائه یک شمای بصری، باعث می‌شه. کارفرما دید بهتری در رابطه با طراحی سایت و یا اپلیکیشنی که قرار هست توسعه داده بشه متوجه بشه. ۲. شناسایی و رفع خطاهای طراحی پیش از توسعهیکی از مهم‌ترین مزایای موکاپ، شناسایی باگ‌های بصری یا چیدمان هست. دیزاینر با مشاهده خروجی در قالب موکاپ، سریع‌تر متوجه ایراداتی نظیر عدم رعایت کنتراست رنگی، تراکم بیش از حد المان‌ها یا مشکلات تایپوگرافی میشه. اصلاح این موارد در مرحله طراحی بسیار کم‌هزینه‌تر از اعمال تغییرات در مرحله کدنویسی (بک‌‌اند و فرانت‌‌اند) هست.۳. ایجاد یک نقشه راه برای تیم توسعهبرای توسعه دهنده، یک موکاپ حکم یک نقشه فنی رو داره. طراح با ارائه موکاپ استاندارد به تیم فنی، مشخصات دقیق سایزها، فاصله المان‌ها و رنگ را مشخص می‌کند. بنابراین موجب افزایش سرعت و دقت تیم برنامه‌نویسی در پیاده‌سازی رابط کاربری می‌شود.۴. صرفه‌جویی در زمان و هزینه‌های پروژهبا صرف زمان کافی بر روی موکاپ، از دوباره‌کاری‌های پرهزینه در مراحل تولید کدهای بک‌‌اند و فرانت‌‌اند جلوگیری میشه که این امر به طور مستقیم روی بهینه‌سازی بودجه پروژه تاثیرگذار هست.نتیجه‌گیریموکاپ فراتر از یک تصویر ساده است٬ موکاپ پل ارتباطی بین طراحی و پیاده‌سازی فنی هست. استفاده صحیح از این اون در طراحی UI/UX به تیم‌های محصول کمک می‌کنه تا خروجی نهایی رو با کیفیت بالاتر، ریسک کمتر و تعامل بهتر بین اعضای تیم تولید کند. رها ریاحی | Raha Riahi رها ریاحی | Raha Riahi Sun, 24 May 2026 15:30:33 +0330 https://virgool.io/@rahariahi/prototype-%DA%86%DB%8C%D8%B3%D8%AA-%D8%AA%D9%81%D8%A7%D9%88%D8%AA-prototype-%D8%A8%D8%A7-wireframe-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-ux-qfvwy4vtvakh در فرآیند طراحی محصول مثل وب‌سایت‌ و اپلیکیشن‌ها، طراحان از ابزارها و مراحل مختلفی استفاده می‌کنند تا قبل از توسعه نهایی، تجربه کاربری را بررسی کنند. یکی از مهم‌ترین این مراحل Prototype یا پروتوتایپ هست.در این مقاله به زبان ساده توضیح می‌دهیم Prototype چیه، چه کاربردی در طراحی UX دارد و چه تفاوتی با Wireframe دارد.Prototype چیست؟Prototype یک نسخه تعاملی از طراحی هست که به کاربران یا اعضای تیم اجازه می‌دهد با محصول تعامل داشته باشند.در پروتوتایپ می‌توان روی دکمه‌ها کلیک کرد٬ بین صفحات مختلف حرکت کرد و جریان کاربر (User Flow) را تجربه کرد.به بیان ساده، پروتوتایپ شبیه یک نمونه آزمایشی از محصول نهایی است که کمک می‌کند قبل از توسعه واقعی، عملکرد و تجربه کاربری بررسی بشه.چرا Prototype در طراحیUI/UX مهم است؟پروتوتایپ به طراحان کمک می‌کند تا ایده‌ها را در محیطی نزدیک به محصول واقعی آزمایش کنند.از مزایای استفاده از Prototype می‌توان به٬ تست تجربه کاربری قبل از توسعه٬ شناسایی مشکلات طراحی٬ دریافت بازخورد از کاربران٬ ارتباط بهتر بین طراحان و توسعه‌دهندگان اشاره کرد.به همین دلیل در بسیاری از پروژه‌های طراحی، ساخت پروتوتایپ یک مرحله ضروری محسوب می‌شود.انواع Prototypeپروتوتایپ‌ها معمولا در دو نوع اصلی ساخته می‌شوند:Low-Fidelity Prototypeدر این نوع پروتوتایپ تعاملات ساده هستند و طراحی ظاهری خیلی حائذ اهمین نیست صرفا هدف اصلی بررسی جریان حرکت کاربر در محصول هست.High-Fidelity Prototypeاین نوع پروتوتایپ بسیار شبیه محصول نهایی هست. طراحی گرافیکی کامل‌تر هست و تعاملات دقیق‌تر شبیه‌سازی می‌شوند.این نوع پروتوتایپ معمولا برای تست کاربری (User Testing) استفاده می‌شود.تفاوت Prototype با Wireframeیکی از سوالات رایج در طراحی UI/UX تفاوت بین Wireframe و Prototype هست. درواقع Wireframe یک طرح ساده برای نمایش ساختار صفحات اصلی و محل قرارگیری عناصر هست و Prototype یک نسخه تعاملی از طراحی هست که امکان تعامل کاربر با صفحه‌هات طراحی شده رو فراهم می‌کند.جمع‌بندیPrototype یکی از مراحل مهم در فرآیند طراحی UX است که به طراحان اجازه می‌دهد قبل از توسعه محصول، تعامل کاربران با طراحی انجام شده را بررسی کنند. استفاده از پروتوتایپ باعث می‌شود مشکلات تجربه کاربری زودتر شناسایی شوند و کیفیت محصول نهایی افزایش پیدا کند. رها ریاحی | Raha Riahi رها ریاحی | Raha Riahi Sat, 16 May 2026 16:12:58 +0330 https://virgool.io/@rahariahi/%D9%88%D8%A7%DB%8C%D8%B1%D9%81%D8%B1%DB%8C%D9%85-wireframe-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AF%D8%A7%D8%B1%D8%AF-bknh3ffkxjes وایرفریم یکی از مهم‌ترین مراحل طراحی برای طراحی صفحه‌هات وب و یا اپلیکیشن هست و قبل از شروع طراحی ظاهری استفاده می‌شود.به زبان ساده، وایرفریم یک طرح اولیه و ساده از صفحات اپلیکیشن یا وب‌سایت است که ساختار کلی صفحه را نشان می‌دهد.Wireframe چیست؟وایرفریم در واقع اسکلت اولیه یک صفحه است. در واقع وایرفریم مشخص می‌کند در طراحی دکمه‌ها٬ منوها٬ تصاویر٬ متن و... کجا قرار بگیرند. در وایرفریم معمولا خبری از رنگ‌بندی، فونت‌های نهایی یا طرح‌های گرافیکی نیست٬ چون تمرکز اصلی روی تجربه کاربری و چیدمان محتواست.چرا وایرفریم اهمیت دارد؟وایرفریم کمک می‌کنه قبل از صرف وقت برای طراحی نهایی، ساختار کلی صفحه‌هات٬ بهبود تجربه کاربری (UX)٬ تست سریع٬ کاهش هزینه و زمان برای تغییرات نهایی مشخص بشه.انواع WireframeLow Fidelity Wireframe وایرفریم ساده و اولیه که معمولا با خطوط و باکس‌های ساده طراحی می‌شه. و از کاربردهای اون میشه به ایده‌پردازی سریع و بررسی ساختار کلی اشاره کرد.High Fidelity Wireframe نسخه دقیق‌تر وایرفریم که جزئیات بیشتری دارد و به طراحی واقعی نزدیک‌تر هست٬ و از کاربردهای اون میشه به بررسی دقیق تجربه کاربری٬ آماده‌سازی برای طراحی UI اشاره کرد.تفاوت Wireframe با Mockup و PrototypeWireframe وایرفریمنمایش ساختار اولیه صفحهMockup موکاپنمایش ظاهر گرافیکی نهاییPrototype پروتوتایپنسخه تعاملی که کاربر می‌تونه با اون کار کنهبهترین ابزارهای طراحی Wireframeچند ابزار محبوب برای ساخت وایرفریم:FigmaAdobe XDSketchBalsamiqکه البته امروزه Figma محبوب‌ترین ابزار بین طراحان UI/UX محسوب می‌شه.جمع‌بندیWireframe یکی از پایه‌ای‌ترین مراحل طراحی UX است که به طراحان کمک می‌کند قبل از اجرای طراحی نهایی، ساختار صفحات و مسیر حرکت کاربر را مشخص کنه. اگه قصد یادگیری طراحی UI/UX را دارید، یادگیری وایرفریم یکی از اولین مهارت‌هایی هست که باید یاد بگیرید. رها ریاحی | Raha Riahi رها ریاحی | Raha Riahi Sun, 10 May 2026 20:01:53 +0330 https://virgool.io/@rahariahi/ui-%D9%88-ux-%DA%86%DB%8C%D8%B3%D8%AA-%D8%AA%D9%81%D8%A7%D9%88%D8%AA-ui-%D9%88-ux-%D8%A8%D9%87-%D8%B2%D8%A8%D8%A7%D9%86-%D8%B3%D8%A7%D8%AF%D9%87-mtmwfm0ylqfy اگه به تازگی وارد دنیای طراحی سایت یا اپلیکیشن شده باشید احتمالا دو اصطلاح UI/UX رو زیاد شنیدید. در این مقاله خیلی ساده بررسی می‌کنیم٬ که U/UX چیه و تفاوت این دو دقیقا کجاست.UX چیست؟ (User Experience)UX مخفف User Experience یا تجربه کاربر هست. تجربه کاربری یعنی احساسی که کاربر زمان استفاده از یک محصول مثل سایت یا اپلیکیشن رو داره. به زبان ساده‌تر یعنی اینکه کاربر هرچقدر راحت‌تر٬ سریع‌تر و بدون سردرگرمی بتونه به هدفش برسه بهش میگن تجربه کاربری یا UX.مثلا تصور کنید وارد یک سایت فروشگاهی می‌شوید. اگر سریع‌محصول مورد نظر خودتون رو پیدا کنید و مراحل خریدتون از سایت راحت باشه و یا سایت سریع لود بشه٬ به اون تجربه‌ای که شما کسب کردید از اون سایت میگن UX.اما اگه نتونید محصول خودتون رو پیدا کنید و یا فرآیند خرید پیچیده باشه باعث میشه حس و اون تجربه‌ای که شما از اون سایت داشتید بد باشه.وظایف یک UX Designerوظایف یک طراح تجربه کاربری :تحقیق درباره کاربران (User Research)طراحی مسیر کاربر (User Flow)طراحی وایرفریم (Wireframe)تست کاربری (Usability Testing)بهبود تجربه استفاده از محصولUI چیست؟ (User Interface)رابط کاربری یا User Interface مخفف UI به ظاهر یا قالب یک محصول دیجیتال گفته میشه٬ که مواردی مثل رنگ‌ها دکمه‌ها آیکون٬ها تایپوگرافی٬ طراحی صفحه‌ها و ... همه جزو UI هستند.به زبان ساده‌تر میشه گفت اگر UX اسکلت یک محصول باشه UI میشه ظاهر اون محصول. یک ui خوب باعث میشه اون سایت یا اپلیکیشن زیبا٬ حرفه‌ای و کار با اون لذت بخش باشه.وظایف یک UI Designerیک طراح UI معمولا کارهای زیر را انجام می‌دهد:طراحی ظاهر صفحاتانتخاب رنگ‌بندیطراحی کامپوننت‌هاطراحی Design Systemطراحی آیکون‌ها و المان‌های بصریهدف اصلی ui اینه که محصول از نظر بصری ظاهر خوبی داشته باشه.تفاوت UI و UX چیست؟خیلی ساده اگر بخواهیم بگیم ux تجربه کاربر و ui ظاهر و زیبایی یک محصول هستمثلا فرض کنید یک اپلیکیشن سفارش غذا دارید ux مشخص میکنه کاربر چطور غذا رو انتخاب کنه و چطور سفارشش رو ثبت کنه و ui مشخص می‌کنه که دکمه‌ها چه شکلی باشند از چه رنگ‌هایی برای ظاهر سایت و اپلیکیشن استفاده بشه و… در واقع ux ساختار رو مشخص میکنه و ui به اون زیبایی میبخشه.آیا UI بدون UX ممکن است؟اگه یک محصول فقط ui خوبی داشته باشه ولی ux اون ضعیف باشه٬ ممکنه که زیبا باشه اما استفاده از اون سخت هست و ممکنه که کاربر تمایلی نداشته باشه که از اون اپلیکیشن و یا سایت استفاده کنه. و یا برعکس اگه ux خوب باشه اما ui ضعیف باشه محصول کار میکنه اما زیبایی ظاهری نداره. به همین دلیل هست که در طراحی محصول ui و ux همیشه در کنار هم استفاده می‌شوند.جمع‌بندیUI و UX دو مفهوم مهم در طراحی محصول هستند که هرکدوم نقش متفاوتی دارند.UX (تجربه کاربری): تمرکز روی راحتی و تجربه کاربرUI (رابط کاربری): تمرکز روی ظاهر و طراحی بصریترکیب درست این دو باعث می‌شه یک محصول هم زیبا باشد و هم استفاده از اون ساده و لذت‌بخش باشه.اگه قصد دارید وارد دنیای طراحی محصول شوید، یادگیری UI و UX در کنار هم یکی از بهترین مهارت‌هایی هست که می‌تونید کسب کنید. رها ریاحی | Raha Riahi رها ریاحی | Raha Riahi Sun, 03 May 2026 13:31:43 +0330