طراحی سایت

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

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

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

یک تست ساده: خانه را به کسی بدهید که کارتان را نمی‌شناسد. در ده ثانیه باید بتواند بگوید شما چه می‌کنید و قدم بعد چیست. اگر گفت «شیک است» و نفهمید چه می‌فروشید، طراحی سایت هنوز شروع نشده.

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

طراحی سایت از جواب دادن به یک سوال شروع می‌شود: مشتری وقتی وارد صفحهٔ من شد، قرار است چه کند؟ بدون جواب، هر رنگ و فونتی تزئین بی‌هدف است.

عوض کردن رنگ قالب، طراحی سایت نیست. لوگو روی پوستهٔ آماده هم نیست. فایل فتوشاپ که «بعداً برنامه می‌نویسد» هم نیست؛ آن طرح است، تا روی دامنه کار نکند صفحه ندارید.

انیمیشن زیاد و اسکرول قفل‌شده هم به‌تنهایی کیفیت نیست. گوگل تأخیر پاسخ به کلیک را اندازه می‌گیرد. مخاطب سه ثانیه برای اسلایدر صبر نمی‌کند. لندینگ دویفا برای قصهٔ برند اسکرول دارد؛ صفحهٔ راهنما و خدمت باید معمولی باز شود و خوانده شود. هر صفحه رفتار خودش را می‌خواهد.

مدرک و پکیج «سایت + سئو + اینستاگرام» روی یک فاکتور، معمولاً یعنی هیچ‌کدام تمام نمی‌شود. طراحی سایت یک محدوده دارد. سئوی محتوا می‌تواند ادامه داشته باشد؛ پی‌ریزی فنی را برای بعد نگذارید.

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

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

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

کی قالب بد نیست

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

معیار حرفه‌ای بودن را در طراحی سایت حرفه‌ای جدا کرده‌ایم: وضوح، سرعت، قابل اندازه‌گیری. قالب چندمنظوره معمولاً هیچ‌کدام را پایدار نگه نمی‌دارد.

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

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

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

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

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

خانه باید در دو نگاه بگوید چه می‌کنید. یک جملهٔ روشن بالای صفحه بهتر از چهار اسلاید مبهم است. خدمات را جدا کنید؛ هر خدمت یک آدرس، با مثال و اینکه برای کیست. تماس را قایم نکنید: تلفن، ساعت، فرم که به جایی برسد. درباره وقتی معنی دارد که آدم و کار واقعی باشد؛ «سال‌ها تجربه» بدون نمونه، خالی است.

نمونه یا پروژه اگر دارید، یکی را تا مسئله و نتیجه بگویید. بیست لوگو بدون شرح، رزومه نیست. بلاگ را وقتی بگذارید که حرف تازه دارید. تقویم اجباری مقالهٔ ضعیف به سئو کمک نمی‌کند؛ یک صفحه که سوال را تمام کند از ده پست تکراری بهتر است.

صفحهٔ قیمت یا تعرفه اگر می‌توانید محدوده بگویید، اعتماد می‌سازد. اگر نمی‌توانید عدد ثابت بدهید، بگویید از چه چیزی قیمت درمی‌آید. ما همین کار را در طراحی سایت قیمت کرده‌ایم؛ رقم روی بنر معمولاً قالب است.

1. لیست صفحات را بنویسید: خانه، خدمات (هر کدام جدا)، تماس، درباره.
2. برای هر صفحه یک جمله بنویسید: «هدف این صفحه ... است.»
3. صفحه‌هایی که هدف‌شان تکراری است را ادغام کنید.
4. صفحه‌هایی که الان محتوا ندارید برایشان، حذف کنید و بعداً اضافه کنید.
5. فهرست نهایی را به طراح بدهید. همین‌قدر کافی است تا برآورد دقیق بگیرد.

چیزهایی که فعلاً نسازید

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

بهترین منبع، حرفی است که به مشتری روی تلفن می‌زنید. همان را بنویسید، بعد کوتاه کنید. «ارائه‌دهندهٔ خدمات نوین» را کسی جستجو نمی‌کند؛ «طراحی سایت برای فروشگاه پوشاک» را می‌کند. کلمه باید در عنوان و در متن بیاید، اما جمله باید سوال آدم را جواب بدهد.

یک H1 در صفحه. H2 برای بخش‌ها. پاراگراف اول همان جواب. مقدمهٔ «در دنیای امروز» را ننویسید؛ گوگل و مخاطب هر دو رد می‌شوند. لینک داخلی را جدی بگیرید: از خدمت به قیمت، از وردپرس به اختصاصی. صفحهٔ یتیم پیدا نمی‌شود.

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

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

دامنه را به نام خودتان ثبت کنید. اگر آدرس روی پلتفرم سازنده است، روزی که بخواهید بروید رتبه و ایمیل را با خودتان نمی‌برید. هاست یا سرور باید با ترافیک شما جور باشد؛ ارزان‌ترین پلن اشتراکی برای فروشگاه شلوغ کافی نیست. گواهی SSL دیگر اختیاری نیست؛ مرورگر بدون آن اخطار می‌دهد و گوگل هم می‌بیند.

ایمیل روی همان دامنه بسازید. فرم تماس باید به جایی برسد که چک می‌شود؛ صندوقی که کسی باز نمی‌کند، دکمهٔ تزئینی است. پشتیبان‌گیری را بپرسید: اگر هاست سوخت، از کجا برمی‌گردید. این‌ها را در قیمت جدا کنید تا مقایسه دروغ نشود.

دامنهٔ ir. برای کار داخلی مناسب‌تر است و گوگل آن را فارسی حساب می‌کند. اگر بازار بین‌المللی دارید، com. هم بگیرید. ولی دو دامنه یعنی دو سایت مجزا از نظر سئو؛ ریدایرکت بدون برنامه فایده ندارد.

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

برای سایت شرکتی ساده با بازدید روزانهٔ کمتر از ۵۰۰ نفر، هاست اشتراکی ایرانی کفایت می‌کند. برای فروشگاه با بازدید بالا یا سایتی که پنل مدیریت سنگین دارد، سرور مجازی (VPS) یا سرور ابری انتخاب بهتری است. برای سایت‌های استاتیک یا headless، سرویس‌هایی مثل CDN-based hosting سریع‌ترین گزینه‌اند.

چه چیزهایی را بررسی کنید

آپ‌تایم واقعی (نه وعدهٔ ۹۹.۹٪ روی سایت): از کاربران قدیمی بپرسید یا مانیتورینگ بگذارید. محل سرور: اگر مخاطب ایرانی دارید، سرور ایران یا نزدیک بهتر است. پشتیبان‌گیری خودکار: بعضی هاست‌ها فقط هفتگی بکاپ می‌گیرند، بعضی روزانه. بپرسید در صورت مشکل، بکاپ چند ساعت قبل موجود است.

پشتیبانی فنی: وقتی سایت خوابید ساعت ۱۱ شب، کسی جواب می‌دهد؟ تیکت ۲۴ ساعته کافی نیست اگر جواب ۴۸ ساعت طول بکشد. محدودیت منابع: بعضی پلن‌های اشتراکی CPU و RAM را شدیداً محدود می‌کنند. سایت کند می‌شود و شما فکر می‌کنید مشکل از کد است.

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

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

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

یک قانون سرانگشتی: هر درخواست HTTP اضافه، یعنی چند میلی‌ثانیه تأخیر. صفحه‌ای که ۸۰ درخواست می‌زند برای لود شدن، هر چقدر هم سرور قوی باشد، روی موبایل با اینترنت ۳G حس سنگینی می‌دهد. طراحی سایت خوب یعنی حداقل درخواست برای حداکثر محتوا.

آدرس را فارسی یا انگلیسیِ خوانا بگذارید و عوض نکنید. هر صفحه یک موضوع و یک عنوان. توضیح متا باید دروغ نگوید. نقشهٔ XML و robots بعد از انتشار لازم‌اند، اما اگر ساختار صفحه از اول شلوغ باشد، این فایل‌ها معجزه نمی‌کنند.

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

دادهٔ ساخت‌یافته برای سوال پرتکرار و نان‌ریزه کمک می‌کند ربات صفحه را بفهمد. جادو نیست. جایگزین متن ضعیف هم نیست. لینک خریدنی هفته‌اول را اول کار نگذارید؛ صفحهٔ کند با لینک هم نمی‌ماند.

سئو چیزی نیست که بعد از طراحی سایت روی آن بپاشید. اگر آدرس صفحات، ساختار عنوان‌ها و سرعت لود از اول درست نباشد، بعداً هزینهٔ تغییرشان چند برابر هزینهٔ اولیه است.

یک نکتهٔ عملی: بعد از انتشار، سایت را در Google Search Console ثبت کنید و هفته‌ای یکبار نگاه کنید چه کلماتی نمایش می‌دهد. این داده رایگان است و بهتر از هر ابزار پولی نشان می‌دهد گوگل شما را برای چه می‌شناسد.

انگشت جای ماوس است. دکمه باید اندازه داشته باشد. منو نباید روی متن قفل شود. جدول قیمت اگر فقط با اسکرول افقی دیده شود، در عمل نیست. فرم را کوتاه کنید؛ فیلد اضافه یعنی رها کردن.

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

بیش از ۷۰٪ بازدید سایت‌های ایرانی از موبایل است. یعنی اگر طراحی سایت شما فقط روی مانیتور خوب بیاید، اکثر مخاطبانتان تجربهٔ بدی دارند. Mobile-first طراحی کنید: اول ببینید روی صفحهٔ ۶ اینچی چطور خوانده می‌شود، بعد برای دسکتاپ گسترشش دهید.

شروع از ظاهر. انتخاب قالب از روی دموی انگلیسی. وعدهٔ تحویل ۷۲ ساعته بدون پرسیدن کار. سئو را فاز دو نامیدن. متن را «بعداً می‌فرستم» گذاشتن و سایت را با لورم بالا آوردن. فروشگاه قبل از عکس و موجودی. دو زبان قبل از یک زبان تمام.

کپی کردن متن رقیب. گوگل تکراری را می‌فهمد؛ مشتری هم. عدد دروغ در «۱۲۳۴ پروژه». چت‌باتی که کسی پشتش نیست. ویدیوی پس‌زمینه روی خانه. فونت قفل‌شده از سایتی که هر بازدید یک درخواست می‌کشد.

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

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

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

بپرسید کد مال کیست، پشتیبانی چند ماه است، دامنه به نام کی ثبت می‌شود، سرعت را چطور می‌سنجند. اگر جواب «دمو می‌فرستیم رنگش را عوض می‌کنید» بود، همان قالب است. با همین شرح از دو نفر قیمت بگیرید. شرح مبهم، قیمت مبهم می‌آورد.

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

وقتی طراح می‌گوید «سایت آماده است»، کارتان تمام نشده. باید مطمئن شوید همه‌چیز واقعاً تحویل شما شده و کار می‌کند. خیلی از مشکلات بعد از تحویل از این جاست که کسی قبل از پرداخت نهایی، سایت را جدی تست نکرده.

1. دامنه و هاست را چک کنید: آیا به نام خودتان ثبت شده؟ دسترسی مستقیم دارید؟
2. سایت را روی گوشی خودتان باز کنید و همهٔ صفحات را مرور کنید.
3. فرم تماس را پر کنید و ببینید پیام واقعاً می‌رسد.
4. اگر فروشگاه دارید، یک خرید آزمایشی کامل انجام دهید.
5. سرعت را با PageSpeed Insights تست کنید. امتیاز موبایل مهم‌تر از دسکتاپ است.
6. رمزهای ادمین، FTP، دیتابیس و ایمیل را بگیرید و جایی امن ذخیره کنید.
7. بپرسید پشتیبانی بعد از تحویل شامل چه چیزهایی می‌شود و تا کی.

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

اول می‌پرسیم کار چیست. بعد صفحات را قفل می‌کنیم. متن را تا جایی که بتوانید خودتان بگویید جلو می‌بریم. ظاهر روی همان نقشه می‌نشیند؛ رنگ قبل از حرف نمی‌آید. روی موبایل می‌بینید. فرم را با یک پیام واقعی چک می‌کنیم. بعد روی دامنهٔ شما منتشر می‌شود.

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

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