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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

גדלים וריווח

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

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

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

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

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

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

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

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