مراحل طراحی سایت از ایده تا تحویل؛ ۱۰ گام با زمانبندی واقعی

مراحل طراحی سایت ده گام پشتسرهم است که یک ایده را به سایتی آماده و قابلمدیریت تبدیل میکند: نیازسنجی و بریف، نقشه سایت، وایرفریم، طراحی رابط کاربری، توسعه، محتوا، سئو پایه، تست، راهاندازی و پشتیبانی. هر گام یک خروجی مشخص دارد که باید پیش از رفتن به گام بعد تأیید شود؛ پروژههایی که گامی را جا میاندازند، معمولاً همان گام را بعداً با هزینه بیشتر تکرار میکنند.
نویسنده: تیم siloow (سیلو سولوشن) — آخرین بهروزرسانی: آبان ۱۴۰۵
در این راهنما هر مرحله را با هدف، کارهای اصلی، خروجی قابلتحویل، نقش کارفرما و زمان تقریبی میبینید؛ یک جدول زمانبندی برای انواع سایت دارید و میدانید کجاها پروژهها معمولاً متوقف میشوند. این فرایند همان چیزی است که تیم siloow در ساخت قالبهای اختصاصی وردپرس، فروشگاههای ووکامرس و وباپلیکیشنها به کار میبرد.
مراحل طراحی سایت در یک نگاه چیست؟
مراحل طراحی سایت را میتوان در سه فاز دستهبندی کرد: فاز برنامهریزی (نیازسنجی، نقشه سایت، وایرفریم)، فاز ساخت (طراحی UI، توسعه، محتوا، سئو پایه) و فاز تحویل (تست، راهاندازی، پشتیبانی). جدول زیر خلاصه ده گام را با خروجی و زمان تقریبی برای یک سایت شرکتی متوسط نشان میدهد.
| گام | هدف | خروجی قابلتحویل | نقش کارفرما | زمان تقریبی (سایت شرکتی) |
|---|---|---|---|---|
| ۱. نیازسنجی و بریف | روشن شدن هدف، مخاطب و دامنه کار | سند بریف و فهرست امکانات | پاسخ به سوالات، معرفی رقبا | چند روز |
| ۲. نقشه سایت | تعیین صفحات و ساختار منو | نمودار صفحات و ساختار URL | تأیید فهرست صفحات | یک تا چند روز |
| ۳. وایرفریم | توافق روی چیدمان و اولویت محتوا | اسکلت صفحات کلیدی | بازخورد درباره ترتیب بخشها | چند روز تا یک هفته |
| ۴. طراحی رابط کاربری | ظاهر نهایی بر اساس برند | طرح دسکتاپ و موبایل در Figma | تأیید طرح در دفعات اصلاح مشخص | یک تا سه هفته |
| ۵. توسعه | تبدیل طرح به سایت واقعی | سایت روی محیط تست | بررسی امکانات روی محیط تست | دو تا شش هفته |
| ۶. محتوا | جایگذاری متن، تصویر و اطلاعات | صفحات کامل با محتوای نهایی | تحویل متن و تصاویر واقعی | همزمان با توسعه |
| ۷. سئو پایه | آمادگی برای ایندکس و رتبه | متا، اسکیما، نقشه سایت، ریدایرکت | تأیید کلمات کلیدی اصلی | چند روز |
| ۸. تست | پیدا کردن خطا پیش از کاربر | گزارش تست و رفع موارد | تست سناریوهای واقعی کسبوکار | چند روز تا یک هفته |
| ۹. راهاندازی | انتقال امن به نسخه نهایی | سایت زنده، SSL، سرچ کنسول | تأیید نهایی و دریافت دسترسیها | یک تا دو روز |
| ۱۰. پشتیبانی | سلامت و بهبود مستمر | بکاپ، بهروزرسانی، گزارش | اعلام نیازهای جدید | مستمر |
زمانهای بالا تقریبی و بر پایه تجربه پروژههای شرکتی است. فروشگاه اینترنتی و وباپلیکیشن بهویژه در گام توسعه و تست زمان بیشتری لازم دارند. برای تعریف پایهای مفاهیم، راهنمای کامل طراحی سایت را ببینید.

گام ۱: نیازسنجی سایت و نوشتن بریف چطور انجام میشود؟
نیازسنجی سایت یعنی تبدیل خواستههای کلی کارفرما به هدفهای قابلاندازهگیری، مخاطب مشخص و فهرست امکانات اولویتبندیشده. خروجی این گام سند بریف است که مرجع همه تصمیمهای بعدی و پایه برآورد هزینه میشود.
در جلسه نیازسنجی این سوالات پاسخ داده میشوند:
- سایت قرار است چه نتیجهای بدهد؟ (درخواست مشاوره، فروش، نوبت، ثبتنام)
- مخاطب اصلی کیست و بیشتر با چه دستگاهی وارد میشود؟
- رقبا چه کسانیاند و چه چیزی در سایتشان خوب یا بد است؟
- کدام امکانات ضروریاند و کدام میتوانند به فاز بعد بروند؟
- محتوا آماده است یا باید تولید شود؟ چه کسی مسئول آن است؟
- چه کسی در سمت کارفرما تصمیم نهایی را میگیرد؟
در پروژههای بازطراحی، نیازسنجی شامل بررسی سایت فعلی هم هست: کدام صفحات از گوگل ورودی میگیرند، کدام فرمها استفاده میشوند و کدام بخشها هیچ بازدیدی ندارند. دادههای Google Search Console در این مرحله ارزش زیادی دارد.
گام ۲: نقشه سایت و معماری اطلاعات چیست؟
نقشه سایت (Sitemap) در مرحله طراحی، نمودار سلسلهمراتبی همه صفحات سایت و رابطه آنها با هم است و تعیین میکند کاربر و گوگل از صفحه اصلی با چند کلیک به هر صفحه میرسند. این نقشه با «نقشه سایت XML» که برای موتورهای جستجو ساخته میشود فرق دارد، اما پایه آن است.
در این گام ساختار URL هم تعیین میشود. URLهای کوتاه، خوانا و پایدار مثل /services/ یا /خدمات/طراحی-سایت/ بعدها از دردسر ریدایرکت جلوگیری میکنند. گوگل در راهنمای ساختار URL توصیه میکند URLها ساده، قابلفهم برای انسان و دارای کلمات معنادار باشند.
گام ۳: وایرفریم چیست و چرا نباید حذف شود؟
وایرفریم طرح ساده و بدون رنگ صفحه است که فقط جای بخشها، ترتیب محتوا و دکمههای اصلی را نشان میدهد. وایرفریم ارزانترین جای تغییر دادن تصمیمهاست؛ جابهجا کردن یک بخش در وایرفریم چند دقیقه طول میکشد اما در سایت کدنویسیشده ممکن است ساعتها کار ببرد.
وایرفریم صفحات کلیدی (خانه، خدمات یا محصول، تماس) معمولاً کافی است. در این مرحله تمرکز روی این سوال است که کاربر در هر صفحه اول چه چیزی را میبیند و اقدام اصلیاش چیست، نه روی رنگ و فونت. نسخه موبایل وایرفریم هم باید همزمان بررسی شود، چون بیشتر بازدیدها از موبایل است.
گام ۴: طراحی رابط کاربری (UI) چه خروجیای دارد؟
طراحی رابط کاربری وایرفریم تأییدشده را با هویت بصری برند (رنگ، فونت، تصاویر، آیکنها) به طرح نهایی دسکتاپ و موبایل تبدیل میکند. خروجی استاندارد این گام فایل طراحی در ابزاری مثل Figma بههمراه یک دیزاین سیستم کوچک است: رنگها، اندازه فونتها، دکمهها، فرمها و فاصلهها.
- طرح برای حالتهای مختلف المانها (عادی، هاور، فعال، خطا، خالی) هم کشیده شود.
- کنتراست رنگ متن و پسزمینه برای خوانایی بررسی شود؛ معیار WCAG برای متن عادی نسبت حداقل ۴.۵:۱ است.
- تعداد دفعات اصلاح طرح از قبل در قرارداد مشخص باشد.
- برای سایت فارسی، فونت با پشتیبانی کامل از حروف و اعداد فارسی انتخاب شود.
گام ۵: توسعه سایت چطور انجام میشود؟
توسعه سایت مرحلهای است که طرح تأییدشده با HTML، CSS، JavaScript و زبان سمت سرور (در وردپرس، PHP) به سایتی واقعی، ریسپانسیو و قابلمدیریت تبدیل میشود. توسعه روی محیط تست (Staging) انجام میشود تا کارفرما بتواند پیش از راهاندازی، سایت را واقعی ببیند.
توسعه فرانتاند
صفحات طبق طرح، با کد معنایی و ریسپانسیو پیادهسازی میشوند. استفاده از تگهای معنایی HTML مثل header، nav، main و article هم به دسترسپذیری کمک میکند و هم به موتورهای جستجو. اگر میخواهید این پایه را خودتان بشناسید، قسمت ساختار صفحه HTML و راستچین کردن در کدپرس siloow دقیقاً همین را آموزش میدهد.
توسعه بکاند و پنل مدیریت
در پروژههای وردپرسی، قالب اختصاصی، انواع محتوای سفارشی و فیلدهای لازم ساخته میشوند تا کارفرما بتواند بدون برنامهنویس محتوا را ویرایش کند. در وباپلیکیشنها پایگاه داده، نقشهای کاربری و APIها پیادهسازی میشوند.
گام ۶: محتوای سایت را چه کسی و چه زمانی آماده میکند؟
محتوای سایت باید همزمان با توسعه، نه بعد از آن، آماده شود؛ وگرنه سایت تمامشده هفتهها منتظر متن و تصویر میماند. مسئولیت تولید محتوا باید در قرارداد روشن باشد: یا کارفرما متن خام را تحویل میدهد و تیم ویرایش میکند، یا تیم محتوا را از ابتدا مینویسد.
نکته: رایجترین دلیل تأخیر در مراحل طراحی سایت که ما دیدهایم، کمبود محتوا است، نه مشکل فنی. یک فایل مشترک با فهرست صفحات و وضعیت محتوای هرکدام (آماده، در حال نگارش، نیاز به عکس) بسازید و هر هفته مرورش کنید.
گام ۷: سئو پایه قبل از راهاندازی شامل چه کارهایی است؟
سئو پایه قبل از راهاندازی یعنی آماده کردن سایت برای خزش و ایندکس درست: عنوان و توضیحات متای هر صفحه، ساختار هدینگ، متن جایگزین تصاویر، نقشه سایت XML، داده ساختاریافته، کنونیکال و ریدایرکت ۳۰۱ برای URLهای قدیمی. این کارها اگر در همین گام انجام شوند ارزاناند و اگر بعداً، معمولاً دوبارهکاری میخواهند.
مفاهیم پایه این مرحله را در راهنمای کامل سئو چیست توضیح دادهایم. یادتان باشد پیش از راهاندازی، تیک «جلوگیری از ایندکس» که در محیط تست فعال است حتماً برداشته شود.
گام ۸: تست و تحویل سایت شامل چه چیزهایی است؟
تست و تحویل سایت یعنی بررسی نظاممند همه صفحات، فرمها، پرداختها و سناریوهای کاربر در مرورگرها و دستگاههای مختلف، پیش از آنکه مشتری واقعی خطا را ببیند. تست فقط کار تیم فنی نیست؛ کارفرما بهترین کسی است که سناریوهای واقعی کسبوکار را امتحان کند.
| حوزه تست | چه چیزی بررسی میشود؟ | ابزار یا روش |
|---|---|---|
| ریسپانسیو | نمایش درست در موبایل، تبلت و دسکتاپ | دستگاه واقعی و ابزار توسعهدهنده مرورگر |
| مرورگرها | Chrome، Safari، Firefox و Edge | تست دستی روی نسخههای رایج |
| فرمها و ایمیل | ارسال، اعتبارسنجی و رسیدن ایمیل اطلاعرسانی | ارسال آزمایشی از هر فرم |
| پرداخت و سفارش | مسیر کامل خرید، پرداخت موفق و ناموفق | حالت آزمایشی درگاه |
| سرعت | LCP، INP و CLS | PageSpeed Insights |
| دسترسپذیری | کنتراست، متن alt، کار با صفحهکلید | Lighthouse و تست دستی |
| سئو فنی | متاها، کنونیکال، robots.txt، نقشه سایت | افزونه سئو و بازرسی URL |
| امنیت | HTTPS، دسترسیها، رمزها، بهروز بودن افزونهها | بررسی تنظیمات و اسکنر امنیتی |
معیار سرعت در این گام، آستانههای رسمی Core Web Vitals است: LCP حداکثر ۲.5s، INP حداکثر 200ms و CLS حداکثر ۰.۱، طبق web.dev.

گام ۹: راهاندازی سایت چطور بدون دردسر انجام شود؟
راهاندازی سایت یعنی انتقال نسخه تستشده به هاست و دامنه اصلی، فعال کردن SSL و اتصال ابزارهای پایش. بهتر است راهاندازی در ساعت کمترافیک و نه در آخر هفته انجام شود تا اگر مشکلی پیش آمد، تیم در دسترس باشد.
- بکاپ کامل از سایت قبلی (اگر وجود دارد) و از نسخه نهایی جدید.
- انتقال فایلها و پایگاه داده و تنظیم دامنه.
- فعالسازی HTTPS و ریدایرکت همه نسخهها به یک نسخه اصلی.
- اعمال ریدایرکتهای ۳۰۱ از URLهای قدیمی به جدید.
- برداشتن محدودیت ایندکس و ارسال نقشه سایت در Google Search Console.
- تست دوباره فرمها، پرداخت و ایمیلها روی دامنه اصلی.
- تحویل دسترسیها، مستندات و جلسه آموزش پنل مدیریت.
گام ۱۰: بعد از تحویل سایت چه اتفاقی میافتد؟
بعد از تحویل سایت، فاز پشتیبانی و بهبود شروع میشود: بکاپ منظم، بهروزرسانی هسته و افزونهها، پایش امنیت و سرعت، و تغییرات بر اساس رفتار واقعی کاربران. سایت محصولی زنده است و بدون نگهداری بهتدریج کند و آسیبپذیر میشود.
هزینه این فاز را از همان ابتدا در بودجه ببینید؛ جزئیات اقلام سالانه را در مقاله هزینه طراحی سایت و نگهداری آوردهایم.
مراحل سفارش طراحی سایت برای کارفرما چیست؟
مراحل سفارش طراحی سایت از نگاه کارفرما شش قدم دارد: آمادهسازی نیازها، دریافت و مقایسه پیشنهادها، عقد قرارداد، مشارکت در تأیید مراحل، پذیرش نهایی و شروع پشتیبانی. دانستن این قدمها کمک میکند بدانید در هر لحظه چه چیزی از شما انتظار میرود.
| قدم کارفرما | کار شما | نکته کلیدی |
|---|---|---|
| آمادهسازی | هدف، مخاطب، امکانات و سایتهای مرجع را بنویسید | امکانات ضروری را از اختیاری جدا کنید |
| مقایسه پیشنهادها | شرح خدمات، زمانبندی و پشتیبانی را مقایسه کنید | فقط عدد نهایی را ملاک قرار ندهید |
| قرارداد | مراحل، پرداخت مرحلهای، مالکیت و دفعات اصلاح را ثبت کنید | دامنه به نام خودتان باشد |
| مشارکت | بازخورد سریع و متمرکز در هر مرحله بدهید | یک نفر تصمیمگیرنده نهایی باشد |
| پذیرش نهایی | سناریوهای واقعی را روی محیط تست امتحان کنید | دسترسیها و مستندات را تحویل بگیرید |
| پشتیبانی | برنامه بکاپ، بهروزرسانی و تغییرات را مشخص کنید | زمان پاسخگویی در قرارداد بیاید |
زمانبندی فرایند طراحی وب سایت برای انواع سایت چقدر است؟
زمانبندی فرایند طراحی وب سایت بیش از هر چیز به نوع سایت، اختصاصی بودن طراحی و آمادگی محتوا بستگی دارد. سایت معرفی ساده کوتاهترین و وباپلیکیشن اختصاصی طولانیترین زمان را دارد.
- لندینگ پیج یا سایت معرفی کوچک: کوتاه؛ معمولاً در حد چند هفته اگر محتوا آماده باشد.
- سایت شرکتی کامل با قالب اختصاصی: متوسط؛ بخش بزرگ زمان صرف طراحی UI و محتوا میشود.
- فروشگاه اینترنتی: متوسط تا طولانی؛ ورود محصولات، درگاه پرداخت و روشهای ارسال زمانبرند.
- وباپلیکیشن اختصاصی: طولانی؛ معمولاً در چند فاز و با نسخه اولیه (MVP) جلو میرود.

محدودیتها: چه زمانی میتوان مراحل را کوتاهتر کرد؟
مراحل طراحی سایت را میتوان برای پروژههای کوچک فشرده کرد، اما نمیتوان حذفشان کرد. در یک لندینگ پیج ساده، نیازسنجی و وایرفریم ممکن است در یک جلسه انجام شوند و طراحی مستقیماً روی یک قالب سبک آماده پیاده شود. اما حذف کامل تست یا سئو پایه، حتی در کوچکترین پروژه، معمولاً به خطاهایی منجر میشود که مشتری زودتر از شما میبیند.
از طرف دیگر، برای وباپلیکیشنهای بزرگ، این ده گام معمولاً یکبار و خطی اجرا نمیشوند؛ تیمها از روشهای چابک استفاده میکنند و چرخه طراحی، توسعه و تست را برای هر بخش تکرار میکنند. پس جدول بالا را نقشه مفهومی بدانید، نه قالب ثابت برای همه پروژهها.
از تجربه تیم siloow: کجای فرایند بیشترین ارزش را دارد؟
از تجربه تیم siloow در پروژههایی مثل سامانه سفارش آنلاین چندشعبهای برای کافه و شیرینیفروشی و قالب کلینیک با نوبتدهی آنلاین، بیشترین صرفهجویی همیشه از گامهای اول آمده است. در یک پروژه سفارش آنلاین، نوشتن سناریوی کامل «مشتری از شعبهای سفارش میدهد که آن محصول را ندارد» در مرحله وایرفریم، باعث شد منطق موجودی هر شعبه از ابتدا درست طراحی شود؛ اگر این سناریو در مرحله تست کشف میشد، بخش بزرگی از توسعه باید دوباره نوشته میشد. درس ما این است: هر سناریوی استثنایی که کارفرما در جلسه نیازسنجی میگوید، ارزش یک خط در بریف را دارد.
جمعبندی
- مراحل طراحی سایت ده گام در سه فاز برنامهریزی، ساخت و تحویل است.
- هر گام خروجی مشخص و تأییدشده دارد؛ رفتن به گام بعد بدون تأیید، دوبارهکاری میآورد.
- نیازسنجی و وایرفریم ارزانترین جای تغییر تصمیماند.
- محتوا را همزمان با توسعه آماده کنید؛ کمبود محتوا رایجترین دلیل تأخیر است.
- تست، سئو پایه و ریدایرکتها را پیش از راهاندازی انجام دهید.
- پشتیبانی بعد از تحویل بخشی از فرایند است، نه کار اضافه.
اگر میخواهید پروژه شما با همین فرایند شفاف و مرحلهبهمرحله اجرا شود، از صفحه خدمات طراحی سایت siloow درخواست جلسه نیازسنجی ثبت کنید.
ابزارهای رایج در هر مرحله طراحی سایت کداماند؟
ابزارهای مراحل طراحی سایت برای هر گام متفاوتاند، اما همه یک هدف دارند: کم کردن سوءتفاهم بین کارفرما و تیم و ثبت تصمیمها. انتخاب ابزار کماهمیتتر از این است که خروجی هر گام در یک جای مشترک و قابلدسترس برای همه ذخیره شود.
- نیازسنجی و بریف: یک سند مشترک (مثل Google Docs یا Notion) با بخشهای هدف، مخاطب، امکانات، محتوا و تصمیمگیرنده.
- نقشه سایت و وایرفریم: ابزارهای طراحی مثل Figma یا FigJam که کارفرما بتواند مستقیماً روی آنها نظر بگذارد.
- طراحی UI: Figma بههمراه کتابخانه کامپوننتها و دیزاین سیستم برای یکدستی رنگ، فونت و دکمهها.
- توسعه: سیستم کنترل نسخه Git، محیط تست جدا از سایت اصلی و ابزار مدیریت وظایف برای پیگیری کارها.
- تست: ابزار توسعهدهنده مرورگر، PageSpeed Insights، Lighthouse و یک فهرست مشترک برای ثبت خطاها با اسکرینشات.
- راهاندازی و پشتیبانی: Google Search Console، ابزار تحلیل بازدید، سیستم بکاپ خودکار و پایش در دسترس بودن سایت.
در تیم siloow برای پروژههای وباپلیکیشن از یک ابزار مدیریت پروژه داخلی استفاده میکنیم که هر وظیفه را به مرحله، مسئول و موعد مشخص وصل میکند. تجربه ما این است که شفافیت وضعیت هر مرحله برای کارفرما، تعداد پیامهای «کار به کجا رسید؟» را بهشدت کم میکند و جلسات را به تصمیمگیری اختصاص میدهد.
رایجترین دلایل تأخیر در فرایند طراحی وب سایت چیست؟
رایجترین دلایل تأخیر در فرایند طراحی وب سایت کمبود محتوا، بازخوردهای دیرهنگام یا متناقض، تغییر دامنه کار در میانه پروژه و وابستگی به سرویسهای بیرونی مثل درگاه پرداخت یا پنل پیامک است. تقریباً هیچکدام مشکل فنی نیستند و بیشترشان با برنامهریزی قابلپیشگیریاند.
- محتوای آمادهنشده: سایت تمام میشود اما متن و عکس ندارد؛ راهحل، فهرست محتوا با مسئول و موعد از هفته اول است.
- بازخورد چندنفره: هر مدیر نظر جدیدی میدهد؛ راهحل، یک تصمیمگیرنده نهایی و جمعبندی نظرات در یک پیام است.
- افزودن امکانات وسط کار: درخواستهای جدید را در فهرست فاز دوم ثبت کنید تا راهاندازی عقب نیفتد.
- درگاه و سرویسهای بیرونی: مدارک درگاه پرداخت، نماد اعتماد و پنل پیامک را از ابتدای پروژه پیگیری کنید، چون تأییدشان زمان میبرد.
- دسترسیهای گمشده: اطلاعات ورود دامنه و هاست قبلی را پیش از روز راهاندازی پیدا کنید.
منابع
- Google Search Central — بهترین روشهای ساختار URL
- web.dev — آستانههای Core Web Vitals
- W3C WAI — معیار کنتراست حداقل در WCAG
- Google Search Central — راهنمای شروع سئو
سوالات متداول درباره مراحل طراحی سایت
مراحل طراحی سایت به ترتیب کداماند؟
نیازسنجی و بریف، نقشه سایت، وایرفریم، طراحی رابط کاربری، توسعه، محتوا، سئو پایه، تست، راهاندازی و پشتیبانی. هر مرحله خروجی مشخصی دارد که پیش از رفتن به مرحله بعد تأیید میشود.
طراحی سایت چقدر زمان میبرد؟
سایت معرفی کوچک معمولاً چند هفته، سایت شرکتی کامل با طراحی اختصاصی بیشتر، و فروشگاه یا وباپلیکیشن چند ماه زمان میبرد. آماده بودن محتوا و سرعت بازخورد کارفرما بیشترین اثر را دارد.
وایرفریم چیست و آیا لازم است؟
وایرفریم اسکلت ساده صفحه بدون رنگ و جزئیات است که چیدمان و اولویت محتوا را نشان میدهد. وایرفریم ارزانترین مرحله برای تغییر تصمیم است و حذف آن معمولاً به اصلاحات گران در مرحله توسعه منجر میشود.
قبل از سفارش طراحی سایت چه چیزهایی را آماده کنیم؟
هدف سایت، مخاطب، فهرست امکانات ضروری، چند سایت مرجع، لوگو و هویت بصری و محتوای خام مثل معرفی خدمات و تصاویر واقعی. هرچه این موارد کاملتر باشند، برآورد دقیقتر و پروژه سریعتر است.
تست سایت قبل از تحویل شامل چه مواردی است؟
تست نمایش در موبایل و مرورگرهای مختلف، فرمها و ایمیلها، مسیر کامل خرید یا نوبتدهی، سرعت و Core Web Vitals، دسترسپذیری، سئو فنی و تنظیمات امنیتی.
بعد از تحویل سایت چه کارهایی لازم است؟
ثبت سایت در سرچ کنسول، بکاپ منظم، بهروزرسانی هسته و افزونهها، پایش امنیت و سرعت و بهبود صفحات بر اساس رفتار کاربران. این کارها معمولاً در قالب قرارداد پشتیبانی انجام میشوند.