🧠 התשובה המלאה
Wireframe הוא תרשים ויזואלי המתאר את המבנה של האתר/אפליקציה בשלב מאוד ראשוני. במילים אחרות, Wireframe הוא סוג של סקיצה הנותנת מבט-על על האופן בו האתר/אפליקציה יראו בעתיד - הן מבחינת מבנה, ממשק משתמש (UI) מעברים בין המסכים השונים וכדומה. מאחר שה-Wireframe בד״כ מייצג קונספט מאוד ראשוני של המוצר - כל העיצוב הוא נורא מינימלי ובד״כ לא יכלול דברים כמו צבעים, גרפיקות וכו׳. בסופו של יום, ה-Wireframe ״יומר״ לעיצוב סופי של האפליקציה (מה שנקרא גם Mockup).
עבודה עם Wireframes היא פרקטיקה מאוד נפוצה בקרב חברות וסטארט-אפים, בפרט אצל מעצבי חווית משתמש (UX). הוא מאפשר לכל המעורבים להסכים על הבסיס לעיצוב הראשוני של האתר/אפליקציה לפני שמתקדמים לעיצוב מוגמר יותר (המוקאפ), וכמובן בהמשך להמשך תהליך פיתוח אצל המתכנתים.
אפשר ליצור Wireframes באמצעות דף ועט (כמו פעם), או באמצעות כלים דיגיטלים (פוטושופ וכדומה) - תלוי לאיזו רמת פרטים תרצו לרדת.
מה כלול ב-Wireframe?
אז האמת שזה תלוי בכם (או במי שמכין לכם את zv) לאיזו רזולוציה תרצו לרדת וכמה ומה תרצו להכניס בשלב זה. אבל בד״כ אלה הדברים שיכללו:
1. מבנה ותוכן: סקיצה ראשונית של הממשק הגרפי (ה-UI: מסכים, כפתורים, טקסטים וכו׳), כיצד המידע יהיה מסודר ומוצג וכדומה.
2. פונקצינאליות: איזה יכולות ופיצ׳רים יהיו בכל מסך, כיצד כל דבר יתנהג בהתאם לאינטרקציות של המתשמש ובאופן כללי חווית המשתמש (ה-UX) יתנהל.
מתי תהליך יצירת ה-Wireframe מתקיים?
השימוש ב-Wireframe נעשה בד״כ ממש בתחילת עבודת העיצוב והפיתוח של מוצר חדש (אתר, אפליקציה או אפילו מוצר פיזי). בשלב זה, הנעשה בדרך כלל ע״י המעצב או המנהל המוצר, מנסים להפוך את מה שהיה עד עכשיו ״רק רעיון״ מילולי, למשהו יותר ויזואלי - ברמת הסקיצה.
Wireframe הוא בד״כ איטרציה ראשונה ומאוד מינימלית שנועדה על מנת לייצג את הקונספט של המוצר - מבנה, מסכים, חווית משתמש ועוד. לאחר הסכמה בין כל הצדדים המעורבים, יכולים המעצבים להמשיך לעיצוב יותר מפורט של המסכים (Mockups) ובסופו של יום ליצירת הגרסא הראשונה של האפליקציה (POC או MVP).
מה המטרה של Wireframe בכלל?
שאלה טובה! תרשימי Wireframes משמשים בעיקר לשלוש מטרות: יצירת קונספט של המוצר, אפיון ויזואלי ראשוני וכמו כן דרך מהירה וזולה לעשות שינויים וטעויות לפני שממשיכים הלאה (לעיצוב סופי ופיתוח).
💡 ״מרעיון למוצר״
Wireframes הם הדרך שלכם (או של המעצבים) להפוך את הרעיון שישב לכם לראש ואחר כך כתבתם במילים במחברת, למשהו ויזואלי שאפשר לראות ולדבר עליו בצורה מוחשית. ה-Wireframe משמש כדרך נהדרת להתחיל לקבל פידבק קונקרטי על מה שעתיד להיות המוצר המוגמר וכמובן לנהל שיחה יותר פרודקטיבית עם כל המעורבים בצוות. המסקנות והפידבקים שתאספו ממשתמשים עתידיים ושאר המעורבים בפרויקט, יעזרו לכם (ולמעצבים) לייצר גרסא יותר ״נכונה״ ואינטאוטיבית של המוצר הסופי.
🎨 Wireframe אחד שווה אלף מילים
אפשר להתקשקש המון על איך האפיקציה או האתר שלכם יראה במילים, ויכול להיות שאתם, המעצב, המתכנתים או כל אדם אחר שמעורב בפרויקט, מדמיין את הדברים בצורה שונה. אז במקום לדמיין, Wireframes יעזרו לכם להמחיש את הדברים בצורה יותר ויזואלית - החל מאיזה מסכים, מה הפיצ׳רים שיהיו ובכלל איך כל הדבר הזה שאתם יוצרים ״ינגן״ ביחד.
💰דרך זולה ליצור ולעשות שינויים
החלק הכי טוב ב- Wireframes? שבאופן יחסי מאוד קל וזול להכין כאלה. למעשה, אם תקחו עכשיו עט ודף נייר תוכלו להכין Wireframe ראשוני של האפליקציה שלכם מבלי להוציא שקל. כמובן שאם תרצו תוכלו גם להשתמש בכלים שיעזרו לכם ליצור Wireframe דיגיטליים (על זה בהמשך).
בשלב מאוד ראשוני של יצירת המוצר שלנו כשאנחנו לא בטוחים בנוגע לדברים עד הסוף, זה הכרחי שנוכל לעשות שינויים מהר ובזול. נבונים ככל שנהיה, לא תמיד אנחנו קולעים בפעם הראשונה. מסך שחשבנו שכדאי שיראה בצורה מסוימת היום יכול לקבל תמונה אחרת לאחר שנתייעץ עם אדם חיצוני בנוגע אליו (או סתם נישן על זה לילה ונשנה את דעתנו). היכולת לזוז מהר ולשבור דברים לפני שאנחנו מתקדמים הלאה (לעיצוב סופי ופיתוח בקוד) היא קריטית - כי שינויים בשלבים מתקדמים יותר יעלו יותר (הן בזמן והן בכסף).
סוגים ודוגמאות ל-Wireframes
רמה ״ההשקעה״ והירידה לפרטים ב-Wireframes שלכם תלויה ברצונות שלכם. אפשר לעשות סקיצות בדף ועט מאוד מופשטות, ואפשר לעשות עיצובים יותר מפורטים ודיגיטליים.
יש כאלה שיתחילו מה-Wireframe הכי פשוט ולאחר מכן התקדמו שלב ל-Wireframe יותר מפורט כשיותר ברור הכיוון וככה עד לתוצר הסופי. יש כאלה שיתחילו ישר מעיצוב של Wireframe מדויק לפרטי פרטים (טקסטים, מיקומים של דברים וכו׳). אין נכון לא נכון פה, לכל ״רמת השקעה״ יש יתרונות וחסרונות כפי שמפורט להלן:
Low-fidelity Wireframes
מדובר בסקיצות מאוד מאוד פשוטות ומופשטות של העיצוב אשר בד״כ משמשות כנקודת פתיחה להמשך. מאחר והם עיצוב ראשוני נורא גס, הן לא מייחסות משמעות לרזולוציה, פיקסלים, טקסטים וכותרות אמיתיים - או במילים אחרות - הם משהו עקום ולא מדויק עדיין.
Wireframes פשוטים כאלה משמשים בעיקר על מנת להתחיל שיח ראשוני בנוגע למבנה ואידאלים בעיקר לשלב הסיעור המוחות הראשוני - אותו שלב שאתם ממש מוציאים לדף את מה שיש לכם בראש.
Mid-fidelity Wireframes
בד״כ ה-Wireframe הפופולרי ביותר מבין השלושה כאן, מאחר מהם איזון בין משהו שהוא לא סופר מושקע מצד אחד (אבל לא עקום לגמרי) אבל גם לא לוקח הרבה זמן להכין אותו.
המטרה ב-Wireframe כזה היא לתת המחשה ויזואלית יותר מדויקת מבחינת המבנה והטקסט שיופיע בכל מסך אך מבלי להכנס לפרטי העיצוב עצמם, מה שלוקח יותר זמן לעשות.
High-fidelity Wireframes
ולבסוף, עיצוב Wireframe ברמה גבוהה ומושקעת שהוא יותר ״פיקסל פרפקט״. Wireframe שכזה בד״כ יתן תחושה הרבה יותר קרובה לאופן שבו העיצוב הסופי יראה - הן מבחינת האופן שבו דברים יראו, תפריטי ניווט, הטיפוגרפיה והאופן שבו הטקסטים יראו, והמעברים בין כל המסכים.
החיסרון הוא כמובן שלוקח יותר זמן להכין אותם מאחר והם מדויקים יותר, לכן כדאי ״לשמור״ את היצירה שלהם לשלב יותר מאוחר בהם יש הסכמה יותר ברורה של מה צריך להיות בכל מסך ומסך.
כלים ליצירת Wireframes
אז אחרי שהבנו מה זה Wireframe, למה הוא חשוב ועל הסוגים השונים של תרשימים כאלה - איך בידיוק יוצרים Wireframe?
אז אופציה ראשונה, היא כמובן להעזר בגורמי מקצוע - מעצבים וגרפיקאים שזו העבודה שלהם. אתם יכולים להעזר בלוח נותני השירות ל שלנו לסטארט-אפים על מנת למצוא מישהו שיעזור לכם.
אופציה שנייה - לעשות זאת בעצמכם! במיוחד עבור ה-Wireframes הפשוטים אפשר להתחיל את העבודה בעצמינו באמצעות כלים שיעזרו לנו:
1. עיפרון ודף נייר- כן, זה ״האוביוס״, אבל בהחלט הדרך הכי טובה להתניע את תהליך הסקיצה שלכם.
2.כלים דיגיטלים - קיימים מספר לא מבוטל של כלים ושירותים שנוצרו בשביל סיבה זו בלבד - ליצור Wireframes. כמו כן, כל כלי עיצוב גרפי שמאפשר ליצור צורות (ריבועים, עיגולים, חצים וכו׳) בצורה פשוטה עשוי לעשות את העבודה.
הנה כמה כלים פופולריים:
- Balsamiq - כלי ליצירת מוקאפים ו-Wireframes.
- Sketch - כלי לעיצוב אינטואיטיבי ופשוט מאוד. מאפשר גם ליצור עיצובים מורכבים יותר.
- Photoshop - הכלי הפופולרי לעיצוב תמונות. אם אתם מכירים ומרגישים בנוח להשתמש, למה לא.
