آشنایی با سبک‌های طراحی سایت: حتماً برات پیش اومده که یه پروژه رو شروع کردی، المان‌ها رو کشیدی و رنگ‌ها رو چیدی، ولی آخرش حس کردی یه چیزی کم داره؟ یا شاید کارت حرفه‌ای به نظر نمیاد؟ 😕

خب، بذار یه رازی رو با تو در میون بذارم: دونستن سبک‌های طراحی (Design Styles) دقیقاً همون فوت کوزه‌گری‌ایه که کمتر کسی بهت یاد میده. خیلی از طراحا وقتی یه پروژه می‌زنن، فقط المان‌ها رو کنار هم می‌چینن بدون اینکه بدونن دارن توی چه چهارچوبی کار می‌کنن. نتیجه‌ش میشه یه کار معمولی که نه چشم‌نوازه، نه حرفه‌ای به نظر میاد. 🫤

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

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

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

چرا باید سبک‌های طراحی رو بشناسی؟ 🤔

شاید بگی “خب، من که می‌تونم هر جور دلم خواست طراحی کنم، چه فرقی داره چه اسمی روش بذارم؟”

دقت کن! دونستن سبک‌ها بهت این امکان رو می‌ده که:

• هدفمند طراحی کنی: دیگه الکی المان‌ها رو کنار هم نمی‌چینی، می‌دونی داری چه حسی رو منتقل می‌کنی.
• با دیگران راحت‌تر ارتباط بگیری: وقتی با کارفرما یا تیم صحبت می‌کنی، می‌تونی بگی “این پروژه رو با سبک نئومورفیسم می‌زنیم” و همه می‌فهمن چی به چیه.
• کاربر پسندتر کار کنی: هر سبک برای یه هدف خاص مناسبه. مثلاً یه سایت پزشکی با سبک فلت، حس پاکیزگی و مدرن بودن میده.
• خلاقیتت بیشتر شه: وقتی با قواعد آشنا باشی، می‌تونی اون‌ها رو بشکنی و سبک شخصی خودت رو بسازی.

خب، بریم سر اصل مطلب. توی این مقاله، 12 تا از مهم‌ترین سبک‌های طراحی وب رو با هم بررسی می‌کنیم:

1. فلت دیزاین (Flat Design)
2. متریال دیزاین (Material Design)
3. اسکلتومورفیسم (Skeuomorphism)
4. نئومورفیسم (Neumorphism)
5. گلس‌مورفیسم (Glassmorphism)
6. مینیمالیسم (Minimalism)
7. بروتالیسم (Brutalism)
8. سوئیس استایل (Swiss Style / International Typographic Style)
9. ممفیس (Memphis Design)
10. سایبرپانک (Cyberpunk)
11. یوآی کیوت (Y2K / Aesthetic)
12. نئوبروتالیسم (Neubrutalism)

برای هر کدوم، اول توضیح می‌دم که چی هست، بعد ویژگی‌هاش رو می‌گم و در نهایت با کد و مثال، یاد می‌گیری چطور خودت پیاده‌سازی‌اش کنی. آماده‌ای؟ بریم! 🚀

مهم ترین سبک های طراحی وب (web design styles)

۱. فلت دیزاین (Flat Design)

فلت دیزاین همونطور که از اسمش معلومه، طراحی‌ای هست که در اون خبری از سایه‌های پیچیده، گرادینت‌های سنگین، بافت و برجستگی‌ها نیست. همه چی تخت و ساده است. این سبک از اونجایی شروع شد که دیزاین‌های اسکلتومورفیک (که بعداً می‌گم) خیلی شلوغ شده بودن. مایکروسافت با مترو (Metro) و بعد اپل با iOS 7 این سبک رو رواج دادن.

ویژگی‌ها:

• رنگ‌های زنده و تخت
• تایپوگرافی واضح
• حذف سایه‌ها و گرادینت‌های غیرضروری
• آیکون‌های ساده و برداری

پیاده‌سازی با کد:

برای زدن یه دکمه فلت، کافیه یه باکس ساده با یه رنگ پس‌زمینه و لبه‌های صاف (یا کمی گرد) درست کنی. هیچ سایه‌ای لازم نیست.

:HTML

<button class="flat-btn">کلیک کن</button>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

.flat-btn {
    background-color: #3498db;
    border: none;
    color: white;
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.flat-btn:hover {
    background-color: #2980b9;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

پیش نمایش:

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

۲. متریال دیزاین (Material Design)

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

ویژگی‌ها:

• سایه‌های عمیق (برای نمایش لایه‌ها)
• حرکت‌های روان و طبیعی
• استفاده از گریدها و فاصله‌های استاندارد
• رنگ‌های پررنگ و متضاد

پیاده‌سازی با کد:

برای پیاده‌سازی یه کارت (Card) به سبک متریال، باید سایه‌ی مناسب (elevation) و گوشه‌های کمی گرد به المان بدیم.

:HTML

<div class="material-card">
    <div class="card-content">
        <h3>عنوان کارت</h3>
        <p>این یه توضیح کوتاه برای کارته که با سبک متریال طراحی شده.</p>
    </div>
</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

.material-card {
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
    background-color: #fff;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    
}
.material-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 12px 24px rgba(0,0,0,0.2);
}
.card-content {
    padding: 16px;
}
.card-content h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
}
.card-content p {
    margin: 0;
    color: #555;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

پیش نمایش:

توضیح سایه: سایه‌ی اولی (0 2px 4px) یه سایه‌ی ملایمه که نزدیک کارته، سایه‌ی دوم (0 8px 16px) یه سایه‌ی گسترده‌تر. این ترکیب حس ارتفاع رو می‌ده.

۳. اسکیومورفیسم (Skeuomorphism)

اسکیومورفیسم یعنی المان‌های سایت رو شبیه نمونه‌های واقعی‌شون طراحی کنیم. مثلاً یه دفترچه یادداشت رو شبیه یه دفتر کاغذی با خط‌ها، سایه‌ها و بافت کاغذ طراحی کنیم. اپل توی نسخه‌های اول iOS از این سبک زیاد استفاده می‌کرد .

ویژگی‌ها:

• بافت‌های واقعی (چوب، چرم، کاغذ)
• سایه‌های عمیق و برجسته
• گرادینت‌های پیچیده
• جزئیات زیاد

پیاده‌سازی با کد:

برای این سبک، باید از چندین سایه، گرادینت و حتی بافت‌های تصویری استفاده کنیم.

مثال: یه دکمه شبیه دکمه‌های واقعی:

:HTML

<button class="skeuo-btn">فشار بده</button>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

.skeuo-btn {
    background: linear-gradient(to bottom, #f0f0f0, #ccc);
    border: 1px solid #999;
    border-radius: 12px;
    padding: 10px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 5px 0 #666, 0 8px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.1s ease;
}
.skeuo-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #666, 0 5px 5px rgba(0,0,0,0.2);
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

پیش نمایش:

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

۴. نئومورفیسم (Neumorphism)

نئومورفیسم یه سبک جدیدتر که ترکیبی از اسکیومورفیسم و فلت هست. توی این سبک، المان‌ها به نظر می‌رسن که از پس‌زمینه بیرون اومدن یا فرو رفتن، با سایه‌های بسیار نرم و هماهنگ با پس‌زمینه. انگار که از یه خمیر نرم ساخته شدن.

ویژگی‌ها:

• پس‌زمینه و المان‌ها هم‌رنگ هستن (معمولاً یه رنگ خنثی مثل خاکستری)
• دو سایه داریم: یکی روشن (مثل نور از بالا چپ) و یکی تیره (سایه از پایین راست)
• گوشه‌های گرد
• المان‌ها یا برجسته‌اند یا فرورفته

پیاده‌سازی با کد:

برای ساختن یه دکمه به این سبک، باید از دو سایه با رنگ‌های روشن و تیره استفاده کنیم.

:HTML

<div class="neumorph-box">نئومورفیسم</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

body {
    background-color: #e0e0e0; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.neumorph-box {
    width: 200px;
    height: 200px;
    background-color: #e0e0e0;
    border-radius: 50px;
    box-shadow: 9px 9px 16px #bebebe, -9px -9px 16px #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    color: #5a5a5a;
    transition: box-shadow 0.3s ease;
}
.neumorph-box:hover {
    box-shadow: inset 9px 9px 16px #bebebe, inset -9px -9px 16px #ffffff;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

پیش نمایش:

توضیح: توی حالت عادی، دو سایه‌ی بیرونی داریم: یکی تیره (جهت راست پایین) و یکی روشن (جهت چپ بالا) که باعث برجسته دیده شدن می‌شه. توی حالت هاور، سایه‌ها داخلی می‌شن (inset) و المان فرورفته به نظر میاد.

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

۵. گلس‌مورفیسم (Glassmorphism)

گلس‌مورفیسم از سال ۲۰۲۰ حسابی ترند شد. المان‌ها مثل شیشه شفاف هستن، با پس‌زمینه‌ی مات (blur) و حاشیه‌های نازک. این سبک حس مدرن، تمیز و لایه‌ای به طراحی می‌ده. اپل توی macOS Big Sur و ویندوز توی Fluent Design از این سبک استفاده کردن.

ویژگی‌ها:

• شفافیت (Opacity) و محو شدگی (Backdrop Blur)
• حاشیه‌های نازک و نیمه‌شفاف
• سایه‌های ملایم
• چند لایه بودن

پیاده‌سازی با کد:

برای ساخت یه کارت شیشه‌ای، از background: rgba() به همراه backdrop-filter: blur() استفاده می‌کنیم.

:HTML

<div class="glass-card">
    <h2>کارت شیشه‌ای</h2>
    <p>این یه متن نمونه است که پشتش محو دیده می‌شه.</p>
</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

body {
    background: linear-gradient(45deg, #4158D0, #C850C0, #FFCC70);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
}
.glass-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 40px;
    width: 300px;
    text-align: center;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

توضیح:

• background: rgba(255,255,255,0.2) یه پس‌زمینه سفید نیمه‌شفاف.
• backdrop-filter: blur(10px) اون پشت المان رو محو می‌کنه (خود پس‌زمینه اصلی).
• border: 1px solid rgba(255,255,255,0.3) یه حاشیه شیشه‌ای نازک.
• box-shadow یه سایه‌ی ملایم برای جدایی از پس‌زمینه.

نکته: برای کراس براوزر، حتماً -webkit-backdrop-filter رو هم اضافه کن.

پیش نمایش :

۶. مینیمالیسم (Minimalism)

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

ویژگی‌ها:

• فضای خالی زیاد
• تعداد محدود رنگ (معمولاً ۲ یا ۳ رنگ)
• فونت‌های ساده و خوانا
• حذف تزئینات غیرضروری

پیاده‌سازی با کد:

یه صفحه ساده با یه عنوان و یه پاراگراف که کلی فضای سفید دورشه.

:HTML

<div class="minimal-page">
    <h1>سادگی زیباست</h1>
    <p>در طراحی مینیمال، هر عنصر باید دلیل وجود داشته باشد.</p>
    <button class="minimal-btn">بیشتر بخوانید</button>
</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

body {
    margin: 0;
    font-family: 'Helvetica', 'Arial', sans-serif;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.minimal-page {
    text-align: center;
    max-width: 600px;
    padding: 40px;
}
.minimal-page h1 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: #333;
}
.minimal-page p {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.minimal-btn {
    background: none;
    border: 2px solid #333;
    padding: 12px 40px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.minimal-btn:hover {
    background: #333;
    color: #fff;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

توضیح: هیچ سایه‌ی اضافی، گرادینت یا تصویری نیست. فقط فونت و رنگ و فضا.

پیش نمایش:

۷. بروتالیسم (Brutalism)

بروتالیسم از معماری دهه ۵۰ میلادی اومده توی طراحی وب. توی این سبک، همه چیز خام و زمخت به نظر می‌رسه. خبری از ظرافت‌های معمول نیست. رنگ‌های تند، فونت‌های بزرگ و بعضاً زشت، مرزهای نامنظم و المان‌های تکراری عمدی.

ویژگی‌ها:

• استفاده از رنگ‌های نئون و تند
• فونت‌های سیستمی و پیش‌فرض (مثل Times New Roman)
• عدم رعایت سلسله مراتب بصری مرسوم
• تکرار و شلوغی عمدی

پیاده‌سازی با کد:

یه صفحه با پس‌زمینه زرد نئون، متن‌های قرمز و فونت پیش‌فرض.

:HTML

<div class="brutal-card">
    <h1>بروتالیسم</h1>
    <p>طراحی خشن و بی‌قاعده</p>
    <button class="brutal-btn">کلیک کن</button>
</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

body {
    background-color: #ccff00; /* زرد نئون */
    font-family: 'Times New Roman', serif;
    margin: 0;
    padding: 20px;
}
.brutal-card {
    border: 5px solid black;
    padding: 20px;
    background-color: white;
    box-shadow: 10px 10px 0 red;
}
.brutal-card h1 {
    color: red;
    font-size: 4rem;
    text-transform: uppercase;
    margin: 0;
    text-decoration: underline wavy blue;
}
.brutal-btn {
    background-color: black;
    color: white;
    border: 3px dashed magenta;
    padding: 10px 40px;
    font-size: 2rem;
    cursor: pointer;
}
.brutal-btn:hover {
    background-color: magenta;
    color: black;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

نکته: توی بروتالیسم، قانون خاصی وجود نداره! هرچی عجیب‌تر، بهتر.

پیش نمایش:

۸. سوئیس استایل (Swiss Style / International Typographic Style)

این سبک توی سوئیس دهه ۵۰ میلادی شکل گرفت و پایه‌گذار طراحی گرافیک مدرن شد. تأکیدش روی تایپوگرافی تمیز، گریدبندی دقیق، و استفاده از فونت‌های sans-serif مثل هلوتیکا هست. همه چیز باید منظم، خوانا و بدون تزئینات اضافی باشه.

ویژگی‌ها:

• استفاده از گرید (شبکه‌بندی)
• فونت‌های sans-serif (هلوتیکا، اکت‌اویا)
• چیدمان متقارن و نامتقارن اما منظم
• رنگ‌های محدود و مسطح
• عکاسی به جای تصویرسازی

پیاده‌سازی با کد:

یه کارت با استفاده از گرید و فونت هلوتیکا.

:HTML

<div class="swiss-card">
    <div class="swiss-image"></div>
    <h2>طراحی سوئیس</h2>
    <p>نظم، دقت، خوانایی</p>
</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

body {
    font-family: 'Helvetica', 'Arial', sans-serif;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.swiss-card {
    width: 300px;
    background-color: white;
    border: 2px solid black;
}
.swiss-image {
    height: 150px;
    background: #aaa;
    background-image: url('https://via.placeholder.com/300x150');
    background-size: cover;
}
.swiss-card h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px 10px 5px;
    text-transform: uppercase;
}
.swiss-card p {
    margin: 0 10px 20px;
    font-size: 1rem;
    color: #333;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

پیش نمایش:

۹. ممفیس (Memphis Design)

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

ویژگی‌ها:

• رنگ‌های تند و متضاد (صورتی، زرد، آبی)
• الگوهای تکراری (خال‌خالی، راه‌راه)
• اشکال هندسی نامنظم
• لایه‌های روی هم

پیاده‌سازی با کد:

یه کارت با پس‌زمینه سفید و اشکال رنگی نامنظم.

:HTML

<div class="memphis-card">
    <h2>ممفیس دیزاین</h2>
    <p>شاد و پرانرژی</p>
</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

body {
    background-color: #ff00ff; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.memphis-card {
    background-color: white;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    position: relative;
    z-index: 1;
}
.memphis-card::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, yellow 10%, transparent 20%),
                linear-gradient(45deg, cyan 20%, transparent 20%);
    z-index: -1;
}
.memphis-card h2 {
    color: blue;
    font-size: 2rem;
    background-color: yellow;
    display: inline;
}
.memphis-card p {
    color: red;
    font-size: 1.2rem;
    border-bottom: 3px dotted green;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

نکته: می‌تونی از ::before و ::after برای اضافه کردن الگوهای هندسی استفاده کنی.

پیش نمایش:

۱۰. سایبرپانک (Cyberpunk)

سایبرپانک از فیلم‌ها و بازی‌های علمی-تخیلی مثل بلید رانر و سایبرپانک ۲۰۷۷ اومده. توی این سبک، رنگ‌های نئون (صورتی، آبی، سبز) روی پس‌زمینه‌های تیره، خطوط شکسته، افکت‌های گلیچ (Glitch) و تایپوگرافی تند و زاویه‌دار استفاده می‌شه.

ویژگی‌ها:

• رنگ‌های نئون (صورتی، فیروزه‌ای، بنفش)
• پس‌زمینه تیره (مشکی یا سرمه‌ای)
• خطوط شکسته و هندسی
• افکت گلیچ و نویز
• فونت‌های عریض و زاویه‌دار

پیاده‌سازی با کد:

یه باکس با حاشیه نئون و افکت گلیچ.

:HTML

<div class="cyber-card">
    <h2>سایبرپانک</h2>
    <p>2077</p>
</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

body {
    background-color: #0d0d0d;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Arial Black', sans-serif;
}
.cyber-card {
    border: 3px solid #00ffff;
    box-shadow: 0 0 20px #00ffff, inset 0 0 10px #00ffff;
    padding: 40px;
    background-color: #111;
    color: white;
    text-align: center;
    position: relative;
}
.cyber-card h2 {
    color: #ff00ff;
    font-size: 3rem;
    margin: 0;
    text-shadow: 2px 2px 0 #00ffff, -2px -2px 0 #ff00ff;
}
.cyber-card p {
    font-size: 2rem;
    margin: 10px 0 0;
    color: #00ffff;
}
.cyber-card::before {
    content: "سایبرپانک";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #ff00ff;
    opacity: 0.8;
    transform: translate(2px, 2px);
    z-index: -1;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

توضیح: با استفاده از text-shadow و سایه‌های نئونی و همچنین افکت جابجایی، حس گلیچ رو می‌سازی.

پیش نمایش:

۱۱. یوآی کیوت (Y2K / Aesthetic)

اوایل هزاره جدید، اینترنت پر از رنگ‌های متالیک، گرادینت‌های کرومی، ستاره‌های دنباله‌دار، فونت‌های عجیب و المان‌های تکنولوژی زائد بود. حالا دوباره همون حس و حال برگشته! Y2K یعنی طراحی با حال و هوای سال‌های ۱۹۹۷ تا ۲۰۰۴. پر از درخشش، آینده‌نگری ساده‌لوحانه و بازیگوشی.

ویژگی‌ها:

• رنگ‌های متالیک و کرومی
• گرادینت‌های تند
• فونت‌های پیکسلی یا با سبک Sci-Fi
• المان‌های اینترنتی قدیمی (مثل ایموجی‌های شکلک‌دار)
• ستاره، جرقه، خطوط نورانی

پیاده‌سازی با کد:

یه کارت با پس‌زمینه متالیک و متن درخشان.

:HTML

<div class="y2k-card">
    <h2>دهه ۲۰۰۰</h2>
    <p>بازگشت به آینده</p>
    <div class="sparkles"></div>
</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

body {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.y2k-card {
    background: linear-gradient(45deg, silver, #b0b0b0, #e0e0e0);
    padding: 40px;
    border-radius: 20px;
    border: 3px solid cyan;
    box-shadow: 0 0 30px magenta, inset 0 0 20px white;
    color: navy;
    font-family: 'Comic Sans MS', cursive; 
    text-align: center;
    position: relative;
    overflow: hidden;
}
.y2k-card h2 {
    font-size: 3rem;
    text-shadow: 2px 2px 0 magenta, 4px 4px 0 cyan;
}
.sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, white, transparent 15%),
                radial-gradient(circle at 70% 70%, yellow, transparent 20%);
    opacity: 0.4;
    pointer-events: none;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

نکته: می‌تونی از فونت‌های پیکسلی مثل Press Start 2P هم استفاده کنی.

پیش نمایش:

12. نئوبروتالیسم (Neubrutalism)

این همون سبکیه که داخل بخش اشتراک ویژه رایاوردپرس می‌بینی! نئوبروتالیسم یعنی خداحافظی با استانداردهای اتوکشیده و سلام به طراحی‌های خشن، با اعتمادبه‌نفس و پرانرژی. این سبک دقیقاً همون مرزیه که تو رو از یه طراح معمولی جدا می‌کنه.

ویژگی‌ها:

• سایه‌های سخت و ضخیم: برخلاف سبک‌های دیگه که سایه‌های محو (Blur) دارن، اینجا سایه‌ها کاملاً تخت، تیره و با زاویه مشخص هستن که به المان‌ها حجم واقعی می‌دن.
• حاشیه‌های مشکی (Borders): دور تمام دکمه‌ها و باکس‌ها از خطوط مشکی ضخیم استفاده می‌شه تا المان‌ها از پس‌زمینه کاملاً جدا بشن.
• تضاد رنگی شدید: استفاده از رنگ‌های نئونی و جیغ (مثل نارنجی رایا وردپرس یا زرد قناری) در کنار سفید و مشکی خالص.
• تایپوگرافی درشت: استفاده از فونت‌های سنگین و ضخیم که مستقیم توی چشم مخاطب زل می‌زنن.
• عدم تقارن تعمدی: گاهی المان‌ها کمی کج یا نامتقارن چیده می‌شن تا حس “دست‌ساز” بودن و زنده بودن طرح منتقل بشه.

پیاده‌سازی با کد:

:HTML

<div class="neubrutal-card">
    <div class="badge">قابلیت انحصاری</div>
    <h2>کاربر ویژه شو!</h2>
    <p>دسترسی به آموزش‌های خفن و کمیاب رایا وردپرس</p>
    <button class="neubrutal-btn">مشاهده آموزش‌ها</button>
</div>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

:CSS

.neubrutal-card {
    background-color: white;
    border: 3px solid black;
    padding: 30px;
    width: 350px;
    box-shadow: 10px 10px 0px #ff6b00; 
    font-family: inherit;
    text-align: center;
    margin: 30px auto;
}

.badge {
    background-color: black;
    color: white;
    display: inline-block;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.neubrutal-card h2 {
    font-weight: 900;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.neubrutal-btn {
    background-color: #ff6b00;
    color: black;
    border: 3px solid black;
    padding: 12px 25px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    box-shadow: 4px 4px 0px black;
    transition: all 0.1s;
}

.neubrutal-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px black;
}

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

پیش نمایش:

کدوم سبک رو کی استفاده کنیم؟ یه راهنمای سریع 🧭

حرف آخر: چطور از این سبک‌ها توی پروژه‌های واقعی استفاده کنیم؟

حالا که با این سبک‌ها آشنا شدی، ممکنه بگی “خب، حالا من چطور انتخاب کنم کدوم رو استفاده کنم؟”

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

راستی از کدوم سبک طراحی بیشتر استفاده میکردی؟