چطور مهارت‌های طراحی و توسعه رابط کاربری خود را ارتقا بدیم؟

امروزه توسعه وب سمت کاربر و یا فرانت بسیار پیچیده‌تر از گذشته شده است که این موارد فراتر از CSS ،HTML و JavaScript هستند. فناوری‌های زیادی وجود دارد که شما باید آنها را بیاموزید و به تبع آن وظایفتان نیز بیشتر می‌شود. با این حال اگر شما با مفاهیم اولیه توسعه وب (CSS ،HTML و جاوا اسکریپت) آشنایی داشته باشید و همچنین قابلیت طراحی UI (رابط کاربری)‌ داشته باشید‌، می‌توانید پورتفولیو‌های بسیار جذاب و کاربردی که برای کارفرمایان و روند استخدام حائز اهمیت است بسازید.

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

همچنین برای یادگیری و تمرین پیشنهاد می کنیم بوت‌کمپ های برنامه نویسی Full stack را بررسی و یا بخش چالش‌های تمرینی رابط کاربری و Front-End را نیز مشاهده کنید.

یک پیشنهاد دیگه هم داریم. محتوای رایگان آموزشی و پلتفرم تمرینی کارادمی را از دست ندهید.

صفحات وب چگونه ساخته می‌شوند؟

صفحات وب بر اساس محتوا ساخته می‌شود. محتوا همان چیزی است که شما هنگام بازدید یک صفحه وب می‌بینید. محتوا می‌تواند شامل متن، تصاویر، گرافیک و ویدیو باشد. محتوا با استفاده از یک زبان نشانه گذاری با نام HTML ذخیره می‌شود. احتمالا درباره آن شنیده‌اید، اما این یک بررسی خیلی سریع است.

زبان تگ گذاری HTML شامل عناصر است، که بسیاری از آنها دارای بخشی هستند که بر چسب (Tag) های باز و بسته نامیده می‌شوند. آنها مرورگرهای وب را برای چگونگی نمایش محتوا (متون، تصاویر، ویدیوها و مانند آن) روی صفحه راهنمایی می‌کنند.

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

لازم است بدانید CSS هم مشابه HTML یک زبان نشانه گذاری است و هیچ ارتباطی با موضوع برنامه نویسی ندارد. بطور کلی یادگیری زبان های نشانه گذاری مثل HTML و CSS بسیار ساده تر از زبان های برنامه نویسی هستند.

جاوا اسکریپت زبانی پیچیده تر از HTML یا CSS است و نسخه بتا آن تا سال ۱۹۹۵ ارائه نشد. امروزه JavaScript توسط همه مرورگرهای مدرن پشتیبانی می‌شود و تقریبا در هر سایتی در وب برای عملکرد قدرتمندتر و پیچیده تر مورد استفاده قرار می‌گیرد.

جاوا اسکریپت یک زبان برنامه نویسی مبتنی بر منطق است که می‌تواند برای تغییر محتوای وب سایت و ایجاد رفتارهای مختلف در پاسخ به اقدامات کاربر استفاده شود. کاربردهای رایج برای JavaScript شامل کادرهای تأیید، Call to Action یا فراخوان به عمل و افزودن هویت‌های جدید به اطلاعات موجود است.

اصول اولیه توسعه وب را جدی بگیرید

یادگیری اصول برنامه‌نویسی فواید بسیار زیادی دارد اما اگر بخواهیم دو مورد از اصلی‌ترین آن‌ها را برشمریم، بایستی بگوییم پس از آن که ما فراگیریم چگونه برنامه نویسی کنیم، از یک مصرف کننده‌ی فناوری به یک تولید کننده‌ی فناوری تبدیل شده‌ایم و علاوه بر آن، با یادگیری اصول برنامه نویسی، ما به حوزه‌ی یکی از پردرآمدترین مشاغل حال حاضر دنیا نیز ورود پیدا کرده‌ایم.

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

برای شما شاید جالب باشه که بدونین یادگیری کامل در اصول اولیه وب که CSS ،HTML و جاوا اسکریپت است سخت می‌تونه باشه. بعنوان مثال نوشتن CSS سخت است. حتی اگر اغلب مورد تمسخر قرار گرفته و به عنوان یک زبان برنامه نویسی دیده نمی‌شود ولی نوشتن CSS سازگار و زیبا بسیار دشوار است. در مسیر راه خود به عنوان یک توسعه دهنده فرانت اند، اغلب متوجه شده‌ام که در کلاسهای آموزشی از طراحی اپ شما با CSS چشم پوشی می‌کنند و جزئیات CSS Best Practices و موارد دیگر را شرح نمی‌دهند.

وقتی نگاهی به بیشتر پورتفولیو‌ها می‌اندازیم میبینیم که اکثر توسعه دهندگان فرانت اند با این مسئله سر و کله می‌زنن. ما یاد می‌گیریم که چگونه یک RESTFUL API بسازیم قبل از اینکه یاد بگیریم چگونه به درستی از CSS Transition و یا اتریبیوت‌های box-shadow برای استایل کردن یک دکمه ساده استفاده کنیم.

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

فرانت اند یا Front End، به بخش قابل مشاهده‌ی یک وب سایت یا نرم افزار توسط کاربران می‌گویند. فرانت اند، کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آن‌ها نمایش می‌دهد تا بتوانند به راحتی از بخش‌های مختلف سایت استفاده کنند. در این بخش، فرم‌های ورودی اطلاعات، صداها، تصاویر، ویدئوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، قرار می‌گیرد.

فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم می‌شود. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و... ظاهر سایت را طراحی می‌کنند. اما بخش توسعه‌ی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ، CSS و جاوا اسکریپت (که در بالا توضیح داده شد) است. بخش قابل مشاهده‌ سایت برای کاربران در سمت فرانت را سمت کاربر یا Client Side می‌نامند. بنابراین کدهای نوشته شده در سمت فرانت اند، در مرورگر کاربر پردازش و اجرا می‌شوند. یعنی کاربر به راحتی به این کدها دسترسی مستقیم دارد و می‌تواند آن‌ها را مشاهده کند. فرانت اند با بخش بک اند (Backend) در ارتباط مستقیم است و بر روی تجربه کاربران هنگام استفاده از محصول تاثیر بسیاری می‌گذارد.

ترکیبی از طراحی و توسعه رابط کاربری

توسعه دهندگان فرانت اند می‌توانند برای ارتقا مهارت‌های طراحی خود از ابزارهای زیادی استفاده کنند، که این ابزار‌ها معمولاً به دو دسته زیر تقسیم می‌شوند:

ابزارهای طراحی گرافیکی
ویرایشگرهای کد (IDE)

ابزارهای طراحی گرافیکی برای ساختن نمونه اولیه برنامه، آزمایش با رابط کاربری و ایجاد طرح نهایی مفید هستند. با توجه به تعداد اعضای تیم، توسعه دهنده Front-End ممکن است کم و بیش مسئول عناصر گرافیکی برنامه باشد. این ابزارها می‌توانند از یک کاغذ و مداد گرفته تا ابزارهای نمونه سازی اختصاصی مانند Balsamiq Mockup تا ویرایشگرهای قدرتمند گرافیکی مانند Photoshop یا Sketch باشند. توسعه دهندگان Front-End که مسئولیت بیشتر عناصر گرافیکی برنامه را بر عهده دارند، خود را با ابزارهای ویرایشی کامل گرافیکی مانند Photoshop ،Illustrator ، Sketch یا Figma بیشتر آشنا می‌کنند.

طیف وسیعی از ویرایشگرهای کد‌، از ویرایشگرهای فوق العاده کم حجم مانند Notepad تا ویرایشگرهای توسعه یکپارچه (IDE) مانند Eclipse یا Visual Studio که حجم بالایی دارند، وجود دارد.در برخی از ویرایشگرهای پیچیده تر مانند Emacs یا vim ممکن است ماه ها طول بکشند تا حرفه‌ای شوید اما می‌توانند منجر به وفاداری شدید کاربران شوند. ویرایشگر کد توسط توسعه دهنده یک انتخاب کاملاً شخصی است و هیچ راه حل کاملی برای آن وجود ندارد. اکثر توسعه دهندگان قبل از اینکه روی یکی از آنها متمرکز شوند با چندین ویرایشگر کد آزمایش می‌کنند. تقریباً تمام توسعه روی رایانه صورت می‌گیرد، بنابراین یک توسعه دهنده Front-End احتمالاً در انتخاب دستگاه خود بیشتر تفکر کند. تعداد بسیار کمی از ابزارهای دیگر مورد نیاز است، اگرچه برخی از توسعه دهندگان فرانت اند ممکن است تصمیم بگیرند که خود را با دفترچه‌های یادداشت و تخته وایت برد محاصره کنند.

در آخیر برای یادگیری و تمرین پیشنهاد می کنیم بخش های زیر از کارادمی را بررسی کنید:

۱- بوت‌کمپ های برنامه نویسی Full stack

۲- چالش‌های تمرینی رابط کاربری و Front-End

۳- محتوای رایگان آموزشی و پلتفرم تمرینی کارادمی را از دست ندهید.