اگر تا به حال از یک توسعهدهنده خواستهاید «لوگو را بزرگتر کند» یا به یک طراح گفتهاید «خطای پایگاه داده را اصلاح کن»، تنها نیستید. اکثر افراد خارج از حوزه فناوری، «طراحی وبسایت» و «توسعه وبسایت» را بهگونهای به کار میبرند که انگار این دو جایگزین یکدیگرند؛ اما اینطور نیست. یک حرفه تعیین میکند که ظاهر خودرو چگونه باشد و کنترلها کجا قرار بگیرند، و حرفه دیگر موتور، سیستم انتقال قدرت و سیمکشی را میسازد. اگر قصد دارید سایتی بسازید، تیمی استخدام کنید یا مسیر شغلی خود را تغییر دهید، درک این تفاوت باعث صرفهجویی در هزینه، زمان و جلوگیری از کلافگی شما خواهد شد.
آنچه طراحی وبسایت واقعاً شامل میشود
وظیفه یک طراح وب این است که پیش از نوشته شدن حتی یک خط کد، مشکلات را حل کند. آنها به ظاهر سایت و همچنین نحوه عملکرد آن از دیدگاه انسانی اهمیت میدهند. خروجیهای آنها مسیر تمام مراحل بعدی را تعیین میکند.
کار معمولاً با ساختار شروع میشود. طراحان طرحوارهها (layouts) و وایرفریمها (wireframes) را ایجاد میکنند؛ نقشههای سادهای با طیف خاکستری که نشان میدهند منوها کجا قرار دارند، محتوا چگونه جریان مییابد و با کلیک کاربر روی یک فراخوان برای اقدام (call-to-action) چه اتفاقی میافتد. برای مثال، وایرفریم یک صفحه رزرو آنلاین نوبت ممکن است نشان دهد که کاربران باید پیش از وارد کردن مشخصات فردی، بازههای زمانی موجود را مشاهده کنند. اگر این ترتیب را اشتباه طراحی کنید، کاربران فرم را رها میکنند.
پس از تأیید ساختار اصلی، طراحان زبان بصری را به آن اضافه میکنند. آنها پالتهای رنگی را انتخاب میکنند که با استانداردهای برند مطابقت داشته و تستهای کنتراست برای دسترسیپذیری (accessibility) را پاس کنند. آنها فونتهایی را انتخاب میکنند که در صفحه گوشی زیر نور مستقیم خورشید بهخوبی خوانده شوند. آنها دکمهها، آیکونها و فیلدهای فرم را با حالتهای تعاملی (hover states) و حلقههای بازخورد منسجم طراحی میکنند. تمام این موارد در حوزه کار رابط کاربری (UI) قرار میگیرند.
سپس حوزه گستردهتر تجربه کاربری (UX) مطرح میشود. یک طراح UX به اصطکاکها و موانع فکر میکند. چرا نیمی از گروه تست نتوانستند ماشینحساب هزینه حملونقل را پیدا کنند؟ چرا کاربران موبایل در گالری محصولات از قابلیت pinch-zoom استفاده میکنند؟ طراح ممکن است منوها را بازآرایی کند، فرآیند طولانی پرداخت را به مراحل مشخص تقسیم کند، یا از متنهای کوتاه (micro-copy) برای توضیح علت رد شدن رمز عبور استفاده کند. هدف، تزئین نیست؛ هدف، شفافیت است.
جعبهابزار یک طراح مدرن شامل Figma برای نمونهسازی (prototyping) مشارکتی، Adobe XD، Sketch (که هنوز در آژانسهای مبتنی بر Mac رایج است) و Photoshop برای کار با داراییهای گرافیکی سنگین است. امروزه طراحان بهطور فزایندهای نمونههای اولیه تعاملی (interactive prototypes) را تحویل میدهند که به ذینفعان اجازه میدهد پیش از ورود توسعهدهندگان، در صفحات کلیک کنند. این شبیهسازی زودهنگام، سوءتفاهمهایی را که اسکرینشاتهای ایستا پنهان میکنند، آشکار میسازد.
آنچه توسعه وبسایت واقعاً انجام میدهد
اگر طراحی نقشهی ساختوساز باشد، توسعه همان تیم ساختمانی، کارهای برقکشی و بازرسی ساختمان است که همگی در یک قالب ادغام شدهاند. توسعهدهندگان طرحهای تأیید شده را میگیرند و آنها را به فایلهایی تبدیل میکنند که مرورگرها بتوانند رندر کنند و سرورها بتوانند پردازش کنند.
توسعهدهندگان فرانتاند (Front-end) بخش قابل مشاهده را مدیریت میکنند. آنها HTML را برای ساختاردهی به محتوا، CSS را برای کنترل چیدمان و تایپوگرافی، و JavaScript را برای مدیریت تعاملات مینویسند. وقتی یک توسعهدهنده از React — که یکی از رایجترین کتابخانههای JavaScript است — استفاده میکند، اغلب در حال ساخت کامپوننتهای پیچیدهای مانند فیلترهای جستجوی لحظهای یا سبدهای خرید پویا است که بدون بارگذاری مجدد صفحه بهروزرسانی میشوند. وظیفه آنها این است که مطمئن شوند دکمهای که طراح ترسیم کرده، واقعاً دادهها را ارسال میکند، وضعیت در حال بارگذاری (loading state) را نشان میدهد و پیام تأیید را نمایش میدهد.
پشت آن لایه قابل مشاهده، بخش بکاند (Back-end) قرار دارد. توسعهدهندگان بکاند با استفاده از زبانهایی مانند Node.js، Python یا PHP، منطق سمت سرور را مینویسند. آنها ورود کاربران را احراز هویت میکنند، پرداختها را پردازش میکنند و قوانین تجاری را مدیریت میکنند که تعیین میکنند آیا کاربر عبارت «موجود در انبار» را ببیند یا «ناموجود». وقتی آنها APIها را ایجاد میکنند، در واقع در حال ساخت پیامرسانی هستند که دادهها را حمل میکند