مراحل طراحی سایت از سفارش تا تحویل؛ هر مرحله چه خروجی دارد

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

قبل از هر طراحی: سفارش و نیازسنجی

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

سؤال هایی که باید جواب بدی

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

موارد فنی که زود باید روشن بشه

بعضی چیزها رو نباید بذاری برای مرحله توسعه:

• درگاه پرداخت: کدوم ارائه دهنده درگاه شاپرکی؟ مدارکش آماده ست؟ فعال شدن درگاه و اینماد گاهی از خود کدنویسی بیشتر طول می کشه. شرایط و زمانش رو از منبع رسمی همون سرویس بپرس.
• پیامک و ورود با موبایل: کدوم پنل پیامکی؟ خط خدماتی داری؟
• اتصال به نرم افزار حسابداری یا انبار: اگه API داره، مستنداتش رو همون اول بده. اگه نداره، باید راه دیگه ای پیدا بشه.
• دامنه و هاست: سایت روی چه دامنه ای بالا میاد؟ اگه هنوز دامنه نداری، ثبت دامنه ir قدم به قدم رو بخون. ثبت .ir مدارک و تأیید داره و آخر پروژه نباید منتظرش بمونی.

محدوده کار رو بنویس

سه چیز باید کتبی باشه: چی داخل پروژه ست، چی بیرونشه و چند دور بازبینی داری. مثلاً «تولید محتوای صفحه ها با کارفرماست» یا «عکاسی محصول جزو پروژه نیست». جمله های ساده ای ان، ولی بیشترین دعواها از همین جاها شروع می شه.

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

مرحله دوم: ساختار و طراحی ظاهر

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

نقشه سایت و وایرفریم

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

مسیر کاربر رو دنبال کن. خودت رو بذار جای مشتری: از گوگل یا اینستاگرام میای صفحه محصول، چند کلیک تا پرداخت مونده؟ هر کلیک اضافه می تونه یعنی ریزش.

طرح گرافیکی

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

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

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

مرحله سوم: توسعه، جایی که طرح به سایت واقعی تبدیل می شه

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

نسخه آزمایشی جدا از سایت اصلی

سایت رو روی دامنه اصلی نساز. یه آدرس آزمایشی مثل staging.example.ir بگیر که فقط تو و تیم ببینیدش. اگه سایت قدیمی داری، نمی خوای مشتری هات نصفه کاره بودن پروژه رو ببینن.

یه دام رایج: نسخه آزمایشی برای گوگل باز می مونه و نسخه ناقص ایندکس می شه. با این تنظیم جلوش رو بگیر (نمونه Nginx):

add_header X-Robots-Tag "noindex, nofollow" always;

این هدر به موتور جستجو می گه آدرس رو ایندکس نکنه. بعد از راه اندازی نهایی، حتماً بردارش. جا موندن noindex روی سایت اصلی یکی از دلایل رایج «سایتم از گوگل غیب شد» ه.

محیط اجرا و محدودیت های ایران

اگه پروژه روی سرور مجازی و داکر بالا میاد، یه واقعیت ایرانی رو در نظر بگیر: روی سرور داخل ایران، دریافت ایمیج از Docker Hub و بعضی بسته ها به خاطر محدودیت IP ایران ممکنه جواب نده. برای همین ما ایمیج ها رو روی سیستم توسعه می سازیم و با SSH به سرور منتقل می کنیم. این رو از اول بدون تا استقرار آخر پروژه غافلگیرت نکنه. برای هاست یا سرور هم می تونی گزینه های میزبانی وب و سرور مجازی ایران رو ببینی.

اتصال ها و محتوا

• درگاه پرداخت: اول روی محیط آزمایشی (sandbox) درگاه تست کن، بعد کلید واقعی رو بذار. کلید واقعی رو از کانال امن بده، نه تلگرام.
• پیامک و ایمیل: تنظیمشون رو همون موقع انجام بده، نه شب تحویل.
• ورود محتوا: اگه متن و عکس ها دیر برسه، سایت با «لورم ایپسوم» تحویل می شه و تست واقعی ممکن نیست. تاریخ تحویل محتوا رو بنویس.
• نسخه بندی: کد باید توی مخزن (مثل Git) باشه و تو هم بهش دسترسی داشته باشی، حتی اگه برنامه نویس نیستی. وقتی پیمانکار عوض بشه، به این مخزن احتیاج پیدا می کنی.

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

مرحله چهارم: تست، پیش از اینکه مشتری ها تست کنن

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

چی رو باید چک کنی

• عملکرد: هر فرم، هر دکمه، هر مسیر از اول تا آخر: ثبت نام، ورود، افزودن به سبد، پرداخت موفق و ناموفق، بازگشت از درگاه.
• موبایل و مرورگرها: چند اندازه صفحه واقعی، نه فقط کوچیک کردن پنجره مرورگر. مرورگرهای اصلی و یه گوشی قدیمی.
• سرعت: صفحه اصلی و صفحه محصول رو تست کن. اگه بزرگ ترین عنصر صفحه دیر میاد، بهبود LCP سایت نشون می ده از کجا شروع کنی.
• ایمیل: فرم تماس رو بزن و ببین ایمیل واقعاً به صندوق می رسه یا نه. «ارسال موفق» همیشه یعنی رسیدن نیست؛ ارسال ایمیل وردپرس؛ چرا پیام موفق است ولی نمی رسد؟ همین مشکل رو باز کرده.
• دسترس پذیری: ابزار خودکار رو روی همه صفحه ها اجرا کن و کار با کیبورد رو دستی چک کن. با تب بزن ببین فوکوس همه جا دیده می شه یا نه.
• امنیت پایه: HTTPS، رمزهای پیش فرض، دسترسی پنل مدیریت، و اینکه پوشه ها و فایل های پشتیبان از بیرون قابل دیدن نباشن.

گزارش باگ هم قاعده داره

«کار نمی کنه» گزارش نیست. سه چیز بنویس: چه کاری کردی، انتظار چی داشتی، چی دیدی. اسکرین شات، مرورگر و دستگاه رو هم اضافه کن. این طوری برنامه نویس به جای حدس زدن، مستقیم می ره سراغ ریشه مشکل.

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

خروجی این مرحله: گزارش تست، فهرست باگ ها با وضعیت (بسته یا باز) و تأیید نهایی تو روی نسخه آزمایشی.

مرحله پنجم: تحویل و راه اندازی روی دامنه اصلی

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

قدم به قدم

1. بکاپ از وضعیت فعلی. اگه سایت قدیمی داری، قبل از هر تغییری یه نسخه کامل بگیر و بازیابیش رو امتحان کن. بکاپ سی پنل؛ آموزش تهیه و آزمایش بازیابی سایت توضیح می ده چرا بکاپ تست نشده فقط یه فایل خوش خیاله.
2. انتقال نسخه نهایی روی هاست یا سرور اصلی.
3. تنظیم DNS. رکورد A یا CNAME باید به سرور درست اشاره کنه. اگه با این رکوردها آشنا نیستی، رکورد DNS چیست؟ رو بخون. برای دامنه .ir، تغییر نیم سرور و DNS از پنل ثبت کننده انجام می شه و ممکنه چند ساعت تا انتشار کامل طول بکشه.
4. SSL. نصب گواهی و تمدید خودکارش رو چک کن.
5. برداشتن noindex و تنظیم ریدایرکت ها. آدرس های قدیمی باید با ریدایرکت ۳۰۱ به معادل جدید برن، وگرنه اعتبار صفحه ها هدر می ره.
6. تست نهایی روی دامنه واقعی. پرداخت واقعی با مبلغ کم، ارسال فرم، ایمیل.

چند دستور برای اطمینان

بعد از تغییر DNS، به جای اعتماد به مرورگر (که کش داره) از خط فرمان نگاه کن:

dig +short A example.ir
dig +short NS example.ir
curl -I https://example.ir

دستور اول نشون می ده دامنه به چه IP ای اشاره می کنه و دومی نیم سرورها رو. سومی هدرهای پاسخ رو نشون می ده؛ باید 200 یا ریدایرکت درست ببینی و هدر X-Robots-Tag نباشه. اگه IP قدیمی رو دیدی، احتمالاً DNS هنوز کامل منتشر نشده. صبر کن و دوباره تغییرش نده.

چی باید در دستت باشه

تحویل واقعی فقط «سایت بالاست» نیست. اینا رو بخواه:

• دسترسی مدیریت سایت، هاست یا سرور، پنل دامنه و مخزن کد، با حساب خودت نه حساب پیمانکار
• مستند کوتاه از ساختار پروژه و نحوه انتشار تغییرها
• آموزش مدیریت محتوا. مثلاً اگه ووکامرس داری، آموزش افزودن محصول در ووکامرس مسیر خوبیه برای تیم محتوایی
• برنامه بکاپ و محل نگهداری نسخه ها
• مدت و شرایط پشتیبانی بعد از تحویل

بعد از تحویل: دو هفته اول مهم تر از چیزیه که فکر می کنی

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

خلاصه مراحل طراحی سایت و خروجی هر کدام

اشتباه هایی که زیاد می بینم

• تغییر خواسته وسط توسعه. تغییر کوچیک ساده به نظر میاد، ولی اگه به ساختار پایگاه داده یا پرداخت بخوره، باید دوباره تست بشه. تغییر رو بنویس و زمان و هزینه اش رو بپرس.
• تأیید شفاهی. «خوبه» توی تلفن سند نمی شه. تأیید هر مرحله رو با یه پیام نوشتاری ثبت کن.
• تحویل بدون تست بازیابی بکاپ. تا یه بار بازیابی نکنی، نمی دونی بکاپ واقعاً کار می کنه.
• چند سایت روی یه حساب مشترک. خطر آلودگی و افت منابع هست؛ میزبانی چند سایت؛ حساب مشترک چه خطرهایی دارد؟ رو ببین.

سوالات متداول

مراحل طراحی سایت چقدر طول می کشه؟

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

بدون دانش فنی هم می تونم پروژه رو کنترل کنم؟

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

فرق نسخه آزمایشی و سایت اصلی چیه؟

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

بعد از تحویل هم باید پشتیبانی داشته باشم؟

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

جمع بندی: قبل از قرارداد این سه تا رو بپرس

سه سؤال ساده کل پروژه رو ایمن تر می کنه. خروجی هر مرحله چیه؟ بازبینی ها چندتاست و کتبی ثبت می شن؟ در تحویل، کدوم دسترسی ها و مستندات به دست من می رسه؟ اگه جواب هر سه روشنه، بخش بزرگی از دردسرها حل شده. بقیه اش اجرای دقیق و تست جدیه.

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