מה הופך אתר לפרימיום — האנטומיה של אתר מקצועי

2.1 פרימיום הוא לא טעם — הוא מתמטיקה

פתחו את Stripe.com, Linear.app ו-Vercel.com בשלושה טאבים. הסתכלו עליהם למשך 30 שניות. אתם יודעים — אתם מרגישים — שהם פרימיום. הם נראים אחרת מ-99% מאתרי SaaS בעולם. אבל אם יבקשו מכם לנסח למה בדיוק הם פרימיום, רוב האנשים יאמרו משהו עמום: "הם נקיים", "הם אלגנטיים", "הם מקצועיים".

התשובה האמיתית אינה עמומה. היא מספרית.

כל אחד מהאתרים האלה מיישם מערכת של specs שניתן למדוד: רוחב מקסימלי של טקסט הוא 680-720 פיקסלים. גובה שורה של גוף הטקסט הוא בין 1.5 ל-1.7 פעמים גודל הפונט. המרווחים בין אלמנטים הם תמיד כפולה של 8 (8, 16, 24, 32, 48, 64, 96). הכותרת הראשית גדולה פי 2.5-3 מגוף הטקסט. יש להם 2-3 צבעים דומיננטיים בלבד. הצללים שלהם אינם box-shadow אחד שטוח אלא שילוב של 2-3 שכבות.

כשאתם מבקשים מ-AI "תעשה לי אתר פרימיום" — הוא לא יודע מה המספרים האלה. כשאתם מבקשים "hero section עם H1 של 48px, letter-spacing -0.02em, body של 17px עם line-height 1.6, content max-width 720px, 8px grid spacing" — הוא יודע בדיוק מה לייצר.

למה AI לא נותן את המספרים האלה לבד

כמו שראינו בפרק 1, AI ממוצע על ה-training set שלו. ה-training set מכיל אלפי אתרים — רובם בינוניים, מעטים פרימיום. כש-AI "מנחש" ערך, הוא מנחש את הערך הסביר ביותר. הערך הסביר ל-padding הוא 16px (לא 24px או 32px שדרושים ל-hero). הערך הסביר ל-hero H1 הוא 36px (לא 48-56px שדרוש לתחושת premium). הערך הסביר ל-content max-width הוא "אין" או "100%" (לא 720px שדרוש לקריאוּת).

בכל ברירת-מחדל, AI מפספס ב-20-30% את הערך הפרימיום. 10-15 ברירות-מחדל מצטברות לאתר שהוא "בסדר" במקום "מעולה". זה הכל.

מה הפרק הזה עושה — ומה הוא לא עושה

עושה: נותן לכם את 15 המספרים שעומדים מאחורי 80% מתחושת הפרימיום. מסביר מאיפה הם באים, על מה הם נכונים, ואיך להכניס אותם לפרומפט.

לא עושה: לא מלמד אתכם תורת צבע (זה פרק 3). לא מלמד בחירת פונטים (זה פרק 4). לא מלמד Grid ו-Flexbox (זה פרק 5). הפרק הזה הוא ה-שלד המספרי. הפרקים הבאים מלבישים את הבשר.

2.2 עקרון הליבה: Restraint Over Excess

לפני שנגיע למספרים — חייבים להתחיל מהעיקרון שעומד מאחוריהם. כי אם לא מבינים אותו, גם המספרים לא יעזרו.

העיקרון הזה מסתכם במשפט אחד: אתרים פרימיום מראים פחות, לא יותר.

זה הפוך לאינטואיציה של מרבית האנשים. כשמבקשים אתר "עשיר" — אנשים חושבים על יותר אלמנטים, יותר צבעים, יותר אנימציות, יותר sections, יותר badges, יותר features מפורטים. אבל אם תסתכלו על אתרים פרימיום אמיתיים (Stripe, Apple, Linear, Vercel, Aesop), תגלו שהם עושים בדיוק את ההיפך: פחות אלמנטים, פחות צבעים, פחות אנימציות, פחות טקסט על המסך בכל רגע נתון.

למה "פחות" מתפרש כ"יקר יותר"

שני מנגנונים פסיכולוגיים עומדים מאחורי התופעה:

1. Signaling של ביטחון. כשאתר לא ממלא כל פיקסל בתוכן — המסר הלא-מודע הוא "למוצר הזה אין צורך להתחנן לתשומת הלב שלך". השוו את המסרים: עמוד ה-pricing של Apple (כותרת בלבד, מחיר, 3 bullet points) מול עמוד ה-pricing של סטארטאפ ממוצע (12 features per tier, 4 tiers, 3 FAQ sections, 2 testimonials). הראשון משדר "המוצר מדבר בעד עצמו". השני משדר "בבקשה, תהיה מרוצה".
2. יכולת הגולש לעבד. עיניים אנושיות סורקות — לא קוראות. כשעל המסך יש 20 נקודות תשומת-לב, העין לא יודעת לאן לסקור ויוצרת תחושת עייפות. כשיש 3 נקודות, העין בוחרת ומרגישה שליטה.

3 דוגמאות קונקרטיות לריסון — זו לצד זו

Restraint ≠ Boring

חשוב להבחין: ריסון אינו משמעו שעמום או מינימליסטי לגמרי. אפשר להיות נועז ומרוסן באותו זמן. Apple Vision Pro site הוא דוגמה: הוא משתמש באנימציות מורכבות, 3D, וידאו ברקע — אבל עם מעט מאוד אלמנטים בכל רגע נתון. יש דרמה, יש ויזואל, אבל אין גודש.

הבחנה נוספת: ריסון הוא לא "לוותר על דברים מגניבים" — הוא לבחור את הדברים המגניבים בקפידה. באתר רגיל תראו 4 אפקטים שונים, כל אחד חצוי (gradient hero + glassmorphism cards + parallax background + animated numbers). באתר פרימיום תראו אפקט אחד-שניים שהמעצב ביצע מושלם (רק scroll-driven transitions מאוד עדינות, כל השאר שקט). פחות אפקטים, כל אחד מבוצע היטב.

2.3 ה-8px Grid System — למה דווקא 8

ה-spec הראשון מבין 15 ה-specs שהופכים אתר לפרימיום הוא מערכת ה-8px grid. הרעיון פשוט עד כדי מבוכה: כל ערך spacing באתר חייב להיות כפולה של 8. זהו. זה כל הכלל.

הערכים המומלצים — הסקאלה שתחזור על עצמה בכל פרומפט שלכם מהיום הלאה:

למה דווקא 8?

שלוש סיבות שהתכנסו יחד:

1. מתמטיקה נוחה. 8 מתחלק ב-2, ב-4, ובעצמו. זה אומר שבכל הגדלי מסך (mobile 360, tablet 768, desktop 1440), ה-grid נשאר עקבי ומתחלק טוב.
2. צפיפות מסכים. צפיפות מסכים נפוצה היא x1, x2 (retina), x3 (mobile). כפולות של 8 מתקלטות לערכים שלמים בכל הצפיפויות, ללא anti-aliasing מטושטש.
3. פיתוח אימוץ. Material Design של Google הנהיגו את הסטנדרט ב-2014, Apple HIG מיישר אליו לרוב, Tailwind CSS מבוסס עליו כברירת מחדל (spacing scale של tailwind: 1=4px, 2=8px, 3=12px, 4=16px... הסקאלה של Tailwind שמישה ל-8px grid כי 2 ו-4 הם כפולות).

איך לזהות סטייה מה-grid

פתחו אתר ב-DevTools. בחרו אלמנט ובדקו את ה-padding/margin ב-Computed tab. אם אתם רואים ערכים כמו 13px, 22px, 35px — האתר לא על 8px grid. אם הערכים הם 8, 16, 24, 32, 48, 64 — הוא על ה-grid.

ראיה נוספת — פחות מדויקת אבל מהירה: אם האתר נראה "קצת מוזר" אבל אתם לא מצליחים לנסח למה — יש סיכוי טוב שה-spacing לא עקבי. העין האנושית רואה חוסר-עקביות גם כשהמוח לא מנסח אותה.

חריגות מותרות

כמה ערכים שלא בדיוק כפולות של 8 אבל מקובלים בתעשייה:

• 4px — ריווח זעיר, לפעמים עבור ה-gap הכי קטן בין אייקון לטקסט ב-badge. משתמשים בזה במתינות.
• 12px — משתמשים לפעמים לכפתור height או לפינה בין 8 ל-16. מעדיפים 16 אם אפשר.
• 40px / 56px / 72px — הם כן כפולות של 8, ומופיעים כ-"half steps" באמצע בין הערכים הנפוצים.

איך לבקש את זה מ-AI בצורה שעובדת

זו ההוראה שתכניסו לכל פרומפט מהיום הלאה:

"Use an 8px spacing scale exclusively: 8, 16, 24, 32, 48, 64, 96, 128. Do not use any spacing values that are not on this scale. Apply hierarchically: hero py-32, regular sections py-20, cards p-8, buttons px-6 py-3, inline gaps gap-2 or gap-4."

2.4 Typography Specs — המספרים שעין מאומנת רואה

אחרי ה-grid, שתי הקטגוריות הבאות של specs הן הכי נראות: טיפוגרפיה ו-צבעים. אנחנו פרק 2, אז נגיע ל-מספרים של טיפוגרפיה. הבחירה של פונטים עצמה (Heebo? Space Grotesk? Fraunces?) — זה פרק 4. כאן אנחנו מתמקדים במה שקובע את תחושת הקריאה, לא בבחירת הפונט.

4 ה-specs של טיפוגרפיה פרימיום

Hero H1: למה 44-56px ולא 36px או 72px

הסיבה היא פסיכופיזית. ב-desktop רגיל (1280-1440px רוחב), חלון התצוגה של אתר הוא בערך 600-720 פיקסלים גובה מעל הקיפול. עבור כותרת שתתפוס "מרחב דומיננטי" — כלומר שתהיה הדבר הראשון שהעין תורחי אליה — היא צריכה לתפוס בין 7% ל-10% מהגובה. 44-56px בדיוק שם.

כותרת קטנה מ-40px "נבלעת" — היא נראית כמו עוד טקסט במקום אלמנט דומיננטי. כותרת מעל 72px — במיוחד ב-SaaS — מתחילה להיראות צעקנית, "כמו פוסטר". יש מקום לכותרות של 80-120px (agency, portfolio) אבל שם זה בחירה מודעת לאפקט, לא ברירת-מחדל.

Body 16-18px: למה לא 14px

14px היה הסטנדרט של שנות ה-2000 — כשמסכים היו קטנים יותר וצפיפות פיקסל נמוכה. היום, על מסך retina של 15.6 אינץ', 14px נראה קטן ומעיק לקריאה. Google, Apple ו-Microsoft כולם עברו ל-16px כ-baseline. חלק מאתרי premium עברו ל-17-18px (Medium, Stripe Docs, Vercel Blog).

לקריאוּת הממוצעת: 16px הוא ה-floor, 17-18px הוא ה-premium. אל תרדו מתחת ל-16px לטקסט רץ.

Line-height 1.5-1.7: המרווח בין שורות

Line-height הוא היחס בין גובה שורה לגודל הפונט. אם הפונט הוא 16px ו-line-height הוא 1.6 — גובה השורה בפועל הוא 25.6px. הערך הזה קובע כמה "אוויר" יש בין שורות.

הטווח 1.5-1.7 נמצא במחקרים רבים כאזור האופטימלי לקריאה. מתחת ל-1.4 — שורות "נצמדות", קשה לעקוב. מעל 1.8 — שורות "מתפרקות" ומאבדים את ההקשר בין שורה לשורה.

לכותרות, הכלל הפוך: 1.1-1.2. כותרת של 48px עם line-height של 1.6 נראית כמו קובייה עם חלל באמצע. line-height של 1.1 שומר על הכותרת כ"בלוק אחד מהודק".

Letter-spacing -0.02em: הפרט הכי שקוף

זה אולי ה-spec הכי סודי ולכן הכי חשוב. רוב האנשים אפילו לא יודעים ש-letter-spacing קיים, ועוד יותר — שהוא יכול להיות שלילי.

מה זה עושה: letter-spacing: -0.02em אומר לפונט "הצמד את האותיות ב-2% מגודל הפונט". על H1 של 56px, זה כ-1.1px פחות מרווח בין כל אות לשכנתה. לעין לא-מאומנת — לא מורגש. לעין מאומנת — זה ההבדל בין "חובבני" ל"premium".

למה זה עובד: פונטים sans-serif מודרניים (Inter, SF Pro, Helvetica Neue) מעוצבים עם ריווח דיפולטי שמתאים ל-body text. כשמגדילים אותם ל-44-56px, האותיות נראות "רחוקות" מדי. ריווח שלילי עדין מחזיר את היחס.

איפה ליישם:

• H1 (44-56px+): letter-spacing: -0.02em
• H2 (32-40px): letter-spacing: -0.015em
• H3 (24-28px): letter-spacing: -0.01em
• Body (16-18px): letter-spacing: 0 (ברירת-מחדל, ללא שינוי)
• Small caps / UPPERCASE labels (11-13px): letter-spacing: 0.05-0.1em (חיובי)

טבלת type scale מלאה

הנה ה-type scale שאפשר להדביק לפרומפט ולקבל בסיס פרימיום:

2.5 Content Max-Width — 680-720px ולמה זה משנה

זה ה-spec שהכי הרבה אתרים גנריים מפספסים, והכי קל לתקן. הוא גם הסיבה שאתר Medium נקרא טוב יותר מבלוג ממוצע של סטארטאפ — גם אם שניהם בנויים באותה טכנולוגיה.

הכלל: שורת טקסט רציפה לא צריכה לחרוג מ-680-720 פיקסלים רוחב. בערך 60-80 תווים לשורה. מעבר לזה — העין מתקשה "לחזור" לתחילת השורה הבאה. מתחת ל-400px — השורות קצרות מדי, הקריאה "מקוטעת".

מאיפה ה-680-720?

זה מבוסס על מחקרי typography ישנים מאוד — יחזרו לימי הדפוס. הסטנדרטים הקלאסיים של ספרים מדברים על 60-75 תווים לשורה (כולל רווחים) כאזור האופטימלי לקריאה. עם גודל פונט של 16-18px ופונט sans-serif ממוצע, זה מתרגם ל-680-720 פיקסלים.

אתרים פרימיום מיישמים את זה אגרסיבית. בדקו את ה-HTML של Medium, Stripe Docs, Notion Blog, Vercel Blog — כולם מגבילים את ה-article text ל-640-760px. זה המרחב הנכון.

Max-widths לפי סוג תוכן

המלכודת של "רספונסיבי" לבד

Vibe Coders שמבקשים "responsive site" מקבלים אתר שמכווץ במובייל — אבל ב-desktop ה-text מתפזר על רוחב המסך המלא (1440px+). זה גורם לשורות של 140-180 תווים, פסיכית בלתי-קריאות. תמיד יש לציין במפורש:

"Article / long-form text must have max-width of 680px (about 72ch) and be centered. Hero subtitle max-width 600px. Landing page container max-width 1200px with 24px horizontal padding. Do not allow text to stretch to full screen width on desktop."

2.6 אסטרטגיית צבע — 2-3 צבעים ולא יותר

הפרק הבא (3) יהיה כולו על צבע. כאן אנחנו נוגעים רק ב-עיקרון הפרימיום של צבע: 2-3 צבעים דומיננטיים, לא יותר.

זה נשמע מגביל. זה גם לא נכון שאתרים פרימיום "שחור ולבן בלבד". מה שנכון זה שיש להם היררכיה ברורה: צבע ראשי (primary), צבע ניוטרלי דומיננטי (neutral — בד"כ שחור/לבן/גוון אפור), ואולי צבע accent אחד.

ההיררכיה של 2-3 צבעים

מה הופך אתר ל"צבעוני-מדי"

אתרים גנריים משתמשים ב-5-8 צבעים במקום 2-3. הכפתור הראשי סגול, כפתור משני ירוק, הכותרת בגרדיאנט, ה-badge כחול, האייקונים צבעוניים, התמונות רוויות. המסר המוחשי לעין: "אני לא יודע מה חשוב באתר הזה".

אתרים פרימיום עושים את ההפך. Linear משתמש בשחור, לבן, 2 גוונים של אפור, וסגול-כהה בודד ל-CTAs. Stripe משתמש בלבן, אפור, שחור וסגול-אינדיגו. Apple משתמש בלבן, שחור, ו-accents זהירים מאוד בתמונות מוצר. ככל שיש פחות צבעים — הצבעים היחידים בולטים יותר, והאתר מרגיש מחויב.

המטריצה: lightness levels של אותו צבע ≠ צבע שונה

כשאנחנו אומרים "2-3 צבעים", מתכוונים לגוונים (hues) שונים. מותר — ואפילו מומלץ — להשתמש ב-5-10 lightness levels של כל גוון. למשל: לוח neutrals עם neutral-50, 100, 200, 300, 400, 500, 600, 700, 800, 900 — כולם "אותו הצבע" (אפור), פשוט בבהירויות שונות. זה לא שובר את הכלל של 2-3 צבעים.

פרק 3 יילמד איך לבנות את הלוח המלא. כאן חשוב לזכור רק את העיקרון: gוונים דומיננטיים מוגבלים ל-2-3, variations בהירות מותרות כרצונכם.

2.7 Layered Shadows — צללים בשכבות, לא שטוחים

עוד spec שקוף אבל טרנספורמטיבי. AI ברירת-מחדל יוצר box-shadow: 0 4px 6px rgba(0,0,0,0.1) על כל כרטיס — צל אחיד, שטוח, "פלסטיקי". אתרים פרימיום משתמשים ב-שכבות של 2-3 צללים עם רדיוסים שונים ואטימויות שונות, שמחקים את האופן שבו חפצים באמת מטילים צל במציאות.

דוגמה קונקרטית: מעבר מ-shadow שטוח ל-layered shadow

shadow שטוח (ברירת-מחדל של AI):

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

layered shadow (פרימיום):

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.06),
  0 4px 8px rgba(0, 0, 0, 0.08),
  0 16px 32px rgba(0, 0, 0, 0.06);

ההבדל: הצל "הפרימיום" בנוי מ-3 שכבות — צל חד וקרוב (1-2px), צל בינוני (4-8px), וצל רחב ועדין (16-32px). יחד הם יוצרים עומק מדורג שמרגיש "תלת-ממדי אמיתי" במקום "מדבקה על דף".

הנוסחה הכללית לצל פרימיום

לצל "נייטרלי" (כרטיס רגיל):

• שכבה 1: offset 1-2px, blur 2-4px, opacity 4-6%
• שכבה 2: offset 4-8px, blur 8-16px, opacity 6-8%
• שכבה 3 (אופציונלי, לצל חזק): offset 16-32px, blur 32-64px, opacity 4-6%

לצל "מורם" (מודל, dropdown, card hover):

• שכבה 1: offset 2-4px, blur 4-8px, opacity 8-10%
• שכבה 2: offset 8-16px, blur 16-32px, opacity 10-12%
• שכבה 3: offset 32-64px, blur 64-128px, opacity 6-8%

כלי עזר — Shadow generators פרימיום

יש אתרים שמייצרים layered shadows מוכנים. אלה טובים להתחיל איתם:

• shadows.brumm.af — generator עם סקאלה של "smoothed shadows" (layered)
• getcssscan.com/css-box-shadow-examples — 100 דוגמאות מוכנות
• material-io/tools/resizer — elevation system של Google (elevations 1-24)

איך לבקש את זה מ-AI

"Use layered box-shadows (2-3 layers) instead of single flat shadows. Default card shadow: '0 1px 2px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.08), 0 16px 32px rgba(0,0,0,0.06)'. Hover/elevated shadow: add 'smoothed-lg' layered variant with increased offset and blur. Do not use single-line box-shadow."

2.8 Whitespace as Confidence Signal

ראינו את זה כבר בפרק 1 כ-tell של אתר AI (spacing אחיד, אין whitespace מכוון). כאן אנחנו עוברים לצד המתקן. הרעיון: whitespace הוא לא "מקום ריק שנשאר". הוא משדר שהתוכן עומד לעצמו.

מה האתרים הפרימיום עושים שונה

שוו 2 Hero sections בראשכם. הראשון (אתר ממוצע): כותרת גדולה + תת-כותרת + 2 כפתורים + badge "trusted by 5K" + תמונת screenshot + 5 logos של חברות. כל זה בתוך section של 70vh. צפוף. השני (אתר פרימיום, למשל linear.app): כותרת גדולה + תת-כותרת אחת + כפתור יחיד. סביבם 60% מהמסך הוא ריק. אין טלפון של badges. אין לוגואים לא שייכים. נושם.

הסיגנל הפסיכולוגי של השני: "המוצר הזה בטוח בעצמו". הוא לא צריך טריקים של proof-heavy כדי לשכנע. הטקסט לבד הספיק.

איפה ליישם whitespace נדיב

1. מעל כותרת ראשית — padding-top של hero לפחות 80-128px ב-desktop
2. סביב CTA ראשי — margin של 48-64px מעל ומתחת לכפתור החשוב ביותר
3. בין sections — margin 96-160px בין sections גדולים
4. בתוך כרטיסים — padding 32-48px בכרטיסי feature חשובים (לא 16!)
5. סביב quotes / testimonials — 64-96px סביב המובאה

הכלל ה-"Breathing Room"

כלל פשוט שעוזר: ככל שהאלמנט חשוב יותר, כך יותר whitespace סביבו. זו דרך לתקשר חשיבות בלי להגדיל את האלמנט עצמו. כותרת ראשית לא צריכה להיות בהכרח ענקית — אם יש סביבה 120px של whitespace, היא תבלוט בלי קשר לגודל.

2.9 Archetype 1: SaaS (Stripe, Linear)

ה-archetype הנפוץ ביותר בפרויקטים של Vibe Coders — והסיבה שחייבים לעשות אותו מדויק. SaaS הוא הזאנר שבו ההבדל בין גנרי לפרימיום קוצר הכי פתאומי את אחוז ההמרות.

אתרי הרפרנס

• Stripe.com — מלך ה-SaaS premium. תמיד בהיר (לבן + אפורים), טיפוגרפיה מדויקת, monospace accents לקוד, gradients עדינים מאוד (לא סגול-כחול).
• Linear.app — גרסה של Stripe אבל עם רקע כהה כברירת-מחדל. motion שקוף, אלגנטי, כבד בכוונה על performance.
• Vercel.com — פונט monospace (GeistMono) לכל אלמנט מפתח. שחור-לבן קיצוני עם accents ניאון. "developer aesthetic".
• Notion.so — דוגמה לגרסה חמה יותר של SaaS premium. אותם specs, פחות טכניים, יותר "יצירתי".

ה-specs המאפיינים

Mood board — SaaS

אם הייתם בונים mood board (אוסף של רפרנסים ויזואליים) ל-archetype הזה:

• Screenshot של ה-hero של stripe.com
• Screenshot של ה-pricing של linear.app
• Screenshot של ה-docs של vercel.com
• פלטה: #FFFFFF, #F8F9FA, #111827, #635BFF
• פונטים: Inter + JetBrains Mono, או Geist + Geist Mono
• Specs key: Hero H1 48px, body 17px, layered shadows, 8px grid

2.10 Archetype 2: Agency (Dark / Immersive)

ה-archetype של "האתר ששואב אותך ב-2 שניות". רקע כהה, טיפוגרפיה שמילאה את המסך, אנימציות מדודות אבל בולטות. מתאים לסוכנויות עיצוב, סטודיו moti­on, קולקטיבים יצירתיים — וגם למוצרי B2C שרוצים לשדר "אמביציה".

אתרי הרפרנס

• activetheory.net — סטודיו שעיצב הרבה מה-interactive experiences של Apple / Google. הדגם של agency premium.
• locomotive.ca — סוכנות קנדית, אתר סמל. scroll-driven מרהיב, טיפוגרפיה כבדה.
• studio-freight.com — סטודיו אמריקאי שבנה את ספריית Lenis (smooth scroll). אתר ה-"אני בעצמי דוגמה למה שאני מוכר".
• basicagency.com — סוכנות עם קולאז' ויזואלי נועז ותנועה חלקה.
• bruno-simon.com — דוגמה קיצונית: אתר 3D אינטראקטיבי לגמרי (אפשר לנהוג מכונית). רלוונטי כרפרנס לאמביציה.

ה-specs המאפיינים

2.11 Archetype 3: Portfolio (Minimal)

ה-archetype של מעצב / מפתח / פרילנסר / יוצר. המטרה היא הפוכה ל-SaaS: האתר עצמו נעלם, והעבודות הן הכוכב. אם מישהו נכנס לאתר פורטפוליו וזוכר את העיצוב של האתר יותר מהעבודות — האתר נכשל.

אתרי הרפרנס

• rauno.me — Rauno Freiberg, מעצב ב-Vercel. אולי הפורטפוליו הנקי ביותר באינטרנט. טקסט בלבד, כמעט.
• brittanychiang.com — Brittany Chiang, front-end engineer. סגנון dark minimalist, אבל עם הרבה details עדינים שרואים רק בעיון.
• paco.me — Pace Roman, מעצב ב-Vercel/Raycast. צמצום קיצוני, typography מוקפדת.
• jmsv.co — James Vaughan, dev. אתר-טקסט כמעט. אסתטיקה "אין-אסתטיקה".
• emilkowalski.com — Emil Kowalski, יוצר spripelds של Sonner ו-Vaul. פורטפוליו כסאדה פונקציונלית.

ה-specs המאפיינים

2.12 Archetype 4: E-commerce Luxury

ה-archetype של חנויות בוטיק יוקרה — אופנה, קוסמטיקה נישה, יין, בישום, פריטי לייפסטייל יקרים. המסר הלא-מודע: "המוצר הזה שווה זמן. תעצור. תסתכל. אל תמהר".

אתרי הרפרנס

• aesop.com — קוסמטיקה אוסטרלית. אולי ה-e-commerce הפרימיום הקלאסי ביותר בעולם. serif מלכותי, spacing נדיב עד כאב.
• jacquemus.com — מותג אופנה צרפתי. תמונות ענקיות, אנימציות עדינות, תחושה אדיטוריאלית.
• byredo.com — בישום פרימיום. נראה כמו ירחון יוקרתי, לא כמו חנות אונליין.
• lagent.com (Agent Provocateur) — אופנה פנים. השימוש ב-serif typography מאוד אגרסיבי.
• alohasandals.com — נעליים. דוגמה לניהול-חנות שלקח את הקוד האסתטי של יוקרה והחיל על מוצר פחות-"יוקרתי".

ה-specs המאפיינים

2.13 Premium Specs Reference — טבלת המספרים המרכזית

זהו הטבלה שתוכלו להדפיס / לשמור כ-image / להצמיד ל-notion שלכם. אם אתם זוכרים רק דבר אחד מהפרק — שיהיה זה. הטבלה מסכמת את כל ה-specs שדיברנו עליהם, ומוסיפה גם ערכים של מרכיבים שעוד לא נגענו בהם (border-radius, transitions, z-index) שהם גם חלק מאנטומיית הפרימיום.

Premium Specs — הטבלה המרכזית

2.14 5 העקרונות שמעצבים מקצועיים עושים אחרת

אם הייתם יושבים מאחורי כתף של מעצב מנוסה (שמעצב 10+ שנים) בונה אתר — ומתעדים את כל ההחלטות הקטנות שלו — הייתם מגלים 5 עקרונות שחוזרים על עצמם. הם לא "כללים קשוחים" — הם ברירות-מחדל מנטליות שהפכו אוטומטיות אחרי אלפי שעות של עשייה. אתם יכולים לאמץ את כולם עכשיו, בפרק 2 של הקורס, בלי 10 שנות ניסיון.

עיקרון 1: Restraint over excess

ראינו את זה כבר בסעיף 2.2. הכלל: בכל החלטה — האם להוסיף אלמנט, צבע, אנימציה — ברירת-המחדל היא לא. מעצב מנוסה מוסיף רק אם יש הצדקה מוחשית. מעצב לא-מנוסה מוסיף כי "זה נחמד". "יש צדק שזה נמצא פה?" היא שאלה שצריכה להישאל פעם ב-10 שניות.

עיקרון 2: Whitespace is a confidence signal

מעצב מנוסה משתמש ב-whitespace לא כ"מקום שנשאר" אלא ככלי מכוון. הוא יגיד דברים כמו "נותן לזה לנשום". הכוונה: האלמנט הזה חשוב, וה-whitespace סביבו מחזק את החשיבות. אותו אלמנט עם פחות whitespace יראה פחות חשוב — בלי לשנות שום דבר אחר בו.

עיקרון 3: 2-3 colors max, with strict hierarchy

מעצב מנוסה יבנה מוסד או מוצר שלם עם 2-3 צבעים דומיננטיים, ויכעס אם מישהו מוסיף צבע רביעי "כי זה יהיה מגניב". ההיררכיה הוא הכל: צבע אחד הוא "הכוכב" (primary), האחרים תומכים. בלי היררכיה — אין מסר.

עיקרון 4: Typography hierarchy with discipline

מעצב מנוסה מגדיר type scale מראש ולא חורג ממנה. 6-7 רמות טקסט מוגדרות (display, H1, H2, H3, lead, body, small, caption) וכל טקסט באתר נופל לאחת מהן. מעצב לא-מנוסה מחליט גודל טקסט "באופן הוצא-מהיד" לכל סיטואציה — וכך מייצר סקאלה לא-מודעת של 20 גדלים שונים.

עיקרון 5: Specific numerical grid (8px)

מעצב מנוסה ימנע מחריגה מה-grid גם אם זה "יראה קצת יותר טוב". ב-95% מהמקרים הוא מעדיף 32px על פני 30px — גם כשהעין לא רואה את ה-2px הבדל. הסיבה: עקביות על פני 200+ אלמנטים באתר יוצרת תחושת סדר שהמסתכל מרגיש בלי לנסח.

הגלולה: תוכלו לאמץ את כל ה-5 עכשיו

רוב הVibe Coders חושבים שהם לא "מעצבים אמיתיים" ולכן לא יכולים ליישם את העקרונות. זה לא נכון. העקרונות הם כללי-אצבע, לא פרי אינטואיציה מאומנת. אפשר לכתוב אותם בפרומפט, לאכוף אותם ב-checklist, ולבדוק שה-AI פעל לפיהם. אין פה סוד — יש פה שיטה.

2.15 Premium Prompt Template — פרומפט שמכתיב archetype + מספרים

הנה ה-deliverable המרכזי של הפרק: פרומפט של 250-350 מילים שאפשר להעתיק-הדבק (אחרי מילוי 3 parameters) לכל כלי AI ולקבל אתר פרימיום ב-95% מהדרך לאתר-סטודיו.

המבנה: 4 שכבות

1. Context — מה המוצר, למי, מטרת האתר
2. Archetype — הגדרה מפורשת של סגנון (SaaS/Agency/Portfolio/Luxury) עם 2-3 רפרנסים
3. Numerical specs — כל המספרים מהטבלה (spacing, typography, colors, shadows)
4. Restraint rules — "Do NOT" list שמונע את ברירות-המחדל הגנריות

ה-template המלא

[CONTEXT]
"Build a [product type] landing page for [target audience] that communicates [core value prop]. The product is [brief description]."

[ARCHETYPE]
"Design in the [SaaS / Agency / Portfolio / E-commerce Luxury] archetype, specifically in the style of [Reference 1] + [Reference 2]. The overall feel should be [2-3 adjectives — e.g. 'precise, confident, editorial']."

[SPACING SPECS]
"Use 8px grid exclusively: 8, 16, 24, 32, 48, 64, 96, 128. Hero section py-32 (desktop) / py-20 (mobile). Regular sections py-20 / py-12. Cards p-8. Buttons px-6 py-3. Gap between features in grid: gap-6 or gap-8."

[TYPOGRAPHY SPECS]
"Use [Display font] for headings and [Body font] for body text. Hero H1: 56px desktop / 36px mobile, weight 700, letter-spacing -0.02em, line-height 1.1. Section H2: 36px, letter-spacing -0.015em, line-height 1.15. Body text: 17px, weight 400, line-height 1.6, letter-spacing 0. Small caps labels: 12px uppercase with letter-spacing +0.08em. Article/long text max-width 680px."

[COLOR SPECS]
"Use 2-3 colors maximum. Primary: [hex code]. Neutral: [hex code]. Accent (if any): [hex code]. Do NOT use the default Tailwind purple-to-blue gradient. Do NOT use more than 3 dominant hues — lightness variations of the same hue are allowed."

[SHADOW SPECS]
"Use layered box-shadows only (2-3 layers). Default card: '0 1px 2px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.08), 0 16px 32px rgba(0,0,0,0.06)'. Hover/elevated: same formula with increased offset and blur. No flat single-line shadows."

[RESTRAINT / DO-NOT RULES]
"Apply restraint: each section has ONE primary focal point. Hero has exactly 1 headline, 1 subtitle, 1 CTA, 1 visual. Do NOT add 'trusted by' logos above the fold. Do NOT stack 3+ CTAs. Do NOT use 5+ colors. Do NOT use Inter-only typography without pairing. Do NOT use generic copy words: revolutionize, seamless, empower, cutting-edge, innovative, transform. Use concrete numbers and verbs instead."

[CONSISTENCY CHECK]
"Before finalizing each section, verify: (1) all spacing is on 8px grid; (2) typography matches the scale above; (3) colors count ≤3 dominant hues; (4) shadows are layered; (5) each section respects the archetype."

איך להתאים את ה-template לפרויקט שלכם

שלושה parameters שצריך למלא לפני השימוש:

1. Context — 2-3 משפטים על מה המוצר, מי הקהל, ומה המטרה העיקרית של האתר.
2. Archetype + References — בחרו מתוך 4 ה-archetypes לפי ה-framework בסעיף 2.6, והוסיפו 2-3 אתרי רפרנס ספציפיים.
3. Color + Font choices — צבע primary, צבע neutral, אופציונלי accent. שם של font family. פרק 3 יעמיק בצבע, פרק 4 ב-typography.

מה התוצאה הצפויה

תעריכו — בהשוואה ל-"Build me a nice SaaS landing page":

• 80-90% פחות AI slop tells
• Spacing עקבי ב-95%+ מהאלמנטים
• Typography hierarchy ברורה מהסתכלות ראשונה
• 2-3 צבעים בלבד (לא 7)
• תחושה של "מישהו השקיע" — ציון AI Slop Checklist מפרק 1 של 2-3 מתוך 15 במקום 10-12

2.16 סיכום, תרגילים והגשר לפרק 3

הפרק הזה נתן לכם 4 deliverables מוחשיים: Premium Anatomy Cheat Sheet (הטבלה המרכזית), 4 Mood Boards לכל archetype, Premium Prompt Template מלא, ובעזרתו — גרסה חדשה של האתר שלכם. הגיע הזמן לבצע את התרגילים ולהפוך את הידע למיומנות.

ארבעת התרגילים של הפרק