נאומורפיזם – הטרנד שכל פעם צץ מחדש

אז על מה נדבר?

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

נתחיל קודם עם השאלה מה זה בכלל נאומורפיזם?

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

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

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

דוגמאות

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

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

דוגמא מאתר שבודק ניגודיות בין צבעים בהתאם לתקנות ADA

איך יוצרים את האפקט ה"נאומורפיזם"
במדריך הבא נלמד איך יוצרים בעזרת Figma את אפקט ה"נאומורפיזם" (אפשר כמובן לבצע את האפקט בכל כלי עיצוב שאתם עובדים איתו)

צבעוניות

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

• צבע בהיר – לצל בהיר
• צבע בסיס – לרקע והאובייקט
• צבע כהה – לצל כהה

1.ניצור שני ריבועים

אחד בהיר (#FFFFFF) ואחד כהה (9BA2B7#)

2.צבע ביניים

נשכפל את האובייקט הכהה ונשנה את הגדרות הLight שלו (זוכרים שזה משחק של אור וצל?
אז בפיגמה אפשר להחליף את "שיטת" הצבעים ל- HSL – Hue, Saturation, Lightness
שהוא בעצם דגם מקביל לRGB שנותן לנו שליטה ב-Light

נעלה את ערך L ל-93 וככה נקבל את צבע הביניים שלנו EAECF0#

3.ניצור פריים חדש של ריבוע עם פינות מעוגלות

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

4.אפקט ה"וואו"

נבחר את הריבוע שלנו ונוסיף לו שתי שכבות של דרופ שאדו:

• לצל הבהיר
  Color: #FAFBFF   |   X:-9   |   Y:-9   |   Blur: 16px
  
• לצל הכהה
  Color: #A6ABBD  |   X:9   |   Y:9   |   Blur:16px
  

כמעט סיימנו!

5.מוסיפים קו גבול

נלך צעד אחד קדימה ונוסיף גם סטרוק עדין בצבע בהיר כדי להבליט את הכפתור שיצרנו – FFFFFF# שקיפות של 40%

6.אם כבר אור וצל…

אם כבר אור וצל…אפשר להוסיף גרדיאנט לינארי עדין לצבע הבסיס שלנו:
000000# Soft light שקיפות של 40%

כל הכבוד! הצלחתם ליצור את אפקט הנאומורפיזם, מה עכשיו?

7."לא טוב היות הכפתור לבדו…"

אז יש לנו כפתור אחד, אבל כדי לעצב ממשק נצטרך יותר מזה…
נשכפל את הריבוע שלנו 3 פעמים (סה"כ 4 ריבועים) ונשנה לשכפולים את הגדרות הdrop shadow.
אם בשביל הרמה הראשונה של הגובה השתמשנו במרחק של 9 פיקסלים ו16 לטשטוש – אז בשביל לקבל אפקט גבוהה יותר נכפיל את המספרים האלה.:

• לריבוע השני נעשה 32% טשטוש והX והY יהיו 16
• לריבוע ה3 נעשה 48 אחוז טשטוש הX וY יהיו 24
• וברביעי טשטוש של 64  והX והY יהיו 32

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

8.צל פנימי

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

8.יצירת סטייל

כדי לשחזר את האפקט לאלמנטים אחרים ניצור סטיילים לצבע המילוי ,הסטרוק והדרופ-שאדו. כדאי למצוא ולהבין בקלות איזה סטייל אנחנו צריכים.
אני ממליץ להשתמש בגובה האלמנט או ברמת הטשטוש / ערכי X Y כחלק מהשם של הסטייל.
לדוגמה:

9. ניצור סטיילים שיחזרו על עצמם:

• Neo-fill לצבע המילוי המכיל בתוכו צבע רקע גרדיאנט
• Neo-stroke לסטרוק הלבן בשקיפות
• ואחד נוסף רק עבור הגובה הכי נמוך שיצרנו:
  Shadow/16 שמאגד בתוכו את שתי שכבות הדרופ-שאדו

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

סיימנו!

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

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

אל תישארו מאחור

בואו ללמוד ובקצב שלכם, את יכולות עיצוב הממשקים שיש לFigma
ב-קורס האונליין הראשון והיחיד בעברית – "What the Figma"

אז למה אתם מחכים?
להרשמה ופרטים נוספים, לחצו כאן