כך בונים מערכת עיצוב עם צוות קטן

איור מאת כריס גילרד

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

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

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

בסוף הערב התייאשנו מעט. אבל לא היינו לבד. במהלך פגישת השאלות והתשובות שאלו רבים:

"איך אוכל כמעצב יחיד ליצור מערכת עיצוב?"

"אני המעצב היחיד, איזו עצה יש לך בשבילי?"

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

מהי מערכת עיצוב?

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

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

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

מדריך סגנון לעומת מערכת עיצוב

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

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

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

יתרונות מערכת עיצוב

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

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

בסך הכל, הצוות שלנו יחסוך זמן כי:

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

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

תכנן את מבנה המערכת

כדי ליצור מערכת תכנון עלינו לפרק אותה ולהבין את חלקיה:

פין UX - מערכת עיצוב

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

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

כיצד אחרים מנסים זאת:

איך הצוות הקטן שלנו יכול ליצור מערכת עיצוב?

מאיפה מתחילים כשאין לך מספיק משאבים, זמן או תקציב?

1. אל תתחיל מאפס

"אם אתה רוצה להכין פאי תפוחים מאפס, עליך להמציא את היקום קודם." - קרל סאגאן

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

גנוב כמו ואמן - אוסטין קלייון

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

בנוסף, ישנם כלים שבהם אתה יכול להשתמש כדי לבסס במהירות את מערכת הבנייה שלך:

2. דע עם מה אתה עובד

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

זה יכול להיות מועיל ללמוד כיצד לבצע ביקורת ממשק משתמש:

3. בנה תוך כדי

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

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

"אתה צריך ללכת לאט בשביל ללכת מהר."

4. דע את הגבולות שלך

תתחיל בקטן.

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

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

5. הישאר מסודר

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

גרסאות מסמכי עיצוב הן חלום לכל המעצבים. אף מוצר לא קיבל את זה נכון ב 100%. אנו נותנים את Abstract ו- Plant לנסות לראות כיצד זה יכול לעזור לנו להישאר במסלול. הפלטפורמה המקוונת היחידה בה אנו יכולים להשתמש עבור עסק היא One Drive. כונן Google ו- Dropbox הן אפשרויות אחרות כל עוד אין לך מגבלות.

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

מדריך מערכות עיצוב

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

ספריות תבניות / מדריכי סגנון

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