مسیر شغلی

پورتفولیو UI/UX؛ راهنمای ساخت نمونه‌کاری که استخدامتان کند

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

۲۱ آبان ۱۴۰۵۸ دقیقه مطالعه

پورتفولیو طراح UI/UX مجموعه‌ای از دو تا چهار پروژه است که هر کدام مسئله، فرایند، تصمیم‌های کلیدی و نتیجه را روایت می‌کند و نشان می‌دهد شما چطور فکر می‌کنید، نه فقط چه چیزی کشیده‌اید. برای موقعیت جونیور، دو یا سه کیس استادی عمیق و صادقانه معمولاً از ده تصویر زیبا و بی‌توضیح مؤثر‌تر است.

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

کارفرما در پورتفولیوی UI/UX دنبال چه می‌گردد

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

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

چند پروژه و چه نوع پروژه‌هایی انتخاب کنید

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

ترکیب پیشنهادی برای جونیورها

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

پروژه‌ی واقعی ندارید؟ این گزینه‌ها را امتحان کنید

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

پروژه‌ی تمرینی عیب نیست؛ پنهان کردن تمرینی بودنش عیب است. یک جمله در ابتدای پروژه کافی است: «پروژه‌ی شخصی، برای تمرین فرایند پژوهش و طراحی».

ساختار هر پروژه در پورتفولیو طراح UI/UX

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

۱. خلاصه‌ی بالای صفحه

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

۲. مسئله و زمینه

چه کسی چه مشکلی داشت و چرا مهم بود؟ اگر محدودیتی وجود داشت (زمان، فناوری، کسب‌وکار) همین‌جا بگویید؛ محدودیت‌ها تصمیم‌های بعدی را قابل‌فهم می‌کنند.

۳. پژوهش و یافته‌ها

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

۴. تصمیم‌های کلیدی طراحی

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

۵. طرح نهایی، نتیجه و درس‌ها

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

صفحه‌ی اصلی و معرفی شما

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

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

پورتفولیو را کجا منتشر کنید

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

  • سایت شخصی: بیشترین کنترل را روی روایت و ظاهر دارید و حرفه‌ای‌تر دیده می‌شود. لازم نیست پیچیده باشد؛ یک صفحه‌ی اصلی و یک صفحه برای هر پروژه کافی است.
  • بیهنس (Behance): برای نمایش پروژه‌های تصویری و دیده شدن در جامعه‌ی طراحان کاربرد دارد. پروژه را آنجا هم به شکل کیس استادی بنویسید، نه گالری تصویر.
  • فایل PDF: برای ارسال همراه رزومه و جاهایی که کارفرما لینک باز نمی‌کند. حجم را کم نگه دارید و نسخه‌ی کوتاه‌تری از هر پروژه بسازید.

دریبل (Dribbble) برای نمایش قطعه‌های بصری خوب است، ولی به‌تنهایی پورتفولیوی UI/UX حساب نمی‌شود، چون فرایند را نشان نمی‌دهد.

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

اشتباه‌های رایج در پورتفولیو طراحان تازه‌کار

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

پورتفولیو مدرک تحصیلی شما در طراحی است؛ هر پروژه باید به این سؤال جواب دهد که «اگر این آدم را استخدام کنیم، با مسئله‌ی ما چه می‌کند؟»

چک‌لیست پیش از ارسال پورتفولیو

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

رزومه و پورتفولیو مکمل هم‌اند؛ برای هماهنگ کردن آن‌ها، نکته‌های نوشتن رزومه‌ی طراحی UX را هم ببینید.

سوالات متداول

بدون سابقه‌ی کاری چطور پورتفولیو بسازم؟

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

پورتفولیو را فارسی بنویسم یا انگلیسی؟

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

هر پروژه در پورتفولیو چقدر باید طولانی باشد؟

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

آیا استفاده از قالب آماده‌ی پورتفولیو اشکال دارد؟

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

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

پورتفولیو هیچ‌وقت «تمام» نمی‌شود؛ نسخه‌ی اول را منتشر کنید، از چند طراح باتجربه نقد بگیرید و بعد از هر مصاحبه بر اساس سؤال‌هایی که پرسیده شد بهترش کنید. اگر هنوز پروژه‌ی کافی ندارید، ترتیب ساختن مهارت‌ها را در نقشه راه یادگیری UI/UX ببینید. دوره طراحی محصول آکادمی دایره هم به صورت حضوری و آنلاین و پروژه‌محور برگزار می‌شود؛ پروژه‌هایی که در طول دوره می‌سازید می‌توانند پایه‌ی اولین کیس استادی‌های شما باشند.

این مسیر را جدی‌تر ادامه بدهید

اگر این مقاله برایتان مفید بود، دوره‌های تخصصی دایره قدم بعدی است.

مشاهده دوره‌ها
۲۰ آبان ۱۴۰۵

یوزر فلو چیست؟ آموزش رسم جریان کاربر با مثال واقعی

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

مشاهده بیشتر
۱۹ آبان ۱۴۰۵

موشن دیزاین چیست و موشن دیزاینر در طراحی محصول چه کار می‌کند؟

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

مشاهده بیشتر
۱۸ آبان ۱۴۰۵

Variables در فیگما؛ آموزش متغیرها از رنگ تا حالت‌های مختلف

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

مشاهده بیشتر
۱۷ آبان ۱۴۰۵

یادگیری UI/UX چقدر طول می‌کشد؟ برنامه‌ی واقع‌بینانه هفته‌به‌هفته

برای رسیدن به سطح جونیور در UI/UX معمولاً چند صد ساعت تمرین هدفمند لازم است. این مطلب نشان می‌دهد این ساعت‌ها با برنامه‌ی شما چند ماه می‌شود و هر هفته باید چه چیزی تحویل بدهید.

مشاهده بیشتر