چطور وب‌سایت نمونه‌کار بسازیم که کار بیاورد

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

اول مشخص کنید چه کسی دارد نگاه می‌کند

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

اگر دو مخاطب خیلی متفاوت دارید — مثلاً نقش‌های طراحی محصول و تصویرسازی فریلنسری — بخش‌های جدا یا حتی سایت‌های جدا در نظر بگیرید تا هیچ‌کدام مجبور نباشد دنبال چیزی بگردد.

چه چیزی را شامل کنید

کارها

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

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

1. مسئله — یک یا دو جمله دربارهٔ موقعیت و کسانی که تحت تأثیر قرار گرفتند.
2. نقش شما — چه کاری کردید و دیگران چه کردند. دقیق باشید؛ اغراق در مصاحبه به‌راحتی فهمیده می‌شود.
3. فرایند — چند تصمیم کلیدی، با طرح‌های اولیه، وایرفریم یا قطعه‌کد.
4. نتیجه — آنچه منتشر شد و هر نتیجه‌ای که صادقانه می‌توانید بگویید. اگر نمی‌توانید عدد به اشتراک بگذارید، تغییر را توصیفی بیان کنید.

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

درباره و تماس

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

صفحات اختیاری

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

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

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

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

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

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

یک پرامپت اول برای سازندهٔ هوش مصنوعی

یک پرامپت خوب مخاطب، صفحات، کارها و سبک را نام می‌برد:

یک وب‌سایت نمونه‌کار برای لنا پارک بساز، طراح محصول که دنبال نقش‌های ارشد داخلی در شرکت‌های SaaS است. صفحات: خانه با معرفی کوتاه و شبکه‌ای از ۵ مطالعهٔ موردی؛ قالب صفحهٔ مطالعهٔ موردی با بخش‌های مسئله، نقش من، فرایند (با گالری تصاویر) و نتیجه؛ درباره با عکس، بیوگرافی کوتاه و دانلود CV؛ تماس با فرم ساده (نام، ایمیل، پیام) که در یک پایگاه داده ذخیره می‌شود و پیام تشکر نشان می‌دهد. سبک: آرام و مینیمال، فضای سفید زیاد، یک رنگ تأکیدی، متن درشت و خوانا. روی گوشی خوب کار کند. از پروژه‌های نمونهٔ مشخص‌شده استفاده کن که بتوانم یکی‌یکی جایگزین کنم.

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

برای الگوهای بیشتر پرامپت، چطور پرامپت برای سازندگان اپ هوش مصنوعی بنویسیم را ببینید.

مراحل ساخت

1. قبل از هر ابزاری، مخاطب و پروژه‌ها را انتخاب کنید.
2. متن هر مطالعهٔ موردی را اول در یک سند بنویسید: مسئله، نقش، فرایند، نتیجه.
3. تصاویر را آماده کنید — برش، تغییر اندازه و فشرده‌سازی. نام فایل‌ها را معنادار بگذارید.
4. یک چیدمان اولیه بسازید یا انتخاب کنید. مرور قالب‌های نمونه‌کار راه سریعی است برای دیدن اینکه کدام سبک با کار شما می‌خواند.
5. اول صفحهٔ اصلی و یک مطالعهٔ موردی را بسازید، درستشان کنید، بعد همان الگو را تکرار کنید.
6. درباره و تماس را اضافه کنید. فرم تماس را از ابتدا تا انتها آزمایش کنید.
7. روی گوشی بررسی کنید. نمونه‌کارها اغلب روی صفحه‌های کوچک خراب می‌شوند: شبکه‌های فشرده، تصاویر غول‌پیکر، زیرنویس‌های ریز.
8. اصول سئو و یک تصویر اشتراک‌گذاری اضافه کنید، تا وقتی لینک می‌فرستید خوب به نظر برسد.
9. منتشر کنید و دامنه را وصل کنید. چطور دامنهٔ سفارشی وصل کنیم را ببینید.
10. از دو نفر از مخاطب هدف بخواهید سی ثانیه نگاه کنند و بگویند شما چه کاری می‌کنید. اگر نتوانستند، صفحهٔ اصلی را درست کنید.

اشتباه‌های رایج

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

هزینه‌ها

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

وقتی یک محصول آماده انتخاب بهتری است

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

ساختن با Mythex

Mythex می‌تواند یک نمونه‌کار را از توصیفی مثل پرامپت بالا بسازد. آن را در یک پیش‌نمایش زنده با قاب اندازهٔ گوشی می‌بینید، چیدمان و متن را در گفتگو اصلاح می‌کنید، و روی yourname.mythex.app منتشر می‌کنید. اگر فرم تماسی می‌خواهید که استعلام‌ها را ذخیره کند، Mythex یک پایگاه داده به پروژه اضافه می‌کند؛ برای گالری‌های تصویری، می‌تواند از فضای ذخیره‌سازی فایل پروژه استفاده کند تا عکس‌ها داخل کد بسته‌بندی نشوند. در طرح Pro می‌توانید در Mythex دامنه بخرید یا دامنهٔ موجودتان را وصل کنید، و کد را صادر کنید یا با GitHub همگام کنید اگر بعداً بخواهید جای دیگری میزبانی کنید.

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

پرسش‌ها