צבע וטיפוגרפיה למי שלא מגיע מעיצוב

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

למה צבע וטיפוגרפיה קובעים איך נראים

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

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

בחירת פלטת צבעים

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

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

זהו: שלושה או ארבעה צבעים עם תפקידים מוגדרים. הפיתוי הוא להוסיף עוד כי עוד מרגיש עשיר יותר, אבל ההפך הוא הנכון. פלטה הדוקה נראית מכוונת; רחבה נראית כאילו אף אחד לא החליט. אם רוצים עזרה במציאת צבעים שמתאימים יחד, כלים חינמיים כמו Coolors או Adobe Color מייצרים פלטות הרמוניות מצבע התחלה יחיד.

ניגודיות נכונה

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

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

שילוב פונטים בלי לטעות

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

קיצור הדרך שכדאי לנסות: משפחת פונט אחת מעוצבת היטב, רק משנים את המשקל. גרסה מודגשת לכותרות וגרסה רגילה לטקסט גוף תמיד ייראו מתואמות, כי הן עוצבו יחד. ספריות פונטים כמו Google Fonts חינמיות, נטענות מהר, וכוללות משפחות שנבנו במיוחד למסכים.

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

גדלים וריווח

אפילו עם צבעים ופונטים מושלמים, טקסט שקטן מדי או צפוף מדי נראה לא מקצועי ומעייף לקריאה. הנה ברירות מחדל מעשיות שעובדות לרוב האתרים.

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

עקביות מחברת את הכל יחד

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

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

מתכון פשוט לעקוב אחריו

אם זה עדיין מרגיש הרבה, הנה כל העניין מכווץ. בוחרים צבע ראשי אחד, ניטרלי אחד, והדגשה אחת. בודקים שניגודיות הטקסט עוברת בודק. משתמשים בפונט אחד או שניים, או משפחה אחת במשקלים שונים. קובעים טקסט גוף ב-16 עד 18 פיקסל עם ריווח נוח. ואז מחילים את כל זה בעקביות בכל עמוד. עוקבים אחרי זה - והאתר כבר ייראה מקצועי יותר מהרוב הגדול של אתרי העסקים הקטנים שיש שם.

אם מעדיפים שההחלטות האלה ייעשו בשבילכם, עם פלטה ומערכת טיפוגרפיה שמתאימה למותג ונשארת עקבית בכל האתר - זה חלק ממה שאני בונה. קבעו שיחה ואני ארכיב מראה נקי ומקצועי שלא דורש להפוך למעצב. אפשר גם להגיע אליי דרך טופס יצירת הקשר. עבור המילים שממלאות את העמודים המעוצבים היפה האלה, המדריך שלי על כתיבת UX ומיקרו-קופי הוא צעד טבעי הבא.