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

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

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

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

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

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

مقایسه طراحی، توسعه فرانت-اند  و توسعه بک-اند

برای راحتی کار، فرایند ایجاد یک وب سایت را به دو بخش تقسیم می کنیم: چیزی که کاربر می بیند و چیزی که کاربر نمی بیند.

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

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

بعضی طراحان کد هم می نویسند، بعضی توسعه دهندگان فرانت-اند طراحی هم می کنند. بعضی طراحان فقط طراحی می کنند و هیچ کدی نمی نویسند و بعضی توسعه دهندگان فقط کد می نویسند.

اما آن چه که کاربران نمی بینند، روی یک سرور  اتفاق می افتد و به توسعه بک-اند مربوط می شود.

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

فعالیت درست وب سایت منوط به ارتباط درست و همیشگی فرانت-اند و بک-اند است. توسعه دهندگان بک-اند مانند هدایت گرانی هستند که کارشان اطمینان از هماهنگی پایگاه داده، سرور و برنامه ها با استفاده از زبان هایی مثل: .NET، PHP، Ruby و Python و قالب هایی مثل: Ruby on Rails و Code Igniter است.

عناصر طراحی وب

پل رند ، طراح برجسته، در مقاله خود، سیاست طراحی ، نوشته است: «طراحی یک فعالیت حل مسئله است که ابزاری برای شفاف سازی، ترکیب و نمایش یک کلمه، تصویر، محصول یا یک رویداد را فراهم می کند.»

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

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

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

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

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

گرافیک: گرافیک شامل لوگو ها، آیکون ها و تصاویر سایت است که مکمل رنگ، پیکربندی و محتوا هستند.

سرعت: اولین برداشت کاربر از وب سایت، به زمان مورد نیاز برای بارگذاری وب سایت بستگی دارد. اگر این زمان زیاد باشد، احتمالا کاربر صبر نخواهد کرد. طبق گزارش عملکرد خرده فروشی آنلاین Akamai در سال 2017، زمان بهینه بارگذاری یک صفحه در دستگاه های مختلف بین 8/1 تا 7/2 ثانیه است. همین گزارش نشان می دهد که تأخیر دو ثانیه ای نرخ پرش سایت، درصد بازدیدکنندگانی که پس از مشاهده یک صفحه وب سایت را ترک می کنند، را تا 103 درصد افزایش می دهد.

دسترسی: این که چه کسی می تواند و چه کسی نمی تواند از سایت بازدید کند، به دسترسی سایت بستگی دارد. اولویت دادن به دردسترس بودن وب سایت باعث می شود دسترسی به وب سایت و امکانات آن برای همه افراد به یک میزان فراهم باشد.