תוֹכֶן
מאמר זה הופיע לראשונה בגיליון 229 של המגזין .net - המגזין הנמכר ביותר בעולם עבור מעצבי אתרים ומפתחים.
אחד הדברים החשובים ביותר שאתה יכול להתמקד בהם בכל הנוגע להנחת דף ב- HTML / CSS הוא קצב אנכי - התבנית החזותית שאליה יוצרים גושי הסוג או שורות הסוג כשסורקים את הדף.
דברים אחרים יכולים להשפיע על קצב זה כגון כותרות, פריטי רשימה, תמונות וכו '. קצב אנכי טוב הוא בעל חשיבות עליונה מכיוון שהוא מסייע לקריאות ויכולת הסריקה של העמודים שלך.
יש לא מעט מדריכים נהדרים (ראה כאן וכאן, למשל) באינטרנט, בהם תוכל למצוא כיצד להשיג טכנית קצב אנכי נכון על ידי שימוש ב- ems לגובה הקו שלך וללמוד מה שומר על סוגך 'בשלב' אומר.
הִיֵרַרכִיָה
הדברים הבסיסיים שיש לשים לב אליהם הם גובה הקו בין האלמנטים וההיררכיה הוויזואלית הכוללת בדף. קביעת פרופורציות מתאימות לגובה הקו יכולה להיות תרגיל עיצוב מעורב אך חשוב לשלוט בו. היררכיה חשובה גם מכיוון שהתמונות ורכיבי הטקסט צריכים להיות בהרמוניה זה עם זה מבחינה ויזואלית - הדברים החשובים ביותר הם בדרך כלל גדולים יותר ומגיעים ראשונים לדף.
מעצבי הדפסים עסקו ברעיון של קצב אנכי במשך שנים רבות ורק בעבר האחרון מעצבי אתרים נאלצו להיכנס לדברים האלה. עם הצורך ההולך וגובר לבנות אתרים באמצעות פריסות רשת ולשים לב ליישומים רספונסיביים כדי להתאים לרוחבי מסך מרובים, חשוב יותר מאי פעם מנקודת מבט של עיצוב חזותי, כנראה יותר מאשר רק טכני.
חמש דוגמאות לבדיקה
1. האלמנטים של סגנון טיפוגרפי ספר זה של רוברט ברינגהרסט הוא הסטנדרט ללימודי טיפוגרפיה. קראו אותו, צרכו אותו, שפכו אותו למוחכם בכל דרך שתוכלו.
2. פרנק צ'יימרו מלבד היותו מדהים באופן כללי, העיצוב המחודש של האתר האישי של המעצב פרנק צ'יימרו מציג קצב אנכי מעולה. הוא משתמש באפקט פרלקסה כדי להניע את הקצב הביתה כשאתה גולל גם את הדף למטה.
3. דן סדרהולם לקבלת דוגמה טובה למקצב אנכי טיפוגרפי נהדר, עיין בבלוג של דן סדרהולם. גובה הקו של העותק והכותרות הוא בפרופורציה מושלמת.
4. מעבדת פוקוס חברת עיצוב ומיתוג אתרים פוקוס מעבדה משתמשת בהיררכיה בזריזות כדי לעזור לתקשר את החשוב ביותר למבקר.
5. טיפופונדר באתר הסטודיו לטיפוגרפיה טיפופונדר יש מקצב אנכי נהדר עם תמונות וטקסט. המרווח בין אלמנטים נמצא בפרופורציות ברחבי האתר וההיררכיה בין התמונה הראשית לתמונות / קטעים משניים מושלמת.
גלה 10 דוגמאות מדהימות לעיצוב ניסיוני ב- Creative Bloq.
