طراحی سایت فرایند مشخص‌کردن ساختار صفحه‌ها، شیوه نمایش محتوا و نحوه تعامل کاربر با یک وب‌سایت است. در این کار تصمیم می‌گیریم چه اطلاعاتی در هر صفحه باشد، کاربر از کجا وارد مسیر شود و چطور به هدفش برسد. انتخاب رنگ و فونت، طراحی منو و فرم‌ها و تنظیم چیدمان برای موبایل هم بخشی از همین فرایند هستند.
فرض کنید یک شرکت تعمیر تجهیزات صنعتی می‌خواهد سایت داشته باشد. بازدیدکننده باید بفهمد شرکت چه تجهیزاتی را تعمیر می‌کند، محدوده خدماتش کجاست و چطور درخواست بازدید بدهد. طراحی سایت باید این مسیر را روشن کند. عکس بزرگ صفحه اول وقتی مفید است که به شناخت خدمت کمک کند و راه تماس را زیر انبوه جزئیات پنهان نکند.
طراحی سایت شامل چه کارهایی است؟
پیش از انتخاب ظاهر، باید محتوا و کارکرد صفحه‌ها مشخص شوند. برای شرکت فرضی ما، «تعمیر تجهیزات» ممکن است بیش از حد کلی باشد. بازدیدکننده‌ای که برای تعمیر یک دستگاه مشخص آمده، به توضیح همان خدمت و شرایط ثبت درخواست نیاز دارد. این تصمیم روی منو، صفحه‌های خدمات، متن دکمه‌ها و فرم تماس اثر می‌گذارد.
بعد نوبت تعیین ترتیب اطلاعات و ظاهر اجزا می‌رسد. عنوان، توضیح، تصویر و دکمه باید رابطه روشنی داشته باشند. اجزای تکراری مثل کارت خدمات و فرم‌ها نیز باید در صفحه‌های مختلف رفتار قابل پیش‌بینی داشته باشند. خروجی طراحی معمولاً شامل ساختار صفحه‌ها، طرح اولیه و نمونه‌ای از ظاهر و تعاملات است؛ محدوده دقیق تحویل باید در توافق پروژه مشخص شود.
راهنمای برنامه‌ریزی اولین وب‌سایت در MDN نیز پیش از کدنویسی، تعیین هدف و محتوا و ترسیم طرح اولیه را مطرح می‌کند. در پروژه واقعی، همین برنامه‌ریزی به توافق درباره نیازها و جلوگیری از تغییرهای پراکنده کمک می‌کند.
تفاوت طراحی سایت با توسعه وب، UI و UX
این نقش‌ها با هم همکاری می‌کنند و ممکن است در یک تیم کوچک، یک نفر چند نقش را انجام دهد. بااین‌حال، دانستن تفاوتشان کمک می‌کند درخواست درست را به فرد مناسب بدهید.
| حوزه | پرسش اصلی | مثال در سایت خدماتی |
|---|---|---|
| تجربه کاربری یا UX | کاربر چگونه کار موردنظرش را انجام می‌دهد؟ | مسیر پیدا کردن خدمت و ثبت درخواست بازدید |
| رابط کاربری یا UI | اجزای قابل مشاهده و تعاملی چگونه طراحی شوند؟ | چیدمان فرم، حالت دکمه و خوانایی متن |
| توسعه فرانت‌اند | طرح و تعاملات چگونه در مرورگر اجرا شوند؟ | بازشدن منو و نمایش درست صفحه در موبایل |
| توسعه بک‌اند | داده‌ها و قواعد پشت صحنه چگونه پردازش شوند؟ | ذخیره درخواست و نمایش آن در پنل مسئول پیگیری |
مثلاً طراح مشخص می‌کند هنگام ناقص‌بودن شماره تماس چه پیامی دیده شود. توسعه‌دهنده آن رفتار را پیاده‌سازی می‌کند و اعتبارسنجی لازم در سمت سرور هم انجام می‌شود. ظاهر فرم و پردازش درخواست هر دو باید بررسی شوند؛ درست دیده‌شدن یکی، عملکرد دیگری را ثابت نمی‌کند.
برای شناخت دقیق‌تر این مرزها، مقاله توسعه وب چیست؟ و راهنمای تفاوت طراحی رابط کاربری و تجربه کاربری را ببینید.
چه نوع سایتی برای کسب‌وکار لازم است؟
انتخاب نوع سایت از کاری شروع می‌شود که بازدیدکننده باید انجام دهد. اسم‌هایی مثل شرکتی، فروشگاهی یا خدماتی، به‌تنهایی فهرست امکانات را مشخص نمی‌کنند. دو سایت شرکتی ممکن است از نظر حجم محتوا و اتصال به سامانه‌های دیگر تفاوت زیادی داشته باشند.
- سایت معرفی و خدمات: توضیح حوزه فعالیت، نمونه‌کار، شرایط همکاری و راه تماس محور اصلی است.
- فروشگاه اینترنتی: نمایش محصول، موجودی، سبد خرید، پرداخت و پیگیری سفارش باید به هم متصل باشند.
- سایت محتوایی یا آموزشی: دسته‌بندی مطالب، جست‌وجو و دسترسی به محتوای مرتبط اهمیت بیشتری پیدا می‌کند.
- سامانه تحت وب: کارهایی مثل تأیید درخواست، تخصیص مسئول و گزارش‌گیری، به نقش‌های کاربری و قواعد مشخص نیاز دارند.
شرکت تعمیر تجهیزات ممکن است در شروع به معرفی خدمات و فرم درخواست نیاز داشته باشد. اگر بعداً پیگیری مراحل تعمیر هم اضافه شود، باید وضعیت‌ها، دسترسی مشتری و مسئول تغییر هر وضعیت تعریف شوند. بهتر است این احتمال در گفت‌وگوی اولیه مطرح شود، بدون اینکه همه امکانات آینده وارد نسخه اول شوند.
مراحل طراحی سایت از ایده تا انتشار
۱. هدف و مخاطب را روشن کنید
به‌جای «یک سایت حرفه‌ای می‌خواهیم»، کاری مشخص را تعریف کنید: مشتری بتواند خدمت مناسب را پیدا کند و درخواست بازدید بفرستد. سپس معلوم کنید چه اطلاعاتی برای تصمیم او لازم است. پرسش‌های پرتکرار مشتریان، اطلاعاتی که هنگام تماس می‌خواهند و شرایط ارائه خدمت، برای این مرحله مفیدند.
۲. ساختار صفحه‌ها و محتوا را آماده کنید
فهرست صفحه‌ها و ارتباط آن‌ها را بنویسید. صفحه اصلی لازم نیست تمام توضیحات فنی را در خود جا دهد؛ می‌تواند کاربر را به صفحه خدمت مرتبط هدایت کند. برای هر صفحه، عنوان، توضیح، تصویر موردنیاز و اقدام بعدی را مشخص کنید. متن واقعی و عکس‌های مجاز برای انتشار، پایه بهتری برای طراحی هستند تا متن‌های نمونه کوتاه.
۳. طرح اولیه و نمونه قابل کلیک را بررسی کنید
وایرفریم، طرح ساده‌ای برای نمایش جای اطلاعات و اجزاست. در این مرحله می‌توان بدون درگیرشدن با جزئیات رنگ، ترتیب محتوا را بررسی کرد. نمونه قابل کلیک هم کمک می‌کند حرکت بین صفحه‌ها و فرم‌ها را پیش از پیاده‌سازی امتحان کنید. چنین نمونه‌ای الزاماً به پایگاه داده متصل نیست.
۴. ظاهر و حالت‌های مختلف را طراحی کنید
رنگ، فونت، فاصله‌ها و اجزای مشترک باید هماهنگ باشند. علاوه بر حالت عادی، وضعیت‌هایی مثل منوی باز، فرم دارای خطا و نتیجه خالی جست‌وجو را هم ببینید. برای مثال، بعد از فشردن «ثبت درخواست»، کاربر باید بفهمد چه اتفاقی افتاده و قدم بعد چیست.
۵. اجرا، آزمون و تحویل را انجام دهید
پس از پیاده‌سازی، مسیر اصلی را با داده آزمایشی طی کنید. درخواست باید تا پنل یا مقصد مورد توافق برسد. در موبایل هم منو، فرم و راه تماس را امتحان کنید. سپس آموزش مدیریت محتوا، دسترسی‌ها و مسئولیت پشتیبانی تحویل داده شوند. تأیید ظاهر صفحه اول، جای آزمون صفحه‌های داخلی و عملکرد سایت را نمی‌گیرد.
از کجا بفهمیم طراحی یک سایت مناسب است؟
یک کار مشخص را به کسی بدهید که در ساخت سایت دخالت نداشته است. مثلاً بخواهید شرایط تعمیر یک دستگاه را پیدا کند و درخواست بازدید بفرستد. لازم نیست ابتدا مسیر را برایش توضیح دهید. جاهایی که مکث می‌کند یا سؤال می‌پرسد، نقاط مناسبی برای بازبینی هستند.
خوانایی و دسترسی‌پذیری را هم بررسی کنید. متن باید از پس‌زمینه قابل تشخیص باشد، لینک‌ها و دکمه‌ها مشخص باشند و کارکردشان فقط با رنگ بیان نشود. امکان حرکت با صفحه‌کلید و دیدن محل فوکوس نیز اهمیت دارد. این‌ها از نکات مطرح‌شده در راهنمای طراحی دسترس‌پذیر W3C هستند.
در فرم، نام هر فیلد باید روشن بماند. اگر تنها راهنمای شماره تماس، نوشته داخل کادر باشد، با شروع تایپ ناپدید می‌شود. راهنمای برچسب‌گذاری فرم‌های W3C بر ارتباط درست برچسب و کنترل فرم تأکید می‌کند. این بررسی‌های اولیه جای ارزیابی کامل دسترسی‌پذیری را نمی‌گیرند، اما ایرادهای قابل مشاهده را آشکار می‌کنند.
موبایل، سرعت و سئو چه ارتباطی با طراحی دارند؟
در طراحی واکنش‌گرا، چیدمان با فضای نمایش سازگار می‌شود. برای صفحه خدمات، ممکن است کارت‌ها در موبایل زیر هم قرار بگیرند و منو به شکل دیگری باز شود. اطلاعات اصلی و راه تماس باید همچنان در دسترس بمانند. راهنمای طراحی سایت واکنش‌گرا جزئیات این بررسی را توضیح می‌دهد.
عکس‌ها، ویدئوها و حرکت‌های صفحه روی بارگذاری اثر می‌گذارند. پیش از افزودن هرکدام بپرسید چه کمکی به شناخت خدمت یا انجام کار می‌کند. عکس کاربردی باید جزئیات لازم را حفظ کند و با اندازه متناسب برای نمایش دریافت شود. نمایش آهسته صفحه می‌تواند علت فنی در فرانت‌اند، سرور یا سرویس‌های وابسته داشته باشد؛ از روی ظاهر به‌تنهایی نمی‌توان علت را تعیین کرد.
برای سئو، هر صفحه به موضوع روشن، عنوان توصیفی و پیوندهای مرتبط نیاز دارد. راهنمای مقدماتی سئوی گوگل بر ساختار قابل فهم و محتوای مفید تأکید می‌کند. طراحی زیبا به‌تنهایی رتبه اول را تضمین نمی‌کند. همچنین صفحه‌ای که برای گوگل قابل دسترس نیست، با تکرار کلمه کلیدی در متن مشکلش حل نمی‌شود.
سایت‌ساز، وردپرس یا توسعه اختصاصی؟
این‌ها روش‌های اجرا هستند و باید پس از روشن‌شدن نیاز بررسی شوند. در سایت‌ساز، محدودیت امکانات، خروجی گرفتن از داده و شرایط میزبانی را بررسی کنید. وردپرس، سیستم مدیریت محتواست و می‌تواند با قالب و افزونه یا توسعه سفارشی تکمیل شود. توسعه اختصاصی نیز وقتی بررسی می‌شود که کنترل بیشتر بر ساختار و قواعد سامانه لازم باشد.
ظاهر سفارشی می‌تواند روی وردپرس هم اجرا شود؛ بنابراین «طراحی اختصاصی» باید در پیشنهاد فنی دقیق تعریف شود. برای انتخاب بستر، مقاله وردپرس یا سایت اختصاصی؟ را ببینید. اگر ابتدا می‌خواهید خود وردپرس را بشناسید، راهنمای طراحی سایت با وردپرس مسیر اجرا و مدیریت آن را توضیح می‌دهد.
هزینه و زمان طراحی سایت به چه چیزی بستگی دارد؟
تعداد الگوهای متفاوت صفحه، امکانات، آماده‌بودن محتوا و اتصال به سامانه‌های دیگر روی برآورد اثر دارند. یک سایت با چندین صفحه مشابه، الزاماً از سایتی با صفحه‌های کمتر و فرایند سفارش پیچیده، کار بیشتری ندارد. زمان بررسی و تأیید محتوا هم باید در برنامه لحاظ شود.
در پیشنهاد قیمت روشن کنید چه چیزهایی شامل کار است: طراحی صفحه‌ها، ورود محتوا، ساخت پنل، آزمون و آموزش. هزینه‌های دوره‌ای مانند دامنه، میزبانی و پشتیبانی را نیز جدا بررسی کنید. مقاله هزینه طراحی سایت عوامل برآورد را با جزئیات بیشتری پوشش می‌دهد.
اگر هدف یادگیری طراحی سایت است، از کجا شروع کنیم؟
یک پروژه کوچک با هدف روشن انتخاب کنید؛ مثلاً معرفی یک خدمت و راه تماس. ابتدا محتوا و طرح ساده را آماده کنید. سپس با HTML ساختار، با CSS چیدمان و ظاهر و با JavaScript تعامل‌های لازم را تمرین کنید. در مسیر ساخت اولین وب‌سایت در MDN، این مراحل تا انتشار یک صفحه ساده دنبال می‌شوند.
تمرین را با متن و تصویر واقعی و چند اندازه نمایش انجام دهید. اگر با وردپرس یا ابزار بصری شروع می‌کنید، همچنان باید خوانایی، ساختار محتوا و مسیر کاربر را یاد بگیرید. انتخاب ابزار، جای تمرین طراحی و بررسی نتیجه را نمی‌گیرد.
چک‌لیست شروع پروژه طراحی سایت
- هدف اصلی سایت و کار مورد انتظار از بازدیدکننده را بنویسید.
- صفحه‌ها، محتوا و امکانات ضروری نسخه اول را مشخص کنید.
- مسئول آماده‌سازی متن، عکس و تأیید طرح را تعیین کنید.
- شرایط دامنه، میزبانی، دسترسی‌ها و نگهداری را روشن کنید.
- معیار تحویل را بر اساس مسیرهای قابل آزمون بنویسید.
برای آماده‌کردن جزئیات سفارش، چک‌لیست پیش از سفارش طراحی سایت را بخوانید. سپس می‌توانید نیازهای پروژه را با محدوده خدمات طراحی سایت و اپلیکیشن داپا تطبیق دهید و درباره روش اجرا گفت‌وگو کنید.
پرسش‌های متداول
آیا طراحی سایت حتماً به کدنویسی نیاز دارد؟
بعضی سایت‌ها با ابزارهای بصری یا سیستم مدیریت محتوا اجرا می‌شوند. برای قابلیت‌های سفارشی یا تغییرهای فنی ممکن است کدنویسی لازم باشد. نیاز به برنامه‌نویسی را باید بر اساس امکانات و محدودیت ابزار تعیین کرد.
دامنه و هاست همان طراحی سایت هستند؟
خیر. دامنه آدرس سایت است و میزبانی، محیط نگهداری و اجرای آن را فراهم می‌کند. طراحی، ساختار و تجربه استفاده را مشخص می‌کند و پیاده‌سازی، آن را به وب‌سایت قابل استفاده تبدیل می‌کند.
بعد از انتشار، کار طراحی تمام می‌شود؟
رفتار کاربران، تغییر محتوا و نیازهای تازه ممکن است بازبینی طراحی را لازم کنند. نگهداری فنی، پشتیبان‌گیری و رسیدگی به خطا نیز مسئولیت‌های جداگانه‌ای هستند که باید از ابتدا درباره آن‌ها توافق شود.
