תוכן ויזואלי כיוון מה שאתה צריך לדעת
ה כיוון ויזואלי של תוכן הוא פחות נדון, אבל היבט חיוני של המרת גבוהה עיצוב אתרים. כל מבקר "ספוג" אתר חדש על העומס בעמוד הראשון - אם הם עושים את זה במודע או לא.
אסתטיקה לעשות תפקיד, אבל זה יותר על הכוללת של העיצוב. תחושה זו יכולה להיות מושפעת על ידי שטח לבן, טיפוגרפיה, סימטריה, אבל בעיקר יחסים בין אלמנטים בדף.
מעצבים רוצים מבקרים להישאר על הדף ו המשך לגלול על ידי לכידת תשומת הלב שלהם לשמור אותם מעוניינים באתר. עקרונות התכנון צריכים תמיד להתמקד על פונקציה לפני הטופס. משמעות הדבר היא העיצוב צריך משלימים את התוכן, לא לדחוף אותו כמו במחשבה שנייה.
בהודעה זו, אני רוצה להראות לך כמה טיפים על איך אתה יכול לשפר את הפריסות שלך ואת זרימת התוכן החזותי באתר שלך.
דגש על הרכב
כל פיסת אתר אינטרנט בונה על הפריסה הכוללת. פריסה כוללת זו יוצרת קומפוזיציה העוקבת אחר כללי תורת הגשטאלט הקובעת זאת השלם תמיד גדול מסכום החלקים.
אזורים בודדים של דף באים יחד טופס שלם. אלמנטים עיצוביים צריכים לבנות כוח המשיכה על התוכן; הכל על הדף צריך באופן טבעי להנחות את המבקרים למטה עד שהם מגיעים לתחתית הדף.
זו הסיבה מדוע היחסים בין חלקים שונים של התוכן (חזותיים, טקסט, כפתורים, וכו ') משנה כל כך הרבה לעצב.
המטרה שלך צריכה להיות לעודד אנשים כדי לגלוש באתר מתוך היצר שלהם. זה קל לומר מאשר לעשות, אבל אתה יכול ללמוד הרבה על ידי לומד דוגמאות אמיתיות.
דף הבית של Monkop הוא דוגמה מצוינת של היררכיה חזותית עם הן טקסטים חזותיים. שטח רב משמש בין אלמנטים, והטיפוגרפיה משלימה את האיורים הווקטוריים הממותגים.
כפי שאתה לגלול, תוכל להבחין בלוקים ישרים אופקיים מחולק צבעים, גבולות וגרפיקה. אלה בנויים עם תבניות עיצוב בראש עקביות לאורך הדף.
למטה, תמצא פיצול שני עמודים עם תמונות בצד אחד, טקסט על השני. גם התמונות הצדדים להחליף בדוגמה של ימין-שמאל-שמאל-שמאל. זה מושך תשומת לב, ו שובר את המונוטוניות של הדף טיפוסי עדיין שמירה על זרימה טבעית בתוכן.
א אסתטיקה עיצוב דומה ניתן למצוא באתר האינטרנט של Picjumbo, דף נחיתה עבור תוסף תמונה עבור משתמשי Photoshop ו- Sketch.
דף הבית ממקדים את הלוגו ואת הלוגו של התצוגה המקדימה. בעת הגלילה, תראה הנפשות מותאמות אישית שינועו לאורך הדף. זה אנימציה באמת לוכדת את תשומת הלב, ומקבל את הצופה מעוניין לשמור על גלילה.
בסך הכל, הדף מרגיש פתוח ו קל לעיין. התוכן הוא מחולק בלוקים אופקי עם טיפוגרפיה חדות וסמלים נקיים.
שקול את הדרך אלמנטים שונים בדף לאזן יחד, את החלל בין אלמנטים, ניגודיות בין צבעים, וצורות שונות. כל הדברים האלה ממלאים תפקיד בהרכב הכולל. כל אתר באופן טבעי מצייר משקל מסוים על התוכן.
אין תשובה מוחלטת כי זה שונה עבור כל אתר. לדוגמה, כמה קישורי ניווט נראים טוב יותר כאשר הם גדולים ו oversized. אחרים מתאימים יותר כאשר הם קטן עם אותיות רישיות.
אני מציע לך ללמוד אתרים אחרים בנישה שלך. באמת לנתח איך הם להרכיב. אפילו לנסות לבנות מחדש פריסות לראות אילו אלמנטים סוף סוף להפוך את העיצוב "לבוא יחד".
סוג עיצוב נושאים
הדרך שבה אתה מעצב את טיפוגרפיה יהיה להשפיע על כיוון התוכן באתר שלך. זה קשור היררכיה סוג ואת עיצוב סגנונות של אלמנטים שונים בדף כמו פסקאות, כותרות, רשימות תבליטים, ציטוטים ופריסות מיוחדות כגון עמודות או טבלאות.
חזותיים יכול להשפיע על הפריסה מדי, אז זה רעיון טוב לעצב תוכן עם התקדמות טבעית. כתוב תוכן באופן זה זורם במורד הדף, ו שומר על קריאת אנשים באמצעות כל פסקה.
הכלי הגדול ביותר שיש לך לרשותכם הוא העין שלך לעיצוב. למד לזהות את ההבדלים באלמנטים טיפוגרפיים, וכיצד הם מתייחסים לאלמנטים אחרים בדף. צור קשרים בין קטעי דף כדי להבחין בין תחומי תוכן.
כמה דברים שאתה עשוי לשקול:
- גודל טקסט
- משפחת גופן
- ניגודיות צבעים
- מקטע יחסי דף
- גובה שורות ושולי פסקה
- ריווח אותיות וגבוה / קטן
לדוגמה, עיין בדף הבית של Campaign Monitor. הקישורים העליון ניווט להשתמש בכל כובעים עם אותיות קטנות. כותרות אחרות בדף בצע את כל אותו כמוסות עיצוב איזה יוצר תחושה של אחידות.
כותרות גדולות אחרות באתר הן הרבה יותר בולט, והם באמת לקפוץ מעל הדף. רק על ידי מסתכל על עיצוב כותרת טיפוסית, זה צריך להיות קל להבדיל בין כותרת לבין עותק הגוף המשויך שלה.
סגנונות העיצוב הטיפוגרפי ב- Campaign Monitor הם מעולים, והם למזג באופן טבעי לתוך הפריסה. זה לוקח בפועל כדי להשיג תוצאה כזאת, אבל ככל שתנסה יותר, כך יהיה קל יותר.
כדי ללמוד קצת יותר, אני ממליץ בחום על הקישורים הבאים:
- עקרונות עיצוב: משקל ויזואלי חזותיים
- עבודה עם משקל חזותי של עיצובים שלך
- גורמים המשפיעים על מאזן הרכב
תוכן מנחה
להבין את זה סוגים שונים של אתרי אינטרנט יש שיטות שונות להנחיית מבקרים דרך האתר. לדוגמה, דפי נחיתה מעוניינים להנחות את המבקרים מערכי מידע, סמלים קטנים, צילומי מסך, ו עדויות.
אתרים אחרים כמו בלוגים בדרך כלל לא מביאים אנשים לדף הבית בבת אחת. רוב האנשים ארץ על דף המאמר, כך הבלוג לכתוב פריסות נועדו הדגש את הכותרת, ולצייר אנשים התוכן. זה המקום שבו איכות copywriting נכנס לשחק כי אתה רוצה הקוראים תלויים כל מילה.
רשתות חברתיות ויישומי אינטרנט צריכים חוויית משתמש איכותית, אז זה נושא מעט שונה, אבל שקול איך להאכיל פייסבוק נועד לעודד גלילה אינטראקציה המשתמש.
שיטות העיצוב שאתה משתמש כדי לשמור על אנשים הגלישה באתר יהיה שינוי לאורך זמן. אבל בדרך כלל, המטרה שלך היא מדריך מבקרים עם כיוון תוכן חזותי.
בואו נסתכל על דף נחיתה א עיצוב הבלוג כדי לזהות את ההבדלים.
קקטוס הוא אתר גנרטור סטטי עבור OS X. דף הבית שלהם עוקב מקרוב סגנון העיצוב של אפל - שפע של שטח לבן וגופני Sans-serif דקים.
התוכן מאורגן בעמודות, בלוקים וגושי טקסט עם גרפיקה פשוטה. אלה אסתטיקה זהה משותף עם מוצרי Apple, כך משתמשי Mac ייהנו בסגנון העיצוב הזה.
מידע על המוצר - כולל תכונות והתקנה - מפורטות בדף הבית. הדף עצמו מעודדת גלילה באמצעות תוכן ייחודי, סמלים בסיסיים, וכן דפוס עמודה לסירוגין של בלוקים תוכן שמאל / ימין.
המטרה כאן היא לספק מידע משתמשים קיימים, ולמכור משתמשים חדשים את הרעיון של קקטוס.
עכשיו להשוות את העיצוב לדף הבית עבור האינטרנט הבא. התוכן הוא הרבה יותר ספוראדי בדף הבית של הבלוג, כי יש הרבה נושאים שונים לכתוב.
מלבנים ליצור מערכת רשת כי encapsulates הודעות מרובות לתוך פריסה אחת. המטרה כאן היא לקבל משתמשים לקרוא תוכן באתר. זה לא משנה אם מבקרים להוריד משהו, אבל זה משנה אם הם להישאר בסביבה כדי לקרוא משהו.
הדרך להגיע אנשים קוראים עם תמונות מצוינות ו כותרות. TNW עושה עבודה נהדרת של זה, ואת הפריסה שלהם בנוי כדי לשמור על אנשים גלישה עם תמונות ממוזערות פוסט בנושא בסרגל הצד ולאחר תוכן באזור.
הדרכת מבקרים לפעולה מסוימת שונה בכל אתר. אבל אתה יכול ללמוד הרבה על ידי למידה מה אתרים מוצלחים אחרים לעשות, וללמוד כיצד להעתיק.
אמון העיניים שלך
תכונות עיצוב הפרט ניתן להסביר בצורה אנליטית, אבל השינויים יישום עבור כל אתר. תמונת גיבור עם קישור "גלילה נוספת" אינו מבצע אותו הדבר בכל אתרי האינטרנט.
הלמידה לעצב היא מאוד תהליך חזותי. העין שלך לעיצוב היא ההיבט החשוב ביותר. אתה צריך לראות דברים כמו שצריך לזהות את זה היררכיה חזותית. אם אתה יכול לראות את זה באתרים אחרים ואז תוכל לשכפל את זה באתרים שלך.
העצה הטובה ביותר שיש לי היא רק לבטוח בעיניים שלך. צור רשימה של האתרים המועדפים עליך, והשקיע 5 דקות בגלישה אחת. רשום את הרכיבים המועדפים עליך בדף, וכיצד הם משפיעים על העיצוב. זה יעזור לך להפנים מושגים אלה מנקודת מבט של UI / UX, במקום בפרספקטיבה של משתמש.
גם לא לפחד לנסות דברים! אף אחד לא היה טוב בעיצוב פשוט על ידי קריאת מאמרים על עיצוב. כן, הם עוזרים - הם יכולים למעשה לעזור הרבה. אבל אתה צורך ל ליצור דברים מאפס כדי ללמוד מה עובד ומה לא.
רכבת העין שלך על ידי לימוד פריסות אתר שאתה אוהב, מחדש אותם. עם הזמן, תוכל לבנות ספריית דפוס בראש שלך מה שהופך את עיצוב אתרים חדשים הרבה יותר קל.
מסיימים
אני מקווה, טיפים אלה יסייעו לך להתחיל ולתת לך מפת דרכים בסיסית לעקוב. זה לא קל להיות מעצב אינטרנט, אבל העולם עושה צריך כשרון, וזה מעולם לא היה קל יותר ללמד את עצמך אלה מושגי יסוד.
לימוד את הדוגמאות הטובות ביותר של אתרי אינטרנט עם אלמנטים הדף אתה נהנה. רכבת את העין לזהות יחסים, ואתה במהירות לפתח את הכישורים הדרושים לשכפל אלה יחסים בעבודה שלך.
