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

چند ماهی از راه اندازی وبسایت مرجع UI و UX فارسی می گذرد و یکی از مهمترین و پر تکرار ترین سوالاتی که از بنده پرسیده شده این است که چطور UI/UX کار شویم؟ یا اگر بخوایم حرفه ای تر سوالمان را مطرح کنیم، چطور به یک طراح UI و UX تبدیل شویم. مقاله امروزمان از سری مقالات آموزش UI و UX دقیقا در همین مورد می باشد. می خواهیم راجع این صحبت کنیم که چطور به عنوان فردی که هیچ اطلاعاتی ندارد وارد حوزه جذاب طراحی UI و UX شویم.

در این مقاله سعی می کنم با توجه به تجربیات گذشته ام به صورت جامع و قدم به قدم به این سوال پاسخ دهم و مسیر تبدیل شدن به یک طراح حرفه ای رابط و تجربه کاربری را در قالب یک نقشه راه طراحی UIوUX خدمتتان تقدیم کنم.

1- با مفهوم واقعی طراحی آشنا شوید.

واقعیتی که وجود دارد، عموم افرادی که در ابتدای کار هستند و با آن ها صحبت می کنم، عموما نمونه کارهای طراحان مختلف رو در پلتفرم های مختلفی مانند Dribbble، Behance، اینستاگرام و… دیده اند و به این حوزه یعنی طراحی UI و UX علاقه مند شده اند. عموم این افراد تصوری که از طراحی UI دارند، بسیار سطحی و مربوط به جنبه های زیبایی شناختی و ظاهری یک محصول است. عموم این افراد فکر می کنند طراحی حرفه ای رابط کاربری به زیبایی رابط کاربری، انیمیشن های موجود در رابط کاربری و استفاده از Micro interaction ها و یا خرده تعاملات حرفه ای محدود می شود.

به عنوان یک شخص علاقه مند به طراحی UI و UX در ابتدای راه باید با مفهوم واقعی طراحی یا Design آشنا شوید. بله درست فکر می کردید، بخشی از اتفاقاتی که برای طراحی یک محصول حرفه ای رخ می دهد مربوط به خلق یک ظاهر زیبا، خلاقانه و دلفریب است اما زهی خیال باطل که این تمام ماجرا باشد!  اتفاقات بزرگتری در چرخه خلق یک محصول حرفه ای می افتد.

طراحی (Design) چیست؟

ما در دوره تجربه کاربری و دوره طراحی UI به صورت مفصل راجع مفهوم طراحی صحبت کرده ایم اما به طور خلاصه طراحی یا Design به طور کلی شامل دو حوزه می شود:

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

پس از این لحظه به بعد سعی کنید به هر محصول فراتر از جنبه های زیبایی شناختی آن فکر کنید، به عنوان یک فرد علاقه مند به حوزه طراحی UI و UX صرفا محو انیمیشن ها و رنگ های استفاده شده در پیش نمایش رابط کاربری سایر طراحان نشوید، به کاربرد محصول هم فکر کنید. آیا این محصول کارایی هم دارد، آیا می تواند مشکلی را از کاربران حل کند، این محصول چگونه امکانات مختلف را در اختیار کاربر قرار می دهد؟ آیا این محصول درامد هم ایجاد می کند یا صرفا پیش نمایشی زیباست؟

پس ذهنیتتان را در خصوص طراحی UI و UX عوض کنید. طراحان فقط به زیبایی و جذابیت یک محصول فکر نمی کنند، آن ها وظایف مهمتری در کنار خلق یک ظاهر زیبا برای محصول دارند. جنبه های مهندسی و Problem solving یک محصول به اندازه زیبایی آن اهمیت دارند.

یک محصول زیبا اما ناکارامد را تصور کنید؟ چطور بود؟

2- تجربه کاربری یا UX را جدی بگیرید!

یکی از مهمترین آفت هایی که در افراد علاقه مند به حوزه طراحی UI و UX دیده می شود این است که این افراد طراحی رابط کاربری را تنها به کارکردن با نرم افزار های طراحی UI و همان جنبه های ظاهری یک محصول که به کاربرد مواردی همچون رنگ ها، تایپوگرافی، تصاویر و … مربوط است، محدود می دانند. این افراد از یک واقعیت بزرگ غافلند و آن این که طراحی UI بخشی از فرایند بسیار مهم طراحی تجربه کاربری یا همان UX محصول است!

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

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

ترجیح می دهم به جای تعریف UX در این مقاله، تنها به ذکر اهمیت آن اکتفا کنم و در عوض توصیه می کنم حتما صفحه دوره UX را مطالعه کنید، اطلاعات خوبی در خصوص این حوزه به دست خواهید آورد. باور کنید UX فقط در دسترس قرار دادن آیتم های مختلف و بزرگ کردن فونت های یک محصول نیست.

UX واقعا خیلی خفنه!

3- با الگوهای طراحی UI و استانداردهای مربوط به آن آشنا شوید.

اگر خاطرتان باشد در ابتدای مقاله گفتیم که هدف ما از نگارش این مقاله این است که بدانیم چگونه UI/UX کار شویم؟ چگونه طراح UI و UX شویم؟

در قدم قبلی از نقشه راه طراحی UI, UX به اهمیت یادگیری UX و تجربه کاربری اشاره کردیم. حالا می خواهیم راجع UI صحبت کنیم.

بهتر است قبل از این که راجع اهمیت یادگیری طراحی UI صحبت کنیم، دوباره به عنوان همین قدم برگردید. عبارتی به نام الگوی طراحی یا Design Pattern داریم. منظور از Design Pattern چیست؟

همانطور که قبلا گفتیم یکی از مهمترین اهدافی که در طراحی UI و UX محصول دنبال می کنیم حل مشکلات مختلف است. الگوهای طراحی یا Design Pattern ها الگوهایی برای حل مشکلات مختلف هستند که طراحان حین طراحی یک اپلیکیشن یا وبسایت از آن ها استفاده می کنند. بگذارید با یک مثال واضح تر بیان کنم. فرض کنیم در جایی از رابط کاربری قرار است یک آدرس از کاربر دریافت کنید، طبیعتا از Design Pattern های مربوط به فرم ها می بایست استفاده کنید (توجه داشته باشید که دیزاین پترن ها همیشه ظاهری نیستند و گاهی اوقات به جنبه های مهندسی و Problem solving بر می گردند). الگوهای طراحی از قبل موجود هستند و حاصل تجارب، تست ها و آزمایش های بسیاری هستند پس وظیفه شما به عنوان طراح، اختراع دوباره چرخ نیست بلکه وظیفه شما به عنوان طراح، استفاده صحیح و به جا از الگوهای طراحی مختلف است.

پس در واقع شما باید با المان های مختلف رابط کاربری و باید ها و نبایدهای مربوط به کاربرد آن ها آشنا باشید. اما چگونه؟ ما در دوره طراحی UI در خصوص این موارد به صورت مفصل صحبت کرده ایم اما در وبسایتهایی از قبیل Dribbble، behance.net، UI Movement ، Uplabs می توانید با این Design Pattern ها آشنا شوید.

4- چشمتان را برای طراحی با کیفیت تمرین دهید.

قبلا گفتیم دیدگاه شما به طراحی باید عوض شود. ازین به بعد به عنوان طراح، نه تنها باید دیدگاه شما دستخوش تغییر شود بلکه چشم شما هم باید با دید یک طراح به طرح های مختلف نگاه کند. دیگران با نگاه کردن به یک طرح باید “مو” را ببینند و شما “هم مو و هم پیچش مو” !

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

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

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

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

در خصوص الهام گیری در ادامه همین مقاله صحبت خواهیم کرد.

5- کار با ابزارهای طراحی UI و UX را یاد بگیرید.

تا به اینجای صحبتمان در خصوص مراحل ورود به دنیای طراحی UI و UX، در خصوص اطلاعات تئوری و عملی که در خصوص طراحی UI و UX باید داشته باشید صحبت کردیم. در کنار این اطلاعات که فوق العاده ارزشمند هستند، شما به عنوان یک طراح می بایست طرح های مدنظرتان که حاصل اطلاعات به دست آمده در مراحل قبلی هستند را با استفاده از نرم افزار ها و ابزارهای مختلف طراحی رابط کاربری اجرا کنید.

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

ابزارها و نرم افزارهای مختلفی برای طراحی UI و UX وجود دارند که تقریبا در موارد کلی یکسان عمل می کنند. از این نرم افزار ها می توان به Adobe XD، Figma، Invision، Sketch و… اشاره کرد که می توانید بسته به نیاز خود و انتظاراتی از یک نرم افزار طراحی رابط کاربری دارید، نرم افزار مورد نظر خود را انتخاب کنید و یادگیری را شروع کنید. می توانید از دوره آموزش Adobe XD مرجع UI و UX فارسی هم استفاده کنید.

6- با کپی کردن طرح های طراحان بزرگ، حرفه ای تر یاد بگیرید.

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

همیشه توجه داشته باشید که سایر طراحان UI و UX چگونه از مواردی که تا کنون یاد گرفته اید در طرح هایشان استفاده کرده اند. به راه حل هایی که طراحان در طرح های مختلف به کار برده اند توجه کنید. ببینید این طراحان چگونه برای حل یک مشکل خاص از المان های مختلف رابط کاربری استفاده کرده اند.

یک نکته مهم در خصوص کپی کردن وجود دارد و آن هم این که سعی کنید کارهایی را کپی کنید که به لحاظ تعداد صفحات نسبتا کامل باشند و نکته مهم دیگر این است که طرح هایی با موضوعات مختلف را کپی کنید.

7- پروژه های فرضی اجرا کنید.

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

کپی کردن پروژه های دیگران با اینکه برای شما اطلاعات زیادی را به ارمغان می آورد اما طعم خلاقیت و خلق تمام و کمال یک محصول را به شما نمی چشاند. نمی دانید وقتی خودتان یک محصول حرفه ای طراحی می کنید چه لذتی دارد! خصوصا اولین محصولی که واقعا از آن راضی هستید. چاره چیست؟

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

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

8- به صورت مداوم و پیوسته یاد بگیرید و تمرین کنید.

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

در کنار این باید ساعاتی را در هفته به تمرین و یادگیری تکنیک های جدید در نظر بگیرید.

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