מדריך עיצוב מעשי, בלי ז'רגון
עיצוב אתרים - איך גורמים לאתר להיראות מקצועי
רוב האתרים שנראים חובבניים לא נכשלו בגלל חוסר כישרון, אלא בגלל חמש-שש החלטות קטנות: יותר מדי צבעים, גופן לא מתאים לעברית, תמונות באיכות נמוכה וטקסט שנדחס לקצה המסך. המדריך הזה עובר על ההחלטות האלה אחת אחת.
2-3 צבעים
זה כל מה שאתר צריך
זה כל מה שאתר צריך
גופן אחד
שני משקלים מספיקים
שני משקלים מספיקים
הנייד קודם
שם רוב הגולשים שלכם
שם רוב הגולשים שלכם
קודם כל הגדרה
עיצוב אתרים זה לא ציור, זה סדר
הטעות הנפוצה ביותר היא לחשוב שעיצוב הוא עניין של טעם אישי. בפועל, עיצוב אתר טוב הוא בעיקר היררכיה: הגולש שמגיע לדף צריך להבין תוך שתי שניות איפה הוא, מה מציעים לו, ומה הצעד הבא. כל השאר - צבע, גופן, צללים - משרת את זה.
לכן המבחן הפשוט ביותר לעיצוב שאתם בונים הוא לא "האם זה יפה" אלא "האם ברור". פתחו את הדף בטלפון, הסתכלו עליו שתי שניות ותסגרו. אם אתם לא יכולים לחזור ולומר מה העסק עושה ומה רוצים מכם, העיצוב לא עובד, גם אם הוא מרשים.
החדשות הטובות: את ההיררכיה הזו אפשר להשיג בכל מערכת בנייה, גם בלי מעצב. מערכות מודרניות מגיעות עם מערכת צבעים וטיפוגרפיה מוכנה, וכשבונים אתר עם AI המערכת כבר מייצרת את המבנה הנכון - נשאר רק להחליף תוכן ולא לשבור אותו.
שישה כללים
מה מפריד בין אתר חובבני לאתר מקצועי
שישה כללים שאפשר ליישם בשעה, ושמשפרים כמעט כל אתר קיים. הם לא דורשים כישרון גרפי, רק משמעת.
צבע אחד שולט
בחרו צבע מותג אחד, צבע משני לדגשים, ושחור-אפור לטקסט. כל צבע נוסף מוריד מהמקצועיות. הכפתור החשוב בדף הוא היחיד שמקבל את הצבע החזק ביותר.
בחרו צבע מותג אחד, צבע משני לדגשים, ושחור-אפור לטקסט. כל צבע נוסף מוריד מהמקצועיות. הכפתור החשוב בדף הוא היחיד שמקבל את הצבע החזק ביותר.
גופן עברי אחד
גופן אחד בשני משקלים - רגיל ומודגש - נראה מסודר יותר משלושה גופנים. ודאו שהגופן תומך בעברית באמת ולא נופל לגופן ברירת מחדל של הדפדפן.
גופן אחד בשני משקלים - רגיל ומודגש - נראה מסודר יותר משלושה גופנים. ודאו שהגופן תומך בעברית באמת ולא נופל לגופן ברירת מחדל של הדפדפן.
רווח לבן נדיב
הדבר שהכי מבדיל אתר יקר מאתר זול הוא האוויר סביב התוכן. תנו לכל מקטע נשימה של 80 עד 120 פיקסל למעלה ולמטה, ואל תמלאו כל שטח ריק.
הדבר שהכי מבדיל אתר יקר מאתר זול הוא האוויר סביב התוכן. תנו לכל מקטע נשימה של 80 עד 120 פיקסל למעלה ולמטה, ואל תמלאו כל שטח ריק.
תמונות אמיתיות
תמונה אמיתית של העסק, גם אם צולמה בטלפון, עובדת טוב יותר מתמונת מאגר של אנשים בחליפות. אם אין ברירה, בחרו תמונות מאגר עם אווירה אחידה ולא קלישאתיות.
תמונה אמיתית של העסק, גם אם צולמה בטלפון, עובדת טוב יותר מתמונת מאגר של אנשים בחליפות. אם אין ברירה, בחרו תמונות מאגר עם אווירה אחידה ולא קלישאתיות.
כותרות שאומרות משהו
"פתרונות מתקדמים לעסק שלך" לא אומר כלום. "התקנת מזגנים בגוש דן תוך 48 שעות" אומר הכל. כותרת טובה חוסכת עיצוב, כי היא מסבירה במקום להרשים.
"פתרונות מתקדמים לעסק שלך" לא אומר כלום. "התקנת מזגנים בגוש דן תוך 48 שעות" אומר הכל. כותרת טובה חוסכת עיצוב, כי היא מסבירה במקום להרשים.
מתחילים מהנייד
עצבו קודם למסך צר ורק אחר כך הרחיבו. כך לא נופלים לפריסה שנראית מצוין במחשב ונשברת בטלפון - שם נמצאים רוב הגולשים שלכם.
עצבו קודם למסך צר ורק אחר כך הרחיבו. כך לא נופלים לפריסה שנראית מצוין במחשב ונשברת בטלפון - שם נמצאים רוב הגולשים שלכם.
הפרק שמפילים בו אתרים
עיצוב בעברית הוא לא עיצוב באנגלית הפוך
רוב התבניות בעולם נבנו לאנגלית, ותמיכה בעברית מתווספת להן בדיעבד. התוצאה מוכרת: נקודה שקופצת לקצה השני של המשפט, מספר טלפון שמתהפך, תפריט שנשאר משמאל, וטור טקסט שמתחיל בצד הלא נכון.
לפני שבוחרים תבנית או מערכת, בדקו שלושה דברים בעברית אמיתית ולא בטקסט לורם איפסום: כותרת ארוכה שנשברת לשתי שורות, פסקה עם מספרים וסימני פיסוק, וכפתור עם טקסט ארוך. אם אחד מהשלושה נראה שבור, זה רק יחמיר ככל שתוסיפו תוכן.
יישור אוטומטי לימין
גופנים עבריים מוטמעים
שליטה נפרדת בגרסת הנייד
גופנים עבריים מוטמעים
שליטה נפרדת בגרסת הנייד
מה לא לעשות
שמונה טעויות עיצוב שחוזרות כמעט בכל אתר
1. טקסט אפור בהיר על רקע לבן, שאי אפשר לקרוא בשמש
2. תמונת רקע עמוסה מתחת לכותרת, בלי שכבת הכהיה
3. חמישה כפתורים בדף אחד, כולם באותה מידת בולטות
4. לוגו ענק שתופס חצי מסך בטלפון
2. תמונת רקע עמוסה מתחת לכותרת, בלי שכבת הכהיה
3. חמישה כפתורים בדף אחד, כולם באותה מידת בולטות
4. לוגו ענק שתופס חצי מסך בטלפון
5. אנימציות על כל אלמנט, עד שהדף מרגיש איטי
6. תמונות כבדות שלא הוקטנו ומאטות את הטעינה
7. טופס עם שמונה שדות חובה במקום שניים
8. טקסט שנדבק לקצה המסך בלי שוליים בנייד
6. תמונות כבדות שלא הוקטנו ומאטות את הטעינה
7. טופס עם שמונה שדות חובה במקום שניים
8. טקסט שנדבק לקצה המסך בלי שוליים בנייד
כל אחת מהן היא תיקון של דקות, וביחד הן ההבדל בין אתר שנראה זמני לאתר שנראה כמו של עסק רציני.
שאלות שחוזרות
שאלות נפוצות על עיצוב אתרים
חייבים מעצב גרפי?
לא לאתר תדמית או לחנות רגילה. מערכות הבנייה של היום מגיעות עם מערכת עיצוב שלמה, ומי שבונה עם AI מקבל גם פריסה וגם צבעים מוכנים. מעצב נחוץ כשצריך שפה חזותית ייחודית או מיתוג מאפס.
איזה גופן מתאים לעברית?
גופן סאנס-סריף עברי קריא, בגודל 16 עד 18 פיקסל לטקסט רץ. הימנעו מגופנים דקים מאוד ומגופנים דקורטיביים בפסקאות - שמרו אותם לכותרת אחת לכל היותר.
אפשר להחליף עיצוב אחרי שהאתר עלה?
תלוי במערכת. במערכות שבנויות בבלוקים אפשר לשנות צבעים, גופנים ופריסה בלי לגעת בתוכן. במערכות מבוססות תבנית קשיחה, החלפת תבנית עלולה לדרוש בנייה מחדש - שאלו על כך לפני שנרשמים.
עיצוב משפיע על הקידום בגוגל?
בעקיפין, וחזק. מהירות טעינה, יציבות הפריסה והתאמה לנייד הם מדדים שגוגל מודד ישירות, ותמונות כבדות או אנימציות מיותרות פוגעות בכולם. הרחבנו על כך בדף קידום אתרים.
הדרך הקצרה לעיצוב מסודר
תנו למערכת לבנות את העיצוב, ושנו מה שתרצו
אתר שנבנה עם AI מגיע עם פריסה, צבעים וטיפוגרפיה שכבר עובדים יחד ועם עברית תקינה. משם משנים מה שרוצים בגרירה או בצ'אט.