כל מה שאתם צריכים לדעת על Design System

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

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

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

הגדרה מקיפה של Design System

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

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

חשיבות ה-Design System

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

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

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

ההיסטוריה של מערכות העיצוב בקצרה

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

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

הספר שהטיל את עיצוב ה-UX בסביבות שנת 2010, היה Brad Frost’s Atomic Design. למרות שהספר אינו מושלם, הוא ניסה ליצור מדריך לבניית מערכת זרימת מסך בעולם האמיתי.

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

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

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

השלבים לבניית דיזיין סיסטם ברמה גבוהה

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

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

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

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

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

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

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

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

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

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

כמה דוגמאות לדיזיין סיסטם מעולה

Material Design

 מקור: Google

זו מערכת העיצוב הפופולארית ביותר. היא נוצרה על ידי גוגל ולכן יש לה הישג רחב עם כל המוצרים שלהם: Android, AdWords, Gmail, Google Teams ועוד. Material design זה מה שמאפשר למשתמשים לזהות כאשר הם רואים מוצר של גוגל.

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

Fluent Design

 מקור: Microsoft

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

Polaris

 מקור: Shopify

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

עם Polaris, מי שבונה את מערכת העיצוב היא Shopify’s אשר אינה אוכפת אלמנטים משלה (כמו טיפוגרפיה או צבע), במקום זאת היא בוחרת לספק הנחיות לבניית חנות מוצלחת.

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

 מקור: Salesforce

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

Encore

 מקור: Spotify

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

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

על מנת להמשיך, Spotify חשפה את מערכת העיצוב החדשה שלה Encore. המערכת עושה שימוש חוזר ביסודות של GLUE ו-22 מערכות אחרות שיצרו לאחר מכן על מנת ליצור חיבור של מערכות אשר יביא לידי ביטוי את התוצר הסופי

הפרויקטים המובילים שלנו ב-UX ו-UI

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

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

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

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

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

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

ההיתרונות ב-Omnis ליצירת מערכת עיצוב

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