שיעור 7
מתחילים בעוד
גריד סיסטם
שיטת תכנון וארגון של תוכן ואלמנטים על גבי מסך, באמצעות חלוקה מובנית לקווים, עמודות ושורות, שמטרתה ליצור סדר, עקביות, קריאות וזרימה ויזואלית נכונה.
1. שוליים חיצוניים (Margins)
2. שוליים פנימיים (Paddings)
(3. טורים ושורות (Columns & Rows)
4. מרווח מפריד (Gutter)
5. ריווחים בין קבוצות אלמנטים
6. ריווחים בתוך קבוצות אלמנטים
7. ריווחים בטקסט, בין שורות ובין אותיות
מבנה מקטעים
חלוקת מלבנים חדה בן אזורים
מבנה כרטיסים
תוכן מחולק לכרטיסים
מבנה אחיד
מעברים חלקים בן אזורים
- מבנה מקטעים
הקלאסי והמאורגן ביותר. מצד אחד, מספק לגולשת חלוקה ברורה ומובנית של התוכן, מצד שני, מגביל את החופש היצירתי בעיצוב.
קומפוזיציה רדיאלית
היא סידור של אלמנטים בעיצוב בצורה המעגלית, כך שהם מסתדרים או מתפשטים ממרכז ספציפי לכיוון כל הצדדים, כמו קרני שמש שיוצאות ממרכז מעגל.
2. מבנה כרטיסים
קומפוזיציה סטטית
קומפוזיציה דינאמית
קומפוזיציה סימטרית
בקומפוזיציה סימטרית, האלמנטים בעיצוב מסודרים באופן שווה ומאוזן משני הצדדים של ציר מרכזי, כך שהחלקים בצד ימין הם הדימוי של הצד שמאל.
קומפוזיציה אסימטרית
בקומפוזיציה אסימטרית, האלמנטים אינם מסודרים באופן שווה. יש שימוש בקווים, צבעים וגדלים משתנים כדי ליצור עניין וזרימה, כאשר שני הצדדים של העיצוב אינם דומים זה לזה.
קומפוזיצית גריד
היא שיטה לעיצוב שבה האלמנטים מסודרים בתוך מערכת של שורות ועמודות (או רשת) המהווה מבנה ארגוני. השיטה אינה מחייבת שכל האלמנטים יהיו אחידים בגודלם, אך היא מספקת מסגרת שמבנה את הסידור הכללי בצורה מסודרת ומאורגנת. האלמנטים יכולים לתפוס מקום לא אחיד – כלומר, ניתן לשלב אלמנטים בגודל שונה, למקם תמונה או טקסט כך שיתפוס מקום גדול יותר או קטן יותר ביחס לשאר.
קומפוזיציה מרכזית
כאן, רוב האלמנטים ממוקמים סביב מרכז הדף או המסך, מה שגורם למוקד העין להיות ישירות במרכז. היא יוצרת תחושת יציבות והרמוניה.
9 עקרונות קומפוזיציה
כדי ליצור עיצוב שמרגש ומחבר, כדאי לשים לב ל- פשוטים אך רבי עוצמה
1. זרימת עין
2. קרבה
3. איזון ויזואלי
4. ניגודיות עומק
5. עיצוב נקי
6. רוחב מלא
7. שטח לבן
8. מסגרת ליצירה
9. אחידות
1.
זרימת עין
השתמשו באלמנטים מכווינים או סדר טבעי של תמונות + כותרות ← טקסט,
כדי להוביל את העין בצורה חלקה. כשאין אלמנטים מכוונים, העין נוטה באופן טבעי לרדת למטה.
2.
קירבה
ארגנו אלמנטים קשורים בקבוצות כדי לשמור על קשר ברור ביניהם. כשהאלמנטים נמצאים קרוב אחד לשני, זה עוזר להנחות את המשתמש להבין את ההקשר בצורה טבעית.
3.
איזון ויזואלי
העין מזהה חוסר איזון מיד. עיצוב מאוזן, סימטרי או אסימטרי, מאפשר למשתמשים להרגיש בנוח ולהתמצא באתר ללא מאמץ.
4.
ניגודיות ועומק
צרו הפרדה ברורה בין האלמנטים בעזרת שלוש רמות גודל: גדול, בינוני וקטן (אך קריא).
ויזואל מרכזי או כותרת ראשית – בגדול ובולט
כותרות משנה וכפתורים – בגודל בינוני ומאוזן
טקסט רץ ותפריט – קטן אך ברור
5.
עיצוב נקי
מה שלא חייב להיות בפנים חייב להיות בחוץ
6.
עיצוב ברוחב מתאים
אתר תדמית שנועד להרשים נשתמש ברוחב מלא
אתר תוכן/חנות לרוב נשתמש ברוחב תחום
7.
שטח לבן
זה האזורים הריקים בעיצוב – לא בהכרח בצבע לבן, אלא כל מקום שאין בו תוכן, תמונות או אלמנטים גרפיים.
8.
מסגרת ליצירה
שימוש באלמנטים שמגדירים או סוגרים את גבולות העיצוב, כך שהעין של הצופה תישאר בתוך התוכן ולא "תברח" החוצה.
9.
אחידות
שמירה על קו עיצובי עקבי בכל רחבי האתר, הן בין דפים שונים והן בתוך כל עמוד עצמו. זה כולל שימוש עקבי בצבעים, פונטים, כפתורים, ריווחים וסגנון גרפי בכל האזורים – מההדר, דרך התוכן המרכזי ועד לפוטר. אחידות יוצרת חוויית משתמש ברורה, זורמת ומקצועית.
