Wireframe - שרטוט סטטי של מסך אחד. תיבות, טקסט בסיסי, כפתורים. לא צבעים, לא עיצוב גרפי. המטרה - להגדיר מבנה והיררכיה. דוגמה - דף נחיתה למוצר חדש, מצויר על דף A4. Prototype - סדרה של wireframes שאפשר לעבור ביניהם בלחיצה. מדמה את חוויית המשתמש. דוגמה - 7 מסכים ב-PowerPoint עם links ביניהם. סדר השימוש - קודם wireframes (1-2 שעות), אחר כך prototype אם צריך (2-4 שעות), רק אחרי שניהם - פיתוח. בעסק קטן רוב הזמן wireframes לבד מספיקים.

1) דף A4, סקיצה של 6 ריבועים (3x2) - כל ריבוע מסך. 2) ריבוע 1 - מסך כניסה. רשום ב-3 שורות מה הלקוח רואה. כותרת + 2 שורות הסבר + כפתור CTA. 3) ריבוע 2 - מסך ראשי (אחרי לחיצה על CTA). 5-7 אלמנטים, ממוקדים. 4) ריבוע 3 - פעולה ראשונה. 5) ריבוע 4 - תוצאה / קבלת ערך. 6) ריבוע 5 - מסך מעקב (אופציונלי). 7) ריבוע 6 - יציאה / Re-engage. סך הכל 30 דקות לסקיצה ראשונה. הראה ל-3 לקוחות פוטנציאליים. שאל - 'אתה מבין מה זה?' 'איפה היית לוחץ?'. תאזן את ה-wireframe לפי תשובות. תוך 2-3 איטרציות (כל אחת 30 דקות) יש לך wireframe מוכן.

יועצת אסתטיקה ברמת השרון רצתה לפתח אפליקציה לניהול לקוחות. במקום לפנות למעצב (הצעות 18-30K), בנתה wireframes על 4 דפי A4. מסך 1 - כניסה (שם לקוח + תאריך טיפול). מסך 2 - היסטוריה (5 טיפולים אחרונים). מסך 3 - הזמנת טיפול הבא. מסך 4 - תזכורות. הראתה ל-5 לקוחות. 3 מתוך 5 לא הבינו את מסך 3 - יותר מדי שדות. שינתה ל-2 שדות בלבד. הראתה שוב - 5 מתוך 5 הבינו. שלחה את ה-wireframes למפתח עם הוראות ברורות. עלות פיתוח ירדה מ-25K ל-9K (לא צריך עיצוב, רק קוד). חיסכון - 16K. בנוסף, נמנעה משכתוב אחרי השקה כי הבעיות נמצאו בשלב ה-wireframes.

טעות 1 - לדלג על השלב הזה. בעלי עסק נלהבים אומרים 'אני יודע מה אני רוצה' וקופצים לפיתוח. בלי wireframes, רוב הזמן יוצא משהו שצריך לשכתב. טעות 2 - להפוך wireframe למוקאפ עיצובי. wireframe זה לא ערב גלריה. תשאיר אותו פשוט - תיבות, מילים, כפתורים. אם אתה משקיע יותר מ-30 דקות על wireframe אחד - אתה מעצב, לא משרטט. טעות 3 - לא להראות ל-3+ לקוחות. wireframe ב-vacuum לא שווה. ההצלחה היא בקבלת משוב אמיתי לפני שמשקיעים בפיתוח. הראה לפחות ל-3 לקוחות פוטנציאליים, ושאל שאלות פתוחות - 'מה אתה מבין?' לא 'האם זה ברור?'.