فرانت اند کار کیست ؟ ( Frontend Developer )
مقالات طراحی سایتفرانت اند کار کیست و چه وظایفی را بر عهده دارد ؟ برای تبدیل شدن به یک فرانت اند کار باید چه مهارت هایی را به ترتیب یاد بگیریم ؟! حداقل مدت زمانی که می‌توان به یک طراح قابل تبدیل شد چقدر است ؟ پاسخ به تمامی این سئوالات در این صفحه است پس همراه ما باشید .
فرانت اند کار کیست و به چه کسی Frontend Developer گفته می‌شود ؟ وظایف این شخص در حوزه کاری خودش چیست ؟ درآمد این شخص سالیانه چقدر است و برخی سوالات دیگر که قصد داریم تا به تمام آنها در این مقاله پاسخی کامل دهیم .
عموما شخص فرانت‌اند کار را در زمینه وب بهتر و بارز تر می‌شناسیم از این جهت زمانی که صحبت از فرانت‌اند کار است ، شخصی به ذهن خواهد آمد که در زمینه طراحی برای پروژه‌های وب سایت فعالیت می‌کند . در حالت استاندارد برای راه اندازی یک وب سایت حداقل 2 نفر نیاز داریم که باید روی سایت کار کنند ، یکی فرانت اند کار ( Frontend ) و دیگری بک‌اند کار ( Backend ) است . فرانت اند کار بر روی قالب سایت کار می‌کند و المان‌ها و عناصر مختلف را در صفحات وب طراحی و جای‌گذاری می‌کند . به این عناصر رنگ و لعاب داده و با دیده و روان کاربران سایت بازی می‌کند .
بک اند کار یا همان برنامه نویس وظیفه دارد تا المان هایی که از طرف طراح قالب تحویل می‌گیرد را جان بخشیده و وظایف هریک را عملی کند تا اصطلاحا سایت ، داینامیک شود . اول از هرچیزی باید گفت اگر به دوره‌های آموزشی در زمینه فرانت علاقمند هستید ، می‌توانید از پکیج های آموزشی سئو نود در این زمینه استفاده کنید که بخش زیادی نیز از آنها رایگان است :
به شخص فرانت اند کار طراح قالب نیز گفته می‌شود . درحقیقت در قدم اول ، شما بعنوان یک کارفرما که احتیاج به یک وب سایت دارید ، با طراح قالب سرو کار خواهید داشت . شما طرح کلی و مدنظر برای سایت خودتان را برای طراح توصیف خواهید کرد و او ضمن بررسی طرح شما ، متناسب با طرح ، پیشنهادات و تغییرات خود را نیز لحاظ نموده و در نهایت قالب سایت را در گام اول بصورت طرح گرافیکی پیاده نموده و سپس در قالب کد ، این قالب را برای شما آماده خواهد کرد .
البته ممکن است طراحی گرافیکی قالب توسط شخصی بنام UI کار انجام شود که توسط نرم افزارهای طراحی همچون Figma و Adobe XD و … باشد اما معمولا در پروژه‌های کوچک ، به دلیل کاهش هزینه و کوچک بودن بیزنس ، طراحی گرافیکی یا انجام نخواهد شد و یا بصورت ساده توسط فرانت‌اند کار ، در قالب طرحی خطی پیاده شده و سپس تبدیل به کد خواهد شد .
در طراحی سایت و یا طراحی اپلیکیشن‌ها کلا شخصی که طراحی را به عهده دارد فرانت‌اند کار است . طراحی ظاهر یکی از مهم‌ترین بخش‌ها در هر پروژه است که وجه بصری و گرافیکی جهت تعامل کاربران با آن ضروری است . وجه بصری و ظاهر گرافیکی به قدری اهمیت دارد که وقتی کاربران و مشتریان وارد سایت می‌شوند اول از همه به زیبایی وب سایت یا اپ شما نگاه خواهند کرد . از این جهت طراحی قالب و ظاهر بسیار مهم است ، لذا لازم است تا در ابتدای کار زمان مناسبی را برای انتخاب طرح و بازی با ظاهر وب سایت یا اپلیکیشن اختصاص دهیم .
خوشبختانه در حال حاضر وب سایت‌های جدید از طراحی مناسبی برخوردار هستند و طراحان وب سایت نیز مهارت خود را بخوبی توسعه داده و قادر هستند تا طرح‌های زیبایی را متناسب با زمینه فعالیت سایت طراحی و اجرا نمایند . خوشبختانه وب سایت‌هایی همچون Pinterest یک معدن و منبع بزرگ برای ایده گرفتن در زمینه طراحی هستند که اکثر طراحان از این نمونه‌ها الهام گرفته و طرح‌های جدید پیاده می‌کنند .
میزان فعالیت فرانت اند کار چقدر است ؟
این موضوع را نمی‌توان دقیقا بیان کرد و گفت مسئولیت طراح بیشتر از مسئولیت یک برنامه نویس است . هر دو شخص در زمینه اجرای پروژه یک وب سایت مسئولیت‌های سنگینی دارند و هر کدام در زمینه کاری خود بسیار وظیفه شناس هستند ، از این جهت اگر بعنوان یک دانشجو تصمیم دارید تا به یک طراح قالب سایت و اصطلاحا Frontend Developer تبدیل شوید لازم است اطلاع داشته باشید که خلاقیت ، سلیقه و ذوق برای طراحی ، مولفه‌های اصلی برای یک طراح محسوب می‌شود که باید در خود رشد دهید .
قبل از هر چیزی اگر قصد دارید تا تبدیل به طراح سایت شوید سعی کنید مدتی را به تماشا کردن صرف کنید به این معنی که وب سایت‌های مختلف را گشت زده و طرح‌هایی که داخل آنها ایجاد شده است را به دقت مشاهده کنید و هر کدام از طرح‌ها را که بیشتر پسند می‌کنید در قسمت بوکمارک ( Bookmark ) مرورگر خود ذخیره کنید تا بعدها بتوانید مجدد همان سایت و طرح گرافیکی را مشاهده و از آن استفاده کنید .
مشاهده کردن وب سایت‌ها به شما کمک خواهد کرد تا بتوانید اولا نحوه طراحی و چیدمان را بخوبی یاد بگیرید و دوم اینکه ذهن شما برای خلق طرح‌های جدید باز شود . پس از عبور از این مراحل است که کم‌کم می‌توانیدیک صفحه خالی سایت را تبدیل به یک طرح جذاب و کاربرپسند نمائید .
دراصل این فرانت‌اند کار است که زیباتر شدن هرچه بهتر سایت شما توسط فونت‌ها ، تصاویر ، چیدمان مناسب و همچنین ترکیب رنگ‌های مناسب را ممکن خواهد کرد .
شما می‌توانید در بازه زمانی مشخص ، با تمرین و تکرار مستمر و همچنین پیشروی با دوره‌های آموزشی مناسب ، به یک طراح قابل و کاردرست تبدیل شده و وارد بازار کار شوید اما برای این کار باید چه کرد و چه مسیرهایی را طی نمود ؟
چگونه می توانیم فرانت اند کار شویم ؟
همانطور که اشاره شد اگر قصد دارید تا یک طراح قالب باشید باید ببیننده خوبی نیز باشید و طرح‌های مختلف را در ذهن خود دخیره نمائید یا به عبارتی آنها را بخوبی به یاد بسپارید . قبل از هر چیز باید زبان‌های طراحی زیر را از یک منبع آموزشی اصولی به ترتیب یاد بگیرید :
- زبان نشانه گذاری Html ، که پایه و اساس تمامی وب سایت های دنیا است و هیچ سایتی بدون این زبان نمی‌تواند وجود داشته باشد
- زبان طراحی Css ، که شما با این زبان طراحی قادر خواهید بود طرح‌ها را در سایت خلق کنید و به آنها نقش و رنگ و لعاب ببخشید ( این زبان اصلی‌ترین ابزار دست یک طراح است و تا بی‌نهایت می‌توان برای یادگیری و تمرین روی این زبان تایم گذاشت )
- فریمورک Bootstrap یا یکی از فریمورک های زبان Css که به ما کمک خواهد کرد هم سایت‌های واکنشگرا ( رسپانسیو ) طراحی کنیم و هم طراحی با Css را به شکلی سریع‌تر پیاده سازی کنیم
- زبان JavaScript یا کتابخانه Jquery برای خلق تحرکات و رویدادهای مختلف در صفحه
این 4 مورد ، حداقل‌ها برای یادگیری جهت فعالیت در زمینه فرانت هستند که دوره‌های آموزشی برای تمامی این زبان‌ها در سایت سئو نود تدریس شده است . پس شما برای اینکه به یک طراح خوب تبدیل شوید لازم است تا حداقل به این 4 مورد تسلط داشته باشید . اگر تمرین و تکرار مناسب داشته باشید حداکثر پس از یک سال به یک فرانت اند کار بسیار ماهر تبدیل شده‌اید . البته دقت کنید که این تایم را با درنظر گرفتن یک زمان معقول جهت یادگیری مثل روزانه 3 الی 5 ساعت برای تبدیل شدن به یک طراح که توانایی کار بصورت فریلنسری یا استخدامی بدون حرف و حدیث را دارد درنظر گرفته شده است .
اگر قصد دارید تا در زمانی کوتاه‌تر به درآمد برسید باید درنظر داشته باشید که لازم است تایم بیشتری را جهت یادگیری قرار دهید و اگر یادگیری شما به شکل دست و پا شکسته باشد ، نهایتا مهارت شما گویای همه چیز خواهد بود و شاید در سطح قابل قبولی نباشد چراکه عجله کردن مسبب هدررفت بیشتر تایم شما خواهد شد و باید مجدد برای یادگیری از ابتدا شروع کنید و این یعنی دلسردی و زحمت بیشتر ! پس سعی کنید تا از همان ابتدا بدون عجله و با تمرکز حرکت کنید .
پس از اینکه شما به موارد فوق مسلط شدید خودتان علاقمند خواهید شد تا موارد بیشتری را نیز یاد بگیرید . در این مسیر می‌توانید به غیر از بوت استرپ فریمورک های دیگری همچون Uikit و Tailwind Css یا متریال دیزاین را یادبگیرید و مهارت خود را در زمینه Css بسیار توسعه دهید . البته با یادگیری یکی از این موارد نیز می‌توانید بدون مشکل فعالیت کنید .
جاوا اسکریپت یا جی کوئری ؟!
زبان های html و css برای طراحی هستند و در حوزه برنامه نویسی قرار ندارند اما زبان جاوا اسکریپت یک زبان برنامه نویسی است از این جهت فرانت‌اند کاران ارتباط خوبی با این زبان برقرار نمی‌کنند و این زبان تا مدت زیادی برای آنها بعنوان یک سد و مانع در مسیر یادگیری فرانت بود . منبع اصلی سایت JavaScript
جاوا اسکریپت به شما کمک خواهد کرد تا رویدادها و همچین طراحی‌های خاصی را داخل صفحه ایجاد کنید . برای مثال اگر نیاز به اسلایدر ، نیاز به منوهای آبشاری ، نمودار ، آکاردئون و مواردی از این دست داشتید ، باید دست به دامان جاوا اسکریپت شوید . اما همانطور که گفته شد برقراری ارتباط با این زبان برای طراحان سخت بود .
طراحان از این زبان توقع زیادی نداشتند و نهایت نیاز آنها ، عناصری همچون اسلایدر و آکاردئون و گالری تصویر و … بود . به عبارتی عناصری که برای بخش گرافیکی و ظاهر سایت به کار گرفته می‌شدند از این جهت یک کتابخانه از زبان Js مشتق شد که جی کوئری ( jQuery ) نام گرفت .
کار کردن با جی کوئری به حداقل پیش زمینه درمورد زبان جاوا اسکریپت نیاز داشت و شما می‌توانستید به سادگی در بستر jQuery کدنویسی کرده و رویدادهای مختلف همچون کلیک توسط کاربر و اعلانات و … را بسازید . همچنین این کتابخانه در بستری دیگر که پلاگین نام دارند ، توسعه پیدا کرد . بصورتی که اگر شما نیاز به یک اسلایدر شکیل داشتید ، می‌توانستید به حجم عظیمی از این پلاگین‌ها دسترسی پیدا کرده و به دلخواه یکی را انتخاب کنید . سپس طبق Document ارائه شده داخل پلاگین مربوطه ، آن را داخل قالب خودتان استفاده کنید . صحبت در مورد جاوا اسکریپت و جی کوئری بسیار مفصل است لذا توصیه می‌کنیم برای این بخش ، مقاله زیر را مطالعه کنید :
اگر علاقمند به یادگیری زبان جاوا اسکریپت هستید ، پس سعی کنید بیشتر یاد گرفته و مهارت خود را در بستر این زبان توسعه دهید چراکه در زمینه کار با ابزارهایی همچون React یا Angular نیز راحت خواهید بود . اگر این زبان را بخوبی فرا بگیرید هنگام یادگیری سایر زبان‌های برنامه نویسی نیز سریع‌تر پیش خواهید رفت .
پس از طی این مراحل بصورت درست ، شما یک فرانت اند کار هستید و می‌توانید وارد بازار کار شوید . البته برای استخدام در هر شرکتی یا همکاری با کارفرما ، باید نمونه‌کار های خوب داشته باشید از این جهت سعی کنید حداقل 3 الی 5 نمونه‌کار بسیار خوب را طراحی نموده و روی هاستی مناسب یا هاست رایگان آپلود کنید تا کارفرمای شما بتواند نمونه‌کارهای شما را به راحتی مشاهده نموده و سطح توانایی شما را سنجش کند و درموردهمکاری با شما اطمینان حاصل کند .
تفاوت Front End Developer با UI Designer
واژه دیگری که ممکن است شما در بحت فرانت اند با آن موجه شوید واژه UI Designer است . این شخص با کد نویسی و حتی زبان‌های طراحی نیز سروکاری ندارد . این فرد ، شخصی است که در اکثر شرکت‌ها با نام طراح یا گرافیک‌کار شناخته می‌شود .
در شرکت‌های توسعه یافته این شخص پله‌ی اول همه پروژه‌های طراحی سایت یا طراحی اپلیکیشن است . درحقیقت این فرد طرح کلی پروژه و صفحات مختلف آن را بروی فایل های گرافیکی مثل فتوشاپ ، Adobe XD و یا بهترین حالت برنامه Figma تحویل طراح قالب خواهد داد تا مطابق با تصویر و طرح گرافیکی که توسط UI Designer طراحی شده و مورد تایید مجری و کارفرما قرار گرفته است تبدیل به طرح کدنویسی شده شود و نهایتا آماده برنامه نویسی باشد .
اگر UI Designer همکار شما نباشد ، شما باید خودتان این طرح را روی کاغذ پیاده کرده یا با نرم‌افزارهای اشاره شده این کار را خودتان انجام دهید البته معمولا طراحان قالب سررشته قابل قبولی نیز از فتوشاپ یا فیگما دارند و از این جهت که از ابتدا وارد طراحی با کد نشده و درصورت تایید نشدن توسط کارفرما مسبب کدزنی مجدد و دوباره کاری نشود ، یک طرح کلی را در فتوشاپ یا Figma ابتدا پیاده سازی می‌کنند و پس از تایید توسط کارفرما با خیالی آسوده دست به کد می‌شوند . اگر علاقمند به یادگیری در زمینه UI Design هستید می‌توانید از دوره آموزشی که توسط تیم سئو نود برای شما در این زمینه تهیه و تنظیم شده است استفاده کنید :
البته اکنون این نکته را درنظر بگیرید که شما برای فرانت اند کار شدن نیاز ندارید تا در قدم اول حتما فتوشاپ یا فیگما را یاد بگیرید . شما بعنوان فرانت اند کار وظیفه دارید تا طرح های گرافیکی را از UI Designer تحویل گرفته و کد برنید . اما در ادامه آموزش‌های خود ، اگر طراحی رابط‌های گرافیکی توسط فتوشاپ یا Figma را نیز یاد بگیرید برای مهارت‌های شما یک مزیت عالی و البته پولساز محسوب می‌شود .
سئوالات
— آیا پس از تبدیل شدن به طراح قالب می‌توانیم تنها با همین مهارت شروع به کار کنیم ؟
بله . شما پس از تسلط به این بخش می‌توانید به راحتی در شرکت‌ها و مجموعه‌هایی که نیاز به طراح دارند به راحتی و با داشتن نمونه‌کارهای مناسب مشغول به کار شوید .
— میزان درآمد یک طراح قالب چقدر است ؟
یک طراح قالب بسته به مهارت خود می‌تواند حقوق و مزایای متفاوتی داشته باشد . هر اندازه که شما تخصص داشته باشید می‌توانید درخواست حقوق بیشتری نیز داشته باشید . در این زمینه فعالیت بصورت فریلنسری معمولا درآمد بالاتری خواهد داشت ( البته بسته به میزان مهارت )
— آیا لازم است تا پس از طراحی ، برنامه نویسی را نیز یاد بگیریم ؟
این موضوع تماما بسته به علاقه شما دارد . درصدی از فرانت اند کاران با بخش‌های برنامه نویسی نیز آشنا هستند و توانایی طراحی و برنامه نویسی یک وب سایت کامل را از نقطه صفر تا صد به تنهایی دارند .
