אתר שנראה טוב ולא מייצר פניות נכשל כמעט תמיד בשלב שקודם לעיצוב: התכנון. שני מסמכים קובעים אם האתר יעבוד. מפת אתר היא מסמך ויזואלי שמציג את כל הדפים ואת הקשרים ביניהם, בדומה לתוכניות אדריכל לבית. סקיצה היא שלד של דף בודד, בלי עיצוב, שמראה היכן ימוקם כל אלמנט. שניהם נבנים לפני שנוגעים באלמנטור, וחוסכים סבבי תיקונים אינסופיים בהמשך. במאמר הזה תראו מה כולל כל אחד מהם, איך בונים אותם נכון, ואילו טעויות הורסות תכנון.
הטעות הנפוצה: "תבנו לי אתר" ופתיחת אלמנטור באותו יום
זו הסצנה הקלאסית: הצעת מחיר, מקדמה, ולמחרת מישהו כבר פותח אלמנטור ובונה "דף בית". הלקוח רואה התקדמות, הסטודיו רואה התקדמות, כולם מרוצים.
וזה בדיוק הרגע שבו הפרויקט מתחיל להיכשל.
למה? כי אף אחד עוד לא יודע מה האתר אמור להגיד, למי הוא מדבר, איך הקורא זורם בו ואילו דפים בכלל קיימים. בלי זה, מה שנבנה הוא ניחוש מקצועי. התוצאה מוכרת: גרסה ראשונה, "זה לא בדיוק זה", סבב תיקונים, עוד סבב, והלקוח מתפשר על אתר שהוא לא באמת רוצה.
בעולם התכנון מקובל כלל שנקרא 1-10-100: תיקון בעיה בשלב הסקיצה עולה 1, בשלב העיצוב 10, ואחרי שהאתר באוויר 100. שעה של מחשבה לפני הבנייה חוסכת עשרות שעות של תיקונים אחריה. בתהליך מקצועי, 30% עד 40% מזמן הפרויקט מוקדשים לתכנון, וזה בדיוק מה שמונע את הסבבים האינסופיים.
מה זה מפת אתר באמת
קודם הבהרה שמבלבלת הרבה בעלי עסקים: מפת אתר תכנונית היא לא קובץ sitemap.xml שגוגל קוראת.
- מפת אתר ויזואלית: מסמך תכנוני שמראה את כל הדפים, ההיררכיה ביניהם ומה מתחבר למה. נבנה לפני שהאתר קיים, ונועד לבני אדם.
- sitemap.xml: קובץ טכני שנוצר אוטומטית אחרי שהאתר עולה לאוויר, כדי שגוגל תדע אילו דפים לסרוק. נועד לרובוטים, ותוסף כמו Yoast מייצר אותו לבד.
מפת אתר טובה מציגה את הדפים במבנה היררכי, מסמנת כל דף לפי תפקידו, ראשי, משני, שיווקי או פנימי, ומראה בחצים מה מקושר למה. למשל, אתר תדמית לעורך דין:
- דף הבית
- אודות
- תחומי עיסוק, ומתחתיו: דיני משפחה, דיני עבודה, דיני מקרקעין
- בלוג
- צור קשר
מבנה פשוט: 8 דפים בשתי רמות. בלי מפה כזאת, חלק מהדפים פשוט הולכים לאיבוד ברגע שמתחילים לבנות.
6 שלבים בבניית מפת אתר מקצועית
- אפיון מטרות עסקיות. לידים, מכירות או תדמית? כל מטרה דורשת מבנה אחר.
- הבנת קהל היעד. מי הקורא, מה הוא מחפש, ובאיזה שלב בתהליך הקנייה הוא נמצא.
- רשימת תוכן גולמית. כל הנושאים שצריכים להיות באתר, בלי סדר ובלי היררכיה.
- ארגון היררכי. מה רמה ראשית, מה תת-נושא, מה דף נפרד ומה פסקה בתוך דף קיים.
- בנייה ויזואלית. מעבירים לכלי ויזואלי עם צבעים, חצים והיררכיה ברורה.
- אישור עם הלקוח. פגישה ייעודית שעוברת על הלוגיקה ומסתיימת באישור פורמלי.
השלב השישי הוא הקריטי ביותר, ורוב הסטודיואים מדלגים עליו. אצלי, בלי אישור על מפת האתר אין מעבר לשלב הבא.
סקיצה: השלב שכולם מדלגים עליו
אם מפת האתר היא תוכניות האדריכל, הסקיצה היא תוכניות החשמל והאינסטלציה של דף בודד. בעולם המקצועי קוראים לה Wireframe: ציור שחור-לבן בלי עיצוב ובלי תמונות, רק מלבנים שמסומנים "כותרת ראשית", "תיאור קצר", "כפתור פעולה".
דווקא הפשטות הזאת היא הכוח שלה. כשאין עיצוב, אי אפשר להתווכח על צבע הכפתור, והדיון נשאר במקום החשוב: האם הכותרת אומרת את מה שצריך? האם הקורא מבין מה לעשות בעמוד? חשוב להישאר ברמת השלד עד שהמבנה מאושר, כי ברגע שמופיעים צבעים ופונטים, הדיון בורח לעיצוב.
איך בונים סקיצה נכון
- בוחרים את הדפים הקריטיים. לא צריך סקיצה לכל דף: בית, דף שירות מייצג, דף מוצר אם זו חנות ויצירת קשר. השאר נגזר מהם.
- מגדירים את מטרת הדף. להזמין? להשאיר פרטים? לעבור לדף הבא? הסקיצה כולה משרתת את זה.
- מסדרים לפי חשיבות. מה מופיע במסך הראשון לפני שגוללים, מה שנקרא Above the Fold: ההצעה המרכזית, כפתור הפעולה, ואלמנט אמינות.
- מגדירים קריאה לפעולה ברורה. כל דף חייב לפחות כפתור פעולה אחד, במקום בולט ובגודל נכון.
- מתאמים עם מפת האתר. לאן הדף מוביל ומאיפה מגיעים אליו.
- מאשרים פורמלית. אישור בכתב על הסקיצות, ורק אז עוברים לעיצוב.
באילו כלים בונים
לא צריך תוכנה יקרה. Octopus.do הוא כלי ייעודי ופשוט למפות אתר, FigJam של Figma מציע לוח חינמי שמספיק לרוב הפרויקטים, ו-Whimsical ו-Miro טובים למי שכבר עובד איתם. גם גוגל שיטס הוא פתרון לגיטימי למפת אתר פשוטה: עמודה לדפים, עמודה להיררכיה. לסקיצות, Figma היא הסטנדרט המקובל בתעשייה, וההתחלה בה חינמית. ההמלצה שלי לבעלי עסקים שרוצים להיות שותפים בתכנון: FigJam למפה, Figma לסקיצות, ותוך שעה תופסים את העיקרון.
איך זה מתחבר לתהליך אחד
- מפת אתר ראשונית על בסיס בריף עם הלקוח.
- אישור ראשון. עוברים על המפה יחד ומתקנים לפני שממשיכים.
- סקיצות לדפים מרכזיים, 3 עד 5 דפים קריטיים.
- אישור שני על הסקיצות, גם הוא פורמלי.
- עיצוב. עכשיו, כשהמבנה סגור, העיצוב מתמקד בעיצוב ולא ב"איפה הכפתור".
- בנייה באלמנטור. הלקוח רואה משהו שהוא כבר אישר פעמיים, בלי הפתעות.
שני שלישים מהפרויקט הולכים על ארבעת השלבים הראשונים, והבנייה עצמה היא רק שליש. זו לא טעות. זה התהליך שעובד.
7 טעויות נפוצות בתכנון אתר
- דילוג על מפת אתר בכלל. מי שמתחיל בלי מפה, מסיים בבלגן.
- עומק יתר בהיררכיה. יותר מ-3 רמות תפריט מקשה גם על גוגל וגם על הקורא.
- סקיצה שכוללת כבר עיצוב. ברגע שיש צבעים, הדיון בורח מהמבנה לטעם אישי.
- ערבוב דרישות עסקיות עם תכנון חוויית משתמש. "הלוגו שלי בגדול" ו"שהגולש יבין תוך 5 שניות מה העסק עושה" הם שיקולים שונים, וערבוב שלהם פוגע בשניהם.
- התעלמות מהנייד בשלב התכנון. רוב הגלישה היום מגיעה מהנייד, ותכנון לדסקטופ בלבד בונה חצי אתר.
- תכנון בלי תוכן אמיתי. עם טקסט דמה הכל נראה מאוזן, וכשנכנס הטקסט האמיתי מתגלה שהכותרת לא נכנסת והפסקה ארוכה מדי. תכננו עם טקסטים אמיתיים, גם אם גסים.
- אי שיתוף הלקוח. הלקוח מכיר את העסק טוב מכל מעצב, ואתר שמתוכנן בלעדיו יוצא לא מדויק.
שאלות נפוצות
כמה זמן לוקח תכנון אתר מקצועי?
לאתר תדמית של 5 עד 10 דפים, בין שבועיים לשלושה שבועות. לחנות או אתר מורכב, 4 עד 6 שבועות. זה לא זמן מבוזבז: הוא חוסך כפול ומכופל בסבבי תיקונים בהמשך.
צריך מפת אתר גם לאתר של 5 דפים?
כן. גם בית של 60 מטר בנוי לפי תוכניות, לא רק וילה. מפה ל-5 דפים נבנית בשעה, ומונעת סבבים שלמים של תיקונים. ההיגיון לא משתנה לפי גודל, אלא לפי מטרה.
אפשר לדלג על סקיצה אם משתמשים בתבנית אלמנטור?
אפשר, אבל זו טעות. תבנית פותרת עיצוב, לא היגיון עסקי. עדיין צריך להחליט מה במסך הראשון, מה הקריאה לפעולה ואיך הקורא זורם בעמוד. סקיצה של רבע שעה חוסכת את ה"תבנית לא מתאימה לי, צריך לשנות הכל".
מה ההבדל בין Wireframe, Mockup ו-Prototype?
Wireframe הוא שלד בלי עיצוב, רק מיקום אלמנטים. Mockup הוא עיצוב שלם עם צבעים וטיפוגרפיה, אבל סטטי. Prototype הוא הדמיה אינטראקטיבית שאפשר ללחוץ עליה ולעבור בין דפים. רוב הפרויקטים לא צריכים Prototype, אלא אם מדובר באתר מורכב במיוחד או באפליקציה.
שורה תחתונה
ההבדל בין אתר שמייצר פניות לאתר שרק נראה טוב הוא כמעט תמיד במבנה, לא בעיצוב. מפת אתר וסקיצה הן ההשקעה הקטנה שקובעת אם האתר יידע מה הוא רוצה להגיד ולמי, עוד לפני שנפתח אלמנטור.
אם אתם לפני בניית אתר חדש ורוצים לתכנן אותו נכון, או שיש לכם אתר קיים שלא עובד ואתם חושדים שהבעיה בתכנון, ספרו לי על העסק ועל המטרה. השאירו פרטים ואחזור אליכם תוך 24 שעות.
