# אפיון ועיצוב UI/UX

> אפיון ועיצוב UI/UX עם אוברסייט לאתרים, חנויות, אפליקציות ומערכות. מסעות משתמש, Wireframes, עיצוב מסכים, Design System ו-Prototype לפיתוח.

העמוד המלא: https://oversight.co.il/solutions/ui-ux

## בקצרה

לפני שכותבים קוד, יודעים איך החוויה עובדת.

אפיון ועיצוב UI/UX שמחברים בין מטרות העסק לפעולות על המסך. מאתרים וחנויות ועד אפליקציות ומערכות מורכבות, עם מסעות משתמש, מסכים מעוצבים ו-Prototype שאפשר לבחון לפני הפיתוח.

- מסעות משתמש
- עיצוב מסכים
- Prototype

## הפירוט

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

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

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

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

## מה כלול

- **מטרות ומסעות משתמש**: מיפוי קהלים, פעולות ותהליכים, עם ארכיטקטורת מידע שמארגנת את הדרך במוצר.
- **Wireframes**: שלד מסכים שמגדיר היררכיה, תוכן ופעולות לפני שנכנסים לפרטים החזותיים.
- **עיצוב ממשקים**: מסכים מפורטים לאתרים, חנויות, אפליקציות ומערכות מורכבות, עם התאמה לשפת המותג.
- **מובייל ומצבי מסך**: התאמות לגדלי מסך ולתרחישים שנבחרו, כולל מצבי ריק, שגיאה ואינטראקציה לפי האפיון.
- **Design System**: רכיבים, כללי שימוש ושפה עקבית שאפשר להרחיב ולהעביר לפיתוח.
- **Prototype ומסירה לפיתוח**: רצף מסכים אינטראקטיבי לבחינה, לצד קבצי עיצוב והנחיות שמסבירים את ההתנהגות המתוכננת.

## היתרונות

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

## התהליך

1. **ממפים מטרות ומשתמשים**: מכירים את העסק ואת הפעולות שהמוצר צריך לאפשר, ומגדירים את המשתמשים וההקשרים.
2. **בונים מסעות ושלד מסכים**: מארגנים את המידע, התהליכים והניווט, ומציגים Wireframes לבחינת המבנה וההיררכיה.
3. **מעצבים חוויה עקבית**: מפתחים את השפה החזותית על בסיס המיתוג, עם רכיבים, התאמות למובייל ומצבי מסך שנבחרו.
4. **מחברים ל-Prototype**: בונים רצף אינטראקטיבי שממחיש פעולות ומעברים, ובוחנים אותו מול מטרות האפיון.
5. **מכינים מסירה לפיתוח**: מרכזים מסכים, רכיבים והנחיות התנהגות, כדי שצוות הפיתוח יוכל להמשיך מתוך תכנון ברור.

## שאלות ותשובות

### מה ההבדל בין UX ל-UI?

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

### האם אפשר לעצב מערכת קיימת?

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

### האם מקבלים Prototype?

כן, בהתאם לרצפים ולהיקף שנקבעו. הוא ממחיש פעולות ומעברים, אך אינו מוצר מפותח או מערכת עם מידע חי.

### מה מועבר לצוות הפיתוח?

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

### האם מחקר משתמשים ופיתוח כלולים?

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

## פרויקטים

- [Save](https://oversight.co.il/projects/save.md)
- [StritSho](https://oversight.co.il/projects/stritsho.md): StritSho
- [Footballer](https://oversight.co.il/projects/footballer.md): Footballer
- [ליאל אלי](https://oversight.co.il/projects/lieleli.md): ליאל אלי
- [Hybrid Israel](https://oversight.co.il/projects/hybrid-israel.md): Hybrid Israel
- [Harmony](https://oversight.co.il/projects/by-harmony.md): Harmony
- [הקוביה משחקים בע"מ](https://oversight.co.il/projects/hakubia.md): הקוביה משחקים בע"מ
- [Multi Store](https://oversight.co.il/projects/multistore.md): Multi Store
- [פנטזי תכשיטים מעוצבים](https://oversight.co.il/projects/fantasyjewelry.md): פנטזי תכשיטים מעוצבים
- [ITC](https://oversight.co.il/projects/israelinternet.md): ITC
- [Electro Click](https://oversight.co.il/projects/electro-click.md): Electro Click
- [טבע אור-ליין](https://oversight.co.il/projects/tevaor-line.md): טבע אור-ליין
- [יריד ביתר](https://oversight.co.il/projects/yarid-b.md): יריד ביתר
- [Nano](https://oversight.co.il/projects/nano.md): Nano
- [תקוה טובה](https://oversight.co.il/projects/tikvatovah.md)
- [אבן ישראל](https://oversight.co.il/projects/even-israel.md)
- [אהבה בלב](https://oversight.co.il/projects/ahava-balev.md)
- [Commiz](https://oversight.co.il/projects/commiz.md): Commiz
- [Stay](https://oversight.co.il/projects/stay.md): Stay
- [FlySure](https://oversight.co.il/projects/flysure.md): FlySure
- [AskU](https://oversight.co.il/projects/asku.md): AskU
- [Anime Fantasy](https://oversight.co.il/projects/animefantasy.md): Anime Fantasy
- [PYN](https://oversight.co.il/projects/pyn.md): PYN
- [LoL Weekly](https://oversight.co.il/projects/lol-weekly.md): LoL Weekly
- [Plan Fin](https://oversight.co.il/projects/plan-fin.md): Plan Fin
- [יערית פרויקטים](https://oversight.co.il/projects/yaaritprojects.md): יערית פרויקטים
- [עו"ד אנג'לה סדוי](https://oversight.co.il/projects/angela-sadovi.md): עו"ד אנג'לה סדוי
- [CheckBDI](https://oversight.co.il/projects/checkbdi.md): CheckBDI
- [אפסילון יזמות](https://oversight.co.il/projects/epsilonltd.md): אפסילון יזמות
- [Golden Ox](https://oversight.co.il/projects/golden-ox.md): Golden Ox
- [עו"ד בת-אל חיים יואל](https://oversight.co.il/projects/haimyoel.md): עו"ד בת-אל חיים יואל
- [קופרברג עזרא](https://oversight.co.il/projects/kuperberg.md): קופרברג עזרא
- [Li-mood](https://oversight.co.il/projects/li-mood.md): Li-mood
- [מקסים אוקנין ייעוץ אסטרטגי](https://oversight.co.il/projects/metoog.md): מקסים אוקנין ייעוץ אסטרטגי
- [רוני סקה](https://oversight.co.il/projects/ronisaka.md): רוני סקה
- [עו"ד איילה תל-פז](https://oversight.co.il/projects/telpaz-law.md): עו"ד איילה תל-פז
- [TH Group](https://oversight.co.il/projects/thg.md): TH Group
- [מאסטר ספירולינה](https://oversight.co.il/projects/master-spirulina.md): מאסטר ספירולינה
- [תוסס דוכני מזון](https://oversight.co.il/projects/tosess.md): תוסס דוכני מזון
- [SAG Strategy](https://oversight.co.il/projects/sag-strategy.md): SAG Strategy
- [ג'ורג' אחזקות](https://oversight.co.il/projects/george.md): ג'ורג' אחזקות
- [עין דור שערים](https://oversight.co.il/projects/ein-dor-shaarim.md): עין דור שערים
- [ביו קרדיט](https://oversight.co.il/projects/biocredit.md): ביו קרדיט
- [Nanocom](https://oversight.co.il/projects/nanocom.md): Nanocom

## פתרונות משלימים

- [בניית אתרים](https://oversight.co.il/solutions/websites.md)
- [פיתוח אפליקציות](https://oversight.co.il/solutions/mobile-apps.md)
- [פיתוח מערכות ואפליקציות Web](https://oversight.co.il/solutions/web-systems.md)
- [מיתוג עסקי](https://oversight.co.il/solutions/branding.md)

## מידע מקצועי

- [מסמך אפיון שחוסך שלושה חודשי פיתוח: מה חייב להופיע בו](https://oversight.co.il/knowledge/guides/characterization-doc-guide.md): שבעה פרקים שהופכים אפיון מרשימת משאלות לתוכנית עבודה, כולל מה שמותר להשאיר פתוח בכוונה.

## טכנולוגיות

- Webflow
- React
- Next.js