نقشه راه صفر تا صد طراحی و ساخت سایت

۱ همین روند طراحی را ادامه بدهنیازها ← وایرفریم ← UI ⌄

برای هر پروژه، اول نیازهای سایت را مشخص کن.

مثلاً برای یک سایت شرکتی:

صفحه اصلی
درباره ما
خدمات
پروژه‌ها
تماس با ما

بعد Wireframe بکش

فعلاً رنگ و زیبایی مهم نیست. فقط مشخص کن Header کجاست، منو کجاست، Hero چه شکلی است، بخش خدمات کجاست، عکس‌ها کجا هستند و Footer چگونه است.

بعد UI را در Figma طراحی کن

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

قانون جدید: فقط نسخه Desktop طراحی نکن. حداقل نسخه Desktop و Mobile را طراحی کن.

۲ Figma را حرفه‌ای‌تر یاد بگیرفقط طراحی نکن؛ ساختار درست بساز ⌄

فقط بلد بودن ابزارهای ظاهری Figma کافی نیست. باید ساختار طراحی حرفه‌ای را هم یاد بگیری.

Frame
Auto Layout
Components
Variants
Styles
Variables
Constraints
Responsive Design
Dev Mode

مثلاً Button را ده بار جداگانه طراحی نکن. یک Component بساز و حالت‌های مختلف آن را مشخص کن:

Default Hover Disabled

این طرز فکر بعداً در برنامه‌نویسی هم خیلی به دردت می‌خورد.

۳ دیگر برای کدنویسی از Figma عکس نگیرخود فایل Figma مرجع اصلی است ⌄

PNG یا PDF فقط برای نمایش طرح خوب است. برای ساخت سایت باید خود فایل Figma مرجع باشد.

مثلاً در Figma می‌بینی:

عرض: 1200px
فاصله: 32px
رنگ: #1264FF
Border Radius: 12px

بعد همین مشخصات را در CSS پیاده می‌کنی.

Figma → VS Code نه Figma → عکس → VS Code

۴ HTML را کاملاً مسلط شواسکلت و ساختار صفحه ⌄

قبل از رفتن سراغ چیزهای پیچیده، HTML را خوب یاد بگیر.

header
nav
main
section
article
footer
h1 تا h6
p
a
button
img
form
input
label

فقط تگ‌ها را حفظ نکن. باید بفهمی ساختار صحیح یک صفحه وب چیست.

مثلاً وقتی در Figma این بخش‌ها را می‌بینی:

Header Hero Services About Projects Contact Footer

ذهن تو باید سریع آن را به ساختار HTML تبدیل کند:

۵ CSS را خیلی جدی یاد بگیرطراحی Figma اینجا تبدیل به سایت می‌شود ⌄

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

Box Model
Width / Height
Margin
Padding
Border
Border Radius
Typography
Colors
Background
Position
Flexbox
CSS Grid
Gap
max-width
min-height
overflow
pseudo classes
:hover
transitions
Media Queries

دو مورد از همه مهم‌ترند: Flexbox و Grid. باید به جایی برسی که یک Layout را در Figma ببینی و سریع تشخیص بدهی با Flex بهتر ساخته می‌شود یا Grid.

۶ Responsive Design یاد بگیرسایت باید روی موبایل هم درست باشد ⌄

سایتی که فقط روی لپ‌تاپ درست نمایش داده شود، سایت کامل نیست.

باید سایت روی Desktop، Tablet و Mobile درست کار کند.

مثلاً اگر Desktop این باشد:

TEXT IMAGE

ممکن است در Mobile تبدیل شود به:

IMAGE TEXT BUTTON

برای این کار باید این موارد را یاد بگیری:

Media Query
Flex
Grid
درصد
max-width
min/max/clamp
Responsive Typography

۷ حالا JavaScript را شروع کناول تعامل‌های ساده و واقعی ⌄

از JavaScript نترس. قرار نیست از روز اول برنامه پیچیده بنویسی.

اول فقط چیزهایی را یاد بگیر که سایتت را زنده می‌کنند. مثلاً:

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

بعد این مفاهیم را یاد بگیر:

Variables
if / else
Functions
Arrays
Objects
Loops
DOM
querySelector
addEventListener
classList
Events

بعد با JavaScript این چیزها را بساز:

منوی موبایل
Accordion
Tabs
Modal
Slider
FAQ
فرم
Dark Mode
فیلتر محصولات

وقتی خودت این‌ها را ساختی، JavaScript خیلی قابل فهم‌تر می‌شود.

۸ AI را فعلاً دستیار خودت کنکمک بگیر، اما یادگیری را دور نزن ⌄

در این مرحله می‌توانی از AI کمک بگیری، اما هنوز نباید کل طراحی یا کل سایت را به آن بسپاری.

قانون مهم: کدی که نمی‌فهمی وارد پروژه نکن و طرحی را که نمی‌توانی ارزیابی کنی فقط به خاطر اینکه AI ساخته، قبول نکن.

استفاده درست در این مرحله

توضیح یک مفهوم سخت در HTML، CSS یا JavaScript
پیدا کردن علت یک خطا
گرفتن بازخورد درباره طراحی خودت
توضیح خط‌به‌خط یک قطعه کد
پیشنهاد چند راه برای Responsive کردن یک بخش

استفاده اشتباه در این مرحله

«کل UI را برایم طراحی کن» و بدون بررسی قبول کردن خروجی
«کل سایت را بساز» و Copy/Paste کردن کد
رد شدن از JavaScript فقط چون AI می‌تواند کد بنویسد

AI در این مرحله باید نقش معلم، منتقد و دستیار را داشته باشد.

۹ اول یک سایت را خودت کامل بسازنقطه ورود به استفاده جدی از AI ⌄

قبل از اینکه سراغ تبدیل طراحی به کد با AI بروی، حداقل یک پروژه را خودت از ابتدا تا انتها انجام بده:

Wireframe → UI/UX → Figma → HTML → CSS → Responsive → JavaScript ساده

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

نقطه کنترل: اگر می‌توانی یک Landing Page یا سایت شرکتی Responsive را خودت بسازی و توضیح بدهی هر قسمت چگونه کار می‌کند، آماده‌ای AI را جدی‌تر وارد Workflow کنی.

۱۰ Git و GitHub یاد بگیرپروژه‌هایت را حرفه‌ای مدیریت کن ⌄

بعد از اینکه چند سایت ساده ساختی، این‌ها را یاد بگیر:

Git چیست؟
Repository چیست؟
Commit چیست؟
Branch چیست؟
Push چیست؟
Pull چیست؟
GitHub چیست؟

از این مرحله به بعد پروژه‌هایت را روی GitHub نگهداری کن.

۱۱ سایتت را واقعاً منتشر کنپروژه وقتی تمام است که روی اینترنت باشد ⌄

فقط روی کامپیوتر سایت نساز. باید یاد بگیری سایت را روی اینترنت منتشر کنی.

Domain چیست؟
Hosting چیست؟
DNS چیست؟
SSL چیست؟
Deployment چیست؟

اولین پروژه‌های HTML/CSS/JS خودت را می‌توانی با GitHub Pages منتشر کنی.

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

۱۲ بعداً برو سراغ Reactاول پایه، بعد فریم‌ورک ⌄

فعلاً React را شروع نکن.

اول این مسیر را خوب یاد بگیر:

HTML → CSS → Responsive → JavaScript

وقتی توانستی چند سایت را بدون React بسازی و JavaScript را فهمیدی، آن موقع برو سراغ React.

بعد از React هم می‌توانی سراغ Next.js بروی.

فصل ویژه — بعد از یادگیری مبانی

حالا وقت استفاده جدی از AI است

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

قانون طلایی: اگر نمی‌توانی خروجی AI را بررسی، توضیح و اصلاح کنی، هنوز نباید آن کار را کامل به AI بسپاری.

مسیر اشتباه ✕

ایده↓AI↓ طرح و کد آماده↓ Copy / Paste↓ سایتی که نمی‌دانی چطور ساخته شده

مسیر درست ✓

ایده و Wireframe↓UI/UX و Figma↓ HTML / CSS / JS↓ درک اصول↓AI↓ سرعت بیشتر + کنترل دست خودت

قابلیت‌های AI و ابزارهای جدید Figma که باید بشناسی

Figma AI

چه کمکی می‌کند؟ برای سرعت دادن به بعضی کارهای طراحی، ایده‌پردازی و ویرایش در محیط Figma.

چه زمانی؟ وقتی خودت اصول UI، Auto Layout، Component و Responsive Design را می‌فهمی.

حواست باشد: پیشنهاد AI جای تصمیم طراحی و قضاوت UX را نمی‌گیرد.

Figma Make

چه کمکی می‌کند؟ می‌توانی با Prompt و طراحی موجود، ایده را سریع‌تر به یک تجربه یا Prototype قابل اجرا نزدیک کنی.

چه زمانی؟ برای آزمایش ایده، Prototype و سریع دیدن نتیجه.

حواست باشد: خروجی آماده به معنی خروجی نهایی و Production-ready نیست.

Dev Mode

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

چه زمانی؟ وقتی می‌خواهی طراحی خودت را دقیق در HTML/CSS یا یک پروژه Front-end پیاده‌سازی کنی.

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

Figma MCP + Coding Agent

چه کمکی می‌کند؟ ابزارهای کدنویسی AI می‌توانند اطلاعات ساختاری طراحی Figma را دریافت کنند و در پیاده‌سازی Front-end کمک کنند.

چه زمانی؟ بعد از اینکه می‌توانی خروجی HTML/CSS/JS را بخوانی و اصلاح کنی.

Workflow: Figma → MCP → Coding Agent → Code → بررسی و اصلاح توسط تو.

AI برای بررسی طراحی

چه کمکی می‌کند؟ می‌توانی از AI بخواهی درباره سلسله‌مراتب بصری، وضوح محتوا، Responsive بودن یا مشکلات احتمالی طراحی بازخورد بدهد.

بهترین استفاده: اول خودت طراحی کن، بعد AI را مثل یک منتقد دوم وارد کن.

AI برای یادگیری کد

چه کمکی می‌کند؟ خطا را توضیح می‌دهد، کد را خط‌به‌خط باز می‌کند و برای یک مسئله چند راه‌حل پیشنهاد می‌دهد.

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

هدف نهایی: تو باید طراح و توسعه‌دهنده‌ای باشی که بدون AI هم اصول کار را می‌فهمد، اما با AI می‌تواند سریع‌تر ایده بسازد، Prototype بزند، کد تولید کند، اشکال پیدا کند و پروژه را جلو ببرد.

پروژه‌هایی که باید به ترتیب بسازی

پروژه ۱

Landing Page ساده

فقط HTML + CSS

پروژه ۲

سایت شرکتی چندصفحه‌ای

HTML + CSS + Responsive

پروژه ۳

سایت تعاملی

HTML + CSS + JavaScript؛ شامل Menu، Slider، FAQ، Modal و Form

پروژه ۴

یک پروژه کامل از صفر

Wireframe → Figma → Desktop → Mobile → HTML → CSS → JS → انتشار

پروژه ۵

همان مسیر با کمک AI

همان فرایند را با AI انجام بده و ببین چقدر سریع‌تر می‌شوی.

پروژه ۶

React

فقط بعد از تسلط قابل قبول به JavaScript

قانون اصلی مسیرت

قرار نیست فقط «طراح Figma» باشی. قرار نیست فقط «کدنویس» هم باشی.

هدفت این باشد که بتوانی یک ایده را بگیری و آن را به یک سایت واقعی روی اینترنت تبدیل کنی.

WireframeUXUIFigma HTMLCSSResponsiveJavaScript Git / GitHubDeployReact + AI Tools

اگر این مسیر را درست طی کنی، دیگر لازم نیست طرح Figma را به یک نفر دیگر بدهی تا برایت تبدیل به سایت کند. خودت هم طراح سایت هستی و هم می‌توانی Front-end آن را بسازی.