Wireframe (שלד עמוד, או "וויירפריים") הוא שרטוט פשוט של מבנה העמוד — אילו אזורים יש בו, באיזה סדר, ומה התוכן בכל אזור — בלי צבעים, בלי תמונות סופיות ובלי עיצוב. המטרה שלו היא להחליט על המבנה לפני שמשקיעים בעיצוב: קל ומהיר להזיז קופסה אפורה, ויקר מאוד לשנות עמוד מעוצב ובנוי.
איפה ה-Wireframe נמצא בתהליך
בפרויקט אתר, הסדר הוא בדרך כלל כזה:
- אפיון — מטרות, קהלים, מפת אתר ורשימת עמודים. פירטתי במדריך אפיון אתר.
- Wireframes — שלד לכל סוג עמוד: דף בית, עמוד שירות, מאמר, טופס.
- עיצוב (Mockup) — צבעים, טיפוגרפיה, תמונות, על בסיס השלד שאושר.
- אב-טיפוס — לפעמים, גרסה לחיצה שמדמה מעבר בין עמודים.
- פיתוח.
השלב הזה חוסך את הוויכוח הכי יקר בפרויקט: "בעצם רציתי שהשירותים יופיעו לפני הפרויקטים" — אחרי שהכול כבר מעוצב.
רמות נאמנות: Low-fi מול High-fi
| Low-fidelity | High-fidelity | |
|---|---|---|
| איך נראה | סקיצה על נייר או לוח, קופסאות וקווים | שלד מסודר בכלי כמו פיגמה, עם טקסטים אמיתיים |
| מטרה | לדבר על מבנה ורעיונות | להעביר מפרט מדויק לעיצוב ולפיתוח |
| זמן | דקות | שעות |
| מתי | בתחילת הדרך, בפגישה | אחרי שהכיוון סגור |
Nielsen Norman Group מתארים wireframes ככלי שמתאים במיוחד להצגת פריסה ותוכן של עמודים סטטיים יחסית — ופחות להצגת אינטראקציות מורכבות, שבשבילן יש כלים אחרים (כמו wireflows שמחברים בין מסכים).
מה צריך להופיע ב-Wireframe של עמוד
- היררכיה: מה הכותרת הראשית, מה הדבר הראשון שהגולש רואה בלי לגלול.
- אזורי תוכן בסדר שלהם: פתיח, יתרונות, תהליך, דוגמאות, שאלות נפוצות, קריאה לפעולה.
- טקסט אמיתי ככל האפשר. "לורם איפסום" מסתיר בעיות — כותרת אמיתית יכולה להיות ארוכה פי שלושה ממה שתוכנן.
- קריאות לפעולה: איפה הכפתורים, ומה כתוב עליהם.
- גרסת מובייל. הסדר בטלפון הוא לא תמיד הסדר בדסקטופ, ובאתרים רבים רוב הגולשים מגיעים מטלפון. ראו אתר רספונסיבי.
- רכיבים חוזרים: תפריט, פוטר, כרטיסים — מוגדרים פעם אחת.
Wireframe לפי סוג עמוד, לא לפי עמוד
באתר של עסק יש לרוב מעט סוגי עמודים ועשרות עמודים בפועל. לכן לא משרטטים כל עמוד, אלא כל תבנית: שלד לעמוד שירות משמש את כל עמודי השירות, שלד למאמר משמש את כל הבלוג. זה גם מה שמאפשר בניית תבנית ייעודית בוורדפרס, שבה כל עמוד מאותו סוג נראה אחיד ומשתנה ממקום אחד. באינדקסים ובפורטלים זה חשוב עוד יותר — שם יש אלפי עמודים מכמה תבניות בודדות, כמו שתיארתי במאמר איך בונים אינדקס עסקים.
טעויות נפוצות
- לקפוץ ישר לעיצוב. אז כל הערה על המבנה הופכת לעבודה מחדש על העיצוב.
- לעצב את ה-Wireframe. צבעים ותמונות בשלב הזה גורמים לדיון לגלוש ל"אני לא אוהב את הכחול" במקום "האם הסדר נכון".
- לשכוח מצבים. עמוד בלי תוצאות חיפוש, טופס עם שגיאה, כרטיס בלי תמונה — גם להם צריך שלד.
- לא לאשר. Wireframe שלא נסגר רשמית מפסיק להיות נקודת ייחוס.
איך עובדים עם הערות על Wireframe
הערך של השלב הזה הוא בדיון שהוא מאפשר. כדי שהדיון יהיה יעיל:
- מציגים מול מטרה. לכל עמוד מזכירים מה הוא אמור להשיג — פנייה, הרשמה, מעבר לעמוד שירות — ושואלים אם המבנה משרת את זה.
- מפרידים בין מבנה לסגנון. הערות על צבעים ותמונות נרשמות לשלב העיצוב, ולא פותחות מחדש את המבנה.
- מתעדים החלטות. "השירותים לפני הפרויקטים, כי רוב הגולשים מגיעים לחפש שירות" — כדי שבעוד חודש לא יתחיל אותו ויכוח מחדש.
- בודקים מול תוכן אמיתי. אם יש רק שלושה פרויקטים, אין טעם בשלד שמציג תשעה.
Wireframe לאתר מורכב
באתר תדמית יש כמה תבניות. בחנות, באינדקס או בפורטל — יש תבניות שמתנהגות אחרת לפי הנתונים: עמוד קטגוריה עם שלושה פריטים או עם שלוש מאות, כרטיס עסק עם תמונות או בלי, תוצאות סינון ריקות. כאן ה-Wireframe צריך להראות גם את הכללים: מה מוצג כשאין תמונה, איך נראה עימוד, מה קורה כשאין תוצאות. החלטות כאלה משפיעות ישירות על הקוד ועל הדרך שבה גוגל סורק את האתר — ראו עימוד וסינון באתרים גדולים.
שאלות נפוצות
באיזה כלי מכינים Wireframe?
אפשר בנייר ועט, ואפשר בכלים ייעודיים. בפרויקטים דיגיטליים רבים משתמשים בפיגמה, כי אותו קובץ ממשיך משם לעיצוב ולהעברה לפיתוח.
מה ההבדל בין Wireframe ל-Mockup?
Wireframe מראה מבנה ותוכן; Mockup מראה איך העמוד ייראה בפועל — צבעים, גופנים ותמונות.
האם אתר קטן צריך Wireframes?
כן, גם אם בפשטות. אפילו סקיצה של דף הבית ושל עמוד שירות אחד חוסכת שינויים יקרים בהמשך. דוגמה למבנה מומלץ: מבנה דף בית לאתר עסקי.
אצלי, מבנה העמודים נקבע לפני העיצוב — כחלק מהאפיון — כדי שהעיצוב והפיתוח ייבנו על בסיס מוסכם. אם אתם בתחילת הדרך, ראו בניית אתרים לעסקים, או ספרו לי על הפרויקט.
אהבתם את המאמר?
