עיצוב אתרים לעסקים קטנים: עקרונות שמביאים פניות

מה עיצוב טוב צריך להשיג באתר עסקי קטן

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

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

עיצוב אתר מול בניית אתר: מה ההבדל

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

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

המסך הראשון: מה הגולש צריך לראות לפני שהוא גולל

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

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

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

היררכיה ויזואלית: איך מכוונים את העין

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

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

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

צבעים וניגודיות

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

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

טיפוגרפיה בעברית

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

• משפחת גופנים אחת או שתיים: אחת לכותרות ואחת לטקסט, או אחת ב 2 או 3 משקלים.
• גודל טקסט של 16 פיקסלים לפחות בנייד: פחות מזה מכריח זום.
• גובה שורה מרווח: בעברית, בגלל הניקוד והאותיות היורדות, טקסט צפוף מתעייף מהר. גובה שורה של פי 1.5 עד 1.7 מגודל הפונט עובד ברוב המקרים.
• שורות לא ארוכות מדי במחשב: פסקה שנמתחת על כל רוחב המסך קשה לקריאה. בערך 60 עד 80 תווים בשורה זה טווח נוח.
• פונטים שנטענים מהר: כל משקל של פונט הוא קובץ נוסף. ארבעה משקלים של שני פונטים כבר מורגשים במהירות.
• פונט שתומך בעברית באמת: ב Google Fonts יש כמה משפחות חינמיות עם עברית מלאה, כמו Heebo, Rubik או Assistant. אם המיתוג משתמש בפונט בתשלום, צריך רישיון שמתיר שימוש באתר.

עיצוב לנייד קודם

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

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

תמונות ומדיה

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

כל תמונה צריכה לעבור דחיסה ולהישמר בגודל שמתאים למקום שלה בעמוד. תמונה של 3 או 4 מגה בראש העמוד היא הסיבה הנפוצה ביותר לאתר איטי. ברוב המקרים אפשר להוריד אותה מתחת ל 200 קילובייט בפורמט WebP בלי שאף אחד יראה הבדל. גוגל מודדת את זה במדדי Core Web Vitals: לפי ההגדרות של גוגל התוכן הגדול במסך צריך להופיע תוך 2.5 שניות, התגובה ללחיצה צריכה להגיע תוך 200 אלפיות שנייה והעמוד לא אמור לקפוץ בזמן הטעינה. בדיקה מהירה ב PageSpeed Insights מראה איפה האתר עומד. לכל תמונה כותבים גם טקסט חלופי שמתאר אותה, בשביל גולשים עם קורא מסך ובשביל גוגל. איך מודדים את מהירות האתר ומה עוד מאט אותו מוסבר במדריך על שיפור מהירות אתר.

ניווט ועקביות בין העמודים

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

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

תבנית מוכנה או עיצוב אישי

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

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

עיצוב לפי סוג העסק: מה משתנה

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

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

טרנדים בעיצוב אתרים: מה שווה לאמץ ומה לדלג

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

מה שבדרך כלל כן מתאים:

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

מה שעדיף לדלג עליו ברוב העסקים הקטנים:

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

איך משתמשים בהשראה לעיצוב אתרים בלי להעתיק

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

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

עיצוב ו SEO

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

בדיקה עם משתמשים אמיתיים

לפני השקה כדאי לתת ל 5 אנשים מחוץ לעסק משימה פשוטה בטלפון שלהם. לא לבני משפחה. המשימה: למצוא כמה עולה שירות מסוים ולשלוח פנייה. Jakob Nielsen מ Nielsen Norman Group הראה שחמישה משתמשים בבדיקה כזו מוצאים את רוב הבעיות הבולטות. מסתכלים איפה הם נתקעים ולא שואלים אם האתר יפה.

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

איך יודעים אם העיצוב עובד אחרי ההשקה

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

תהליך עיצוב אתר: השלבים ומה מאשרים בכל שלב

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

1. שיחת היכרות ואפיון: מה העסק מוכר, למי, מה הפעולה שהגולש צריך לעשות ומאיפה הוא מגיע. בסוף השלב יש מפת אתר ומסר מרכזי לכל עמוד.
2. תוכן: טקסטים, תמונות, המלצות של לקוחות ומחירים. עדיף שהתוכן יהיה מוכן לפני העיצוב, או לפחות טיוטה שלו.
3. סקיצה של המבנה: חלוקה של העמוד לאזורים בלי צבעים ובלי תמונות, כדי להחליט על הסדר לפני שמתווכחים על הגוונים.
4. עיצוב עמוד הבית ועמוד פנימי אחד: בדרך כלל ב Figma, קודם בנייד ואז במחשב. זה השלב שבו נקבעים הפונטים, הצבעים וצורת הכפתורים.
5. אישור ותיקונים: סבב אחד או שניים. הערות מרוכזות במסמך אחד עובדות טוב יותר מהודעות פזורות בוואטסאפ.
6. עיצוב שאר העמודים ופיתוח: לפי המערכת שנקבעה בעמודים הראשונים.
7. בדיקה על אתר זמני: בטלפונים שונים, בדפדפנים שונים ועם אנשים מחוץ לעסק, לפני שהאתר עולה לכתובת האמיתית.

כמה עולה עיצוב אתר לעסק קטן וכמה זמן זה לוקח

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

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

איך בוחרים מעצב אתרים לעסק קטן

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

עוד שאלות לשאול ספק לפני שחותמים מופיעות בפוסט על בחירת חברת בניית אתרים.

איך אני מעצב אתר לעסק

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

שאלות נפוצות

יש לכם שאלה אחרת? שאלו אותי בוואטסאפ