طراحی سایت اختصاصی
طراحی سایت، برای همین کسبوکار؛ نه از روی قالب.
مسیر بازدیدکننده را از روی سوالهای مشتریهای خودتان میکشیم، طرح هر صفحه را پیش از کد میبینید و سایت را با همان قانونهایی میسازیم که سفید را با آن ساختیم: سریع، فارسی از پایه، امن و کمهزینه.
قیمت ثابت و زمان مکتوب، بعد از یک گفتگو.
قالب یا طراحی اختصاصی؟ خط وسط را بکشید.
طراحی اختصاصی
- جواب سوال اول مشتری، همان بالا
- یک کار اصلی: «وقت بگیرید»
- قیمت و زمان، روشن
- اعتماد: نشانی، نماد، نمونهی واقعی
قالب
- اسلایدر بزرگ با سه عکس
- سه جعبهی هماندازه
- نظر مشتری، چرخان
- دکمهای که پیدا نمیشود
قالب بد نیست؛ برای کسبوکاری که هنوز نمیداند مشتریاش چه میپرسد، شروع ارزان و خوبی است. طراحی اختصاصی وقتی میارزد که سایت باید یک کار را خیلی خوب انجام دهد.
اول سوال، بعد طرح. اینها را در گفتگوی اول میپرسیم.
- مشتریتان کیست و از کجا به سایت میرسد؟جستجو، اینستاگرام، معرفی
- یک کاری که باید در سایت انجام دهد چیست؟خرید، رزرو، تماس، ثبتنام
- پشت تلفن بیشتر چه میپرسند؟همینها بالای صفحه جواب میگیرند
- چرا بعضیها از شما نمیخرند؟قیمت، اعتماد، یا پیدا نکردن
- چه چیزی امروز کار میکند و نباید عوض شود؟نشانیها، رنگ برند، یک فرم خوب
- سایت باید به چه سیستمی وصل شود؟درگاه، پیامک، حسابداری، انبار
تجربهی کاربر یعنی مسیر. از جستجو تا خرید، و جاهایی که آدمها برمیگردند.
- ۱جستجوبرمیگردد وقتی: عنوان و توضیح صفحه چیزی نمیگوید.در طرح: عنوانی که جواب همان جستجوست.
- ۲صفحهی اولبرمیگردد وقتی: سه ثانیه صفحهی سفید.در طرح: سقف حجم برای هر صفحه، از روز اول.
- ۳سوالبرمیگردد وقتی: جواب سوالش پیدا نمیشود.در طرح: سوالهای پشت تلفن، همان بالا.
- ۴اعتمادبرمیگردد وقتی: معلوم نیست پشت سایت کیست.در طرح: نشانی، نماد، قیمت و زمان روشن.
- ۵اقدامبرمیگردد وقتی: فرم دهخانهای.در طرح: کوتاهترین راه: یک دکمه، یک فرم کوتاه.
چه سایتی؟ فروشگاهی، شرکتی، رزرو، وباپ یا یک صفحه؛ یکی را انتخاب کنید تا نقشهاش کشیده شود.
کار اصلی: خرید
- خانه
- دستهها
- محصول
- سبد
- پرداخت
- محصول
- جستجو
- حساب و پیگیری سفارش
- دستهها
معمولا وصل میشود به: درگاه پرداخت، پیامک سفارش، انبار، حسابداری، پست و پیک
طرح، پیش از کد. شکل نهایی را پیش از ساختن میبینید.
هر صفحه اول طراحی میشود، در اندازهی گوشی و دسکتاپ. روی همان طرح نظر میدهید، سنجاق به سنجاق، و کد از روی طرح تأییدشده نوشته میشود. بعد، هر بخش که ساخته شد، روی نسخهی آزمایشی میبینید.
- این تیتر کوتاهتر باشد.
- قیمت را بالاتر بیاوریم.
- به جای عکس آماده، عکس واقعی فروشگاه.
اول برای گوشی. بعد برای دسکتاپ.
طراحی سایت برای موبایل یعنی صفحه اول برای صفحهی کوچک کشیده شود: دکمهی اصلی جایی که شست میرسد، متنی که بیزوم خوانده شود، و هیچ چیزی که فقط با نشانگر موس پیدا شود. گوگل هم نسخهی موبایل سایت را برای ایندکس و رتبه به کار میبرد (راهنمای گوگل).
سرعت از روز اول. برای هر صفحه سقف حجم میگذاریم.
طراحی سایت سریع با یک افزونه در آخر کار به دست نمیآید. سقف وزن هر صفحه پیش از طرح گذاشته میشود و با همان ابزاری اندازه گرفته میشود که به شما هم میدهیم. رسید کنار، وزن صفحهی اصلی همین سایت است.
صفحهی اصلی team.sefid.dev
هنوز اسکن کالیبرهشدهای از همین سایت نداریم؛ عددی که اندازه نگرفتهایم را نمینویسیم.
سایت خودتان را با همین ابزار بسنجیدسئو، در طرح جا دارد. نه وصلهای بعد از ساخت.
- عنوان و توضیح هر صفحه
- یک تیتر اصلی در هر صفحه
- نشانی اصلی (canonical)
- اجازهی ایندکس
- زبان صفحه
- دادهی ساختاریافته
- robots.txt و نقشهی سایت
- متن جایگزین عکسها
طراحی سایت و سئو دو کار جدا نیستند: همان بررسیهایی که تست رایگان ما روی هر سایتی انجام میدهد، در سایتی که از صفر میسازیم از روز اول جا دارند. برای سایتی که امروز دارید، سئو تکنیکال همینها را درست میکند.
فارسی از پایه. نه ترجمهی یک قالب خارجی.
سفارشتان در ۹ مهر ۱۴۰۵ ثبت شد؛ کد پیگیری ۴۸۲۱۷ برای Run 42 است.
- نیمفاصله «سفارشتان» و «میشود»، نه «سفارش تان».
- تاریخ شمسی ۹ مهر ۱۴۰۵، نه 2026-10-01.
- رقم فارسی هر عددی که آدم میخواند.
- راستبهچپ ترتیب درست کنار کلمههای لاتین و عدد.
- فونت فارسی فقط وزنهایی که به کار میروند.
ابزار کار. تا هر تیمی بتواند ادامه بدهد.
فناوری هر پروژه را از اول میگوییم و در مستندات مینویسیم. ابزارهای جاافتاده انتخاب میکنیم تا اگر روزی تیم دیگری کار را ادامه داد، ناآشنا نباشد.
- Next.js
- React
- TypeScript
- Node.js
- Python
- PostgreSQL
- Docker
- Nginx
- WordPress
- WooCommerce
کار ما را ببینید. دو چیز واقعی که خودتان میتوانید بسنجید.
سفید، محصول خود ما
- ویجت ۳۴ کیلوبایتی (gzip)
- نسخهی ایران و نسخهی اروپا
- افزونهی ووکامرس
همین سایت
- طراحی همین دفترچه، با قلم ۱٫۴ پیکسلی
قیمت طراحی سایت از کجا میآید؟ علامت بزنید؛ برگهی برآورد نوشته میشود.
برگهی برآورد
از ستون کنار علامت بزنید؛ سطرها اینجا نوشته میشوند.
هیچ سطری عدد ندارد. قیمت دقیق، ثابت و مکتوب، بعد از گفتگو میآید؛ هر چیز بیرون از نقشه فقط با توافق شما.
یک پروژه چطور پیش میرود؟ پنج ایستگاه، بدون غافلگیری.
- گفتگواز کسبوکار و هدف شما میپرسیم، نه فقط از صفحهها؛ سایت فعلی را هم با ابزار خودمان تست میکنیم.
- نقشه و قیمتدامنهی کار، قیمت ثابت و زمان تحویل مکتوب میشود. هر چیز بیرون از نقشه، فقط با توافق شما.
- طرحاول روی کاغذ و طرح؛ پیش از ساختن، شکل نهایی را میبینید.
- ساختهر بخش که آماده شد، روی نسخهی آزمایشی میبینید و نظر میدهید.
- تحویلکد، سرور، دامنه و مستندات به نام شما.
سند به نام شما. از روز تحویل.
۱۴ روز پشتیبانی رایگان؛ بعد از آن، کار موردی با قیمت روشن. قرارداد ماهانهی اجباری نداریم (قوانین).
سند تحویل
- کد، با تاریخچهی کامل
- سرور و دامنه، به نام شما
- همهی رمزها و دسترسیها
- مستند هر تنظیم و هر تصمیم
برای چه کسی نیستیم. صادقانه، پیش از گفتگو.
با ما
- کسبوکاری که میداند مشتریاش چه میپرسد، یا میخواهد بفهمد
- کسی که سایت را ابزار فروش میبیند، نه کارت ویزیت
- کسی که میخواهد سایت و کدش مال خودش باشد
- کسی که قیمت مکتوب را به ارزانترین ترجیح میدهد
بهتر است جای دیگر
سایت تا آخر همین هفتهارزانترین قیمت؛ سایتسازها ارزانترندفقط نصب یک قالب آمادهی وردپرسبدون یک ساعت وقت برای گفتگو
سوالهایی که میپرسند.
- قیمت طراحی سایت چقدر است؟
- بعد از یک گفتگوی کوتاه، دامنهی کار را مکتوب میکنیم و یک قیمت ثابت میدهیم. قیمت از نوع سایت، تعداد قالب صفحهها، امکانات و اتصالها ساخته میشود؛ برگهی برآورد نشان میدهد کدامها. هر چیز بیرون از نقشه فقط با توافق شما اضافه میشود.
- چقدر طول میکشد؟
- به اندازهی کار بستگی دارد. زمان تحویل هم در همان نقشه، کنار قیمت، مکتوب میشود؛ پیش از گفتگو هر عددی حدس است.
- وردپرس بهتر است یا سایت اختصاصی؟
- برای خیلی از سایتها وردپرس کافی و ارزانتر است. اختصاصی وقتی میارزد که کار اصلی کسبوکار در افزونهها جا نمیشود. مقایسهی کامل را در وردپرس یا سایت اختصاصی نوشتهایم.
- محتوا را خودمان میتوانیم عوض کنیم؟
- بله، اگر در نقشه بیاید: هر بخشی که باید خودتان عوض کنید، مثل محصول، قیمت یا نوشته، فرم ویرایش خودش را در پنل میگیرد.
- سئو هم انجام میدهید؟
- سایتی که از صفر میسازیم، پایههای سئو تکنیکال را از روز اول دارد. برای سایتی که امروز دارید، سئو تکنیکال همانها را پیدا و درست میکند و تست رایگان نشان میدهد کدام نیست.
- سرور و میزبانی با کیست؟
- سرور و دامنه به نام خودتان است و با کد و مستندات تحویل میشود. سایت طوری ساخته میشود که روی یک سرور کوچک هم روان بماند.
- اگر بعدا تیم دیگری کار را ادامه بدهد؟
- به هیچ پنل یا سرویسی وابستهتان نمیکنیم؛ کد، مستندات و دسترسیها دست شماست و تیم دیگری از همان روز اول میتواند ادامه دهد.
- بعد از تحویل چه؟
- ۱۴ روز پشتیبانی رایگان؛ بعد از آن، هر کاری لازم شد به شکل یک تسک موردی با قیمت روشن. قرارداد ماهانهی اجباری نداریم (قوانین).
- طراحی سایت با هوش مصنوعی چه؟
- ابزارهای هوش مصنوعی برای کشیدن سریع یک صفحه خوباند؛ چیزی که نمیسازند، شناخت مشتریهای شماست. ما هوش مصنوعی را جایی به کار میبریم که کار کسبوکار را جلو ببرد، و سایت را برای ایجنتهای هوش مصنوعی هم خوانا میکنیم.
از کسبوکارتان بنویسید؛ سایتش را با هم میکشیم.
هنوز آماده نیستید؟ اول سایت فعلیتان را رایگان تست کنید.
بیشتر
طراحی سایت اختصاصی؛ از سوال اول تا روز تحویل، و اینکه قیمت طراحی سایت از کجا میآید
طراحی سایت برای یک کسبوکار یعنی تصمیم گرفتن دربارهی اینکه یک غریبه از لحظهی رسیدن به صفحه تا خرید یا تماس، چه میبیند، چه میپرسد و کجا جواب میگیرد؛ و طراحی سایت اختصاصی یعنی همین تصمیمها برای همان کسبوکار گرفته شود، نه از روی یک قالب آماده. در این راهنما میخوانید طراحی سایت اختصاصی از چه بخشهایی ساخته میشود، گفتگوی اول چه میپرسد، UX و UI به زبان ساده چیست، هر نوع سایت چه لازم دارد، چرا طرح پیش از کد و موبایل پیش از دسکتاپ میآید، سرعت و سئو را چطور از روز اول در طرح میگذارند، قیمت طراحی سایت از چه ساخته میشود و چرا برآوردها اینقدر فرق دارند، و یک شرکت طراحی سایت را با چه چیزهای قابل سنجشی انتخاب کنید.
طراحی سایت اختصاصی یعنی چه، و چه فرقی با قالب دارد
وقتی کسی میگوید «طراحی سایت»، معمولا سه کار جدا را با هم در نظر دارد که بهتر است از هم جدایشان کنیم، چون هر کدام سوال خودش را دارد:
- تجربهی کاربر (UX): مسیری که بازدیدکننده طی میکند. از کجا میآید، اول چه میخواهد بداند، به چه چیزی شک دارد و قدم بعدیاش چیست. این بخش بیشتر فکر است تا رنگ و شکل.
- رابط کاربری (UI): شکل همان مسیر روی صفحه. چیدمان، فونت، رنگ، دکمهها، فاصلهها و اینکه چشم اول کجا مینشیند.
- ساخت: کدی که طرح را به سایت زنده تبدیل میکند، بهاضافهی پنل، سرور، اتصالها و همهی چیزهایی که دیده نمیشوند ولی سرعت و امنیت از آنها میآید.
قالب آماده این سه را از قبل برای یک کسبوکار فرضی حل کرده است: یک اسلایدر بالای صفحه، سه جعبهی هماندازه برای «خدمات ما»، نظر مشتریها که میچرخد، و فرم تماس پایین صفحه. این چیدمان برای هیچکس غلط نیست و برای هیچکس هم دقیق نیست. طراحی سایت اختصاصی از سوال شروع میکند، نه از چیدمان: مشتریهای این کسبوکار پشت تلفن چه میپرسند، چرا بعضیشان از رقیب خریدهاند، و یک کاری که سایت باید بهتر از هر چیز دیگری انجام بدهد چیست. بعد صفحه دور همان یک کار چیده میشود.
قالب بد نیست. برای کسبوکاری که هنوز نمیداند مشتریاش چه میپرسد، یک قالب تمیز و سبک شروع خوب و ارزانی است و کمک میکند اول بازار را بشناسید. سایت اختصاصی وقتی ارزشش را دارد که این سوالها جواب روشن دارند و قالب جلوی جواب دادن به آنها را گرفته است. در ادامهی همین راهنما بخشی جدا دربارهی اینکه کی قالب یا وردپرس کافی است نوشتهایم.
گفتگوی اول در طراحی سایت: پیش از هر طرحی چه میپرسیم
بیشتر پروژههایی که خراب میشوند، در جلسهی اول خراب شدهاند: جلسهای که در آن فقط فهرست صفحهها نوشته شد. «صفحهی اصلی، دربارهی ما، خدمات، وبلاگ، تماس» چیزی دربارهی کسبوکار شما نمیگوید. برای همین در روند کار ما ایستگاه اول گفتگو است و در آن از کسبوکار و هدف شما میپرسیم، نه فقط از صفحهها. اینها سوالهایی است که معمولا میپرسیم:
- مشتریتان کیست؟ نه «همه»؛ کسی که بیشترین سود را برای شما دارد و بیشتر از همه برمیگردد.
- یک کاری که باید در سایت انجام دهد چیست؟ خرید، رزرو، تماس، دانلود کاتالوگ، یا پر کردن فرم استعلام. اگر جواب بیشتر از یکی است، کدام مهمتر است؟
- پشت تلفن یا در دایرکت بیشتر چه میپرسند؟ همین سوالها بهترین متن سایتاند. سوالی که ده بار در روز پرسیده میشود، باید پیش از پرسیده شدن در صفحه جواب داده شود.
- چرا بعضیها از رقیب خریدهاند؟ قیمت، اعتماد، سرعت تحویل یا چیزی که شما نمیدانید. این جواب معمولا بخشهای سایت را عوض میکند.
- چه چیزی را نباید عوض کنیم؟ نام، رنگ برند، نشانیهایی که در گوگل رتبه دارند، یا روشی که مشتریهای قدیمی به آن عادت کردهاند.
اگر سایت فعلی دارید، در همین ایستگاه سایت را با ابزار خودمان هم تست میکنیم تا بدانیم از کجا شروع میکنیم. این کار را خودتان هم پیش از هر گفتگویی میتوانید انجام دهید: تست رایگان سرعت ثبتنام نمیخواهد و گزارش کامل فارسی میدهد.
ایستگاه دوم نقشه و قیمت است: از روی همین جوابها، دامنهی کار، قیمت ثابت و زمان تحویل مکتوب میشود و هر چیز بیرون از نقشه فقط با توافق شما اضافه میشود. اگر میخواهید پیش از گفتگو چیزی آماده کنید، در صفحهی تماس راهنمای نوشتن بریف پروژه را گذاشتهایم.
تجربهی کاربر (UX) به زبان ساده: یک مسیر، از جستجو تا سفارش
UX را بیشتر وقتها با «قشنگی» یکی میگیرند. ولی UX یعنی مسیر. برای دیدنش یک نمونه را دنبال کنیم: کسی که دنبال یک قطعهی یدکی است و نامش را در گوگل جستجو میکند.
- رسیدن. از نتیجهی گوگل روی صفحهی محصول میآید، نه صفحهی اصلی. پس صفحهی محصول باید بدون صفحهی اصلی هم معنا داشته باشد: این چیست، به کار من میآید یا نه، و موجود است یا نه.
- قضاوت در چند ثانیه. یاکوب نیلسن در مقالهای در Nielsen Norman Group نوشته است کاربرها اغلب در ۱۰ تا ۲۰ ثانیه صفحه را ترک میکنند، ولی صفحهای که ارزشش را روشن بگوید، توجه را خیلی بیشتر نگه میدارد. پس بالای صفحه جای جملهی اصلی است، نه اسلایدر.
- شک. آیا این فروشگاه واقعی است؟ هزینهی ارسال چقدر است؟ اگر قطعه نخورد، پس میگیرند؟ هر سوال بیجواب یک دلیل برای برگشتن به گوگل است.
- عمل. افزودن به سبد و پرداخت. اینجا هر فیلد اضافه، هر ثبتنام اجباری و هر غافلگیری در جمع نهایی، مسیر را میبُرد.
در هر کدام از این ایستگاهها آدمها معمولا در جاهای مشخصی برمیگردند: صفحهی کند، سوال بیجواب، فرم طولانی و اعتماد ناکافی. کار طراحی تجربهی کاربر پیدا کردن همین نقطهها پیش از ساختن است، و برای هر کدام یک تصمیم: صفحه سبکتر، جواب سوال در خود صفحه، فرم کوتاهتر، و نشانهی اعتمادی که خواننده خودش بتواند بسنجد.
برای فهمیدن اینکه مسیر کجا میشکند، لازم نیست پژوهش بزرگ و گران انجام داد. نیلسن در مقالهی مشهورش در سال ۲۰۰۰ نوشته است آزمودن طرح با پنج کاربر حدود ۸۵٪ مشکلهای کاربردپذیری را پیدا میکند، و پیشنهاد میکند بهجای یک آزمون بزرگ، چند آزمون کوچک پشت سر هم انجام شود: آزمون، اصلاح، آزمون دوباره. در عمل یعنی چند مشتری واقعی شما یک کار مشخص را با طرح انجام بدهند و ببینیم کجا مکث میکنند.
طراحی سایت حرفهای در جزئیات: چیزهایی که بیدانش فنی هم دیده میشوند
طراحی سایت حرفهای بیشتر از هر چیز در جزئیاتی دیده میشود که بازدیدکننده هیچوقت به آنها فکر نمیکند، چون درست کار میکنند:
- متن خوانا. استاندارد WCAG از W3C برای متن معمولی نسبت تضاد دستکم ۴٫۵ به ۱ با پسزمینه میخواهد و برای متن درشت ۳ به ۱. خاکستری کمرنگ روی سفید شاید شیک باشد، ولی زیر آفتاب روی گوشی خوانده نمیشود.
- دکمههایی که انگشت پیدایشان کند. همان استاندارد در معیار اندازهی هدف میگوید هر چیز لمسشدنی دستکم ۲۴ در ۲۴ پیکسل باشد، مگر استثناهایی مثل فاصلهی کافی از کناری. این کف است؛ دکمهی اصلی صفحه بزرگتر از این کشیده میشود.
- یک حرف در هر بخش. بخشی که همزمان میخواهد خدمت معرفی کند، تخفیف بدهد و خبرنامه بفروشد، هیچکدام را خوب انجام نمیدهد.
- یکدستی. وقتی همهی صفحهها از یک دیزاین سیستم ساخته شوند، یعنی از یک مجموعه قاعده و قطعهی مشترک برای رنگ، فونت، فاصله و دکمه، سایت یکدست میماند و صفحهی تازه سریعتر و ارزانتر ساخته میشود. همین سایتی که در آن هستید با دیزاین سیستم «یادداشت» ساخته شده است: کاغذ، جوهر، یک خاکستری ملایم و یک قلم یکاندازه برای همهی طرحها.
چه سایتی لازم دارید: پنج نوع، و آنچه هر کدام میخواهد
نوع سایت از روی «یک کار اصلی» آن معلوم میشود، و همین است که صفحهها، امکانات و اتصالها را تعیین میکند.
طراحی سایت فروشگاهی
کار اصلی: خرید بیگیر. امکانات سایت فروشگاهی معمولا اینهاست: صفحهی محصول با تصویر و مشخصات و موجودی، دستهبندی و جستجو و فیلتر، سبد خرید، پرداخت، پیامک وضعیت سفارش، پنل مدیریت سفارش و انبار، و اغلب اتصال به حسابداری. در فروشگاه بیشترین ضرر در صفحهی پرداخت است. طبق فهرست آماری مؤسسهی Baymard (بهروزشده در شهریور ۱۴۰۴)، میانگین رهاکردن سبد خرید در ۵۰ پژوهش ۷۰٫۲۲٪ است. در همان صفحه، از دلیلهایی که خریدارها برای رها کردن گفتهاند، ۱۸٪ ثبتنام اجباری بوده، ۱۷٪ طولانی یا پیچیده بودن مراحل پرداخت، ۱۹٪ اعتماد نکردن به سایت برای اطلاعات کارت، و ۱۲٪ ندیدن جمع نهایی پیش از پرداخت. همان صفحه میگوید پرداخت میانگین در آمریکا ۲۳٫۴۸ جزء فرم پیش چشم کاربر میگذارد و یک پرداخت خوب میتواند ۱۲ تا ۱۴ جزء داشته باشد. این عددها از بازار ایران نیستند، ولی جهتشان روشن است: خرید مهمان، فرم کوتاه و جمع نهایی پیش از پرداخت، در طرح جا دارند.
طراحی سایت شرکتی
کار اصلی: اعتماد و تماس. بازدیدکنندهی سایت شرکتی معمولا خریدار سازمانی یا شریک احتمالی است که میخواهد بداند این شرکت واقعی و جدی است. پس جای اصلی سایت شرکتی برای چیزهای قابل سنجش است: کار انجامشده با جزئیات، آدمها با نام، نشانی و راه تماس روشن، و جواب سوالهایی که خریدار سازمانی پیش از تماس میپرسد. فرم تماس کوتاه و مسیر روشن به آن، از ده صفحهی «دربارهی ما» مهمتر است.
سایت خدماتی و رزرو
کار اصلی: گرفتن وقت. سالن، کلاس، مشاوره یا هر خدمتی که زمان دارد. اینجا تقویم وقتهای خالی، تأیید با پیامک، یادآوری پیش از وقت، لغو و جابهجایی، و گاهی پیشپرداخت با درگاه لازم است. مهمترین تصمیم UX این است که آدم با چند لمس و بدون ثبتنام طولانی به یک وقت قطعی برسد.
طراحی وب اپلیکیشن و پنل
کار اصلی: انجام یک کار هر روزه. وباپ یا پنل اختصاصی ابزاری است که کارمندها یا مشتریها هر روز با آن کار میکنند: ثبت سفارش عمده، پیگیری درخواستها، گزارش فروش یا سامانهی داخلی. اینجا نقشها و دسترسیها، گردش کار، گزارشها و اتصال به سیستمهای دیگر از ظاهر مهمترند. کسی که دنبال طراحی سایت و اپلیکیشن با هم است، معمولا همین را لازم دارد: یک بکاند که هم سایت و هم اپ موبایل یا وباپ از آن میخوانند.
صفحهی کمپین
کار اصلی: یک پیشنهاد، یک دکمه. صفحهای برای یک تبلیغ، یک رویداد یا یک محصول تازه. سبکترین نوع است و همین سبکی کارش است: بدون منوی پرشاخه، بدون حواسپرتی، با یک فرم یا یک دکمه. چون پول تبلیغ پشت آن است، کند بودنش مستقیم پول هدر میدهد.
طرح پیش از کد: طراحی سایت با فیگما یعنی چه
ایستگاه سوم روند ما طرح است: اول روی کاغذ و طرح، و پیش از ساختن شکل نهایی را میبینید. دلیلش ساده است: جابهجا کردن یک بخش روی طرح چند دقیقه کار است و جابهجا کردنش در کد ساختهشده، چند روز.
ابزاری که این کار بیشتر با آن انجام میشود فیگماست، و طراحی سایت با فیگما یعنی همهی صفحهها پیش از کد، در اندازهی گوشی و دسکتاپ، کشیده شوند. دو امکان فیگما برای صاحب کار مهمتر از بقیه است. اول، نظر روی خود طرح: طبق راهنمای خود فیگما، نظرها درست همان جایی از صفحه نشان داده میشوند که گذاشته شدهاند و هر کسی که فقط اجازهی دیدن فایل را دارد هم میتواند نظر بگذارد. یعنی لازم نیست ایرادها را در پیام توضیح بدهید؛ سنجاق نظر را روی همان دکمه میگذارید. دوم، نمونهی کلیکخور: راهنمای نمونهسازی فیگما میگوید با آن مسیرهای تعاملی ساخته میشود تا ببینید کاربر چطور با طرح کار میکند، و نمونه را میشود با پیوند به اشتراک گذاشت و روی گوشی باز کرد. این همان جایی است که آزمون کوچک با چند کاربر، پیش از نوشتن یک خط کد، ممکن میشود.
بعد از تأیید طرح، کد از روی همان طرح نوشته میشود. ایستگاه چهارم، ساخت، هم بیخبر نمیگذرد: هر بخش که آماده شد، روی نسخهی آزمایشی میبینید و نظر میدهید.
طراحی سایت موبایل: اول برای گوشی، بعد برای دسکتاپ
بیشتر طرحها هنوز روی صفحهی بزرگ کشیده و بعد «برای موبایل جمع» میشوند. برای سایت ایرانی این ترتیب برعکس است. طبق StatCounter، در سپتامبر ۲۰۲۶ سهم موبایل از بازدیدهای وب در ایران ۷۶٫۴۴٪ و سهم دسکتاپ ۲۳٫۲۷٪ بوده است. یعنی از هر چهار بازدیدکننده، حدود سه نفر سایت شما را روی گوشی میبینند.
گوگل هم همینطور نگاه میکند. مستندات جستجوی گوگل میگوید گوگل نسخهی موبایل محتوای سایت را برای ایندکس و رتبهدهی به کار میبرد و فقط محتوایی که در نسخهی موبایل نشان داده میشود ایندکس میشود. پس متنی که «برای خلوت شدن» در موبایل پنهان شده، از نگاه گوگل وجود ندارد.
طراحی سایت موبایل در عمل یعنی چند تصمیم مشخص:
- ترتیب، پیش از چیدمان. روی صفحهای به عرض یک گوشی همهچیز زیر هم است؛ پس اول تصمیم میگیریم به ترتیب چه چیزی دیده شود. همین ترتیب، اسکلت نسخهی دسکتاپ هم میشود.
- دکمهی اصلی جایی که شست میرسد. دکمهی اصلی جایی کشیده میشود که بدون جابهجا کردن گوشی در دسترس باشد، نه گوشهی بالای صفحه.
- فرمهای کوتاه با صفحهکلید درست. فیلد شمارهی تلفن صفحهکلید عددی باز کند و هر فیلد غیرلازم حذف شود.
طراحی سایت سریع: سرعت از روز اول، نه وصلهی آخر کار
اولین قانون ساخت ما همین است: برای هر صفحه سقف حجم میگذاریم و با همان ابزاری که به شما میدهیم اندازه میگیریم؛ سرعت آخر کار وصله نمیشود. این کار نام دارد: بودجهی کارایی. مقالهی web.dev دربارهی بودجهی کارایی آن را مجموعهای از سقفها برای عددهایی تعریف میکند که روی سرعت اثر دارند، مثل وزن صفحه، تعداد درخواستها، اندازهی عکسها و تعداد فونتها، و میگوید گذاشتن آن در اول پروژه جلوی برگشتهای بعدی را میگیرد.
چرا سقف لازم است؟ چون صفحهها خودبهخود سنگین میشوند. طبق فصل وزن صفحهی Web Almanac ۲۰۲۵، صفحهی اصلی میانه در موبایل حدود ۲٫۶ مگابایت است که ۹۱۱ کیلوبایتش عکس و ۶۳۲ کیلوبایتش جاوااسکریپت است، و این وزن نسبت به سال قبل ۸٫۴٪ بیشتر شده است. هر اسلایدر، هر فونت اضافه و هر اسکریپت بیرونی چیزی به این عدد اضافه میکند، و روی اینترنت موبایل ایران هر کیلوبایت زمان است.
گوگل سرعت تجربهشده را با سه عدد میسنجد که به آنها Core Web Vitals میگویند. طبق web.dev، بزرگترین بخش صفحه (LCP) باید در ۲٫۵ ثانیه دیده شود، پاسخ صفحه به لمس (INP) باید ۲۰۰ میلیثانیه یا کمتر باشد و جابهجایی ناگهانی صفحه (CLS) ۰٫۱ یا کمتر، و اینها باید برای صدک ۷۵ بازدیدها، جدا در موبایل و دسکتاپ، برقرار باشند. این عددها از تصمیمهای طراحی میآیند: عکس بزرگ بالای صفحه اندازهی LCP را تعیین میکند، جای خالی نگهداشتهشده برای عکسها و بنرها CLS را، و مقدار جاوااسکریپت INP را.
نمونهای که خودتان میتوانید بسنجید: کل ویجت سفید، محصولی که همین تیم ساخته است، ۳۴ کیلوبایت فشرده است تا سایت فروشگاهی که آن را نصب میکند کند نشود. سرعت همین سایت را هم با تست رایگان سرعت میتوانید بسنجید؛ همان موتور Lighthouse گوگل را از سروری در ایران اجرا میکند. اگر سایت فعلیتان کند است ولی فعلا قصد طراحی تازه ندارید، بهینهسازی سرعت سایت کار جداگانهای است با قیمت ثابت ۱۰ میلیون تومان و زمان ۷ روز.
طراحی سایت و سئو: داربستی که از روز اول در طرح جا دارد
بخش بزرگی از سئوی فنی تصمیمهایی است که موقع طراحی و ساخت گرفته میشوند و بعدا عوض کردنشان گران است: ساختار نشانیها، عنوان و توضیح هر صفحه، اینکه هر صفحه یک تیتر اصلی روشن دارد، canonical برای نسخههای تکراری، نقشهی سایت، robots.txt، دادهی ساختاریافته برای محصول و پرسشها، و متن جایگزین عکسها. تست رایگان ما همینها را روی صفحهی اصلی هر سایت بررسی میکند: عنوان، توضیح، تیتر H1، canonical، دستور robots، زبان صفحه، viewport، دادهی ساختاریافته، متن جایگزین عکسها، robots.txt و نقشهی سایت. در طراحی سایت و سئو با هم، این فهرست پیش از ساخت نوشته میشود و هر صفحهی طرح جای هر کدام را دارد.
یک نکتهی صادقانه هم لازم است: هیچکس نمیتواند رتبهی گوگل را قول بدهد. خود گوگل در راهنمای انتخاب متخصص سئو صریح نوشته است هیچکس نمیتواند رتبهی یک را در گوگل تضمین کند و از کسانی که چنین ادعایی دارند پرهیز کنید. کاری که طراحی درست میکند این است که سایت جلوی دیده شدن خودش را نگیرد؛ رتبه از محتوا، رقابت و زمان هم میآید.
اگر سایت فعلیتان ایرادهای فنی دارد و فعلا بازطراحی در کار نیست، سئو تکنیکال خدمت جداست با قیمت ۱۵ میلیون تومان. و چون بخشی از جستجو کمکم به دستیارهای هوش مصنوعی رسیده، میشود سایت را برای خوانده شدن توسط آنها هم آماده کرد؛ دربارهاش در آمادهسازی سایت برای ایجنتهای هوش مصنوعی نوشتهایم.
فارسی از پایه: نه ترجمهی یک قالب خارجی
سایت فارسی خوب با راستچین کردن یک قالب انگلیسی ساخته نمیشود. قانون دوم ساخت ما همین است: راستبهچپ، فونت، رقم و تاریخ درست. چند جزئیاتی که فرق را نشان میدهند:
- نیمفاصله. «میشود» و «خانهها» با نیمفاصله نوشته میشوند، نه با فاصلهی کامل یا چسبیده. سند «نیازمندیهای چیدمان عربی و فارسی» از W3C توضیح میدهد در فارسی واژههایی هست، بیشتر واژههای مرکب، که باید پیوند حروفشان شکسته شود و برای این کار نویسهی ZWNJ به کار میرود. فونتی که این را درست نشان ندهد، و فرمی که آن را پاک کند، متن را خراب میکنند.
- رقم فارسی و تاریخ شمسی هر جا آدم عدد را میخواند: قیمت، تاریخ سفارش، شمارهی پیگیری.
- زبان و جهت صفحه. WCAG میگوید وقتی زبان صفحه مشخص باشد، صفحهخوانها قاعدهی تلفظ درست را بار میکنند و مرورگرها حروف را درست نشان میدهند. گوگل اما در راهنمای سایتهای چندزبانه میگوید زبان صفحه را از متن دیدنی آن تشخیص میدهد، نه از ویژگی lang؛ پس متن فارسی واقعی و کامل، نه ترجمهی ماشینی نیمهکاره، برای گوگل هم مهم است.
قیمت طراحی سایت از چه ساخته میشود
این پرجستجوترین سوال دربارهی طراحی سایت است و جواب کوتاهش این است: قیمت طراحی سایت از کار ساخته میشود، نه از نام «سایت». دو سایت که هر دو «فروشگاهی» نام دارند، ممکن است ده برابر با هم فرق کار داشته باشند. اینها بخشهایی است که هزینه طراحی سایت را میسازند:
- تعداد صفحههای متفاوت. نه تعداد کل صفحهها؛ صد صفحهی محصول که از یک الگو ساخته میشوند یک کار طراحیاند، ولی صفحهی اصلی، صفحهی دسته، صفحهی محصول، سبد و پنل هر کدام طرح خودشان را میخواهند.
- امکانات. جستجو و فیلتر، حساب کاربری، رزرو، کد تخفیف، چند زبان، پنل با نقشهای مختلف، گزارشها. هر امکان طرح، کد، آزمون و نگهداری دارد.
- اتصالها. درگاه پرداخت، پنل پیامک، نرمافزار حسابداری، انبار، سامانهی ارسال یا اپ موبایل. هر اتصال یک سیستم دیگر با قاعدههای خودش است.
- محتوا. متنها، عکسها و دادهها آمادهاند یا باید نوشته، گرفته و وارد شوند؟ انتقال هزار محصول از سایت قدیم، کار کمی نیست.
- عمق طراحی. چیدمان از روی یک دیزاین سیستم موجود، یا هویت بصری و دیزاین سیستم تازه برای برند؟ چند آزمون کاربر؟
- انتقال از سایت قدیم. اگر سایت فعلی در گوگل رتبه دارد، نقشهی ریدایرکت نشانیها و تماشای بعد از جابهجایی هم بخشی از کار است.
چرا تعرفه طراحی سایت اینقدر فرق میکند
وقتی برای یک سایت سه برآورد هزینه طراحی سایت میگیرید که چند برابر با هم فرق دارند، معمولا سه کار متفاوت برآورد شده است: یکی قالب آماده با چند تغییر رنگ را در نظر داشته، یکی قالب با چند افزونهی اضافه، و یکی ساخت سایت اختصاصی با طرح و اتصالها. تعرفهای که بدون پرسیدن از کسبوکار شما داده شود، ناچار برای یک سایت فرضی است. برای مقایسهی درست، از هر کدام بخواهید فهرست مکتوب کار را بدهند: چه صفحههایی، چه امکاناتی، چه اتصالهایی، چه کسی محتوا را وارد میکند و بعد از تحویل چه میشود.
قیمت در تیم سفید
برای طراحی سایت عدد شروع منتشر نمیکنیم، چون عددی که پیش از دیدن کار داده شود حدس است. قیمت بعد از یک گفتگو، در ایستگاه «نقشه و قیمت»، ثابت و مکتوب میشود، همراه با زمان تحویل و فهرست دقیق کار. هر چیز بیرون از آن فهرست فقط با توافق شما اضافه میشود؛ پس عددی که امروز مکتوب شد، آخر کار هم همان است.
یک شرکت طراحی سایت یا طراح سایت را چطور بسنجیم
دربارهی انتخاب تیم طراحی سایت در صفحهی دربارهی ما راهنمای مفصلتری نوشتهایم. اینجا فقط چیزهایی را میآوریم که بیدانش فنی، در یک عصر، خودتان میتوانید بسنجید، چه با یک شرکت طراحی سایت کار کنید و چه با یک طراح سایت مستقل:
- سایت خودشان را بسنجید. سایت خود تیم را روی گوشی باز کنید و سرعتش را با یک ابزار عمومی، مثل PageSpeed Insights گوگل یا تست رایگان ما، اندازه بگیرید. تیمی که سایت خودش کند است، بعید است سایت شما را سریع بسازد.
- کار زنده ببینید، نه عکس. نمونهای را که میگویند ساختهاند، باز کنید و یک کار واقعی با آن انجام دهید: محصولی را پیدا کنید، تا صفحهی پرداخت بروید، فرم را پر کنید.
- بپرسید کد مال کیست. کد با تاریخچه، سرور و دامنه به نام چه کسی است؟ رمزها و دسترسیها را چه کسی دارد؟ جواب درست «همهاش مال شما» است.
- دامنهی کار مکتوب بخواهید. فهرست صفحهها، امکانات و اتصالها، با قیمت ثابت. «حدودا» و «بستگی دارد» تا آخر کار، یعنی بودجهی بیانتها.
- شرط پشتیبانی را بپرسید. چند روز بعد از تحویل رایگان است و بعد از آن قرارداد ماهانه اجباری است یا نه.
- به قول بزرگ شک کنید. رتبهی تضمینی، «امنیت صددرصد» یا «سریعترین» بدون عدد قابل سنجش.
پاسخ ما به همین فهرست: کد با تاریخچهی کامل، سرور و دامنه به نام شما، همهی رمزها و دسترسیها و مستند هر تنظیم و هر تصمیم تحویل میشود؛ به هیچ پنل یا سرویسی وابستهتان نمیکنیم. هر کار ۱۴ روز پشتیبانی رایگان دارد و قرارداد ماهانهی اجباری در کار نیست. فناوریهایمان را هم پنهان نمیکنیم: برای پروژههای اختصاصی Next.js و React، TypeScript، Node.js و Python، PostgreSQL، Docker و Nginx؛ و برای سایتهایی که وردپرس و ووکامرساند، روی همان وردپرس کار میکنیم. نمونهکار مشتری منتشر نمیکنیم؛ کاری که نشان میدهیم چیزی است که خودتان باز میکنید: سفید، با نسخهی ایران و نسخهی اروپا، و افزونهی ووکامرس عمومیاش، و همین سایت.
مراحل ساخت سایت فروشگاهی، قدم به قدم
مراحل ساخت سایت فروشگاهی همان پنج ایستگاه روند ماست، ولی هر ایستگاه در فروشگاه کارهای مشخص خودش را دارد:
- گفتگو. چه میفروشید، به چه کسی، از کجا ارسال میکنید، چند محصول و چند متغیر (رنگ، اندازه) دارید، و مشتریها بیشتر چه میپرسند. اگر فروشگاه فعلی دارید، تست میشود و صفحههایی که بیشترین فروش را میآورند پیدا میشوند.
- نقشه و قیمت. فهرست صفحهها (اصلی، دسته، محصول، سبد، پرداخت، حساب کاربری، پیگیری سفارش)، امکانات (جستجو، فیلتر، کد تخفیف، خرید مهمان)، اتصالها (درگاه، پیامک، حسابداری، انبار، ارسال) و انتقال دادهها مکتوب میشود، با قیمت ثابت و زمان تحویل.
- طرح. اول صفحهی محصول و پرداخت، چون پول آنجاست؛ بعد بقیه. همه برای گوشی و بعد دسکتاپ، و پیش از ساخت با چند کاربر واقعی آزموده میشود.
- ساخت. روی نسخهی آزمایشی، جدا از هر سایت زنده. پرداخت آزمایشی روی محیط آزمایشی درگاه، پیامکها با شمارهی خود شما، و ورود محصولات. هر بخش که آماده شد، میبینید و نظر میدهید.
- تحویل. کد، سرور، دامنه و مستندات به نام شما. اگر فروشگاه قدیم رتبه داشت، نشانیهای قدیم با ریدایرکت دائمی به معادل تازهشان میروند.
اگر فروشگاه فعلیتان ووکامرس است و سوالتان «بمانم یا بروم» است، آن را جدا و با جزئیات در وردپرس یا سایت اختصاصی جواب دادهایم.
اشتباههای رایج در طراحی سایت
اینها اشتباههایی است که بیشتر از بقیه پول و وقت میسوزانند، و بیشترشان پیش از اولین طرح قابل پیشگیریاند:
- شروع از فهرست صفحهها بهجای سوالها. نتیجه سایتی است که همهچیز دارد جز جواب سوال مشتری.
- کپی کردن رقیب. سایت رقیب برای مشتری رقیب ساخته شده و شاید خودش هم کار نکند.
- طراحی روی دسکتاپ و تأیید روی دسکتاپ. طرح را روی گوشی خودتان ببینید و تأیید کنید، چون بیشتر مشتریها آنجا میبینندش.
- محصول یا خدمت بدون جواب سوالهای پیش از خرید. هزینهی ارسال، زمان تحویل، شرط پس دادن، ضمانت.
- ثبتنام اجباری پیش از خرید. خرید مهمان بگذارید و حساب را بعد از خرید پیشنهاد دهید.
- سایتی که مال شما نیست. دامنه به نام طراح، سرور در حسابی که رمزش را ندارید، کدی که تحویل داده نشده. روزی که بخواهید تیم را عوض کنید، تازه معلوم میشود.
- فراموش کردن نشانیهای قدیم. بازطراحی سایتی که رتبه دارد بدون نقشهی ریدایرکت، رتبهی سالها را یکشبه میبرد.
کی قالب یا وردپرس کافی است
ارزانترین پروژه پروژهای است که لازم نیست، پس این بخش را صادقانه مینویسیم. ساخت سایت اختصاصی همیشه جواب درست نیست. قالب تمیز یا وردپرس معمولا کافی است وقتی:
- کسبوکار تازه است و هنوز نمیدانید مشتری چه میپرسد. اول با یک سایت ساده بازار را بشناسید؛ طراحی اختصاصی از جواب همین سوالها ساخته میشود.
- سایت بیشتر محتواست: چند صفحهی معرفی و یک وبلاگ، که نویسندهها با ویرایشگر وردپرس راحتاند.
- فروشگاه معمولی است: محصول، سبد و پرداخت، بدون قیمت عمده، چند انبار یا گردش کار خاص.
- بودجه و زمان محدود است و سایت باید همین ماه بالا بیاید.
در این حالتها هم چیزهای این راهنما به کار میآید: قالب سبک و سریع انتخاب کنید، افزونه را فقط برای کاری که واقعا لازم است نصب کنید، سرعت را با یک ابزار عمومی بسنجید و دامنه و سرور را به نام خودتان بگیرید. اگر سایت وردپرسی دارید و کند است، معمولا اول سرور و سرعت درست میشود، نه کل سایت: پیکربندی سرور وردپرس با قیمت ۱۵ میلیون تومان و بهینهسازی سرعت با قیمت ۱۰ میلیون تومان را پیش از هر بازطراحی بسنجید.
برعکس، سایت اختصاصی وقتی ارزش دارد که کار اصلی کسبوکار با قطعههای آمادهی دیگران خوب انجام نمیشود: رزرو با قاعدههای خاص، پنل برای کارمندها با نقشهای مختلف، اتصال به حسابداری و انبار، یا مسیری که قالب جلویش را گرفته است. اگر برایتان سوال «وردپرس یا سایت اختصاصی» جدی است، راهنمای کامل آن را بخوانید.
سفارش طراحی سایت: از اینجا شروع کنید
اگر هنوز مطمئن نیستید چه لازم دارید، کمهزینهترین قدم سنجیدن سایت فعلی است: تست رایگان سرعت نشان میدهد مشکل اصلی سرعت است، سئو، سرور یا خود طراحی. اگر سایت تازه، بازطراحی یا طراحی سایت اختصاصی در ذهن دارید، در صفحهی تماس با موضوع «طراحی سایت» چند خط دربارهی کسبوکار، مشتری و یک کار اصلی سایت بنویسید. بعد از یک گفتگو، دامنهی کار، قیمت ثابت و زمان تحویل را مکتوب میکنیم؛ و اگر به این نتیجه برسیم که یک قالب ساده برای امروز شما بس است، همین را میگوییم.
پرسشهای رایج
قیمت طراحی سایت در تیم سفید چقدر است؟
عدد ثابتی برای همه نداریم، چون کار هر سایت فرق دارد. بعد از یک گفتگو، فهرست صفحهها، امکانات و اتصالها مکتوب میشود و یک قیمت ثابت میگیرد که تا آخر کار همان است؛ هر چیز تازه فقط با توافق شما اضافه میشود.
طراحی سایت چقدر طول میکشد؟
زمان هم مثل قیمت از اندازهی کار میآید و در ایستگاه «نقشه و قیمت» مکتوب میشود. هر عددی پیش از دیدن کار حدس است.
بعد از تحویل خودمان میتوانیم محتوا را عوض کنیم؟
بله. پنل مدیریت برای کارهای روزانه، مثل افزودن محصول، نوشتن مطلب یا عوض کردن قیمت، ساخته میشود تا به برنامهنویس نیاز نداشته باشید. کد و مستندات هم به نام شماست.
اگر روزی خواستیم تیم دیگری کار را ادامه دهد چه؟
از همان روز اول میتواند. کد با تاریخچهی کامل، سرور و دامنه به نام شما، رمزها و دسترسیها و مستند هر تنظیم تحویل میشود، و فناوریها رایج و شناختهشدهاند.
طراحی سایت شامل سئو هم میشود؟
پایهی فنی سئو بله: ساختار نشانیها، عنوان و توضیح صفحهها، نقشهی سایت، دادهی ساختاریافته و سرعت از اول در طرح جا دارند. رتبهی گوگل را اما هیچکس نمیتواند تضمین کند و ما هم قولش را نمیدهیم.
میزبانی و سرور را هم شما میدهید؟
سرور به نام خود شما گرفته میشود و ما آن را راه میاندازیم و پیکربندی میکنیم. چون سایت طوری ساخته میشود که روی یک سرور کوچک هم روان بماند، هزینهی ماهانهتان بالا نمیرود.
بعد از تحویل پشتیبانی دارید؟
هر کار ۱۴ روز پشتیبانی رایگان دارد: هر چیزی که به همان کار مربوط باشد، بیهزینه درست میشود. بعد از آن، هر کاری لازم شد یک تسک موردی با قیمت روشن است و قرارداد ماهانهی اجباری نداریم.