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

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

 החלק הבא (ג׳) יפורסם בקרוב

page devider קו הפרדה

חוקי הגשטאלט

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

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

Untitled-1

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

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

חוק הפשטות (Prägnanz) – בני אדם נוטים לפרש צורות מעורפלות או מורכבות – כצורות פשוטות ושלמות.

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

חוק ההמשכיות – אלמנטים המאורגנים על קו או על עֲקֻמָּה, נתפשים כקשורים יותר מאשר אלמנטים שאינם על קו או עקומה.

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

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

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

חוק החיבור  (uniform connectedness) – אלמנטים אשר ״מחוברים״ ע״י אלמנטים ויזואליים, נתפשים כיותר קשורים אחד לשני מאשר אלמנטים בודדים שאינם קשורים אחד לשני.

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

חוק הפָּרָלֶלִיזְם, הַקְבָּלָה – אלמנטים מקבילים אחד לשני נתפשים כיותר קשורים אחד לשני מאשר אלמנטים שאינם מקבילים.

חוק ״נקודת המוקד (הפוקוס)״ – הדגשה או שוני של אלמנט בקבוצת אלמנטים יוצר תשומת לב.

חוק ״חוויות העבר״ – הצופה נוטה לתפוש אלמנטים לפי נסיונו בעבר .

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

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

page devider קו הפרדה

בחלק הזה (ב׳) ובחלק ג׳ אתמקד ואסביר בפירוט את החוקים הבאים:
דמות/רקע, פשטות, דמיון, המשכיות.

page devider קו הפרדה

דמות רקע[מקור תמונה מקורית לפני עיבוד]

חוק ״דמות/קרקע״
״אלמנטים נתפשים או כדמות (האלמנט בפוקוס)
או קרקע (הרקע שעליה נחה הדמות)״

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

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

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

  • אזור – האובייקט הקטן מבין שני אובייקטים חופפים יכול להיתפש כדמות. האובייקט הגדול יותר ייתפש כקרקע. תוכלו לראות זאת בתמונה מצד שמאל. הצורה הקטנה יותר נתפשת כ״דמות״ ללא קשר לצבע. בעצם המוח תופש את התמונה כריבוע על גבי רקע.
    הִתְקַמְּרוּת – אובייקטים (/ תבניות) קמורים כ״דמות״, יותר מאשר אובייקטים (/ תבניות) קעורים.  

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

דמות רקע-1

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

page devider קו הפרדה

חוק הפָּשטוּת (Prägnanz):

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

 

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

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

page devider קו הפרדה

חוק החיבור
זהו החוק החזק ביותר מבין עקרונות הגשטאלט.

״אלמנטים אשר ׳מחוברים׳ ע״י אלמנטים ויזואליים,
נתפשים כיותר קשורים אחד לשני
מאשר אלמנטים בודדים שאינם קשורים אחד לשני.״

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

חוק החיבור

[מקור]

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

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

 4-molecules

[מקור]

page devider קו הפרדה

חוק הדמיון (ההקבלה)ֿ

חוק הדמיון (ההקבלה)

״אלמנטים אשר חולקים מאפיינים דומים נתפשים כקשורים
יותר מאשר אלמנטים שאינם חולקים מאפיינים אלה״

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

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

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

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

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

חוק החיבור לוגואים  [מקור – 1, 2]page devider קו הפרדה

חוק ההמשכיות

״אלמנטים המאורגנים על קו או על עֲקֻמָּה,
נתפשים כקשורים יותר
מאשר אלמנטים שאינם על קו או עקומה.״

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

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

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

המשכיות מתרחשת כאשר העין ״צריכה״ לעבור דרך אובייקט אחד ולהמשיך לאובייקט אחר.

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

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

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

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

 

הנה כמה לוגואים שמיישמים את חוק ההמשכיות:

לוגואים המשכיות

[מקור: 1, 2, 3, 4]

 

page devider קו הפרדה

הערות משנה

*במאמר זה נעשה שימוש רב במילה תְּפִישָׂה (שרבים כותבים מבטאים או כותבים אותה כ״תפיסה״). הכוונה היא לצורה שבה אנו מפרשים את המציאות שאנו קולטים דרך החושים שלנו. המילה מתורגמת מן המילה הלועזית perception. בפסיכולוגיה, תפיסה (או תפישׂה) היא התהליך של קליטה, פענוח וסיווג של מידע המגיע אלינו דרך החושים. התפיסה היא ההליך שהמידע עובר בין הקלטו בחושים לבין העיבוד הקוגניטיבי שלו. הפסיכולוגיה חוקרת את הדרך בה אנו מאחדים מידע חושי לרשמים כלומר לתוצרים תפיסתיים, וכיצד אנו משתמשים ברשמים אלו לצורך התנהלותנו בעולם. http://www.morfix.co.il/perception

** קומפוזיציה – לפי וויקיפדיה, באמנות, קוֹ‏מְפּוֹ‏זִיצְיָ‏ה היא תוצר היחסים בין אובייקט לבין מסגרת היצירה האמנותית, וכן בין האובייקטים השונים בתוך היצירה. הקומפוזיציה היא אמצעי מבע דומיננטי בכל תחומי האמנות החזותיים, במוזיקה, בקולנוע ובאמנויות הבמה. בבחירת הקומפוזיציה ממקם היוצר את האובייקטים ביצירה על מנת לכוון את האדם שנחשף ליצירה לנושאים מרכזיים ביצירה. קומפוזיציה היא מה שאנחנו קולטים בעין ובמוח או מסיקים מאופן ״הצבת״ האלמנטים ביצירה. השימוש של הקומפוזיציה בעיצוב הגרפי (ובאמנות) הוא שזו עוד שפה שבה אנו עושים שימוש על מנת להביא מסר, עוד טכניקה שעמה אנו מגרים את תודעת הצופה.

page devider קו הפרדה

רוצים להתנסות? בבקשה – ספוקן פולס קומיוניטי קולג׳ יצרה את התרגילים האלה (pdf)
http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestalt.pdf

page devider קו הפרדה

מקורות:

  1. מאדס סוגארד – גישות הגשטאלט לתפיסה צורנית
    ברק דנין – הגשטלט של הממשק

    מייקל טאק – עקרונות הגשטאלט ויישומם בעיצוב
    סאם המפטון-סמית׳ – מדריך המעצב לתיאוריית הגשטאלט
    סטיבן בראדלי – עקרונות העיצוב: תפיסה ויזואלית ועקרונות הגשטאלט (סמאשינג מגזין)
    סטיבן בראדלי – עקרונות הגשטאלט – איך העיצוב שלך נתפש?
    ספוקן פולס קומיוניטי קולג׳ – עקרונות הגשטאלט
    אנדי ראטלג׳ – עקרונות הגשטאלט
    ויקיפדיה – גשטאלט

קישורים וקריאה נוספת:

הם כנראה לא הבינו את הגשטאלט – 15 לוגואים גרועים (זהירות – תוכן מיני).

 

 

פוסט זה פורסם בקטגוריה כללי, עם התגים , , , , , , , , , , , , , , , , , , . אפשר להגיע ישירות לפוסט זה עם קישור ישיר.

2 תגובות על המדריך הבסיסי לעקרונות הגשטאלט החזותי (או איך להבין עיצוב) – חלק ב׳

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

  2. פינגבאק: מסך וניווט זה שם המשחק | schoolblo

כתיבת תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s