מגזינים מקוונים פשוט יפים

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

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

צבע

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

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

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

פרסום

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

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

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

ניווט

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

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

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

חסכון במקום

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

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

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

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

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

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

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

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

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

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

סריקות

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

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

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

הפוסט פורסם במקור בבלוג Netcraft.co.il

Avatar

נטלי ורטר

מעצבת גרפית בצוות ה-UX של חברת נטקראפט - http://www.netcraft.co.il

הגב

4 תגובות על "מגזינים מקוונים פשוט יפים"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
ליאור יאיר
Guest

המלצות מעולות. תודה נטלי.

ארז
Guest

מה יש במאמר הזה מעבר לפרסום חברת netcraft ?

מורן בר
Member

היי ארז,

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

הפוסט הזה מתאים באופן טבעי למעצבים.

ארז
Guest

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

דרך אגב אין לי שום דבר נגד נטלי וnetcraft הם חברה מצויינת

wpDiscuz

תגיות לכתבה: