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

1. ‫השראה‬ ‫ומקורות‬ ‫טרנדים‬2017
‫ניר‬
‫נבות‬

2. ‫טרנד‬
‫בחברה‬ ‫נפוצה‬ ‫העדפה‬,‫מגמה‬,‫נטייה‬
‫השראה‬
‫הענקה‬,‫נתינה‬,‫מוזה‬,‫אינספרציה‬
‫השראה‬ ‫חוסר‬
‫נדוש‬,‫בנאלי‬
‫השראה‬ ‫ומקורות‬ ‫טרנדים‬2017

3. ‫ומקורות‬ ‫בטרנדים‬ ‫משתמשים‬ ‫מתי‬
‫השראה‬?
.1‫תמיד‬
.2‫ספציפיים‬ ‫יותר‬ ‫נהיה‬ ‫בואו‬,‫המחקר‬ ‫בשלב‬
‫הויזואלי‬
‫השראה‬ ‫ומקורות‬ ‫טרנדים‬2017

4. ‫העבוד‬ ‫מתודולוגית‬ ‫בשלבי‬ ‫נזכר‬ ‫בואו‬
‫פרויקט‬ ‫של‬ ‫תחילתו‬,
‫המקדים‬ ‫המחקר‬ ‫שלב‬,
‫עלינו‬ ‫זה‬ ‫בשלב‬
‫בו‬ ‫התחום‬ ‫את‬ ‫להכיר‬
‫לעומקו‬ ‫פועלים‬ ‫אנו‬,
‫הם‬ ‫מי‬ ‫להבין‬
‫ולהבין‬ ‫המשתמשים‬
‫השימוש‬ ‫אופן‬ ‫מהו‬
‫באפליקציה‬.
‫וארגון‬ ‫איסוף‬ ‫שלב‬
‫לתוצרים‬ ‫המידע‬
‫של‬ ‫שבסופו‬ ‫שונים‬
‫הבסיס‬ ‫את‬ ‫יהוו‬ ‫דבר‬
‫ליצירת‬Wireframe
‫קונספטואלי‬.
‫סכמתי‬ ‫משלב‬ ‫מעבר‬
‫הכולל‬ ‫ויזואלי‬ ‫לשלב‬
‫הקונספט‬ ‫הטמעת‬
‫ה‬ ‫גבי‬ ‫על‬ ‫הגרפי‬–
Wireframes,‫קבלת‬
‫ויזואלי‬ ‫מוסף‬ ‫ערך‬
‫פגיעה‬ ‫ללא‬
‫בפונקציונליות‬,
‫להציגו‬ ‫מקובל‬
‫כהדמיה‬
‫אינטראקטיבית‬
‫כלים‬ ‫באמצעות‬
‫מתקדמים‬ ‫גרפיים‬
‫כגון‬Invision‫או‬
‫אקשור‬ ‫אפילו‬
(‫מומלץ‬ ‫לאחריו‬
User
Centric

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

6. ‫בחשבון‬ ‫לקחת‬ ‫שצריך‬ ‫מגמות‬
‫באמצעות‬ ‫לפיתוח‬ ‫הכנה‬
‫מתקדמים‬ ‫גרפיים‬ ‫כלים‬
‫למערכות‬ ‫אחד‬ ‫קוד‬
‫שונות‬ ‫הפעלה‬
Cross Platforms
Design
‫מלאכותית‬ ‫אינטליגנציה‬
AI

7. ‫מתקדמים‬ ‫גרפיים‬ ‫כלים‬ ‫באמצעות‬ ‫לפיתוח‬ ‫הכנה‬
‫לפיתוח‬ ‫להעביר‬ ‫צריך‬ ‫חומרים‬ ‫אילו‬
‫צריך‬ ‫הגרפי‬ ‫הקונספט‬ ‫אישור‬ ‫שלב‬ ‫לאחר‬
‫הכוללות‬ ‫מדויקות‬ ‫הנחיות‬ ‫למפתח‬ ‫להעביר‬
‫נתונים‬ ‫מספר‬:
.1‫המסכים‬ ‫על‬ ‫האלמנטים‬ ‫מיקום‬(‫לציר‬ ‫ביחס‬
‫ה‬-X&Y)
.2‫בגופנים‬ ‫שימוש‬ ‫לגבי‬ ‫מדויקות‬ ‫הנחיות‬
(‫סוג‬,‫משקל‬,‫צבע‬)
.3‫הגרפיים‬ ‫האלמנטים‬ ‫של‬ ‫חיתוכים‬(
‫תמונות‬,‫וכד‬ ‫אייקונים‬')
.4‫אינטראקציות‬ ‫עבור‬ ‫הנחיות‬

8. ‫ידנית‬ ‫לפיתוח‬ ‫הכנה‬

10. ‫מתקדמים‬ ‫גרפיים‬ ‫כלים‬ ‫באמצעות‬ ‫לפיתוח‬ ‫הכנה‬
Invision Creative
Cloud
Zeplin Sympli

11. ‫אזור‬ ‫יצירת‬
‫ב‬ ‫חדש‬ ‫עבודה‬-
Invision

12. ‫בחירת‬
‫שכבה‬
‫סיומת‬
.png
‫לשכבה‬‫המסמך‬ ‫סנכרון‬
‫עם‬
Invision

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

14. ‫בחירת‬
‫נכסים‬
‫הורדה‬

15. ‫בחשבון‬ ‫לקחת‬ ‫שצריך‬ ‫מגמות‬
‫באמצעות‬ ‫לפיתוח‬ ‫הכנה‬
‫מתקדמים‬ ‫גרפיים‬ ‫כלים‬
‫למערכות‬ ‫אחד‬ ‫קוד‬
‫שונות‬ ‫הפעלה‬
Cross Platforms
Design
‫מלאכותית‬ ‫אינטליגנציה‬
AI

16. Cross Platforms Design
‫טלפון‬
‫חכם‬
(Mobile)
‫מחשב‬
‫נייח‬‫נייד‬
(Desktop)
‫מגע‬ ‫מכשירי‬
(Touch)
‫טלוויזיה‬
‫חכמה‬
(Smart TV)
‫אביזרים‬
‫לבישים‬
(Wearables)

19. ‫בחשבון‬ ‫לקחת‬ ‫שצריך‬ ‫מגמות‬
‫באמצעות‬ ‫לפיתוח‬ ‫הכנה‬
‫מתקדמים‬ ‫גרפיים‬ ‫כלים‬
‫למערכות‬ ‫אחד‬ ‫קוד‬
‫שונות‬ ‫הפעלה‬
Cross Platforms
Design
‫מלאכותית‬ ‫אינטליגנציה‬
AI

20. ‫שונות‬ ‫הפעלה‬ ‫למערכות‬ ‫אחד‬ ‫קוד‬
React
Native
Ionic
Framework
PhoneGap

21. ‫ב‬ ‫שימוש‬-React Native
‫של‬ ‫היוצר‬ ‫מבית‬ ‫חדשה‬ ‫פיתוח‬ ‫פלטפורמת‬‫פייסבוק‬,‫יוצרת‬
‫למובייל‬ ‫אפליקציות‬ ‫בפיתוח‬ ‫מהפכה‬,‫לכתוב‬ ‫המאפשרת‬
‫ואפליקציית‬ ‫אנדרואיד‬ ‫אפליקציית‬‫אייפון‬‫בעזרת‬
JavaScript‫בלבד‬
.1‫אחד‬ ‫קוד‬:‫שונות‬ ‫הפעלה‬ ‫מערכות‬ ‫שתי‬ ‫עבור‬(IOS &
Android)‫לאתר‬ ‫גם‬ ‫בקוד‬ ‫שימוש‬ ‫אפשרות‬ ‫כולל‬
‫אינטרנט‬
.2‫התנהגות‬:‫היברידיות‬ ‫אפליקציות‬ ‫לעומת‬,‫אפליקציות‬
‫אפליקציות‬ ‫הן‬ ‫באמצעותה‬ ‫שיוצרו‬Native,‫שימוש‬
‫הטלפון‬ ‫של‬ ‫הייעודית‬ ‫ההפעלה‬ ‫במערכת‬
.3‫עדכונים‬:‫הפלטפורמות‬ ‫בשלושת‬ ‫מידית‬ ‫לעדכן‬ ‫ניתן‬
‫המכשירים‬ ‫גבי‬ ‫ועל‬,‫החניות‬ ‫דרך‬ ‫בעדכון‬ ‫צורך‬ ‫אין‬
(Google Play & App Store)
.4‫פתוח‬ ‫קוד‬:‫עלויות‬ ‫ללא‬ ‫בפלטפורמה‬ ‫להשתמש‬ ‫ניתן‬

22. ‫ב‬ ‫שימוש‬-React Native
.1‫אפליקציות‬ ‫סוג‬:‫אנימציות‬ ‫לפיתוח‬ ‫מומלצת‬ ‫פחות‬
‫ומשחקים‬ ‫מורכבות‬(Gaming)
.2‫בקיים‬ ‫שימוש‬:‫פיתוח‬ ‫זמן‬ ‫ייקח‬ ‫לפלטפורמה‬ ‫המעבר‬
‫ומשאבים‬,‫שעובדת‬ ‫אפליקציה‬ ‫להמיר‬ ‫צורך‬ ‫אין‬ ‫לכן‬
‫לריאקט‬.
.3‫וביצועים‬ ‫טכנולוגיה‬:‫בטכנולוגיה‬ ‫ומדובר‬ ‫מאחר‬
‫חדשה‬,‫ויש‬ ‫ובמידה‬ ‫ושיפורים‬ ‫עדכונים‬ ‫נדרשים‬
‫להשתמש‬ ‫כדאי‬ ‫עדין‬ ‫מורכבות‬ ‫טכנולוגיות‬ ‫דרישות‬
‫בפתרונות‬Native.

23. Facebook Airbnb Uber

24. ‫בחשבון‬ ‫לקחת‬ ‫שצריך‬ ‫מגמות‬
‫באמצעות‬ ‫לפיתוח‬ ‫הכנה‬
‫מתקדמים‬ ‫גרפיים‬ ‫כלים‬
‫למערכות‬ ‫אחד‬ ‫קוד‬
‫שונות‬ ‫הפעלה‬
‫מלאכותית‬ ‫אינטליגנציה‬
AI
Cross Platforms
Design

25. ‫מלאכותית‬ ‫בינה‬Artificial Intelligent))
‫שהוא‬ ‫לחשוב‬ ‫לאדם‬ ‫לגרום‬ ‫מחשב‬ ‫של‬ ‫יכולת‬ ‫היא‬ ‫המקובלות‬ ‫ההגדרות‬ ‫אחת‬
‫או‬ ‫אנושי‬" :‫של‬ ‫התנהגות‬
‫כך‬ ‫מתנהג‬ ‫היה‬ ‫אדם‬ ‫בן‬ ‫אם‬ ‫כאינטליגנטית‬ ‫נתפשת‬ ‫שהייתה‬ ‫מכונה‬"‫ויש‬
‫הרביעית‬ ‫התעשייתית‬ ‫כמהפכה‬ ‫אותה‬ ‫המגדירים‬.
‫ברובוטיקה‬ ‫שימוש‬,‫ייעול‬ ‫לצורך‬ ‫מלאכותית‬ ‫ובבינה‬ ‫בסנסורים‬,‫הוזלת‬
‫עלויות‬,‫רווחים‬ ‫הגדלת‬,‫השליטה‬ ‫יכולות‬ ‫הגברת‬,‫התחזוקה‬,‫הגיוון‬
‫בייצור‬ ‫והגמישות‬.

26. 3‫לחלוטין‬ ‫תשנה‬ ‫מלאכותית‬ ‫שאינטליגנציה‬ ‫תעשיות‬
1.‫בריאות‬:
•‫לבישים‬ ‫ואביזרים‬ ‫חכמים‬ ‫בטלפונים‬ ‫שימוש‬(‫חכמים‬)
‫בעצמם‬ ‫רפואיים‬ ‫אבחונים‬ ‫לבצע‬ ‫לאנשים‬ ‫יאפשרו‬
•‫אדם‬ ‫שאותו‬ ‫הסתברות‬ ‫לחזות‬ ‫יוכלו‬ ‫רובוטיים‬ ‫רופאים‬
‫מסוימת‬ ‫במחלה‬ ‫ילקה‬,‫לטפל‬ ‫ביותר‬ ‫הטובות‬ ‫הדרכים‬ ‫ואת‬
‫במחלות‬
•‫ויסייעו‬ ‫חיוניים‬ ‫נתונים‬ ‫שישאבו‬ ‫ביומטריים‬ ‫חיישנים‬
‫החיים‬ ‫תוחלת‬ ‫והארכת‬ ‫מחלות‬ ‫במניעת‬

27. 3‫לחלוטין‬ ‫תשנה‬ ‫מלאכותית‬ ‫שאינטליגנציה‬ ‫תעשיות‬
2.‫פיננסים‬:
•‫מבוססים‬ ‫אלגוריתמים‬ ‫פיתוח‬AI‫חכמות‬ ‫מסחר‬ ‫למערכות‬
‫ולשוק‬‫המט‬”‫ח‬.
•‫מדיה‬ ‫ערוצי‬ ‫לחוקר‬ ‫יכולת‬,‫פרשנויות‬,‫אינטרנט‬ ‫אתרי‬
‫האחרונות‬ ‫מהשנים‬ ‫בורסאיות‬ ‫ותנודות‬,‫העולם‬ ‫לימוד‬
‫ביותר‬ ‫הטוב‬ ‫המהלך‬ ‫את‬ ‫לנבא‬ ‫כדי‬ ‫הפיננסי‬.
•‫שקיבל‬ ‫המידע‬ ‫את‬ ‫ינתח‬ ‫המלאכותי‬ ‫האנליסט‬,‫כולל‬
‫ותקשורתיים‬ ‫כספיים‬ ‫נתונים‬,‫יציג‬ ‫שנייה‬ ‫שבריר‬ ‫ובתוך‬
‫ביותר‬ ‫הרווחית‬ ‫האופציה‬ ‫את‬

28. 3‫לחלוטין‬ ‫תשנה‬ ‫מלאכותית‬ ‫שאינטליגנציה‬ ‫תעשיות‬
3.‫ביטוח‬:
•‫התקנת‬ ‫באמצעות‬ ‫הרכב‬ ‫ביטוח‬ ‫פוליסות‬ ‫בעלות‬ ‫הפחתה‬
‫התנהלות‬ ‫אחר‬ ‫שעוקבים‬ ‫ברכבים‬ ‫חכמים‬ ‫ניטור‬ ‫מכשירי‬
‫לא‬ ‫או‬ ‫זהיר‬ ‫הנהג‬ ‫האם‬ ‫לדעת‬ ‫ומאפשרים‬ ‫הרכב‬.
•‫חיים‬ ‫ביטוחי‬ ‫בפוליסות‬ ‫להנחה‬ ‫בריאים‬ ‫חיים‬ ‫בין‬ ‫שילוב‬
‫לבישים‬ ‫ואביזרים‬ ‫באפליקציות‬ ‫שימוש‬ ‫באמצעות‬ ‫ובריאות‬
‫שמסוגלים‬ ‫חכמים‬‫לנטר‬‫הדם‬ ‫לחץ‬ ‫את‬,‫הלב‬ ‫קצב‬,‫רמות‬
‫מנהלים‬ ‫שאתם‬ ‫כך‬ ‫על‬ ‫יעידו‬ ‫נוספים‬ ‫ודברים‬ ‫הפעילות‬
‫בריא‬ ‫חיים‬ ‫אורך‬.

29. ‫האוטונומי‬ ‫הרכב‬(‫רכב‬
‫רובוטי‬)
‫בכביש‬ ‫בעצמה‬ ‫המנווטת‬ ‫מכונית‬,‫היכן‬ ‫עצירות‬ ‫לרבות‬
‫שצריך‬,‫שצריך‬ ‫היכן‬ ‫פניות‬,‫מרחק‬ ‫שמירת‬.‫נהיגה‬ ‫פשוט‬
‫אוטומטי‬ ‫הוא‬ ‫הנהג‬ ‫שהפעם‬ ‫רק‬ ‫רגילה‬.‫המכונית‬
‫תנועה‬ ‫כדי‬ ‫תוך‬ ‫התפתחויות‬ ‫לזהות‬ ‫יודעת‬ ‫האוטונומית‬.
‫בנסיעה‬ ‫ואתגרם‬ ‫מכשולים‬ ‫על‬ ‫מתגברת‬ ‫היא‬,‫צורך‬ ‫ללא‬
‫אנושי‬ ‫בנהג‬.
‫יתרונות‬:
•‫חסכונית‬ ‫באנרגיה‬ ‫ושימוש‬ ‫בטיחות‬,‫הנהיגה‬ ‫זמן‬ ‫ניצול‬
‫שנחסך‬
‫חסרונות‬:
•‫ייצור‬ ‫עלויות‬,‫באינטרנט‬ ‫תלות‬,‫ביטוח‬ ‫עלויות‬
1.07.2016:
•‫אוטונומי‬ ‫רכב‬ ‫מעורב‬ ‫שבה‬ ‫בתאונה‬ ‫ראשון‬ ‫הרוג‬

31. ‫השראה‬ ‫מקורות‬
‫היכן‬
•‫הווירטואלית‬ ‫הרשת‬ ‫ברחבי‬
•‫מקצועיים‬ ‫כנסים‬&Meetups
•‫ניוזלטרס‬
•‫סדנאות‬(‫האקטונים‬)

32. ‫ברשת‬ ‫השראות‬ ‫לחפש‬ ‫כדאי‬ ‫היכן‬
Muzli Dribbble Behance Awwwrds

37. ‫ההקשה‬ ‫על‬ ‫תודה‬