طراحان UX و UI چه می کنند و توسعه دهندگان فرانت اند چه می کنند؟

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

طراحان

توسعه رابط برنامه‌ها، وب‌سایت‌ها یا بازی‌ها فرآیند نسبتاً پیچیده‌ای است و نیاز به استفاده از دانش در زمینه‌های مختلف دارد: مهندسی، روان‌شناسی و طراحی. طراحان رابط کاربری (به انگلیسی - User Interface یا UI) بر نحوه نمایش عملکرد سایت (جستجو، برگه ها، منوها) و جزئیات تعامل بین مشتری و رابط تمرکز می کنند. هدف یک طراح رابط کاربری طراحی محصول مدرن قابل قبول از نظر زیبایی شناختی است . UX مخفف User Experience به معنای تجربه کاربری است. یک طراح UX بیشتر بر قابلیت استفاده و درک رابط توسط کاربر بالقوه متمرکز است. چنین متخصصی اغلب تحقیقات و بررسی هایی را انجام می دهد که اساس ایجاد یک مفهوم طراحی را تشکیل می دهد و همچنین مفاهیم را در حین و پس از توسعه آزمایش می کند. معمولاً بر ساختار، محتوا، ناوبری و نحوه تعامل کاربر با این عناصر تمرکز دارد. نقشه های سایت، نمونه های اولیه را تولید می کند که ساختار اصلی هنگام ایجاد نرم افزار هستند. هدف از کار یک طراح UX این است که کاربر به سرعت و بدون دردسر آنچه را که به اینجا آمده است از سایت دریافت کند . با این حال امروزه بسیار رایج است که این دو تخصص را با اسلش می بینیم. یعنی وظایف هر دو جهت توسط یک متخصص انجام می شود. یک طراح UX/UI تعامل کاربر با رابط را طراحی می کند، تصمیم می گیرد که دقیقاً چه کاری باید انجام دهد و مسئول ظاهر این رابط در نتیجه است.

آنچه یک طراح UX/UI باید بداند

• ویرایشگر گرافیکی . محبوب ترین ابزارهای موجود در بازار Adobe Photoshop، Adobe Illustrator و همچنین Sketch، Figma هستند. ویرایشگری را انتخاب کنید که برای شما مناسب باشد و ابتدا سعی کنید تصاویری از یک وب سایت یا برنامه بکشید و کمی آنها را مدرن کنید.

  راهنمای طرح

• ابزارهای نمونه سازی (Mockplus، Axure) . ابزار نمونه سازی پیوند بین یک ایده و اجرای آن است. مهم نیست از چه ابزاری استفاده می کنید. می توانید چندین مورد را امتحان کنید و انتخاب کنید که متناسب با سبک و ترجیحات شما باشد.

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

  روانشناسی طراحی: 8 اصل روانشناختی که هنگام طراحی مفید خواهد بود

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

  تئوری رنگ برای طراحان قسمت 1: معنای رنگ

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

• توصیه می شود که درک تایپوگرافی ، وسیله ای برای ترکیب متن و اجزای بصری داشته باشید.

  25 قانون تایپوگرافی برای طراحان مبتدی

  تایپوگرافی در وب

• ترکیب سایت و قابلیت استفاده

  ترکیب بندی در طراحی وب یا آنچه که آموزش های فتوشاپ در مورد آن بی صدا هستند

• بسته به ویژگی‌های کار، ممکن است به درک HTML و CSS یا (برخی) زبان‌های برنامه‌نویسی نیاز داشته باشید (پیوندهای منابع را می‌توانید در زیر، در بخش «آنچه یک توسعه‌دهنده فرانت‌اند باید بداند» پیدا کنید).

توسعه دهنده Front-end

وظیفه اصلی یک توسعه دهنده front-end توسعه بخش مشتری از رابط است. یعنی چنین متخصصی آنچه را که طراحان طراحی کرده اند "احیا می کند". او مسئول عملیات و عملکرد رابط است و کمتر برای محتوای بصری. یک توسعه‌دهنده فرانت‌اند اغلب نیاز دارد تا راه‌حل خوبی برای رابط کاربری در مرحله توسعه پیدا کند، بنابراین اغلب با یک طراح UX/UI همکاری می‌کند. کد نوشته شده توسط توسعه دهنده front-end در مرورگر کاربر اجرا می شود (به قول آنها "در سمت مشتری"). همچنین یکی از مهمترین وظایف این است که اطمینان حاصل شود که سایت یا برنامه وب در همه پلتفرم ها و مرورگرها یکسان به نظر می رسد.

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

به عنوان یک قاعده، فرانت اند بر سه پایه است: زبان نشانه گذاری صفحه HTML، شیوه نامه های CSS و زبان برنامه نویسی جاوا اسکریپت. علاوه بر این، توسعه‌دهنده فرانت‌اند باید اصول عملکرد پروتکل HTTP، سرورها و مرورگرها و ویژگی‌های نمایش رابط را در دستگاه‌های مختلفی که در حال حاضر در بازار وجود دارد، بداند. ابزارها و روش‌های ایجاد رابط‌های وب دائماً در حال تغییر و تحول هستند، بنابراین توسعه‌دهنده باید دائماً بر این موضوع نظارت داشته باشد.

HTML و CSS (طرح بندی)

این طرح، همان آجرهایی است که سایت از آن ساخته شده است. زبان نشانه گذاری HTML سازماندهی سایت، محتوا و تمامی تعاملات بین آنها را دیکته می کند. به شما امکان می دهد قسمت بالای صفحه، پایین، بلوک های جانبی را با محتوا، عنوان، نمایش متن و عناصر چند رسانه ای مشخص کنید. از شیوه نامه های CSS برای تزئین عناصر HTML استفاده می شود. آنها دقیقاً تعیین می کنند که هر عنصر گرافیکی که در صفحه قرار دارد چگونه نمایش داده شود. با استفاده از آخرین نسخه‌های HTML5 و CSS3، می‌توانید اجزای ویدیویی و صوتی را در یک صفحه قرار دهید، تصاویر و انیمیشن‌های دو بعدی ایجاد کنید و حتی بازی‌های ساده بنویسید. نیازی به تلاش برای به خاطر سپردن همه تگ ها و سبک ها در یک زمان نیست. یادگیری اصول اولیه و اجرای فوری آنها مفید خواهد بود. یک سایت بسیار خوب که در آن می توانید اصول HTML و CSS را یاد بگیرید W3School است. اما فقط در صورتی که حداقل دانش اولیه زبان انگلیسی را داشته باشید.

• W3School
• CSS

همچنین، توسعه‌دهنده فرانت‌اند باید توسعه مرورگرهای متقابل و چند پلتفرمی، طرح‌بندی تطبیقی ​​و پاسخ‌گو را درک کند.

بوت استرپ

این یک چارچوب برای HTML، CSS و جاوا اسکریپت است. یعنی قالب‌های خاصی که از طریق آن‌ها، مانند یک سازنده، می‌توانید سایت‌ها را خیلی سریع‌تر از بدون آنها جمع‌آوری کنید. اما، البته، شما باید آن را مطابق با نیازهای خود شخصی سازی کنید. اگر انگلیسی بلد هستید، وب سایت getbootstrap و همان w3schools را پیشنهاد می کنیم .

جاوا اسکریپت

جاوا اسکریپت هسته اصلی توسعه front-end است. این اولین و گسترده ترین زبان برنامه نویسی رابط است. می تواند امکانات زیادی را به سایت اضافه کند. در سطح پایه، این زبان به شما امکان می دهد عناصر تعاملی را به یک صفحه اضافه کنید. برای ایجاد نقشه هایی که در زمان واقعی به روز می شوند، بازی های آنلاین تعاملی و فیلم ها استفاده می شود. در دوره های ارشد JavaRush، کمی جاوا اسکریپت یاد می گیریم. شما همچنین می توانید آن را در همان W3School مطالعه کنید یا در مورد آن به زبان روسی در وب سایت javascript.ru بخوانید .

جی کوئری

جی کوئری یک کتابخانه جاوا اسکریپت است که شامل افزونه‌ها و افزونه‌هایی است که می‌توانند توسعه را آسان‌تر و سریع‌تر کنند. به جای نوشتن کد از ابتدا، کتابخانه ها به شما اجازه می دهند اجزای آماده را اضافه کنید، که سپس می توانند برای یک پروژه خاص سفارشی شوند. می توانید از عملکردهای پر کردن خودکار فرم های جستجو، تنظیم مجدد و تغییر اندازه شبکه و تنظیم تایمرهای شمارش معکوس استفاده کنید. دوره عملی جی کوئری در w3school

چارچوب های جاوا اسکریپت

انواع مختلفی از فریم ورک ها وجود دارد، اما شما می توانید یکی را انتخاب کنید که استفاده از آن برای شما راحت باشد. معروف ترین آنها Angular، Backbone، Ember و React هستند. آنها یک ساختار آماده برای کد را نشان می دهند. آنها به سرعت بخشیدن به توسعه کمک می کنند. و در ترکیب با کتابخانه ها می توانند توسعه یک وب سایت یا برنامه را از ابتدا به حداقل برسانند. بررسی 5 فریمورک و کتابخانه محبوب جاوا اسکریپت در سال 2017

سیستم کنترل نسخه Git

سیستم های کنترل نسخه می توانند تغییرات ایجاد شده در کد را در طول زمان ردیابی کنند. آنها همچنین به شما اجازه می دهند به نسخه قبلی پروژه بازگردید. Git پرکاربردترین سیستم کنترل نسخه است. دانستن نحوه کار با Git یک مهارت مهم برای هر توسعه دهنده است. آموزش Git به زبان روسی

نتیجه گیری مختصر

UI مخفف User Interface به معنای رابط کاربری است. یعنی UI Designer در درجه اول مسئول نحوه ارائه محصول به کاربر است. او دکمه‌ها، آیکون‌ها را توسعه می‌دهد، فونت‌ها را انتخاب می‌کند و طرح‌بندی را آماده می‌کند. UX مخفف User Experience است. بنابراین یک طراح UX طراحی یک وب سایت، یک اپلیکیشن – یا هر چیز دیگری – را طراحی می کند تا کاربر راحت و قابل درک باشد که چه چیزی چیست و بتواند با کمترین تلاش، آنچه را که نیاز دارد از سایت دریافت کند. اغلب، هر دو نوع کار توسط ارکستر یک نفره اجرا می شود: یک طراح UI/UX. توسعه دهنده Front-end با وارد کردن دینامیک به کار طراحان جان می بخشد: دکمه ها شروع به فشار دادن می کنند و تصویر شروع به تغییر می کند. او باید زبان های برنامه نویسی، چاشنی چارچوب ها، پیش پردازنده ها و کتابخانه ها را بداند.