בכתבה זו, נציג בפניכם 4 דברים שאתם חייבים לדעת על עיצוב אטומי וכיצד אתם, כמעצבים, תוכלו להרוויח מכך.
תעשיות האדריכלות ועיצוב תעשייתי פיתחו מערכות מודולריות חכמות לייצור עצמים מורכבים במיוחד כמו: מטוסים, ספינות וגורדי שחקים.
בהשראתם, הוצעה מערכת Atomic Design לפירוק עיצוב UI אתר, אפליקציה או מערכת למרכיביו הבסיסיים, כך שניתן יהיה לעשות בהם שימוש חוזר. מי שטבע את המונח והמתודולוגיה של עיצוב אטומי הוא מעצב האינטרנט, הדובר והמחבר הספר עיצוב אטומי Brad Frost, והוא אומר כי:
“Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.”
מה זה Atomic Design?
עיצוב אטומי הוא מתודולוגיה ליצירת מערכות ניתנות לשינויים, קומפוננטות לשימוש חוזר ו Design Systems.
ישנן חמש רמות שונות בעיצוב אטומי:
Atoms / אטומים – מייצגים את הישות הקטנה ביותר באלמנטים של ממשק המשתמש ולא ניתן לפרק אותם עוד יותר. חשבו עליהם כאבני לגו, הם משמשים כאבני היסוד הבסיסיות של ממשק המשתמש.
לדוגמא: צבעים, גופנים, אנימציות ותמונות בודדות.
Molecules / מולקולות – הן קבוצות של אטומים הקשורים זה לזה ויחד מקבלים תכונות חדשות. הם יוצרים אלמנטים פשוטים יחסית המתפקדים יחד כיחידה.
לדוגמא: כפתורים, טופס ליד וחיפוש.
Organisms / אורגניזמים – הם רכיבי ממשק משתמש מורכבים יחסית, הכוללים בתוכם קבוצות של מולקולות ו/או אטומים. רוב האורגניזמים יכולים לתפקד בכוחות עצמם, מבלי להסתמך על אלמנטים אחרים בדף.
לדוגמא: תפריט ניווט, סרגל צדדי, טפסים וחלונות קופצים Popups.
Templates / תבניות – הן עמודים ללא תוכן אמיתי אשר מבטאות את מבנה התוכן הבסיסי של העיצוב. בגדול, הם משלבים אורגניזמים לפריסת אתר נכונה.
Pages / דפים – הם מקרים ספציפיים של תבניות המדגימות את ממשק המשתמש הסופי עם תוכן אמיתי (טקסט ותמונות).
איך עיצוב אטומי ומאגר קומפוננטות קשורים זה לזה?
ראשית, בואו נגדיר את אחת הבעיות הגדולות בפיתוח מוצרים: חוסר עקביות.
יצירת שפה משותפת בין צוות העיצוב לצוות הפיתוח יקלו על התהליך וימנעו סתירות, ניתן לעשות זאת ע”י מאגר קומפוננטות, דמיינו זאת כקופסא מסודרת עם כל הרכיבים השונים של ממשק המשתמש שעיצבתם.
Brad Frost הגדיר זאת כך:
“…a comprehensive collection of the bits and pieces that make up your interface.”
מאגר הקומפוננטות משמש גם את המעצבים וגם את המפתחים, הוא מאפשר לכולם לשמור על אלמנטים עקביים ואיכותיים לכל אורך התהליך.
Design Systems
מהי בעצם Design System ובמה היא שונה ממאגר קומפוננטות?
מאגר קומפוננטות מציג את המצב הקיים ואת השלבים השונים בחיי המוצר. לשם השוואה, מערכת עיצוב ממשיכה להתפתח ומשמשת כמקור אליו יש לחזור בשלבים השונים של המוצר.
מטרת ה Design System היא להקל על תהליך העבודה עבור כל הצוותים המעורבים בתהליך, מצוותי האפיון עיצוב, פיתוח וניהול.
חשוב לציין, מאגר קומפוננטות מוגדר ומתועד היטב יכול להוות נקודת התחלה טובה ליצירת מערכת עיצוב.
יתרונות העיצוב האטומי
בניית מערכת מבוססת קומפוננטות- כאשר אנו מפרקים את הרכיבים שלנו לאטומים בסיסיים, קל יותר לראות אילו אטומים ניתן לשלב או לערבב ולהתאים אותם ליצירת רכיבים חדשים. תהליך זה עוזר לנו לנווט בין חלקי האטום השונים לבין כל ממשק המשתמש שלנו.
יצירת Style Guide הופך לפשוט יותר- יישום עקרונות העיצוב האטומי משלבי העיצוב הראשונים, כלומר יצירת כלל האטומים והמולקולות לפני בניית האתר, יעזרו לכם בבניית Style Guide בצורה פשוטה יותר אשר ישמור על עיצוב עקבי בין הפלטפורמות השונות.
קוד פיתוח קל ועקבי- הקוד של אתרים שעוצבו במתודולוגיית העיצוב האטומי בדרך כלל הרבה יותר קל ופשוט לקריאה מאלו שעוצבו בשיטה המסורתית.
העקביות הנוצרת באמצעות שימוש באטומים שהוגדרו מראש ליצירת פריסת האתר, מאפשרים לראות בקלות אילו רכיבים משמשים לחלקים שונים באתר ומקטין את הסיכוי לקוד כפול.
יצירת פרוטוטייפ בקלות- רשימת אטומים מוגדרת שנכתבה לפני בניית האתר, מאפשרת ליצור מוקאפים לעמודים השונים בקלות ובמהירות, עליכם רק לבחור ולשלב את האלמנטים הנדרשים.
עדכון קומפוננטות שונות- כאשר יש צורך בעדכון הקומפוננטות, העיצוב האטומי מאפשר לעדכן כל רכיב בנפרד כך שבכל פעם ישנתה אטום, מולקולה או אורגניזם אחד.
באופן זה, ניתן לפשט את התהליך כך ששינוי רכיב אחד, יגרור שינוי אוטומטי לכלל אותם הרכיבים בעיצוב.
לסיכום,
עיצוב אטומי מפרק את ממשק המשתמש לאטומים, מולקולות, אורגניזמים, תבניות ודפים. על ידי פירוק כל עמוד לגורמים שונים אלה, אנו יוצרים מודל המסייע בבניית ממשק המשתמש.
המוצרים הדיגיטליים של ימינו חייבים להיות מותאמים למכשירים ולפלטפורמות השונות, כדי להקל על שלבי העיצוב והפיתוח. כל פרויקט, קטן או גדול צריך להיות מעוצב עפ”י מתודולוגיית Atomic Design.
אמנם מדובר במתודולוגיה מורכבת וארוכה יותר, אך היא אוספת את כל צוותי המוצר תחת חזון אחד משותף, הרכיבים השונים של ממשק המשתמש מאפשרים שימוש חוזר, עריכה ושילוב יחד כך שהתפתחות המוצר העתידית תהיה פשוטה יותר.
אין ספק שכל צוותי המוצר יפיקו תועלת רבה משימוש בעיצוב אטומי.