לשלב צבעים זה קשה.
איך יודעים איזה צבע הולך לאן?
מה גורם לכפתור לבלוט, בלי שכל האתר ירגיש צועק?
יש כלל עיצוב פשוט שעוזר לכולם, גם למי שאינם מעצבים, לעשות את זה נכון.
🎨 כלל ה-60/30/10
הכלל הזה עוסק כולו בשימוש בשלושה צבעים ביחס מסוים:
60% → צבע דומיננטי (רקעים, שטחים גדולים) 30% → צבע משני (כותרות, קטעים, ניווט) 10% → צבע הדגשה (כפתורים, קישורים, CTA)
כלל העיצוב הזה עובד בכל מקום.
הנה איך זה נראה בעיצוב פנים:
מגניב, לא?
הוא יוצר איזון. שום דבר לא צורח. הכל פשוט מרגיש נכון.
🤷🏽 למה זה עובד
חשבו על האתר שלכם כמו להתלבש.
לא הייתם לובשים חמישה צבעים בבת אחת. צריך לבחור כמה ולשלב אותם בקפידה.
לכן כלל ה-60/30/10 עובד:
מגביל המצאות - מקסימום 3 צבעים = עיצוב נקי.
מכוון תשומת לב - העין נמשכת לאותם 10%.
מרגיש מכוון - מישהו השקיע מחשבה בצבעים כאן.
🌍 דוגמאות מהעולם האמיתי
הנה כרטיס מוצר לנייד שעוקב אחרי הכלל בצורה מושלמת:
- 60% רקע בהיר
- 30% תוכן כהה
- 10% CTA ירוק
כפתור “Add to Cart” בולט בדיוק כמו שצריך.
עכשיו תסתכלו על דף הבית הזה:
- הרקע לבן ברובו (60%)
- קטעים שחורים וטיפוגרפיה יוצרים מבנה (30%)
- CTA ירוק בוהק מושך את העין (10%)
לכן העיצוב מרגיש פרמיום למרות שהוא פשוט.
💡 איך ליישם את זה באתר שלכם
1️⃣ בחרו את הפלטה שלכם.
- דומיננטי = רקע (אפור בהיר, בז’, לבן שבור)
- משני = מבנה (כחול כהה, ירוק עמוק, פחם)
- הדגשה = CTA (ליים, אדום, כתום, סגול, מה שבולט)
אפשר להשתמש באתר כמו Coolors כדי למצוא פלטה טובה.
2️⃣ יישמו את כלל ה-60/30/10 על העמוד שלכם.
60% → צבע דומיננטי (רקעים, שטחים גדולים) 30% → צבע משני (כותרות, קטעים, ניווט) 10% → צבע הדגשה (כפתורים, קישורים, CTA)
בונוס: שלטו בכלל לפני שתשברו אותו
תראו הרבה אתרים מצוינים ששוברים את הכלל הזה.
אבל זכרו: כדי להפוך לאמן גדול, קודם עקבו אחרי הכללים, ואז למדו איך לכופף אותם.
רק כשתשלטו ביסודות תמצאו דרכים לשבור את הכללים ועדיין ליצור עיצובים מדהימים.
אבל אם אתם רוצים אתר נקי, ידידותי להמרה שלא צועק “חובבן”, התחילו כאן.