تفاوت طراحی سایت با توسعه سایت چیست؟

تفاوت طراحی سایت با توسعه سایت

برای درک این تفاوت، کافی است با تعریف دقیق آنها آشنا شویم:

طراحی سایت چیست؟

طراحی سایت (web design) بیش از هرچیز دیگری با زیبایی‌شناسی بصری و قابلیت استفاده (usability) یک وبسایت کار دارد. منظور پالت رنگ، چیدمان یا همان لی‌اوت، جریان اطلاعات و موارد دیگری است که جنبه‌های بصری رابط کاربری و تجربه کاربری (UI/UX) مربوط می‌شوند.

مهارت های طراح سایت

برخی از مهارت‌ها و ابزارهایی که تسلط بر آنها یک طراح سایت را از توسعه دهنده‌های سایت متمایز می‌کند عبارت‌اند از:

• نرم‌افزارهای ادوبی (فوتوشاپ، ایلاستریتور و …)
• طراحی گرافیک
• طراحی رابط کاربری (UI)
• طراحی تجربه کاربری (UX)
• طراحی لوگو
• طرح‌بندی/فرمت
• جای‌گذاری دکمه‌های CTA
• برندینگ
• وایرفریم‌ها، موکاپ‌ها و استوری بوردها
• پالت‌های رنگی
• تایپوگرافی

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

همانطور که اشاره کردیم، بسیاری از طراحان وب با HTML، CSS و جاوا اسکریپت هم آشنا هستند. مهارت‌هایی که به آنها اجازه می‌دهد ایده‌هایشان را بهتر به سایر تیم‌ها منتقل کنند. در حال حاضر طراحان وب زیادی با وردپرس (یا جوملا) هم کار می‌کنند؛ CMSهایی که به آنها اجازه می‌دهد بعضا بدون کدنویسی خاصی وب‌سایت‌هایی را با قالب‌ها و پلاگین‌ها بسازند.

توسعه سایت چیست؟

توسعه سایت با کدهایی که باعث می‌شوند یک سایت اصطلاحا “کار کند” سروکار دارد. توسعه سایت دو بخش مهم دارد:

• فرانت اند (front-end) یا سمت مشتری (client-side): اینها کدهایی هستند که نحوه نمایش سایت را کنترل می‌کند؛ نمایش همان طرح‌هایی که طراح آماده و موکاپ کرده است.
• بک اند (back-end) یا سمت سرور (server-side): این کدها وظیفه مدیریت داده‌ها در دیتابیس، و ارائه آن داده‌ها به فرانت اند برای نمایش به کاربر را به عهده دارند.

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

همان‌طور که حدس می‌زنید، در بحث تفاوت طراحی سایت با توسعه سایت، وظایف توسعه‌دهنده فرانت اند بیشترین همپوشانی را با طراح سایت دارد. برخی از مهارت‌ها و ابزارهای رایج برای توسعه‌دهنده‌های فرانت اند عبارت‌اند از:

• HTML، CSS و JavaScript
• پیش پردازنده‌های CSS (LESS یا Sass)
• فریم ورک‌ها (مثلا AngularJS، ReactJS، Ember)
• طراحی قالب وب
• کتابخانه ‌ها (مثلا jQuery)
• Git و GitHub
• بهینه‌سازی موتورهای جستجو به شکل On-site (البته این افراد بیشتر به سمت بحث‌های تکنیکال SEO کشیده می‌شوند)

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

البته درک انتظارات طراح کمی دانش UI/UX هم می‌طلبد، تا developer بتواند روش/ابزار مناسب را برای ارائه ظاهر، احساس و تجربه ایده‌آل انتخاب کند.

مهارت های توسعه دهنده وب بک اند

به زبان ساده، توسعه دهند‌های Back-end داده‌های پشت پرده سایت را مدیریت می‌کنند. آنها APIها و سایر بخش‌هایی را کدنویسی می‌کنند که به داده‌ها اجازه می‌دهد بین “فرانت” و “اند” رد و بدل شوند. زبان‌های برنامه‌نویسی و ابزارهای منحصر به فرد برای Web developerها را در ادامه می‌بینید:

• زبان‌های برنامه‌نویسی سمت سرور مانند پی اچ پی، پایتون، جاوا، سی شارپ
• فریم‌ورک‌های توسعه وب سمت سرور (مثلا Ruby on Rails، Symfony، .NET)
• سیستم های مدیریت پایگاه داده (به عنوان مثال، MySQL، MongoDB، PostgreSQL)
• APIهای RESTful
• احراز هویت و امنیت (مثلا OAuth و PassportJS)
• سرورها (مانند لینوکس، آپاچی، اکسپرس)

تفاوت طراح سایت با توسعه دهنده سایت به کنار، دولوپرهایی که هم به مباحث فرانت اند مسلط هستند و هم مباحث بک اند، به عنوان توسعه دهنده فول استک (full-stack) شناخته می‌شوند.