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