כלי העיצוב אוזלים. כך נוכל לתקן אותם.

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

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

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

28 ביולי 2017 לא היה יום טוב לכלי עיצוב.

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

כולנו רק מציירים תמונות. זה לא שפוי.

כמעט כל כלי העיצוב הפופולריים מייצאים לתמונות. זה בעייתי ממספר סיבות:

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

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

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

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

המוצרים שלנו הם אינטראקטיביים. הכלים שלנו הם סטטיים.

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

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

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

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

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

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

הכלים שלנו צריכים לתמוך בפרדיגמת הפריסה של האינטרנט

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

אז הגיוני שכלי העיצוב שלנו תומכים באותו מודל פריסה. ימין?

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

  • תכנון רספונסיבי הופך להיות קשה מאוד מכיוון שיש לארגן מחדש כל שכבה ידנית לכל נקודת שבירה. לחלופין, ניתן להציג מערכת פריסה מבוססת אילוץ אך היא מוסיפה מורכבות, מחמירה את עקומות הלמידה ובסופו של דבר מונעת ממפתחים להעביר את הפריסה ישירות לרשת.
  • מכיוון שכל שכבה נמצאת מחוץ לזרם המסמך, מניפולציה של תוכן הופכת לטריקית. לדוגמה, אם ברצונך להוסיף פריט לרשימה, עליך למקם מחדש ידנית את הפריטים האחרים באותה רשימה. כמובן שניתן להציג פונקציות חוזרות ותכונות מהודרות אחרות כדי להקל על הכאב, אך שוב, זה מביא מורכבות נוספת ומסבך משהו שה- DOM נותן לנו בחינם.
  • מיקום מוחלט מוביל באופן טבעי לקואורדינטות ומידות פיקסל קבועות. זה מוליד גמישות, ושוב, הוא סטייה עצומה מאופן תפקוד האינטרנט. האינטרנט בנוי על יחידות נוזלים כמו em, rem, vh, vw ו-%. על הכלים שלנו לתמוך ביחידות אלה כברירת מחדל.

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

כלי מונוליטי אינו הדרך

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

  1. לוח סגנון אוסף של צבעים, צללים, ריווח, רדיוס גבול, גופנים, גדלי גופן, אנימציות וסגנונות אחרים היוצרים את זהות המותג שלך. נכון לעכשיו, רוב כלי העיצוב תומכים רק בלוח צבעים. עד שהם יתמכו במאפייני הסגנון האחרים, יהיה מאוד עמל לעצב באופן שיטתי.
  2. נכסים זה כולל אלמנטים כמו אייקונים, איורים ותמונות. ישנם כמה עורכי תמונות פנומנליים וכלי הווקטור של Figma מצוין אך כשמדובר בתמיכה של SVG, כלי העיצוב שלנו משאירים הרבה מה להיות נחשק.
  3. ספריית רכיבים רכיב הוא אוסף של סגנונות ונכסים אשר מעניק נתונים לאלמנט יחיד במגוון וריאציות. דוגמאות לכך כוללות כפתורים, כניסות, תגים וכו '. כפי שציינתי, פיגמה וסקיצה ערכו לאחרונה את התהליך הזה הרחק מזרימת הציור העיקרית - חבל שהם רק תמונות של רכיבים ולא רכיבים בפועל.
  4. מודולים מודול / קומפוזיציה הוא אוסף של רכיבים שמעביר נתונים לחתיכת ממשק משתמש מכוסה במגוון מצבים. דוגמאות לכך כוללות סרגל כותרות, תפריטי כרטיסיות, טפסי התחברות, טבלאות וכו 'מכיוון שמודולים הם רק רכיבים מורכבים, אני מניח ש- Figma ו- Sketch יכולים להתמודד גם עם אלה. אם כי יתכן שיש מידה מסוימת בהפרדת השניים.
  5. מסכים מסך הוא אוסף של מודולים, רכיבים ונתונים ליצירת ממשק משתמש שלם בו יכול המשתמש לקיים אינטראקציה.

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

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

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

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

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

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

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

הכלים שלנו צריכים לעודד עיצוב טוב

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

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

ולמה לא…? כי לכלי עיצוב לא אכפת.

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

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

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

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

עלינו לעצב בעזרת נתונים חיים

נתונים חיים שולבו במידה מסוימת על ידי כלים רבים, וזה נהדר לראות. ל- Adobe XD יש כמה תכונות ממש מסודרות לייצור נתונים מזויפים הדומים לנתונים חיים טיפוסיים. Invision Craft מספק גם כמה תכונות חי מגניבות של נתונים עבור Sketch.

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

האם כלי העיצוב שלנו מספקים לנו את הפינוקים האלה?

במילה אחת: לא.

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

האינטרנט פתוח. גם הכלים שלנו צריכים להיות.

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

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

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

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

אז, מה העתיד של כלי העיצוב?

חדשנות בכלי תכנון הינה בעלת ערך רב והרבה כבר לאחרונה. בכלי התכנון של Airbnb, ג'ון גולד ובנג'מין ווילקינס עבדו על React-Sketchapp שלוקח רכיבים של React ומעבד אותם בתוך Sketch. ג'ון ובן גם עבדו על כלי חדש המפוצץ את הראש, אשר מצלם רישומי מפיות ואיכשהו הופך אותם לרכיבי React.

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

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

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

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

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

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

אם כלי תכנון שיטתי הוא לנצח את ליבנו, עליו לחנך תחילה.