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

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

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

את היתרונות של פיירוורקס הזכרתי בפוסט אחר, אז בואו נתחיל לעבוד:

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

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

קליק ימני בחלונית Pages על העמוד שלנו, במקרה זה העמוד מכיל את אובייקט ה-Header שיצרתי קודם ואת הרקע האפור, ובחירה Set As Master Page.

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

תזכרו את זה ככה, לכל עמוד (Pages) יכולים להיות מספר מצבים (States).

אח"כ ניצור את מסך ההתחברות.

נוכל להגדיר סגנונות לכל דבר, למשל לפונט שבתוך תיבות הטקסט, לכפתורים וכו'...

נוכל להוסיף מצב לחיצה לכפתור, נשכפל בחלונית States את השכבה ונשנה מעט את הכפתור כדי שיראה כאילו לחוץ.

נמשיך ליצור את כל המסכים שנרצה, אני יצרתי רק עוד 3:

home, gallery ו-about ונתתי להם שמות (חשוב מאוד לתת שמות כדי ליצור קישורים) בחלונית ה-Pages.

עכשיו לשלב האינטראקטיבי, ניצור מעל לכל אובייקט שנרצה אזור לחיץ, בעזרת כלי ה-Slice.

ובחלונית המאפיינים למטה נגדיר מה יהיה הלינק בלחיצה (שימו לב שכל עמוד מקבל את השם שנתנו לו קודם בחלונית Pages).

עכשיו לשלב היצוא.
אנחנו מיצאים את כל העמודים שלנו לקבצי HTML עם חיתוכי תמונות, נלך בתפריט ל-File > Export ונבחר את ההגדרות הבאות:

אח"כ נפעיל את קובץ ה-splash.html שלנו כי הוא המסך הראשון ונוכל לראות איך הכל פועל.

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