בזמן האחרון, שמתי לב לצמד מילים שחוזר על עצמו בכל מקום. צמד המילים שעליכם לשים לב אליו הוא – Design patterns.

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

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

אבל למה מתכוונים כשמדברים על תבניות עיצוב? ובכן, תלוי את מי שואלים.

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

הנה דוגמא:

In short, no pattern is an isolated entity. Each pattern can exist in the world only to the extent that is supported by other patterns: the larger patterns in which it is embedded, the patterns of the same size that surround it, and the smaller patterns which are embedded in it.

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

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


Brandbook

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

ספר החוקים של נאסא

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

סטיילגייד

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

Frontify

דוגמא לסטיילגייד במערכת frontify.

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

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

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

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

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

הנה הספרייה של האלמנטים בa list apart:

http://patterns.alistapart.com/

דוגמא לתבנית - datepicker

דוגמא לתבנית – datepicker

הליך המחשבה הזה, הוא מה שמאפייני UX מכנים ui patterns.

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

frameworks

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

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

google materials guidlines

google materials guidlines

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


לשבור את התבנית

אז מה החסרון הגדול של עבודה בתבניות?

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

בגדול – המעצב אלי שיף הגדיר את זה טוב.

The two worst things a designer can do are either uncritically accept the status quo, or flippantly renounce long-held traditions.

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

תאכלס

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

איך לעצב בתבניות עם פוטושופ

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

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

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

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

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

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

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

רצוי לבחור חלוקה שקשורה לפיתוח המוצר למשל – מוצר אינטרנט נפרק לH1, H2 ונגדיר לפי השפה המקובלת, במוצר לאייפון נגדיר “bottom drawer” וכו’. גם סדר של הקבצים והשכבות עוזר לייצר תכנית עבודה מסודרת יותר. התוסף Renamy עוזר להכניס סדר לשמות גנריים ומכניס הגיון לקובץ שלא יהיה מורכב מ”ריבועים ועיגולים copy 2″…

כמובן שעבודה עם UI kit מוכן או מרכיבים שמורים שלכם תייצר תהליך מהיר ומבוסס יותר, בהנחה שאתם לא “כבולים” לעבוד תחת התבניות האלה.

איך לעצב בתבניות עם adobe illustrator

מלבד מה שכבר כתבתי כאן, על libraries. לillustrator כמה פיצ’רים בולטים שעוזרים לו בעבודה עם תבניות. קודם כל symbols לעבודה עם אלמנטים שחוזרים על עצמם.למשל לייצור אלמנטים וקומפוננטות. שימוש נוסף הוא Graphic styles שמאפשר להחיל בקלות סגנונות, כמו מצבים של כפתורים למשל.


לקריאה נוספת

כלי מעולה לעבודה עם מפתחים והגדרה של סטיילגייד –frontify.com

craft יש גם את הכלי הזה -למישהו יצא לעבוד איתו?

להשראה, מומלץ לראות עוד סטיילגיידס ב – http://styleguides.io/

לקריאה נוספת – אני באמת ממליץ את המאמר הזה, שמדבר על יצירתיות, תבניות ועוד הרבה דברים.