מקרה בוחן · UX/UI ופיתוח מוצר
Helpers
פלאגין לאילוסטרייטור ולאפטר אפקטס, שחושף את המבנה שמאחורי כל לוגו ומעביר אותו לתנועה
מעצבי לוגו יודעים שהגריד הוא חלק מהסיפור – אבל לבנות דיאגרמת בנייה ידנית לוקח שעות, ולהעביר אותה לאנימציה לוקח עוד יותר. Helpers הוא תוסף ל-Adobe Illustrator ול-After Effects שאיפיינתי, עיצבתי ופיתחתי מאפס: לוחצים, והמבנה הגאומטרי של הלוגו מופיע – נקודות עיגון, ידיות, קווי גריד, מרחב מוגן וגרידי בסיס – ומשם הכל עובר בהדבקה אחת לאפטר אפקטס, כשכבות מוכנות להנפשה.
UX/UI ופיתוח מוצר
2026
Illustrator + After Effects
האתגר
שעות של עבודה ידנית בשביל שקף אחד במצגת
כשמציגים לוגו ללקוח, דיאגרמת בנייה מראה שכל קו נמצא במקומו בכוונה. אבל להוציא אותה באילוסטרייטור פירושו לסמן נקודות עיגון אחת-אחת, לשרטט ידיות, למתוח קווי עזר ולחשב מרחב מוגן – עבודה שחוזרת על עצמה בכל פרויקט.
המטרה הייתה להפוך את כל זה לפעולה של שניות, בתוך הכלי שהמעצבים כבר עובדים בו – ובלי לגעת בקובץ העבודה עצמו.
חוויית המשתמש
פאנל קטן, שלוש לשוניות, אפס עקומת למידה
הפאנל חי בתוך אילוסטרייטור, ברוחב של 237 פיקסלים בלבד – אז כל פיקסל נחשב. חילקתי את הכלים לשלוש לשוניות לפי המשימה: Logo Grid, Clearspace ו-Base Grid. בתוך כל לשונית ההגדרות מקופלות לכרטיסי אקורדיון, כך שרואים רק את מה שצריך עכשיו.
בתחתית יש שני כפתורים קבועים – Generate ו-Clean – וזה כל מה שצריך לזכור. כל מה שהפלאגין יוצר נבנה בשכבה נפרדת משלו, כך שהלוגו המקורי לא נפגע ואפשר לנקות הכול בלחיצה. העיצוב תואם את המראה הבהיר והכהה של אילוסטרייטור, כדי שהפאנל ירגיש חלק מהתוכנה.
01 · Logo Grid
המבנה הנסתר של הלוגו – אוטומטית
בוחרים את הלוגו, והפלאגין מחלץ את נקודות העיגון ואת ידיות הבזייה, משרטט קו מתאר ומוסיף קווי גריד ישרים, אלכסוניים או מעגליים. אפשר לשלוט בגודל, בעובי הקו ובצורה של כל סימון, ולבחור בין גריד מעגלי פשוט למורכב.
02 · Clearspace
מרחב מוגן שמחושב לבד
בוחרים אובייקט ייחוס – למשל אות מתוך הלוגו – והפלאגין בונה סביב הלוגו את המרחב המוגן ב-25%, 50% או 100% מהגודל שלו. חלונית מצב קטנה מראה בכל רגע מה נבחר ומה הגודל, כדי שלא יהיו הפתעות.
03 · Base Grid
גריד בסיס להתחלה נכונה
ארבעה גרידים לבניית לוגו מאפס: ריבועי, איזומטרי, משושה ויחס הזהב. קובעים גודל משבצת ועובי קו, ואפשר להצמיד את הגריד לגבולות הבחירה במקום לכל משטח העבודה.
04 · After Effects
גשר בין אילוסטרייטור לאפטר אפקטס
עושים Copy ללוגו באילוסטרייטור, ובפאנל של אפטר אפקטס לוחצים Paste. כל אובייקט נוחת כשכבת Shape נפרדת עם הנתיבים, הצבעים והקווים המקוריים, נקודת עיגון ממורכזת ומיקום זהה למשטח העבודה – ואפשר להתחיל להנפיש מיד, בלי לייצא קבצים ובלי לפרק שכבות ידנית.
התהליך
מאפיון ועד מוצר שנמכר
01 · אפיון – מיפיתי את התהליך הידני של בניית דיאגרמת לוגו, והגדרתי אילו חלקים בו אפשר להפוך לאוטומטיים ואיפה המעצב צריך לשמור על שליטה.
02 · עיצוב – עיצבתי את הפאנל ב-Figma: מבנה הלשוניות, כרטיסי האקורדיון, האייקונים ומצבי הממשק, ובדקתי אותו מול הממשק של אילוסטרייטור בבהיר ובכהה.
03 · פיתוח – בניתי את הפלאגין בטכנולוגיית CEP של Adobe: הממשק ב-HTML, CSS ו-JavaScript, והחישובים הגאומטריים רצים בתוך אילוסטרייטור. את הקוד כתבתי בעזרת Cursor ו-ChatGPT, וניהלתי גרסאות ב-Git וב-GitHub.
04 · השקה – רישוי עם מפתח אישי, בדיקת עדכונים מתוך הפאנל ואתר מוצר עם מדריך התקנה. הפלאגין עובד על macOS ו-Windows, באילוסטרייטור 2019 עד 2026.
מסך ההגדרות וחלון הפעלת הרישיון. גם החלקים הטכניים קיבלו את אותה שפה: כהה, שקט, כפתור פעולה אחד ברור.
כלים
במה השתמשתי
Figma
Adobe Illustrator
ChatGPT
Cursor
Git
GitHub
התוצאה
דיאגרמת לוגו מקצועית – בשניות
מה שלקח שעות של עבודה ידנית קורה עכשיו בלחיצה אחת. Helpers נמכר ברישיון לכל החיים – למעצבים עצמאיים, לצוותים ולסטודיואים.
לאתר המוצר ←הפרויקט הבא