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

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

1. צבעוניות

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

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

צבעוניות 1

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

צבעוניות 2

2. פרסום

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

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

פרסום 1

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

פרסום 2

3. ניווט

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

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

ניווט 1

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

ניווט 2

4. חסכון במקום

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

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

חסכון במקום 1

באתר The Sunday Times משתמשים בדרכים שונות לניצול מירבי של המקום. השהיית העכבר מעל נושא בתפריט הראשי פותחת Drop Down Menu ענק המציג לא רק את תתי הקטגוריות שלו אלא גם את הכתבות הנבחרות בנושא. בנוסף קיים בפינה הימנית העליונה רכיב המתנהג בצורה של Collapse: אשר מאפשר הרחבת מידע על נושא אחד בכל פעם. בהמשך הדף מופיעות כתבות על פי נושאים, תחת כל נושא מופיעות תתי הקטגויות עם אפשרות הצגת כתבה אחת בכל פעם.

חכסון במקום 2

5. עיצוב מבוסס גריד

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

למרות שרוב המגזינים שהראנו בפוסט זה בנויים על בסיס גריד, ב- San Francisco Magazine וב- Next Room השימוש בגריד בולט במיוחד. ניתן ממש לדמיין את השלד עליו התבססו בעיצוב האתר. הגריד מביא לתחושה חזקה של סדר ואחדות המייצרים אתר נעים ונוח לקריאה.

גריד 1

גריד 2

6. טיפוגרפיה כאלמנט עיצובי

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

שימו לב כי באתר ה- The New Yorker אין כמעט תמונות. הטקסטים והפונט המיוחד של הכותרות תופסים תפקיד משמעותי בשפה הגרפית של האתר.

טיפוגרפיה 1

באתר Rua de Baixo מלבד השימוש בצבעוניות עזה, אי אפשר שלא לשים לב לטיפוגרפיה הגדולה והייחודית המגדירה איזורים שונים באתר.

טיפוגרפיה 2

7. סריקות

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

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

סריקות 1

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

סריקות 2

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

Tennessee Vacation

Causecast

Clutch

Delicious

Ecoki

Turbojet Horizon

Housingworks

Kineda

Colors Magazine

Run Addicts

Los Angeles Times

T_Magazine

Relevant Magazine

Gulf News



2 תגובות לפוסט ”פשוט מגזינים יפים (יוני)“

  1. סקירה מצויינת !

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

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

לכתוב תגובה

(חובה לפחות לרשום שם!!!)

(...אף אחד לא יראה את זה)

(תפרסם/י את עצמך! שידעו מאיפה את/ה!)