עיצוב ממשק

עיצוב טוב נמדד במה שהגולש מצליח לעשות

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

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

מתחילים כאן: UI ו-UX

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

תכנון לפני צבע

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

החלטות עיצוב

• פלטת צבעים לאתר — איך בוחרים צבעים שעובדים, כולל ניגודיות שעומדת בדרישות הנגישות.
• תפריט ניווט — מבנה, מובייל ונגישות.
• מצב כהה (Dark mode) — מתי הוא שווה את העבודה ואיך מממשים אותו.

עיצוב בעברית

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

עקביות: מערכת ולא אוסף של עמודים

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

מה לא לעשות

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

נושאים קרובים: עמודי האתר, נגישות ומובייל.

רוצים אתר שהעיצוב שלו עובד בשביל העסק? כך אני בונה אתרים לעסקים — ספרו לי על העסק.