אתרים שנראים
וואו. עם AI.

קול הזכויות: מוצר AI בשפה בהירה ורגועהAURUM & NOIR: אתר שעון כהה בגוני שחור וזהב

מה אפשר ליצור עם כלי AI ג׳נרטיביים
ואיך מגיעים לשם, מהכיוון ועד התוצאה

יובל יוסף
מה קובע את המראה

ארבעה אתרים. ארבע החלטות שונות.

קא־צ׳ינג: צבעוניות ואיור משחקיים
קא־צ׳ינגההחלטה: איור, לא צילום
לפני שכולם קמים: סיפור חזותי בעברית
לפני שכולם קמיםההחלטה: תמונה אחת מובילה
Munch & Move: ממשק רישום אימון
Munch & Moveההחלטה: קודם השימוש, אז הקישוט
אורן לוי: אתר שירות בשפה בהירה ומאופקת
אורן לויההחלטה: בהיר ושקט, בלי הפגנת כוח

המכנה המשותףלפני הבנייה הייתה החלטה ברורה על האופי.

יובל יוסף
מי אני
היי, נעים להכיר!
יובל
יוסף

מעצבת, בונה ומפתחת חוויות Web עם AI

UX/UIWeb DesignWeb DevelopmentGenerative AI
מתוך פרויקטים שלי
3D RefrigeratorTravel Web AppWatch Scroll
הדרך שלי

כל תחנה בדרך נתנה לי משהו אחר.

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

01 QA

לא להאמין למסך שאומר שהכול עובד.

לבדוק לפני שמאמיניםלחפש איפה זה נשבר
02 עיצוב

שיש הבדל בין יפה לבין נכון.

לראות מה עובד ולמהולא רק מה מוצא חן
03 מוצר

לשאול קודם מה האדם בא לעשות.

לפני שמחליטים איך זה ייראה
04 אתרים ללקוחות

שהאחריות היא על התוצאה, לא על החלק שלי.

מהיעד העסקי ועד הטופס שנשלח
הדרך

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

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

לראות מה אפשר.
להבין איך מתחילים.

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

יובל יוסף
מה ללמוד מכאן

עולם נוצר מהחלטה אחת שחוזרת בכל פרט

יובל יוסף
מה ללמוד מכאן

אפשר להגיע לרמה הזאת בלי שורת אנימציה אחת

יובל יוסף
רגע לקהל

איזה כיוון הייתם רוצים
לדעת ליצור?

עולם משחקימוצר יוקרתיטבע ואורתנועה וסיפור

מילה אחת בצ׳אט.

יובל יוסף
מזהים את הדפוסים

למה כל כך הרבה תוצרים נראים דומים?

הוא לא רע.
הוא פשוט יכול להיות של כל אחד.

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

  • אפשר להחליף את השםוהרעיון כמעט לא ישתנה.
  • אין מוקד אמיתיהכותרת, הכפתור והכרטיסים מבקשים אותו משקל.
  • אין סיבה לזכורהסגנון לא מספר שום דבר ספציפי על מי שבנה אותו.
WORK MANAGEMENT / 2026

העבודה שלכם,
במקום אחד.

פרויקטים, משימות ודוחות לצוותים שזזים מהר.

18משימות פתוחות04פרויקטים פעילים86%התקדמות החודש
מסך שנראה תקין. האם הוא כבר מספר סיפור של מוצר מסוים?
מה גורם למראה הגנרי

שלושה מקומות שבהם הכיוון הולך לאיבוד

01

הבקשה מתארת מוצר,
לא החלטה

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

02

הפלט הראשון
הופך לבסיס

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

03

כל חלק
נבנה בנפרד

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

אף אחד מהשלושה הוא לא באג בכלי.
בכל אחד מהם פשוט לא נלקחה החלטה.

התזה

AI גנרי הוא ברירת המחדל.
לא גזירת גורל.

הכלים כבר יודעים לבנות מהר.
הערך המקצועי עובר לשלוש החלטות:

  1. 01לבחור
  2. 02לכוון
  3. 03לשפוט ולשפר
התהליך

חמישה שלבים לאתר עם אופי

01 · כיוון ורפרנסיםמחליטים מה רוצים ליצור, ומוצאים דוגמאות שממחישות את זה.
02 · מערכת עיצובהופכים את הכיוון לחוקים שחוזרים בכל האתר.
03 · נכסים ותנועהיוצרים חומרי גלם ומתכננים איך החוויה מתנהגת.
04 · בנייהמחברים את ההחלטות לבקשת בנייה שאפשר לבצע.
05 · ליטושבודקים את התוצאה ומכוונים את הסבב הבא.
יובל יוסף
01 · כיוון ורפרנסים

מתחילים מכיוון.

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

אותו תוכן, עיצוב אחר

שלושתם אומרים בדיוק אותו דבר.

01 · מערכתי־סריפי

סטודיו לעבודה בקצב שלכם

הזמן שלכם, בקצב שלכם.

חדרים מעוצבים, הזמנה פשוטה וכל מה שצריך כדי לעבוד.

לקביעת זמן ←
02 · גריד מודרניסטי

סטודיו לעבודה בקצב שלכם

הזמן שלכם, בקצב שלכם.

חדרים מעוצבים, הזמנה פשוטה וכל מה שצריך כדי לעבוד.

לקביעת זמן ←
03 · אקספרסיבי

סטודיו לעבודה בקצב שלכם

הזמן שלכם, בקצב שלכם.

חדרים מעוצבים, הזמנה פשוטה וכל מה שצריך כדי לעבוד.

לקביעת זמן ←

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

01 · כיוון

לפני הפרומפט: מה רוצים שירגישו?

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

למי? אנשים שמחפשים ניחוח אישי.

מה מרגישים? חום, קרבה ואיפוק.

מה רואים קודם? בקבוק באור של סוף היום.

מה עושים? מגלים את הניחוח.

אפשר להיעזר ב־AI כדי להציע כיוונים.
אנחנו בוחרים איזה מהם מתאים.

הכיוון

אותה מטרה. בקשה עמומה מול כיוון ברור.

לאבקשה עמומה
״תבנה לי אתר יפה
למותג בושם.״

למה זה לא מספיק? המילה ״יפה״ לא מסבירה מה לראות, מה להרגיש או מה צריך להופיע במסך.

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

למה זה עובד? יש אווירה, מוקד, מיקום ופעולה. אלה החלטות שה־AI יכול להפוך למסך.

יובל יוסף
רפרנס לפני פרומפט

לא כדי להעתיק.
כדי להסביר כיוון.

01

רפרנס

אתר או תמונה שאהבתם, שמראים ל־AI.

←
02

החלטות

מוקד: מה העין תופסת ראשון.
ואז פונט, מרווח, צבע ותנועה.

←
03

הנחיה

בקשה שה־AI יכול לבצע ולבדוק.

רפרנסים

מחפשים רפרנס לחלק מסוים, לא לאתר שלם

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

חמש שאלות שמגלות למה העיצוב עובד

רפרנס חזותי מתוך אתר הבושם
יובל יוסף
חילוץ החלטות

איך הופכים רפרנס להנחיה שאפשר לבצע?

01 · רואים

הבקבוק תופס את רוב הפתיחה

זו העובדה שאפשר להצביע עליה ברפרנס.

←
02 · מחליטים

מוקד חזותי אחד

זה העיקרון שמתאים גם למותג שלנו.

←
03 · מנחים

״תנו למוצר כ־60% משטח הפתיחה״

זו הוראה שאפשר לבצע וגם לבדוק.

הרפרנס מראה. אנחנו מתרגמים אותו להחלטה, ואז לפעולה.

יובל יוסף
02 · מערכת עיצוב

מערכת העיצוב של SOLEIL D’OR: חוקים שחוזרים

01 · טיפוגרפיה
SOLEIL D’OR

שעת זהב.

Bona Nova לכותרות · Cormorant Garamond ללועזית · Heebo 300 לטקסט (300 = עובי דק).

02 · צבעים ותפקידים
אספרסו#1B120Cקרם#F3E7D3זהב#C9A05Cדיו#2B2118

הזהב מסמן פעולה וקווים; הוא אינו ממלא כל שטח.

03 · רכיבים ועומק
your@email.com

פינות 0 · קו 1px · כמעט בלי צללים. העומק מגיע מאור ומניגודיות.

04 · קומפוזיציה ותנועה
מוקד אחדמרחב נשימה גדול

מקטעים כהים ובהירים · תוכן מרכזי · חשיפות איטיות ומאופקות.

לא כותבים ״יוקרתי״.
מגדירים את ההחלטות שיוצרות את התחושה.

טיפוגרפיה

לפעמים שינוי קטן משנה את כל התחושה

אותו טקסט, אותה פריסה

מקום לנשום.

צמחייה שמכניסה חיים הביתה.

הדגמה לימודית: Arial מול Discovery. הבחירה תלויה באופי האתר.

יובל יוסף
03 · נכסים ותנועה

יוצרים את חומרי הגלם.

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

נכסים ג׳נרטיביים

גם לתמונה יש בריף

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

מיד נראה שלוש תמונות שנוצרו בפועל עבור התרגיל.

יובל יוסף
03 · יצירת חומרי גלם

איזו תמונה מתאימה לפתיחה שלנו?

חלופה א: תקריב הנעל
א · תקריב

פרטים יפים. מתאים לאזור סיפור המוצר.

תמונת הנעל שנבחרה לתרגיל
ב · מרחב שקט

המוצר נוכח, ויש מקום לכותרת מימין.

✓הבחירה שלנו
חלופה ג: נעל עם תפאורה עשירה
ג · סצנה עשירה

הרבה אווירה, אבל הרקע מתחרה בטקסט.

שלוש חלופות שנוצרו עם AI להרצאה. בוחרים לפי התפקיד בעמוד.

03 · מחומר גלם לעמוד

התמונה שנבחרה פוגשת תוכן אמיתי

תמונת הנעל שנבחרה לתרגילתמונת נעל בחיתוך מותאם למובייל
נעל ריצה · דגם 01

קילומטר ראשון.
בלי לחשוב עליה.

קצף קל, אחיזה יבשה ורטובה.
נעל שנשארת שקטה גם בקצב.

לגלות את הדגם ←

RIDGE / 01 · מותג דמיוני שנבנה לתרגול במצגת · אותה תמונה B, עם כותרת, ניווט ופעולה

03 · תנועה כחלק מהסיפור

כשהגלילה חושפת את המוצר

03 · עומק למי שרוצה להעמיק

תחושת תלת־ממד, גם מרצף תמונות

01

מייצרים תנועה

סרטון קצר של המוצר
או תנועת מצלמה סביבו.

←
02

מפרקים לרגעים

מייצאים סדרת תמונות
מתוך הסרטון.

←
03

הגלילה בוחרת פריים

גוללים קדימה, הרצף מתקדם.
חוזרים, הרצף חוזר.

רגע 1 מתוך 9 בגלילה באתר השעון

תשע תחנות מתוך תנועת הסיבוב

לא צריך לזכור שמות. מספיק להגיד לכלי: תקשר את סדרת התמונות להתקדמות הגלילה.

03 · בחירת תנועה

רגע אחד שמושך תשומת לב.
שאר העמוד נותן לו מקום.

מה המשתמש
צריך לזכור?

בוחרים מוקד מוצר, כותרת, עולם או פעולה.

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

משאירים אזורים שקטים כדי שיהיה נעים לקרוא ולהמשיך.

״וואו״ יכול להיות גם צילום מצוין, טיפוגרפיה או קומפוזיציה שקטה.

אפקטי וואו · 01

פרלקס: שכבות זזות בקצב שונה, ונוצר עומק.

בקבוק בושם בשכבת התמונה
AMBER / 01שעת זהב.

הזיזו את הסמן מעל הדוגמה

  1. רקע · ×1זז מעט ושומר על היציבות.
  2. תמונה · ×2זזה יותר ומרגישה קרובה.
  3. תוכן · ×3זז הכי הרבה ונמצא בקדמת הבמה.

הפער במהירויות הוא שיוצר את תחושת העומק.

אפקטי וואו · 02

תלת־ממד: כשהמוצר הופך לסצנה.

הקלטת גלילה לאורך אתר KELVIN
אפקטי וואו · 03

קנבס אינסופי: כשהגלריה הופכת למרחב.

הקלטת גרירה וזום באתר של עידן אור
04 · בנייה

מחברים הכול לאתר.

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

כלי AI בתהליך

מעבירים לכלי AI חבילת החלטות אחת

1 · מחדדיםמצרפים רפרנס ומבקשים מה־AI לחלץ ממנו החלטות שמתאימות לבריף.
2 · מייצרים ובוחריםיוצרים חלופות לנכס ובוחרים לפי התפקיד שלו בעמוד.
3 · בוניםמצרפים תמונה, רפרנס, כללי עיצוב וטקסט לכלי הבנייה המוכר לכם.
4 · משפריםמחזירים צילום מסך, מצביעים על בעיה אחת ומבקשים שינוי ממוקד.

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

יובל יוסף
הבנייה

בקשת בנייה שמגדירה מה לשמור ומה לבדוק

בנו פתיחה בעברית ל־AMBER / 01.
מצורפים: בריף, כללי עיצוב, תמונה B וטקסט העמוד.
שמרו על התמונה והאור. מקמו את הטקסט באזור השקט מימין.
כותרת: ״שעת זהב. בבקבוק אחד.״
פעולה ראשית: ״לגלות את הניחוח״.
הציגו את הפתיחה בדסקטופ ובטלפון כדי שנוכל לבקר אותה.

מתחילים באזור אחד שאפשר לראות, לשפוט ולשפר.

יובל יוסף
04 · תרגיל בנייה

אותו תוכן יכול להיראות כמו ברירת מחדל

תמונת הבושם שנבחרה לתרגילתמונת בושם בחיתוך מותאם למובייל
בושם בוטיק · 50 מ״ל

שעת זהב.
בבקבוק אחד.

הדרים, פריחת תפוז ועץ רך.
ניחוח חם שנשאר קרוב.

לגלות את הניחוח ←

AMBER / 01 · מותג דמיוני שנבנה לתרגול במצגת · פריסה בסיסית שנבנתה להמחשה

04 · תרגיל בנייה

הכיוון כבר מורגש. יש עוד מה לשפר.

תמונת הבושם שנבחרה לתרגילתמונת בושם בחיתוך מותאם למובייל
בושם בוטיק · 50 מ״ל

שעת זהב.
בבקבוק אחד.

הדרים, פריחת תפוז ועץ רך.
ניחוח חם שנשאר קרוב.

לגלות את הניחוח ←

AMBER / 01 · מותג דמיוני שנבנה לתרגול במצגת · תמונה גדולה יותר וקומפוזיציה מכוונת

05 · ליטוש

הגרסה הראשונה
פותחת את העבודה.

מסתכלים על מה שהתקבל, בוחרים מה לשפר ומנחים שוב.

הליטוש

מתארים את הבעיה ומבקשים שינוי מדיד

תמונת הבושם שנבחרה לתרגיל

שעת זהב.
בבקבוק אחד.

לגלות את הניחוח
40%אזור הטקסט
הבעיההכותרת מתקרבת לבקבוקהגבילו את הטקסט ל־40% הימניים
הבעיההכותרת רחבה מדיהשאירו אותה בשתי שורות
הבעיההכפתור מרגיש ממערכת אחרתהגדירו פינות של 4px

שומרים: התמונה, האור, הצבעים והתוכן.

יובל יוסף
05 · תרגיל ליטוש

אותה תמונה. אותו תוכן. יותר דיוק.

תמונת הבושם שנבחרה לתרגילתמונת בושם בחיתוך מותאם למובייל
בושם בוטיק · 50 מ״ל

שעת זהב.
בבקבוק אחד.

הדרים, פריחת תפוז ועץ רך.
ניחוח חם שנשאר קרוב.

לגלות את הניחוח ←
תמונת הבושם שנבחרה לתרגילתמונת בושם בחיתוך מותאם למובייל
בושם בוטיק · 50 מ״ל

שעת זהב.
בבקבוק אחד.

הדרים, פריחת תפוז ועץ רך.
ניחוח חם שנשאר קרוב.

לגלות את הניחוח ←
לפני הליטושאחרי הליטוש
רוחב הטקסט ↓   גודל הכותרת ↓   פינות הכפתור 4px

השוואה מבוקרת שנבנתה להרצאה. התוכן והנכס נשמרו בין הגרסאות.

החיבור לעולם שלכם

גם נתונים פשוטים יכולים להפוך לחוויה

מקור הנתונים · לדוגמה ב־Google Sheets
לקוחשלבתאריךפעולה
סטודיו נועהאישור עיצוב12.09אישור
בית אוראיסוף תוכן15.09העלאה
מיקהבנייה18.09צפייה
פרויקט האתר · סטודיו נועה

נועה, העיצוב שלך
מוכן לאישור.

השלב הבא: לעבור על ההצעה
ולשלוח אישור עד 12.09.

1 · תוכן ✓2 · עיצוב3 · בנייה
לצפייה ואישור העיצוב ←

אותו מידע. חוויה שמבהירה ללקוח מה לעשות עכשיו.

ליישום בפרויקט הבא

יוצאים עם חבילת עבודה קטנה

01

בריף של ארבע שורות

למי בונים, מה רוצים שירגישו, מה רואים ומה עושים.

02

רפרנס וכללי עיצוב

חמש החלטות חזותיות, מותאמות למוצר שלכם.

03

נכס והנחיית המשך

תמונה שנבחרה בכוונה ושינוי אחד לבדיקה בסבב הבא.

בחרו פתיחה אחת, ובנו משהו שתרצו להראות.

שאלות

מה הייתם רוצים
לדעת ליצור עם AI?

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

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

יובל יוסף
נשארים בקשר

תתחילו.
ואם נתקעתם, כתבו לי.

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

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

סיום

תודה רבה
לכולם!