تفاوت طراح رابط کاربری و برنامه نویس فرانت اند

در این پست از بلاگ سایت تصمیم داریم در مورد تفاوت های طراح رابط کاربری (UI Designer) و برنامه نویس فرانت اند (frontend developer) صحبت کنیم. احتمالا خیلی ها این دو موقعیت شغلی رو یکی میدونند و معمولا اگر توی تیم های کوچیک کار کرده باشند میبینند که یک نفر به عنوان طراح رابط کاربری و برنامه نویس فرانت اند مشغول به کار هست. حالا در این مقاله سعی میکنم تفاوت های این دو مورد رو بیان کنیم و بیشتر با این موقعیت های شغلی آشنا بشیم.

موضوعاتی که در این مقاله بررسی میکنیم :

• طراح رابط کاربری به چه کسی گفته میشود؟

• برنامه نویس فرانت اند به چه کسی گفته میشود؟

• تفاوت برنامه نویس فرانت اند با طراح رابط کاربری

• یک طراح رابط کاربری از چه ابزار هایی استفاده می کند ؟

• یک برنامه نویس فرانت اند از چه زبان های برنامه نویسی استفاده میکند؟

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

طراح رابط کاربری به چه کسی گفته میشود؟

تعاریف خیلی آکادمیک و کاملی در خصوص طراح رابط کاربری و وظایف اون وجود داره اما اگر ما بخوایم به صورت ساده و مختصر بدونیم یک ui designer  در یک پروژه نرم افزاری چه کاری انجام میده میتونیم اینطور بیان کنیم که :

یک طراح رابط کاربری در پروژه نرم افزاری، به عنوان مثال طراحی وب سایت فروشگاهی تمامی المان ها و آیتم های ظاهری که شما مشاهده میکنید رو طراحی میکنه. البته اینجا مفهومی تحت عنوان طراح تجربه کاربری یا همون ux designer به وجود میاد که احتمالا به چشمتون آشنا باشه. معمولا در شرکت های بزرگ تر و یا پروژه هایی که بزرگ هستند، طراح رابط و تجربه کاربری UI/UX Designe به صورت جدا گانه و تحت عنوان دو موقعیت شغلی تعریف میشن اما در پروژه هایی که کوچکترهستند، این وظیفه رو یه نفر انجام میده.

پس رابط کاربری در تلاشه تا  ارتباط سرویس شما با مشتری رو به بهترین شکل نمایش بده. قبلا در یک مقاله به طور مفصل در مورد طراحی رابط کاربری و خود طراح رابط کاربری صحبت کردم که اگه دوست داشتید میتونید اون مقاله رو با عنوان “نکاتی در مورد طراحی رابط کاربری (UI)” ببینید و مطالعه کنید. به همین دلیل بیشتر از این در مورد این موضوع در این پست صحبت نمیکنم.

برنامه نویس فرانت اند به چه کسی گفته میشود؟

در دنیای برنامه نویسی وب احتمالا واژه های زیادی مثل برنامه نویس فرنت اند(frontend developer)، برنامه نویس بک اند  یا فول استک دولوپر زیاد به گوشتون آشنا باشه. البته اگه از دنیای توئیتر باشید احتمالا در بایو خیلی ها دیدید که نوشته شده برنامه نویس از جلو!!!

به صورت خیلی خلاصه و جدا از تعریف های آکادمیک، فرانت اند دولوپر وظیفه داره تا اون چیزی که شما در یک وب سایت میبینید رو پیاده سازی کنه. یعنی ظاهر اون وب سایت نتیجه تلاش ها و کد نویسی یک برنامه نویس از جلو یا همون فرانت اند دولوپر هست!

تفاوت برنامه نویس فرانت اند با طراح رابط کاربری

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

یک طراح رابط کاربری از چه ابزار هایی استفاده می کند ؟

ادوبی ایکس دی (Adobe XD)

Adobe XD (ادوبی ایکس دی) در سال 2015 اولین نسخه خودش رو معرفی کرد. با توجه به اپدیت های سریع و البته بسیار خوبی که ادوبی برای این نرم افزار منتشر میکرد به سرعت به گزینه اول اکثر طراحان رابط کاربری تبدیل شد. علاوه بر کار کرد راحت و ساده ای که این نرم افزار داشت قابلیت های بسیار زیادی رو هم در اختیار طراحان قرار میداد و روند توسعه  رو خیلی ساده میکرد.

من قبلا در یک مقاله دیگه در مورد Adobe xd صحبت کردم، اگه علاقه مند بودید میتونید مقاله “آشنایی با ادوبی ایکس دی ” رو مطالعه کنید و کار بر این ابزار فوق العاده رو شروع کنید.

فیگما (Figma)

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

اسکچ (Sketch)

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

یک برنامه نویس فرانت اند از چه زبان های برنامه نویسی استفاده میکند؟

HTML

هر فرانت اند دولوپر معمولا در اولین قدم خودش که پا به دنیای وب میگذاره با زبان اچ تی ام ال (html) آشنا میشه. البته که همه ما به خوبی میدونیم html یک زبان برنامه نویسی نیست و یک زبان نشانه گذاری به حساب میاد. از اون برای ایجاد ساختار صفحات وب استفاده میشه  و میشه گفت بدنه اصلی صفحات وب به حساب میاد.

CSS

Cascading Style Sheets یا به اختصار css دومین قدمی هست که یک فرانت اند دولوپر بعد از یادگیری اچ تی ام ال به سراغ اون میره. ساختاری که در مرحله قبل با html اایجاد میکنید رو با استفاده از css به اون روح می بخشید و شکل و ظاهر رو شخصی سازی میکنید.

JAVASCRIPT (زبان برنامه نویسی جاوا اسکریپت)

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

جاوا اسکریپت یک زبان برنامه نویسی پرکاربرد و پراستفاده در دنیاست که هر روزه در حال پیشرفت و تکامل هست و کتابخانه ها و فریمورک های زیادی با این زبان نوشته شدند.
کمپانی های بزرگی مثل فیسبوک،گوگل،walmart و uber از جاوا اسکریپت برای ساخت برنامه های خودشون استفاده  می کنند. جاوا اسکریپت در سال 2019 به عنوان محبوب ترین زبان برنامه نویسی انتخاب شد و قرار داشتن در لیست محبوب ترین زبان ها از سال 2012 تا 2018 نشان از پرکاربرد بودن این زبان برنامه نویسی است.

پیشنهاد میکنم برای این که دنیای بزرگ جاوا اسکریپت رو به طور کامل درک کنید نگاهی به مقاله و ویدئو “جاوا اسکریپت چیست؟ و چه تفاوتی با EcmaScript دارد؟ ” بندارید یا ویدئو زیر رو مشاهده کنید، در این مقاله و ویدئو به طور کامل تمامی اون چیزی که نیاز هست در مورد javascript رو بدونید بررسی کردیم.

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

نتیجه

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