قبل از اینکه به موضوع اصلی این مقاله،یعنی تفاوت UI و Front-end بپردازیم،نیاز است تا ابتدا هر یک را معرفی کنیم.
فرانت اند:
برنامه نویس این حوزه ،به برنامه نویس سمت کاربر معروف است.از زبان های html ,css و javascript برای طراحی و ساخت بخش های مختلف سایت (البته بخش هایی که کاربر با آن ها تعامل دارد و سمت کاربر است)استفاده می شود.دارای فریم ورک های مختلفی است و در بخش های مختلف کاربرد دارد.
برای مطالعه ی توضیحات بیشتر ، اینجا کلیک کنید.تفاوت فرانت اند و بک اند چیست؟
رابط کاربری(UI):
UI مخفف User Interface Design می باشد.شرایط استفاده از یک محصول را برای کاربر آسانتر می کند. به طور مثال ساختمان نیمه کاره ای را در نظر بگیرید. پله های آن هنوز بهینه نشده و امکان سقوط افراد وجود دارد،شخصی که در این حوزه مهارت و تجربه دارد،ابتدا پله ها را بهینه کرده، زیباسازی های لازم را بر روی آن انجام می دهد و برای راحتی و امنیت بیشتر، برای آن نرده هایی در نظر می گیرد.
کارشناسان رابط کاربری نیز، به اینگونه عمل می کنند. یعنی پروژه ی نیمه تمامی را بررسی کرده و بخش های مختلف یک محصول ( یک سایت یا اپلیکشن و یا…) طوری طراحی می کنند تا کاربر آسانتر به مقصود خود برسد.همچنین استفاده از آن محصول ، برایش لذت بخش تر باشد.
در حقیقت UI فضایی تعاملی میان انسان و ماشین ایجاد می کند . هدف اصلی آن نیز، سهولت استفاده برای کاربر است.
تفاوت طراح رابط کاربری و برنامه نویس فرانت اند:
از مهم ترین تفاوت های UI و Front-end،عدم استفاده ی UI از کد نویسی است. در نرم افزار هایی مانند:فیگما ، ادوبی ایکس دی و فتوشاپ،سر و کار دارد. تمرکز اصلی فرانت اند بر ارتباط و تعامل با کاربر است.اگرچه در زمینه ی گرافیک سایت هم تا حدودی ، نقش دارد. ولی همه ی آن ها به وسیله ی کد نویسی به زبان های html , css , javascript می باشد.
نرم افزار های گرافیکی مرتبط با UI:
فیگما:
این نرم افزار برای طراحی UI , UX می باشد.مبتنی بر cloud (فضای ابری) است.مناسب برای سیستم عامل های ویندوز و مک می باشد.این نرم افزار مناسب برای تشکیل تیم های طراحی است و امکان تعامل با افراد گروه را فراهم آورده است.
ایکس دی:
Adobe XD نرم افزار طراحی رابط کاربری و تجربه ی کاربری (یا همان UI ,UX ) می باشد.توسط شرکت ادوبی ساخته شده است.مانند نرم افزار ایلوستریتور، مبتنی بر طراحی برداری است و همجنین از طراحی Wireframe نیز پشتیبانی می کند.قابلیت ایجاد پروتوتایپ تعاملی دارد.
فتوشاپ:
Adobe Photoshop یکی معروفترین و پرکاربردترین محصولات شرکت ادوبی است که به عنوان یک ویرایشگر گرافیکی شطرنجی محسوب می شود.به طور کلی، این نرم افزار برای ویرایش حرفه ای عکس ها مورد استفاده قرار می گیرد.
زبان های لازم برای فرانت اند:
Html
به این زبان ، زبان نشانه گذاری گفته می شود. به وسیله ی تگ های آن می توانید ساختار اصلی سایت و صفحات خود(البته به صورت استاتیک) را ایجاد کنید. نکته ی حائز اهمیت این است که به هیچ عنوان نمی توانیم html را یک زبان برنامه نویسی بشماریم.چون ساختاری متفاوت با زبان های برنامه نویسی دارند. به طور مثال در html خبری از شرط های if , else ، حلقه های for ,while ، متغیر ها ، توابع و… نیست.این زبان تنها برای نمایش محتوا و چارچوب گذاری سایت می باشد.
Css
Css،زبان شیوه نامه است و مانند html و با همان دلایل،زبان برنامه نویسی محسوب نمی شود.این زبان برای استایل دهی به بخش های مختف سایت می باشد و ارتباط تنگاتنگی با تگ های قرار گرفته در htmlدارد.
Javascript
برخلاف دو مورد قبلی،javascript یک زبان برنامه نویسی سطح بالا،داینامیک ، شی گرا و تفسیری است و از زبان ها و شیوه های دیگر برنامه نویسی ، پشتیبانی می کند.این زبان، سمت سرور می باشد و مستقل از نوع سیستم عامل ، کار خودرا دنبال می کند.دارای کتاب خانه ها و فریم ورک های متفاوتی است که در حوزه ی فرانت اند ، به کار گرفته می شود.
نتیجه:
گرچه UI و فرانت اند تفاوت های زیادی با هم دارند ، اما ارتباط تنگاتنگی با یکدیگر دارند و همچنین برای طراحی یک سایت خوب و کاربر پسند، وجود هردو لازم است.
